管道

ui/src/views/front/steamBalance.vue

@@ -9,6 +9,106 @@
           <span class="fs-xl text mx-2">蒸汽平衡表</span>
         </div>
       </div>
+
+      <div style="text-align: center; background-color: rgba($color: #ffffff, $alpha: 0.3);
+        height: 100%;position: relative;">
+
+        <div class="lu1-1">
+          <p class="num1-1">376</p>
+          <img src="@/assets/steamImg/1.png" style="width:85px;height:90px">
+          <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:190px;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:160px;height:90px">
+          <p class="word1-1">K300</p>
+        </div>
+
+        <!-- 管道 -->
+        <div class="guan1">
+          <img src="@/assets/steamImg/8.png" style="width:1065px;height:29px">
+        </div>
+
+        <div class="lu2-1">
+          <img src="@/assets/steamImg/4.png" style="width:85px;height:100px">
+          <p class="word1-1">SUB</p>
+        </div>
+
+        <div class="lu2-2">
+          <img src="@/assets/steamImg/4.png" style="width:85px;height:100px">
+          <p class="word1-1">AUE/PGE</p>
+        </div>
+
+        <div class="lu2-3">
+          <p class="num1-1">1</p>
+          <img src="@/assets/steamImg/2.png" style="width:160px;height:40px">
+          <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:160px;height:40px">
+          <p class="word1-1">H520/C32</p>
+        </div>
+
+         <div class="lu2-5">
+          <img src="@/assets/steamImg/5.png" style="width:83px;height:45px">
+          <p class="word1-1">PH2</p>
+        </div>
+
+         <div class="lu2-6">
+          <img src="@/assets/steamImg/5.png" style="width:83px;height:45px">
+          <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:160px;height:90px">
+          <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:160px;height:90px">
+          <p class="word1-1">K650</p>
+        </div>
+
+        <div class="lu2-9">
+          <img src="@/assets/steamImg/6.png" style="width:30px;height:145px">
+          <p class="word1-1">Flare</p>
+        </div>
+
+        <div class="lu2-10">
+          <img src="@/assets/steamImg/4.png" style="width:85px;height:100px">
+          <p class="word1-1">SCTU</p>
+        </div>
+
+        <div class="lu2-11">
+          <p class="num1-1">36<br>46</p>
+          <img src="@/assets/steamImg/2.png" style="width:160px;height:40px">
+          <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:120px;height:70px">
+          <p class="word1-1">vacuum ejectors</p>
+        </div>
+
+
+        <div class="lu3-1">
+          <img src="@/assets/steamImg/2.png" style="width:160px;height:40px">
+        </div>
+
+      </div>
   </div>
 </template>
 
@@ -33,7 +133,110 @@
 
 <style lang="scss">
 #steamBalance{
-  width: 1200px;
+  width: 1270px;
   height: 750px;
+  .lu1-1{
+    position: absolute;
+   top: 24px;
+    left: 30px;
+  }
+  .lu1-2{
+    position: absolute;
+    top: 60px;
+    left: 680px;
+  }
+
+  .lu1-3{
+    position: absolute;
+    top: 30px;
+    left: 960px;
+  }
+  .lu2-1{
+    position: absolute;
+    top: 290px;
+    left: 30px;
+  }
+  .lu2-2{
+    position: absolute;
+    top: 210px;
+    left: 260px;
+  }
+  .lu2-3{
+    position: absolute;
+    top: 200px;
+    left: 500px;
+  }
+  .lu2-4{
+    position: absolute;
+    top: 200px;
+    left: 700px;
+  }
+  .lu2-5{
+    position: absolute;
+    top: 330px;
+    left: 540px;
+  }
+  .lu2-6{
+    position: absolute;
+    top: 330px;
+    left: 720px;
+  }
+
+  .lu2-7{
+    position: absolute;
+    top: 240px;
+    left: 900px;
+  }
+
+  .lu2-8{
+    position: absolute;
+    top: 240px;
+    left: 1060px;
+  }
+  .lu2-9{
+    position: absolute;
+    top: 380px;
+    left: 260px;
+  }
+
+  .lu2-10{
+    position: absolute;
+    top: 420px;
+    left: 350px;
+  }
+
+  .lu2-11{
+    position: absolute;
+    top: 420px;
+    left: 500px;
+  }
+
+  .lu2-12{
+    position: absolute;
+    top: 420px;
+    left: 900px;
+  }
+
+  .lu3-1{
+    position: absolute;
+    top: 630px;
+    left: 800px;
+  }
+
+  .num1-1{
+    color: #3993ae;
+    padding-bottom: 15px;
+  }
+  .word1-1{
+    color: #afc8ff;
+    font-size: 16px;
+    padding-top: 7px;
+  }
+
+  .guan1{
+    position: absolute;
+    top: 20px;
+    left: 130px;
+  }
 }
 </style>

ui/src/views/monitor/elec/index.vue

@@ -71,7 +71,7 @@
                 </div>
             </div>
             <div class="right" style="1270px">
-              <steam-banlance />
+              <steam-balance />
             </div>
           </div>
         </div>