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

湖里大屏(进度计划):进度总览 施工进度模块

Browse Source
This commit is contained in:
骆乐 2022-08-03 17:08:14 +08:00
parent 41e92e7735
commit 2cdc3bc512
7 changed files with 193 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/projectImg/numBgc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

3
src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue
View File

@ -211,6 +211,9 @@ export default {
margin-top: 5px;
margin-left: 5px;
}
.operateBar{
margin-left: 20px;
}
.operateBar{
margin-top: 20px;
}

106
src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<!-- 施工进度 -->
<div class="construct">
<div class="flex">
<div class="box">
<p class="title">基础工程</p>
<div class="imgStyle">
<img src="@/assets/images/projectImg/proGreen.png" />
</div>
<p class="timeText">开始时间：2022-01-01</p>
<p class="timeText">结束时间：2022-02-01</p>
</div>
<div class="box">
<p class="title">主体结构施工</p>
<div class="imgStyle">
<img src="@/assets/images/projectImg/proGreen.png" />
</div>
<p class="timeText">开始时间：2022-02-15</p>
<p class="timeText">结束时间：2022-04-23</p>
</div>
<div class="box">
<p class="title">屋面工程</p>
<div class="imgStyle">
<img src="@/assets/images/projectImg/proGreen.png" />
</div>
<p class="timeText">开始时间：2022-03-01</p>
<p class="timeText">结束时间：2022-05-20</p>
</div>
<div class="box">
<p class="title">机械设备安拆工程</p>
<div class="imgStyle">
<img src="@/assets/images/projectImg/proYellow.png" />
</div>
<p class="timeText">开始时间：2022-05-24</p>
<p class="timeText">结束时间：2022-06-30</p>
</div>
<div class="box">
<p>室内装饰装修工程</p>
<div class="imgStyle">
<img src="@/assets/images/projectImg/proGray.png" />
</div>
<p class="timeText">开始时间：2022-05-24</p>
<p class="timeText">结束时间：2022-06-30</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
}
</script>
<style lang="less" scoped>
.construct {
width: 100%;
height: 100%;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
.flex{
display: flex;
margin-top: 3%;
justify-content: center;
align-items: center;
.box{
text-align: center;
margin-right: 5.5%;
}
.title{
font-size: 14px;
position: relative;
}
.title::before{
content:'- - - - - - ';
position: absolute;
left: 120px;
width: 80px;
color: #465161;
}
.imgStyle{
margin: 20px;
width: 100px;
height: 70px;
// width: 20%;
// height:20%;
img{
margin-top: 20px;
}
}
.timeText{
font-size: 12px;
color: #465161;
}
}
}
</style>

9
src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue
View File

@ -1,14 +1,15 @@
<template>
<!-- 施工进度 -->
<div class="container">
<div class="containerBox">
<div class="titleTxt">{{ title }}</div>
<conProgress></conProgress>
</div>
</template>
<script>
import conProgress from '../jChart/pie/progress.vue'
export default {
components:{conProgress},
props: {
title: {
type: String,
@ -26,7 +27,7 @@ export default {
</script>
<style lang="less" scoped>
.container {
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;

2
src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue
View File

@ -17,7 +17,7 @@
<centerTop title="甘特图" />
</div>
<div class="centerBottom">
<centerTop title="施工进度" />
<centerBottom title="施工进度" />
</div>
</div>
</div>

73
src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue
View File

@ -1,13 +1,51 @@
<template>
<!-- 进度总览 -->
<div class="container">
<div class="containerBox">
<div class="titleTxt">{{ title }}</div>
<div class="content">
<div class="num">
679
<p>完成任务数</p>
</div>
<div class="num">
67%
<p>完成率</p>
</div>
<div class="num">
45
<p>延期天数</p>
</div>
</div>
<div class="charts">
<div class="chart">
<JRingChart title="89%" subTitle="总进度" :color="['#547ced','#162a51']"
:data="[
{ value: 7, name: '' },
{ value: 3, name: '' }
]"/>
</div>
<div class="chart">
<JRingChart title="89%" subTitle="总进度" :color="['#5be1f5','#193f54']"
:data="[
{ value: 3, name: '' },
{ value: 5, name: '' }
]"/>
</div>
<div class="chart">
<JRingChart title="89%" subTitle="总进度" :color="['#fe6b7e','#39273d']"
:data="[
{ value: 4, name: '' },
{ value: 6, name: '' }
]"/>
</div>
</div>
</div>
</template>
<script>
import JRingChart from '../jChart/pie/JRingChart.vue'
export default {
components: { JRingChart },
props: {
title: {
@ -26,7 +64,7 @@ export default {
</script>
<style lang="less" scoped>
.container {
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
@ -37,6 +75,35 @@ export default {
margin-top: 5px;
margin-left: 5px;
}
.content{
display: flex;
justify-content: center;
align-items: center;
margin-top:20px;
margin-left: 30px;
}
.num{
width: 88px;
line-height: 38px;
height: 38px;
text-align: center;
margin-right: 35px;
color: #47b1c4;
background-image: url(~@/assets/images/projectImg/numBgc.png);
p{
color: #d3d5d9;
font-size: 14px;
}
}
.charts {
padding: 10px 30px 0;
display: flex;
justify-content: space-around;
.chart {
width: 200px;
height: 200px;
}
}
}
</style>

36
src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue
View File

@ -2,7 +2,8 @@
<!-- 施工进度 -->
<div class="constructProgress">
<div class="titleTxt">{{ title }}</div>
<div class="flex">
<conProgress></conProgress>
<!-- <div class="flex">
<div class="box">
<p class="title">基础工程</p>
<div class="imgStyle">
@ -12,7 +13,7 @@
<p class="timeText">结束时间：2022-02-01</p>
</div>
<div class="box">
<p>主体结构施工</p>
<p class="title">主体结构施工</p>
<div class="imgStyle">
<img src="@/assets/images/projectImg/proGreen.png" />
</div>
@ -20,7 +21,7 @@
<p class="timeText">结束时间：2022-04-23</p>
</div>
<div class="box">
<p>屋面工程</p>
<p class="title">屋面工程</p>
<div class="imgStyle">
<img src="@/assets/images/projectImg/proGreen.png" />
</div>
@ -28,7 +29,7 @@
<p class="timeText">结束时间：2022-05-20</p>
</div>
<div class="box">
<p>机械设备安拆工程</p>
<p class="title">机械设备安拆工程</p>
<div class="imgStyle">
<img src="@/assets/images/projectImg/proYellow.png" />
</div>
@ -43,12 +44,14 @@
<p class="timeText">开始时间：2022-05-24</p>
<p class="timeText">结束时间：2022-06-30</p>
</div>
</div>
</div> -->
</div>
</template>
<script>
import conProgress from '../jChart/pie/progress.vue'
export default {
components:{conProgress},
data() {
return {
@ -75,28 +78,5 @@ export default {
margin-top: 5px;
margin-left: 5px;
}
.flex{
display: flex;
margin-top: 50px;
.box{
text-align: center;
margin-left: 40px;
}
.title{
font-size: 14px;
}
.imgStyle{
margin: 20px;
width: 100px;
height: 70px;
img{
margin-top: 20px;
}
}
.timeText{
font-size: 12px;
color: #465161;
}
}
}
</style>