前端甘特图dhtmx-gantt

一、背景

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

二、甘特图官网以及文档地址

https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html

破解版:***********

三、甘特图六要素

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/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"); // 使用甘特图自带的导出功能必须引入   createScript createScript(url: string) {   const scriptElement = document.createElement("script");   scriptElement.src = url;   const headerElement = document.querySelector("head") as any;   if (headerElement) {     headerElement.appendChild(scriptElement);   } }

2、甘特图初始化

template

vuejs gantt() { // 获取到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的后一天,这样数据就会不准确?

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

3、 dhtmlx-gantt都是下划线分割,而且api中都是这样,但在layout中min_width、max_width不生效,要用minWidth、maxWidth替换才生效。

4、排序后的数据默认从页面获取的row元素可能是不准确的,需要从dataStroe中获取。

5、甘特图在不占全屏的情况下, order_branch = true,拖拽会有限制?

解决方案:

6、在左侧表格和列都能拖拽的情况下,会突然弹回到默认宽度?

解决方案:监控config阻止掉更新;

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

7、默认情况下甘特图经常出现错误提示?

解决方案:将show_errors设为false

8、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://www.cnblogs.com/ygunoil

(0)

相关推荐

  • 使用PowerBI制作甘特图

    甘特图(Gantt Chart)不同于其他普通图表的地方是,它不只是一种图表,它本身还是一个管理工具,因此大部分可视化软件都支持甘特图,甚至有很多专门绘制甘特图的软件,比如微软的MS Project, ...

  • 除了甘特图,你还应该了解些什么软件项目管理知识

    前言 ❝ A bad plan is better than no plan. 坏计划也好过没有计划.--彼得·蒂尔<从0到1> ❞ 在软件开发工程中,很少会有单打独斗的程序员.这是因为现 ...

  • 菜鸟记266-有图表不用文字系列之22-3分钟制作完成甘特图,让您的工作安排更合理

    万一您身边的盆友正好需要呢? 关键词:EXCEL2016:条形图:甘特图:工作安排:操作难度*** 教学管理工作纷繁复杂,头绪多,咱们得掌握科学合理安排的方法. 除了必备的办公小秘书.日程安排APP以 ...

  • 菜鸟记464-在线制作甘特图,工作进程尽把控!

    万一您身边的朋友用得着呢? 各位朋友早上好,小菜继续和您分享经验之谈,截止今日小菜已分享450+篇经验之谈,可以文章编号或关键词进行搜索 以下才是今天的正式内容-- 摘要:本文介绍在网站生成甘特图进行 ...

  • 项目进度甘特图 ,你会不会?

    甘特图(Gantt chart)又称为横道图.条状图(Bar chart).其通过条状图来显示项目.进度和其他时间相关的系统进展的内在关系随着时间进展的情况. 今天分享一个零基础制作精美甘特图的方法, ...

  • 甘特图

    甘特图(Gantt chart)又叫横道图.条状图(Bar chart),以提出者亨利·L·甘特先生的名字命名,被广泛应用于项目管理中.甘特图内在思想简单,即以图示的方式通过活动列表和时间刻度形象地表 ...

  • 会动的甘特图

    动态甘特图 甘特图(Gantt chart)又叫横道图.条状图(Bar chart),以提出者亨利·L·甘特先生的名字命名,被广泛应用于项目管理中.甘特图内在思想简单,即以图示的方式通过活动列表和时间 ...

  • 商业分析系列课-Excel部分-甘特图绘制-时间差表现

    商业分析系列课-Excel部分-甘特图绘制-时间差表现

  • 商业分析系列课-Excel部分-甘特图绘制-动态变化

    商业分析系列课-Excel部分-甘特图绘制-动态变化

  • 项目过程不可控?你可能缺少一个甘特图

    项目经理最重要的工作之一,就是要把控项目的整个过程.项目经理可以使用进度猫甘特图来把控项目的整个过程.良好的团队协作工具能够减少团队成员之间的沟通成本,项目成员通过甘特图就能了解项目情况,避免重复沟通 ...