Vue Dhtmlxgantt甘特图/横道图 baselines 含（计划、实际时间对比）树形实例实现及部分扩展

背景: 需满足计划、实际时间对比需求，本人查看了很多文档和资料（对比了dhtmlxgantt、jquery gantt、wl-gantt、Any Gantt、ganttView）【耗时近一周】，基本都是不太理想的，其中有一个wl-gantt（基于vue element-ui框架）可以使用，但是本系统基于Ant Design Vue框架，需要按需加载element-ui，故而摒弃；最后选择了dhtmlxgantt pro，很多文档上面没有记载dhtmlxgantt普通版本是否包含计划字段及扩展字段，会导致占用大家很多徒劳的时间，如下图：

上图链接:

Extra Elements in Timeline Area

一、项目引入

1.根目录结构

2.Vue 引入

js:

import gantt from '../gantt/dhtmlxgantt.js?v=7.0.13'

css lang="less":

@import url('../gantt/skins/dhtmlxgantt_terrace.css');

二、实例初始化

<div id="gantt_here"style="position: relative;min-height: 560px;width: 100%; height:100%;"></div>

gantt.init('gantt_here_master')
gantt.parse(this.tableData) // tableData则当前甘特图的属性极其数据

支持tableData格式为（List，树形关联关系:id->patrent）：

[{id:1, text:"Project #2", start_date:"01-04-2013", duration:18},{id:2, text:"Task #1",    start_date:"02-04-2013", duration:8,progress:0.6, parent:1},{id:3, text:"Task #2",    start_date:"11-04-2013", duration:8,progress:0.6, parent:1}
]

三、具体实现

