项目管理工具DHTMLX Gantt 闭坑指南

本文介绍项目管理工具DHTMLX Gantt 闭坑指南，欢迎查阅

公司业务需要，管理层做项目管理就会制定项目计划，为了更好的的做好项目计划就需要用到做计划常用的工具甘特图，而且做好计划管理对项目的风险管控也有很大的好处。

一、甘特图六要素

• tasks 甘特图任务相关，包含data（数据）、links（数据之间的关系）、collections等 ——> gantt.parse(tasks) 注：parse前一定要先清一下数据不然来回切换不同的甘特图会渲染出错 gantt.clearAll()
• config 甘特图配置相关，相当于插件的options，不过有些options依赖于plugin（有plugin配值config才生效）——> gantt.config.xxx = xxx
• plugins 甘特图插件相关，有些options依赖于plugin（有plugin配值config才生效）——> gantt.plugins(plugins)
• templates 甘特图自定义模板相关，比如自定义tooltip_text、 task_text|、task_class等等——> gantt.templates.xxx = xxx
• events 甘特图事件相关——> gantt.attachEvent(name, handle, settins)
• zoomConfig 甘特图（日周月年）视图相关——> gantt.ext.zoom.init(zoomConfig)

二、甘特图使用

1.引入

1.引入js

import {gantt , Gantt} from "yys-pro-gantt";

2.导入css
a、js中导入

import "yys-pro-gantt/codebase/dhtmlxgantt.css";import "yys-pro-gantt/codebase/skins/dhtmlxgantt_terrace.css";

b、style中导入方式
@import “~yys-pro-gantt/codebase/dhtmlxgantt.css”;

@import "~yys-pro-gantt/codebase/dhtmlxgantt.css";/*@import "~yys-pro-gantt/codebase/skins/dhtmlxgantt_terrace.css"; // 皮肤*/@import "./skins/dhtmlxgantt_yys.css"; // 自定义皮肤不需要下面可以不引入// import "dhtmlx-gantt/codebase/locale/locale_cn" ; // 本地化// import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js"; // 任务条悬浮提示// this.createScript("http://export.dhtmlx.com/gantt/api.js"); // 使用甘特图自带的导出功能必须引入createScriptcreateScript(url: string) {const scriptElement = document.createElement("script");scriptElement.src = url;const headerElement = document.querySelector("head") as any;if (headerElement) {headerElement.appendChild(scriptElement);}}

2、甘特图初始化

