Vue+dhtmlx前端甘特图
下载安装
yarn add dhtmlx-gantt --save (for yarn)
npm install dhtmlx-gantt --save (for npm)
详细参考 —— 安装dhtmlx-gantt
成品效果
目前暂不支持修改，只读模式
根据下拉框改变甘特图的视图
鼠标悬浮显示表格
配置
- 只读模式
gantt.config.readonly = true;
- 调整时间轴
gantt.config.start_date = Date.now()
gantt.config.end_date = Date.now()
这里记得要把时间转为距离1970的时分秒
此处后台传过来的时间格式是 yyyy - mm - dd
可以用以下的函数转一下
export function changeDateUnix (date) {
let date_s = date.replace(/\-/g,'/')
return Date.parse(date_s)
}
实现代码
<template>
<div ref="gantt"></div>
</template>
<script>
import {
gantt} from 'dhtmlx-gantt';
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
export default {
name: 'gantt',
props: {
mainData: Array,
},
data() {
return {
mainGanttData: {
data: [],
links: [],
},
// demo数据
// mainGanttData:{
// data:[
// {
// id: "client",
// text: "客户端",
// start_date: "2020-4-12",
// demand: "-",
// duration: 3,
// },
// {
// id: "web",
// text: "Web开发组",
// start_date: "2020-4-12",
// demand: "-",
// duration: 1,
// parent: "client",
// },
// {
// id: "sakurahuang",
// text: "sakurahuang",
// start_date: "2020-4-12",
// demand: "联系我小程序插件的cgi从node迁移到hiweb",
// duration: 1,
// parent: "web",
// },
// {
// id: "sakurahuang1",
// text: "",
// start_date: "2020-4-12",
// demand: "自研白板",
// duration: 1,
// parent: "sakurahuang",
// },
// {
// id: "tdreamhuang",
// text: "tdreamhuang",
// start_date: "2020-4-12",
// demand: "联系我小程序插件的cgi从node迁移到hiweb",
// duration: 1,
// parent: "web",
// },
// ],
// links: [],
// },
};
},
mounted() {
this.handleGantt();
},
watch: {
mainData() {
this.handleGantt();
},
},
methods: {
handleGantt() {
this.mainGanttData["data"] = this.mainData;
const self = this;
// 这里设置左边列的标题，宽度，标题对齐方式
gantt.config.columns = [
{
name: "text",
label: "所属中心",
align: "left",
width: 200,
tree: true,
template: function (obj) {
return obj.text;
},
},
{
name: "text",
label: "标题/备注",
align: "center",
width: 200,
template: function (obj) {
if (obj.demand) {
return `${
obj.storylink}" target="_blank">${
obj.demand}`;
}
},
},
];
// 禁用红色弹框
gantt.config.show_errors = false;
// 只读模式
gantt.config.readonly = true;
// 设置日期格式，以及步长
gantt.config.xml_date = "%Y-%m-%d";
gantt.config.date_scale = "%Y-%m";
gantt.config.subscales = [
{
unit: "day",
step: 1,
date: "%d",
},
];
gantt.config.duration_unit = "day";
gantt.config.duration_step = 1;
// 使用气泡和竖线要在这里加配置
gantt.plugins({
tooltip: true,
marker: true,
});
gantt.init(this.$refs.gantt);
// console.log("mainGanttData");
// console.log(this.mainGanttData);
// 这里要清一下，不然tab互切的时候，不同tab甘特图数据会相互影响
gantt.clearAll();
gantt.parse(this.mainGanttData);
if (this.mainGanttData.data.length === 0) {
gantt.clearAll();
}
gantt.eachTask(function (task) {
task.$open = true;
});
gantt.render();
// 设置柱形工作条颜色和文字
this.setGanttTaskCSS(gantt);
// 设置鼠标悬浮气泡
this.setGanttTooltip(gantt);
// 设置竖线
this.setGanttMarker(gantt);
// gantt.attachEvent("onError", function (errorMessage) {
// debugger;
// return true;
// });
},
setGanttTaskCSS(gantt) {
gantt.templates.task_text = function (start, end, task) {
if (task.func_cnt || task.func_cnt === 0) {
return `功能需求&技术需求：${
task.func_cnt}个，工时： ${
task.work_time} d`;
} else {
return "工时" + task.work_time + "d";
}
// return "Text: "+task.text+", Holders: "+task.users;
};
gantt.templates.task_class = function (start, end, task) {
if (task.func_cnt || task.func_cnt === 0) {
return "gantt_group_task_color";
}
};
},
setGanttTooltip(gantt) {
const self = this;
gantt.templates.tooltip_text = function (start, end, task) {
// https://docs.dhtmlx.com/chart__dhxtooltip.html
if (task.type === "client") {
return self.handleTooltipClient(task);
} else if (task.type === "group") {
return self.groupToolTip(task);
}
};
},
setGanttMarker(gantt) {
gantt.addMarker({
start_date: new Date(),
css: "gantt_today_marker",
text: "今日",
});
if (this.ganttObj.ted_time) {
gantt.addMarker({
start_date: new Date(this.ganttObj.ted_time),
css: "gantt_GM_Exper_marker",
text: "ted体验",
});
}
},
handleTooltipClient(task) {
let tpl = `
功能
技术
其他
bug
总和
${
task.func_cnt}
${
task.tech_cnt}
${
task.other_cnt}
${
task.bug_cnt}
`;
if (task.groupInfo && task.groupInfo.length > 0) {
task.groupInfo.forEach((group) => {
tpl += `
${
group.text}
${
group.func_cnt}
${
group.tech_cnt}
${
group.other_cnt}
${
group.bug_cnt}
`;
});
}
return tpl;
},
groupToolTip(task) {
let tpl = `
功能
技术
其他
bug
${
task.func_cnt}
${
task.tech_cnt}
${
task.other_cnt}
${
task.bug_cnt}
`;
return tpl;
},
}
}
</script>
参考链接 ——
- 官方配置文档 —— 官方配置文档
- 中文配置文档参考 —— 中文翻译部分配置
- dhtmlx基础学习 —— dhtmlx基础学习