<template>
|
<div class="box">
|
<div class="f-r">
|
<div>设置开始时间</div>
|
<el-date-picker
|
style="margin: 0 10px"
|
v-model="startTime"
|
type="date"
|
value-format="yyyyMMddHHmmss"
|
placeholder="选择日期">
|
</el-date-picker>
|
<my-button @click="doPreview" name="生成预览" type="warning" site="form"/>
|
</div>
|
<el-table
|
v-loading="loading"
|
border
|
height="calc(100vh - 505px)"
|
:data="tableData"
|
:span-method="spanMethod"
|
style="width: 100%;margin-top: 15px">
|
<el-table-column
|
prop="stageName"
|
align="center"
|
width="130"
|
label="阶段"/>
|
<el-table-column
|
prop="nodeName"
|
align="center"
|
width="110"
|
label="节点"/>
|
<el-table-column
|
prop="startDate"
|
align="center"
|
label="开始时间"
|
width="110">
|
<template slot-scope="scope">
|
<span>{{ longToDate(scope.row.startDate) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="endDate"
|
align="center"
|
label="截止时间"
|
width="110">
|
<template slot-scope="scope">
|
<span>{{ longToDate(scope.row.endDate) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column :width="dates.length*100+2" class-name="my-col">
|
<template slot="header" slot-scope="scope">
|
<span v-for="(item,i) in dates" :key="i" class="item">{{ longToDate(item) }}</span>
|
</template>
|
<template slot-scope="{row,$index}">
|
<!-- <span v-for="(item,i) in dates" :key="i" class="progress" :class="(dates.indexOf(row.startDate)<=i)&&(dates.indexOf(row.endDate)>=i)?'act':''"><span class="act"></span></span>-->
|
<span v-for="(item,i) in dates" :key="i" class="progress">
|
<span v-if="(dates.indexOf(row.startDate)<=i)&&(dates.indexOf(row.endDate)>=i)" class="act"></span>
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
import {getPreview} from "@/api/projectConfig/buildPlanNode";
|
import myButton from '@/components/myButton/myButton'
|
import * as DateFormatter from '@/utils/DateFormatter';
|
|
export default {
|
name: 'preview',
|
components: {myButton},
|
props: ['tempProjectStages'],
|
data() {
|
return {
|
loading: false,
|
startTime: '',
|
tableData: [],
|
spanArr: [],
|
pos: 0,
|
dates: []
|
}
|
},
|
mounted() {
|
this.$EventBus.$on('clearData', data => {
|
this.startTime = ''
|
this.tableData = []
|
this.spanArr = []
|
this.pos = 0
|
this.dates = []
|
})
|
},
|
methods: {
|
doPreview() {
|
this.loading = true
|
getPreview({
|
startDate: this.startTime,
|
tempProjectStages: this.tempProjectStages
|
}).then(res => {
|
let arr = []
|
res.map(item => {
|
arr.push(item.startDate)
|
arr.push(item.endDate)
|
})
|
let newArr = arr.filter((value, index, self) => {
|
return self.indexOf(value) === index;
|
});
|
this.dates = newArr.sort()
|
this.tableData = res
|
this.getSpanArr(res)
|
this.loading = false
|
}).catch(() => {
|
this.loading = false
|
})
|
},
|
spanMethod({row, column, rowIndex, columnIndex}) {
|
if (columnIndex === 0) {
|
const rowspan = this.spanArr[rowIndex]
|
const colspan = rowspan > 0 ? 1 : 0
|
return {
|
rowspan, //行
|
colspan //列
|
};
|
}
|
},
|
getSpanArr(data) {
|
this.spanArr = [];
|
for (let i = 0; i < data.length; i++) {
|
if (i === 0) {
|
this.spanArr.push(1);
|
this.pos = 0;
|
} else {
|
// 判断当前元素与上一个元素是否相同
|
if (data[i].id === data[i - 1].id && data[i].id) {
|
this.spanArr[this.pos] += 1;
|
this.spanArr.push(0);
|
} else {
|
this.spanArr.push(1);
|
this.pos = i;
|
}
|
}
|
}
|
},
|
longToDate(long) {
|
return DateFormatter.LongToDate(long)
|
}
|
}
|
}
|
</script>
|
<style>
|
.my-col {
|
padding: 0 !important;
|
}
|
|
.my-col .cell {
|
padding: 0 !important;
|
}
|
|
.el-table__row .my-col {
|
border: none !important;
|
}
|
</style>
|
<style scoped lang="scss">
|
.item {
|
display: inline-block;
|
text-align: center;
|
width: 100px;
|
}
|
|
.progress {
|
position: relative;
|
//left: -50px;
|
display: inline-block;
|
width: 100px;
|
height: 24px;
|
margin-top: 8px;
|
|
&::after {
|
content: '';
|
position: absolute;
|
width: 1px;
|
height: 40px;
|
left: 100px;
|
top: -8px;
|
border-right: 1px dashed #dfe6ec;
|
}
|
}
|
|
.act {
|
position: absolute;
|
display: inline-block;
|
width: 100px;
|
height: 24px;
|
background-color: #0c8aff;
|
//left: -50px;
|
}
|
|
.rt {
|
//left: -50px;
|
}
|
|
.lt {
|
|
}
|
|
</style>
|
