在vue中展示甘特图

• 今天分享一篇关于查看任务的甘特图的文章
• 首先，用的插件是dhtmlx-gantt，官网地址https://docs.dhtmlx.com/gantt/
  官网的Getting started模块是查看甘特图的各种配置

第一步下载

npm install dhtmlx-gantt --save 或者 yarn add dhtmlx-gantt

接下来是具体代码详细说明

一、子组件模板

<template>
  <div ref="gantt" style="width:100%;height:550px"></div>
</template>

二、需要引入的组件

import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/locale/locale_cn.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js";

三、需要在mounted定义相关格式

①设置日期格式

gantt.config.date_format = "%Y-%m-%d %H:%i:%s"; //  设置日期格式
gantt.config.readonly = true;   //只读模式
gantt.config.duration_unit = "day"; // minute, day, month

②显示操作按钮

var colHeader = '<div class="gantt_grid_head_cell gantt_grid_head_add" οnclick="gantt.createTask()"></div>'
// 按钮
var colContent = function (task) {
return  ('<div class="fa gantt_button_grid gantt_grid_edit fa-pencil" οnclick="clickGridButton(' + task.id + ', \'edit\')"></div>' +
	'<div class="fa gantt_button_grid gantt_grid_add fa-plus" οnclick="clickGridButton(' + task.id + ', \'add\')"></div>' +
	'<div class="fa gantt_button_grid gantt_grid_delete fa-times" οnclick="clickGridButton(' + task.id + ', \'delete\')"></div>');
};

③日期列显示

第一种写法

gantt.config.min_column_width = 60;
gantt.config.scale_height = 30 * 2;
gantt.config.scales = [
  { unit: "year", step: 1, format: "%Y" },
  { unit: "month", step: 1, format: "%M" },
  {unit:"week",step:1,format:"%W"},
];

第二种写法

var weekScaleTemplate = function(date){
    var dateToStr = gantt.date.date_to_str("%M %d");
    var weekNum = gantt.date.date_to_str("(%W周)");
    var endDate = gantt.date.add(gantt.date.add(date,1,"week"), - 1,"day");
    return dateToStr(date)+" - "+ dateToStr(endDate)+""+ weekNum(date);
};

gantt.config.subscales = [{
    unit:"month",
    step:1,
    date:"%F,%Y"
},{
    unit:"week",
    step:1,
    template:weekScaleTemplate
}];

如果对周末进行区分

gantt.templates.timeline_cell_class = function(item,date){
    if(date.getDay()== 0 || date.getDay()== 6){
        return 'weekend';
    }
};

④显示的列配置

name：绑定数据的名称；align：对齐方式；label：显示在表头的名称

gantt.config.columns = [
    {name: "text", tree: true,align: "left", resize: true,width: 150,label:'任务名称'},
    {name: "start_date", align: "center", resize: true,width:100,label:'计划开始时间'},
    {name: "end_date", align: "center", resize: true,width: 100,label:'计划结束时间'},
    {name: "cap_actl_start", align: "center", resize: true,width:100,label:'实际开始时间'},
    {name: "cap_actl_end", align: "center", resize: true,width: 100,label:'实际结束时间'},
    {name: "schedule_company_duty_name", align: "center", resize: true,width: 100,label:'负责单位'},
    {name: "schedule_user_duty_name", align: "center", resize: true,width: 100,label:'负责人'},
    {name: "schedule_task_deviation_days", align: "center", resize: true,width: 100,label:'偏差天数'},
    {name: "status", align: "center", resize: true,width: 100,label:'任务状态'},
    {name: "duration", align: "center",width: 100,label:'持续时间'},
];

注：如果不对甘特图源码的配置进行更改，不会显示这么多列，如何配置会在下文提及

⑤左右容器分别有滚动条

