SFGantt 展示project网络图

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="${basePath}js/gantt.js"
charset="utf-8"></script>
<script type="text/javascript">
var gtData, gtMap;
function onLoad()//在页面初始化的时候执行本函数
{
var strXML = parent.Ext.getCmp("showNetworkWindow").taskList;;//获取XML字符串传递参数
var doc = SFAjax.createDocument(strXML);
onGanttLoaded(doc);
// var path = "${pageContext.request.contextPath}/schedule/scheduleTaskList/showGantt.shtml?scheduleId=${param.scheduleId}";
// SFAjax.loadXml(path, onGanttLoaded); //通过Ajax模式下载对应的XML文件,并在下载完成之后执行onDataLoaded函数
}
function onGanttLoaded(doc) //doc参数是一个XML文件DOM对象
{
var gtConfig = new SFConfig(); //初始化一个页面上的配置对象
gtConfig.setConfig("SFGantt/container", "Div_Gantt"); //设置用来显示甘特图的层的ID
gtConfig.setConfig("SFGantt/idCellWidth", 0);//左侧ID列表的宽度,实际上也就是显示LOGO的宽度
gtConfig.setConfig("SFGantt/readOnly", true); //只读
// gtConfig.setConfig("SFGantt/disableContextMenu", true); //禁止右键菜单
gtConfig.setConfig("SFGanttField/dateShowFormat", "yyyy-MM-dd");//日期列显示格式
gtConfig.setConfig("SFGanttField/dateInputFormat", "yyyy-MM-dd");//日期列输入格式
gtConfig.setConfig("SFGantt/imgPath", "img/");//图片文件URL目录的路径


gtConfig.setConfig("SFGantt/showNetwork", true); //设置显示网络图
gtConfig.setConfig("SFGanttNetworkControl/dir", "x"); //网络图的显示方向,横向x,纵向y
// gtConfig.setConfig("SFGanttNetworkControl/combineLine",true); //网络图显示时是否将箭头线条合并使图看起来更简单


gtData = new SFData(new SFDataProject(doc)); //将doc对象初始化为一个甘特数据对象
gtMap = new SFGantt(gtConfig, gtData); //用相应的数据对象和配置对象创建甘特对象
gtMap.showMap(null, 5); //显示网络图
//计算所有任务的工期,任务都按照固定工期进行运算。
init();
CriticalPath();
}
function depose()//销毁甘特图以释放内存
{
if (gtData && gtMap) {
gtMap.depose();
gtData.depose();
gtMap = null;
gtData = null;
}
}


//向前递归推动任务
function forwardPush(task, earlystart) {
var succTask;
var aSuccTasks = task.getSuccessorTasks();


task.setProperty("EarlyStart", earlystart);
task.setProperty("EarlyFinish", dateAdd("s", task
.getProperty("Duration"), earlystart));


for (var i = 0; i < aSuccTasks.length; i++) {
succTask = aSuccTasks[i];//取得该链接的后续任务


if (succTask.getProperty("EarlyStart") < task
.getProperty("EarlyFinish")) {
//进行递归调用
//alert(task.getProperty("Name"));
forwardPush(succTask, task.getProperty("EarlyFinish"));
}
}
}


//向后递归推动任务
function backPull(task, latefinish) {
var predTask;
var aPredTasks = task.getPredecessorTasks();


task.setProperty("LateFinish", latefinish);
task.setProperty("LateStart", dateAdd("s", -task
.getProperty("Duration"), latefinish));


for (var i = 0; i < aPredTasks.length; i++) {
predTask = aPredTasks[i];//取得该链接的后续任务


if (predTask.getProperty("LateFinish") > task
.getProperty("LateStart")) {
//进行递归调用
backPull(predTask, task.getProperty("LateStart"));
}
}
}


//由于原任务中不含工期数据,需要先按照当前的计划开始和计划结束计算工期
function init() {


for (var clsTask = gtData.getRootTask(); clsTask != null; clsTask = clsTask
.getNextTask()) {
//任务工期按照天数进行计算
clsTask.setProperty("Duration", dateDiff("s", clsTask
.getProperty("Start"), clsTask.getProperty("Finish")));
//先给日期赋初值
if (!clsTask.getProperty("Summary")) {
clsTask.setProperty("EarlyStart", new Date(0));
clsTask.setProperty("EarlyFinish", new Date(0));
clsTask.setProperty("LateStart", new Date(9999, 9, 9));
clsTask.setProperty("LateFinish", new Date(9999, 9, 9));
}


//初始化后置任务链接,刚开始初始化时为提高效率,只按照xml结构初始化了前置任务链接,计划关键任务必须都初始化
//这个问题以后才能改进
clsTask.getSuccessorLinks();
}
}


