1.系统监测调整数据和样式，添加报警和系统模式内容，添加启动停止状态

2.联调设备策略select选择问题
3.修改设备延时开关的流程，自适应页面

src/api/centerairC/sysMonitor.js

@@ -57,3 +57,11 @@ export function operationConrol(data) {
     data: data,
   });
 }
+// 获取当前系统模式/启动、停止运行状态/报警列表
+export function systemMode(query) {
+  return request({
+    url: "/device/cs/getSystemMode",
+    method: "get",
+    params: query,
+  });
+}

src/views/centerairC/delaySwitch/index.vue

@@ -84,6 +84,80 @@
             </div>
           </div>
         </div>
+        <!-- 第一组冷却塔放在冷却泵连接处 -->
+        <div class="last openLast" v-if="item.name === '自动开机'">
+          <div class="reverse-img">
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+          </div>
+          <div class="lastTower">
+            <div class="device-arrow">
+              <div class="delay-input">
+                <el-input
+                  size="mini"
+                  v-model="openTower.curValue"
+                  @keyup.enter.native="handleEnter(openTower, $event)"
+                  @input="handleInput(openTower)"
+                  @focus="handleFocus('openTower')"
+                  @blur="handleBlur()"
+                ></el-input
+                >S
+              </div>
+              <!-- 将 isHovered 状态传递给 dynamic-arrow 组件 -->
+              <dynamic-arrow :is-hovered="isOpenTowerHover"></dynamic-arrow>
+            </div>
+            <div class="device-body">
+              <img
+                src="../../../assets/images/coolingTower.png"
+                class="butterflyValve"
+                alt=""
+              />
+              <div>{{ openTower.pointName }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- 第二组冷却塔放在主机连接处 -->
+        <div class="last closeLast" v-if="item.name === '自动关机'">
+          <div class="reverse-img">
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+            <img src="../../../assets/images/yuan.png" class="yuan" alt="" />
+          </div>
+          <div class="lastTower">
+            <div class="device-arrow">
+              <div class="delay-input">
+                <el-input
+                  size="mini"
+                  v-model="closeTower.curValue"
+                  @keyup.enter.native="handleEnter(closeTower, $event)"
+                  @input="handleInput(closeTower)"
+                  @focus="handleFocus('closeTower')"
+                  @blur="handleBlur()"
+                ></el-input
+                >S
+              </div>
+              <!-- 将 isHovered 状态传递给 dynamic-arrow 组件 -->
+              <dynamic-arrow :is-hovered="isCloseTowerHover"></dynamic-arrow>
+            </div>
+            <div class="device-body">
+              <img
+                src="../../../assets/images/coolingTower.png"
+                class="butterflyValve"
+                alt=""
+              />
+              <div>{{ closeTower.pointName }}</div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <img class="left-line" src="../../../assets/images/left_line.png" alt="" />
@@ -100,6 +174,10 @@ export default {
     return {
       loading: false,
       delayList: [],
+      openTower: {},
+      closeTower: {},
+      isOpenTowerHover: false,
+      isCloseTowerHover: false,
       currentFocusIndex: -1, // 用于记录当前鼠标悬停的索引
     };
   },
@@ -117,10 +195,22 @@ export default {
         policyListData(data)
           .then((res) => {
             console.log("设备延时开关返回res", res);
-            if (res.code === 200) {
+            if (res.code == 200) {
-              this.delayList = res.rows;
+              // 深拷贝 res.rows 到 delayList
+              this.delayList = JSON.parse(JSON.stringify(res.rows));
+              // 处理 openTower
+              if (this.delayList[0] && this.delayList[0].values.length > 0) {
+                // 这里pop已影响到原数组，不用额外处理去掉 delayList 里每个对象 values 数组的最后一个对象
+                this.openTower = { ...this.delayList[0].values.pop() };
+              }
+              // 处理 closeTower
+              if (this.delayList[1] && this.delayList[1].values.length > 0) {
+                this.closeTower = { ...this.delayList[1].values.pop() };
+              }
             } else {
               this.delayList = [];
+              this.openTower = {};
+              this.closeTower = {};
             }
             // 成功时解析 Promise
             resolve(res);
@@ -135,10 +225,18 @@ export default {
       console.log("index", index);
       // 当 el-input 获得焦点时，更新 focusedIndex
       this.currentFocusIndex = `${index}-${subIndex}`;
+      if (index === "openTower") {
+        this.isOpenTowerHover = true;
+      }
+      if (index === "closeTower") {
+        this.isCloseTowerHover = true;
+      }
     },
     // 失去焦点
     handleBlur() {
       this.currentFocusIndex = "";
+      this.isOpenTowerHover = false;
+      this.isCloseTowerHover = false;
     },
     // 处理输入事件，过滤非数字字符
     handleInput(item) {
@@ -221,13 +319,13 @@ export default {
 <style lang="scss" scoped>
 .app-container {
   position: relative;
-  padding: 0.2rem;
+  padding: 20px;
   .delay-title {
     /* 基础样式 */
     display: inline-block;
-    padding: 0.1rem;
+    padding: 10px;
     font-family: "Arial Rounded MT Bold", sans-serif;
-    font-size: 0.18rem;
+    font-size: 18px;
     font-weight: 700;
     color: #e6f3ff;
     text-shadow: 0 2px 4px rgba(0, 60, 120, 0.4);
@@ -309,15 +407,15 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    width: 1.7rem;
+    width: 170px;
-    height: 0.4rem;
+    height: 40px;
   }
   .left-line {
     position: absolute;
     right: 0;
     bottom: 0;
-    width: 0.5rem;
+    width: 50px;
-    height: 2.2rem;
+    height: 220px;
   }
 }
 .delaySwitch {
@@ -393,7 +491,8 @@ export default {
         display: flex;
         flex-direction: row;
         align-items: center;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
+      }
     }
     .delay-context {
       display: flex;
@@ -401,11 +500,27 @@ export default {
       align-items: center;
       margin-bottom: 20px;
       min-width: 150px;
+    }
+    .butterflyValve {
+      width: 70px;
+      height: 70px;
+      margin-top: 10px;
+      padding: 5px;
+      border-radius: 5px;
+      background-color: #2c4970;
+    }
     .device-arrow {
       display: flex;
       flex-direction: column;
       align-items: center;
     }
+    .delay-input {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: nowrap;
+      margin-bottom: 10px;
+    }
     .device-body {
       display: flex;
       flex-direction: column;
@@ -413,28 +528,112 @@ export default {
       margin: 0px 30px;
       padding: 10px;
     }
-        .butterflyValve {
+    .last {
-          width: 70px;
+      display: flex;
-          height: 70px;
+      flex-direction: row;
-          margin-top: 10px;
+      align-items: center;
-          padding: 5px;
-          border-radius: 5px;
-          background-color: #2c4970;
     }
+    .openLast {
+      margin-top: -22px;
+      margin-left: 535px;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
     }
-      .delay-input {
+    .closeLast {
+      margin-top: -22px;
+      margin-left: 275px;
       display: flex;
       flex-direction: row;
+      align-items: flex-start;
+    }
+    .reverse-img {
+      display: flex;
+      flex-direction: column;
       align-items: center;
-        flex-wrap: nowrap;
+      justify-content: center;
+      .yuan {
+        width: 6px;
+        height: 6px;
         margin-bottom: 10px;
       }
     }
+    .lastTower {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      margin-left: 0px;
+      margin-top: 50px;
+      .device-body {
+        flex-direction: row !important;
+        margin-left: 0px !important;
+      }
+      .butterflyValve {
+        margin-right: 10px;
+        margin-top: 0 !important;
+      }
+    }
   }
   .delay-li:nth-last-child(1) {
     border-bottom: none;
   }
 }
+@media (min-width: 1605px) and (max-width: 1730px) {
+  .app-container {
+    transform: scale(0.9);
+    transform-origin: top left;
+    width: 110%;
+  }
+}
+@media (min-width: 1450px) and (max-width: 1605px) {
+  .app-container {
+    transform: scale(0.8);
+    transform-origin: top left;
+    width: 125%;
+  }
+}
+@media (min-width: 1330px) and (max-width: 1450px) {
+  .app-container {
+    transform: scale(0.7);
+    transform-origin: top left;
+    width: 140%;
+  }
+}
+@media (min-width: 1260px) and (max-width: 1450px) {
+  .app-container {
+    transform: scale(0.65);
+    transform-origin: top left;
+    width: 155%;
+  }
+}
+@media (min-width: 1170px) and (max-width: 1260px) {
+  .app-container {
+    transform: scale(0.6);
+    transform-origin: top left;
+    width: 165%;
+  }
+}
+@media (min-width: 980px) and (max-width: 1170px) {
+  .app-container {
+    transform: scale(0.55);
+    transform-origin: top left;
+    width: 180%;
+  }
+}
+@media (min-width: 900px) and (max-width: 1100px) {
+  .app-container {
+    transform: scale(0.5);
+    transform-origin: top left;
+    width: 200%;
+  }
+}
+@media (min-width: 0px) and (max-width: 900px) {
+  .app-container {
+    transform: scale(0.55);
+    transform-origin: top left;
+    width: 180%;
+  }
+}
 </style>
 <style scoped>
 .delay-input >>> .el-input {

src/views/centerairC/deviceStrategy/index.vue

@@ -24,8 +24,22 @@
               @input="handleInput(children)"
               @blur="handleBlur()"
             ></el-input>
-            <template v-if="children.inputType === 'selet'">
+            <div class="unit">{{ children.unit }}</div>
-              <el-select v-model="children.curValue" placeholder="请选择">
+          </div>
+        </template>
+        <template v-if="children.inputType === 'select'">
+          <div>{{ children.pointName }}:</div>
+          <div class="right-data">
+            <el-select
+              v-model="children.curValue"
+              placeholder="请选择"
+              size="mini"
+              ref="selectRef"
+              @change="selectThink(children)"
+              @visible-change="
+                (visible) => handleVisibleChange(visible, children)
+              "
+            >
               <el-option
                 v-for="option in getOptions(children.min, children.max)"
                 :key="option"
@@ -34,7 +48,6 @@
               >
               </el-option>
             </el-select>
-            </template>
             <div class="unit">{{ children.unit }}</div>
           </div>
         </template>
@@ -67,6 +80,8 @@ export default {
       policyList: [],
       policyDetails: [],
       value: "",
+      // 用于存储选择前的值
+      oldValue: null,
     };
   },
   mounted() {
@@ -110,6 +125,42 @@ export default {
           });
       });
     },
+    // 处理select下拉框显示或隐藏事件
+    handleVisibleChange(visible, children) {
+      if (visible) {
+        // 当下拉框打开时保存原值
+        this.$set(children, "_oldValue", children.curValue);
+      }
+    },
+    // 处理select的选中值
+    selectThink(children) {
+      const oldValue = children._oldValue
+      this.$confirm(
+        `确定要修改"${children.pointName}"的数据为:${children.curValue}吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.hadleOperationConrol(children.cpmId, children.curValue);
+        })
+        .catch(() => {
+          // 用户取消操作，恢复原来的值
+          children.curValue = oldValue;
+        });
+    },
+    // 当select下拉框显示或隐藏时触发
+    handleSelectVisibleChange(val, visible) {
+      if (visible) {
+        // 下拉框显示时，保存当前的值
+        this.oldValue = val;
+        console.log("显示的旧值", this.oldValue);
+      }
+      return val;
+    },
     // 处理初始页面时候radio的默认选中值
     initRadioSelection() {
       this.policyList.forEach((item) => {
@@ -191,7 +242,7 @@ export default {
                   let values = timeList[i].values;
                   for (let j = 0; j < values.length; j++) {
                     if (
-                      values[j].pointName === "启停标志" &&
+                      values[j].pointName === "启动标志" &&
                       values[j].curValue === 1
                     ) {
                       return true;
@@ -217,7 +268,7 @@ export default {
                   .then(() => {
                     console.log("children.curValue", children.curValue);
                     if (children.curValue) {
-                      this.hadleOperationConrol(children.cpmId, "1");
+                      this.hadleOperationConrol(children.cpmId, "2");
                     }
                   })
                   .catch(() => {
@@ -357,6 +408,10 @@ export default {
         width: 80px !important;
         margin: 0 15px 0 5px;
       }
+      .el-select {
+        width: 80px !important;
+        margin: 0 15px 0 5px;
+      }
     }
   }
   .radio-style {

src/views/centerairC/sysMonitor/index.vue

@@ -75,6 +75,11 @@
         <div v-if="isShowOn" class="off-bg on-animation">ON</div>
         <div v-else class="off-bg">OFF</div>
       </div>
+      <!-- 系统提示 -->
+      <div class="sysTips" v-if="startOrStopStatus">
+        <img class="step" src="../../../assets/images/step.png" alt="" />
+        <div class="tips-text">{{ startOrStopStatus }}</div>
+      </div>
       <!-- 整体图 -->
       <img
         class="monitor-img"
@@ -96,7 +101,9 @@
         alt=""
         :class="{ moveClass: hostListRunClass(0) }"
       />
-      <div class="hostLoad1">11%</div>
+      <div class="hostLoad1" v-if="hostLoadData(0) && hostListRunClass(0)">
+        {{ hostLoad0 }}%
+      </div>
       <div class="water-flow1">
         <div class="water-flow-li">
           <span>1#冷却水流:</span>
@@ -139,7 +146,9 @@
         alt=""
         :class="{ moveClass: hostListRunClass(1) }"
       />
-      <div class="hostLoad2">11%</div>
+      <div class="hostLoad2" v-if="hostLoadData(1) && hostListRunClass(1)">
+        {{ hostLoad1 }}%
+      </div>
       <div class="water-flow2">
         <div class="water-flow-li">
           <span>2#冷却水流:</span>
@@ -185,7 +194,9 @@
         :class="{ moveClass: hostListRunClass(2) }"
       />
       <!-- 主机负载 -->
-      <div class="hostLoad3">11%</div>
+      <div class="hostLoad3" v-if="hostLoadData(2) && hostListRunClass(2)">
+        {{ hostLoad2 }}%
+      </div>
       <!-- 主机冷却冷冻水流信息 -->
       <div class="water-flow3">
         <div class="water-flow-li">
@@ -243,13 +254,22 @@
         :class="{ moveClass2: coolingPumpRunClass(2) }"
       />
       <!-- 频率反馈 -->
-      <div class="cooling-hz1" v-if="coolingPumpHz(0)">
+      <div
+        class="cooling-hz1"
+        v-if="coolingPumpHz(0) && coolingPumpRunClass(0)"
+      >
         {{ coolingPumpHz0 }}Hz
       </div>
-      <div class="cooling-hz2" v-if="coolingPumpHz(1)">
+      <div
+        class="cooling-hz2"
+        v-if="coolingPumpHz(1) && coolingPumpRunClass(1)"
+      >
         {{ coolingPumpHz1 }}Hz
       </div>
-      <div class="cooling-hz3" v-if="coolingPumpHz(2)">
+      <div
+        class="cooling-hz3"
+        v-if="coolingPumpHz(2) && coolingPumpRunClass(2)"
+      >
         {{ coolingPumpHz2 }}Hz
       </div>
       <!-- 冷冻泵数据定位 -->
@@ -277,14 +297,23 @@
         alt=""
         :class="{ moveClass2: freezingPumpRunClass(2) }"
       />
-      <!-- 频率反馈 -->
+      <!-- 频率反馈 旋转+有频率反馈才显示 -->
-      <div class="freezing-hz1" v-if="freezingPumpHz(0)">
+      <div
+        class="freezing-hz1"
+        v-if="freezingPumpHz(0) && freezingPumpRunClass(0)"
+      >
         {{ freezingPumpHz0 }}Hz
       </div>
-      <div class="freezing-hz2" v-if="freezingPumpHz(1)">
+      <div
+        class="freezing-hz2"
+        v-if="freezingPumpHz(1) && freezingPumpRunClass(1)"
+      >
         {{ freezingPumpHz1 }}Hz
       </div>
-      <div class="freezing-hz3" v-if="freezingPumpHz(2)">
+      <div
+        class="freezing-hz3"
+        v-if="freezingPumpHz(2) && freezingPumpRunClass(2)"
+      >
         {{ freezingPumpHz2 }}Hz
       </div>
       <!-- 冷却塔数据定位 五个风机 三个出水阀 -->
@@ -293,11 +322,37 @@
       <div class="coolingTower21">2#-1</div>
       <div class="coolingTower12">1#-2</div>
       <div class="coolingTower11">1#-1</div>
-      <div class="colingTowerHz3">50Hz</div>
+      <!-- 风机频率 -->
-      <div class="colingTowerHz22">50Hz</div>
+      <div
-      <div class="colingTowerHz21">50Hz</div>
+        class="coolingTowerHz3"
-      <div class="colingTowerHz12">50Hz</div>
+        v-if="coolingTowerHz(2, 1) && coolingTowerRunClass(2, 1)"
-      <div class="colingTowerHz11">50Hz</div>
+      >
+        {{ coolingTowerHz31 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz22"
+        v-if="coolingTowerHz(1, 2) && coolingTowerRunClass(1, 2)"
+      >
+        {{ coolingTowerHz22 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz21"
+        v-if="coolingTowerHz(1, 1) && coolingTowerRunClass(1, 1)"
+      >
+        {{ coolingTowerHz21 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz12"
+        v-if="coolingTowerHz(0, 2) && coolingTowerRunClass(0, 2)"
+      >
+        {{ coolingTowerHz12 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz11"
+        v-if="coolingTowerHz(0, 1) && coolingTowerRunClass(0, 1)"
+      >
+        {{ coolingTowerHz11 }}Hz
+      </div>
       <!-- 3号冷却塔风机1 -->
       <img
         class="fan-img1"
@@ -383,14 +438,60 @@
         src="../../../assets/images/out-arrow.png"
         alt=""
       />
-      <!-- 冷冻进出水温度 -->
+      <!-- 冷冻进出水温度 0是out供(出)水，1是in回(进)水 -->
-      <div class="freezingInTem">20℃</div>
+      <div class="freezingInTem">{{ freezingInTem }}℃</div>
-      <div class="freezingOutTem">20℃</div>
+      <div class="freezingOutTem">{{ freezingOutTem }}℃</div>
+      <!-- 冷冻水流 -->
+      <div class="freezingOutWater">{{ freezingOutWater }}m³/h</div>
       <!-- 冷冻进出水压力 -->
-      <div class="freezingInPre">20kpa</div>
+      <div class="freezingInPre">{{ freezingInPre }}kpa</div>
-      <div class="freezingOutPre">20kpa</div>
+      <div class="freezingOutPre">{{ freezingOutPre }}kpa</div>
+      <!-- 冷却进出水温度 -->
+      <div class="coolingInTem">{{ coolingInTem }}℃</div>
+      <div class="coolingOutTem">{{ coolingOutTem }}℃</div>
+      <!-- 报警状态与系统模式 -->
+      <div class="statusAndModel" v-if="isWarning">
+        <img src="../../../assets/images/red.png" class="warnStatus" alt="" />
+        <img
+          src="../../../assets/images/border6.png"
+          class="modelStatus"
+          alt=""
+        />
+        <div class="sysWarning" @click="showAlarm">Warning</div>
+        <div class="sysStatus">{{ sysStatus }}</div>
+      </div>
+      <div class="statusAndModel" v-else>
+        <img src="../../../assets/images/blue.png" class="warnStatus" alt="" />
+        <img
+          src="../../../assets/images/border5.png"
+          class="modelStatus"
+          alt=""
+        />
+        <div class="sysNormal">Normal</div>
+        <div class="sysStatus">{{ sysStatus }}</div>
       </div>
     </div>
+    <!-- 报警弹框内容 -->
+    <el-dialog
+      title="报警内容"
+      :visible.sync="openDialog"
+      width="680px"
+      append-to-body
+    >
+      <el-table :data="alarmList">
+        <el-table-column
+          prop="otherName"
+          label="报警位置"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="curTime"
+          label="报警时间"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -400,6 +501,7 @@ import {
   oneKeyButton,
   monitorList,
   operationConrol,
+  systemMode,
 } from "@/api/centerairC/sysMonitor";
 import LineChildren from "./lineChildren.vue";
 export default {
@@ -418,9 +520,14 @@ export default {
       coolingValue: [], //冷却蝶阀
       coolingTowerInlet: [], //冷却塔进水阀
       coolingTowerOutlet: [], //冷却塔出水阀
+      freezingManifold: [], //冷冻总管
       isShowOn: false, //一键启停,false是Off,true显示On
       oneKeyButtonId: "",
 
+      // 主机负载
+      hostLoad0: "",
+      hostLoad1: "",
+      hostLoad2: "",
       // 冷却泵频率反馈
       coolingPumpHz0: "",
       coolingPumpHz1: "",
@@ -429,6 +536,33 @@ export default {
       freezingPumpHz0: "",
       freezingPumpHz1: "",
       freezingPumpHz2: "",
+      // 冷却塔风机频率
+      coolingTowerHz31: "",
+      coolingTowerHz22: "",
+      coolingTowerHz21: "",
+      coolingTowerHz12: "",
+      coolingTowerHz11: "",
+      // 冷冻泵进出水温度
+      freezingInTem: "",
+      freezingOutTem: "",
+      // 冷冻水流
+      freezingOutWater: "",
+      // 冷冻泵进出压力
+      freezingInPre: "",
+      freezingOutPre: "",
+      // 冷却进出水温度
+      coolingInTem: "",
+      coolingOutTem: "",
+
+      // 报警标志
+      isWarning: false,
+      // 报警列表
+      alarmList: [],
+      // 系统模式
+      sysStatus: "",
+      // 模式提示
+      startOrStopStatus: "",
+      openDialog: false,
       timer: null, // 用于存储定时器 ID
     };
   },
@@ -436,6 +570,7 @@ export default {
   mounted() {
     // 首次进入页面时执行
     this.getWeatherData();
+    this.getSystemMode();
     this.getPerformance();
     this.getOneKeyButton();
     this.getMonitorList();
@@ -443,6 +578,7 @@ export default {
     // 设置定时器，每 10 秒执行一次
     this.timer = setInterval(() => {
       this.getWeatherData();
+      this.getSystemMode();
       this.getPerformance();
       this.getOneKeyButton();
       this.getMonitorList();
@@ -471,6 +607,29 @@ export default {
         }
       });
     },
+    // 获取当前系统模式/启动、停止运行状态/报警列表
+    getSystemMode() {
+      let data = {
+        systemType: "0",
+        paramType: "27",
+      };
+      systemMode(data).then((res) => {
+        console.log("当前系统模式与报警列表返回", res);
+        if (res.code == 200) {
+          this.sysStatus = res.data.autoType;
+          this.alarmList = res.data.alarmList;
+          if (res.data.alarmList.length > 0) {
+            this.isWarning = true;
+          } else {
+            this.isWarning = false;
+          }
+          this.startOrStopStatus = res.data.startOrStopStatus;
+        }
+      });
+    },
+    showAlarm() {
+      this.openDialog = true;
+    },
     // 获取一键启停信息
     getOneKeyButton() {
       return new Promise((resolve, reject) => {
@@ -562,6 +721,7 @@ export default {
           this.coolingValue = [];
           this.coolingTowerInlet = [];
           this.coolingTowerOutlet = [];
+          this.freezingManifold = [];
 
           res.rows.forEach((row) => {
             switch (row.name) {
@@ -597,6 +757,11 @@ export default {
                 this.coolingTowerOutlet = this.processDeviceList(row.values);
                 console.log("冷却塔出水阀列表", this.coolingTowerOutlet);
                 break;
+              case "15":
+                this.freezingManifold = row.values;
+                console.log("冷冻总管", this.freezingManifold);
+                this.freezingManifoldData();
+                break;
               default:
                 break;
             }
@@ -627,6 +792,31 @@ export default {
       // 过滤掉 deviceList 中可能存在的空元素
       return deviceList.filter((item) => item);
     },
+    // 主机负载
+    hostLoadData(index) {
+      // 检查 hostList 长度是否足够
+      if (this.hostList.length <= index) {
+        return false;
+      }
+      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
+      const properties = this.hostList[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 28表示主机负载
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "28") {
+          // 动态构造属性名
+          const propertyName = `hostLoad${index}`;
+          // 使用方括号语法动态设置属性值
+          this[propertyName] = item.collectValue;
+          return true;
+        }
+      }
+      // 否则代表启停控制中的停止
+      return false;
+    },
     // 主机启停状态
     hostListControlClass(index) {
       // 检查 hostList 长度是否足够
@@ -751,7 +941,7 @@ export default {
           const propertyName = `coolingPumpHz${index}`;
           // 使用方括号语法动态设置属性值
           this[propertyName] = item.collectValue;
-          this.coolingPumpHz[index] = item.collectValue;
+          // this.coolingPumpHz[index] = item.collectValue;
           return true;
         }
       }
@@ -799,7 +989,7 @@ export default {
           const propertyName = `freezingPumpHz${index}`;
           // 使用方括号语法动态设置属性值
           this[propertyName] = item.collectValue;
-          this.freezingPumpHz[index] = item.collectValue;
+          // this.freezingPumpHz[index] = item.collectValue;
           return true;
         }
       }
@@ -835,8 +1025,8 @@ export default {
       // if (Object.keys(filterItem).length > 1) {
       //   filteredProperties.push(filterItem);
       // }
-      console.log("paramType为1的对象", filteredProperties);
+      // console.log("paramType为1的对象", filteredProperties);
-      console.log("index, item", index, item);
+      // console.log("index, item", index, item);
       // 根据 index 和 item 生成目标属性名称
       const towerNumber = index + 1;
       const targetPropertyName = `${towerNumber}号冷却塔风机${item}运行`;
@@ -848,11 +1038,11 @@ export default {
           Number(filteredProperties[i].collectValue) !== 0
         ) {
           if (index === 0 && item === 1) {
-            console.log(
+            // console.log(
-              "返回的true",
+            //   "返回的true",
-              filteredProperties[i].collectName === targetPropertyName &&
+            //   filteredProperties[i].collectName === targetPropertyName &&
-                Number(filteredProperties[i].collectValue) !== 0
+            //     Number(filteredProperties[i].collectValue) !== 0
-            );
+            // );
           }
           return true;
         }
@@ -861,6 +1051,62 @@ export default {
       // 否则代表运行状态中的不运行
       return false;
     },
+    // 冷却塔风机频率,index为多少号风机,0表示1号风机;item表示风机x
+    coolingTowerHz(index, item) {
+      // 检查 coolingTower 长度是否足够
+      if (this.coolingTower.length <= index) {
+        return false;
+      }
+
+      // 获取指定索引的 coolingTower 元素的 properties 数组
+      const properties = this.coolingTower[index].properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      // 创建一个新数组，用于存储 paramType === 4 的对象
+      const filteredProperties = [];
+      let filterItem = {};
+      for (let i = 0; i < properties.length; i++) {
+        // console.log('properties[i].paramType',properties[i].paramType)
+        if (properties[i].paramType === "4") {
+          filteredProperties.push(properties[i]);
+          // filterItem  = properties[i]
+        }
+      }
+      // // 将处理后的对象添加到 deviceList 中
+      // if (Object.keys(filterItem).length > 1) {
+      //   filteredProperties.push(filterItem);
+      // }
+      // console.log("paramType为4的对象", filteredProperties);
+      // console.log("index, item", index, item);
+      // 根据 index 和 item 生成目标属性名称
+      const towerNumber = index + 1;
+      const targetPropertyName = `${towerNumber}号冷却塔风机${item}频率反馈`;
+      // console.log("targetPropertyName",targetPropertyName)
+      // 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
+      for (let i = 0; i < filteredProperties.length; i++) {
+        if (filteredProperties[i].collectName === targetPropertyName) {
+          // 动态构造 coolingTowerHz 相关属性名
+          const coolingTowerHzPropertyName = `coolingTowerHz${towerNumber}${item}`;
+          // console.log(
+          //   "coolingTowerHzPropertyName---",
+          //   coolingTowerHzPropertyName
+          // );
+          // 获取 collectValue 转换为数字后的值
+          const value = Number(filteredProperties[i].collectValue);
+          // 使用方括号语法动态设置属性值
+          this[coolingTowerHzPropertyName] = value;
+          // console.log("Number(filteredProperties[i].collectValue)", value);
+          return true;
+        }
+      }
+
+      // 否则代表运行状态中的不运行
+      return false;
+    },
     // 冷却塔出水蝶阀启停状态
     towerValveControlClass(index) {
       // 检查 coolingTowerOutlet 长度是否足够
@@ -983,6 +1229,33 @@ export default {
       // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
       return valveOpenFeedbackFound && valveCloseFeedbackFound;
     },
+    // 冷冻总管数据 供回水温度、压力等
+    freezingManifoldData(index, val) {
+      console.log("this.freezingManifold", this.freezingManifold);
+      // 检查 freezingManifold 长度是否足够
+      if (this.freezingManifold.length <= index) {
+        return false;
+      }
+      this.freezingManifold.forEach((item) => {
+        if (item.collectName === "冷冻供水温度") {
+          this.freezingOutTem = item.collectValue;
+          console.log("item.collectName", item.collectName);
+        } else if (item.collectName === "冷冻回水温度") {
+          this.freezingInTem = item.collectValue;
+        } else if (item.collectName === "冷冻供水压力") {
+          this.freezingOutPre = item.collectValue;
+        } else if (item.collectName === "冷冻回水压力") {
+          this.freezingInPre = item.collectValue;
+        } else if (item.collectName === "冷却供水温度") {
+          this.coolingOutTem = item.collectValue;
+        } else if (item.collectName === "冷却回水温度") {
+          this.coolingInTem = item.collectValue;
+        } else if (item.collectName === "总冷量计瞬时流量") {
+          this.freezingOutWater = item.collectValue;
+        }
+      });
+      return true;
+    },
   },
 };
 </script>
@@ -1111,12 +1384,28 @@ export default {
       height: 0.6rem;
       z-index: 10;
     }
+    .coolingInTem {
+      z-index: 10;
+      position: absolute;
+      top: 2.1rem;
+      left: 8.35rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .coolingOutTem {
+      z-index: 10;
+      position: absolute;
+      top: 3rem;
+      left: 4.77rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
     .freezingInTem {
       z-index: 10;
       position: absolute;
       top: 4.54rem;
-      right: 5.4rem;
+      right: 5.3rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .freezingOutTem {
@@ -1124,15 +1413,24 @@ export default {
       position: absolute;
       top: 5.2rem;
       right: 3.8rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingOutWater {
+      z-index: 10;
+      position: absolute;
+      top: 6.2rem;
+      right: 4.9rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
+
     .freezingInPre {
       z-index: 10;
       position: absolute;
       top: 5rem;
       right: 5.3rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .freezingOutPre {
@@ -1140,7 +1438,7 @@ export default {
       position: absolute;
       top: 5.7rem;
       right: 3.7rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .host-line1 {
@@ -1244,25 +1542,25 @@ export default {
     .hostLoad1 {
       z-index: 10;
       position: absolute;
-      top: 6.2rem;
+      top: 5.9rem;
-      left: 3rem;
+      left: 3.7rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .hostLoad2 {
       z-index: 10;
       position: absolute;
-      top: 5.42rem;
+      top: 5.12rem;
-      left: 5rem;
+      left: 5.7rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .hostLoad3 {
       z-index: 10;
       position: absolute;
-      top: 4.52rem;
+      top: 4.4rem;
-      left: 7.1rem;
+      left: 7.65rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .water-flow1 {
@@ -1351,30 +1649,30 @@ export default {
     }
     .coolingPump1 {
       z-index: 10;
-      font-size: 0.18rem;
+      font-size: 0.15rem;
       font-weight: bold;
       color: #46f1e3;
       position: absolute;
       top: 3.8rem;
-      left: 7.22rem;
+      left: 7.3rem;
     }
     .coolingPump2 {
       z-index: 10;
-      font-size: 0.18rem;
+      font-size: 0.15rem;
       font-weight: bold;
       color: #46f1e3;
       position: absolute;
       top: 3.45rem;
-      left: 8.12rem;
+      left: 8.28rem;
     }
     .coolingPump3 {
       z-index: 10;
-      font-size: 0.18rem;
+      font-size: 0.15rem;
       font-weight: bold;
       color: #46f1e3;
       position: absolute;
       top: 3.11rem;
-      left: 9.05rem;
+      left: 9.12rem;
     }
     .cooling-img1 {
       z-index: 10;
@@ -1409,53 +1707,53 @@ export default {
     .cooling-hz1 {
       z-index: 10;
       position: absolute;
-      top: 3.88rem;
+      top: 3.25rem;
-      left: 7.52rem;
+      left: 7.16rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .cooling-hz2 {
       z-index: 10;
       position: absolute;
-      top: 3.51rem;
+      top: 2.94rem;
-      left: 8.5rem;
+      left: 8.15rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .cooling-hz3 {
       z-index: 10;
       position: absolute;
-      top: 3.18rem;
+      top: 2.6rem;
-      left: 9.38rem;
+      left: 9.1rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .freezingPump1 {
       z-index: 10;
-      font-size: 0.18rem;
+      font-size: 0.15rem;
       font-weight: bold;
       color: #46f1e3;
       position: absolute;
       top: 7.5rem;
-      left: 6.6rem;
+      left: 6.8rem;
     }
     .freezingPump2 {
       z-index: 10;
-      font-size: 0.18rem;
+      font-size: 0.15rem;
       font-weight: bold;
       color: #46f1e3;
       position: absolute;
       top: 6.82rem;
-      left: 8rem;
+      left: 8.15rem;
     }
     .freezingPump3 {
       z-index: 10;
-      font-size: 0.18rem;
+      font-size: 0.15rem;
       font-weight: bold;
       color: #46f1e3;
       position: absolute;
       top: 6.28rem;
-      left: 9.1rem;
+      left: 9.3rem;
     }
     .freezing-img1 {
       z-index: 10;
@@ -1490,25 +1788,25 @@ export default {
     .freezing-hz1 {
       z-index: 10;
       position: absolute;
-      top: 7.6rem;
+      top: 6.83rem;
-      left: 7rem;
+      left: 6.7rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .freezing-hz2 {
       z-index: 10;
       position: absolute;
-      top: 6.9rem;
+      top: 6.24rem;
-      left: 8.42rem;
+      left: 8.05rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .freezing-hz3 {
       z-index: 10;
       position: absolute;
-      top: 6.32rem;
+      top: 5.66rem;
-      left: 9.5rem;
+      left: 9.16rem;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-weight: bold;
     }
     .coolingTower3 {
@@ -1561,49 +1859,49 @@ export default {
       font-weight: bold;
       transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
     }
-    .colingTowerHz11 {
+    .coolingTowerHz11 {
       z-index: 10;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       color: #ffffff;
       position: absolute;
-      top: -0.1rem;
+      top: -0.08rem;
-      left: 7.32rem;
+      left: 7.36rem;
       font-weight: bold;
       transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
     }
-    .colingTowerHz12 {
+    .coolingTowerHz12 {
       z-index: 10;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       color: #ffffff;
       position: absolute;
-      top: 0.033rem;
+      top: 0.04rem;
-      left: 6.8rem;
+      left: 6.76rem;
       font-weight: bold;
       transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
     }
-    .colingTowerHz21 {
+    .coolingTowerHz21 {
       z-index: 10;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       color: #ffffff;
       position: absolute;
-      top: 0.24rem;
+      top: 0.22rem;
-      left: 6rem;
+      left: 6.06rem;
       font-weight: bold;
       transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
     }
-    .colingTowerHz22 {
+    .coolingTowerHz22 {
       z-index: 10;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       color: #ffffff;
       position: absolute;
       top: 0.37rem;
-      left: 5.5rem;
+      left: 5.49rem;
       font-weight: bold;
       transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
     }
-    .colingTowerHz3 {
+    .coolingTowerHz3 {
       z-index: 10;
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       color: #ffffff;
       position: absolute;
       top: 0.64rem;
@@ -1683,6 +1981,71 @@ export default {
       background-color: #ebebeb;
       border-radius: 50%;
     }
+    .statusAndModel {
+      z-index: 10;
+      position: absolute;
+      top: 8.4rem;
+      right: 3rem;
+      width: 3rem;
+      .warnStatus {
+        position: absolute;
+        left: 0.04rem;
+        top: 0.3rem;
+        width: 0.45rem;
+        height: 0.45rem;
+        animation: breathe 4s ease-in-out infinite;
+      }
+      @keyframes breathe {
+        0% {
+          transform: scale(1);
+          opacity: 0.5;
+        }
+        50% {
+          transform: scale(1.1);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(1);
+          opacity: 0.5;
+        }
+      }
+      .modelStatus {
+        position: absolute;
+        top: 0;
+        right: 0rem;
+        width: 2.65rem;
+        height: 0.83rem;
+      }
+      .sysNormal {
+        position: absolute;
+        top: 0.63rem;
+        right: 0.7rem;
+        font-size: 0.14rem;
+        font-weight: bold;
+        color: #3bb3f8;
+        letter-spacing: 0.02rem;
+      }
+      .sysWarning {
+        position: absolute;
+        top: 0.63rem;
+        right: 0.7rem;
+        font-size: 0.14rem;
+        font-weight: bold;
+        cursor: pointer;
+        color: #ffffff;
+        letter-spacing: 0.02rem;
+        animation: blink 0.5s ease-in-out infinite;
+      }
+      .sysStatus {
+        position: absolute;
+        top: 0.2rem;
+        left: 0.8rem;
+        font-size: 0.18rem;
+        font-weight: bold;
+        color: #1fb7f3;
+        letter-spacing: 0.02rem;
+      }
+    }
   }
   .weather {
     min-width: 2.5rem;
@@ -1699,7 +2062,7 @@ export default {
     background-image: url(../../../assets/images/border1.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    padding: 0.15rem 0 0.25rem 0rem;
+    padding: 0.15rem 0.1rem 0.25rem 0rem;
   }
   .weather-li {
     width: 100%;
@@ -1741,7 +2104,7 @@ export default {
     background-image: url(../../../assets/images/border4.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    padding: 0.15rem 0 0.25rem 0rem;
+    padding: 0.15rem 0.1rem 0.25rem 0rem;
   }
   .title {
     z-index: 10;
@@ -1752,8 +2115,9 @@ export default {
     background-size: 2rem 0.45rem;
     background-position: bottom left;
     font-family: SourceHanSansCN-Medium;
-    font-size: 0.16rem;
+    font-size: 0.18rem;
     font-style: italic;
+    font-weight: bold;
     line-height: 0.6rem;
     color: rgba(209, 214, 223, 1);
     padding-left: 0.6rem;
@@ -1768,7 +2132,7 @@ export default {
     background-repeat: no-repeat;
     background-size: 100% 100%;
     top: 0;
-    right: 2rem;
+    right: 1.7rem;
     z-index: 10;
     display: flex;
     flex-direction: column;
@@ -1813,6 +2177,27 @@ export default {
   .offClass:hover .on-animation {
     animation: none;
   }
+  .sysTips {
+    position: absolute;
+    top: 1.7rem;
+    left: 13rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 10;
+    .step {
+      width: 0.2rem;
+      height: 0.3rem;
+    }
+    .tips-text {
+      border: 0.01rem solid transparent;
+      border-image: linear-gradient(to right, #007bff, #00ffff);
+      border-image-slice: 1;
+      font-size: 0.18rem;
+      color: #1fecf3;
+      padding: 0.01rem 0.03rem;
+    }
+  }
 }
 // @media (min-width: 1240px) and (max-width: 1440px) {
 // }
@@ -1822,3 +2207,8 @@ export default {
   }
 }
 </style>
+<style scoped>
+.monitor >>> .el-dialog:not(.is-fullscreen) {
+  margin-top: 15% !important;
+}
+</style>

src/views/index.vue

@@ -74,7 +74,7 @@
           <div class="overview-li">
             <div>总耗水量(吨)</div>
             <div class="overview-details">
-              {{ projectView.totalEle }}
+              {{ projectView.totalWater }}
             </div>
           </div>
           <div class="overview-li">