*

ui/src/views/front/steamBalance.vue

@@ -21,19 +21,16 @@
         </div>
 
         <div class="lu1-1">
-          <p class="num1-1">376</p>
           <img src="@/assets/steamImg/1.png" style="width:80px;height:86px">
           <p class="word1-1">Furnace</p>
         </div>
          
         <div class="lu1-2">
-          <p class="num1-1">1</p>
           <img src="@/assets/steamImg/2.png" style="width:170px;height:40px">
           <p class="word1-1">E-481</p>
         </div>
 
         <div class="lu1-3">
-          <!-- <p class="num1-1">369</p> -->
           <img src="@/assets/steamImg/3.png" style="width:130px;height:86px">
           <p class="word1-1">K300</p>
         </div>
@@ -49,13 +46,11 @@
         </div>
 
         <div class="lu2-3">
-          <p class="num1-1">1</p>
           <img src="@/assets/steamImg/2.png" style="width:145px;height:35px">
           <p class="word1-1">E-372</p>
         </div>
 
         <div class="lu2-4">
-          <p class="num1-1">2<br>0</p>
           <img src="@/assets/steamImg/2.png" style="width:145px;height:35px">
           <p class="word1-1">H520/C32</p>
         </div>
@@ -70,15 +65,12 @@
           <p class="word1-1">PH1</p>
         </div>
 
-
         <div class="lu2-7">
-          <p class="num1-1">169</p>
           <img src="@/assets/steamImg/3.png" style="width:130px;height:86px">
           <p class="word1-1">K600</p>
         </div>
 
          <div class="lu2-8">
-          <p class="num1-1">28</p>
           <img src="@/assets/steamImg/3.png" style="width:130px;height:86px">
           <p class="word1-1">K650</p>
         </div>
@@ -94,13 +86,11 @@
         </div>
 
         <div class="lu2-11">
-          <p class="num1-1">36<br>46</p>
           <img src="@/assets/steamImg/2.png" style="width:145px;height:35px">
           <p class="word1-1">E275/285</p>
         </div>
 
         <div class="lu2-12">
-          <p class="num1-1">2</p>
           <img src="@/assets/steamImg/7.png" style="width:100px;height:60px">
           <p class="word1-1">vacuum ejectors</p>
         </div>
@@ -132,44 +122,53 @@
         <!-- 箭头 -->
         <div class="jiantou1">
           <img src="@/assets/steamImg/jiantou1.png" style="width:72px;height:44px">
+          <p class="num">376</p>
         </div>
 
         <div class="jiantou2">
           <img src="@/assets/steamImg/jiantou2.png" style="width:8px;height:172px">
+           <p class="num">1</p>
         </div>
 
         <div class="jiantou3">
-          <p class="num">5</p>
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+          <p class="num">5</p>
         </div>
 
         <div class="jiantou4">
-          <p class="num">1</p>
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+          <p class="num">1</p>
         </div>
 
         <div class="jiantou5">
           <img src="@/assets/steamImg/jiantou4.png" style="width:8px;height:139px">
+          <p class="num">33</p>
         </div>
 
         <div class="jiantou6">
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:59px">
+          <p class="num">5</p>
         </div>
 
         <div class="jiantou7">
           <img src="@/assets/steamImg/jiantou5.png" style="width:8px;height:34px">
+          <p class="num">1</p>
         </div>
 
         <div class="jiantou8">
           <img src="@/assets/steamImg/jiantou5.png" style="width:8px;height:34px">
+           <p class="num">3 AEU</p>
+          <p class="num2">20 PGU</p>
         </div>
 
         <div class="jiantou9">
           <img src="@/assets/steamImg/jiantou6.png" style="width:31px;height:116px">
+           <p class="num">14</p>
         </div>
 
         <div class="jiantou10">
           <img src="@/assets/steamImg/jiantou7.png" style="width:39px;height:116px">
