湖里大屏(进度计划):完成甘特图阶段进度条显示
This commit is contained in:
parent
335829ef8c
commit
1c1a01bbd8
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user