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