350 lines
11 KiB
JavaScript
350 lines
11 KiB
JavaScript
|
var allColumns = [];
|
|||
|
|
var currentZoomLevel = 4;
|
|||
|
|
|
|||
|
|
//折叠
|
|||
|
|
function fold() {
|
|||
|
|
gantt.eachTask(function (task) {
|
|||
|
|
task.$open = false;
|
|||
|
|
});
|
|||
|
|
gantt.render();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//展开
|
|||
|
|
function open1() {
|
|||
|
|
gantt.eachTask(function (task) {
|
|||
|
|
task.$open = true;
|
|||
|
|
});
|
|||
|
|
gantt.render();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 放大
|
|||
|
|
function zoomIn() {
|
|||
|
|
if (currentZoomLevel !=1 ) {
|
|||
|
|
currentZoomLevel = currentZoomLevel - 1;
|
|||
|
|
setGanttZoomlevel(gantt, currentZoomLevel);
|
|||
|
|
gantt.render();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 缩小
|
|||
|
|
function zoomOut() {
|
|||
|
|
if (currentZoomLevel != 5) {
|
|||
|
|
currentZoomLevel = currentZoomLevel + 1;
|
|||
|
|
setGanttZoomlevel(gantt, currentZoomLevel);
|
|||
|
|
gantt.render();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//初始化
|
|||
|
|
function initData(param) {
|
|||
|
|
if (param) {
|
|||
|
|
if (param.allColumns) {
|
|||
|
|
allColumns = param.allColumns;
|
|||
|
|
}
|
|||
|
|
if (param.currentZoomLevel) {
|
|||
|
|
currentZoomLevel = param.currentZoomLevel;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化甘特图插件
|
|||
|
|
function initGanttPlugin(container) {
|
|||
|
|
allColumns = gantt.config.columns;
|
|||
|
|
setGanttZoomlevel(gantt, currentZoomLevel);
|
|||
|
|
|
|||
|
|
gantt.config.readonly = true;
|
|||
|
|
gantt.config.static_background = false;/*去除甘特图右侧表格*/
|
|||
|
|
gantt.config.drag_progress = false;
|
|||
|
|
gantt.config.order_branch = false; //true;
|
|||
|
|
gantt.config.order_branch_free = false;//true;
|
|||
|
|
|
|||
|
|
//甘特图上显示文字
|
|||
|
|
gantt.templates.task_text = function (start, end, task) {
|
|||
|
|
return task.text;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//鼠标悬浮提示框
|
|||
|
|
gantt.templates.tooltip_text = function (start, end, task) {
|
|||
|
|
var html = "";
|
|||
|
|
html += "<div style='line-height: 18px; color: #666;'>任务名称：<span style='color: #333;'>" + task.text + "</span></div>";
|
|||
|
|
html += "<div style='line-height: 18px; color: #666;'>计划开始时间：<span style='color: #333;'>" + getFormatDate(start, "ymd") + "</span></div>";
|
|||
|
|
html += "<div style='line-height: 18px; color: #666;'>计划完成时间：<span style='color: #333;'>" + getFormatDate(end, "ymd") + "</span></div>";
|
|||
|
|
html += "<div style='line-height: 18px; color: #666;'>实际开始时间：<span style='color: #333;'>" + task.start_date_actual + "</span></div>";
|
|||
|
|
html += "<div style='line-height: 18px; color: #666;'>实际结束时间：<span style='color: #333;'>" + task.end_date_actual + "</span></div>";
|
|||
|
|
//没有下级节点时才显示百分比
|
|||
|
|
if (task.exist_childnode == 0) {
|
|||
|
|
if (task.percentage_actual && task.percentage_actual != undefined) {
|
|||
|
|
html += "<div style='line-height: 18px; color: #666;'>完成百分比：<span style='color: #333;'>" + task.percentage_actual + "</span></div>";
|
|||
|
|
} else {
|
|||
|
|
html += "<div style='line-height: 18px; color: #666;'>完成百分比：<span style='color: #333;'>0%</span></div>";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return html;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
gantt.templates.task_class = gantt.templates.grid_row_class = gantt.templates.task_row_class = function (start, end, task) {
|
|||
|
|
/*父节点行颜色*/
|
|||
|
|
var css = [];
|
|||
|
|
if (gantt.hasChild(task.id)) {
|
|||
|
|
css.push("task-parent");
|
|||
|
|
}
|
|||
|
|
return css.join(" ");
|
|||
|
|
/*父节点行颜色*/
|
|||
|
|
if (gantt.isSelectedTask(task.id))
|
|||
|
|
return "gantt_selected";
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
gantt.templates.link_class = function (link) {
|
|||
|
|
var types = gantt.config.links;
|
|||
|
|
switch (link.type) {
|
|||
|
|
case types.finish_to_start:
|
|||
|
|
return "finish_to_start";
|
|||
|
|
break;
|
|||
|
|
case types.start_to_start:
|
|||
|
|
return "start_to_start";
|
|||
|
|
break;
|
|||
|
|
case types.finish_to_finish:
|
|||
|
|
return "finish_to_finish";
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
gantt.templates.task_class = function (start, end, task) {
|
|||
|
|
switch (task.priority) {
|
|||
|
|
case "1":
|
|||
|
|
return "high";
|
|||
|
|
break;
|
|||
|
|
case "2":
|
|||
|
|
return "medium";
|
|||
|
|
break;
|
|||
|
|
case "3":
|
|||
|
|
return "low";
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
gantt.attachEvent("onTaskSelected", function (id) { taskSelected(id); });
|
|||
|
|
gantt.attachEvent("onTaskDblClick", function (id) { taskDblClick(id); });
|
|||
|
|
gantt.attachEvent("onGanttReady", function () {
|
|||
|
|
var tooltips = gantt.ext.tooltips;
|
|||
|
|
tooltips.tooltip.setViewport(gantt.$task_data);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var ganttWidth = 0;
|
|||
|
|
gantt.config.columns.map(function (item) {
|
|||
|
|
ganttWidth += item.width
|
|||
|
|
});
|
|||
|
|
gantt.config.grid_width = ganttWidth;
|
|||
|
|
|
|||
|
|
gantt.init(container);
|
|||
|
|
gantt.refreshData();
|
|||
|
|
gantt.render();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 设置甘特图缩放等级
|
|||
|
|
function setGanttZoomlevel(gantt, level) {
|
|||
|
|
switch (level) {
|
|||
|
|
case 1:
|
|||
|
|
gantt.config.scale_unit = "day";
|
|||
|
|
gantt.config.step = 1;
|
|||
|
|
//gantt.config.date_scale = "%d %M";
|
|||
|
|
gantt.config.date_scale = "%D(%d)";
|
|||
|
|
gantt.config.subscales = [];
|
|||
|
|
gantt.config.scale_height = 27;
|
|||
|
|
gantt.templates.date_scale = null;
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
var weekScaleTemplate = function (date) {
|
|||
|
|
//var dateToStr = gantt.date.date_to_str("%d %M");
|
|||
|
|
var dateToStr = gantt.date.date_to_str("%m月%d日");
|
|||
|
|
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
|
|||
|
|
return dateToStr(date) + " - " + dateToStr(endDate);
|
|||
|
|
};
|
|||
|
|
gantt.config.scale_unit = "week";
|
|||
|
|
gantt.config.step = 1;
|
|||
|
|
gantt.templates.date_scale = weekScaleTemplate;
|
|||
|
|
gantt.config.subscales = [{
|
|||
|
|
unit: "day",
|
|||
|
|
step: 1,
|
|||
|
|
date: "%D"
|
|||
|
|
}];
|
|||
|
|
gantt.config.scale_height = 50;
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
gantt.config.scale_unit = "month";
|
|||
|
|
//gantt.config.date_scale = "%F, %Y";
|
|||
|
|
gantt.config.date_scale = "%Y年%m月";
|
|||
|
|
gantt.config.subscales = [{
|
|||
|
|
unit: "day",
|
|||
|
|
step: 1,
|
|||
|
|
//date: "%j, %D"
|
|||
|
|
date: "%j"
|
|||
|
|
}];
|
|||
|
|
gantt.config.scale_height = 50;
|
|||
|
|
gantt.templates.date_scale = null;
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
gantt.config.scale_unit = "year";
|
|||
|
|
gantt.config.step = 1;
|
|||
|
|
gantt.config.date_scale = "%Y";
|
|||
|
|
gantt.config.min_column_width = 50;
|
|||
|
|
//gantt.config.scale_height = 90;
|
|||
|
|
gantt.templates.date_scale = null;
|
|||
|
|
gantt.config.subscales = [{
|
|||
|
|
unit: "month",
|
|||
|
|
step: 1,
|
|||
|
|
//date: "%M"
|
|||
|
|
date: "%M"
|
|||
|
|
}];
|
|||
|
|
break;
|
|||
|
|
case 5:
|
|||
|
|
gantt.config.scale_unit = "year";
|
|||
|
|
gantt.config.date_scale = "%Y";
|
|||
|
|
gantt.templates.date_scale = null;
|
|||
|
|
gantt.config.subscales = null;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 设置甘特图连线样式
|
|||
|
|
function setGanttLinkClass(gantt, link) {
|
|||
|
|
var types = gantt.config.links;
|
|||
|
|
switch (link.type) {
|
|||
|
|
case parseInt(types.finish_to_start):
|
|||
|
|
return "finish_to_start";
|
|||
|
|
break;
|
|||
|
|
case parseInt(types.start_to_start):
|
|||
|
|
return "start_to_start";
|
|||
|
|
break;
|
|||
|
|
case parseInt(types.finish_to_finish):
|
|||
|
|
return "finish_to_finish";
|
|||
|
|
break;
|
|||
|
|
case parseInt(types.start_to_finish):
|
|||
|
|
return "start_to_finish";
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 根据甘特图数据渲染甘特图
|
|||
|
|
function renderGantt(gantt, ganttData) {
|
|||
|
|
var taskList = [];
|
|||
|
|
var linkList = [];
|
|||
|
|
$.each(ganttData.tasks, function (i, item) {
|
|||
|
|
var markers = 0;
|
|||
|
|
if (item.isMilestone)
|
|||
|
|
markers = 1;
|
|||
|
|
if (item.partIds)
|
|||
|
|
markers = 2;
|
|||
|
|
if (item.isMilestone && item.partIds)
|
|||
|
|
markers = 3;
|
|||
|
|
|
|||
|
|
var task = {
|
|||
|
|
id: item.id,
|
|||
|
|
text: item.name,
|
|||
|
|
rowNum: item.sortNumber,
|
|||
|
|
type: gantt.config.types.project,
|
|||
|
|
start_date: item.planStartTimeGanttString,
|
|||
|
|
end_date: item.planEndTimeGanttString,
|
|||
|
|
frontTask: item.frontTask == null ? "" : item.frontTask,
|
|||
|
|
duration: item.planDuration,
|
|||
|
|
true_start_date: item.actualStartTimeString,
|
|||
|
|
true_end_date: item.actualEndTimeString,
|
|||
|
|
true_duration: item.actualDuration,
|
|||
|
|
people: item.personLiableName,
|
|||
|
|
is_child: item.isChild,
|
|||
|
|
open: true,
|
|||
|
|
wbs: item.code,
|
|||
|
|
parent: (item.parentId === guid.empty() ? "" : item.parentId),
|
|||
|
|
planId: item.projectPlanId,
|
|||
|
|
status: (item.actualStartTimeString ? (item.actualEndTimeString ? 2 : 1) : 0),
|
|||
|
|
markers: markers,
|
|||
|
|
duration_actual: item.duration_actual,
|
|||
|
|
end_date_actual: item.end_date_actual,
|
|||
|
|
start_date_actual: item.start_date_actual
|
|||
|
|
};
|
|||
|
|
taskList.push(task);
|
|||
|
|
});
|
|||
|
|
$.each(ganttData.links, function (i, item) {
|
|||
|
|
var link = {
|
|||
|
|
type: item.linkType,
|
|||
|
|
source: item.sourceTaskId,
|
|||
|
|
target: item.targetTaskId,
|
|||
|
|
id: item.id
|
|||
|
|
};
|
|||
|
|
linkList.push(link);
|
|||
|
|
gantt.templates.link_class(link);
|
|||
|
|
});
|
|||
|
|
var tasks = { data: taskList, links: linkList };
|
|||
|
|
gantt.parse(tasks);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 渲染任务状态
|
|||
|
|
function renderStatus(task) {
|
|||
|
|
if (task.status == 1) {
|
|||
|
|
return '<i class="fa fa-circle track1" title="在建"></i>'
|
|||
|
|
} else if (task.status == 2) {
|
|||
|
|
return '<i class="fa fa-circle track2" title="已建"></i>'
|
|||
|
|
} else if (task.status == 0) {
|
|||
|
|
return '<i class="fa fa-circle track3" title="未建"></i>'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 渲染图标标注
|
|||
|
|
function renderMarkers(task) {
|
|||
|
|
if (task.markers == 0) {
|
|||
|
|
return "";
|
|||
|
|
} else if (task.markers == 1) {
|
|||
|
|
return '<i class="fa gantt_button_grid fa-flag"></i>'
|
|||
|
|
} else if (task.markers == 2) {
|
|||
|
|
return '<i class="fa gantt_button_grid fa-cube"></i>'
|
|||
|
|
} else if (task.markers == 3) {
|
|||
|
|
return '<i class="fa gantt_button_grid fa-cube"></i><i class="fa gantt_button_grid fa-flag"></i>'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 设置甘特图显示列
|
|||
|
|
function setShowColumns(gantt, filter_inputs) {
|
|||
|
|
var columns = [
|
|||
|
|
{ name: "id", label: "任务NO", align: "center", width: 80 },
|
|||
|
|
{ name: "text", label: "任务名称", width: 300, tree: true }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
var j = 2;
|
|||
|
|
var ganttWidth1 = 0;
|
|||
|
|
for (var i = 0; i < filter_inputs.length; i++ , j++) {
|
|||
|
|
var tabCs = filter_inputs[i].name;
|
|||
|
|
var tfilter_input = filter_inputs[i];
|
|||
|
|
if (tfilter_input.checked) {
|
|||
|
|
columns.push(allColumns[j]);
|
|||
|
|
$(tabCs).show();
|
|||
|
|
} else {
|
|||
|
|
$(tabCs).hide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
columns.map(function (item) {
|
|||
|
|
ganttWidth1 += item.width;
|
|||
|
|
})
|
|||
|
|
gantt.config.grid_width = ganttWidth1;
|
|||
|
|
gantt.config.columns = columns;
|
|||
|
|
gantt.refreshData();
|
|||
|
|
gantt.render();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 任务项单击选中事件
|
|||
|
|
function taskSelected(id) {
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 任务项双击事件
|
|||
|
|
function taskDblClick(taskId) {
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 删除任务
|
|||
|
|
function deleteTask(taskId) {
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 新增任务
|
|||
|
|
function addTask(taskId) {
|
|||
|
|
|
|||
|
|
};
|