甘特图

一、子组件模板
二、需要引入的组件
三、需要在mounted定义相关格式
- ①设置日期格式
- ②显示操作按钮
- ③日期列显示
- ④显示的列配置
- ⑤左右容器分别有滚动条
- ⑥task 内容文本
- ⑦task 文本悬浮显示
四、在methods定义的方法
五、更改dhtmlgantt.js的columns列配置

今天分享一篇关于查看任务的甘特图的文章
首先，用的插件是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 + "%)");elsereturn ("<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图配置文章

超详细的甘特图配置

在vue中展示甘特图相关推荐

PM小课堂项目管理中的甘特图妙用
PM小课堂|项目管理中的甘特图妙用项目管理与甘特图会碰撞出怎样的火花? 为什么要在项目管理中关注甘特图? 甘特图(Gantt chart)是一种通过活动列表和时间刻度表示出特定项目的顺序与持续时间 ...
【Vue.JS】纯 Vue.js 制作甘特图
效果图在线预览 GitHub链接(包含 knockoutJS 版本与 Vue 版本) 推荐组合效果推荐与双表头固定效果组合,实现如上例中横表头(日期)纵向固定,纵表头(类型)横向固定效果. 参照连 ...
前端可排程的vue 排程甘特图
话不多说直接上图结合全网的开源码,又根据echart 图做出了前端可排程的vue 排程甘特图首先要引入echart 模板这里就不再赘述了在这里插入图片描述之后对它进行魔改将横轴改为时间 ...
vue中动态绑定背景图, 图片水平垂直居中
vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...
vue 中展示PDF内容
vue 中展示PDF内容不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以 ...
vue中后端返回图片流，前端渲染方法
vue中后端返回图片流,前端渲染方法前端登录经常用到图形验证码,后端接口返回的是图片数据流,如下图返回图片流这样效果图如下: 首先封装接口api和uuid[就是一个随机数,防止重复] //获取图形 ...
vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...
vue项目中的elementui的表格中画甘特图
最近的项目要求甘特图在elementui中实现,在此做出总结. 性能限制,不能传入太多的数据. 条件(时间):计划开始时间.计划结束时间.开始时间.结束时间.最大时间和最小时间. 思维:渲染表格头.渲 ...
vue+echarts画甘特图
vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js ...

在vue中展示甘特图

甘特图