1201 lines
41 KiB
Vue
1201 lines
41 KiB
Vue
<template>
|
|
<div class="main-box">
|
|
<div class="gantt-box">
|
|
<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>
|
|
<div class="gantt-chart" v-if="projects.length > 0">
|
|
<div class="table" @scroll="handleScroll">
|
|
<div class="thead">
|
|
<div class="row">
|
|
<div class="td fixed_1">分部分项工程名称</div>
|
|
<div class="td fixed_2">开始日期</div>
|
|
<div class="td fixed_3" style="border-right: 1px solid #cbd1df">
|
|
完成日期
|
|
</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 === p.id }" v-for="(p, i) in projects" :key="p.taskName">
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpen(p, p.id)" style="color: #333333; padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndex === p.id && p.children.length > 0"
|
|
:style="{ visibility: openedIndex === p.id && p.children.length > 0 ? 'visible' : 'hidden' }"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{ visibility: openedIndex != p.id && p.children.length > 0 ? 'visible' : 'hidden' }"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="p.taskName" placement="top-start">
|
|
<span>{{ p.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<!-- <div class="td fixed_1" @click="handleOpen(p, i)" style="color: #333333; padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndex === i && p.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndex === i && p.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndex != i && p.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="p.taskName" placement="top-start">
|
|
<span>{{ p.taskName }}</span>
|
|
</el-tooltip>
|
|
</div> -->
|
|
|
|
<div class="td fixed_2">{{ p.startDate }}</div>
|
|
<div class="td fixed_3">{{ p.finishDate }}</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="setItemRef(p.id, day.date)"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in p.gantts"
|
|
:key="index"
|
|
:title="p.taskName + ' ' + headerList[p.status].label"
|
|
@click="openGanttDialog(p)"
|
|
></div>
|
|
</div>
|
|
<!-- 第二层 -->
|
|
<div class="children" v-show="openedIndex === p.id" v-for="child in p.children" :key="'child-' + child.taskName">
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenSecond(child, child.id)" style="padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndexSecond === child.id && child.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexSecond === child.id && child.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{ visibility: openedIndexSecond != child.id && child.children.length > 0 ? 'visible' : 'hidden' }"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="child.taskName" placement="top-start">
|
|
<span>{{ child.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">{{ child.startDate }}</div>
|
|
<div class="td fixed_3">{{ child.finishDate }}</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="setItemRef(child.id, day.date)"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in child.gantts"
|
|
:key="index"
|
|
@mouseenter="e => handleHover(e, child)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第三层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexSecond === child.id"
|
|
v-for="second in child.children"
|
|
:key="'child-' + second.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenThird(second, second.id)" style="padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndexThird === second.id && second.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexThird === second.id && second.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexThird != second.id && second.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
|
|
<el-tooltip effect="dark" :content="second.taskName" placement="top-start">
|
|
<span>{{ second.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<div class="td fixed_2">{{ second.startDate }}</div>
|
|
<div class="td fixed_3">{{ second.finishDate }}</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="setItemRef(second.id, day.date)"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in second.gantts"
|
|
:key="index"
|
|
@mouseenter="e => handleHover(e, second)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第四层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexThird === second.id"
|
|
v-for="third in second.children"
|
|
:key="'child-' + third.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenFourth(third, third.id)" style="padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndexFourth === third.id && third.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexFourth === third.id && third.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexFourth != third.id && third.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="third.taskName" placement="top-start">
|
|
<span>{{ third.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<div class="td fixed_2">{{ third.startDate }}</div>
|
|
<div class="td fixed_3">{{ third.finishDate }}</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="setItemRef(third.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in third.gantts"
|
|
:key="index"
|
|
@mouseenter="e => handleHover(e, third)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第五层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexFourth === third.id"
|
|
v-for="fouth in third.children"
|
|
:key="'child-' + fouth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenFifth(fouth, fouth.id)" style="padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndexFifth === fouth.id && fouth.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexFifth === fouth.id && fouth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexFifth != fouth.id && fouth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="fouth.taskName" placement="top-start">
|
|
<span>{{ fouth.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<div class="td fixed_2">{{ fouth.startDate }}</div>
|
|
<div class="td fixed_3">{{ fouth.finishDate }}</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="setItemRef(fouth.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in fouth.gantts"
|
|
:key="index"
|
|
@mouseenter="e => handleHover(e, fouth)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第六层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexFifth === fouth.id"
|
|
v-for="fifth in fouth.children"
|
|
:key="'child-' + fifth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenSixth(fifth, fifth.id)" style="padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndexSixth === fifth.id && fifth.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexSixth === fifth.id && fifth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexSixth != fifth.id && fifth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="fifth.taskName" placement="top-start">
|
|
<span>{{ fifth.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">{{ fifth.startDate }}</div>
|
|
<div class="td fixed_3">{{ fifth.finishDate }}</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="setItemRef(fifth.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in fifth.gantts"
|
|
:key="index"
|
|
@mouseenter="e => handleHover(e, fifth)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第七层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexSixth === fifth.id"
|
|
v-for="sixth in fifth.children"
|
|
:key="'child-' + sixth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenSeven(sixth, sixth.id)" style="padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndexSixth === sixth.id && sixth.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexSixth === sixth.id && sixth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexSixth != sixth.id && sixth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="sixth.taskName" placement="top-start">
|
|
<span>{{ sixth.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">{{ sixth.startDate }}</div>
|
|
<div class="td fixed_3">{{ sixth.finishDate }}</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="setItemRef(sixth.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in sixth.gantts"
|
|
:key="index"
|
|
@mouseenter="e => handleHover(e, sixth)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第八层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexSeven === sixth.id"
|
|
v-for="seventh in sixth.children"
|
|
:key="'child-' + seventh.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenEighth(seventh, seventh.id)" style="padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndexSeven === seventh.id && seventh.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexSeven === seventh.id && seventh.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexSeven != seventh.id && seventh.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="seventh.taskName" placement="top-start">
|
|
<span>{{ seventh.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">{{ seventh.startDate }}</div>
|
|
<div class="td fixed_3">{{ seventh.finishDate }}</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="setItemRef(seventh.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in seventh.gantts"
|
|
:key="index"
|
|
@mouseenter="e => handleHover(e, seventh)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第九层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexEighth === seventh.id"
|
|
v-for="eighth in seventh.children"
|
|
:key="'child-' + eighth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" style="padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndexEighth === eighth.id && eighth.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexEighth === eighth.id && eighth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexEighth != eighth.id && eighth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="eighth.taskName" placement="top-start">
|
|
<span>{{ eighth.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">{{ eighth.startDate }}</div>
|
|
<div class="td fixed_3">{{ eighth.finishDate }}</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="setItemRef(eighth.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in eighth.gantts"
|
|
:key="index"
|
|
@mouseenter="e => handleHover(e, eighth)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tooltips" :style="tooltipsStyle">
|
|
{{ tooltipContent.taskName }}
|
|
<span>
|
|
{{
|
|
tooltipContent.mppStatus == 0
|
|
? '未开始'
|
|
: tooltipContent.mppStatus == 1
|
|
? '进行中'
|
|
: tooltipContent.mppStatus == 2
|
|
? '已完成'
|
|
: '已逾期'
|
|
}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="noData">
|
|
<img src="@/assets/images/notoDataImg.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getParentChildTaskListApi } from '@/assets/js/api/progressManagement'
|
|
export default {
|
|
data() {
|
|
return {
|
|
searchSn: '',
|
|
headerList: [
|
|
{ label: '未开始', color: '#3a7bff' },
|
|
{ label: '进行中', color: '#f1d520' },
|
|
{ label: '已完成', color: '#4fd389' },
|
|
{ label: '已逾期', color: '#F80840' }
|
|
],
|
|
colors: ['#3a7bff', '#f1d520', '#4fd389', '#F80840'],
|
|
projects: [],
|
|
itemRefs: [],
|
|
scrollLeft: 0,
|
|
scrollTimer: 0,
|
|
openedIndex: 9999,
|
|
openedIndexSecond: 9999,
|
|
openedIndexThird: 9999,
|
|
openedIndexFourth: 9999,
|
|
openedIndexFifth: 9999,
|
|
openedIndexSixth: 9999,
|
|
openedIndexSeven: 9999,
|
|
openedIndexEighth: 9999,
|
|
openedIndexNinth: 9999,
|
|
openedIndexTenth: 9999,
|
|
|
|
tooltipsStyle: [
|
|
{
|
|
display: 'none',
|
|
left: 0,
|
|
top: 0
|
|
}
|
|
],
|
|
tooltipContent: {
|
|
day: 0,
|
|
name: ''
|
|
},
|
|
dateList: []
|
|
}
|
|
},
|
|
created() {
|
|
this.searchSn = this.$store.state.projectSn
|
|
this.getDataList()
|
|
},
|
|
computed: {
|
|
dates() {
|
|
let dates = []
|
|
const mapDates = data => {
|
|
data.map(p => {
|
|
dates.push(p.startDate)
|
|
dates.push(p.finishDate)
|
|
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
|
|
}
|
|
},
|
|
watch: {
|
|
dates: {
|
|
immediate: true,
|
|
handler(newDates) {
|
|
this.dateList = newDates
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
//获取甘特图数据
|
|
getDataList() {
|
|
getParentChildTaskListApi({
|
|
projectSn: this.searchSn
|
|
}).then(res => {
|
|
this.projects = this.dealArr(res.result)
|
|
console.log('获取甘特图数据', this.projects)
|
|
var that = this
|
|
setTimeout(function() {
|
|
that.setGantts(that.projects)
|
|
}, 300)
|
|
})
|
|
},
|
|
dealArr(arr) {
|
|
arr.map(item => {
|
|
item.gantts = []
|
|
item.delay = 0
|
|
if (item.children && item.children.length > 0) {
|
|
this.dealArr(item.children)
|
|
}
|
|
})
|
|
return arr
|
|
},
|
|
|
|
setItemRef(id, date) {
|
|
var val = id + '@|@' + date
|
|
return val
|
|
|
|
// return val;
|
|
},
|
|
getGanttStyle(project) {
|
|
console.log('进入 getGanttStyle --- ', project.id, project.startDate)
|
|
|
|
let { startDate, finishDate, id } = project
|
|
const startArr = startDate.split('-')
|
|
const endArr = finishDate.split('-')
|
|
let startRef = null
|
|
let endRef = null
|
|
// 抹灰工程1-1-2022/09/03
|
|
|
|
const a = !(startArr[2] % 2)
|
|
console.log(a, ':!(startArr[2] % 2:')
|
|
if (a) {
|
|
const day = startArr[2] - 1
|
|
startArr[2] = day < 10 ? '0' + day : day
|
|
startDate = startArr.join('-')
|
|
}
|
|
const b = !(endArr[2] % 2)
|
|
console.log(a, ':!(endArr[2] % 2):')
|
|
if (!(endArr[2] % 2)) {
|
|
const day = endArr[2] - 1
|
|
endArr[2] = day < 10 ? '0' + day : day
|
|
finishDate = endArr.join('-')
|
|
}
|
|
|
|
console.log('finishDate ------------', this.$refs)
|
|
let startRefVal = id + '@|@' + startDate
|
|
let endRefVal = id + '@|@' + finishDate
|
|
console.log('this.$refs[startRefVal] startRefVal------------', this.$refs[startRefVal])
|
|
if (this.$refs[startRefVal] == undefined) {
|
|
return { left: 0 + 'px', width: 0 + 'px' }
|
|
}
|
|
startRef = this.$refs[startRefVal][0]
|
|
|
|
endRef = this.$refs[endRefVal][0]
|
|
|
|
const startLeft = startRef.offsetLeft
|
|
|
|
const endWidth = endRef.offsetWidth
|
|
|
|
const endLeft = endRef.offsetLeft
|
|
const ganttWidth = endLeft - startLeft + endWidth
|
|
|
|
return { left: startLeft + 'px', width: ganttWidth + 'px' }
|
|
},
|
|
|
|
setGantts(projects) {
|
|
console.log('进入渲染 setGantts projects-- ', JSON.stringify(projects))
|
|
projects.map(project => {
|
|
let { finishDate, id, gantts } = project
|
|
const gantt = this.getGanttStyle(project)
|
|
gantt.background = this.colors[project.mppStatus]
|
|
console.log('进入渲染 setGantts -- ', id, gantt)
|
|
if (gantts) {
|
|
gantts.push(gantt)
|
|
} else {
|
|
project.gantts = [gantt]
|
|
}
|
|
if (project.children.length > 0) {
|
|
// project.children = this.setGantts(project.children)
|
|
project.children && this.setGantts(project.children)
|
|
}
|
|
// return project
|
|
// project.children && this.setGantts(project.children);
|
|
})
|
|
},
|
|
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(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndex) {
|
|
this.openedIndex = 9999
|
|
} else {
|
|
this.openedIndex = index
|
|
}
|
|
var that = this
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value]
|
|
that.setGantts(arr)
|
|
}, 300)
|
|
},
|
|
handleOpenSecond(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexSecond) {
|
|
this.openedIndexSecond = 9999
|
|
} else {
|
|
this.openedIndexSecond = index
|
|
}
|
|
var that = this
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value]
|
|
that.setGantts(arr)
|
|
}, 300)
|
|
},
|
|
handleOpenThird(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexThird) {
|
|
this.openedIndexThird = 9999
|
|
} else {
|
|
this.openedIndexThird = index
|
|
}
|
|
var that = this
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value]
|
|
that.setGantts(arr)
|
|
}, 300)
|
|
},
|
|
handleOpenFourth(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexFourth) {
|
|
this.openedIndexFourth = 9999
|
|
} else {
|
|
this.openedIndexFourth = index
|
|
}
|
|
var that = this
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value]
|
|
that.setGantts(arr)
|
|
}, 300)
|
|
},
|
|
handleOpenFifth(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexFifth) {
|
|
this.openedIndexFifth = 9999
|
|
} else {
|
|
this.openedIndexFifth = index
|
|
}
|
|
var that = this
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value]
|
|
that.setGantts(arr)
|
|
}, 300)
|
|
},
|
|
handleOpenSixth(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexSixth) {
|
|
this.openedIndexSixth = 9999
|
|
} else {
|
|
this.openedIndexSixth = index
|
|
}
|
|
var that = this
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value]
|
|
that.setGantts(arr)
|
|
}, 300)
|
|
},
|
|
handleOpenSeven(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexSeven) {
|
|
this.openedIndexSeven = 9999
|
|
} else {
|
|
this.openedIndexSeven = index
|
|
}
|
|
var that = this
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value]
|
|
that.setGantts(arr)
|
|
}, 300)
|
|
},
|
|
handleOpenEighth(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexEighth) {
|
|
this.openedIndexEighth = 9999
|
|
} else {
|
|
this.openedIndexEighth = index
|
|
}
|
|
var that = this
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value]
|
|
that.setGantts(arr)
|
|
}, 300)
|
|
},
|
|
|
|
handleScroll(e) {
|
|
console.log('进入 handleScroll')
|
|
if (this.scrollTimer) {
|
|
clearTimeout(this.scrollTimer)
|
|
}
|
|
this.scrollTimer = setTimeout(() => {
|
|
this.scrollLeft = e.target.scrollLeft
|
|
this.scrollTimer = null
|
|
}, 100)
|
|
const fixedElement1 = document.querySelectorAll('.fixed_1')
|
|
const fixedElement2 = document.querySelectorAll('.fixed_2')
|
|
const fixedElement3 = document.querySelectorAll('.fixed_3')
|
|
console.log('fixedElement1 :' + fixedElement1)
|
|
console.log('fixedElement1 :' + fixedElement1[0])
|
|
console.log('fixedElement1 :' + fixedElement1.length)
|
|
for (let i = 0; i < fixedElement1.length; i++) {
|
|
fixedElement1[i].style.left = e.target.scrollLeft + 'px'
|
|
}
|
|
for (let i = 0; i < fixedElement2.length; i++) {
|
|
fixedElement2[i].style.left = e.target.scrollLeft + 'px'
|
|
}
|
|
for (let i = 0; i < fixedElement3.length; i++) {
|
|
fixedElement3[i].style.left = e.target.scrollLeft + 'px'
|
|
}
|
|
},
|
|
handleHover(e, item) {
|
|
console.log(666)
|
|
console.log('鼠标', e)
|
|
console.log(item)
|
|
// if (item.mppStatus == 0 || item.state == 5 || item.state == 6) {
|
|
const { clientX, clientY } = e
|
|
const decreaseLeft = clientX - 80
|
|
const decreaseTop = clientY - 250
|
|
this.tooltipsStyle = {
|
|
left: decreaseLeft + this.scrollLeft + 'px',
|
|
top: decreaseTop + 'px',
|
|
display: 'block'
|
|
}
|
|
this.tooltipContent = {
|
|
taskName: item.taskName,
|
|
mppStatus: item.mppStatus
|
|
}
|
|
// }
|
|
},
|
|
handleLeave() {
|
|
this.tooltipsStyle.display = 'none'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.noData {
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
img {
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 40%;
|
|
width: 15%;
|
|
}
|
|
}
|
|
|
|
.main-box {
|
|
overflow-x: scroll;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.gantt-box {
|
|
box-sizing: border-box;
|
|
min-width: 1120px;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 18px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 60px;
|
|
|
|
.left-content {
|
|
display: flex;
|
|
width: 65%;
|
|
height: 100%;
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
// width: calc(100% / 4);
|
|
margin-right: 30px;
|
|
|
|
.color-block {
|
|
margin-right: 10px;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.label {
|
|
color: #29304d;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gantt-chart {
|
|
height: calc(100% - 60px);
|
|
overflow: hidden;
|
|
|
|
.table {
|
|
position: relative;
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color: #e6f2ff;
|
|
}
|
|
|
|
.thead {
|
|
width: max-content;
|
|
// border-left: 1px solid #0a769a;
|
|
|
|
.row {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.fixed_1,
|
|
.fixed_2,
|
|
.fixed_3 {
|
|
width: 200px;
|
|
position: relative;
|
|
background: #e2ebff;
|
|
z-index: 10;
|
|
}
|
|
|
|
.fixed_1 {
|
|
border-left: 1px solid #cbd1df;
|
|
left: 0;
|
|
}
|
|
|
|
.fixed_2 {
|
|
left: 0px;
|
|
}
|
|
|
|
.fixed_3 {
|
|
left: 0px;
|
|
}
|
|
|
|
.td {
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
background-color: #e2ebff;
|
|
color: #666666;
|
|
font-size: 16px;
|
|
border-top: 1px solid #cbd1df;
|
|
|
|
.date {
|
|
line-height: 21px;
|
|
border-left: 1px solid #cbd1df;
|
|
|
|
.month {
|
|
border-bottom: 1px solid #cbd1df;
|
|
}
|
|
|
|
.days {
|
|
display: flex;
|
|
|
|
.day {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
padding-left: 30px;
|
|
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 {
|
|
width: max-content;
|
|
// border-left: 1px solid #0a769a;
|
|
|
|
.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;
|
|
border-top: 1px solid #cbd1df;
|
|
|
|
.fixed_1,
|
|
.fixed_2,
|
|
.fixed_3 {
|
|
width: 200px;
|
|
position: relative;
|
|
background: #092945;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.fixed_1 {
|
|
left: 0;
|
|
border-left: 1px solid #cbd1df;
|
|
}
|
|
|
|
.fixed_2 {
|
|
left: 0px;
|
|
}
|
|
|
|
.fixed_3 {
|
|
left: 0px;
|
|
}
|
|
|
|
.td {
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
background-color: #fff;
|
|
border-right: 1px solid #cbd1df;
|
|
border-bottom: 1px solid #cbd1df;
|
|
border-top: 1px solid #cbd1df;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
|
|
.grids {
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.grid {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 100%;
|
|
|
|
&:not(:last-child) {
|
|
border-right: 1px solid #cbd1df;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
padding-left: 40px;
|
|
min-width: 200px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&: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 {
|
|
text-align: center;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding: 10px 25px;
|
|
height: 25px;
|
|
border-radius: 5px;
|
|
background-color: #3d4258;
|
|
box-shadow: 1px 1px 10px #ccc;
|
|
color: #fff;
|
|
line-height: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-data {
|
|
height: calc(100% - 145px);
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
:deep() {
|
|
.tabs-option {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|