+          <p class="num">99</p>
         </div>
 
         <div class="jiantou11">
@@ -182,6 +181,7 @@
 
         <div class="jiantou13">
           <img src="@/assets/steamImg/jiantou8.png" style="width:54px;height:39px">
+          <p class="num">46</p>
         </div>
 
         <div class="jiantou14">
@@ -190,59 +190,81 @@
 
         <div class="jiantou15">
           <img src="@/assets/steamImg/jiantou10.png" style="width:41px;height:62px">
+          <p class="num">3 AEU</p>
+          <p class="num2">20 PGU</p>
         </div>
 
         <div class="jiantou16">
           <img src="@/assets/steamImg/jiantou11.png" style="width:77px;height:40px">
+          <p class="num">1</p>
         </div>
 
         <div class="jiantou17">
           <img src="@/assets/steamImg/jiantou12.png" style="width:22px;height:69px">
+          <p class="num">1</p>
         </div>
 
         <div class="jiantou18">
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+          <p class="num">37 AEU</p>
+          <p class="num2">3 PGU</p>
         </div>
 
         <div class="jiantou19">
-          <img src="@/assets/steamImg/jiantou14.png" style="width:8px;height:185px">
+          <img src="@/assets/steamImg/jiantou14.png" style="width:8px;height:210px">
+          <p class="num">0</p>
         </div>
 
         <div class="jiantou20">
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+          <p class="num">6</p>
         </div>
 
         <div class="jiantou21">
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+          <p class="num">2</p>
         </div>
 
         <div class="jiantou22">
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+          <p class="num">19</p>
         </div>
 
         <div class="jiantou23">
           <img src="@/assets/steamImg/jiantou13.png" style="width:111px;height:33px">
+           <p class="num">41</p>
         </div>
 
         <div class="jiantou24">
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+          <p class="num">50</p>
         </div>
 
         <div class="jiantou25">
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+          <p class="num">4</p>
         </div>
 
         <div class="jiantou26">
           <p class="num">369</p>
           <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
         </div>
+        <div class="jiantou27">
+          <img src="@/assets/steamImg/jiantou15.png" style="width:30px;height:76px">
+          <p class="num">37 AEU</p>
+          <p class="num2">3 PGU</p>
+        </div>
+
+        <div class="jiantou28">
+          <img src="@/assets/steamImg/jiantou3.png" style="width:8px;height:49px">
+        </div>
 
         <div class="kuang pos-1">
             <p>阀门</p>
         </div>
 
         <div class="kuang pos-2">
-            <p>p900</p>
+            <p>P900</p>
         </div>
 
         <div class="kuang pos-3">
@@ -276,42 +298,72 @@
         </div>
         <div class="jiantoulan pos-3">
           <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
+           <p class="num2">264</p>
         </div>
         <div class="jiantoulan pos-4">
           <img src="@/assets/steamImg/jiantoulan1.png" style="width:100px;height:31px">
+           <p class="num2">105</p>
+            <p class="name">SC</p>
         </div>
         <div class="jiantoulan pos-5">
           <img src="@/assets/steamImg/jiantoulan3.png" style="width:80px;height:347px">
         </div>
         <div class="jiantoulan pos-6">
           <img src="@/assets/steamImg/jiantoulan4.png" style="width:31px;height:150px">
+          <p class="num2">33</p>
         </div>
         <div class="jiantoulan pos-7">
           <img src="@/assets/steamImg/jiantoulan5.png" style="width:45px;height:251px">
+          <p class="num2">1</p>
         </div>
          <div class="jiantoulan pos-8">
           <img src="@/assets/steamImg/jiantoulan6.png" style="width:34px;height:89px">
+          <p class="num2">2</p>
         </div>
         <div class="jiantoulan pos-9">
           <img src="@/assets/steamImg/jiantoulan11.png" style="width:31px;height:75px">
