对接设备监控、设备控制页面

.env.development

@@ -7,11 +7,11 @@ 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:8092'
+# VUE_APP_BASE_API = 'http://106.55.173.225:8092'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/views/centerairC/sysControl/listHeader.vue

@@ -3,7 +3,7 @@
     <div class="device-li">
       <div class="device-name">设备名称</div>
       <div class="device-name">运行状态</div>
-      <div class="device-name">手自动切换</div>
+      <!-- <div class="device-name">手自动切换</div> -->
       <div class="device-name">手动控制</div>
       <div class="device-name" v-if="!isNoShowlocalRemote">本地远程状态</div>
       <div class="device-name">故障报警</div>
@@ -19,7 +19,7 @@
           {{ item.runStatus }}
         </div>
       </div>
-      <div class="device-name">
+      <!-- <div class="device-name">
         <el-switch
           style="display: block"
           v-model="item.automaticText"
@@ -30,7 +30,7 @@
           @change="handleAutomaticText(item)"
         >
         </el-switch>
-      </div>
+      </div> -->
       <div class="device-name">
         <el-switch
           style="display: block"

src/views/centerairC/sysControl/vavleheader.vue

@@ -2,14 +2,14 @@
   <div>
     <div class="device-li">
       <div class="device-name">设备名称</div>
-      <div class="device-name">手自动切换</div>
+      <!-- <div class="device-name">手自动切换</div> -->
       <div class="device-name">手动控制</div>
       <div class="device-name">阀开反馈</div>
       <div class="device-name">阀关反馈</div>
     </div>
     <div class="device-li" v-for="(item, index) in valveList" :key="index">
       <div class="device-name">{{ item.name }}</div>
-      <div class="device-name">
+      <!-- <div class="device-name">
         <el-switch
           style="display: block"
           v-model="item.automaticText"
@@ -20,7 +20,7 @@
           @change="handleAutomaticText(item)"
         >
         </el-switch>
-      </div>
+      </div> -->
       <div class="device-name">
         <el-switch
           style="display: block"

src/views/centerairC/sysMonitor/hostDetails.vue

@@ -38,15 +38,15 @@
           <div class="water-flow3">
             <div class="water-flow-li">
               <span>冷却水流:</span>
-              <span v-if="hostListClass('21')">接通</span>
+              <span v-if="hostListClass('1')">接通</span>
               <span v-else>断开</span>
-              <span class="break" :class="{ connect: hostListClass('21') }"></span>
+              <span class="break" :class="{ connect: hostListClass('1') }"></span>
             </div>
             <div class="water-flow-li">
               <span>冷冻水流:</span>
-              <span v-if="hostListClass('20')">接通</span>
+              <span v-if="hostListClass('1')">接通</span>
               <span v-else>断开</span>
-              <span class="break" :class="{ connect: hostListClass('20') }"></span>
+              <span class="break" :class="{ connect: hostListClass('1') }"></span>
             </div>
           </div>
           <div class="hostStatus">

src/views/centerairC/sysMonitor/monitorCenter.vue

@@ -106,10 +106,39 @@
         </div>
       </div> -->
       <!-- 一键启停 -->
-      <div class="offClass" @click="handleOneKeyButton">
+      <div
+        class="offClass"
+        :class="{ disabledClass: sysAutoManual === '1' }"
+        @click="handleOneKeyButton"
+      >
         <div v-if="isShowOn" class="off-bg on-animation">启动</div>
         <div v-else class="off-bg">停止</div>
       </div>
+      <!-- 系统手自动状态 -->
+      <div class="sysAutoManual" @click="handleAutoManualSwitch">
+        <button v-if="sysAutoManual === '1'">
+          <div id="clip">
+            <div id="leftTop" class="corner"></div>
+            <div id="rightBottom" class="corner"></div>
+            <div id="rightTop" class="corner"></div>
+            <div id="leftBottom" class="corner"></div>
+          </div>
+          <span id="rightArrow" class="arrow"></span>
+          <span id="leftArrow" class="arrow"></span>
+          系统手动
+        </button>
+        <button v-else>
+          <div id="clip">
+            <div id="leftTop" class="corner"></div>
+            <div id="rightBottom" class="corner"></div>
+            <div id="rightTop" class="corner"></div>
+            <div id="leftBottom" class="corner"></div>
+          </div>
+          <span id="rightArrow" class="arrow"></span>
+          <span id="leftArrow" class="arrow"></span>
+          系统自动
+        </button>
+      </div>
       <!-- 系统提示 -->
       <div class="sysTips" v-if="startOrStopStatus">
         <img class="step" src="../../../assets/images/step.png" alt="" />
