13、Gantt 甘特图元素的工具提示
作者：互联网
1 gantt.plugins({
2 tooltip: true
3 });
4 // tooltip 自定义
5 gantt.templates.tooltip_text = function (start, end, task) {
6 const equipmentCodes = (task.equipmentList || []).map((v) => v.equipmentCode).join('，');
7 const inChargeName = task.inChargeName ? task.inChargeName : '';
8 switch (task.type) {
9 case 'project':
10 return (
11 '<b>阶段：</b> ' +
12 task.taskSpecification +
13 '<br/>' +
14 '<b>开始时间：</b> ' +
15 formatToDate(task.start_date) +
16 '<br/>' +
17 '<b>结束时间：</b> ' +
18 formatToDate(task.end_date) +
19 '<br/>' +
20 '<b>持续时间：</b> ' +
21 task.duration +
22 '天'
23 );
24 break;
25 case 'task':
26 return (
27 '<b>工单：</b> ' +
28 task.taskSpecification +
29 '<br/>' +
30 '<b>开始时间：</b> ' +
31 formatToDate(task.start_date) +
32 '<br/>' +
33 '<b>结束时间：</b> ' +
34 formatToDate(task.end_date) +
35 '<br/>' +
36 '<b>持续时间：</b> ' +
37 task.duration +
38 '天<br/>' +
39 '<b>关联设备编码：</b>' +
40 equipmentCodes +
41 '<br/>' +
42 '<b>负责人：</b> ' +
43 inChargeName +
44 '<br/>' +
45 '<b>实际结束时间：</b> ' +
46 (task.taskCompleteTime ? formatToDate(task.taskCompleteTime) : '')
47 );
48 break;
49 case 'milestone':
50 return (
51 '<b>前置条件：</b> ' +
52 task.taskSpecification +
53 '<br/>' +
54 '<b>开始时间：</b> ' +
55 formatToDate(task.start_date) +
56 '<br/>' +
57 '<b>结束时间：</b> ' +
58 formatToDate(task.end_date) +
59 '<br/>' +
60 '<b>持续时间：</b> ' +
61 task.duration +
62 '天' +
63 '<br/>' +
64 '<b>实际结束时间：</b> ' +
65 (task.taskCompleteTime ? formatToDate(task.taskCompleteTime) : '')
66 );
67 break;
68 }
69 };
tootips 的扩展
https://docs.dhtmlx.com/gantt/desktop__tooltips_ext.html
以下代码是自定义Tooltips。
1 <div :style="getTooltipsStyle" class="gantt-customer-tooltip"> 2 。。。。。。 3 </div>
1 const ganttData = reactive<{
2 // tooltip样式
3 isTooltipStatus: boolean;
4 // tooltip详情
5 tooltipData: object;
6 }>({
7 isTooltipStatus: false,
8 tooltipData: {
9 pageY: 0,
10 pageX: 0,
11 },
12 });
1 // 为指定的甘特图元素添加工具提示。它是attach()方法的更简化版本。该方法将带有工具提示详细信息的对象作为参数
2 gantt.ext.tooltips.tooltipFor({
3 // 甘特元素的 CSS 选择器，用于添加工具提示
4 selector: '.gantt_grid [' + gantt.config.task_attribute + ']',
5 html: (event) => {
6 if (ganttObj.config.touch && !gantt.config.touch_tooltip) {
7 return;
8 }
9
10 const targetTaskId = gantt.locate(event);
11 if (gantt.isTaskExists(targetTaskId)) {
12 const task = gantt.getTask(targetTaskId);
13 return gantt.templates.tooltip_text(task.start_date, task.end_date, task);
14 }
15 return null;
16 },
17 // 定义模块是在整个页面上侦听鼠标事件 ( true ) 还是仅在甘特元素 ( false )内侦听。默认情况下，该选项设置为false
18 global: true,
19 });
20 gantt.ext.tooltips.attach({
21 // 甘特元素的 CSS 选择器，用于添加工具提示
22 selector: '.gantt_grid [' + gantt.config.task_attribute + ']',
23 onm ouseenter: (event) => {
24 // console.log('onmouseenter', event);
25 const targetTaskId = gantt.locate(event);
26 if (gantt.isTaskExists(targetTaskId)) {
27 const task = gantt.getTask(targetTaskId);
28 const equipmentCodes = (task.equipmentList || [])
29 .map((v) => v.equipmentCode)
30 .join('，');
31 const inChargeName = task.inChargeName ? task.inChargeName : '';
32 // return gantt.templates.tooltip_text(task.start_date, task.end_date, task);
33 ganttData.isTooltipStatus = true;
34 task.equipmentCodes = equipmentCodes;
35 task.inChargeName = inChargeName;
36 task.pageX = event.pageX;
37 task.pageY = event.pageY;
38 ganttData.tooltipData = task;
39 }
40 },
41 onm ousemove: (event) => {
42 // console.log('onmousemove', event);
43 },
44 onm ouseleave: (event) => {
45 // console.log('onmouseleave', event);
46 ganttData.isTooltipStatus = false;
47 ganttData.tooltipData = {
48 pageY: 0,
49 pageX: 0,
50 };
51 },
52 // 定义模块是在整个页面上侦听鼠标事件 ( true ) 还是仅在甘特图元素内部 ( false )侦听。默认情况下，该选项设置为false。
53 global: true,
54 });
1 ganttObj.ext.tooltips.tooltip.show = function (event) {
2 // console.log('show', event);
3 const targetTaskId = ganttObj.locate(event);
4 if (ganttObj.isTaskExists(targetTaskId)) {
5 const task = ganttObj.getTask(targetTaskId);
6 const equipmentCodes = (task.equipmentList || [])
7 .map((v) => v.equipmentCode)
8 .join('，');
9 const inChargeName = task.inChargeName ? task.inChargeName : '';
10 ganttData.isTooltipStatus = true;
11 task.equipmentCodes = equipmentCodes;
12 task.inChargeName = inChargeName;
13 task.pageX = event.pageX;
14 task.pageY = event.pageY;
15 ganttData.tooltipData = task;
16 }
17 return event;
18 };
1 // 设置tooltip的右偏移(如果是正的) 2 gantt.config.tooltip_offset_x = 300; 3 // 设置工具提示位置的顶部偏移量(如果是正的) 4 gantt.config.tooltip_offset_y = 300; 5 // 设置在隐藏工具提示之前的时间长度，以毫秒为单位 6 /*ganttObj.config.tooltip_hide_timeout = 10000;*/
标签：13,task,const,inChargeName,Gantt,甘特图,tooltip,gantt,event 来源： https://www.cnblogs.com/lynn-600/p/16243027.html