对接生活冷水的数据

.env.development

@@ -7,9 +7,9 @@ ENV = 'development'
 # 开发环境
 # VUE_APP_BASE_API = '/dev-api'
 # 后台
-# VUE_APP_BASE_API = 'http://192.168.1.222:8080'
+VUE_APP_BASE_API = 'http://192.168.1.222:8080'
 # 梅州云端
-VUE_APP_BASE_API = 'http://106.55.173.225:8091'
+# VUE_APP_BASE_API = 'http://106.55.173.225:8091'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/views/hotWater/waterMonitor/waterMonitorDetails.vue

@@ -96,6 +96,7 @@
           />
           <div class="title-word">楼层：{{ currentName }}</div>
         </div>
+        <!-- 四个泵 -->
         <div class="folw" v-if="isShowHotWater">
           <!-- 动态流程图 -->
           <div class="changeimage">
@@ -576,10 +577,120 @@
             </el-table>
           </div>
         </div>
+        <!-- 三个泵 -->
         <div class="folw" v-else>
           <!-- 动态流程图 -->
           <div class="changeimage">
             <div class="flowimg">
+              <!-- 整体图 -->
+              <img
+                class="supply3"
+                src="../../../assets/flowimg/supply-move3.gif"
+                alt=""
+                v-if="
+                  [1, 2, '1', '2'].includes(threePumpObj.upWaterState1) ||
+                  [1, 2, '1', '2'].includes(threePumpObj.upWaterState2) ||
+                  [1, 2, '1', '2'].includes(threePumpObj.upWaterState3)
+                "
+              />
+              <img
+                class="supply3"
+                v-else
+                src="../../../assets/flowimg/supply-move3.png"
+                alt=""
+              />
+              <!-- 报警信号 -->
+              <img
+                class="warning"
+                src="../../../assets/images/warning.png"
+                alt=""
+                v-if="[1, '1'].includes(threePumpObj.isWarning)"
+              />
+              <div
+                class="flow-text warning-text"
+                v-if="[1, '1'].includes(threePumpObj.isWarning)"
+              >
+                当前有报警信号触发
+              </div>
+              <!-- 三个泵 -->
+              <!-- 泵1定位 -->
+              <img
+                class="coolpum1"
+                src="../../../assets/flowimg/startpum.png"
+                alt=""
+                v-if="[1, 2, '1', '2'].includes(threePumpObj.upWaterState1)"
+              />
+              <img
+                class="coolpum1"
+                v-else-if="[3, '3'].includes(threePumpObj.upWaterState1)"
+                src="../../../assets/flowimg/badpum.png"
+                alt=""
+              />
+              <img
+                class="coolpum1"
+                v-else
+                src="../../../assets/flowimg/closepum.png"
+                alt=""
+              />
+              <div class="pumpName1 flow-text">
+                泵1<span
+                  class="pumpHz flow-text"
+                  v-if="[1, 2, '1', '2'].includes(threePumpObj.upWaterState1)"
+                  >:{{ threePumpObj.upWaterState1.freq1 }}Hz</span
+                >
+              </div>
+              <!-- 泵2定位 -->
+              <img
+                class="coolpum2"
+                src="../../../assets/flowimg/startpum.png"
+                alt=""
+                v-if="[1, 2, '1', '2'].includes(threePumpObj.upWaterState2)"
+              />
+              <img
+                class="coolpum2"
+                v-else-if="[3, '3'].includes(threePumpObj.upWaterState2)"
+                src="../../../assets/flowimg/badpum.png"
+                alt=""
+              />
+              <img
+                class="coolpum2"
+                v-else
+                src="../../../assets/flowimg/closepum.png"
+                alt=""
+              />
+              <div class="pumpName2 flow-text">
+                泵2<span
+                  class="pumpHz flow-text"
+                  v-if="[1, 2, '1', '2'].includes(threePumpObj.upWaterState2)"
+                  >:{{ threePumpObj.upWaterState1.freq2 }}Hz</span
+                >
+              </div>
+              <!-- 泵3定位 -->
+              <img
+                class="coolpum3"
+                src="../../../assets/flowimg/startpum.png"
+                alt=""
+                v-if="[1, 2, '1', '2'].includes(threePumpObj.upWaterState3)"
+              />
+              <img
+                class="coolpum3"
+                v-else-if="[3, '3'].includes(threePumpObj.upWaterState3)"
+                src="../../../assets/flowimg/badpum.png"
+                alt=""
+              />
+              <img
+                class="coolpum3"
+                v-else
+                src="../../../assets/flowimg/closepum.png"
+                alt=""
+              />
+              <div class="pumpName3 flow-text">
+                泵3<span
+                  class="pumpHz flow-text"
+                  v-if="[1, 2, '1', '2'].includes(threePumpObj.upWaterState3)"
+                  >:{{ threePumpObj.upWaterState1.freq3 }}Hz</span
+                >
+              </div>
               <!-- 冷水水箱定位 -->
               <img
                 class="waterBox"
