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

src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue

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

src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue

@@ -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>

src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue

@@ -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;

src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/index.vue

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

src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue

@@ -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>
 

src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue

@@ -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>