template<div ref="gantt"id="yys-gantt"></div>vuejsgantt() { // 获取到dom元素return this.$refs.gantt as any;}get ganttInstance() { // 获取到甘特图实例便能调用甘特图的所有方法return gantt || Gantt.getGanttInstance();}this.ganttInstance.init(this.gantt());this.ganttInstance.clearAll();this.ganttInstance.parse(this.tasks);

3、甘特图更新

a. tasks变更甘特图更新

@Watch("config", { immediate: true, deep: true })updateConfig(nConfig: any, oConfig: any) {if (JSON.stringify(nConfig) === JSON.stringify(oConfig)) { return; }this.$nextTick(() => {if (this.config) {Object.assign(this.ganttInstance.config, this.defaultConfig, this.config);}if (this.gantt()) {this.ganttInstance.init(this.gantt());gantt.clearAll();this.ganttInstance.parse(this.tasks);}})}

b. config变更甘特图更新

@Watch("config", { deep: true })updateConfig() {if (this.config) {Object.assign(this.ganttInstance.config, this.defaultConfig, this.config);}if (this.gantt()) {this.ganttInstance.init(this.gantt());gantt.clearAll();this.ganttInstance.parse(this.tasks);}}

4、甘特图销毁

gantt.destructor()

三、闭坑指南

1、data里面的部分属性的key是不能更改的，比如id，parent，start_date、end_date、progress、open

links里面的全部属性的key是不能更改的id source target type

2、data如果type是project，那么这条数据的开始时间会取其里面所有数据的最早开始时间，结束时间会取里面所有数据的最晚开始时间，如果这条数据里面的所有数据都是空数据，那么start_date会甘特图渲染的最早时间，end_date是start_date的后一天，这样数据就会不准确/p>

解决方案： data里加个unscheduled属性来控制是否渲染这条数据，需要注意的是在所有涉及到日期的地方都要加，如tooltips_text 、columns、 拖拽等等

3、 dhtmlx-gantt都是下划线分割，而且api中都是这样,但在layout中min_width、max_width不生效，要用minWidth、maxWidth替换才生效。
4、排序后的数据默认从页面获取的row元素可能是不准确的，需要从dataStroe中获取。
5、在左侧表格和列都能拖拽的情况下，会突然弹回到默认宽度/p>

解决方案：监控config阻止掉更新；

@Watch("config", { deep: true })updateConfig(nConfig: any, oConfig: any) {if (JSON.stringify(nConfig) === JSON.stringify(oConfig)) return;}

6、默认情况下甘特图经常出现错误提示/p>

解决方案：将show_errors设为false

7、link添加类型&&计划和里程碑规则

link_class: (link: any) => {// console.log(link)const {type} = link;return `link-type-${type}`;}, target.forEach((linkId: any) => {const link = this.gantt.getLink(linkId);const {sourceTask,targetTask,type,} = this.getSourceTaskAndTargetTaskByLink(link);switch (type) {case LinkType.fs:if ( +targetTask.start_date < +sourceTask.end_date ) {fsLimit(task, sourceTask);}break;case LinkType.ss:if (+targetTask.start_date > +sourceTask.start_date) {limitLeft(task, targetTask);}break;case LinkType.ff:if (+targetTask.end_date > +sourceTask.end_date) {limitRight(task, targetTask);}break;case LinkType.sf:if (+targetTask.start_date > +sourceTask.end_date) {limitRight(task, targetTask);}break;default:break;}fsMoveLimit(task: any, limit: any) {const dur = task.end_date - task.start_date;if (task.type === GANTT_TYPE.计划 && limit.type === GANTT_TYPE.计划) {task.start_date = new Date(limit.end_date);task.end_date = new Date(limit.start_date + dur);}if (task.type === GANTT_TYPE.计划 && limit.type === GANTT_TYPE.里程碑) {task.start_date = new Date(limit.end_date);task.end_date = new Date(limit.start_date + dur);}if (task.type === GANTT_TYPE.里程碑 && limit.type === GANTT_TYPE.里程碑) {task.start_date = new Date(limit.start_date);}if (task.type === GANTT_TYPE.里程碑 && limit.type === GANTT_TYPE.计划) {task.start_date = new Date(limit.end_date);}}fsResizeLimit(task: any, limit: any) {const dur = task.end_date - task.start_date;if (task.type === GANTT_TYPE.计划 && limit.type === GANTT_TYPE.计划) {task.start_date = new Date(limit.end_date);}if (task.type === GANTT_TYPE.计划 && limit.type === GANTT_TYPE.里程碑) {task.start_date = new Date(limit.end_date);}}.gantt_task_link.link-type-0 .gantt_line_wrapper:nth-of-type(2)::before{content: "fs";position: absolute;top: 10px;left: 15px;font-size: 16px;}.gantt_task_link.link-type-1 .gantt_line_wrapper:nth-of-type(2)::before{content: "ss";position: absolute;top: 10px;left: 15px;font-size: 16px;}.gantt_task_link.link-type-2 .gantt_line_wrapper:nth-of-type(2)::before{content: "ff";position: absolute;top: 10px;left: 15px;font-size: 16px;}.gantt_task_link.link-type-3 .gantt_line_wrapper:nth-of-type(2)::before{content: "sf";position: absolute;top: 10px;left: 15px;font-size: 16px;}

本文转自：https://juejin.cn/post/6930900493602390024 ，如有侵权，请联系删除

DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。

甘特图控件交流群：764148812   

欢迎进群交流讨论，获取更多帮助请联系在线客服

标签：

来源：慧都