HTML实时显示任务状态,HTML中使用Vue+Dhtmlxgantt制作任务进度图

$(function() {

window.App= newVue({

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:newDate(current.开始时间),

end_date:newDate(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));returndays;

},

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 "计划名称: " + task.text +" " +"完成计划："+ Math.round(task.progress * 100) + "% ";

};

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

}

});

});