修改风柜监测系统页面

src/assets/icons/svg/hz-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1758105515572" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7076" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M480.256 16.384C219.648 16.384 8.192 227.84 8.192 488.448c0 260.608 211.456 472.064 472.064 472.064 260.608 0 472.064-211.456 472.064-472.064 0.512-260.608-210.944-472.064-472.064-472.064z m0 881.664c-225.792 0-409.088-183.296-409.088-409.088 0-225.792 183.296-409.088 409.088-409.088 225.792 0 409.088 183.296 409.088 409.088 0.512 225.792-182.784 409.088-409.088 409.088z" p-id="7077"></path><path d="M203.264 281.088h50.688v160.256h199.68V281.088h50.688v383.488h-50.688V484.864h-199.68v179.712h-50.688V281.088zM562.176 625.664l160.768-199.68h-152.576v-40.448H778.24v40.448l-158.72 198.144h165.888l-7.68 40.448h-215.552v-38.912z" p-id="7078"></path></svg>

src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails(old).vue

@@ -1,4 +1,49 @@
 <template>
+  <div class="monitor" v-loading="loading">
+    <div class="monitor-top">
+      <img
+        class="title-left"
+        src="../../../assets/images/title-left.png"
+        alt=""
+      />
+      <img
+        class="title-center"
+        src="../../../assets/images/title-center.png"
+        alt=""
+      />
+      <img
+        class="title-right"
+        src="../../../assets/images/title-right.png"
+        alt=""
+      />
+      <div class="sys-title">空调风柜监控系统</div>
+      <!-- logo -->
+      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
+      <div class="nowTime">{{ formattedDate }}</div>
+      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
+      <img
+        class="icon_warning"
+        src="../../../assets/images/warning.png"
+        title="报警记录"
+        @click="goWarning"
+        v-if="isShowWarning"
+        alt=""
+      />
+      <img
+        class="icon_home"
+        src="../../../assets/images/icon_home.png"
+        title="首页"
+        @click="goSys"
+        alt=""
+      />
+      <img
+        class="back-icon"
+        src="../../../assets/images/back-icon.png"
+        title="返回"
+        @click="goBack"
+        alt=""
+      />
+    </div>
     <div class="app-container">
       <div class="left-tree">
         <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
@@ -46,7 +91,7 @@
             <!-- 空调风柜定位 -->
             <img
               class="wind-img"
-            src="../../../assets/images/fenggui.png"
+              src="../../../assets/images/fenggui1.png"
               alt=""
             />
             <!-- 风扇定位 -->
@@ -152,7 +197,11 @@
                 v-model="airSupplyObj.collectValue"
                 size="mini"
               >
-              <svg-icon slot="prefix" icon-class="tem_icon" class="tem-icon" />
+                <svg-icon
+                  slot="prefix"
+                  icon-class="tem_icon"
+                  class="tem-icon"
+                />
               </el-input>
             </div>
             <div class="fan-satatus3">
@@ -172,7 +221,9 @@
               </div>
               <div class="context-li" v-if="isObjectValid(pressureObj)">
                 <div class="wind-text">风机压差:</div>
-              <div class="badStautus" v-if="pressureObj.collectValue">故障</div>
+                <div class="badStautus" v-if="pressureObj.collectValue">
+                  故障
+                </div>
                 <div class="goodStautus" v-else>正常</div>
               </div>
             </div>
@@ -379,16 +430,25 @@
         </div>
       </el-dialog>
     </div>
+  </div>
 </template>
 
 <script>