@@ -132,26 +161,26 @@
       <div class="hostName1" v-if="hostList.length > 0" @click="goControlList(hostList, 1)">
         {{ hostList[0].deviceName }}
       </div>
-      <div class="hostStatus1" :class="{ startClass: hostListControlClass(5) }"></div>
+      <div class="hostStatus1" :class="{ startClass: hostListControlClass(1) }"></div>
-      <img class="host-img1" v-if="hostListRunClass(5)" src="../../../assets/images/fan-img.png" alt=""
+      <img class="host-img1" v-if="hostListRunClass(1)" src="../../../assets/images/fan-img.png" alt=""
-        :class="{ moveClass: hostListRunClass(5) }" />
+        :class="{ moveClass: hostListRunClass(1) }" />
       <div class="host-main1" v-if="hostList.length > 0 && hostList[0].deviceName"
         :title="`${hostList[0].deviceName}性能`" @click="goHostDetail(hostList[0], true)"></div>
-      <div class="hostLoad1" v-if="hostListRunClass(5) && hostLoadData(5)">
+      <div class="hostLoad1" v-if="hostListRunClass(1) && hostLoadData(1)">
-        {{ hostLoad5 }}%
+        {{ hostLoad1 }}%
       </div>
       <div class="water-flow1">
         <div class="water-flow-li">
           <span>1#冷却水流:</span>
-          <span v-if="hostCoolingWaterFlowClass(5)">接通</span>
+          <span v-if="hostListRunClass(1)">接通</span>
           <span v-else>断开</span>
-          <span class="break" :class="{ connect: hostCoolingWaterFlowClass(5) }"></span>
+          <span class="break" :class="{ connect: hostListRunClass(1) }"></span>
         </div>
         <div class="water-flow-li">
           <span>1#冷冻水流:</span>
-          <span v-if="hostFreezeWaterFlowClass(5)">接通</span>
+          <span v-if="hostListRunClass(1)">接通</span>
           <span v-else>断开</span>
-          <span class="break" :class="{ connect: hostFreezeWaterFlowClass(5) }"></span>
+          <span class="break" :class="{ connect: hostListRunClass(1) }"></span>
         </div>
       </div>
       <line-children :angle1="-0" :angle2="-30" :lineWidth1="190" :lineWidth2="250" class="host-line1"></line-children>
@@ -205,13 +234,13 @@
       <div class="coolingTowerHz1" v-if="coolingTowerHz(1, 1) && coolingTowerRunClass(1, 1)">
         {{ coolingTowerHz(1, 1) }}Hz
       </div>
-      <div class="coolingTowerHz2" v-if="coolingTowerHz(2, 1) && coolingTowerRunClass(2, 1)">
+      <div class="coolingTowerHz2" v-if="coolingTowerHz(1, 2) && coolingTowerRunClass(1, 2)">
-        {{ coolingTowerHz(2, 1) }}Hz
+        {{ coolingTowerHz(1, 2) }}Hz
       </div>
       <!-- 1 号冷却塔风机1 -->
       <img class="fan-img1" v-if="coolingTowerRunClass(1, 1)" :class="{ moveClass2: coolingTowerRunClass(1, 1) }"
         src="../../../assets/images/fan-img.png" alt="" />
-      <img class="fan-img2" v-if="coolingTowerRunClass(2, 1)" :class="{ moveClass2: coolingTowerRunClass(2, 1) }"
+      <img class="fan-img2" v-if="coolingTowerRunClass(1, 2)" :class="{ moveClass2: coolingTowerRunClass(1, 2) }"
         src="../../../assets/images/fan-img.png" alt="" />
       <!-- 箭头 -->
       <img class="in-arrow" src="../../../assets/images/in-arrow.png" alt="" />
@@ -220,10 +249,10 @@
       <div class="freezingInTem">{{ freezingInTem }}℃</div>
       <div class="freezingOutTem">{{ freezingOutTem }}℃</div>
       <!-- 冷冻水流 -->
