Merge branch 'dev-jack' into shenzhen-dev
This commit is contained in:
Jack
commit
5628ba8033
@ -1,42 +1,320 @@
|
||||
<template>
|
||||
<!-- 甘特图 -->
|
||||
<div class="container">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
|
||||
</div>
|
||||
<Card :title="title">
|
||||
<div class="gantt-chart">
|
||||
<div class="table">
|
||||
<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 dates" :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 dates" :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="{ left: gantt.left, width: gantt.width }" v-for="(gantt, index) in p.gantts" :key="index"></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 dates" :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="{ left: gantt.left, width: gantt.width }"
|
||||
v-for="(gantt, index) in child.gantts"
|
||||
:key="index"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
|
||||
components: { Card },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "default title"
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.getDays('2022/09'), '到')
|
||||
},
|
||||
mounted() {
|
||||
this.setGantts()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
dates: ['2020/03', '2020/04', '2020/05', '2020/06', '2020/07', '2020/08'],
|
||||
projects: [
|
||||
{
|
||||
pName: '地基与基础工程',
|
||||
startTime: '2020/04/06',
|
||||
endTime: '2020/05/09',
|
||||
gantts: [],
|
||||
// gantts: [{ left: '420px', width: '100px', status: '' }],
|
||||
children: [
|
||||
{ pName: '无支护土方工程', startTime: '2020/04/06', endTime: '2020/04/09', gantts: [] },
|
||||
{ pName: '有支护土方工程', startTime: '2020/04/10', endTime: '2020/05/08', gantts: [] }
|
||||
]
|
||||
},
|
||||
{ pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04' },
|
||||
{ pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30', gantts: [] }
|
||||
],
|
||||
openedIndex: 9999
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setGantts() {
|
||||
const configGantts = projects => {
|
||||
projects.map(project => {
|
||||
let { startTime, endTime, pName, gantts } = 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')
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
const gantt = { left: startLeft + 'px', width: ganttWidth + 'px' }
|
||||
if (gantts) {
|
||||
gantts.push(gantt)
|
||||
} else {
|
||||
project.gantts = [gantt]
|
||||
}
|
||||
|
||||
console.log(startLeft, ganttWidth, '丢雷', `${pName}-${endTime}`)
|
||||
|
||||
// debugger
|
||||
project.children && configGantts(project.children)
|
||||
})
|
||||
}
|
||||
configGantts(this.projects)
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
.gantt-chart {
|
||||
height: 100%;
|
||||
border: 1px solid #0081c3;
|
||||
|
||||
.titleTxt {
|
||||
font-size: 18px;
|
||||
color: #6ee4f0;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
.table {
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
.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;
|
||||
}
|
||||
&: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;
|
||||
&::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 {
|
||||
&::before {
|
||||
border-left-color: transparent;
|
||||
border-top-color: #5be1f4;
|
||||
}
|
||||
.children {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> .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: pink;
|
||||
}
|
||||
}
|
||||
.children {
|
||||
display: none;
|
||||
.td {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user