1.修改系统监控流程图

2.系统监控页面kwh与mkwh的转换
3.修改三通阀部分内容

src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue

@@ -62,7 +62,9 @@
             alt=""
           />
           <div>热回收总量:</div>
-          <div class="hot-data">{{ hotData.totalHeatRecoverySum }}kwh</div>
+          <div class="hot-data">
+            {{ formatHeatValue(hotData.totalHeatRecoverySum) }}
+          </div>
         </div>
         <div class="hot-li">
           <img
@@ -72,7 +74,7 @@
           />
           <div>离心机热量回收:</div>
           <div class="hot-data">
-            {{ hotData.centrifugalHeatRecoverySum }}kwh
+            {{ formatHeatValue(hotData.centrifugalHeatRecoverySum) }}
           </div>
         </div>
         <div class="hot-li">
@@ -83,7 +85,7 @@
           />
           <div>后处理及MD热量回收:</div>
           <div class="hot-data">
-            {{ hotData.postProcessingAndMdHeatRecoverySum }}kwh
+            {{ formatHeatValue(hotData.postProcessingAndMdHeatRecoverySum) }}
           </div>
         </div>
         <div class="hot-li">
@@ -93,7 +95,9 @@
             alt=""
           />
           <div>水源热泵热量:</div>
-          <div class="hot-data">{{ hotData.waterSourceHeatPumpSum }}kwh</div>
+          <div class="hot-data">
+            {{ formatHeatValue(hotData.waterSourceHeatPumpSum) }}
+          </div>
         </div>
       </div>
       <!-- 标题 -->
@@ -107,7 +111,6 @@
       <div class="text text8">低温水板换</div>
       <div class="text text9">冷却水板换</div>
       <div class="text text10">二通阀</div>
-      <div class="text text11">三通阀</div>
       <div class="text text12">后冷却器</div>
       <div class="text text13">吸干机</div>
       <div class="text text14">保障冷却器</div>
@@ -157,15 +160,6 @@
         热量表7
       </div>
 
-      <!-- 可点击区域 -->
-      <div
-        class="text click2"
-        @click="controlValve(valveOneArr, '二通阀门')"
-      ></div>
-      <div
-        class="text click1"
-        @click="controlValve(valveTwoArr, '三通阀门')"
-      ></div>
       <!-- 数据 -->
       <!-- 压力传感器0-12号 -->
       <div class="text pres0">
@@ -291,10 +285,22 @@
       <div class="text valve1">
         {{ getHotMeterTemp(valveOneArr, "开度反馈", 4) }}%
       </div>
+      <!-- 可点击区域 -->
+      <div
+        class="text click2"
+        @click="controlValve(valveOneArr, '二通阀门')"
+      ></div>
       <!-- 三通阀门 -->
-      <div class="text valve2">
+      <img :src="getThreeWaySrc" :class="['text', openPercent <= 0 ? 'three-way-less' : 'three-way']" alt="" />
-        {{ getHotMeterTemp(valveTwoArr, "开度反馈", 4) }}%
+      <div :class="['text', openPercent <= 0 ? 'text11' : 'text18']">三通阀</div>
+      <div class="text valve2">{{ openPercent }}%</div>
+      <div v-if="openPercent > 0 && openPercent < 100" class="text valve3">
+        {{ 100 - openPercent }}%
       </div>
+      <div
+        :class="['text', openPercent <= 0 ? 'click3' : 'click4']"
+        @click="controlValve(valveTwoArr, '三通阀门')"
+      ></div>
     </div>
     <!-- 控制弹框内容 -->
     <el-dialog
@@ -306,15 +312,15 @@
     >
       <div class="hot-list">
         <div class="hot-data">
-          <div class="hot-text">进水温度：</div>
+          <div class="hot-text">回水温度：</div>
           <div class="hot-details">
-            {{ getHotMeterTemp(hotDialogArr, "进水温度", 12) }}℃
+            {{ getHotMeterTemp(hotDialogArr, "出水温度", 12) }}℃
           </div>
         </div>
         <div class="hot-data">
-          <div class="hot-text">出水温度：</div>
+          <div class="hot-text">供水温度：</div>
           <div class="hot-details">
-            {{ getHotMeterTemp(hotDialogArr, "出水温度", 12) }}℃
+            {{ getHotMeterTemp(hotDialogArr, "进水温度", 12) }}℃
           </div>
         </div>
         <div class="hot-data">
@@ -332,7 +338,7 @@
         <div class="hot-data">
           <div class="hot-text">热能量累积量：</div>
           <div class="hot-details">
-            {{ getHotMeterTemp(hotDialogArr, "累积热量", 47) }}kwh
+            {{ formatHeatValue(getHotMeterTemp(hotDialogArr, "累积热量", 47)) }}
           </div>
         </div>
       </div>
@@ -396,6 +402,21 @@ export default {
       const weekDay = weekDays[this.currentDate.getDay()];
       return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
     },
+    openPercent() {
+      // 三通阀百分比数值
+      // return 100;
+      return Number(this.getHotMeterTemp(this.valveTwoArr, "开度反馈", 4));
+
+    },
+    getThreeWaySrc() {
+      if (this.openPercent <= 0) {
+        return require("../../../assets/images/three-way-less.png");
+      } else if (this.openPercent >= 100) {
+        return require("../../../assets/images/three-way-greater.png");
+      } else {
+        return require("../../../assets/images/three-way-between.png");
+      }
+    },
   },
   mounted() {
     this.getAlarnStatus();
@@ -493,6 +514,13 @@ export default {
         }
       });
     },
