前端甘特图dhtmx-gantt

一、背景

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

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

   破解版：***********

 

 

三、甘特图六要素

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

四、甘特图使用

    1.引入 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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、甘特图初始化
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
template
<div ref="gantt"
     id="yys-gantt">
</div>
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变更甘特图更新
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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变更甘特图更新
 
?
1
2
3
4
5
6
7
8
9
10
11
@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.甘特图销毁
?
1
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阻止掉更新；
?
1
2
3
4
@Watch("config", { deep: true })
updateConfig(nConfig: any, oConfig: any) {
  if (JSON.stringify(nConfig) === JSON.stringify(oConfig)) return;
}
 
 7、默认情况下甘特图经常出现错误提示？
    解决方案：将show_errors设为false
8、link添加类型&&计划和里程碑规则
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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

posted on   ygunoil  阅读(4275)  评论(8)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
历史上的今天：
2020-03-06 react解析html的dangerouslySetInnerHTML
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae