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 class="tbody">
<div class="row" v-for="p in projects" :key="p.pName">
<div class="td">{{ p.pName }}</div>
<div class="td">{{ p.startTime }}</div>
<div class="td">{{ p.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 class="row-groups open" v-for="p in projects" :key="p.pName">
<div class="row">
<div class="td">{{ p.pName }}</div>
<div class="td">{{ p.startTime }}</div>
<div class="td">{{ p.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 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>
@ -53,7 +67,15 @@ export default {
return {
dates: ['2020/04', '2020/05'],
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/04', endTime: '2020/07' }
]
@ -97,46 +119,40 @@ export default {
</script>
<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 {
.table {
.thead {
background-color: #163549;
border-bottom: 1px solid #234d5f;
.row();
.td {
height: 42px;
line-height: 42px;
.date {
line-height: 21px;
border-left: 1px solid #234d5f;
.month {
border-bottom: 1px solid #234d5f;
}
.days {
display: flex;
.day {
flex: 1;
.row {
display: flex;
.td {
box-sizing: border-box;
height: 42px;
line-height: 42px;
.date {
line-height: 21px;
border-left: 1px solid #234d5f;
.month {
border-bottom: 1px solid #234d5f;
}
.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 {
background-color: #0a1b2f;
border-left: 1px solid #234d5f;
.row();
.td {
height: 40px;
line-height: 40px;
font-size: 14px;
border-right: 1px solid #234d5f;
border-bottom: 1px solid #234d5f;
.grids {
height: 100%;
.row-groups {
position: relative;
&::before {
content: '';
position: absolute;
left: 26px;
top: 16px;
width: 0;
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;
.grid {
flex: 1;
height: 100%;
&:not(:last-child) {
border-right: 1px solid #234d5f;
.td {
box-sizing: border-box;
height: 42px;
line-height: 42px;
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;
}
}
}