91 lines
3.4 KiB
Vue
91 lines
3.4 KiB
Vue
<template>
|
|
<div ref="ganttContainer"></div>
|
|
</template>
|
|
<script>
|
|
import {gantt} from 'dhtmlx-gantt';
|
|
export default {
|
|
props: {
|
|
tasks: {
|
|
type: Object,
|
|
default () {
|
|
return {
|
|
data: [],
|
|
links: [],
|
|
}
|
|
}
|
|
},
|
|
start_date:{
|
|
type:String,
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
end_date:{
|
|
type:String,
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
},
|
|
mounted: function () {
|
|
gantt.clearAll();// 清空之前的配置
|
|
gantt.i18n.setLocale('cn'); // 设置中文
|
|
gantt.config.date_format = "%Y-%m-%d";
|
|
gantt.config.date_grid = "%Y/%m/%d";
|
|
gantt.config.readonly = true; // 设置中文
|
|
gantt.config.autosize = true;//自适应尺寸
|
|
gantt.plugins({tooltip: true});
|
|
gantt.config.bar_height = 20; //task高度
|
|
// gantt.config.start_date = new Date(2023, 9, 1);
|
|
// gantt.config.end_date = new Date(2023, 9, 10);
|
|
//更改父项图标
|
|
// gantt.templates.grid_folder = (item) => {
|
|
// return ""
|
|
// }
|
|
//更改子项图标
|
|
// gantt.templates.grid_file = (item) => {
|
|
// return ""
|
|
// }
|
|
gantt.config.columns = [
|
|
{name: 'number',label: '任务编号',tree: true,width: '*',align: 'left'},
|
|
{name: 'cate',label: '规格型号', width: '70',align: 'center'},
|
|
{name: 'count',label: '完成量',width: '50', align: 'center'}
|
|
];
|
|
gantt.attachEvent('onGanttReady', function () {
|
|
gantt.templates.tooltip_text = function (start, end, task) {
|
|
return task.number +
|
|
'<br/>计划产量：' + task.count +
|
|
'<br/>当日产量：' + task.count_real +
|
|
'<br/>完成产量：' + task.count_ok +
|
|
'<br/>开工时间：' + gantt.templates.tooltip_date_format(start) +
|
|
'<br/>完工时间：' + gantt.templates.tooltip_date_format(start);
|
|
};
|
|
});
|
|
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
|
|
// gantt.config.autosize = true;
|
|
// gantt.config.open_split_tasks = true;
|
|
|
|
// gantt.config.scale_unit = "day";
|
|
// gantt.config.step = 1;
|
|
// gantt.config.date_scale = " %Y/%m/%d";
|
|
//时间轴样式
|
|
var yearScaleCss = function () {
|
|
return 'yearScaleStyle';
|
|
};
|
|
var monthScaleCss = function () {
|
|
return 'monthScaleStyle';
|
|
};
|
|
gantt.config.scales = [
|
|
{ unit: 'year', step: 1, format: " %Y年", css: yearScaleCss },
|
|
{ unit: 'day', step: 1, format: " %m月%d日", css: monthScaleCss }
|
|
];
|
|
gantt.config.duration_step = 1;
|
|
// 初始化甘特图
|
|
gantt.init(this.$refs.ganttContainer);
|
|
gantt.parse(this.$props.tasks);
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
|
|
</style> |