湖里大屏(进度计划):完成甘特图阶段进度条显示

This commit is contained in:
Jack 2022-08-10 14:26:52 +08:00
parent 335829ef8c
commit 1c1a01bbd8

View File

@ -30,7 +30,7 @@
<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 class="progress" :style="gantt" 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">
@ -42,12 +42,7 @@
<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 class="progress" :style="gantt" v-for="(gantt, index) in child.gantts" :key="index"></div>
</div>
</div>
</div>
@ -81,17 +76,19 @@ export default {
pName: '地基与基础工程',
startTime: '2020/04/06',
endTime: '2020/05/09',
status: 0,
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/04/06', endTime: '2020/04/09', status: 1 },
{ pName: '有支护土方工程', startTime: '2020/04/10', endTime: '2020/05/08', status: 3 }
]
},
{ pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04' },
{ pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30', gantts: [] }
{ pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04', status: 2 },
{ pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30', status: 1 }
],
openedIndex: 9999
openedIndex: 9999,
colors: ['#4C87FF', '#54CF8E', '#F2D026', '#FF6C7F']
}
},
methods: {
@ -125,7 +122,7 @@ export default {
const endLeft = endRef.offsetLeft
const ganttWidth = endLeft - startLeft + endWidth
const gantt = { left: startLeft + 'px', width: ganttWidth + 'px' }
const gantt = { left: startLeft + 'px', width: ganttWidth + 'px', background: this.colors[project.status] }
if (gantts) {
gantts.push(gantt)
} else {
@ -301,7 +298,7 @@ export default {
top: calc(50% - 7px);
width: 20px;
height: 14px;
background: pink;
background: #557dee;
}
}
.children {