下载甘特图
下载地址：https://dhtmlx.com/docs/products/dhtmlxGantt/download.shtml
将下载好的包dhtmlxSuite放入vue项目
image.png
引入
import "../assets/dhtmlGanttx/codebase/dhtmlxgantt.js";
import "../assets/dhtmlGanttx/codebase/dhtmlxgantt.css";
import "../assets/dhtmlGanttx/codebase/ext/dhtmlxgantt_smart_rendering";
import "../assets/dhtmlGanttx/codebase/locale/locale_cn.js";
初始化
<div
ref="pm-execute-gantt"
id="pm-control-gantt"
style='width:100%; height:1000px;'
class="pm-execute-progress"
></div>
mounted(){
let vm=this;
vm.settingGanttConfig();//配置文件初始化之前
gantt.init(this.$refs["pm-execute-gantt"]);//初始化gatt
//解析甘特图
vm.getGanttData();//加载基础数据
// 添加甘特图事件
vm.runTest()
},
methods:{
runTest(){
let p=new Promise(function (resolve,reject) {
//做一些异步操作
setTimeout(()=>{
console.log("执行完成");
resolve('随便')
},2000)
});
return p
},
getGanttData(){
let vm=this;
gantt.parse(vm.$store.state.documentStore.task);//加载甘特图的基础数据
},
//构造WBS CODE
buildWbsCode(task) {
let formal = gantt.getWBSCode(task);
if (task.parent == "") {
return 0;
} else {
let codeArray = formal.split(".");
codeArray.shift();
return codeArray.join(".");
}
},
//配置甘特图Config
settingGanttConfig() {
let vm = this;
//是否显示错误
gantt.config.show_errors = false;
gantt.config.auto_scheduling = false;
//设置按行渲染甘特图提交效率
gantt.config.show_task_cells = false;
//设置是否可添加【该配置对源码进行修改后】
gantt.config.can_add = false;
//自动调整类型,当存在字节点时自动升级为project
gantt.config.auto_types = false;
//设置不可以拖动进度
gantt.config.drag_progress = true;
//设置Task不可以拖动
gantt.config.drag_move = false;
//设置不可以拖动关系
gantt.config.drag_links = true;
//设置不可拖动Task 大小
gantt.config.drag_resize = true;
//单击显示添加详情
gantt.config.details_on_create = true;
//双击显示明细
gantt.config.details_on_dblclick = true;
//列配置
gantt.config.columns = [
{
name: "wbs",
label: "编码",
width: 40,
template: function(task) {
return vm.buildWbsCode(task);
},
align: "left",
resize: true
},
{
name: "text",
label: "名称",
align: "left",
tree: true,
min_width: 200,
width: 200,
resize: true,
},
{
name: "start_date",
label: "开始时间",
align: "center",
resize: true,
min_width: 100,
width: 100,
template: function(obj) {
return obj.start_date ? obj.start_date : "";
}
},
{
name: "end_date",
label: "完成时间",
align: "center",
resize: true,
min_width: 100,
width: 100,
template: function(obj) {
return obj.end_date ? obj.end_date : "";
}
},
{
name: "plan_start",
label: "计划开始时间",
align: "center",
resize: true,
hide: false,
min_width: 100,
width: 100,
template: function(obj) {
return obj.plan_start ? obj.plan_start : "";
}
},
{
name: "plan_end",
label: "计划完成时间",
align: "center",
resize: true,
hide: false,
min_width: 100,
width: 100,
// template: function(obj) {
// return obj.plan_end ? obj.plan_end : "";
// }
},
{
name: "actual_start",
label: "实际开始时间",
align: "center",
resize: true,
hide: true,
min_width: 100,
width: 100,
template: function(obj) {
return obj.actual_start ? obj.actual_start : "";
}
},
{
name: "actual_end",
label: "实际完成时间",
align: "center",
resize: true,
hide: true,
min_width: 100,
width: 100,
template: function(obj) {
return obj.actual_end ? obj.actual_end : "";
}
},
{
name: "duration",
label: "工期（天）",
align: "center",
resize: true,
min_width: 80,
width: 80
},
{
name: "progress",
label: "完成百分比",
align: "center",
resize: true,
min_width: 100,
width: 100,
template: function(obj) {
return obj.progress
? Math.round(obj.progress * 10000) / 100 + "%"
: "";
}
},
{
name: "budget",
label: "预算资源",
align: "center",
resize: true,
min_width: 100,
width: 100,
template: function(obj) {
return obj.budget ? obj.budget : "0";
}
},
{ name: "add", label: "", width: 44, resize: true, hide: true }
];
//展示配置滚动条
gantt.config.layout = {
css: "gantt_container",
cols: [
{
width: 720,
rows: [
{
view: "grid",
scrollX: "gridScroll",
scrollable: true,
scrollY: "scrollVer"
},
{ view: "scrollbar", id: "gridScroll", group: "horizontal" }
]
// gravity: 2
},
{ resizer: true, width: 1 },
{
rows: [
{ view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
{ view: "scrollbar", id: "scrollHor", group: "horizontal" }
]
},
{ view: "scrollbar", id: "scrollVer" }
]
};
//甘特图高度
gantt.config.task_height = 16;
//设置甘特特图计算单位
gantt.config.scale_unit = "month";
//设置任务可以同级拖拽
gantt.config.order_branch = true;
//编辑框设置
gantt.showLightbox = function(id) {
};
// //设置task 任务样式
gantt.templates.task_class = function(start, end, task) {
if (task.parent !== "") {
return vm.editType + " pm-gantt-root";
}
};
// //甘特图左边说明
gantt.templates.leftside_text = function(start, end, task) {
return task.duration + " days";
};
//甘特图右边说明
gantt.templates.rightside_text = function(start, end, task) {
return "ID: #" + task.id;
};
//鼠标移上去提示
gantt.templates.tooltip_text = function(start, end, task) {
return "123456";
};
//甘特图 Grid class
gantt.templates.grid_row_class = function(start, end, task) {
if (gantt.hasChild(task.id)) {
return "has-child";
}
return "";
};
},
}