@@ -608,6 +719,15 @@
                 <div>最大值:3.2米</div>
                 <div>实际值:{{ progress1 }}米</div>
               </div>
+              <div class="flow-text inPressure">
+                入口压力:{{ threePumpObj.inPress }}bar
+              </div>
+              <div class="flow-text goalPressure">
+                目标压力:{{ threePumpObj.goalPress }}bar
+              </div>
+              <div class="flow-text outPressure">
+                出口压力:{{ threePumpObj.outPress }}bar
+              </div>
             </div>
           </div>
         </div>
@@ -669,6 +789,8 @@ export default {
       pumname: "",
       currentWeekday: "",
       isShowHotWater: false,
+
+      threePumpObj: {},
     };
   },
   computed: {
@@ -998,7 +1120,9 @@ export default {
       if (this.isShowHotWater) {
         this.progress1 = row.waterLevel1;
       } else {
-        this.progress1 = row.waterLevel1 - 0.1;
+        this.progress1 = Math.round((row.waterLevel1 - 0.1) * 100) / 100;
+        // 三个泵的数据
+        this.threePumpObj = row;
       }
       this.progress2 = row.waterLevel2;
       this.temdata = row.waterTemp;
@@ -2015,6 +2139,91 @@ export default {
               }
             }
           }
+          .supply3 {
+            position: absolute;
+            top: 1.2rem;
+            left: 0rem;
+            width: 12.3rem;
+            height: 4.4rem;
+            z-index: 0;
+          }
+          .coolpum1 {
+            width: 0.9rem;
+            height: 0.68rem;
+            position: absolute;
+            top: 2.65rem;
+            left: 0.6rem;
+            z-index: 2;
+          }
+          .coolpum2 {
+            width: 0.9rem;
+            height: 0.68rem;
+            position: absolute;
+            top: 3.85rem;
+            left: 0.6rem;
+            z-index: 2;
+          }
+          .coolpum3 {
+            width: 0.9rem;
+            height: 0.68rem;
+            position: absolute;
+            top: 5.1rem;
+            left: 0.6rem;
+            z-index: 2;
+          }
+          .pumpName1 {
+            position: absolute;
+            top: 3.35rem;
+            left: 0.85rem;
+            z-index: 1;
+          }
+          .pumpName2 {
+            position: absolute;
+            top: 4.55rem;
+            left: 0.85rem;
+            z-index: 1;
+          }
+          .pumpName3 {
+            position: absolute;
+            top: 5.8rem;
+            left: 0.85rem;
+            z-index: 1;
+          }
+          .inPressure {
+            position: absolute;
+            top: 1rem;
+            left: 0.85rem;
+            z-index: 1;
+          }
+          .goalPressure {
+            position: absolute;
+            top: 3.6rem;
+            left: 6.85rem;
+            z-index: 1;
+          }
+          .outPressure {
+            position: absolute;
+            top: 3.9rem;
+            left: 6.85rem;
+            z-index: 1;
+          }
+          .warning {
+            position: absolute;
+            width: 0.5rem;
+            height: 0.5rem;
+            top: 2rem;
+            right: 1rem;
+            z-index: 1;
+            /* 添加闪烁动画 */
+            animation: blink 1s infinite;
+          }
+          .warning-text {
+            position: absolute;
+            top: 2.6rem;
+            right: 0.5rem;
+            z-index: 1;
+            color: #e40825;
+          }
         }
       }