标签:计划 window 点击 number 引用 nan width 官方文档 实现
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); } }); });
标签:计划 window 点击 number 引用 nan width 官方文档 实现
原文地址:https://www.cnblogs.com/wofeiliangren/p/11678297.html