- 这几天在用dhtmlx实现甘特图，发现dhtmlx非常不好看，网上查了一下vue2项目中使用dhtmlx gantt甘特图插件，这篇文章最后有样式的修改但是不符合我的需求。
直接上效果
- 修改前
- 修改后
修改方法
- 去掉文件夹图标
/* 去掉文件夹图标 */
::v-deep .gantt_tree_icon {
&.gantt_folder_closed,
&.gantt_file,
&.gantt_folder_open {
display: none
}
}
- 在data里新增加一个字段，我这个边是新增了type字段，通过判断type来决定是哪个图标的
data: [
{ "id": "1635835705701744641", "text": "345分项工程分项工程分项工程", "type": "task", "start_date": "2022-12-01", "beginTime": "2022-12-01", "endTime": "2023-03-14", "limitTime": 103, "duration": 103, "progress": 93 },
{ "id": "1635835705701744642", "text": "111", "type": "task", "start_date": "2023-03-14", "beginTime": "2023-03-14", "endTime": "2023-03-17", "limitTime": 3, "duration": 3, "progress": 1 },
{ "id": "1635835705701744643", "text": "分项工程", "type": "task", "start_date": "2023-03-13", "beginTime": "2023-03-13", "endTime": "2023-03-23", "limitTime": 10, "duration": 10, "progress": 1 },
{ "id": "1635835705701744644", "text": "分项工程1", "type": "task", "start_date": "2023-03-30", "beginTime": "2023-03-30", "endTime": "2023-04-20", "limitTime": 21, "duration": 21, "progress": 1 },
{ "id": "1635835705701744645", "text": "分项工程2", "type": "task", "start_date": "2023-03-21", "beginTime": "2023-03-21", "endTime": "2023-03-29", "limitTime": 8, "duration": 8, "progress": 1 },
{ "id": "1635835705701744646", "text": "分项工程3", "type": "task", "start_date": "2023-03-23", "beginTime": "2023-03-23", "endTime": "2023-03-31", "limitTime": 8, "duration": 8, "progress": 1 },
{ "id": "1635835705701744647", "text": "6", "type": "task", "start_date": "2023-03-29", "beginTime": "2023-03-29", "endTime": "2023-03-30", "limitTime": 1, "duration": 1, "progress": 1 },
{ "id": "1635835705701744648", "text": "1", "type": "task", "start_date": "2023-03-16", "beginTime": "2023-03-16", "endTime": "2023-03-17", "limitTime": 1, "duration": 1, "progress": 1 },
{ "id": "1635835705701744649", "text": "999", "type": "task", "start_date": "2024-08-31", "beginTime": "2024-08-31", "endTime": "2024-02-29", "limitTime": 182, "duration": 182, "progress": 1 },
{ "id": "1635835705701744611", "text": "里程碑", "type": "milestone", "start_date": "2024-08-31", "progress": 0 }
],
- 在gantt.config.columns数组中添加对应type的对象
{
name: 'type',
label: '', //
tree: true,
width: '50',
align: 'rigth',
template: function (obj) {
if (obj.type == 'milestone') {
// 如果是里程碑的话就是旗帜的图片
return `<svg t="1717741826427" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4298" width="25" height="25"><path d="M248.2 154.2s93.6-107.9 323.2-21.6C774.2 208.8 905.7 164 905.7 164l-75.1 212.5L905.7 580s-187.8 98.4-394.5-9c-150.3-83.4-263 22.1-263 22.1V154.2z" fill="#C0C3C6" p-id="4299"></path><path d="M116.7 960.2c-10.4 0-18.8-8.4-18.8-18.8V114.9c0-10.4 8.4-18.8 18.8-18.8s18.8 8.4 18.8 18.8v826.5c0 10.4-8.4 18.8-18.8 18.8zM716.1 640.3c-63.4 0-137-12.9-213.5-52.7-137.3-76.1-240.5 18.2-241.5 19.1-5.5 5.1-13.4 6.5-20.3 3.5s-11.3-9.7-11.3-17.2V154.2c0-4.5 1.6-8.9 4.6-12.3 4.2-4.8 105-116.8 343.9-26.9 193.2 72.6 320.4 31.6 321.7 31.2 6.9-2.3 14.3-0.5 19.4 4.6 5 5.1 6.7 12.7 4.3 19.4l-72.9 206.1 72.8 197.2c3.3 8.9-0.6 18.8-8.9 23.2-5.1 2.6-85.4 43.6-198.3 43.6z m-321-119.9c37.5 0 79.9 9 125.3 34.2C683 639.1 834.9 589.5 882 570.1L812.9 383c-1.5-4.1-1.5-8.6-0.1-12.8l63.7-180.3c-53.4 9-164.2 15.7-311.8-39.8C377.3 79.7 287.5 143.8 267 162v394.7c27.9-16.6 72.7-36.3 128.1-36.3z" fill="#2E3742" p-id="4300"></path></svg>`
} else {
// 如果是任务的话就是任务的图片
return `<svg t="1717742545222" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5948" width="16" height="16"><path d="M831.825474 63.940169H191.939717C121.2479 63.940169 63.940169 121.2479 63.940169 191.939717v639.885757C63.940169 902.517291 121.2479 959.825022 191.939717 959.825022h639.885757c70.691817 0 127.999548-57.307731 127.999548-127.999548V191.939717C959.825022 121.2479 902.517291 63.940169 831.825474 63.940169zM895.884854 831.998871A63.835408 63.835408 0 0 1 831.912173 895.884854H192.087827c-17.112123 0-33.270563-6.574639-45.372232-18.67631S127.880338 849.110994 127.880338 831.998871V192.001129A64.236389 64.236389 0 0 1 192.087827 127.880338h639.824346A64.037705 64.037705 0 0 1 895.884854 192.001129v639.997742z" fill="" p-id="5949"></path><path d="M791.998335 351.851551h-255.999097a31.970084 31.970084 0 0 0 0 63.940169h255.999097a31.970084 31.970084 0 0 0 0-63.940169zM791.998335 607.973471h-255.999097a31.970084 31.970084 0 0 0 0 63.940169h255.999097a31.970084 31.970084 0 0 0 0-63.940169zM344.001722 527.997686c-61.855792 0-111.985607 50.144265-111.985607 111.985606s50.144265 111.985607 111.985607 111.985607 111.985607-50.144265 111.985606-111.985607-50.129815-111.985607-111.985606-111.985606z m33.982213 145.982269a48.045438 48.045438 0 1 1 14.088511-33.982213 47.745605 47.745605 0 0 1-14.088511 33.985826zM417.395643 297.394035L311.999125 402.78694 270.6078 361.392003a31.970084 31.970084 0 1 0-45.213286 45.213285l63.997968 64.001581a31.970084 31.970084 0 0 0 45.213286 0l127.999548-127.999549a31.970084 31.970084 0 0 0-45.209673-45.213285z" fill="" p-id="5950"></path></svg>`
}
}
},
- 可能图片不居中，可以通过调整css样式
::v-deep .gantt_tree_content {
display: flex;
align-items: center;
}
总结：实现原理就是新增加一列，然后对于不同的参数去显示不同的样式。如果还有改进的地方可以交流交流。
