HTML中使用Vue+Dhtmlxgantt制作任務進度圖

Dhtmlxgantt官網： https://dhtmlx.com/docs/products/dhtmlxGantt/

參考文章

甘特圖配置大佬翻譯的官方文檔 ，https://blog.csdn.net/qq_24472595/article/details/81630117；
實現搜索 新增 編輯 刪除 設置具體時間格式 突出周末顯示https://blog.csdn.net/CX_silent/article/details/83589451
從0開始使用Dhtmlxgantt https://blog.csdn.net/honantic/article/details/51314672 ；
代碼部分

HTML部分：

       //需要引用dhtmlxgantt.css、dhtmlxgantt.js、locale_cn.js（漢化文件）
        <div>
            <div id="gantt_here" style='width:100%; height:550px;'  ref="gantt"></div>
        </div> 

js部分：

 

 $(function () {
    window.App = new Vue({
        el: "#app",
        data: function () {
            return { 
                tasks: {
                    data: []
                }
                }
            };
        },
        methods: {
            QueryClick: function () {
                var that = this;
                //每次點擊查詢前清空
                that.InitData();
                that.Ajax({
                    url: "/JHProcess/GetProcessContrast",//從后台讀取數據
                    data: {
                        XXXX//后台查詢條件
                    },
                    success: function (result) { 
                        var data = result.Data.Data;
                        var arry = [];  
                        for (var i = 0; i < data.length; i++) {
                            var current = data[i];
                            arry.push({ 
                                text: current.名稱,
                                start_date: new Date(current.開始時間),
                                end_date: new Date(current.結束時間),
                                duration: that.DateDifference(current.開始時間, current.結束時間),
                                progress: Number((current.計划進度 / current.本年投資計划完成).toFixed(2))
                            }); 
                        }
                        that.tasks.data = arry; 
                        that.Init(); //加載數據之后初始化 
                    }
                });  
            }, 
            weekScaleTemplate: function (date) {
                var dateToStr = gantt.date.date_to_str("%d%M");
                var weekNum = gantt.date.date_to_str("(周%W)");
                var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), - 1, "day");
                return dateToStr(date) + " - " + dateToStr(endDate) + "" + weekNum(date);
            },
            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;
            },
            Init: function () {
                var that = this;
                gantt.config.scale_unit = "month";  //時間坐標軸單位“minute”, “hour”, “day”, “week”, “quarter”, “month”, “year”
                gantt.config.date_scale = "%d,%D";//日期格式 先數字后文字 
                gantt.config.row_height = 30; //甘特圖的行高
                gantt.config.scale_height = 20;//甘特圖的表頭高度
                gantt.config.scroll_on_click = false;
                gantt.config.min_column_width = 60;
                gantt.config.duration_unit = "day";
                gantt.config.scale_height = 20 * 3;
                //gantt.config.row_height = 28;
                gantt.config.drag_resize = false;//兩邊不可拖動 
                gantt.config.readonly = true;//只讀模式
                gantt.config.subscales = [{  //時間坐標為月份的時候  先顯示年份再月份
                    unit: "month",
                    step: 1,
                    date: "%Y,%F"
                }];
                //配置顯示列   //name:綁定數據的名稱  align：對其方式  label顯示在表頭的名稱
                gantt.config.columns = [
                    { name: "text", tree: true, width: '*', align: "center", label: "計划名稱", resize: true },
                    { name: "start_date", align: "center", resize: true },
                    { name: "end_date", align: "center", label: "結束時間", resize: true },
                    { name: "duration", align: "center" }
                ];
                //顯示到進度條上的文本   計划名稱和任務進度百分比
                gantt.templates.task_text = function (start, end, task) { 
                    return "<b style='text-align:left;'>計划名稱:</b> " + task.text +"    <span style='text-align:left;'>" +"完成計划："+ Math.round(task.progress * 100) + "% </span>";
                }; 
                gantt.init(that.$refs.gantt);
                
                gantt.parse(that.tasks);
            },
            InitData: function () { 
                //清空數據
                gantt.clearAll(); 
            }
        },
        mounted() {
            var that = this;
            that.Ajax = top.Helper.Current.Ajax;
            //注入一個用戶信息
            that.User = top.Helper.Current.User;
            console.log(that.$refs.gantt);
            that.SizeChange = function () {
                var that = this;
                var h = $("#app").height();
                if (that.WindowSize != h) {
                    that.WindowSize = (h - 135);
                    console.log(that.WindowSize);
                }
            }; 
            gantt.config.min_column_width = 60;
            gantt.config.scale_height = 20 * 3;
            gantt.config.subscales = [{
                unit: "month",
                step: 1,
                date: "%Y,%F"
            }];
            //配置顯示列   //name:綁定數據的名稱  align：對其方式  label顯示在表頭的名稱
            gantt.config.columns = [
                { name: "text", tree: true, width: '*', align: "center", label: "計划名稱", resize: true },
                { name: "start_date", align: "center", resize: true },
                { name: "end_date", align: "center", label: "結束時間", resize: true },
                { name: "duration", align: "center" }
            ];
            gantt.init(that.$refs.gantt);  
        }
    });
});