+import { runTime } from "@/api/centerairC/sysMonitor";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { getDay } from "@/utils/datetime";
 import { spaceTree } from "@/api/region";
 import { windList, timeList, undateTime } from "@/api/aircAndWindc/index";
 import { operationConrol } from "@/api/hotWater/waterControl";
 export default {
+  name: "asSysMonitorDetails",
   data() {
     return {
       loading: false,
+      currentDate: new Date(),
+      nowTimer: null,
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
       treeData: [],
       defaultProps: {
         children: "children",
@@ -426,6 +486,27 @@ export default {
       currentWeekday: "",
     };
   },
+  computed: {
+    formattedDate() {
+      const year = this.currentDate.getFullYear();
+      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
+      const day = String(this.currentDate.getDate()).padStart(2, "0");
+      const hours = String(this.currentDate.getHours()).padStart(2, "0");
+      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
+      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
+      const weekDays = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      const weekDay = weekDays[this.currentDate.getDay()];
+      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
+    },
+  },
   watch: {
     temValue(newVal) {
       let valueWithoutTem = newVal.replace(/℃/g, "");
@@ -472,8 +553,89 @@ export default {
   },
   mounted() {
     this.getSysBuild();
+    this.getAlarnStatus();
+    this.getDayData();
+    // 在组件挂载后尝试进入全屏
+    setTimeout(() => {
+      this.requestFullscreen();
+    }, 100); // 延迟 100 毫秒执行全屏操作
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
   },
   methods: {
+    // 全屏操作
+    requestFullscreen() {
+      const element = document.documentElement;
+      console.log("全屏了吗");
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        // Firefox
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        // Chrome, Safari and Opera
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        // IE/Edge
+        element.msRequestFullscreen();
+      }
+    },
+    // 退出全屏
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        // Firefox
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        // Chrome, Safari and Opera
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        // IE/Edge
+        document.msExitFullscreen();
+      }
+    },
+    // 进入系统首页
+    goSys() {
+      this.exitFullscreen();
+      this.$router.push("/");
+    },
+    // 返回上一页
+    goBack() {
+      window.history.go(-2);
+    },
+    // 监测天数
+    getDayData() {
+      runTime().then((res) => {
+        if (res.code == 200) {
+          this.dayData = res.data.runTime;
+        }
+      });
+    },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      this.exitFullscreen();
+      this.$router.push("/alarm/alarmRecord");
+    },
     // 判断对象是否有效（不为空且不为 undefined）
     isObjectValid(obj) {
       return obj && Object.keys(obj).length > 0;
@@ -1097,6 +1259,109 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.monitor {
+  width: 100%;
+  min-height: 100vh;
+  background-color: black;
+  color: #fff;
+  .monitor-top {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    padding: 0.1rem 0.2rem;
+    position: relative;
+    .title-left {
+      width: 3.41rem;
+      height: 0.8rem;
+    }
+    .title-center {
+      width: 9.46rem;
+      height: 0.69rem;
+    }
+    .title-right {
+      width: 5.04rem;
+      height: 0.61rem;
+    }
+    .sys-title {
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 0.28rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+    }
+    .nowTime {
+      position: absolute;
+      top: 0.3rem;
+      right: 0.6rem;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+    }
+    .sys-logo {
+      width: 1.8rem;
+      height: 0.5rem;
+      position: absolute;
+      top: 0.26rem;
+      left: 0.8rem;
+      z-index: 10;
+    }
+    .monitor-time {
+      position: absolute;
+      top: 0.44rem;
+      left: 4.2rem;
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .icon_warning {
+      position: absolute;
+      top: 0.33rem;
+      right: 4.4rem;
+      z-index: 10;
+      width: 0.3rem;
+      height: 0.27rem;
+      margin: 0 0.25rem 0 0.27rem;
+      cursor: pointer;
+      /* 添加闪烁动画 */
+      animation: blink 1s infinite;
+    }
+    @keyframes blink {
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+    }
+    .icon_home {
+      position: absolute;
+      top: 0.33rem;
+      right: 4rem;
+      z-index: 10;
+      width: 0.3rem;
+      height: 0.27rem;
+      margin: 0 0.2rem 0 0.27rem;
+      cursor: pointer;
+    }
+    .back-icon {
+      position: absolute;
+      top: 0.33rem;
+      right: 3.7rem;
+      z-index: 10;
+      width: 0.3rem;
+      height: 0.27rem;
+      cursor: pointer;
+    }
+  }
+}
 .buildingDiv {
   padding-left: 54px;
   display: flex;
@@ -1487,6 +1752,8 @@ export default {
   justify-content: space-between;
   align-items: stretch;
   height: 100%;
+  padding: 0.3rem 0.2rem 0 0.35rem;
+  width: 100%;
   .left-tree {
     width: 256px;
     padding: 15px 10px 10px 10px;
@@ -1692,6 +1959,9 @@ export default {
 }
 // 手机端样式
 @media (min-width: 0px) and (max-width: 990px) {
+  .app-container {
+    padding: 0rem 0.2rem 0 0.35rem !important;
+  }
   .app-container .left-tree {
     width: 200px !important;
     min-height: 340px !important;