<template>
<div>
<div ref='ganttRef'></div>
<section style='display: flex;justify-content: start;'>
<pre>
{{gantttt.data}}
</pre>
<pre>
{{gantttt.links}}
</pre>
</section>
</div>
</template>
<script>
import { gantt } from 'dhtmlx-gantt' // 引入dhtmlx-gantt
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
export default {
data() {
return {
gantttt: {
data: [
/**
*
id:任务标识,可用来标识父子关系、连接links等
start_date,end_date:项目开始截至时间 Date|string //(‘14-07-2022’)
text:文本,任务的显示文字
progress:项目的进度,用颜色深浅显示
parent:父子关系(id标识);子任务的parent为父任务的id
type:任务类型,有三种,object,task,milestone;
object:没有时间限制,长度为包含所有子任务的长度
task:普通任务
milestone:菱形块,可表示中转关系
* */
{id:1,text:'xx管理系统开发',person:'张三',progress:0.2,type:'task',start_date:new Date('2023-10-02'),end_date:new Date('2023-10-12'),open: true},
{id:11,parent:1,text:'初始化项目',person:'李四',type:'task',progress:0.9,color:'#ff0000',start_date:new Date('2023-10-02'),end_date:new Date('2023-10-05'),open: true},
{id:12,parent:1,text:'前后端开发',type:'task',progress:0,color:'#00ff00',start_date:new Date('2023-10-05'),end_date:new Date('2023-10-08')},
{id:13,parent:1,text:'测试',type:'task',progress:0,color:'#0000ff',start_date:new Date('2023-10-08'),end_date:new Date('2023-10-10')},
{id:14,parent:1,text:'上线',type:'task',progress:0,color:'#00ffff',start_date:new Date('2023-10-10'),end_date:new Date('2023-10-12')},
{id:111,parent:11,text:'创建git仓库',type:'task',progress:1,color:'#880000',start_date:new Date('2023-10-02'),end_date:new Date('2023-10-03')},
{id:112,parent:11,text:'搭建脚手架',type:'task',progress:0.5,color:'#550000',start_date:new Date('2023-10-03'),end_date:new Date('2023-10-04')},
{id:113,parent:11,text:'完成初始化',type:'task',progress:0.1,color:'#330000',start_date:new Date('2023-10-04'),end_date:new Date('2023-10-05')},
{id:121,parent:12,text:'前端开发',person:'甲',type:'task',progress:0,color:'#00aa00',start_date:new Date('2023-10-05'),end_date:new Date('2023-10-07')},
{id:122,parent:12,text:'后端开发',person:'已',type:'task',progress:0,color:'#007700',start_date:new Date('2023-10-05'),end_date:new Date('2023-10-07')},
{id:123,parent:12,text:'前后端对接',person:'甲、已',type:'task',progress:0,color:'#003300',start_date:new Date('2023-10-07'),end_date:new Date('2023-10-08')},
// { id: 3, text: 'Team', type: 'milestone', start_date: '14-07-2023' },
// { id: 1, text: '1222', start_date: '25-04-2023', end_date: '01-07-2023', open: true },
// {
// id: 12323544,
// text: '44444',
// start_date: '27-04-2023',
// end_date: '01-06-2023',
// duration: 5,
// progress: 0.5,
// person: 'Julia Garner',
// parent: 1,
// open: true
// },
// {
// id: 1232354422,
// text: '5555555555555555555555555555555555555555555555555555555555555555',
// start_date: new Date('2023-04-27'),
// end_date: new Date('2023-05-01'),
// duration: 2,
// progress: 0.2,
// color: '#2F80ED',
// person: 'Julia Garner',
// parent: 12323544
// },
// {
// id: 1232354421,
// text: '22222',
// start_date: new Date('2023-05-02'),
// end_date: new Date('2023-05-21'),
// duration: 2,
// progress: 0.3,
// color: '#2F80ED',
// parent: 12323544
// },
// {
// id: 12323545,
// text: '333333333333333',
// start_date: new Date('2023-05-15'),
// end_date: new Date('2023-06-30'),
// time: '02/01-02/20',
// duration: 2,
// progress: 0.7,
// parent: 1,
// open: true
// },
// {
// id: 12345453,
// text: '222222',
// start_date: new Date('2023-04-27'),
// end_date: new Date('2023-05-18'),
// time: '02/01-02/20',
// duration: 3,
// progress: 0.9,
// color: '#ED263D',
// parent: 12323545
// }
],
links: [
{ id: 1, source: 11, target: 12, type: '0' },
{ id: 2, source: 12, target: 13, type: '0' },
{ id: 3, source: 13, target: 14, type: '0' },
{ id: 4, source: 111, target: 112, type: '0' },
{ id: 5, source: 112, target: 113, type: '0' },
{ id: 6, source: 121, target: 123, type: '0' },
{ id: 7, source: 122, target: 123, type: '0' },
// { id: 1, source: 1, target: 3, type: '0' },
// { id: 2, source: 1232354422, target: 1232354421, type: '0' },
// { id: 3, source: 12345453, target: 12345437, type: '0' }
]
},
ganttColumns:[
// { align: 'right', name: 'color', label: '', width: '150',
// template:function(task){
// if(task.color){
// console.log(task.color)
// return "<div style='width: 10px;height: 10px;' style='background:"+ task.color+ "'>"+"</div>"}
// }
// },
{ align: 'left', name: 'text', label: '', tree: true, width:"*",min_width:120,max_width:180},
{ align: 'center', name: 'person', label: '负责人', width: '120' },
// { align: 'right', name: 'time', label: '时间节点', width: '80' },
{ align: 'center', name: 'progress', label: '进度', width: '120',template:(task)=> task.progress * 100 + '%' },
]
}
},
created() {
},
mounted() {
// 清空之前的配置
gantt.clearAll();
// 默认配置
gantt.plugins({
marker: true,
});
// const markerId = gantt.addMarker({
// start_date: new Date(2023, 4, 26),
// css: 'marker',
// text: 'makerId aaaa',
// });
//任务的点击方法
gantt.attachEvent("onTaskClick", function(id,e) {
if(e.target.className === 'gantt_task_content'){ //点击内容
console.log(id,e.target)
}
return true;
});
gantt.config.work_time = true;
gantt.i18n.setLocale('cn'); // 设置中文
gantt.config.readonly = true; // 设置为只读
gantt.config.bar_height = 32; //task高度
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
gantt.config.autosize = true;
//激活列表展开、折叠功能
gantt.config.open_split_tasks = true;
//用户可以通过拖拽调整行高
gantt.config.resize_rows = true;
//图标项目栏可以任意拖拽
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
//设置甘特图表头高度
gantt.config.scale_height = 32;
//点击表头可排序
gantt.config.sort = false;
// 显示列配置,限制最大最小时间
// gantt.config.start_date = new Date(2023, 3, 25);
// gantt.config.end_date = new Date(2023, 5, 26);
gantt.config.columns = this.ganttColumns;
gantt.config.scales = [
// { unit: 'month', step: 1, format: '%Y年%F' },
{ unit: 'week', step: 1, format:this.weekScaleTemplate } ,
{ unit: 'day', step: 1, format:this.formatWeekday } ,
];
// gantt.getMarker(markerId);
// 初始化甘特图
gantt.init(this.$refs.ganttRef);
gantt.parse(this.gantttt)
},
methods:{
weekScaleTemplate(date){
let dateToStr = gantt.date.date_to_str("%d");
let endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
const weekNum = gantt.date.date_to_str('%Y年%M 第%W周 ');
// return weekNum(date) + dateToStr(date) + "-" + dateToStr(endDate) + '日';
return weekNum(date)
},
formatWeekday(date) { //1号 周一
const dateToStr = gantt.date.date_to_str("%d");
const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
return dateToStr(date) + ' ' + weekdays[date.getDay()];
},
setScaleConfig(level) {
switch (level) {
case "day":
gantt.config.scales = [
{unit: "day", step: 1, format: "%d %M"}
];
gantt.config.scale_height = 27;
break;
case "week":
var weekScaleTemplate = function (date) {
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
};
gantt.config.scales = [
{unit: "week", step: 1, format: weekScaleTemplate},
];
gantt.config.scale_height = 27;
break;
case "month":
gantt.config.scales = [
{unit: "month", step: 1, format: "%F, %Y"},
];
gantt.config.scale_height = 27;
break;
case "year":
gantt.config.scales = [
{unit: "year", step: 1, format: "%Y"},
];
gantt.config.scale_height = 27;
break;
}
}
}
}
</script>
<style>
</style>
<style lang='less' scoped>
</style>
【VUE】甘特图使用案例
最新推荐文章于 2024-05-24 17:24:56 发布