|
@@ -44,7 +44,10 @@
|
|
|
<Task class="icon" />
|
|
|
<div class="title">任务状态</div>
|
|
|
</div>
|
|
|
- <div v-show="ganttDetail.status" :style="{'background': ganttDetail.color && ganttDetail.color[0]?ganttDetail.color[0] : '', 'color': ganttDetail.color && ganttDetail.color[1]?ganttDetail.color[1] : ''}">{{ganttDetail.status}}</div>
|
|
|
+ <div
|
|
|
+ v-show="ganttDetail.status"
|
|
|
+ :style="{'background': ganttDetail.color && ganttDetail.color[0]?ganttDetail.color[0] : '', 'color': ganttDetail.color && ganttDetail.color[1]?ganttDetail.color[1] : ''}"
|
|
|
+ >{{ganttDetail.status}}</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div>
|
|
@@ -68,10 +71,19 @@
|
|
|
<div>
|
|
|
<div>
|
|
|
<div class="num">{{pictureList.length}}张</div>
|
|
|
- <div v-if="pictureList.length > 0" class="more" @click="() => showImgDetail = true">查看更多</div>
|
|
|
+ <div
|
|
|
+ v-if="pictureList.length > 0"
|
|
|
+ class="more"
|
|
|
+ @click="() => showImgDetail = true"
|
|
|
+ >查看更多</div>
|
|
|
</div>
|
|
|
<div class="pictrue-container">
|
|
|
- <div v-for="(item) in pictures" :key="'id_' + item.id" @click="showImgContainer(item.id)" class="item">
|
|
|
+ <div
|
|
|
+ v-for="(item) in pictures"
|
|
|
+ :key="'id_' + item.id"
|
|
|
+ @click="showImgContainer(item.id)"
|
|
|
+ class="item"
|
|
|
+ >
|
|
|
<img src="../../assets/imgs/analysis/picture.png" alt />
|
|
|
<div class="info" :title="item.name">{{item.name}}</div>
|
|
|
</div>
|
|
@@ -87,14 +99,26 @@
|
|
|
<div>
|
|
|
<div class="num">{{accessoryList.length}}张</div>
|
|
|
</div>
|
|
|
- <div class="accessory-container" :style="{'max-height': accessoryIsExpand?'' : '115px'}">
|
|
|
- <a :href="item.url?item.url : 'javascript:void(0)'" target="_blank" v-for="(item) in accessoryList" :key="'id_' + item.id" class="item">
|
|
|
+ <div
|
|
|
+ class="accessory-container"
|
|
|
+ :style="{'max-height': accessoryIsExpand?'' : '115px'}"
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ :href="item.url?item.url : 'javascript:void(0)'"
|
|
|
+ target="_blank"
|
|
|
+ v-for="(item) in accessoryList"
|
|
|
+ :key="'id_' + item.id"
|
|
|
+ class="item"
|
|
|
+ >
|
|
|
<img src="../../assets/imgs/analysis/report_pdf.png" alt />
|
|
|
<div class="info" :title="item.name">{{item.name}}</div>
|
|
|
</a>
|
|
|
- <div v-if="accessoryList.length > 0" class="expand-more" @click="() => accessoryIsExpand = !accessoryIsExpand">
|
|
|
- <ExpandArrow :class="{'expand': accessoryIsExpand}"/>
|
|
|
- 展开更多
|
|
|
+ <div
|
|
|
+ v-if="accessoryList.length > 0"
|
|
|
+ class="expand-more"
|
|
|
+ @click="() => accessoryIsExpand = !accessoryIsExpand"
|
|
|
+ >
|
|
|
+ <ExpandArrow :class="{'expand': accessoryIsExpand}" />展开更多
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -117,13 +141,19 @@
|
|
|
<el-dialog :title="'图片预览'" :visible.sync="showImgDetail" width="1260px">
|
|
|
<div class="detail-container">
|
|
|
<div class="pictures-menu">
|
|
|
- <div v-for="(item) in pictureList" :key="'id_' + item.id" class="item" @click="changeCurImg(item.id)" :class="{'active': item.isActive}">
|
|
|
- <img :src="item.url?item.url : ''" alt="">
|
|
|
+ <div
|
|
|
+ v-for="(item) in pictureList"
|
|
|
+ :key="'id_' + item.id"
|
|
|
+ class="item"
|
|
|
+ @click="changeCurImg(item.id)"
|
|
|
+ :class="{'active': item.isActive}"
|
|
|
+ >
|
|
|
+ <img :src="item.url?item.url : ''" alt />
|
|
|
<div class="name" :title="item.name">{{item.name}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="cur-img-container">
|
|
|
- <img v-if="curImg && curImg.url" :src="curImg.url" alt="">
|
|
|
+ <img v-if="curImg && curImg.url" :src="curImg.url" alt />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
@@ -161,20 +191,20 @@ export default {
|
|
|
id: 1,
|
|
|
text: "未完成",
|
|
|
backgroundColor: "#E7E9EA",
|
|
|
- borderColor: "#C3C7CB"
|
|
|
+ borderColor: "#C3C7CB",
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
text: "即将逾期",
|
|
|
backgroundColor: "#FBCE99",
|
|
|
- borderColor: "#F58300"
|
|
|
+ borderColor: "#F58300",
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
text: "逾期未完成",
|
|
|
backgroundColor: "#FBB8B5",
|
|
|
- borderColor: "#F54E45"
|
|
|
- }
|
|
|
+ borderColor: "#F54E45",
|
|
|
+ },
|
|
|
], // 图例
|
|
|
timeType: "month", // 甘特图时间类型
|
|
|
treeData: [], // 树结构数据
|
|
@@ -209,7 +239,6 @@ export default {
|
|
|
accessoryIsExpand: false, // 附件是否展开
|
|
|
|
|
|
showImgDetail: false, // 查看更多图片弹框显示状态
|
|
|
-
|
|
|
};
|
|
|
},
|
|
|
|
|
@@ -220,25 +249,25 @@ export default {
|
|
|
Picture,
|
|
|
Report,
|
|
|
Menu,
|
|
|
- ExpandArrow
|
|
|
+ ExpandArrow,
|
|
|
},
|
|
|
|
|
|
computed: {},
|
|
|
|
|
|
beforeMount() {
|
|
|
- let PLAZAID = localStorage.getItem('PLAZAID');
|
|
|
+ let PLAZAID = localStorage.getItem("PLAZAID");
|
|
|
this.plazaId = Number(PLAZAID) || 1000423;
|
|
|
},
|
|
|
mounted() {
|
|
|
- document.addEventListener('click', () => {
|
|
|
+ document.addEventListener("click", () => {
|
|
|
setTimeout(() => {
|
|
|
if (this.isClickAccessory) {
|
|
|
this.isClickAccessory = false;
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
this.showAccessory = false;
|
|
|
- }, 20)
|
|
|
- })
|
|
|
+ }, 20);
|
|
|
+ });
|
|
|
this.initChartTime();
|
|
|
this.getSystemList();
|
|
|
},
|
|
@@ -249,22 +278,22 @@ export default {
|
|
|
*/
|
|
|
initChartTime() {
|
|
|
let endTime = new Date().getTime(),
|
|
|
- startTime = endTime - 1000*60*60*24*365;
|
|
|
- this.startTime = moment.unix(startTime / 1000).format('YYYYMMDDHHmmss');
|
|
|
- this.endTime = moment.unix(endTime / 1000).format('YYYYMMDDHHmmss');
|
|
|
+ startTime = endTime - 1000 * 60 * 60 * 24 * 365;
|
|
|
+ this.startTime = moment.unix(startTime / 1000).format("YYYYMMDDHHmmss");
|
|
|
+ this.endTime = moment.unix(endTime / 1000).format("YYYYMMDDHHmmss");
|
|
|
},
|
|
|
/**
|
|
|
* 获取系统列表数据
|
|
|
*/
|
|
|
getSystemList() {
|
|
|
- querySystemList().then(res => {
|
|
|
+ querySystemList().then((res) => {
|
|
|
if (res.result === "success") {
|
|
|
let data = res.data;
|
|
|
let newData = [];
|
|
|
- _.forEach(data, item => {
|
|
|
+ _.forEach(data, (item) => {
|
|
|
newData.push({
|
|
|
id: item.code,
|
|
|
- name: item.name
|
|
|
+ name: item.name,
|
|
|
});
|
|
|
});
|
|
|
this.systemList = newData;
|
|
@@ -313,7 +342,7 @@ export default {
|
|
|
* 切换视图
|
|
|
*/
|
|
|
changeView() {
|
|
|
- console.log('timeType', this.timeType)
|
|
|
+ console.log("timeType", this.timeType);
|
|
|
if (window.gc) {
|
|
|
gc.gCanvas.destroy();
|
|
|
window.gc = null;
|
|
@@ -329,9 +358,9 @@ export default {
|
|
|
smsxt: this.systemId,
|
|
|
plazaId: this.plazaId,
|
|
|
startDate: this.startTime, // time[0]
|
|
|
- endDate: this.endTime // time[1]
|
|
|
+ endDate: this.endTime, // time[1]
|
|
|
};
|
|
|
- queryGanttChart("/data/base/queryGanttChart", param).then(res => {
|
|
|
+ queryGanttChart("/data/base/queryGanttChart", param).then((res) => {
|
|
|
const { dsfList, wbList, zwList, result } = res;
|
|
|
console.log("res", res);
|
|
|
if (result === "success") {
|
|
@@ -345,36 +374,36 @@ export default {
|
|
|
name: name[index],
|
|
|
open: true,
|
|
|
// children: name[index] === '专维'?[] : this.disGanttData(dsfList)
|
|
|
- children: this.disGanttData(data[index])
|
|
|
+ children: this.disGanttData(data[index]),
|
|
|
});
|
|
|
});
|
|
|
this.treeData = newData;
|
|
|
|
|
|
- let taskData = _.map(_.cloneDeep(newData), item => {
|
|
|
+ let taskData = _.map(_.cloneDeep(newData), (item) => {
|
|
|
let parentNode = {
|
|
|
id: item.id,
|
|
|
type: item.name,
|
|
|
open: item.open,
|
|
|
};
|
|
|
return Object.assign(parentNode, {
|
|
|
- dataList: _.map(item.children, _item => {
|
|
|
+ dataList: _.map(item.children, (_item) => {
|
|
|
return {
|
|
|
parentNode,
|
|
|
id: _item.id,
|
|
|
title: _item.name,
|
|
|
- tasks: _item.originData
|
|
|
+ tasks: _item.originData,
|
|
|
};
|
|
|
- })
|
|
|
- })
|
|
|
+ }),
|
|
|
+ });
|
|
|
});
|
|
|
console.log("taskData", taskData);
|
|
|
if (!window.gc) {
|
|
|
let width = this.$refs.chartContainer.offsetWidth;
|
|
|
let handleFn = null;
|
|
|
- if (this.timeType === 'month') {
|
|
|
- handleFn = GanttChartMonth
|
|
|
+ if (this.timeType === "month") {
|
|
|
+ handleFn = GanttChartMonth;
|
|
|
} else {
|
|
|
- handleFn = GanttChartDay
|
|
|
+ handleFn = GanttChartDay;
|
|
|
}
|
|
|
window.gc = new handleFn({
|
|
|
chartParentContainer: "chartContainer",
|
|
@@ -382,18 +411,25 @@ export default {
|
|
|
viewWidth: width,
|
|
|
cWidth: 3 * width,
|
|
|
tasks: taskData,
|
|
|
- daysCount: this.timeType === 'month'? (365*1.5) : parseInt((3 * width) / 40),
|
|
|
+ daysCount:
|
|
|
+ this.timeType === "month"
|
|
|
+ ? 365 * 1.5
|
|
|
+ : parseInt((3 * width) / 40),
|
|
|
callback: this.showDialog,
|
|
|
- pageToCallback: (data)=>{
|
|
|
+ pageToCallback: (data) => {
|
|
|
const { startAt, endAt } = data;
|
|
|
- this.startTime = moment.unix(new Date(startAt).getTime() / 1000).format('YYYYMMDDHHmmss');
|
|
|
- this.endTime = moment.unix(new Date(endAt).getTime() / 1000).format('YYYYMMDDHHmmss');
|
|
|
+ this.startTime = moment
|
|
|
+ .unix(new Date(startAt).getTime() / 1000)
|
|
|
+ .format("YYYYMMDDHHmmss");
|
|
|
+ this.endTime = moment
|
|
|
+ .unix(new Date(endAt).getTime() / 1000)
|
|
|
+ .format("YYYYMMDDHHmmss");
|
|
|
this.getGanttChartData();
|
|
|
- }
|
|
|
+ },
|
|
|
});
|
|
|
gc.main();
|
|
|
} else {
|
|
|
- gc.changeTasks(taskData)
|
|
|
+ gc.changeTasks(taskData);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
@@ -403,19 +439,23 @@ export default {
|
|
|
*/
|
|
|
disGanttData(arr) {
|
|
|
let data = [];
|
|
|
- _.forEach(arr, item => {
|
|
|
+ _.forEach(arr, (item) => {
|
|
|
data.push({
|
|
|
id: item.id,
|
|
|
name: item.name,
|
|
|
checked: "uncheck",
|
|
|
- originData: _.map(item.data, _item => {
|
|
|
+ originData: _.map(item.data, (_item) => {
|
|
|
// _item.startDate = moment.unix((new Date().getTime() - 1000*60*60*24*7)/1000).format('YYYY-MM-DD HH:mm:ss');
|
|
|
- _item.startDate = moment.unix(_item.startDate / 1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ _item.startDate = moment
|
|
|
+ .unix(_item.startDate / 1000)
|
|
|
+ .format("YYYY-MM-DD HH:mm:ss");
|
|
|
// _item.endDate = moment.unix(new Date().getTime()/1000).format('YYYY-MM-DD HH:mm:ss');
|
|
|
- _item.endDate = moment.unix(_item.endDate / 1000).format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ _item.endDate = moment
|
|
|
+ .unix(_item.endDate / 1000)
|
|
|
+ .format("YYYY-MM-DD HH:mm:ss");
|
|
|
_item.description = _item.parentname;
|
|
|
return _item;
|
|
|
- })
|
|
|
+ }),
|
|
|
});
|
|
|
});
|
|
|
return data;
|
|
@@ -446,50 +486,58 @@ export default {
|
|
|
let param = {
|
|
|
plazaId: this.plazaId,
|
|
|
type: statusType,
|
|
|
- id: id
|
|
|
+ id: id,
|
|
|
};
|
|
|
- queryGanttDetail("/data/base/queryGanttChartDetails", param).then(res => {
|
|
|
- const { result, data } = res;
|
|
|
- if (result === "success") {
|
|
|
- if (!data) {
|
|
|
- this.ganttDetail = {}
|
|
|
- return
|
|
|
- }
|
|
|
- const {
|
|
|
- status,
|
|
|
- planStartDate,
|
|
|
- planEndDate,
|
|
|
- realStartDate,
|
|
|
- realEndDate,
|
|
|
- statusType,
|
|
|
- name
|
|
|
- } = data;
|
|
|
- let color;
|
|
|
- switch (statusType) {
|
|
|
- case 1:
|
|
|
- color = ['#E7E9EA', '#C3C7CB'];
|
|
|
- break
|
|
|
- case 2:
|
|
|
- color = ['#FBCE99', '#F58300'];
|
|
|
- break
|
|
|
- case 3:
|
|
|
- color = ['#FBB8B5', '#F54E45'];
|
|
|
- break
|
|
|
- default:
|
|
|
- color = ['#FBB8B5', '#F54E45'];
|
|
|
- break
|
|
|
+ queryGanttDetail("/data/base/queryGanttChartDetails", param).then(
|
|
|
+ (res) => {
|
|
|
+ const { result, data } = res;
|
|
|
+ if (result === "success") {
|
|
|
+ if (!data) {
|
|
|
+ this.ganttDetail = {};
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const {
|
|
|
+ status,
|
|
|
+ planStartDate,
|
|
|
+ planEndDate,
|
|
|
+ realStartDate,
|
|
|
+ realEndDate,
|
|
|
+ statusType,
|
|
|
+ name,
|
|
|
+ } = data;
|
|
|
+ let color;
|
|
|
+ switch (statusType) {
|
|
|
+ case 1:
|
|
|
+ color = ["#E7E9EA", "#C3C7CB"];
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ color = ["#FBCE99", "#F58300"];
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ color = ["#FBB8B5", "#F54E45"];
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ color = ["#FBB8B5", "#F54E45"];
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ let newData = {
|
|
|
+ status,
|
|
|
+ color: color,
|
|
|
+ name: name,
|
|
|
+ planTime:
|
|
|
+ planStartDate && planEndDate
|
|
|
+ ? this.dealDetailTime(planStartDate, planEndDate)
|
|
|
+ : "--",
|
|
|
+ realTime:
|
|
|
+ realStartDate && realEndDate
|
|
|
+ ? this.dealDetailTime(realStartDate, realEndDate)
|
|
|
+ : "--",
|
|
|
+ };
|
|
|
+ this.ganttDetail = newData;
|
|
|
+ this.tableData = data.assetList;
|
|
|
}
|
|
|
- let newData = {
|
|
|
- status,
|
|
|
- color: color,
|
|
|
- name: name,
|
|
|
- planTime: (planStartDate && planEndDate)?this.dealDetailTime(planStartDate, planEndDate) : '--',
|
|
|
- realTime: (realStartDate && realEndDate)?this.dealDetailTime(realStartDate, realEndDate) : '--'
|
|
|
- };
|
|
|
- this.ganttDetail = newData;
|
|
|
- this.tableData = data.assetList;
|
|
|
}
|
|
|
- });
|
|
|
+ );
|
|
|
},
|
|
|
/**
|
|
|
* 处理时间
|
|
@@ -513,17 +561,17 @@ export default {
|
|
|
type: type,
|
|
|
// assetnum: this.assetnum,
|
|
|
};
|
|
|
- queryDetailData("/data/base/queryFileDetails", param).then(res => {
|
|
|
+ queryDetailData("/data/base/queryFileDetails", param).then((res) => {
|
|
|
console.log("photo", res);
|
|
|
const { result, data } = res;
|
|
|
- if (result === 'success') {
|
|
|
+ if (result === "success") {
|
|
|
let newData = [];
|
|
|
_.forEach(data, (item, index) => {
|
|
|
newData.push({
|
|
|
id: item.id,
|
|
|
url: item.urlname,
|
|
|
isActive: index === 0,
|
|
|
- name: item.description
|
|
|
+ name: item.description,
|
|
|
});
|
|
|
});
|
|
|
if (type === 0) {
|
|
@@ -540,22 +588,30 @@ export default {
|
|
|
* 切换当前预览大图
|
|
|
*/
|
|
|
changeCurImg(id) {
|
|
|
- _.map(this.pictureList, (o) => {return o.isActive = o.id === id});
|
|
|
- this.curImg = _.find(this.pictureList, (o) => {return o.isActive});
|
|
|
+ _.map(this.pictureList, (o) => {
|
|
|
+ return (o.isActive = o.id === id);
|
|
|
+ });
|
|
|
+ this.curImg = _.find(this.pictureList, (o) => {
|
|
|
+ return o.isActive;
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* 展示图片
|
|
|
*/
|
|
|
showImgContainer(id) {
|
|
|
- console.log('id', id)
|
|
|
- _.map(this.pictures, (o) => {return o.isActive = o.id === id});
|
|
|
- this.curImg = _.find(this.pictures, (o) => {return o.isActive});
|
|
|
+ console.log("id", id);
|
|
|
+ _.map(this.pictures, (o) => {
|
|
|
+ return (o.isActive = o.id === id);
|
|
|
+ });
|
|
|
+ this.curImg = _.find(this.pictures, (o) => {
|
|
|
+ return o.isActive;
|
|
|
+ });
|
|
|
this.showImgDetail = true;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
window.gc = null;
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -711,7 +767,7 @@ export default {
|
|
|
width: 24px;
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
- .info{
|
|
|
+ .info {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
@@ -721,10 +777,10 @@ export default {
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
}
|
|
|
- .accessory-container{
|
|
|
+ .accessory-container {
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- .expand-more{
|
|
|
+ .expand-more {
|
|
|
position: absolute;
|
|
|
left: 444px;
|
|
|
bottom: 0;
|
|
@@ -732,12 +788,12 @@ export default {
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- >svg{
|
|
|
+ > svg {
|
|
|
margin-right: 4px;
|
|
|
width: 16px;
|
|
|
- transition: transform .36s;
|
|
|
+ transition: transform 0.36s;
|
|
|
}
|
|
|
- .expand{
|
|
|
+ .expand {
|
|
|
transform: rotate(180deg);
|
|
|
}
|
|
|
}
|
|
@@ -761,6 +817,7 @@ export default {
|
|
|
height: 100%;
|
|
|
overflow: auto;
|
|
|
.item {
|
|
|
+ cursor: pointer;
|
|
|
> img {
|
|
|
width: 180px;
|
|
|
border: 4px solid rgba(245, 246, 247, 1);
|
|
@@ -781,7 +838,7 @@ export default {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
- .active>img{
|
|
|
+ .active > img {
|
|
|
border-color: rgba(31, 35, 41, 0.15);
|
|
|
}
|
|
|
}
|