gantt.config.layout = {
  css: "gantt_container",
  cols: [
    {
      width:400,
      min_width: 300,
      rows:[
        {view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
        {view: "scrollbar", id: "gridScroll", group:"horizontal"}
      ]
    },
    {resizer: true, width: 1},
    {
      rows:[
        {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
        {view: "scrollbar", id: "scrollHor", group:"horizontal"}
      ]
    },
    {view: "scrollbar", id: "scrollVer"}
  ]
};

⑥task 内容文本

gantt.templates.task_text = function(start, end, task) {
    // console.log(start,"start")
    // console.log(end,"end")
  if (task.start_date != undefined)
    return ("<b>任务名称:</b> " + task.text + " (" + task.progress + "%)");
  else
    return ("<b>" + task.text + "</b> ");
};

⑦task 文本悬浮显示

const that = this
gantt.templates.tooltip_text = function(start, end, task) {
   if (task.start_date != undefined){
     return (
       "<b>任务名称:</b> " + task.text + 
       "<br/><b>计划开始时间:</b> " + (task.start_date?that.$moment(task.start_date).format('YYYY-MM-DD'):'无') + 
       "<br/><b>计划结束时间:</b> " + (task.end_date?that.$moment(task.end_date).format('YYYY-MM-DD'):'无') + 
       "<br/><b>进度:</b> " + task.progress + "%" +
       "<br/><b>实际开始时间:</b> " + (task.cap_actl_start?that.$moment(task.cap_actl_start).format('YYYY-MM-DD'):'无') + 
       "<br/><b>实际结束时间:</b> " + (task.cap_actl_end?that.$moment(task.cap_actl_end).format('YYYY-MM-DD'):'无') +
       "<br/><b>偏差天数:</b> " + (task.schedule_task_deviation_days? task.schedule_task_deviation_days :'无') + 
       "<br/><b>任务状态:</b> " + task.status
     );
   }
   else {
     return (
       "<b>任务名称:</b> " + task.text
     );
}

最后初始化甘特图

 this.addTodayLine();
 gantt.config.fit_tasks = true;   //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
 gantt.config.tooltip_hide_timeout = 0;  //设置当鼠标离开任务后，悬浮框tooltip还会显示多长时间(ms)才关闭。
 gantt.init(this.$refs.gantt);
 gantt.parse(this.$props.tasks);

四、在methods定义的方法

 // 重载gantt图
 reload() {
   gantt.clearAll();
   this.addTodayLine();
   gantt.parse(this.$props.tasks);
   gantt.render();
 },

 // 时间线
 addTodayLine() {
   var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
   var today = new Date();
   gantt.addMarker({
     start_date: today,
     css: "today",
     text: "今天",
     title: "今天: " + date_to_str(today)
   });
 }
},

然后是甘特图的样式

<style lang="less" scoped>
	@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
  	// 操作按钮样式
    .fa {
		cursor: pointer;
		font-size: 14px;
		text-align: center;
		opacity: 0.2;
		padding: 5px;
	}
	.fa:hover {
		opacity: 1;
	}
	.fa-pencil {
		color: #ffa011;
	}
	.fa-plus {
		color: #328EA0;
	}
	.fa-times {
     color: red;
   }
   
   // 周末样式
   .weekend {
       background:#f4f7f4;
   }
   .gantt_selected .weekend {
       background:#f7eb91;
   }
</style>

五、更改dhtmlgantt.js的columns列配置

在下载的dhtml-gantt的包下有codebase的文件夹，这个文件夹下的dhtmlgantt.js是压缩过得，将其解压缩之后，大概在14000行左右找到columns列配置，就想如下的代码片段

columns: [
    { name: "text", tree: true, width: "*", resize: true },
    { name: "start_date", align: "center", resize: true },
    { name: "duration", align: "center" },
    { name: "add", width: 44 }
],

如果想展示自己所需要的字段名，只需在这里添加相应的对象

columns: [{
	name: "text",
	tree: !0,
	width: "*",
	resize: !0
}, {
	name: "start_date",
	align: "center",
	resize: !0
}, {
	name: "duration",
	align: "center"
}, {
	name: "cap_actl_start",
	align: "center"
}, {
	name: "cap_actl_end",
	align: "center"
}, {
	name: "schedule_company_duty_name",
	align: "center"
}, {
	name: "schedule_user_duty_name",
	align: "center"
}, {
	name: "schedule_task_deviation_days",
	align: "center"
}, {
	name: "status",
	align: "center"
}, {
	name: "add",
	width: 44
}],

最后只需要在父组件中获取到数据之后重载甘特图即可

if(this.$refs.ganttchart){
    this.$refs.ganttchart.reload(); // 重新刷新gantt图
}

最后给大家推荐一篇超详细的gantt图配置文章

超详细的甘特图配置