HTML中使用Vue+Dhtmlxgantt制作任务进度图
HTML中使用VueDhtmlxgantt制作任务进度图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汉化文件divdividgantt_herestylewidth:100%; height:550px;refgantt/div/divjs部分[](javascript:void(0); “复制代码”)$(function(){window.Appnew Vue({el:#app, data:function(){return{tasks:{data:[]}}};}, methods:{QueryClick:function(){var thatthis;//每次点击查询前清空 that.InitData();that.Ajax({url:/JHProcess/GetProcessContrast,//从后台读取数据 data:{XXXX//后台查询条件}, success:function(result){var dataresult.Data.Data;var arry[];for(var i0;idata.length;i){var currentdata[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.dataarry;that.Init();//加载数据之后初始化}});}, weekScaleTemplate:function(date){var dateToStrgantt.date.date_to_str(%d%M);var weekNumgantt.date.date_to_str((周%W));var endDategantt.date.add(gantt.date.add(date,1,week), -1,day);returndateToStr(date) - dateToStr(endDate) weekNum(date);}, DateDifference:function(strDateStart, strDateEnd){var begintime_msDate.parse(new Date(strDateStart.replace(/-/g,/)));//begintime 为开始时间 var endtime_msDate.parse(new Date(strDateEnd.replace(/-/g,/)));// endtime 为结束时间 var date3endtime_ms - begintime_ms;//时间差的毫秒数 var daysMath.floor(date3 /(24*3600*1000));returndays;}, Init:function(){var thatthis;gantt.config.scale_unitmonth;//时间坐标轴单位“minute”, “hour”, “day”, “week”, “quarter”, “month”, “year” gantt.config.date_scale%d,%D;//日期格式 先数字后文字 gantt.config.row_height30;//甘特图的行高 gantt.config.scale_height20;//甘特图的表头高度 gantt.config.scroll_on_clickfalse;gantt.config.min_column_width60;gantt.config.duration_unitday;gantt.config.scale_height20*3;//gantt.config.row_height28;gantt.config.drag_resizefalse;//两边不可拖动 gantt.config.readonlytrue;//只读模式 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_textfunction(start, end, task){returnb styletext-align:left;计划名称:/b task.text span styletext-align:left;完成计划 Math.round(task.progress *100)% /span;};gantt.init(that.$refs.gantt);gantt.parse(that.tasks);}, InitData:function(){//清空数据 gantt.clearAll();}},mounted(){var thatthis;that.Ajaxtop.Helper.Current.Ajax;//注入一个用户信息 that.Usertop.Helper.Current.User;console.log(that.$refs.gantt);that.SizeChangefunction(){var thatthis;var h$(#app).height();if(that.WindowSize!h){that.WindowSize(h -135);console.log(that.WindowSize);}};gantt.config.min_column_width60;gantt.config.scale_height20*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);}});});
