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-09 11:07:18 +08:00
parent 477b5a8cd1
commit 1173f00bf2
1 changed files with 115 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
src/views/projectAdmin/jlw/planProgress/centerTop.vue
View File

@ -20,13 +20,27 @@
</div> </div>
</div> </div>
<div class="tbody"> <div class="tbody">
<div class="row" v-for="p in projects" :key="p.pName"> <div class="row-groups open" v-for="p in projects" :key="p.pName">
<div class="td">{{ p.pName }}</div> <div class="row">
<div class="td">{{ p.startTime }}</div> <div class="td">{{ p.pName }}</div>
<div class="td">{{ p.endTime }}</div> <div class="td">{{ p.startTime }}</div>
<div class="td" v-for="date in dates" :key="date + 'grid-date'"> <div class="td">{{ p.endTime }}</div>
<div class="grids"> <div class="td" v-for="date in dates" :key="date + 'grid-date'">
<div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div> <div class="grids">
<div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
</div>
</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="day + 'grid'"></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -53,7 +67,15 @@ export default {
return { return {
dates: ['2020/04', '2020/05'], dates: ['2020/04', '2020/05'],
projects: [ projects: [
{ pName: '地基与基础工程', startTime: '2020/04', endTime: '2020/05' }, {
pName: '地基与基础工程',
startTime: '2020/04',
endTime: '2020/05',
children: [
{ 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', endTime: '2020/06' },
{ pName: '建筑装饰装修', startTime: '2020/04', endTime: '2020/07' } { pName: '建筑装饰装修', startTime: '2020/04', endTime: '2020/07' }
] ]
@ -97,46 +119,40 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.row() {
.row {
display: flex;
.td {
box-sizing: border-box;
&:nth-child(1) {
padding-left: 40px;
width: 200px;
}
&:not(:nth-child(1)) {
width: 100px;
text-align: center;
}
&:nth-child(n + 4) {
width: 400px;
}
}
}
}
.gantt-chart { .gantt-chart {
.table { .table {
.thead { .thead {
background-color: #163549; background-color: #163549;
border-bottom: 1px solid #234d5f; border-bottom: 1px solid #234d5f;
.row(); .row {
.td { display: flex;
height: 42px; .td {
line-height: 42px; box-sizing: border-box;
.date { height: 42px;
line-height: 21px; line-height: 42px;
border-left: 1px solid #234d5f; .date {
.month { line-height: 21px;
border-bottom: 1px solid #234d5f; border-left: 1px solid #234d5f;
} .month {
.days { border-bottom: 1px solid #234d5f;
display: flex;
.day {
flex: 1;
} }
.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;
} }
} }
} }
@ -144,22 +160,65 @@ export default {
.tbody { .tbody {
background-color: #0a1b2f; background-color: #0a1b2f;
border-left: 1px solid #234d5f; border-left: 1px solid #234d5f;
.row(); .row-groups {
.td { position: relative;
height: 40px; &::before {
line-height: 40px; content: '';
font-size: 14px; position: absolute;
border-right: 1px solid #234d5f; left: 26px;
border-bottom: 1px solid #234d5f; top: 16px;
.grids { width: 0;
height: 100%; height: 0;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #5be1f4;
}
&.open::before {
border-left-color: transparent;
border-top-color: #5be1f4;
}
> .row .td:first-child {
cursor: pointer;
}
.row {
display: flex; display: flex;
.grid { .td {
flex: 1; box-sizing: border-box;
height: 100%; height: 42px;
&:not(:last-child) { line-height: 42px;
border-right: 1px solid #234d5f; border-right: 1px solid #234d5f;
border-bottom: 1px solid #234d5f;
.grids {
height: 100%;
display: flex;
.grid {
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;
}
}
}
.children {
.td {
height: 38px;
line-height: 38px;
font-size: 14px;
} }
} }
} }