彩票走势图

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

转帖|行业资讯|编辑:胡涛|2023-02-03 11:13:38.780|阅读 353 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求,具备完善的甘特图图表库,功能强大,价格便宜,提供丰富而灵活的JavaScript API接口,与各种服务器端技术(PHP,ASP.NET,Java等)简单集成,满足多种定制开发需求。

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("//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
<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变更甘特图更新

@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、在左侧表格和列都能拖拽的情况下,会突然弹回到默认宽度?

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

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

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

解决方案:将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;
}

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

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


甘特图控件交流群:764148812   

欢迎进群交流讨论,获取更多帮助请联系

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP