1.空调风柜监控系统-系统监控添加定时开关功能

src/api/aircAndWindc/index.js

@@ -8,3 +8,20 @@ export function windList(query) {
     params: query,
   });
 }
+
+//查询定时开关列表
+export function timeList(query) {
+  return request({
+    url: "/device/ahu/monitor/timeList",
+    method: "get",
+    params: query,
+  });
+}
+//修改定时开关
+export function undateTime(query) {
+  return request({
+    url: "/device/ahu/monitor/time",
+    method: "put",
+    params: query,
+  });
+}

src/views/aircAndWindc/awSysMonitor/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container" v-loading="loading">
+  <div class="app-container">
     <div class="left-tree">
       <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
       <div style="height: 7rem; overflow-y: auto">
@@ -39,6 +39,10 @@
       </div>
       <div class="mostDiv">
         <div class="windC">
+          <!-- 定时开关机定位 -->
+          <div class="menu-title" @click="openTimeSwitch">
+            <div @click="openTimeSwitch">定时开关机</div>
+          </div>
           <!-- 空调风柜定位 -->
           <img
             class="wind-img"
@@ -217,6 +221,7 @@
                 @keyup.enter.native="handleEnter(backwaterObj, $event, '℃')"
                 @input="handleInput(backwaterObj)"
                 @blur="handleBlur()"
+                disabled
                 v-model="backwaterObj.collectValue"
                 size="mini"
               >
@@ -267,12 +272,76 @@
         </div>
       </div>
     </div>
+    <!-- 定时开关内容 -->
+    <el-dialog
+      title="定时开关机功能"
+      :visible.sync="isOpenTimeSwitch"
+      append-to-body
+    >
+      <div class="device-container" v-loading="loading">
+        <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>
+        <div class="device-li" v-for="(item, index) in delayList" :key="index">
+          <div class="device-name">{{ item.name }}</div>
+          <div class="device-name">
+            <el-input
+              size="mini"
+              v-model="item.delayOpenHour"
+              @keyup.enter.native="handleSwitchEnter(item, 'openHour', $event)"
+              @input="handleSwitchInput(item, 'delayOpenHour', 'hour')"
+            ></el-input>
+            <div class="slip">:</div>
+            <el-input
+              size="mini"
+              v-model="item.delayOpenMinute"
+              @keyup.enter.native="
+                handleSwitchEnter(item, 'openMinute', $event)
+              "
+              @input="handleSwitchInput(item, 'delayOpenMinute', 'minute')"
+            ></el-input>
+          </div>
+          <div class="device-name">
+            <el-input
+              size="mini"
+              v-model="item.delayCloseHour"
+              @keyup.enter.native="handleSwitchEnter(item, 'closeHour', $event)"
+              @input="handleSwitchInput(item, 'delayCloseHour', 'hour')"
+            ></el-input>
+            <div class="slip">:</div>
+            <el-input
+              size="mini"
+              v-model="item.delayCloseMinute"
+              @keyup.enter.native="
+                handleSwitchEnter(item, 'closeMinute', $event)
+              "
+              @input="handleSwitchInput(item, 'delayCloseMinute', 'minute')"
+            ></el-input>
+          </div>
+          <div class="device-name">
+            <el-switch
+              style="display: block"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-text="开启"
+              inactive-text="停用"
+              v-model="item.delayStatus"
+              @change="handleSwitchStatus(item)"
+            >
+            </el-switch>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { spaceTree } from "@/api/region";
-import { windList } from "@/api/aircAndWindc/index";
+import { windList, timeList, undateTime } from "@/api/aircAndWindc/index";
 import { operationConrol } from "@/api/hotWater/waterControl";
 export default {
   data() {
@@ -310,6 +379,8 @@ export default {
       autoStatus: false, //手自动状态
       startStatus: false, //启停控制
       frequency: "v",
+      isOpenTimeSwitch: false,
+      delayList: [],
     };
   },
   watch: {
@@ -722,6 +793,241 @@ export default {
           this.getWindList();
         });
     },