+    formatHeatValue(value) {
+      // 判断数值大于1万的时候转成mkwh单位，1万kwh = 0.01mkwh，按需保留小数
+      if (value > 10000) {
+        return `${(value / 10000).toFixed(2)}mkwh`;
+      }
+      return `${value}kwh`;
+    },
     // 工艺流程图数据
     getMonitorList() {
       let data = {
@@ -1001,6 +1029,11 @@ export default {
       left: 11.5rem;
       font-size: 0.14rem;
     }
+    .text18 {
+      top: 5.1rem;
+      left: 11.5rem;
+      font-size: 0.14rem;
+    }
     .text12 {
       top: 7.7rem;
       left: 6.4rem;
@@ -1142,14 +1175,14 @@ export default {
       color: #ffffff;
     }
     .intem2 {
-      top: 3.25rem;
+      top: 2.35rem;
       left: 6rem;
-      color: #16cb64;
+      color: #ef4317;
     }
     .outtem2 {
-      top: 2.35rem;
+      top: 3.25rem;
       left: 6rem;
-      color: #ef4317;
+      color: #16cb64;
     }
     .nowhot2 {
       top: 2.85rem;
@@ -1157,14 +1190,14 @@ export default {
       color: #ffffff;
     }
     .intem3 {
-      top: 4.7rem;
+      top: 3.9rem;
       left: 6rem;
-      color: #16cb64;
+      color: #ef4317;
     }
     .outtem3 {
-      top: 3.9rem;
+      top: 4.7rem;
       left: 6rem;
-      color: #ef4317;
+      color: #16cb64;
     }
     .nowhot3 {
       top: 4.3rem;
@@ -1173,13 +1206,13 @@ export default {
     }
     .intem4 {
       top: 5.3rem;
-      left: 3rem;
+      left: 1.2rem;
-      color: #16cb64;
+      color: #ef4317;
     }
     .outtem4 {
       top: 5.3rem;
-      left: 1.2rem;
+      left: 3rem;
-      color: #ef4317;
+      color: #16cb64;
     }
     .nowhot4 {
       top: 5.33rem;
@@ -1188,13 +1221,13 @@ export default {
     }
     .intem5 {
       top: 7.7rem;
-      left: 12.75rem;
+      left: 11.1rem;
-      color: #16cb64;
+      color: #ef4317;
     }
     .outtem5 {
       top: 7.7rem;
-      left: 11.1rem;
+      left: 12.75rem;
-      color: #ef4317;
+      color: #16cb64;
     }
     .nowhot5 {
       top: 7.7rem;
@@ -1204,12 +1237,12 @@ export default {
     .intem6 {
       top: 8.8rem;
       left: 10.5rem;
-      color: #16cb64;
+      color: #ef4317;
     }
     .outtem6 {
       top: 8rem;
       left: 10.5rem;
-      color: #ef4317;
+      color: #16cb64;
     }
     .nowhot6 {
       top: 8.4rem;
@@ -1219,12 +1252,13 @@ export default {
     .intem7 {
       top: 6rem;
       left: 13.4rem;
-      color: #16cb64;
+      color: #ef4317;
     }
+
     .outtem7 {
       top: 6rem;
       left: 15.1rem;
-      color: #ef4317;
+      color: #16cb64;
     }
     .nowhot7 {
       top: 6rem;
@@ -1232,18 +1266,45 @@ export default {
       color: #ffffff;
     }
     .valve1 {
-      top: 5.57rem;
+      top: 5.37rem;
-      left: 10.5rem;
+      left: 4.9rem;
       color: #ffffff;
       cursor: pointer;
     }
     .valve2 {
-      top: 5.37rem;
+      top: 5.55rem;
-      left: 4.9rem;
+      left: 10.5rem;
+      color: #ffffff;
+      cursor: pointer;
+    }
+    .valve3 {
+      top: 4.55rem;
+      left: 12.2rem;
       color: #ffffff;
       cursor: pointer;
     }
-    .click1 {
+    .three-way {
+      top: 4.4rem;
+      left: 9.2rem;
+      width: 4.38rem;
+      height: 1.78rem;
+    }
+    .three-way-less {
+      top: 4.7rem;
+      left: 9.2rem;
+      width: 4.39rem;
+      height: 1.47rem;
+    }
+    .click2 {
+      width: 0.8rem;
+      height: 0.8rem;
+      top: 4.9rem;
+      left: 3.93rem;
+      // background: #eaf12a;
+      cursor: pointer;
+      z-index: 999;
+    }
+    .click3 {
       width: 0.8rem;
       height: 0.8rem;
       top: 5rem;
@@ -1252,11 +1313,11 @@ export default {
       cursor: pointer;
       z-index: 999;
     }
-    .click2 {
+    .click4 {
       width: 0.8rem;
       height: 0.8rem;
-      top: 4.9rem;
+      top: 4.5rem;
-      left: 3.95rem;
+      left: 11.33rem;
       // background: #eaf12a;
       cursor: pointer;
       z-index: 999;

src/views/index.vue

@@ -103,7 +103,7 @@
         </div>
         <div class="overview">
           <div class="overview-li" @click="goEnergy">
-            <div>生产积累热量</div>
+            <div>生产累计热量</div>
             <div class="overview-details">
               {{ heatData.productionHeatSum }}kwh
             </div>