427 lines
20 KiB
HTML
427 lines
20 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<!-- saved from url=(0049)http://www.plusgantt.com/gantt/demo/ExtGantt.html -->
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" class=" ext-strict x-viewport">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|||
|
|
<title>Ext甘特图</title>
|
|||
|
|
|
|||
|
|
<meta name="keywords" content="extgantt,extjs,gantt,甘特图">
|
|||
|
|
<meta name="description" content="普加甘特图可以与ExtJS无缝集成">
|
|||
|
|
<!--extjs css-->
|
|||
|
|
<link href="./Ext甘特图_files/ext-all.css" rel="stylesheet" type="text/css">
|
|||
|
|
<link href="./Ext甘特图_files/icons.css" rel="stylesheet" type="text/css">
|
|||
|
|
<link href="./Ext甘特图_files/miniui.css" rel="stylesheet" type="text/css">
|
|||
|
|
<link href="./Ext甘特图_files/skin.css" rel="stylesheet" type="text/css">
|
|||
|
|
<!-- <link href="./Ext甘特图_files/skin.css" rel="stylesheet" type="text/css"> -->
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body class="ext-webkit ext-chrome ext-mac x-border-layout-ct" id="ext-gen3">
|
|||
|
|
<!-- <div id="ext-comp-1001" class=" x-border-panel" style="height: 32px; left: 0px; top: 0px; width: 1920px;"><b
|
|||
|
|
style="padding:8px;">Ext甘特图集成示例</b></div>
|
|||
|
|
<div id="west-panel" class=" x-panel x-border-panel" style="width: 200px; left: 5px; top: 32px;">
|
|||
|
|
<div class="x-panel-header x-unselectable" id="ext-gen4">
|
|||
|
|
<div class="x-tool x-tool-toggle x-tool-collapse-west" id="ext-gen7"> </div><span
|
|||
|
|
class="x-panel-header-text" id="ext-gen8">West</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="x-panel-bwrap" id="ext-gen5">
|
|||
|
|
<div class="x-panel-body" id="ext-gen6" style="width: 198px; height: 862px;">
|
|||
|
|
<div id="ext-comp-1004" class=" x-panel x-panel-noborder" style="width: auto;">
|
|||
|
|
<div class="x-panel-header x-panel-header-noborder x-unselectable x-accordion-hd" id="ext-gen18"
|
|||
|
|
style="cursor: pointer;">
|
|||
|
|
<div class="x-tool x-tool-toggle" id="ext-gen21"> </div><img
|
|||
|
|
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
|||
|
|
class="x-panel-inline-icon nav"><span class="x-panel-header-text"
|
|||
|
|
id="ext-gen22">Navigation</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="x-panel-bwrap" id="ext-gen19">
|
|||
|
|
<div class="x-panel-body x-panel-body-noborder" id="ext-gen20"
|
|||
|
|
style="width: auto; height: 814px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="ext-comp-1005" class=" x-panel x-panel-noborder x-panel-collapsed" style="width: auto;">
|
|||
|
|
<div class="x-panel-header x-panel-header-noborder x-unselectable x-accordion-hd" id="ext-gen23"
|
|||
|
|
style="cursor: pointer;">
|
|||
|
|
<div class="x-tool x-tool-toggle" id="ext-gen26"> </div><img
|
|||
|
|
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
|||
|
|
class="x-panel-inline-icon settings"><span class="x-panel-header-text"
|
|||
|
|
id="ext-gen27">Settings</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="x-panel-bwrap" id="ext-gen24" style="display: none;">
|
|||
|
|
<div class="x-panel-body x-panel-body-noborder" id="ext-gen25">
|
|||
|
|
<p>Some settings in here.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="ext-comp-1002" class=" x-tab-panel x-border-panel" style="left: 210px; top: 32px; width: 1710px;">
|
|||
|
|
<div class="x-tab-panel-header x-unselectable" id="ext-gen10" style="width: 1708px;">
|
|||
|
|
<div class="x-tab-strip-wrap" id="ext-gen13" style="width: 1708px;">
|
|||
|
|
<ul class="x-tab-strip x-tab-strip-top" id="ext-gen15">
|
|||
|
|
<li class=" x-tab-strip-active" id="ext-comp-1002__extwrap"><a class="x-tab-strip-close"
|
|||
|
|
onclick="return false;"></a><a class="x-tab-right"
|
|||
|
|
href="http://www.plusgantt.com/gantt/demo/ExtGantt.html#" onclick="return false;"><em
|
|||
|
|
class="x-tab-left"><span class="x-tab-strip-inner"><span
|
|||
|
|
class="x-tab-strip-text ">普加甘特图</span></span></em></a></li>
|
|||
|
|
<li class="x-tab-edge" id="ext-gen16"></li>
|
|||
|
|
<div class="x-clear" id="ext-gen17"></div>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="x-tab-strip-spacer" id="ext-gen14"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="x-tab-panel-bwrap" id="ext-gen11">
|
|||
|
|
<div class="x-tab-panel-body x-tab-panel-body-top" id="ext-gen12"
|
|||
|
|
style="overflow: auto; width: 1708px; height: 857px;">
|
|||
|
|
<div id="extwrap" style="width: 1708px; height: 857px;">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--引入ExtJS-->
|
|||
|
|
<script type="text/javascript" src="./Ext甘特图_files/ext-base.js"></script>
|
|||
|
|
<script type="text/javascript" src="./Ext甘特图_files/ext-all.js"></script>
|
|||
|
|
<script src="./Ext甘特图_files/boot.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/jquery.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/miniui.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/zh_CN.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/CalendarWindow.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/ProjectMenu.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/StatusColumn.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/TaskWindow.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/ResourcesWindow.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/ProjectServices.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/swfobject.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/GanttService.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/GanttMenu.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/GanttSchedule.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/RGanttMenu.js" type="text/javascript"></script>
|
|||
|
|
<script src="./Ext甘特图_files/RGanttSchedule.js" type="text/javascript"></script>
|
|||
|
|
|
|||
|
|
<!-- 引入axios -->
|
|||
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
//页面加载就绪
|
|||
|
|
window.onload = () => {
|
|||
|
|
console.log('window.onload')
|
|||
|
|
var parentUrl = getParentUrl()
|
|||
|
|
console.log('parentUrl',parentUrl)
|
|||
|
|
if(parentUrl.indexOf('dataBoard')!=-1){
|
|||
|
|
document.getElementById('ext-gen3').classList.add('greyBox')
|
|||
|
|
}else{
|
|||
|
|
document.getElementById('ext-gen3').classList.remove('greyBox')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取请求地址
|
|||
|
|
let url = window.parent.document.getElementById("iframe").contentWindow.location.search;
|
|||
|
|
var parameter = url.split('='); //所有参数
|
|||
|
|
var requestUrl = parameter[1].split('&')[0]; //请求服务器的地址
|
|||
|
|
var projectSn = parameter[2].split('&')[0]; //projectSn
|
|||
|
|
var token = parameter[3]
|
|||
|
|
var listData = [];
|
|||
|
|
|
|||
|
|
//转换时间戳
|
|||
|
|
function formatDateTime(inputTime) {
|
|||
|
|
var date = new Date(inputTime);
|
|||
|
|
var y = date.getFullYear();
|
|||
|
|
var m = date.getMonth() + 1;
|
|||
|
|
m = m < 10 ? ('0' + m) : m;
|
|||
|
|
var d = date.getDate();
|
|||
|
|
d = d < 10 ? ('0' + d) : d;
|
|||
|
|
var h = date.getHours();
|
|||
|
|
h = h < 10 ? ('0' + h) : h;
|
|||
|
|
var minute = date.getMinutes();
|
|||
|
|
var second = date.getSeconds();
|
|||
|
|
minute = minute < 10 ? ('0' + minute) : minute;
|
|||
|
|
second = second < 10 ? ('0' + second) : second;
|
|||
|
|
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
//获取列表数据
|
|||
|
|
getListData = () => {
|
|||
|
|
axios.defaults.headers.common['Authorization'] = 'Bearer'+' '+ token;
|
|||
|
|
axios.post(requestUrl + 'xmgl/progressManage/viewProjectProgressManageList', { projectSn }).then(res => {
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
console.log(res.data.result)
|
|||
|
|
let dataArr = res.data.result;
|
|||
|
|
let number = 0;
|
|||
|
|
let type= false;
|
|||
|
|
for (let i = 0; i < dataArr.length; i++) {
|
|||
|
|
let data = {
|
|||
|
|
"UID": dataArr[i].tempBranchId, //任务唯一标识符
|
|||
|
|
"PercentComplete": dataArr[i].progressRatio, //完成百分比
|
|||
|
|
"Duration": dataArr[i].duration, //工期
|
|||
|
|
"Finish": dataArr[i].branchEndTime, //完成日期
|
|||
|
|
"Start": dataArr[i].branchStartTime, //开始日期
|
|||
|
|
"Name": dataArr[i].branchProjectName, //任务名称
|
|||
|
|
"children": [], //子级
|
|||
|
|
"Note": '', //备注
|
|||
|
|
'branchId': dataArr[i].branchId,
|
|||
|
|
}
|
|||
|
|
if (dataArr[i].children.length > 0) {
|
|||
|
|
for (let j = 0; j < dataArr[i].children.length; j++) {
|
|||
|
|
number++;
|
|||
|
|
let children = {
|
|||
|
|
"UID":number,
|
|||
|
|
"Name": dataArr[i].children[j].subitemProjectName, //名称
|
|||
|
|
"Duration": dataArr[i].children[j].duration, //工期
|
|||
|
|
"PercentComplete": dataArr[i].children[j].progressRatio, //进度
|
|||
|
|
"Finish": dataArr[i].children[j].endTime, //完成日期
|
|||
|
|
"Start": dataArr[i].children[j].startTime, //开始日期
|
|||
|
|
"PredecessorLink": [ //前置任务字段
|
|||
|
|
{
|
|||
|
|
"Type": 1,
|
|||
|
|
"PredecessorUID": number-1
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
"Note": dataArr[i].children[j].taskDescription //备注
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
data.children.push(children);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
console.log(data)
|
|||
|
|
// debugger;
|
|||
|
|
number++;
|
|||
|
|
listData.push(data)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
alert(res.data.message)
|
|||
|
|
}
|
|||
|
|
gantt.loadTasks(listData);
|
|||
|
|
gantt.unmask();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
getListData();
|
|||
|
|
|
|||
|
|
//创建ext面板
|
|||
|
|
var viewport = new Ext.Viewport({
|
|||
|
|
layout: 'border',
|
|||
|
|
items: [
|
|||
|
|
new Ext.BoxComponent({
|
|||
|
|
region: 'north',
|
|||
|
|
height: 0,
|
|||
|
|
// autoEl: {
|
|||
|
|
// tag: 'div',
|
|||
|
|
// html: '<b style="padding:8px;">Ext甘特图集成示例</b>'
|
|||
|
|
// }
|
|||
|
|
}),
|
|||
|
|
{
|
|||
|
|
region: 'west',
|
|||
|
|
id: 'west-panel',
|
|||
|
|
title: 'West',
|
|||
|
|
split: false,
|
|||
|
|
width: 0,
|
|||
|
|
minSize: 175,
|
|||
|
|
maxSize: 400,
|
|||
|
|
collapsible: true,
|
|||
|
|
margins: '0 0 0 0',
|
|||
|
|
layout: {
|
|||
|
|
type: 'accordion',
|
|||
|
|
animate: true
|
|||
|
|
},
|
|||
|
|
items: [{
|
|||
|
|
title: 'Navigation',
|
|||
|
|
border: false,
|
|||
|
|
iconCls: 'nav'
|
|||
|
|
}, {
|
|||
|
|
title: 'Settings',
|
|||
|
|
html: '<p>Some settings in here.</p>',
|
|||
|
|
border: false,
|
|||
|
|
iconCls: 'settings'
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
new Ext.TabPanel({
|
|||
|
|
region: 'center', //部署的区域，参考上图，center是中间显示页面区域
|
|||
|
|
autoScroll: true,
|
|||
|
|
animScroll: true,
|
|||
|
|
resizTabs: true,
|
|||
|
|
enableTabScroll: true,
|
|||
|
|
activeTab: 0,
|
|||
|
|
deferredRender: false,
|
|||
|
|
defaults: {
|
|||
|
|
autoScroll: true
|
|||
|
|
},
|
|||
|
|
tabMargin: 0,
|
|||
|
|
items: [
|
|||
|
|
new Ext.BoxComponent({
|
|||
|
|
id: "extwrap",
|
|||
|
|
title: "甘特图",
|
|||
|
|
region: "center",
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
////////////////////////////////////////////
|
|||
|
|
var extControl = Ext.get("extwrap");
|
|||
|
|
|
|||
|
|
//创建PlusGantt之后,
|
|||
|
|
var gantt = new CreateGantt();
|
|||
|
|
gantt.setStyle("width:100%;height:100%");
|
|||
|
|
gantt.render(extControl.dom);
|
|||
|
|
|
|||
|
|
//右键菜单
|
|||
|
|
var ganttMenu = new GanttMenu();
|
|||
|
|
gantt.setContextMenu(ganttMenu);
|
|||
|
|
gantt.loading();
|
|||
|
|
//渲染
|
|||
|
|
setTimeout(() => {
|
|||
|
|
var data = listData;
|
|||
|
|
gantt.loadTasks(data);
|
|||
|
|
gantt.unmask();
|
|||
|
|
}, 3000)
|
|||
|
|
//修改参数时触发
|
|||
|
|
var cellCommitEdit = (e) => {
|
|||
|
|
let uid = e.task.UID; //修改行的id
|
|||
|
|
let text = e.text; //修改 作用于时间
|
|||
|
|
let field = e.field; //修改的字段
|
|||
|
|
let value = e.value; //修改的内容
|
|||
|
|
var task = e.task; //修改的内容
|
|||
|
|
let stair = typeof (uid) != 'number' && uid.indexOf('b') == 0 ? true : false; //是不是一级
|
|||
|
|
let branchId = '';
|
|||
|
|
//是一级 循环获取一级的id;
|
|||
|
|
if (stair) {
|
|||
|
|
if(field == 'PercentComplete'){
|
|||
|
|
alert('这里修改进度无效，将不会保存')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if(field == 'Note'){
|
|||
|
|
alert('一级修改备注无效，将不会保存')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if(field == 'PredecessorLink'){
|
|||
|
|
alert('一级设置前置任务无效，将不会保存')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < listData.length; i++) {
|
|||
|
|
if (listData[i].UID == uid) {
|
|||
|
|
branchId = listData[i].branchId;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//请求的内容
|
|||
|
|
let requestData = {
|
|||
|
|
id: branchId,
|
|||
|
|
projectSn: projectSn
|
|||
|
|
}
|
|||
|
|
field == 'Name' ? requestData.branchProjectName = value : '';
|
|||
|
|
// field == 'Note' ? requestData.taskDescription = value : '';
|
|||
|
|
// field == 'PercentComplete' ? requestData.progressRatio = value : '';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
axios.post(requestUrl + 'xmgl/progressManage/edit', requestData).then(res => {
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}, 200)
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
//二级修改
|
|||
|
|
let requestData = {
|
|||
|
|
id: uid,
|
|||
|
|
projectSn: projectSn
|
|||
|
|
};
|
|||
|
|
//修改的是工期时
|
|||
|
|
if (field == 'Duration') {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
let startTime = formatDateTime(task.Start).substring(0, 10);
|
|||
|
|
let endTime = formatDateTime(task.Finish).substring(0, 10);
|
|||
|
|
requestData.duration = value;
|
|||
|
|
requestData.startTime = startTime;
|
|||
|
|
requestData.endTime = endTime;
|
|||
|
|
}, 100)
|
|||
|
|
}
|
|||
|
|
//修改开始时间 或 结束时间
|
|||
|
|
if (field == 'Start' || field == 'Finish') {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
let startTime = formatDateTime(task.Start).substring(0, 10);
|
|||
|
|
let endTime = formatDateTime(task.Finish).substring(0, 10);
|
|||
|
|
requestData.startTime = startTime;
|
|||
|
|
requestData.endTime = endTime;
|
|||
|
|
}, 100)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(field == 'PercentComplete'){
|
|||
|
|
alert('这里修改进度无效，将不会保存')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
field == 'Name' ? requestData.branchProjectName = value : '';
|
|||
|
|
field == 'PredecessorLink' ? requestData.predecessoruid = value : '';
|
|||
|
|
|
|||
|
|
field == 'Note' ? requestData.taskDescription = value : '';
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
axios.post(requestUrl + 'xmgl/progressItem/edit', requestData).then(res => {
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}, 200)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// var project = e.source;
|
|||
|
|
// var task = e.task;
|
|||
|
|
//e是事件对象, 具体请看每个事件的"参数类型"
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//右侧 拖拽
|
|||
|
|
var itemdragcomplete = (e) => {
|
|||
|
|
let requestData = {
|
|||
|
|
id: e.item.UID,
|
|||
|
|
projectSn: projectSn
|
|||
|
|
};
|
|||
|
|
let startTime = formatDateTime(e.item.Start).substring(0, 10);
|
|||
|
|
let endTime = formatDateTime(e.item.Finish).substring(0, 10);
|
|||
|
|
requestData.startTime = startTime;
|
|||
|
|
requestData.endTime = endTime;
|
|||
|
|
axios.post(requestUrl + 'xmgl/progressItem/edit', requestData).then(res => {
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// var project = e.source;
|
|||
|
|
// var task = e.task;
|
|||
|
|
//e是事件对象, 具体请看每个事件的"参数类型"
|
|||
|
|
};
|
|||
|
|
gantt.on('CellCommitEdit', cellCommitEdit);
|
|||
|
|
gantt.on('itemdragcomplete', itemdragcomplete);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
function getParentUrl(){
|
|||
|
|
var url = "";
|
|||
|
|
try {
|
|||
|
|
url = window.top.document.location.href
|
|||
|
|
} catch(M) {
|
|||
|
|
if (window.parent) {
|
|||
|
|
try {
|
|||
|
|
url = window.parent.document.location.href
|
|||
|
|
} catch(L) {
|
|||
|
|
url = ""
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (url === "") {
|
|||
|
|
url = document.location.href
|
|||
|
|
}
|
|||
|
|
return url
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<div class="x-layout-split x-layout-split-west x-splitbar-h" id="west-panel-xsplit"
|
|||
|
|
style="left: 205px; top: 32px; height: 889px;"> </div>
|
|||
|
|
<div id="ext-gen9" class="x-unselectable x-splitbar-proxy x-splitbar-proxy-h"></div>
|
|||
|
|
<div class="mini-supergrid-editwrap"
|
|||
|
|
style="position: absolute; z-index: 1006; display: none; top: 580px; left: 802px; width: 100px;"></div>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|