代码提交

src/views/modelScreenComponents.vue

@@ -92,12 +92,18 @@
               {{ item.c4 }}
             </div>
           </div>
-        <div class="lineBox">
+          <div class="lineBox" :style="'width:' + jinduList * 20 + '%;'">
-          <!-- <el-progress :text-inside="true" status="success" :stroke-width="9" :percentage="70" style="z-index:10"></el-progress> -->
+            <el-progress
+              :text-inside="true"
+              status="success"
+              :show-text="false"
+              :stroke-width="9"
+              :percentage="progress"
+              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>