226 lines
9.5 KiB
JavaScript
226 lines
9.5 KiB
JavaScript
/* 定义一些常用、通用的方法，供外部调用
|
|
-----------------------------------------------------------------------------*/
|
|
|
|
function CreateGantt() {
|
|
|
|
var gantt = new PlusGantt();
|
|
|
|
//创建甘特图调度插件
|
|
new GanttSchedule(gantt);
|
|
|
|
gantt.setStyle("width:800px;height:400px");
|
|
|
|
gantt.setAllowDragDrop(true);
|
|
|
|
gantt.setColumns([
|
|
{ header: "序号", field: "ID",width: 50 ,enterCommit: false},
|
|
// new StatusColumn(),
|
|
// { header: mini.Gantt.Name_Text, field: "Name", width: 200, name: "taskname",
|
|
// editor: { type: "textbox" }
|
|
// },
|
|
{ header: mini.Gantt.Name_Text, field: "nodeName", width: 200, name: "taskname",
|
|
editor: { type: "textbox" }
|
|
},
|
|
// { header: mini.Gantt.PredecessorLink_Text, field: "PredecessorLink",
|
|
// editor: {
|
|
// type: "textbox"
|
|
// },
|
|
// oncellbeginedit: function (e) {
|
|
// var table = e.source, gantt = table.owner;
|
|
// var links = e.value;
|
|
// e.value = gantt.getLinkString(links);
|
|
// }
|
|
// },
|
|
// { header: mini.Gantt.Duration_Text, field: "Duration",
|
|
// editor: {
|
|
// type: "spinner", minValue: 0, maxValue: 1000
|
|
// }
|
|
// },
|
|
// { header: mini.Gantt.Start_Text, field: "Start",
|
|
// editor: {
|
|
// type: "datepicker"
|
|
// }
|
|
// },
|
|
{ header: '计划完成时间', field: "plannedCompletionTime",
|
|
editor: {
|
|
type: "datepicker"
|
|
}
|
|
},
|
|
{ header: "预计完成日期", field: "estimatedCompletionDate",enterCommit: false,
|
|
editor: { type: "datepicker"}
|
|
},
|
|
{ header: "实际完成日期", field: "actualFinishDate",
|
|
editor: {
|
|
type: "datepicker"
|
|
}
|
|
},
|
|
{ header: '状态', field: "nodeState",
|
|
editor: {
|
|
type: "textbox"
|
|
}
|
|
},
|
|
]);
|
|
//设置节点列
|
|
gantt.setTreeColumn("taskname");
|
|
|
|
gantt.on("drawcell", function (e) {
|
|
// console.log(e);
|
|
if (e.column.field == "Name" && e.record.Summary) {
|
|
e.cellHtml = '<b>' + e.cellHtml + '</b>';
|
|
}
|
|
// if (e.column.field == "Start" || e.column.field == "Finish") {
|
|
//
|
|
// var d = e.value;
|
|
// // console.log(e.cellHtml);
|
|
// console.log(d);
|
|
// if (d) {
|
|
// e.cellHtml = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
|
|
// }
|
|
// }
|
|
if (e.column.field == "plannedCompletionTime") {
|
|
e.cellHtml = e.value;
|
|
}
|
|
if (e.column.field == "estimatedCompletionDate") {
|
|
e.cellHtml = e.value;
|
|
}
|
|
if (e.column.field == "actualFinishDate") {
|
|
e.cellHtml = e.value;
|
|
}
|
|
if (e.column.field == "nodeName") {
|
|
e.cellHtml = e.value;
|
|
}
|
|
if (e.column.field == "nodeState") {
|
|
e.cellHtml = e.value == 1?'进行中':e.value == 2?'逾期':e.value == 3?'正常完成':e.value == 4?'提前完成':e.value == 5?'逾期完成':'';
|
|
}
|
|
if (e.column.field == "PredecessorLink") {
|
|
e.cellHtml = gantt.getLinkString(e.value);
|
|
}
|
|
});
|
|
gantt.on("drawitem", function (e) {
|
|
// console.log(e);
|
|
var item = e.item;
|
|
var left = e.itemBox.left,
|
|
top = e.itemBox.top,
|
|
width = e.itemBox.width ?e.itemBox.width - 24*9:12,
|
|
height = e.itemBox.height;
|
|
// console.log(!item.Summary && !item.Milestone);
|
|
if (!item.Summary && !item.Milestone) {
|
|
var percentWidth = width * (item.PercentComplete / 100);
|
|
// item.nodeState = 4
|
|
let leftColor,rightColor,contenColor,display,itemConten,itemColor;
|
|
if (item.nodeState == 1){
|
|
leftColor = '#4C87FE'
|
|
rightColor = ''
|
|
display = 'none'
|
|
itemConten = '计划完成时间'
|
|
itemColor = '#4C87FE'
|
|
}else if (item.nodeState == 2){
|
|
leftColor = '#4C87FE'
|
|
rightColor = ''
|
|
contenColor = 'rgba(255, 0, 0,0.8)'
|
|
display = 'none'
|
|
itemConten = '逾期' + item.deferDiffDay + '天'
|
|
width = item.deferDiffDay*24 + 24
|
|
itemColor = 'rgb(255, 0, 0)'
|
|
} else if (item.nodeState == 3){
|
|
leftColor = '#44D7B6'
|
|
rightColor = ''
|
|
display = 'none'
|
|
itemConten = '任务准时完成'
|
|
itemColor = '#44D7B6'
|
|
}else if (item.nodeState == 4){
|
|
leftColor = '#F7D300'
|
|
rightColor = '#4C87FE'
|
|
contenColor = 'rgba(148, 130, 7,0.8)'
|
|
display = 'inline-block'
|
|
itemConten = '提前' + item.beforeCompleteDiffDay + '天完成'
|
|
itemColor = '#F7D300'
|
|
}else if (item.nodeState == 5){
|
|
leftColor = '#4C87FE';
|
|
rightColor = '#CD5B6E';
|
|
contenColor = 'rgba(136, 18, 31,0.8)';
|
|
display = 'inline-block';
|
|
itemConten = '逾期' + item.deferCompleteDiffDay + '天完成';
|
|
itemColor = '#CD5B6E'
|
|
}
|
|
let leftS
|
|
// if(left + width > 200){
|
|
// leftS = left - 100
|
|
// }else {
|
|
// leftS = left + width + 12
|
|
// }
|
|
// console.log(leftS);
|
|
e.itemHtml = '<div id="' + item._id + '" class="myitem" style="position: absolute;left:' + left + 'px;top:' + top + 'px;width:' + width + 'px;height:' + (height) + 'px;background-color: '+ contenColor +' !important;border-radius: 5px;z-index: 100">';
|
|
e.itemHtml += '<div style="position: absolute;width: 12px;height: 12px;border-radius: 50%;background-color: '+ leftColor +' !important;"></div>';
|
|
e.itemHtml += '<div style="position: absolute;left:' + (width - 12) + 'px;width: 12px;height: 12px;border-radius: 50%;background-color: '+ rightColor +' !important;display: ' + display +'"></div>';
|
|
e.itemHtml += '</div>';
|
|
e.itemHtml += '<div style="position: absolute;left:' + (left + width + 12) + 'px;top:' + (top - 4) + 'px;z-index: 100">';
|
|
e.itemHtml += '<div style="background-color: '+ itemColor +' !important;padding:0px 5px;border-radius: 10px;">'+ itemConten + '</div>';
|
|
// e.itemHtml += '<div>121332111111111111111111111111111111111</div>';
|
|
e.itemHtml += '</div>';
|
|
|
|
//e.ItemHtml = '<a href="http://www.baidu.com" style="left:'+left+'px;top:'+top+'px;width:'+width+'px;height:'+(height-2)+'px;" class="myitem">111</a>';
|
|
}
|
|
|
|
});
|
|
gantt.on('itemtooltipneeded', function (e) {
|
|
console.log(e);
|
|
var task = e.task;
|
|
e.tooltip = "<div>任务：" + task.Name + "</div>"
|
|
// + "<div ><div style='float:left;'>进度：<b>"+task.PercentComplete + "%</b></div>"
|
|
// + "<div style='float:right;'>工期："+task.Duration + "日</div></div>"
|
|
+ "<div style='clear:both;'>计划日期：" + task.plannedCompletionTime + "</div>"
|
|
+ "<div>实际完成日期：" + task.actualFinishDate + "</div>";
|
|
});
|
|
return gantt;
|
|
}
|
|
|
|
|
|
//状态列
|
|
StatusColumn = function (optons) {
|
|
return mini.copyTo({
|
|
name: "Status",
|
|
width: 60,
|
|
header: '<div class="mini-gantt-taskstatus"></div>',
|
|
formatDate: function (date) {
|
|
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
|
|
},
|
|
renderer: function (e) {
|
|
var record = e.record;
|
|
var s = "";
|
|
if (record.PercentComplete == 100) {
|
|
var t = record.Finish ? "任务完成于 " + this.formatDate(record.Finish) : "";
|
|
s += '<div class="mini-gantt-finished" title="' + t + '"></div>';
|
|
}
|
|
if (record.Summary && record.FixedDate) {
|
|
|
|
var t = "此任务固定日期，从开始日期 " + this.formatDate(record.Start)
|
|
+ " 到完成日期 " + this.formatDate(record.Finish);
|
|
s += '<div class="mini-gantt-constraint3" title=\'' + t + '\'></div>';
|
|
} else if (record.ConstraintType >= 2 && mini.isDate(record.ConstraintDate)) {
|
|
var ct = mini.Gantt.ConstraintType[record.ConstraintType];
|
|
if (ct) {
|
|
var ctype = ct.Name;
|
|
var t = "此任务有 " + ct.Name + " 的限制，限制日期 " + this.formatDate(record.ConstraintDate);
|
|
s += '<div class="mini-gantt-constraint' + record.ConstraintType + '" title=\'' + t + '\'></div>';
|
|
}
|
|
}
|
|
if (record.Milestone) {
|
|
s += '<div class="mini-gantt-milestone-red" title="里程碑"></div>';
|
|
}
|
|
if (record.Notes) {
|
|
var t = '备注：' + record.Notes;
|
|
s += '<div class="mini-gantt-notes" title="' + t + '"></div>';
|
|
}
|
|
if (record.Conflict == 1) {
|
|
var t = "此任务排程有冲突，如有必要，请适当调整";
|
|
s += '<div class="mini-gantt-conflict" title="' + t + '"></div>';
|
|
}
|
|
|
|
//如果有新的任务状态图标显示, 请参考以上代码实现之......
|
|
|
|
return s;
|
|
}
|
|
}, optons);
|
|
}
|