蒸汽锅炉界面优化

src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue

@@ -66,22 +66,46 @@
               {{ getStatusValue('DB611724') }}
             </div>
           </div>
+          <div class="runtime-div">
+            <div>设备运行时长</div>
+            <div class="fire-text">
+              {{ formatToOneDecimal(getStatusValue('DB8296')/60) }}小时
+            </div>
+          </div>
           <div class="other-div">
             <div class="other-li">
               <div>当前压力</div>
-              <div class="mpa">{{ getStatusValue('DB611500') }}Mpa</div>
+              <div class="mpa">{{ getStatusValue('DB611500') }} Mpa</div>
             </div>
             <div class="other-li">
               <div>设定压力</div>
-              <div class="mpa">{{ getStatusValue('DBW611598') }}Mpa</div>
+              <div class="mpa">{{ getStatusValue('DBW611598') }} Mpa</div>
             </div>
             <div class="other-li">
               <div>启动压差</div>
-              <div class="mpa">{{ getStatusValue('DBW611600') }}Mpa</div>
+              <div class="mpa">{{ getStatusValue('DBW611600') }} Mpa</div>
             </div>
             <div class="other-li">
               <div>停止压差</div>
-              <div class="mpa">{{ getStatusValue('DBW611602') }}Mpa</div>
+              <div class="mpa">{{ getStatusValue('DBW611602') }} Mpa</div>
+            </div>
+          </div>
+          <div class="flow-other-div">
+            <div class="other-li">
+              <div>温度瞬值</div>
+              <div class="mpa">{{ getStatusValue('PLC1500_DB8300') }} ℃</div>
+            </div>
+            <div class="other-li">
+              <div>压力瞬值</div>
+              <div class="mpa">{{ getStatusValue('PLC1500_DB8304') }} Mpa</div>
+            </div>
+            <div class="other-li">
+              <div>流量瞬值</div>
+              <div class="mpa">{{ getStatusValue('PLC1500_DB8308') }} t/h</div>
+            </div>
+            <div class="other-li">
+              <div>流量累计</div>
+              <div class="mpa">{{ getStatusValue('PLC1500_DB8320') }} t</div>
             </div>
           </div>
           <div></div>
@@ -97,7 +121,7 @@
           <img
             src="../../../assets/images/boilerWork.gif"
             class="boilerWork"
-            :style="{ display: getStatusValue('DB611724') > 0 ? 'block' : 'none' }"
+            :style="{ display: getStatusValue('DB611724') > 100 ? 'block' : 'none' }"
             alt=""
           />
           <!-- 锅炉侧边水位 -->
@@ -108,13 +132,13 @@
           <div class="mainValve">主阀</div>
           <img
             class="mainValve-img"
-            src="../../../assets/images/workValve.png"
+            :src="getStatusValue('DBB611639') > 1 ? require('../../../assets/images/workValve.png') : require('../../../assets/images/stopValve.png')"
             alt=""
           />
           <div class="auxiliaryValve">副阀</div>
           <img
             class="auxiliaryValve-img"
-            src="../../../assets/images/workValve.png"
+            :src="getStatusValue('DBB611640') > 1 ? require('../../../assets/images/workValve.png') : require('../../../assets/images/stopValve.png')"
             alt=""
           />
           <div class="fan-div">
@@ -303,6 +327,19 @@ export default {
     }
   },
   methods: {
+    // Format number to one decimal place
+    formatToOneDecimal(value) {
+      if (value === null || value === undefined) {
+        return null;
+      }
+      
+      const num = parseFloat(value);
+      if (isNaN(num)) {
+        return value;
+      }
+      
+      return num.toFixed(1);
+    },
     // Get status value from runDatas where mtNum = DB611658
     getStatusValue(mtNum) {
       if (!this.steamBoilerData.runDatas || !Array.isArray(this.steamBoilerData.runDatas)) {
@@ -630,7 +667,27 @@ export default {
           align-items: center;
           position: absolute;
           top: 0.1rem;
-          left: 8.6rem;
+          left: 7.4rem;
+          .other-li {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            margin-bottom: 0.1rem;
+            .mpa {
+              color: #eb6912;
+              font-weight: bold;
+              margin-left: 0.2rem;
+              text-align: center;
+            }
+          }
+        }
+        .flow-other-div {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: absolute;
+          top: 0.1rem;
+          left: 9.2rem;
           .other-li {
             display: flex;
             flex-direction: row;
@@ -774,7 +831,20 @@ export default {
           left: 2.3rem;
           .fire-text {
             margin-top: 0.06rem;
-            color: #fff;
+            color: #fa7217;
+            font-weight: bold;
+          }
+        }
+        .runtime-div {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: absolute;
+          top: 0.2rem;
+          left: 3.5rem;
+          .fire-text {
+            margin-top: 0.06rem;
+            color: #fa7217;
             font-weight: bold;
           }
         }
@@ -943,7 +1013,7 @@ export default {
           }
 
           .port-open::before {
-            background-color: blue;
+            background-color: rgb(16, 184, 24);
           }
 
           .port-close::before {