admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
zhgdyun/public/doc/ExtGantt/Ext甘特图.html

502 lines
23 KiB
HTML
Raw Normal View History

Initial commit
2022-06-08 14:51:11 +08:00
<!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">
<!--引入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()
甘特图
2022-11-05 13:35:16 +08:00
console.log('parentUrl', parentUrl)
if (parentUrl.indexOf('dataBoard') != -1) {
Initial commit
2022-06-08 14:51:11 +08:00
document.getElementById('ext-gen3').classList.add('greyBox')
甘特图
2022-11-05 13:35:16 +08:00
} else {
Initial commit
2022-06-08 14:51:11 +08:00
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 = [];
//转换时间戳
甘特图
2022-11-05 13:35:16 +08:00
// 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;
// };
Initial commit
2022-06-08 14:51:11 +08:00
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;
甘特图
2022-11-05 13:35:16 +08:00
return y + '-' + m + '-' + d
Initial commit
2022-06-08 14:51:11 +08:00
};
getListData = () => {
甘特图
2022-11-05 13:35:16 +08:00
axios.defaults.headers.common['Authorization'] = 'Bearer' + ' ' + token;
axios.get(requestUrl + 'xmgl/progressTask/getParentChildList', { params: { projectSn: projectSn }, }).then(res => {
Initial commit
2022-06-08 14:51:11 +08:00
if (res.data.code == 200) {
甘特图
2022-11-05 13:35:16 +08:00
console.log('查询结果', res.data.result)
Initial commit
2022-06-08 14:51:11 +08:00
let dataArr = res.data.result;
let number = 0;
甘特图
2022-11-05 13:35:16 +08:00
let type = false;
Initial commit
2022-06-08 14:51:11 +08:00
for (let i = 0; i < dataArr.length; i++) {
let data = {
甘特图
2022-11-05 13:35:16 +08:00
"id": dataArr[i].id,
// "UID": dataArr[i].id, //任务唯一标识符
"taskName": dataArr[i].taskName, //任务名称
"progressRatio": dataArr[i].progressRatio, //完成百分比
"duration": dataArr[i].duration, //工期
"Start": dataArr[i].startDate, //计划开始日期
"Finish": dataArr[i].finishDate, //计划完成日期
"actualStartDate": dataArr[i].actualStartDate, //实际开始日期
"actualFinishDate": dataArr[i].actualFinishDate, //实际完成日期
Initial commit
2022-06-08 14:51:11 +08:00
"children": [], //子级
甘特图
2022-11-05 13:35:16 +08:00
"remark": dataArr[i].remark, //备注
// "PredecessorLink":dataArr[i].predecessorIds,
"PredecessorLink": [
{
"PredecessorUID": dataArr[i].predecessorIds
}
],
Initial commit
2022-06-08 14:51:11 +08:00
}
甘特图
2022-11-05 13:35:16 +08:00
console.log('参数传进去了吗',data.PredecessorLink)
Initial commit
2022-06-08 14:51:11 +08:00
if (dataArr[i].children.length > 0) {
甘特图
2022-11-05 13:35:16 +08:00
let threeData = dataArr[i].children
let threeNum = 0
Initial commit
2022-06-08 14:51:11 +08:00
for (let j = 0; j < dataArr[i].children.length; j++) {
甘特图
2022-11-05 13:35:16 +08:00
console.log('有关联的前置任务嘛', dataArr[i].children[j].predecessorIds)
Initial commit
2022-06-08 14:51:11 +08:00
number++;
let children = {
甘特图
2022-11-05 13:35:16 +08:00
"id": dataArr[i].children[j].id,
"UID": number, //任务唯一标识符
"taskName": dataArr[i].children[j].taskName, //任务名称
"progressRatio": dataArr[i].children[j].progressRatio, //完成百分比
"duration": dataArr[i].children[j].duration, //工期
"Start": dataArr[i].children[j].startDate, //计划开始日期
"Finish": dataArr[i].children[j].finishDate, //计划完成日期
"actualStartDate": dataArr[i].children[j].actualStartDate, //实际开始日期
"actualFinishDate": dataArr[i].children[j].actualFinishDate, //实际完成日期
"children": [], //子级
"remark": dataArr[i].children[j].remark, //备注
// "PredecessorLink":dataArr[i].children[j].predecessorIds,
Initial commit
2022-06-08 14:51:11 +08:00
"PredecessorLink": [ //前置任务字段
甘特图
2022-11-05 13:35:16 +08:00
{
"PredecessorUID": dataArr[i].children[j].predecessorIds
}
],
Initial commit
2022-06-08 14:51:11 +08:00
};
甘特图
2022-11-05 13:35:16 +08:00
console.log('参数传进去了吗2222',children.PredecessorLink)
Initial commit
2022-06-08 14:51:11 +08:00
data.children.push(children);
甘特图
2022-11-05 13:35:16 +08:00
if (threeData[j].children.length > 0) {
for (let k = 0; k < threeData[j].children.length; k++) {
number++;
console.log('threeData[j].children', threeData[j].children[k])
let children2 = {
"id": threeData[j].children[k].id,
"UID": number,
"taskName": threeData[j].children[k].taskName, //任务名称
"progressRatio": threeData[j].children[k].progressRatio, //完成百分比
"duration": threeData[j].children[k].duration, //工期
"Start": threeData[j].children[k].startDate, //计划开始日期
"Finish": threeData[j].children[k].finishDate, //计划完成日期
"actualStartDate": threeData[j].children[k].actualStartDate, //实际开始日期
"actualFinishDate": threeData[j].children[k].actualFinishDate, //实际完成日期
"children": [], //子级
"remark": threeData[j].children[k].remark, //备注
// "PredecessorLink":threeData[j].children[k].predecessorIds,
"PredecessorLink": [ //前置任务字段
{
"PredecessorUID": threeData[j].children[k].predecessorIds
}
],
};
data.children[0].children.push(children2)
}
}
Initial commit
2022-06-08 14:51:11 +08:00
}
};
甘特图
2022-11-05 13:35:16 +08:00
console.log('此时递归后的data数据', data)
Initial commit
2022-06-08 14:51:11 +08:00
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);
甘特图
2022-11-05 13:35:16 +08:00
var columns = [];
var idColumn = {
name: "id",
field: "id",
header: "ID<br/>String",
width: 50,
editor: {
type: "textbox"
}
};
columns.push(idColumn);
var stringColumn = {
name: "name",
header: "任务名称<br/>String",
field: "taskName",
width: 150,
editor: {
type: "textbox"
}
};
columns.push(stringColumn);
var linkColumn = {
name: "predecessorLink",
header: "前置任务<br/>Array",
field: "predecessorLink",
width: 150,
editor: {
type: "textbox"
},
// renderer: function (e) {
// console.log('前置任务',e)
// console.log('====e.value',e.value)
// if (!e.value) return "";
// },
};
columns.push(linkColumn);
var dateColumn1 = {
header: "计划开始日期<br/>Date",
field: "Start",
width: 100,
renderer: function (e) {
var date = e.value;
if (!date) return "";
return formatDateTime(e.value)
},
editor: {
type: "datepicker"
}
};
columns.push(dateColumn1);
var dateColumn2 = {
header: "计划完成日期<br/>Date",
field: "Finish",
width: 100,
renderer: function (e) {
var date = e.value;
if (!date) return "";
return formatDateTime(e.value)
},
editor: {
type: "datepicker"
}
};
columns.push(dateColumn2);
var dateColumn3 = {
header: "实际开始日期<br/>Date",
field: "actualStartDate",
width: 100,
renderer: function (e) {
var date = e.value;
if (!date) return "";
return formatDateTime(e.value)
},
editor: {
type: "datepicker"
}
};
columns.push(dateColumn3);
var dateColumn4 = {
header: "实际完成日期<br/>Date",
field: "actualFinishDate",
width: 100,
renderer: function (e) {
var date = e.value;
if (!date) return "";
return formatDateTime(e.value)
},
editor: {
type: "datepicker"
}
};
columns.push(dateColumn4);
var durationColumn = {
name: "duration",
header: "工期<br/>String",
field: "duration",
width: 60,
editor: {
type: "textbox"
}
};
columns.push(durationColumn);
var proColumn = {
name: "percentComplete",
header: "进度比例<br/>String",
field: "progressRatio",
width: 60,
editor: {
type: "textbox"
}
};
columns.push(proColumn);
var remarkColumn = {
name: "remark",
header: "备注<br/>String",
field: "remark",
width: 150,
editor: {
type: "textbox",
}
};
columns.push(remarkColumn);
//将列集合数组设置给甘特图
gantt.setColumns(columns);
gantt.setTreeColumn("name")
gantt.addTask({
name: "11111"
})
// // 新增时触发
// var cellCommitAdd = (e) => {
// let uid = e.task.UID; //修改行的id
// let text = e.text; //修改 作用于时间
// let field = e.field; //修改的字段
// let value = e.value; //修改的内容
// var task = e.task; //修改的内容
// }
// console.log('====新增的参数',cellCommitAdd)
Initial commit
2022-06-08 14:51:11 +08:00
//右键菜单
var ganttMenu = new GanttMenu();
甘特图
2022-11-05 13:35:16 +08:00
console.log('右键菜单有哪些', ganttMenu)
Initial commit
2022-06-08 14:51:11 +08:00
gantt.setContextMenu(ganttMenu);
gantt.loading();
//渲染
setTimeout(() => {
var data = listData;
gantt.loadTasks(data);
gantt.unmask();
}, 3000)
甘特图
2022-11-05 13:35:16 +08:00
var cellCommitEdit = (e) => {
var data = {
taskName: e.task.taskName,
Start: e.task.Start,
Finish: e.task.Finish,
actualStartDate: e.task.actualStartDate,
actualFinishDate: e.task.actualFinishDate,
duration: e.task.duration,
progressRatio: e.task.progressRatio,
remark: e.task.remark,
id: e.task.id,
projectSn: projectSn
}
data[e.field] = e.value
let data2={};
for(let d in data){
if(d=='Start'||d=='Finish'){
if(d=='Start'){
data2.startDate=data[d]
}else if(d=='finishDate'){
data2.startDate=data[d]
}
}else{
data2[d]=data[d]
}
Initial commit
2022-06-08 14:51:11 +08:00
甘特图
2022-11-05 13:35:16 +08:00
}
Initial commit
2022-06-08 14:51:11 +08:00
甘特图
2022-11-05 13:35:16 +08:00
// let {Start:startDate,Finish:finishDate}=data
// let startDate=data.
Initial commit
2022-06-08 14:51:11 +08:00
甘特图
2022-11-05 13:35:16 +08:00
// let uid = e.task.UID; //修改行的id
// let text = e.text; //修改 作用于时间
// let field = e.field; //修改的字段
// let value = e.value; //修改的内容
// var task = e.task; //修改的内容
// // 请求接口的参数
console.log('参数', data2)
setTimeout(() => {
axios.post(requestUrl + 'xmgl/progressTask/updateProgressTask', data2).then(res => {
console.log('修改返回', res)
if (res.data.code == 200) {
alert('编辑成功！')
}
})
}, 500)
Initial commit
2022-06-08 14:51:11 +08:00
甘特图
2022-11-05 13:35:16 +08:00
}
Initial commit
2022-06-08 14:51:11 +08:00
//右侧 拖拽
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);
}
甘特图
2022-11-05 13:35:16 +08:00
function getParentUrl() {
Initial commit
2022-06-08 14:51:11 +08:00
var url = "";
甘特图
2022-11-05 13:35:16 +08:00
try {
url = window.top.document.location.href
} catch (M) {
if (window.parent) {
try {
url = window.parent.document.location.href
} catch (L) {
url = ""
}
Initial commit
2022-06-08 14:51:11 +08:00
}
}
甘特图
2022-11-05 13:35:16 +08:00
if (url === "") {
url = document.location.href
}
return url
Initial commit
2022-06-08 14:51:11 +08:00
}
</script>
<div class="x-layout-split x-layout-split-west x-splitbar-h" id="west-panel-xsplit"
style="left: 205px; top: 32px; height: 889px;">&nbsp;</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>
甘特图
2022-11-05 13:35:16 +08:00
</html>
Reference in New Issue Copy Permalink