+          <p class="num2">5.4</p>
         </div>
         <div class="jiantoulan pos-10">
           <img src="@/assets/steamImg/jiantoulan7.png" style="width:30px;height:46px">
         </div>
         <div class="jiantoulan pos-11">
           <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
+          <p class="num2">0.37</p>
         </div>
         <div class="jiantoulan pos-12">
           <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
+          <p class="num2">109</p>
         </div>
         <div class="jiantoulan pos-13">
           <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
+          <p class="num2">109</p>
         </div>
         <div class="jiantoulan pos-14">
           <img src="@/assets/steamImg/jiantoulan10.png" style="width:201px;height:64px">
+          <p class="num2">87</p>
+          <p class="num3">28</p>
+          <p class="name">SC</p>
         </div>
         <div class="jiantoulan pos-15">
           <img src="@/assets/steamImg/jiantoulan9.png" style="width:114px;height:127px">
+           <p class="num2">6</p>
+           <p class="num3">4.3</p>
+           <p class="num4">0/0</p>
+           <p class="num5">1.5</p>
+
+           <div class="pos15-word-box wordpos-1">
+              E363
+           </div>
+           <div class="pos15-word-box wordpos-2">
+              E560
+           </div>
+           <div class="pos15-word-box wordpos-3">
+              E470/E475
+           </div>
+           <div class="pos15-word-box wordpos-4">
+              E120/344/903/930
+           </div>
         </div>
 
       </div>
@@ -368,35 +420,78 @@
           top: 20px;
           left: 20px;
           color: #3659ab;
