vue使用甘特图(实现树形结构/一条数据显示双时间轴)

前言:
1.代码是用手机敲的，可能会存在1.2处写错的情况，还望见谅
2.实现标题的基本api都是有的，每行API我都写了对应功能注释在头上。
3.可以在csdn上下载一些dhtmlx-gantt的文档和demo来先看一看，再结合下面的api使用，效果更佳(csdn上大多是4.0左右版本，理论上也可以使用)

1.引用甘特图:
impot gantt from “dhtmlx-gantt”
这里引用7.0.7版本本，dhtmlxgantt.css也注意引入

2.在mounted里面initGanttConfig()〈初始化配置数据〉和getGanttData()〈放入数据〉

3.initGanttConfig为:
{
let _this=this;
_this.config.columns=[ //配置左侧树
{name:“mc”,label:“名称”,tree:true,width:150},
{name:“age”,label:“年龄”}
],
//渲染右侧条的进度
gantt.template.process_text=function(start,end,Task){
return “” //返回html字符串
}
//是否只读，不要条上的拉动操作
gantt.config.readyonly=true
//条的高度
gantt.task_height=20
//行的高度
gantt.row_height=60
//使用中文
gantt.i18n.setLocale(“cn”)
//右侧条中间元素显示
gantt.template.task_text=function(start,end,task){
return task.jhmc
}
//鼠标移动上去的文字显示
gantt.template.tooltip_text=function(start,end,task){
return “” //你想渲染的节点样式
}
//左侧table的宽度
gantt.config.grid_width=450
//右侧时间跨服的调整
gantt.config.scales=[{
unit:“day”,step:1,format:“%j日”
},{unit:“hour”,step:12,format:function(date){return ${moment(date).format("HH")}时}}]
//初始化
gantt.init(this.ref.gantt)
//点击事件
gantt.attachEvent(“onTaskSelected”,id=>{
this.ganttSelected=id
})

最核心的代码，增加第二根条的样式，在7.0版本会报错，需要在源码里面注释掉delete addTaskLayer这行代码，因为什么原因把他废弃掉了
gantt.addTaskLayer(function show_hidden(task){
let child_el,sub_height=20;
el=document.createElement(“div”)
sizes=gantt.getTaskPosition(task,this.date1,this.date2)
//注意，date1和date2都是new Date()的时间格式，在这里确定了第二根条的主要位置
child_el=createBox({height:sub_text,top:sizes.top+40,left:sizes.left,width:sizes.width},task)
el.appendChild(child_el);
//这里createBox是我自己的方法，根据长宽高创建Box
return el;
})
//根据条的状态绘制不同的条颜色，是对整条颜色的修改
gantt.templates.grid_row.class=gantt.template.task_class=function(start,end,task){
let css=[]
if(true){css.push(task-finish);
else{css.push(task-out)}}
}
return css.join(" ");
}

实现树形结构主要需要前端gantt.config.column配置一行的参数tree为true，传入的数据通过id和parent去确定父子关系，并且要求为确定的数组对象结构

附加2个功能

//画父子关系线的操作
遍历返回的数组节点数据，把有父节点的数据进行绘制就好
data.forEach(item=>{
if(item.hasOwnProperty(sjjhnm){
links.push({
id:item.id,
source:item.sjjhnm,//上级jhnm
target:item.jhnm,
type:“1”
})
})
})
this.ganttData.links=links

//修改时间刻度的方法
unit:month day hour 月，日，时
对应format参数为 %F %j日 小时见上

//绘制竖线的方法
gantt.addMarker({
start_date:time, //这个time是new Date()格式
css:“”, //你想附加的样式
text:“”, //显示的文本
title:“” //标题
})
单似乎7.0版本不支持这个方法，我看了源码，也找到了这个方法，不知为何一直在报错，因为项目进度的原因，没有去深入研究

后面又有项目需要甘特图，更换了一种更友好的甘特图组件gantt-elastic，使用起来更加方便，实现效果也更好，详情见我个人空间最新的一篇关于甘特图的文章。