1.源数据获取（后端接口）->组装成dhtmlx gantt支持的数据结构:

  this.$get(this.api).then((response) => {this.tableData.data = response.data.map((item) => {/**  说明：*   此处api中的此处api中的planned_start,planned_end与计划时间不同，系统需要的实际时间即API中的计              划时间 故现用实际时间替代[该地方不同业务，对应不同的方式]*/// 根据计划情况配置表if (item.startTime !== null && item.endTime !== null) {item.start_date = item.startTimeitem.end_date = item.endTime// 用于格式化item.startTime = this.eightBitTimestamp(new Date(item.startTime))item.endTime = this.eightBitTimestamp(new Date(item.endTime))}// 根据实际情况配置表if (item.actualStartTime !== null && item.actualFinishTime !== null) {item.planned_start = item.actualStartTimeitem.planned_end = item.actualFinishTime} else if (item.actualStartTime !== null &&item.actualFinishTime == null) {      item.planned_start = item.actualStartTimeitem.planned_end = this.returnBitTimestamp(new Date())}return {...item,parent: item.parentId}})// 引入甘特图配置及初始化this.ganttConfig()})}

2.gantt图初始化配置

gantt表格 grid列配置：

columns: [{ name: 'sortNum', label: '序号', align: 'center' },{name: 'warningLevel',label: '预警',min_width: 30,align: 'center',template: function (obj) {let textHtml = ''if (obj.warningLevel === 4) {// 正常延期textHtml ="<img src='/img/yujing_blue.png' style='width:20px;height:20px;'>"} else if (obj.warningLevel === 5) {// 一般延期textHtml ="<img src='/img/yujing_yellow.png' style='width:20px;height:20px;'>"} else if (obj.warningLevel === 6) {// 严重延期textHtml ="<img src='/img/yujing_red.png' style='width:20px;height:20px;'>"} else {textHtml = ''}return textHtml}},{name: 'planName',label: '任务名称',tree: true,min_width: 180,align: 'center',template: function (obj) {let textHtml ="<div class='moreText' title='" +obj.planName +"'>" +obj.planName +'</div>'return textHtml}},{name: 'startTime',label: '计划开始时间',min_width: 110,align: 'center'},{name: 'endTime',label: '计划完成时间',min_width: 110,align: 'center'},{ name: 'duration1', label: '工期天数', align: 'center' },{name: 'keyNodeLevel',label: '节点等级',align: 'center'},{name: 'actualStartTime',label: '实际开始时间',min_width: 110,align: 'center'},{name: 'actualFinishTime',label: '实际完成时间',min_width: 110,align: 'center'}
],

甘特图配置:

 // 甘特图配置ganttConfig() {gantt.config.date_format = '%Y-%m-%d %H:%i:%s'// gantt图布局设计 本例使用_scrollable_grid布局，方便多时间跨度查看gantt.config.layout = {css: 'gantt_container',cols: [{width: 500,min_width: 300,rows: [{view: 'grid',scrollX: 'gridScroll',scrollable: true,scrollY: 'scrollVer'},{ view: 'scrollbar', id: 'gridScroll', group: 'horizontal' }]},{ resizer: true, width: 1 },{// width: 950,// min_width: 600,rows: [{view: 'timeline',scrollX: 'scrollHor',scrollable: true,scrollY: 'scrollVer'},{ view: 'scrollbar', id: 'scrollHor', group: 'horizontal' }]},{ view: 'scrollbar', id: 'scrollVer' }]}gantt.config.task_height = 16gantt.config.row_height = 40gantt.config.auto_scheduling = true// 网络图部分表头格式化gantt.config.scales = [{ unit: 'year', step: 1, date: '%Y年' },{ unit: 'month', step: 1, date: '%m月' }]gantt.config.min_column_width = 50// 表头高度gantt.config.scale_height = 48// gantt task// adding baseline display// 该方法用于添加甘特图baseline，即【绘制计划时间】this.ganttTask()// 只读模式gantt.config.readonly = true// 默认是否展开树结构gantt.config.open_tree_initially = false// grid 列表配置 上段代码即是gantt.config.columns = this.columns// 如果时间跨度很长，则使用此配置可用于显著加快图表显示速度。gantt.config.smart_scales = true// 启用/禁用在图表区域中显示列边框gantt.config.show_task_cells = true// 甘特图以自动扩展时间范围，以适应所有显示的任务gantt.config.fit_tasks = true// 是否调用模版方法渲染source时间轴的空白元素gantt.config.resource_render_empty_cells = truegantt.init('gantt_here_master')gantt.parse(this.tableData)this.ganttTask()gantt.refreshData()},// 该方法用于添加甘特图baseline，即【绘制计划时间】// adding baseline displayganttTask() {gantt.addTaskLayer({renderer: {render: function draw_planned(task) {if (task.planned_start && task.planned_end) {var sizes = gantt.getTaskPosition(task,task.planned_start,task.planned_end)var el = document.createElement('div')if (task.pending) {el.className = 'baseline pending-gantt'} else {el.className = 'baseline'}el.style.left = sizes.left + 'px'el.style.width = sizes.width + 'px'el.style.top = sizes.top + gantt.config.task_height + 13 + 'px'return el}return false},// define getRectangle in order to hook layer with the smart renderinggetRectangle: function (task, view) {if (task.planned_start && task.planned_end) {return gantt.getTaskPosition(task,task.planned_start,task.planned_end)}return null}}})gantt.templates.task_class = function (start, end, task) {if (task.planned_end) {var classes = ['has-baseline']if (end.getTime() > task.planned_end.getTime()) {classes.push('overdue')}return classes.join(' ')}}gantt.attachEvent('onTaskLoading', function (task) {task.planned_start = gantt.date.parseDate(task.planned_start,'xml_date')task.planned_end = gantt.date.parseDate(task.planned_end, 'xml_date')return true})gantt.config.lightbox.sections = [// { name: 'time', map_to: 'auto', type: 'duration' },{name: 'baseline',map_to: { start_date: 'planned_start', end_date: 'planned_end' },button: true,type: 'duration_optional'}]gantt.locale.labels.section_baseline = 'Planned'}

四、部分样式优化

甘特图样式，可以通过API内置方法添加类Class，然后在css中实现：

gantt.templates.task_class = function (start, end, task) {if (task.planned_end) {return classes.join('class-name')}}

图例css:

.gantt_task_line {background-color: #3b97fe;border: #3b97fe;height: 10px !important;border-top-right-radius: 100px;border-bottom-right-radius: 100px;}.gantt_task_progress {background: #ffd180;border-top-right-radius: 100px;border-bottom-right-radius: 100px;}.baseline {position: absolute;border-radius: 2px;opacity: 0.6;margin-top: -9px;height: 12px;background: #ffc93a;// border: 1px solid rgb(255, 153, 0);}

五、预览效果

本例为demo效果，未投入正式使用环境

Vue Dhtmlxgantt甘特图/横道图 baselines 含（计划、实际时间对比）树形实例实现及部分扩展相关推荐

python动态横道图_jQuery甘特图/日程图/横道图/插件
基于JQ的一款灵活高效,支持自定义拓展的甘特图/日程图插件支持月/周/小时等显示方式支持拖动改变时间展开与收起添加/删除,刷新节假日高亮 clicked,dblClicked,changed ...
甘特图（别名：横道图、条状图）的画法
简介: 甘特图(Gantt chart )又叫横道图.条状图(Bar chart).它是以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间.在处理多道批处理系统问题时,有时 ...
python动态横道图_Python数据可视化：甘特图画法
大家好,我是一名Python数据分析师,我想把自己转行成功之路上的经验分享给大家,由此就有了我的人工智能四部曲:<15天学会Python编程>.<每天10分钟,用Python学数据分 ...
python动态横道图_python的matplotlib.pyplot绘制甘特图
博主本来就想简单地找一下代码,画一幅甘特图,结果百度之后发现甘特图的代码基本都不是用matplotlib库,但是像柱状图等统计图通常都是用这个库进行绘制的,所以博主就花了一些时间,自己敲了一份代码,简 ...
wps表格l制作甘特图_WPS表格制作进度计划横道图的方法
计划横道图能让我们更能直观的了解数据,学习啦小编在这给大家介绍下WPS表格制作进度计划横道图的方法,希望大家多多学习! WPS表格制作进度计划横道图的教程 1.输入数据新建一个表格文件,按三列依次输入 ...
双代号网络图基础算法_最新（免锁版）网络图横道图绘制软件，内附安装教程，制图做更快...
最新(免锁版)网络图横道图绘制软件,内附安装教程,制图做更快网络图横道图绘制可制作双代号网络计划.单代号网络图.横道图(及甘特图Gantt),是最常用的计划与控制手段之一,项目管理的必备工具,还可作 ...
excel日期格式改不了_画进度计划横道图，Excel就够了
横道图=甘特图甘特图,即横道图,他是由美国的工程师:亨利·劳伦斯·甘特在一战时期(1917年)所发明,在这之前他用水平线条来记录工人的任务完成情况,并以不同的颜色来区别:后来打仗了,他也去了,而且 ...
2021-07-14 PMP 横道图、网络图、看板、燃尽图了解
横道图(甘特图) 甘特图是以图示的方式,并通过活动列表和时间刻度,来形象地表示出某些特定项目的活动顺序和持续时间网络图项目进度活动之间的逻辑关系看板 https://www.cnblogs.co ...
横道图时间标尺在P6软件中的设置
卷首语由于其直观简洁且易于管理的特性,使其成为展示项目活动顺序及时间安排的最常用的进度管理工具. 甘特图甘特图(Gantt Chart),又称为横道图或棒条图,是最早的项目进度管理工具之一.由于其 ...

Vue Dhtmlxgantt甘特图/横道图 baselines 含（计划、实际时间对比）树形实例实现及部分扩展

Vue Dhtmlxgantt甘特图/横道图 baselines 含（计划、实际时间对比）树形实例实现及部分扩展

一、项目引入

二、实例初始化

三、具体实现

四、部分样式优化

五、预览效果

Vue Dhtmlxgantt甘特图/横道图 baselines 含（计划、实际时间对比）树形实例实现及部分扩展相关推荐

最新文章

热门文章