function CriticalPath() {
var startTask;
var endTask;
var clsTask;
//一个项目应该只有一个起点任务和一个终点任务


//找到起点任务
for (clsTask = gtData.getRootTask(); clsTask != null; clsTask = clsTask
.getNextTask()) {
if (!clsTask.getProperty("Summary")
&& clsTask.getPredecessorTasks().length == 0) {
startTask = clsTask;
break;
}
}


//向后计算每个任务的最早开始时间
forwardPush(startTask, startTask.getProperty("Start"));


//找到终点任务
for (clsTask = gtData.getRootTask(); clsTask != null; clsTask = clsTask
.getNextTask()) {
if (!clsTask.getProperty("Summary")
&& clsTask.getSuccessorTasks().length == 0) {
endTask = clsTask;
//alert(endTask.getProperty("Name"));
//break;
}
}


//向前计算每个任务的最晚完成时间
backPull(endTask, endTask.getProperty("EarlyFinish"));


//如果最早开始时间=最晚开始时间,则该任务为关键路径上的任务
for (clsTask = gtData.getRootTask(); clsTask != null; clsTask = clsTask
.getNextTask()) {
if (!clsTask.getProperty("Summary")
&& clsTask.getProperty("EarlyStart").toString() == clsTask
.getProperty("LateStart").toString()) {
clsTask.setProperty("IsKeyTask", true);
if (clsTask.getProperty("Duration") > 0)//里程碑不采用这种样式
clsTask.setProperty("ClassName", "TaskImportant");
else
clsTask.setProperty("ClassName", "MilestoneCircle");
}
}


//将关键路径的链接线改称不同样式显示,从起点任务开始
SetKeyLinkStyle(startTask)


}


function SetKeyLinkStyle(task) {
var succTask;
var succLink;
var aSuccLinks = task.getSuccessorLinks();


for (var i = 0; i < aSuccLinks.length; i++) {
succLink = aSuccLinks[i]
succTask = succLink.getSuccessorTask(); //取得该链接的后续任务
if (succTask.getProperty("IsKeyTask"))//如果后续任务也是关键任务
{
succLink.setProperty("ClassName", "RedDashed");
//进行递归调用
SetKeyLinkStyle(succTask);
}


}
}


//日期相加函数
function dateAdd(interval, number, date) {
var dt = new Date(date.valueOf());


switch (interval.toLowerCase()) {
case "y":
return new Date(dt.setFullYear(dt.getFullYear() + number));
case "m":
return new Date(dt.setMonth(dt.getMonth() + number));
case "d":
return new Date(dt.setDate(dt.getDate() + number));
case "w":
return new Date(dt.setDate(dt.getDate() + 7 * number));
case "h":
return new Date(dt.setHours(dt.getHours() + number));
case "n":
return new Date(dt.setMinutes(dt.getMinutes() + number));
case "s":
return new Date(dt.setSeconds(dt.getSeconds() + number));
case "l":
return new Date(dt.setMilliseconds(dt.getMilliseconds() + number));
}
}


//日期差异函数
function dateDiff(strInterval, dtStart, dtEnd) {
switch (strInterval) {
case 's':
return parseInt((dtEnd - dtStart) / 1000);
case 'n':
return parseInt((dtEnd - dtStart) / 60000);
case 'h':
return parseInt((dtEnd - dtStart) / 3600000);
case 'd':
return parseInt((dtEnd - dtStart) / 86400000);
case 'w':
return parseInt((dtEnd - dtStart) / (86400000 * 7));
case 'm':
return (dtEnd.getMonth() + 1)
+ ((dtEnd.getFullYear() - dtStart.getFullYear()) * 12)
- (dtStart.getMonth() + 1);
case 'y':
return dtEnd.getFullYear() - dtStart.getFullYear();
case 'd-h':
return parseFloat((dtEnd - dtStart) / 86400000).toFixed(2);
}
}
</script>
</head>
<body οnlοad="onLoad()">
<div id="content">
<div id="Div_Gantt" style="width: 100%; height: 100%"></div>
</div>
</body>
</html>
向日葵 Gantt 是当前B/S 系统开发中先进的甘特图解决方案,它采用与Google maps相同的AJAX技术,实现了与Ms Project 甘特图一致的界面和功能,可广泛应用于 ERP 系统、MES系统、项目管理系统或其它的资源时间相关领域。 <br><br> 向日葵甘特图组件完全采用JS实现,与服务器端开发语言无关,可在任何服务器平台上运行; <br><br> 可轻松地与现有系统整合; <br> 减轻服务器和带宽的负担,节约空间和带宽租用成本; <br> 客户端无需安装任何插件即可运行; <br> 支持大多数主流浏览器,如:IE,FireFox,Opera等; <br>用户基本操作无需与服务器交互,给用户带来流畅而友好的体验。 <br> 向日葵甘特图组件与MS Project中的甘特图保持高度一致。MS Project是目前应用最为广泛的项目管理工具,也是甘特图绘制领域的事实标准。 <br><br>操作一致性:向日葵甘特图组件的操作与MS Project极为相似,在Web上实现了拖动甘特条调整任务进度、调整任务工期、建立任务链接关系等精细操作。 <br><br>数据一致性:可以直接读取MS Project(版本在2000以后)的XML数据,为用户实现与MS Project的无缝集成提供了良好的接口。而且向日葵甘特图组件也保持了良好的数据可扩展性。 <br><br>界面一致性:界面整体风格与MS Project完全一致,也可以自定义表格区显示列,条形图的形状,链接线的样式。而且Web技术中的样式表为向日葵甘特图组件提供了无限的变化可能。 <br><br>API一致性:向日葵甘特图组件提供了和MS Project一致的应用程序开发API,功能强大,简单易用。 <br><br>官方网址: www.51diaodu.cn (我要调度网) 向日葵甘特图组件QQ交流群: 63867839
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值