+    // 打开定时开关弹框
+    openTimeSwitch() {
+      this.isOpenTimeSwitch = true;
+      this.getPolicyList();
+    },
+    // 请求列表
+    getPolicyList() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          systemType: "2",
+          funPolicyType: "3",
+          houseId: this.currentId,
+        };
+        timeList(data)
+          .then((res) => {
+            console.log("设备定时开关返回res", res);
+            if (res.code === 200) {
+              let handleList = res.rows;
+              this.delayList = [];
+              // 定义一个数组来映射数字到中文
+              const chineseNumbers = ["一", "二", "三", "四", "五", "六", "日"];
+              handleList.forEach((element, index) => {
+                if (element.values && element.values.length > 0) {
+                  // 初始化一个空对象来存储非蝶阀处理后的结果
+                  let delayItem = {
+                    name: element.name,
+                  };
+                  const limitedChildren = element.values;
+                  limitedChildren.forEach((child) => {
+                    // console.log("定时${index}开_时", `定时${index}开_时`);
+                    // console.log("child.pointName", child.pointName);
+                    if (child.pointName) {
+                      // 获取对应的中文数字
+                      const chineseNumber = chineseNumbers[index];
+                      // 定时开机-小时
+                      if (child.pointName == `星期${chineseNumber}开_时`) {
+                        // console.log("定时开机-时·························");
+                        delayItem.delayOpenHour = child.curValue;
+                        delayItem.delayOpenHourId = child.id;
+                      }
+                      //   定时开机-分钟
+                      else if (
+                        child.pointName.includes(`星期${chineseNumber}开_分`)
+                      ) {
+                        delayItem.delayOpenMinute = child.curValue;
+                        delayItem.delayOpenMinuteId = child.id;
+                      }
+                      // 定时关机-小时
+                      else if (
+                        child.pointName.includes(`星期${chineseNumber}关_时`)
+                      ) {
+                        delayItem.delayCloseHour = child.curValue;
+                        delayItem.delayCloseHourId = child.id;
+                      }
+                      //   定时关机-分钟
+                      else if (
+                        child.pointName.includes(`星期${chineseNumber}关_分`)
+                      ) {
+                        delayItem.delayCloseMinute = child.curValue;
+                        delayItem.delayCloseMinuteId = child.id;
+                      }
+                      // 启动状态
+                      else if (child.pointName.includes(`启动标志`)) {
+                        delayItem.delayStatus =
+                          Number(child.curValue) == 0 ? false : true;
+                        delayItem.delayStatusId = child.id;
+                      }
+                    }
+                  });
+                  // 将处理后的对象添加到 delayList 中
+                  if (Object.keys(delayItem).length > 1) {
+                    this.delayList.push(delayItem);
+                  }
+                }
+              });
+              console.log("处理后的数组", this.delayList);
+              //   this.delayList = res.rows;
+            } else {
+              this.delayList = [];
+            }
+            // 成功时解析 Promise
+            resolve(res);
+          })
+          .catch((error) => {
+            // 失败时拒绝 Promise
+            reject(error);
+          });
+      });
+    },
+    // 处理输入事件，过滤非数字字符
+    handleSwitchInput(item, propertyName, name) {
+      console.log("校验", item[propertyName]);
+      // 如果值为空，不进行后续校验
+      if (item[propertyName] === "") {
+        return;
+      }
+      let isValid = true;
+      // 实时校验并过滤非数字字符
+      let inputValue = String(item[propertyName]).replace(/[^\d]/g, "");
+      if (name === "hour") {
+        isValid =
+          !isNaN(inputValue) &&
+          parseInt(inputValue) >= 0 &&
+          parseInt(inputValue) <= 23;
+        if (!isValid) {
+          this.$message.error("输入值在0-23区间，请重新输入");
+          item[propertyName] = "";
+          return;
+        }
+      } else if (name === "minute") {
+        isValid =
+          !isNaN(inputValue) &&
+          parseInt(inputValue) >= 0 &&
+          parseInt(inputValue) <= 59;
+        if (!isValid) {
+          this.$message.error("输入值在0-59区间，请重新输入");
+          item[propertyName] = "";
+          return;
+        }
+      }
+      item[propertyName] = inputValue;
+    },
+    handleSwitchEnter(item, name, event) {
+      // 失去焦点
+      event.target.blur();
+      let id = "";
+      let value = "";
+      let title = "";
+      let unit = "";
+      if (name === "openHour") {
+        id = item.delayOpenHourId;
+        value = item.delayOpenHour;
+        title = "定时开机-小时";
+        unit = "时";
+      } else if (name === "openMinute") {
+        id = item.delayOpenMinuteId;
+        value = item.delayOpenMinute;
+        title = "定时开机-分钟";
+        unit = "分";
+      } else if (name === "closeHour") {
+        id = item.delayCloseHourId;
+        value = item.delayCloseHour;
+        title = "定时关机-小时";
+        unit = "时";
+      } else if (name === "closeMinute") {
+        id = item.delayCloseMinuteId;
+        value = item.delayCloseMinute;
+        title = "定时关机-分钟";
+        unit = "分";
+      }
+
+      if (value === "") {
+        this.$message.warning("请输入当前设置值!");
+        return;
+      }
+      console.log("请求后端", item);
+      this.$confirm(
+        `确定要把"${item.name}"的${title}设置为:${value} ${unit}吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.handleSwitchOperationConrol(id, value);
+        })
+        .catch(() => {
+          // 用户取消操作，需要更新原来的频率
+          this.getPolicyList();
+        });
+    },
+    handleSwitchOperationConrol(id, param) {
+      let data = {
+        policyId: id,
+        timeValue: param,
+      };
+      console.log("操作参数", data);
+      undateTime(data)
+        .then((res) => {
+          if (res.code == 200) {
+            this.$modal.msgSuccess("指令下发成功!");
+            // 开启 loading 效果
+            this.loading = true;
+            // 更新所有设备状态;
+            setTimeout(() => {
+              this.getPolicyList().finally(() => {
+                // 关闭 loading 效果
+                this.loading = false;
+              });
+            }, 5000);
+          } else {
+            // this.$modal.msgError("操作失败");
+            console.log("应该更新状态的");
+            // 更新所有设备状态;
+            this.getPolicyList();
+          }
+        })
+        .catch((error) => {
+          console.log("请求发生错误，更新设备状态", error);
+          // 更新所有设备状态;
+          this.getPolicyList();
+        });
+    },
+    // 启用状态
+    handleSwitchStatus(item) {
+      this.$confirm(
+        `确定要切换"${item.name}"的状态为:${
+          item.delayStatus ? "开启" : "停用 吗?"
+        }`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // 这里调用请求函数
+          console.log("请求后台", item.delayStatus);
+          let param = null;
+          if (item.delayStatus) {
+            param = 1;
+          } else {
+            param = 0;
+          }
+          this.handleSwitchOperationConrol(item.delayStatusId, param);
+        })
+        .catch(() => {
+          // 用户取消操作，恢复开关状态
+          item.delayStatus = !item.delayStatus;
+          console.log("不请求后台");
+        });
+    },
   },
 };
 </script>
@@ -760,6 +1066,59 @@ export default {
   width: 13rem;
   height: 5.38rem;
   position: relative;
+  .menu-title {
+    color: #e1f4ff;
+    font-size: 0.18rem;
+    --bRadius: 0.05rem;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    right: 0.5rem;
+    width: 1.25rem;
+    cursor: pointer;
+    z-index: 999;
+    div {
+      position: relative;
+      text-align: center;
+      border-radius: var(--bRadius);
+      transition: all 0.3s;
+      padding: 0.01rem 0.02rem;
+      background-color: rgba(85, 139, 211, 0.2);
+      cursor: pointer;
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        top: -10px;
+        left: -10px;
+        right: -10px;
+        bottom: -10px;
+        border: 2px solid #46b2f1;
+        transition: all 0.5s;
+        border-radius: var(--bRadius);
+        animation: clippath 3s infinite linear;
+        cursor: pointer;
+      }
+      &::after {
+        animation: clippath 3s infinite -1.5s linear;
+      }
+      @keyframes clippath {
+        0%,
+        100% {
+          clip-path: inset(0 0 98% 0);
+        }
+        25% {
+          clip-path: inset(0 98% 0 0);
+        }
+        50% {
+          clip-path: inset(98% 0 0 0);
+        }
+        75% {
+          clip-path: inset(0 0 0 98%);
+        }
+      }
+    }
+  }
   .wind-img {
     width: 13.1rem;
     height: 5.5rem;
@@ -1157,6 +1516,60 @@ export default {
     }
   }
 }
+.device-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 530px;
+  background-color: #142c4e;
+  padding: 10px 10px 30px 10px;
+  border-radius: 10px;
+  font-size: 14px;
+  .device-li {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 12px 0;
+    color: #abcdfc;
+    border-bottom: 1px dashed #0349ac;
+    .device-name {
+      flex: 1;
+      white-space: nowrap;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: nowrap;
+      padding: 0 5px;
+      .slip {
+        margin: 0 5px;
+        color: #1282d8;
+        font-weight: bold;
+      }
+    }
+  }
+  .device-li:nth-child(1) {
+    color: #9ca3af;
+  }
+}
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .device-container {
+    min-height: 7rem !important;
+    padding: 0.1rem 0.1rem 0.3rem 0.1rem !important;
+    border-radius: 0.1rem !important;
+    font-size: 0.14rem !important;
+    .device-li {
+      padding: 0.12rem 0 !important;
+      .device-name {
+        .slip {
+          margin: 0 0.05rem !important;
+        }
+      }
+    }
+  }
+}
 @media (min-width: 1360px) and (max-width: 1680px) {
   .windC {
     transform: scale(0.9);