vue前端項目實現 dhtmlxgantt 甘特圖

最近項目中剛好使用了甘特圖，第一次使用，在此記錄一下，有需要的同學可以借鑒一下。

首先來個效果圖吧，哈哈哈~~~

 因為這里用到了dhtmlx這個甘特圖的組件，有些功能要專業版才能使用，但是免費的基本上符合需求了

插件文檔地址：https://docs.dhtmlx.com/gantt/api__refs__gantt.html

 

 

代碼如下：

<template>
    <div class="container">
        <div class="select-wrap">
            <el-select v-model="value" placeholder="請選擇" @change="selectChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div ref="gantt" class="gantt-container"></div>
    </div>
</template>
<script>
    import {
        gantt
    } from 'dhtmlx-gantt';
    import "dhtmlx-gantt/codebase/dhtmlxgantt.css"

    export default {
        name: 'gantt',
        data() {
            return {
                tasks: {
                    data: []
                },
                options: [{
                    value: '1',
                    label: '全部'
                }, {
                    value: '2',
                    label: '完成'
                }, {
                    value: '3',
                    label: '正常'
                }, {
                    value: '4',
                    label: '異常'
                }, {
                    value: '5',
                    label: '未啟動'
                }],
                value: '1'
            }
        },
        methods: {
            //開始時間-結束時間參數
            DateDifference: function(strDateStart, strDateEnd) {
                var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, '/'))) //begintime 為開始時間
                var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, '/'))) // endtime 為結束時間
                var date3 = endtime_ms - begintime_ms //時間差的毫秒數
                var days = Math.floor(date3 / (24 * 3600 * 1000))
                return days
            },
            initData: function() {
                this.tasks.data = [{
                        id: 1,
                        text: '概念設計',
                        start_date: '2020-04-08',
                        duration: 10,
                        open: true, //默認打開，
                        toolTipsTxt: 'xxx項目概念設計',
                        progress: 0.6,
                        status: "parent"
                    },
                    {
                        toolTipsTxt: 'xxx項目-項目啟動會',
                        text: '項目啟動會-外部', // 任務名
                        start_date: '2020-04-08', // 開始時間
                        id: 11, // 任務id
                        duration: 3, // 任務時長，從start_date開始計算
                        parent: 1, // 父任務ID
                        type: 1,
                        progress: 0.5,
                        status: "yellow"
                    },
                    {
                        toolTipsTxt: 'xxx項目-項目啟動會議',
                        text: '項目啟動會-內部',
                        start_date: '2020-04-11', 
                        id: 12,
                        duration: 2, 
                        parent: 1, 
                        type: 2,
                        progress: 0.6,
                        status: "pink"
                    },
                    {
                        toolTipsTxt: 'xxx項目開工會',
                        text: '項目開工會',
                        start_date: '2020-04-13', 
                        id: 13, 
                        duration: 4,
                        parent: 1,
                        type: 3,
                        progress: 1,
                        status: "green"

                    }, {
                        toolTipsTxt: 'xxx項目-項目分析',
                        text: '項目分析',
                        start_date: '2020-04-13',
                        id: 14, 
                        duration: 4, 
                        parent: 1,
                        type: 4,
                        progress: 0.6,
                        status: "popular"
                    },

                    {
                        id: 2,
                        text: '方案設計',
                        start_date: '2020-04-08',
                        duration: 8,
                        open: true,
                        toolTipsTxt: 'xxx方案設計',
                        state: 'default',
                        // color:"#409EFF", //設置顏色
                        progress: 0.6,
                        status: "parent"
                    },
                    {
                        toolTipsTxt: 'xxx新項目原型圖設計',
                        text: '原型圖設計', 
                        start_date: '2020-04-08', 
                        id: 21, 
                        duration: 2, 
                        parent: 2, 
                        type: 1,
                        progress: 0.6,
                        status: "yellow"
                    },
                    {
                        toolTipsTxt: 'xxx項目-項目設計圖',
                        text: '設計圖設計',
                        start_date: '2020-04-09', 
                        id: 22, 
                        duration: 2, 
                        parent: 2,
                        type: 2,
                        progress: 0.6,
                        status: "pink"
                    },
                    {
                        toolTipsTxt: 'xxx項目-項目確認',
                        text: '項目確認',
                        start_date: '2020-04-11', 
                        id: 23, 
                        duration: 2, 
                        parent: 2, 
                        type: 3,
                        progress: 1,
                        status: "green"
                    }

                ].map(function(current, ind, arry) {
                    var newObj = {}
                    if (current.type) { //存在type字段 說明非一級菜單，判斷階段的具體類型 設置不同顏色
                        if (current.type == 1) { //冒煙
                            newObj = Object.assign({}, current, {
                                'color': '#fcca02'
                            })
                        } else if (current.type == 2) { //單元
                            newObj = Object.assign({}, current, {
                                'color': '#fec0dc'
                            })
                        } else if (current.type == 3) { //回歸
                            newObj = Object.assign({}, current, {
                                'color': '#62ddd4'
                            })
                        } else if (current.type == 4) {
                            newObj = Object.assign({}, current, {
                                'color': '#d1a6ff'
                            })
                        }
                    } else { //一級菜單是藍色的
                        newObj = Object.assign({}, current, {
                            'color': '#5692f0'
                        })
                    }

                    return newObj
                })
            },
            selectChange(val){
                console.log(val)
                
                //測試用例
                var obj = {
                        toolTipsTxt: '新增任務',
                        text: '新增任務', // 任務名
                        start_date: '2020-04-15', // 開始時間
                        id: 24, // 任務id
                        duration: 2, // 任務時長，從start_date開始計算
                        parent: 2, // 父任務ID
                        type: 4,
                        progress:0,
                        status: "popular"
                }
                this.tasks.data.push(obj)

                // 數據解析
                gantt.parse(this.tasks)
                // 刷新數據
                gantt.refreshData();
            }
        },
        mounted() {
            this.initData()


            //自適應甘特圖的尺寸大小, 使得在不出現滾動條的情況下, 顯示全部任務
            gantt.config.autosize = true
            //只讀模式
            gantt.config.readonly = true
            //是否顯示左側樹表格
            gantt.config.show_grid = true
            //表格列設置
            gantt.config.columns = [{
                    name: 'text',
                    label: '階段名字',
                    tree: true,
                    width: '280',
                    onrender: function(task, node) {
                        node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.status);
                    }
                },
                {
                    name: 'duration',
                    label: '時長',
                    align: 'center',
                    template: function(obj) {
                        return obj.duration + '天'
                    },
                    hide: true
                }
            ]



            var weekScaleTemplate = function(date) {
                var dateToStr = gantt.date.date_to_str("%m %d");
                var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
                var weekNum = gantt.date.date_to_str("第 %W 周");
                return weekNum(date)
            };
            var daysStyle = function(date) {
                var dateToStr = gantt.date.date_to_str("%D");
                if (dateToStr(date) == "六" || dateToStr(date) == "日") return "weekend";
                return "";
            };
            gantt.config.subscales = [{
                    unit: "week",
                    step: 1,
                    template: weekScaleTemplate
                },
                {
                    unit: "day",
                    step: 1,
                    format: "%d"
                }
            ];

            gantt.plugins({
                tooltip: true
            });
            gantt.attachEvent("onGanttReady", function() {
                var tooltips = gantt.ext.tooltips;
                gantt.templates.tooltip_text = function(start, end, task) {

                    return task.toolTipsTxt + "<br/>" +
                        "階段：" + task.text + "<br/>" +
                        gantt.templates.tooltip_date_format(start)
                };


            });


            //設置任務條進度內容
            gantt.templates.progress_text = function(start, end, task) {
                return "<div style='text-align:left;color:#fff;padding-left:20px'>" + Math.round(task.progress * 100) +
                    "% </div>";
            };

            //任務條顯示內容
            gantt.templates.task_text = function(start, end, task) {
                // return task.text + '(' + task.duration + '天)';
                return "<div style='text-align:center;color:#fff'>" + task.text + '(' + task.duration + '天)' +
                    "</div>";
            }


            // gantt.templates.scale_cell_class = function(date) {
            //     /*if(date.getDay()== 0 || date.getDay()== 6){
            //       return "weekend";
            //     }*/
            //     return 'weekend'
            // }


            //任務欄周末亮色
            /*gantt.templates.task_cell_class = function(item,date){
              if(date.getDay()== 0 || date.getDay()== 6){
                return "weekend";
              }
            };*/


            //任務條上的文字大小 以及取消border自帶樣式
            gantt.templates.task_class = function(start, end, item) {
                return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
            }

            gantt.config.layout = {
                css: "gantt_container",
                cols: [{
                        width: 280,
                        min_width: 280,
                        rows: [{
                                view: "grid",
                                scrollX: "gridScroll",
                                scrollable: true,
                                scrollY: "scrollVer"
                            },
                            {
                                view: "scrollbar",
                                id: "gridScroll",
                                group: "horizontal"
                            }
                        ]
                    },
                    {
                        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 = 28            
            //時間軸圖表中，甘特圖的高度
            // gantt.config.row_height = 36            
            //時間軸圖表中，如果不設置，只有行邊框，區分上下的任務，設置之后帶有列的邊框，整個時間軸變成格子狀。
            gantt.config.show_task_cells = true
            //當task的長度改變時，自動調整圖表坐標軸區間用於適配task的長度
            gantt.config.fit_tasks = true
            gantt.config.min_column_width = 50;
            gantt.config.auto_types = true;
            gantt.config.xml_date = "%Y-%m-%d";
            gantt.config.scale_unit = "month";
            gantt.config.step = 1;
            gantt.config.date_scale = "%Y年%M";
            gantt.config.start_on_monday = true;
            gantt.config.scale_height = 90;
            gantt.config.autoscroll = true;
            gantt.config.calendar_property = "start_date";
            gantt.config.calendar_property = "end_date";
            gantt.config.readonly = true;
            gantt.i18n.setLocale('cn');

            // 初始化
            gantt.init(this.$refs.gantt)
            // 數據解析
            gantt.parse(this.tasks)
        }
    }
</script>
<style lang="scss">
    .firstLevelTask {
        border: none;

        .gantt_task_content {
            font-size: 13px;
        }
    }

    .secondLevelTask {
        border: none;
    }

    .thirdLevelTask {
        border: 2px solid #da645d;
        color: #da645d;
        background: #da645d;
    }

    .milestone-default {
        border: none;
        background: rgba(0, 0, 0, 0.45);
    }

    .milestone-unfinished {
        border: none;
        background: #5692f0;
    }

    .milestone-finished {
        border: none;
        background: #84bd54;
    }

    .milestone-canceled {
        border: none;
        background: #da645d;
    }

    html,
    body {
        margin: 0px;
        padding: 0px;
        height: 100%;
        overflow: hidden;
    }

    .container {
        height: 100%;
        width: 100%;
        position: relative;
        .gantt_grid_head_cell {
            padding-left: 20px;
            text-align: left !important;
            font-size: 14px;
            color: #333;
        }

        .select-wrap {
            position: absolute;
            top: 25px;
            z-index: 99;
            width: 90px;
            left: 180px;

            .el-input__inner {
                border: none;
            }
        }

        .left-container {
            height: 100%;
        }

        .parent {
            .gantt_tree_icon {
                &.gantt_folder_open {
                    background-image: url(assets/gantt-icon.svg) !important;
                }
                &.gantt_folder_closed{
                    background-image: url(assets/gantt-icon-up.svg) !important;
                }
            }
        }

        .green,
        .yellow,
        .pink,
        .popular {
            .gantt_tree_icon.gantt_file {
                background: none;
                position: relative;

                &::before {
                    content: "";
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }

        .green {
            .gantt_tree_icon.gantt_file {
                &::before {
                    background: #84bd54;
                }
            }
        }

        .yellow {
            .gantt_tree_icon.gantt_file {
                &::before {
                    background: #fcca02;
                }
            }
        }

        .pink {
            .gantt_tree_icon.gantt_file {
                &::before {
                    background: #da645d;
                }
            }
        }

        .popular {
            .gantt_tree_icon.gantt_file {
                &::before {
                    background: #d1a6ff;
                }
            }
        }

    }

    .left-container {
        height: 100%;
    }

    .gantt_task_content {
        text-align: left;
        padding-left: 10px;
    }
</style>