-      <div class="freezingOutWater">{{ freezingOutWater }}m³/h</div>
+      <!-- <div class="freezingOutWater">{{ freezingOutWater }}m³/h</div> -->
       <!-- 冷冻进出水压力 -->
-      <div class="freezingInPre">{{ freezingInPre }}KPa</div>
+      <!-- <div class="freezingInPre">{{ freezingInPre }}KPa</div>
-      <div class="freezingOutPre">{{ freezingOutPre }}KPa</div>
+      <div class="freezingOutPre">{{ freezingOutPre }}KPa</div> -->
       <!-- 冷却进出水温度 -->
       <div class="coolingInTem">{{ coolingInTem }}℃</div>
       <div class="coolingOutTem">{{ coolingOutTem }}℃</div>
@@ -242,8 +271,8 @@
       </div>
 
       <!-- 旁通阀 -->
-      <div class="bypassValveData">{{ bypassValveFeedback }}%</div>
+      <!-- <div class="bypassValveData">{{ bypassValveFeedback }}%</div>
-      <div class="bypassValve" @click="bypassValveControl()">旁通阀</div>
+      <div class="bypassValve" @click="bypassValveControl()">旁通阀</div> -->
     </div>
     <!-- 报警弹框内容 -->
     <el-dialog title="报警内容" :visible.sync="openDialog" width="680px" append-to-body>
