factory_web/src/components/GanttComponent.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 () {
        let that = this;
        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.duration_unit = "day";// 设置时间单位为天
        //今天标志
        // gantt.plugins({marker: true});
        // gantt.addMarker({start_date: new Date(),text: '今日'});

        //工作日设置
        // gantt.config.work_time = true;
        // gantt.setWorkTime({ hours:["20:00-20:00"] });
        // gantt.setWorkTime({ day:7, hours:false });
        // gantt.setWorkTime({ hours:["0-24"] });
        // 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: '200', align: 'left' },
            { name: 'material_name', label: '产品名称', width: '70', align: 'left' },
            { name: 'material_specification', label: '规格', width: '70', align: 'left' },
            { name: 'material_model', label: '型号', width: '70', align: 'left' },
            { name: 'count', label: '任务量', width: '50', align: 'center' }
        ];
        gantt.attachEvent('onGanttReady', function () {
            gantt.templates.tooltip_text = function (start, end, task) {
                let endTime = end.getTime()-24*60*60*1000;
                let end_date = new Date(endTime);
                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(end_date);
            };
        });
        gantt.attachEvent("onTaskClick", async function(id, e) {
            var task = gantt.getTask(id);
            console.log(task)
            if(task.type=="utask"){
                that.$API.pm.mtask.list.req({ utask: id, page: 0, ordering: 'start_date,mgroup__process__sort' }).then(res => {
                let data = []; 
                res.forEach(item => {
                    let obj = {};
                    obj.id = item.id;
                    obj.type = 'task';
                    obj.parent = id;
                    obj.number = item.number;
                    obj.text = item.mgroup_name;
                    obj.state = item.state;
                    obj.start = item.start_date;
                    obj.start_date = item.start_date;
                    obj.duration = 1;
                    obj.progress = item.count_real / item.count;
                    obj.count = item.count;
                    obj.count_ok = item.count_ok;
                    obj.count_real = item.count_real;
                    obj.count_notok = item.count_notok;
                    obj.state = item.state;
                    obj.utask = item.utask;
                    obj.mgroup_name = item.mgroup_name;
                    data.push(obj)
                })
                // 数据解析:将数据解析到gantt列数据中
               
                let childTasks  = data
                gantt.parse({ data: childTasks });
                // 刷新数据
                gantt.refreshData();
            })
            }
           

        })
        //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
        // 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);
    },
    // methods:{
    //     setBarColor() {
    //         this.tasks.map(v => {
    //         var newObj = {};
    //         if (v.status === "CJ") {
    //             newObj = Object.assign(v, {
    //             'color': '#aaa8eb'
    //             });
    //         } else if (v.status === "SX") {
    //             newObj = Object.assign(v, {
    //             'color': '#7cbbff'
    //             });
    //         }
    //         return newObj;
    //         });
    //     },
    // },
}
</script>
<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
.gantt_task_line{
    background-color: #c7c9c9;
    border: 1px solid #adb1b2;
}
.gantt_task_progress{
    color: #148dff;
}
</style>