元素替换优化

ui/src/views/front/ethyleneTank.vue

@@ -13,7 +13,59 @@
         </div>
       </div>
       <div :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;text-align: center; display: flex;justify-content: center;margin-top: 10px;align-items: center;height: 80%;' :'text-align: center; display: flex;justify-content: center;margin-top: 10px;align-items: center;height: 80%;'">
-        <div style="position: relative;">
+        <div class="cylindrical6">
+            <div class="cylindrical6-container pos1 "> 
+                <div class="word">STT 1061</div>
+              <!-- 进度条 -->
+                <div class="progress-bar">
+                    <div class="progress-bar-inner bg1" :style="'width:100%'"></div>
+                    <!-- 数值 -->
+                     <div class="progress-bar-num"  :style="'left: 75%;'">200</div>
+                </div>
+            </div>
+
+            <div class="cylindrical6-container pos2 "> 
+                <div class="word">STT 1062</div>
+              <!-- 进度条 -->
+                <div class="progress-bar">
+                    <div class="progress-bar-inner bg2" :style="'width:100%'"></div>
+                    <!-- 数值 -->
+                     <div class="progress-bar-num"  :style="'left: 75%;'">200</div>
+                </div>
+            </div>
+
+            <div class="cylindrical6-container pos3 "> 
+                <div class="word">STT 1063</div>
+              <!-- 进度条 -->
+                <div class="progress-bar">
+                    <div class="progress-bar-inner bg1" :style="'width:100%'"></div>
+                    <!-- 数值 -->
+                     <div class="progress-bar-num"  :style="'left: 75%;'">200</div>
+                </div>
+            </div>
+
+            <div class="cylindrical6-container pos4 "> 
+                <div class="word">STT 1064</div>
+              <!-- 进度条 -->
+                <div class="progress-bar">
+                    <div class="progress-bar-inner bg2" :style="'width:100%'"></div>
+                    <!-- 数值 -->
+                     <div class="progress-bar-num"  :style="'left: 75%;'">200</div>
+                </div>
+            </div>
+
+            <div class="cylindrical6-container pos5 "> 
+                <div class="word">STT 1065</div>
+              <!-- 进度条 -->
+                <div class="progress-bar">
+                    <div class="progress-bar-inner bg2" :style="'width:100%'"></div>
+                    <!-- 数值 -->
+                     <div class="progress-bar-num"  :style="'left: 75%;'">200</div>
+                </div>
+            </div>
+
+        </div>
+        <!-- <div style="position: relative;">
             <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;" v-if="0<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<20">
             <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;" v-if="20<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<40">
             <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;" v-if="40<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<60">
@@ -58,7 +110,7 @@
           <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;" v-if="80<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<100">
           <span class="modelTop pos">STT1065</span>
           <span class="ModelFont">{{ dashboarddata.ehtFive }}%</span>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -125,4 +177,89 @@ export default {
       }
     }
   }
+  .cylindrical6{
+    background: url("../../assets/image/cylindrical6.png");
+    width: 70%;
+    height: 90%;
+    background-size: 100% 100%;
+    margin: 0 auto;
+    position: relative;
+    .word{
+      color: #0c0d9f;
+      font-size: 12px;
+      font-weight: bold;
+    }
+    .cylindrical6-container{
+      width:20%;
+      position: absolute;
+      &.pos1{
+        top: 13%;
+        left: 8%;
+      }
+
+      &.pos2{
+        top: 67%;
+        left: 8%;
+        .progress-bar{
+          margin-top:2px;
+        }
+      }
+
+       &.pos3{
+        top:11%;
+        left: 44.7%;
+        .progress-bar{
+          margin-top:2px;
+        }
+      }
+
+       &.pos4{
+        top:67%;
+        left: 44.4%;
+        .progress-bar{
+          margin-top:4px;
+        }
+      }
+
+      &.pos5{
+        top:37.7%;
+        left: 73.4%;
+        .progress-bar{
+          margin-top:4px;
+        }
+      }
+    }
+    // 进度条
+    .progress-bar{ 
+      width: 100%;
+      height: 4px;
+      margin-top:1px;
+      .progress-bar-inner{
+        height: 100%;
+        border-radius: 5px;
+        &.bg1{
+          background: #f87409;
+
+        }
+        &.bg2{
+          background: #008aff;
+
+        }
+      }
+    }
+    // 数值
+    .progress-bar-num{ 
+      font-size:8px;
+      color: #ffffff;
+      text-align: center;
+      background: #003473;
+      border:1px solid #4b9afd;
+      width: 20px;
+      height: 10px;
+      border-radius: 5px;
+      position: absolute;
+      top:60%;
+  
+    }
+  }
 </style>

ui/src/views/front/productTank.vue

@@ -12,7 +12,7 @@
           </div>
         </div>
       </div>
-      <div :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;display:flex; align-items: center;justify-content: center;width: 100%;height: 90%;' :'display:flex; align-items: center;justify-content: center;width: 100%;height: 90%;'">
+      <div :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;display:flex; align-items: center;justify-content: center;width: 100%;height: 78%;' :'display:flex; align-items: center;justify-content: center;width: 100%;height: 78%;'">
         <div style="float: left;position: relative">
           <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="0<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<20">
           <img src="@/assets/image/warehouse2.png" style="height: 124px;margin-top: 0.3rem" v-if="20<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<40">