HTML中使用Vue+Dhtmlxgantt制作任务进度图

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);  
        }
    });
});