湖里大屏(进度计划):新增甘特图进度条

This commit is contained in:
Jack 2022-08-09 14:12:44 +08:00
parent b966a7727e
commit e8ef6bf8cc

View File

@ -30,6 +30,7 @@
<div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div> <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
</div> </div>
</div> </div>
<div class="progress"></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">
@ -41,6 +42,7 @@
<div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div> <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
</div> </div>
</div> </div>
<div class="progress"></div>
</div> </div>
</div> </div>
</div> </div>
@ -69,16 +71,16 @@ export default {
projects: [ projects: [
{ {
pName: '地基与基础工程', pName: '地基与基础工程',
startTime: '2020/04', startTime: '2020/04/06',
endTime: '2020/05', endTime: '2020/05/09',
gantts: [{ startTime: '', endTime: '', status: '' }], gantts: [{ startTime: '', endTime: '', status: '' }],
children: [ children: [
{ pName: '无支护土方工程', startTime: '2020/04', endTime: '2020/05' }, { pName: '无支护土方工程', startTime: '2020/04', endTime: '2020/05' },
{ pName: '有支护土方工程', startTime: '2020/04', endTime: '2020/05' } { pName: '有支护土方工程', startTime: '2020/04', endTime: '2020/05' }
] ]
}, },
{ pName: '主体结构', startTime: '2020/03', endTime: '2020/06' }, { pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04' },
{ pName: '建筑装饰装修', startTime: '2020/04', endTime: '2020/07' } { pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30' }
], ],
openedIndex: 9999 openedIndex: 9999
} }
@ -200,6 +202,7 @@ export default {
cursor: pointer; cursor: pointer;
} }
.row { .row {
position: relative;
display: flex; display: flex;
.td { .td {
flex-shrink: 0; flex-shrink: 0;
@ -233,6 +236,14 @@ export default {
width: 400px; width: 400px;
} }
} }
.progress {
flex-shrink: 0;
position: absolute;
top: calc(50% - 7px);
width: 20px;
height: 14px;
background: pink;
}
} }
.children { .children {
display: none; display: none;