581 lines
15 KiB
Vue
581 lines
15 KiB
Vue
<template>
|
||
<Card :title="title" showRefresh @query="handleQuery">
|
||
<div class="container">
|
||
<div class="header">
|
||
<div class="left-content">
|
||
<div class="item" v-for="(item, index) in headerList" :key="index">
|
||
<div class="color-block" :style="{ background: item.color }"></div>
|
||
<div class="label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-content">
|
||
备注：更新（进度填报）内容后该甘特图将自动更新
|
||
</div>
|
||
</div>
|
||
<div class="gantt-chart">
|
||
<div class="table" @scroll="handleScroll">
|
||
<div class="thead">
|
||
<div class="row">
|
||
<div class="td">分部分项工程名称</div>
|
||
<div class="td">开始日期</div>
|
||
<div class="td">完成日期</div>
|
||
<div class="td" v-for="date in dateList" :key="date">
|
||
<div class="date">
|
||
<div class="month">
|
||
{{ date }}
|
||
</div>
|
||
<div class="days">
|
||
<div class="day" v-for="day in getDays(date)" :key="day.num">
|
||
{{ day.num }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tbody">
|
||
<div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.pName">
|
||
<div class="row">
|
||
<div class="td" @click="handleOpen(i)">{{ p.pName }}</div>
|
||
<div class="td">{{ p.startTime }}</div>
|
||
<div class="td">{{ p.endTime }}</div>
|
||
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
|
||
<div class="grids">
|
||
<div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num"
|
||
:ref="p.pName + '-' + day.date"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress" :style="gantt" v-for="(gantt, index) in p.gantts" :key="index"
|
||
@mouseenter="handleHover" @mouseleave="handleLeave"></div>
|
||
</div>
|
||
<div class="children">
|
||
<div class="row" v-for="child in p.children" :key="'child-' + child.pName">
|
||
<div class="td">{{ child.pName }}</div>
|
||
<div class="td">{{ child.startTime }}</div>
|
||
<div class="td">{{ child.endTime }}</div>
|
||
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
|
||
<div class="grids">
|
||
<div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num"
|
||
:ref="child.pName + '-' + day.date"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress" :style="gantt" v-for="(gantt, index) in child.gantts" :key="index"
|
||
@mouseenter="handleHover" @mouseleave="handleLeave"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tooltips" :style="tooltipsStyle">
|
||
<div class="status">已逾期5天</div>
|
||
<div class="charger">负责人：史蒂夫</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import { getProgressListDataApi } from '@/assets/js/api/scheduleInfo'
|
||
import Card from '../components/Card.vue'
|
||
export default {
|
||
components: { Card },
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
created() {
|
||
this.getProgressListData()
|
||
console.log(this.getDays('2022/09'), '到')
|
||
},
|
||
mounted() {
|
||
this.setGantts()
|
||
},
|
||
data() {
|
||
return {
|
||
// 头部行
|
||
headerList: [
|
||
{ label: '阶段完成', color: '#4983fc' },
|
||
{ label: '任务完成', color: '#4fd389' },
|
||
{ label: '进行中', color: '#f1d520' },
|
||
{ label: '逾期', color: '#fc6f8e' }
|
||
],
|
||
projects: [],
|
||
openedIndex: 9999,
|
||
colors: ['#54CF8E', '#F2D026', '#4C87FF', '#FF6C7F'],
|
||
tooltipsStyle: {
|
||
display: 'none',
|
||
left: 0,
|
||
top: 0
|
||
},
|
||
scrollLeft: 0,
|
||
scrollTimer: 0
|
||
}
|
||
},
|
||
methods: {
|
||
//获取进度列表数据
|
||
getProgressListData() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn
|
||
}
|
||
getProgressListDataApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
res.result.forEach((resdata) => {
|
||
let data = {
|
||
pName: resdata.taskName,
|
||
startTime: resdata.startDate.replaceAll('-', '/'),
|
||
endTime: resdata.finishDate.replaceAll('-', '/'),
|
||
delay: 0,
|
||
status: resdata.status,
|
||
gantts: [],
|
||
// gantts: [{ left: '420px', width: '100px', status: '' }],
|
||
children: []
|
||
}
|
||
if (resdata.children.length >= 1) {
|
||
// data.children = this.checkchildrenData(resdata.children);
|
||
let childrenDataList = []
|
||
resdata.children.forEach((resdata) => {
|
||
let data = {
|
||
pName: resdata.taskName,
|
||
startTime: resdata.startDate.replaceAll('-', '/'),
|
||
endTime: resdata.finishDate.replaceAll('-', '/'),
|
||
status: resdata.status,
|
||
gantts: []
|
||
}
|
||
|
||
childrenDataList.push(data)
|
||
})
|
||
data.children = childrenDataList
|
||
}
|
||
|
||
this.projects.push(data)
|
||
})
|
||
this.$nextTick(() => {
|
||
this.setGantts()
|
||
})
|
||
console.log('获取进度列表数据', res.result)
|
||
}
|
||
})
|
||
},
|
||
|
||
checkchildrenData(val) {
|
||
let dataChildren = []
|
||
val.forEach((resdata) => {
|
||
let data = {
|
||
pName: resdata.taskName,
|
||
startTime: resdata.startDate.replaceAll('-', '/'),
|
||
endTime: resdata.finishDate.replaceAll('-', '/'),
|
||
status: resdata.status,
|
||
children: []
|
||
}
|
||
if (resdata.children.length >= 1) {
|
||
data.children = this.checkchildrenData(resdata.children)
|
||
}
|
||
dataChildren.push(data)
|
||
})
|
||
return dataChildren
|
||
},
|
||
|
||
/** 查询 */
|
||
handleQuery() {
|
||
this.$nextTick(() => {
|
||
this.setGantts()
|
||
})
|
||
},
|
||
getGanttStyle(project) {
|
||
console.log('进入 getGanttStyle --- ', project)
|
||
|
||
let { startTime, endTime, pName } = project
|
||
const startArr = startTime.split('/')
|
||
const endArr = endTime.split('/')
|
||
let startRef = null
|
||
let endRef = null
|
||
|
||
if (!(startArr[2] % 2)) {
|
||
const day = startArr[2] - 1
|
||
startArr[2] = day < 10 ? '0' + day : day
|
||
startTime = startArr.join('/')
|
||
console.log(startTime, 'xxx')
|
||
}
|
||
if (!(endArr[2] % 2)) {
|
||
const day = endArr[2] - 1
|
||
endArr[2] = day < 10 ? '0' + day : day
|
||
endTime = endArr.join('/')
|
||
console.log(endTime, 'xxx ===', pName)
|
||
}
|
||
console.log('getGanttStyle --- ', this.$refs[`${pName}-${startTime}`])
|
||
startRef = this.$refs[`${pName}-${startTime}`][0]
|
||
const startLeft = startRef.offsetLeft
|
||
|
||
endRef = this.$refs[`${pName}-${endTime}`][0]
|
||
const endWidth = endRef.offsetWidth
|
||
const endLeft = endRef.offsetLeft
|
||
const ganttWidth = endLeft - startLeft + endWidth
|
||
|
||
return { left: startLeft + 'px', width: ganttWidth + 'px' }
|
||
},
|
||
setGantts() {
|
||
const configGantts = (projects) => {
|
||
console.log('进入渲染 setGantts -- ', projects)
|
||
projects.map((project) => {
|
||
let { endTime, pName, gantts } = project
|
||
const gantt = this.getGanttStyle(project)
|
||
gantt.background = this.colors[project.status]
|
||
|
||
if (gantts) {
|
||
gantts.push(gantt)
|
||
} else {
|
||
project.gantts = [gantt]
|
||
}
|
||
|
||
if (project.delay) {
|
||
const delayStartTime = this.increaseDate(endTime, 1)
|
||
const delayEndTime = this.increaseDate(endTime, project.delay)
|
||
const gantt = this.getGanttStyle({
|
||
startTime: delayStartTime,
|
||
endTime: delayEndTime,
|
||
pName
|
||
})
|
||
gantt.background = this.colors[3]
|
||
gantts.push(gantt)
|
||
console.log(gantt, '是的发生的范范')
|
||
}
|
||
|
||
// debugger
|
||
project.children && configGantts(project.children)
|
||
})
|
||
}
|
||
configGantts(this.projects)
|
||
},
|
||
increaseDate(date, delay) {
|
||
const timestamp =
|
||
new Date(date).getTime() + (delay + 1) * 1000 * 60 * 60 * 24
|
||
return new Date(timestamp).toISOString().replace(/-/g, '/').slice(0, 10)
|
||
},
|
||
getDays(date) {
|
||
const year = date.split('/')[0]
|
||
const month = +date.split('/')[1]
|
||
const large = [1, 3, 5, 7, 8, 10, 12]
|
||
const normal = [4, 6, 9, 11]
|
||
const small = [2]
|
||
let count = 0
|
||
switch (true) {
|
||
case large.includes(month):
|
||
count = 31
|
||
break
|
||
case normal.includes(month):
|
||
count = 30
|
||
break
|
||
case small.includes(month):
|
||
count = year % 4 ? 28 : 29
|
||
break
|
||
}
|
||
|
||
return (() => {
|
||
const days = new Array(count)
|
||
.fill(0)
|
||
.map((item, index) => {
|
||
let num = index + 1
|
||
let fulldate = date + (num < 10 ? '/0' + num : '/' + num)
|
||
return { num, date: fulldate }
|
||
})
|
||
.filter((item) => item.num % 2)
|
||
if (count === 28) {
|
||
days.push({ num: 28, date: date + '/28' })
|
||
} else if (count === 30) {
|
||
days.push({ num: 30, date: date + '/30' })
|
||
}
|
||
return days
|
||
})()
|
||
},
|
||
handleOpen(index) {
|
||
if (index === this.openedIndex) {
|
||
this.openedIndex = 9999
|
||
} else {
|
||
this.openedIndex = index
|
||
}
|
||
},
|
||
handleScroll(e) {
|
||
if (this.scrollTimer) {
|
||
clearTimeout(this.scrollTimer)
|
||
}
|
||
this.scrollTimer = setTimeout(() => {
|
||
this.scrollLeft = e.target.scrollLeft
|
||
this.scrollTimer = null
|
||
}, 100)
|
||
},
|
||
handleHover(e) {
|
||
const { clientX, clientY } = e
|
||
const decreaseLeft = clientX - 680
|
||
const decreaseTop = clientY - 200
|
||
this.tooltipsStyle = {
|
||
left: decreaseLeft + this.scrollLeft + 'px',
|
||
top: decreaseTop + 'px',
|
||
display: 'block'
|
||
}
|
||
},
|
||
handleLeave() {
|
||
this.tooltipsStyle = {
|
||
display: 'none'
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
dateList() {
|
||
let dates = []
|
||
const mapDates = (data) => {
|
||
data.map((p) => {
|
||
dates.push(p.startTime)
|
||
dates.push(p.endTime)
|
||
p.children && mapDates(p.children)
|
||
})
|
||
}
|
||
mapDates(this.projects)
|
||
dates = dates.map((date) => date.slice(0, 7)).sort()
|
||
dates = [...new Set(dates)]
|
||
console.log('dateList----', dates)
|
||
return dates
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
box-sizing: border-box;
|
||
padding: 0 13px;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 60px;
|
||
|
||
.left-content {
|
||
display: flex;
|
||
width: 40%;
|
||
height: 100%;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
width: calc(100% / 4);
|
||
|
||
.color-block {
|
||
margin-right: 10px;
|
||
width: 15px;
|
||
height: 15px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.label {
|
||
color: #fff;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-content {
|
||
font-size: 13px;
|
||
line-height: 60px;
|
||
}
|
||
}
|
||
|
||
.gantt-chart {
|
||
height: calc(100% - 60px);
|
||
|
||
.table {
|
||
position: relative;
|
||
height: 100%;
|
||
overflow-x: auto;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
background-color: skyblue;
|
||
}
|
||
|
||
.thead {
|
||
border-bottom: 1px solid #234d5f;
|
||
|
||
.row {
|
||
display: flex;
|
||
|
||
.td {
|
||
flex-shrink: 0;
|
||
box-sizing: border-box;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
background-color: #163549;
|
||
|
||
.date {
|
||
line-height: 21px;
|
||
border-left: 1px solid #234d5f;
|
||
|
||
.month {
|
||
border-bottom: 1px solid #234d5f;
|
||
}
|
||
|
||
.days {
|
||
display: flex;
|
||
|
||
.day {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
padding-left: 40px;
|
||
width: 200px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
&:not(:nth-child(1)) {
|
||
width: 100px;
|
||
text-align: center;
|
||
}
|
||
|
||
&:nth-child(n + 4) {
|
||
width: 400px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tbody {
|
||
border-left: 1px solid #234d5f;
|
||
|
||
.row-groups {
|
||
position: relative;
|
||
height: 42px;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 26px;
|
||
top: 16px;
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 4px solid transparent;
|
||
border-right: 4px solid transparent;
|
||
border-bottom: 4px solid transparent;
|
||
border-left: 4px solid #5be1f4;
|
||
z-index: 99;
|
||
}
|
||
|
||
&.open {
|
||
height: unset;
|
||
|
||
&::before {
|
||
border-left-color: transparent;
|
||
border-top-color: #5be1f4;
|
||
}
|
||
}
|
||
|
||
>.row .td:first-child {
|
||
user-select: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.row {
|
||
position: relative;
|
||
display: flex;
|
||
|
||
.td {
|
||
flex-shrink: 0;
|
||
box-sizing: border-box;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
background-color: #0a1b2f;
|
||
border-right: 1px solid #234d5f;
|
||
border-bottom: 1px solid #234d5f;
|
||
|
||
.grids {
|
||
height: 100%;
|
||
display: flex;
|
||
|
||
.grid {
|
||
position: relative;
|
||
flex: 1;
|
||
height: 100%;
|
||
|
||
&:not(:last-child) {
|
||
border-right: 1px solid #234d5f;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
padding-left: 40px;
|
||
width: 200px;
|
||
}
|
||
|
||
&:not(:nth-child(1)) {
|
||
width: 100px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
&:nth-child(n + 4) {
|
||
width: 400px;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
flex-shrink: 0;
|
||
position: absolute;
|
||
top: calc(50% - 7px);
|
||
width: 20px;
|
||
height: 14px;
|
||
background: #557dee;
|
||
}
|
||
}
|
||
|
||
.children {
|
||
.td {
|
||
height: 38px;
|
||
line-height: 38px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tooltips {
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
width: 130px;
|
||
height: 65px;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
background-color: #50a6b3;
|
||
|
||
.status {
|
||
display: inline-block;
|
||
margin-bottom: 6px;
|
||
padding: 0 10px;
|
||
height: 20px;
|
||
min-width: 60px;
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
border-radius: 10px;
|
||
background-color: #ff6c7f;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|