@@ -375,7 +404,7 @@ export default {
       oneKeyButtonId: "",
 
       // 主机负载
-      hostLoad5: "",
+      hostLoad1: "",
       hostLoad2: "",
       hostLoad3: "",
       // 主机设定温度
@@ -416,6 +445,10 @@ export default {
       alarmList: [],
       // 系统模式
       sysStatus: "",
+      // 系统手自动状态 0=自动 1=手动
+      sysAutoManual: "0",
+      // 系统手自动切换设备ID
+      sysAutoManualId: "",
       // 模式提示
       startOrStopStatus: "",
       openDialog: false,
@@ -484,15 +517,15 @@ export default {
     this.getDayData();
 
     // 设置定时器，每 10 秒执行一次
-    this.timer = setInterval(() => {
+    // this.timer = setInterval(() => {
-      this.getWeatherData();
+    //   this.getWeatherData();
-      this.getSystemMode();
+    //   this.getSystemMode();
-      this.getPerformance();
+    //   this.getPerformance();
-      this.getOneKeyButton();
+    //   this.getOneKeyButton();
-      this.getMonitorList();
+    //   this.getMonitorList();
-      this.getAlarnStatus();
+    //   this.getAlarnStatus();
-      this.getDayData();
+    //   this.getDayData();
-    }, 10000);
+    // }, 10000);
     // 每秒更新一次时间
     this.nowTimer = setInterval(() => {
       this.currentDate = new Date();
@@ -660,6 +693,11 @@ export default {
     },
     // 一键启停按钮
     handleOneKeyButton() {
+      /** 系统手动状态下禁止一键启停 */
+      if (this.sysAutoManual === "1") {
+        this.$message.warning("当前为系统手动状态，无法使用一键启停功能");
+        return;
+      }
       let param = "";
       let paramText = "";
       if (this.isShowOn) {
@@ -1614,10 +1652,28 @@ export default {
           this.coolingInTem = item.collectValue;
         } else if (item.collectName.includes("瞬时流量")) {
           this.freezingOutWater = item.collectValue;
+        } else if (item.collectName.includes("系统手自动切换") || item.paramType === "6") {
+          this.sysAutoManualId = item.id;
+          this.sysAutoManual = item.collectValue;
         }
       });
       return true;
     },
+    /** 系统手自动切换 */
+    handleAutoManualSwitch() {
+      /** 当前 sysAutoManual: 0=自动, 1=手动 */
+      const targetStatus = this.sysAutoManual === "1" ? "自动" : "手动";
+      const targetParam = this.sysAutoManual === "1" ? "0" : "1";
+      this.$confirm(`确定要将系统手自动状态切换为：${targetStatus}吗？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.hadleOperationConrol(this.sysAutoManualId, targetParam);
+        })
+        .catch(() => {});
+    },
     // 裙楼-客房进出水阀启停状态
     hostAndCoolingControlClass(item) {
       // 检查数组中是否存在 paramType 为 "7" 的对象
@@ -3666,6 +3722,185 @@ export default {
     animation: none;
   }
 
+  /** 一键启停手动状态禁用样式 */
+  .offClass.disabledClass {
+    pointer-events: none;
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /** 系统手自动状态 - Uiverse.io by Navarog21 */
+  .sysAutoManual {
+    position: absolute;
+    top: 2.3rem;
+    right: 0.3rem;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    button {
+      position: relative;
+      width: 11em;
+      height: 4em;
+      outline: none;
+      transition: 0.1s;
+      background-color: transparent;
+      border: none;
+      font-size: 13px;
+      font-weight: bold;
+      color: #ddebf0;
+      cursor: pointer;
+    }
+
+    #clip {
+      --color: #2761c3;
+      position: absolute;
+      top: 0;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      border: 5px double var(--color);
+      box-shadow: inset 0px 0px 15px #195480;
+      -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
+      cursor: pointer;
+    }
+
+    .arrow {
+      position: absolute;
+      transition: 0.2s;
+      background-color: #2761c3;
+      top: 35%;
+      width: 11%;
+      height: 30%;
+    }
+
+    #leftArrow {
+      left: -9%;
+      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
+    }
+
+    #rightArrow {
+      -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
+      left: 106%;
+    }
+
+    button:hover #rightArrow {
+      background-color: #27c39f;
+      left: -7%;
+      animation: 0.6s ease-in-out both infinite alternate rightArrow8;
+    }
+
+    button:hover #leftArrow {
+      background-color: #27c39f;
+      left: 106%;
+      animation: 0.6s ease-in-out both infinite alternate leftArrow8;
+    }
+
+    .corner {
+      position: absolute;
+      width: 4em;
+      height: 4em;
+      background-color: #2761c3;
+      box-shadow: inset 1px 1px 8px #2781c3;
+      transform: scale(1) rotate(45deg);
+      transition: 0.2s;
+    }
+
+    #rightTop {
+      top: -1.98em;
+      left: 91%;
+    }
+
+    #leftTop {
+      top: -1.96em;
+      left: -3em;
+    }
+
+    #leftBottom {
+      top: 2.1em;
+      left: -2.15em;
+    }
+
+    #rightBottom {
+      top: 45%;
+      left: 88%;
+    }
+
+    button:hover #leftTop {
+      animation: 0.1s ease-in-out 0.05s both changeColor8,
+        0.2s linear 0.4s both lightEffect8;
+    }
+
+    button:hover #rightTop {
+      animation: 0.1s ease-in-out 0.15s both changeColor8,
+        0.2s linear 0.4s both lightEffect8;
+    }
+
+    button:hover #rightBottom {
+      animation: 0.1s ease-in-out 0.25s both changeColor8,
+        0.2s linear 0.4s both lightEffect8;
+    }
+
+    button:hover #leftBottom {
+      animation: 0.1s ease-in-out 0.35s both changeColor8,
+        0.2s linear 0.4s both lightEffect8;
+    }
+
+    button:hover .corner {
+      transform: scale(1.25) rotate(45deg);
+    }
+
+    button:hover #clip {
+      animation: 0.2s ease-in-out 0.55s both greenLight8;
+      --color: #27c39f;
+    }
+  }
+
+  @keyframes changeColor8 {
+    from {
+      background-color: #2781c3;
+    }
+    to {
+      background-color: #27c39f;
+    }
+  }
+
+  @keyframes lightEffect8 {
+    from {
+      box-shadow: 1px 1px 5px #27c39f;
+    }
+    to {
+      box-shadow: 0 0 2px #27c39f;
+    }
+  }
+
+  @keyframes greenLight8 {
+    from {
+    }
+    to {
+      box-shadow: inset 0px 0px 32px #27c39f;
+    }
+  }
+
+  @keyframes leftArrow8 {
+    from {
+      transform: translate(0px);
+    }
+    to {
+      transform: translateX(10px);
+    }
+  }
+
+  @keyframes rightArrow8 {
+    from {
+      transform: translate(0px);
+    }
+    to {
+      transform: translateX(-10px);
+    }
+  }
+
   .sysTips {
     position: absolute;
     top: 2.3rem;