代码提交

src/views/modelScreenComponents.vue

@@ -55,49 +55,55 @@
     <!-- :style="{ bottom: boxNone ? '166px' : '0' }"  -->
 
     <div :class="[boxNone ? 'centerBottom' : 'centerBottom2']">
-        <el-scrollbar>
+      <el-scrollbar>
-      <div class="centerBottom3">
+        <div class="centerBottom3">
-        <div class="boxChild" v-for="item in boxList">
+          <div class="boxChild" v-for="item in boxList">
-          <div>{{ item.c1 }}</div>
+            <div>{{ item.c1 }}</div>
-          <div>{{ item.c2 }}</div>
+            <div>{{ item.c2 }}</div>
-          <div
+            <div
-            v-if="item.c4 === '未开始'"
+              v-if="item.c4 === '未开始'"
-            :style="{
+              :style="{
-              'background-image': `url(${require(`../assets/pic/delay.png`)}`,
+                'background-image': `url(${require(`../assets/pic/delay.png`)}`,
-            }"
+              }"
-          ></div>
+            ></div>
-          <!-- <div v-else-if="item.c1 === '完工'" :style="{ 'background-image': `url(${require(`../assets/pic/no.png`)}` }">
+            <!-- <div v-else-if="item.c1 === '完工'" :style="{ 'background-image': `url(${require(`../assets/pic/no.png`)}` }">
           </div> -->
-          <div
+            <div
-            v-if="item.c4 === '实施中'"
+              v-if="item.c4 === '实施中'"
-            :style="{
+              :style="{
-              'background-image': `url(${require(`../assets/pic/no.png`)}`,
+                'background-image': `url(${require(`../assets/pic/no.png`)}`,
-            }"
+              }"
-          ></div>
+            ></div>
-          <!-- <div v-eles :style="{ 'background-image': `url(${require(`../assets/pic/finish.png`)}` }"></div> -->
+            <!-- <div v-eles :style="{ 'background-image': `url(${require(`../assets/pic/finish.png`)}` }"></div> -->
-          <div
+            <div
-            :style="{
+              :style="{
-              'background-image': `url(${require(`../assets/pic/finish.png`)}`,
+                'background-image': `url(${require(`../assets/pic/finish.png`)}`,
-            }"
+              }"
-          ></div>
+            ></div>
-          <div>{{ item.c3 }}</div>
+            <div>{{ item.c3 }}</div>
-          <div
+            <div
-            :style="{
+              :style="{
-              color:
+                color:
-                item.c4 == '逾期中' || item.c4 == '逾期完成'
+                  item.c4 == '逾期中' || item.c4 == '逾期完成'
-                  ? '#FFA700'
+                    ? '#FFA700'
-                  : '#00FFF6',
+                    : '#00FFF6',
-            }"
+              }"
-          >
+            >
-            {{ item.c4 }}
+              {{ item.c4 }}
+            </div>
+          </div>
+          <div class="lineBox" :style="'width:' + jinduList * 20 + '%;'">
+            <el-progress
+              :text-inside="true"
+              status="success"
+              :show-text="false"
+              :stroke-width="9"
+              :percentage="progress"
+              style="z-index: 10"
+            ></el-progress>
           </div>
         </div>
-        <div class="lineBox">
-          <!-- <el-progress :text-inside="true" status="success" :stroke-width="9" :percentage="70" style="z-index:10"></el-progress> -->
-        </div>
-      </div>
       </el-scrollbar>
-      
     </div>
 
     <!-- 左侧模块1 -->
@@ -357,6 +363,8 @@ export default {
   },
   data() {
     return {
+      jinduList:0, //计算进度条的宽度
+      progress:0, //计算进度条的值
       securityCheck: [], //安全检查统计
       introduction: "", //基本情况
       projectId: "", //项目Id
@@ -667,6 +675,20 @@ export default {
       getProjectStatus({
         projectId: this.projectId,
       }).then((res) => {
+        console.log(res.data.data,'==================');
+        this.jinduList = res.data.data.length
+          for(var i = 0; i < res.data.data.length; i++){
+              if (res.data.data[i].completionStatusValue == '正常完成') {
+                if (i==0) {
+                 this.progress = (i + 1) * 5
+                }else if (i+1 >= this.jinduList) {
+                  this.progress = 95
+                }else{
+                  this.progress = (i + 1) * 12.5
+                }
+              }
+          }
+          console.log(this.progress,'----------------');
         this.boxList = Object.keys(res.data.data).map((item, index) => {
           if (res.data.data[item].planEndTime != null) {
             res.data.data[item].planEndTime = res.data.data[
@@ -939,32 +961,33 @@ export default {
     bottom: 164px;
   }
 }
-.centerBottom3{
+.centerBottom3 {
   width: 100%;
   height: 100%;
   // display: flex;
   z-index: 999;
+  position: relative;
   display: -webkit-box;
   ::-webkit-scrollbar {
     display: none;
   }
 }
 .lineBox {
-  width: 810px;
+  // width: 100%;
   height: 9px;
   // background: #ffffff;
   // border-radius: 5px;
   // opacity: 0.5;
   position: absolute;
   top: 80px;
-  left: 20px;
+  // left: 20px;
   z-index: 10 !important;
 }
 
 .boxChild {
   // margin-left: 70px;
   text-align: center;
-  width: 140px !important;
+  width: 20% !important;
   height: 100%;
   z-index: 999 !important;
   // display: inline;
@@ -1689,10 +1712,10 @@ export default {
 /* element滚动条组件 隐藏水平滚动条 */
 /deep/.el-scrollbar__thumb {
   //可设置滚动条颜色
-  background: greenyellow;//这里我设置成了透明色,可以根据需求添加自己想要的颜色
+  background: rgb(55,142,136); //这里我设置成了透明色,可以根据需求添加自己想要的颜色
 }
-/deep/ .el-scrollbar__wrap{
+/deep/ .el-scrollbar__wrap {
-  margin-bottom:10px !important
+  margin-bottom: 10px !important;
 }
 </style>
 <style>