+          position: absolute;
         }
       }
       &.pos-3{
         top: 130px;
         left: 1030px;
+        .num2{
+          top: 20px;
+          left: 20px;
+          color: #3659ab;
+          position: absolute;
+        }
       }
       &.pos-4{
         top: 80px;
         left: 1090px;
+         .num2{
+          top: 0;
+          left: 35px;
+          color: #3659ab;
+          position: absolute;
+        }
+         .name{
+          top: -10px;
+          left: 70px;
+          color: #fff;
+          position: absolute;
+        }
       }
       &.pos-5{
         top: 200px;
-        left: 70px;
+        left: 52px;
       }
       &.pos-6{
         top: 400px;
         left: 190px;
+        .num2{
+          top: 50px;
+          left: 20px;
+          color: #3659ab;
+          position: absolute;
+        }
       }
       &.pos-7{
         top: 300px;
         left: 240px;
+        .num2{
+          top: 103px;
+          left: 22px; 
+          color: #3659ab;
+          position: absolute;
+        }
       }
       &.pos-8{
         top: 300px;
-        left: 340px;
+        left: 370px;
+        .num2{
+          top: 30px;
+          left: 25px;
+          color: #3659ab;
+          position: absolute;
+        }
       }
       &.pos-9{
         top: 300px;
         left: 470px;
+        .num2{
+          top: 20px;
+          left: 20px;
+          color: #3659ab;
+          position: absolute;
+        }
       }
       &.pos-10{
         top: 510px;
@@ -405,22 +500,106 @@
       &.pos-11{
         top: 500px;
         left: 520px;
+         .num2{
+          top: 14px;
+          left: 20px;
+          color: #3659ab;
+          position: absolute;
+        }
       }
       &.pos-12{
         top: 340px;
         left: 780px;
+        .num2{
+          top: 14px;
+          left: 20px;
+          color: #3659ab;
+          position: absolute;
+        }
       }
       &.pos-13{
         top: 340px;
         left: 940px;
+        .num2{
+          top: 8px;
+          left: 20px;
+          color: #3659ab;
+          position: absolute;
+        }
       }
       &.pos-14{
         top: 300px;
         left: 1020px;
+        .num2{
+          top: 30px;
+          left: 10px;
+          color: #3659ab;
+          position: absolute;
+        }
+        .num3{
+          top: 27px;
+          left: 110px;
+          color: #3659ab;
+          position: absolute;
+        }
+        .name{
+          top: 30px;
+          left: 173px;
+          color: #fff;
+          position: absolute;
+        }
       }
       &.pos-15{
         top: 580px;
         left: 820px;
+        .num2{
+          top: 0px;
+          left: 50px;
+          color: #3659ab;
+          position: absolute;
+        }
+        .num3{
+          top: 32px;
+          left: 46px;
+          color: #3659ab;
+          position: absolute;
+        }
+        .num4{
+          top: 62px;
+          left: 46px;
+          color: #3659ab;
+          position: absolute;
+        }
+        .num5{
+          top: 94px;
+          left: 46px;
+          color: #3659ab;
+          position: absolute;
+        }
+        .pos15-word-box{
+          background: url(../../assets/steamImg/12.png);
+          width: 150px;
+          height: 30px;
+          line-height: 30px;
+          background-size: 100% 100%;
+          position: absolute;
+          &.wordpos-1{
+            top: -2px;
+            left: 110px;
+          }
+          &.wordpos-2{
+            top: 32px;
+            left: 110px;
+          }
+          &.wordpos-3{
+            top: 67px;
+            left: 110px;
+          }
+          &.wordpos-4{
+            top: 101px;
+            left: 110px;
+          }
+        }
       }
   }
   .kuang{
@@ -475,10 +654,6 @@
     position: absolute;
     top: 60px;
     left: 40px;
-    .num1-1{
-      top: -20px;
-      left: 15px;
-    }
     .word1-1{
         bottom: -20px;
         left: 20px;
@@ -488,17 +663,29 @@
     position: absolute;
     top: 90px;
     left: 680px;
+    .word1-1{
+      left: 60px;
+      top: 30px;
+    }
   }
 
   .lu1-3{
     position: absolute;
     top: 70px;
     left: 960px;
+    .word1-1{
+      left: 80px;
+      top: 50px;
+    } 
   }
   .lu2-1{
     position: absolute;
     top: 330px;
     left: 30px;
+    .word1-1{
+      top: 75px;
+      left: 8px;
+    }
   }
   .lu2-2{
     position: absolute;
@@ -509,56 +696,94 @@
     position: absolute;
     top: 220px;
     left: 560px;
+    .word1-1{
+      left: 50px;
+      bottom: -13px;
+    }
   }
   .lu2-4{
     position: absolute;
     top: 220px;
     left: 740px;
+    .word1-1{
+      left: 40px;
+      bottom: -15px;
+    }
   }
   .lu2-5{
     position: absolute;
     top: 300px;
     left: 610px;
+    .word1-1{
+      bottom: -7px;
+    }
   }
   .lu2-6{
     position: absolute;
     top: 300px;
     left: 760px;
+    .word1-1{
+      bottom: -7px;
+    }
   }
 
   .lu2-7{
     position: absolute;
     top: 240px;
     left: 900px;
+    .word1-1{
+      left: 70px;
+      top: 53px;
+    }
   }
 
   .lu2-8{
     position: absolute;
     top: 240px;
     left: 1060px;
+    .word1-1{
+      left: 100px;
+      top: 53px;
+    }
   }
   .lu2-9{
     position: absolute;
     top: 380px;
-    left: 260px;
+    left: 272px;
+    .word1-1{
+      bottom: -18px;
+      left: -6px;
+    }
   }
 
   .lu2-10{
     position: absolute;
     top: 430px;
     left: 330px;
+    .word1-1{
+      left: 30px;
+      bottom: -14px;
+    }
   }
 
   .lu2-11{
     position: absolute;
     top: 450px;
     left: 460px;
+    .word1-1{
+      left: 35px;
+      bottom: -14px;
+    }
   }
 
   .lu2-12{
     position: absolute;
     top: 450px;
     left: 900px;
+    .word1-1{
+      left: -50px;
+      width: 200%;
+    }
   }
 
   .lu3-1{
@@ -606,11 +831,23 @@
     position: absolute;
     top: 10px;
     left: 80px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: -26px;
+      top: 20px;  
+    }
   }
   .jiantou2{
     position: absolute;
     top: 55px;
     left: 280px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 60px;
+    }
   }
   .jiantou3{
     position: absolute;
@@ -638,35 +875,79 @@
     position: absolute;
     top: 200px;
     left: 200px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 50px;
+    }
   }
    .jiantou6{
     position: absolute;
     top: 180px;
     left: 480px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 28px;
+    }
   }
 
   .jiantou7{
     position: absolute;
     top: 190px;
     left: 630px;
+     .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 10px;
+    }
   }
 
   .jiantou8{
     position: absolute;
     top: 190px;
     left: 800px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: -20px;
+      top: 4px;
+      width: 100px;
+    }
+    .num2{
+      color: #3694b0;
+      position: absolute;
+      left: -22px;
+      top: 20px;
+      width: 100px;
+    }
   }
 
   .jiantou9{
     position: absolute;
     top: 200px;
     left: 685px;
+     .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 70px;
+    }
   }
 
   .jiantou10{
     position: absolute;
     top: 200px;
     left: 725px;
+     .num{
+      color: #3694b0;
+      position: absolute;
+      left: 7px;
+      top: 70px;
+    }
   }
 
   .jiantou11{
@@ -685,77 +966,165 @@
     position: absolute;
     top: 430px;
     left: 10px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    }
   }
   .jiantou14{
     position: absolute;
     top: 420px;
-    left: 70px;
+    left: 75px;
   }
 
   .jiantou15{
     position: absolute;
     top: 350px;
     left: 320px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 0;
+      width: 100%;
+    }
+    .num2{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 20px;
+      width: 110%;
+    }
   }
 
   .jiantou16{
     position: absolute;
     top: 390px;
     left: 300px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 80px;
+      top: 15px;
+    }
   }
 
   .jiantou17{
     position: absolute;
     top: 400px;
     left: 400px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 80px;
+      top: 15px;
+    }
   }
 
   .jiantou18{
     position: absolute;
     top: 400px;
     left: 540px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: -20px;
+      top: 4px;
+      width: 100px;
+    }
+    .num2{
+      color: #3694b0;
+      position: absolute;
+      left: -22px;
+      top: 20px;
+      width: 100px;
+    }
   }
 
   .jiantou19{
     position: absolute;
-    top: 380px;
-    left: 620px;
+    top: 348px;
+    left: 658px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 90px;
+    }
   }
 
   .jiantou20{
     position: absolute;
     top: 400px;
     left: 750px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 20px;
+    }
   }
 
   .jiantou21{
     position: absolute;
     top: 400px;
     left: 940px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 20px;
+    }
   }
 
   .jiantou22{
     position: absolute;
     top: 400px;
     left: 1100px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 20px;
+    }
   }
 
   .jiantou23{
     position: absolute;
     top: 600px;
     left: 240px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 7px;
+    }
   }
 
   .jiantou24{
     position: absolute;
     top: 585px;
     left: 330px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 24px;
+    }
   }
 
   .jiantou25{
     position: absolute;
     top: 585px;
     left: 520px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 10px;
+      top: 20px;
+    }
   }
 
   .jiantou26{
@@ -770,5 +1139,29 @@
     }
   }
 
+  .jiantou27{
+    position: absolute;
+    top: 180px;
+    left: 340px;
+    .num{
+      color: #3694b0;
+      position: absolute;
+      left: 33px;
+      top: 33px;
+      width: 140%;
+    }
+    .num2{
+      color: #3694b0;
+      position: absolute;
+      left: 40px;
+      top: 50px;
+      width: 130%;
+    }
+  }
+  .jiantou28{
+    position: absolute;
+    top: 577px;
+    left: 770px;
+  }
 }
 </style>