公司开始了一个为钢材工厂-进行合同任务智能排期的项目，经过探索git上多个甘特图插件的研究最终决定使用DHTMLX-GANTT插件（除了pro版本其余均开源），贴上自己实现的小demo~~~: 本demo实现所遇难点：

停产排期
每个任务添加自定义标记

由于pro版本需要付费，自己最终通过塞dom的方式实现了。。。 实现思路：

给带有停产期的任务自定义class
获取class的dom，自定义停产期span和停产期span基础样式（高度，背景色等基础）
计算停产期span的left值

每个列是70px
shutdown_start_date:停产期开始时间
task_start：任务开始时间
left = (((shutdown_start_date - task_start) / 1000 / 24 / 60 / 60 -
new Date(task.start_date).getDate()) *70 + taskParent[i].offsetLeft
width = ((shutdown_end_date - shutdown_start_date) / 1000 / 24 / 60 / 60 + 1) * 70

1. 安装

命令：npm install dhtmlx-gantt

引入模块前端甘特图-dhtmlx-gantt插件

dhtmlxgantt是进行甘特图开发过程中所用到的插件库，用于跨浏览器和跨平台应用程序的功能较为齐全的Gantt图表。其祖家组件为一个JavaScript库，提供了一套完整的Ajax驱动的UI组件。(依照智能排产系统甘特图demo来演示)

官网：Dragging Tasks within the Timeline Gantt Docs

在线demo: Gantt : Samples

api文档：Events Gantt Docs

2. 安装

命令：npm install dhtmlx-gantt

3. 引入模块

import { gantt } from 'dhtmlx-gantt'

css样式引入：

@import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

4. 配置

进行初始化前先清空之前配置

gantt.clearAll() //清空之前的配置

(1)默认配置

gantt.config.xml_date = '%Y-%m-%d'

gantt.i18n.setLocale('cn') // 设置中文

(2）基础配置

const ganttConfig = reactive({

scale_unit: 'day', //显示单位 ( “minute”, “hour”, “day”, “week”, “quarter”, “month”, “year”)

date_scale: '%Y-%m-%d', // 日期格式

autosize: true, // 自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务

drag_project: true, //允许拖拽

readonly: false, //只读模式

show_grid: true, //是否显示左侧树表格

scale_height: 50, //设置甘特图表头高度

placeholder_task: false, //新增空白列后新增项目

details_on_create: true, //创建新事件通过点击”+“打开

open_split_tasks: true, //激活列表展开、折叠功能

show_links: true, //是否显示依赖连线(取消)

show_tasks_outside_timescale: true, // 允许显示超过时间刻度任务

fit_tasks: true, //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度

autoscroll: true,

subscales: [

//配置时间规模，右上方日历

{

unit: 'month',

step: 1,

format: '%M',

{

unit: 'day',

step: 2,

format: '%d',

scales: [

// 日期

{ unit: 'month', step: 1, format: '%F, %Y' },

{ unit: 'day', step: 1, format: '%j, %D' },

})

5. 使用

1. task(任务)

可自定义增加变量显示

id：任务标识，可用来标识父子关系、连接links等

start_date,end_date：项目开始截至时间 Date|string //（‘14-07-2022’）

text：文本，任务的显示文字

progress：项目的进度，用颜色深浅显示

parent：父子关系(id标识)；子任务的parent为父任务的id

type：任务类型，有三种，object，task，milestone；

object：没有时间限制，长度为包含所有子任务的长度

task：普通任务

milestone：菱形块，可表示中转关系

color:改变任务块的颜色

links(连线)

//type:'0'是从1任务完成到2任务开始，type:'1'是1任务开始到2任务开始，

//type:'2'是从1任务完成到2任务完成，type:'3'是从1任务开始到2任务完成

2. 数据结构

3. columns(指定列)

4. scales(时间轴)

单位包含：年，月，周，日等；需要特殊标识可以使用方法

可以动态切换时间轴的单位

5. markers(标记)

5.dhtmlxGantt甘特图API精华总结

（1）获取任务节点部分

（2）位置相关

（3）消息弹窗

（4）标记标签

6. import { gantt } from 'dhtmlx-gantt'