admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jack 2022-08-10 14:26:52 +08:00
parent 335829ef8c
commit 1c1a01bbd8
1 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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