zoukankan      html  css  js  c++  java
  • 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='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,  '*', 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,  '*', 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);  
            }
        });
    });
  • 相关阅读:
    vue 项目界面绘制_stylus_iconfont_swiper
    react_结合 redux
    BOM 浏览器对象模型_当前窗口的浏览历史 history 对象
    BOM 浏览器对象模型_Storage 接口
    react_app 项目开发 (9)_数据可视化 ECharts
    react_app 项目开发 (8)_角色管理_用户管理----权限管理 ---- shouldComponentUpdate
    BOM 浏览器对象模型_同源限制
    面试题: 多个 await 处理,有一个失败,就算作失败
    react_app 项目开发 (7)_难点集合
    react_app 项目开发_遇到的坑
  • 原文地址:https://www.cnblogs.com/wofeiliangren/p/11678297.html
Copyright © 2011-2022 走看看