diff --git a/src/App.vue b/src/App.vue
index b92ea37..cc9aa15 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,18 +7,37 @@
 
 <script>
 import ThemePicker from "@/components/ThemePicker";
+import { exitFullscreen, isFullscreen } from "@/utils/fullscreen";
 
 export default {
   name: "App",
   components: { ThemePicker },
   metaInfo() {
     return {
-      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-      titleTemplate: title => {
-        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
+      title:
+        this.$store.state.settings.dynamicTitle &&
+        this.$store.state.settings.title,
+      titleTemplate: (title) => {
+        return title
+          ? `${title} - ${process.env.VUE_APP_TITLE}`
+          : process.env.VUE_APP_TITLE;
+      },
+    };
+  },
+  mounted() {
+    // 监听键盘事件，当用户按 Esc 键时退出全屏
+    window.addEventListener("keydown", this.handleKeyDown);
+  },
+  beforeDestroy() {
+    window.removeEventListener("keydown", this.handleKeyDown);
+  },
+  methods: {
+    handleKeyDown(event) {
+      if (event.key === "Escape" && isFullscreen()) {
+        exitFullscreen();
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
diff --git a/src/assets/flowimg/supply-move.gif b/src/assets/flowimg/supply-move.gif
index 92fae8e..5bc2a92 100644
Binary files a/src/assets/flowimg/supply-move.gif and b/src/assets/flowimg/supply-move.gif differ
diff --git a/src/assets/flowimg/supply-nomove.png b/src/assets/flowimg/supply-nomove.png
index 54f0426..57d3d89 100644
Binary files a/src/assets/flowimg/supply-nomove.png and b/src/assets/flowimg/supply-nomove.png differ
diff --git a/src/permission.js b/src/permission.js
index b66190b..fd7d446 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -1,63 +1,87 @@
-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import { getToken } from '@/utils/auth'
-import { isPathMatch } from '@/utils/validate'
-import { isRelogin } from '@/utils/request'
+import router from "./router";
+import store from "./store";
+import { Message } from "element-ui";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { getToken } from "@/utils/auth";
+import { isPathMatch } from "@/utils/validate";
+import { isRelogin } from "@/utils/request";
+import {
+  isFullscreenSupported,
+  requestFullscreen,
+  isFullscreen,
+} from "@/utils/fullscreen";
+NProgress.configure({ showSpinner: false });
 
-NProgress.configure({ showSpinner: false })
-
-const whiteList = ['/login', '/register']
+const whiteList = ["/login", "/register"];
 
 const isWhiteList = (path) => {
-  return whiteList.some(pattern => isPathMatch(pattern, path))
-}
+  return whiteList.some((pattern) => isPathMatch(pattern, path));
+};
+
+let userManuallyExitedFullscreen = false;
+
+// 监听全屏状态变化事件
+document.addEventListener("fullscreenchange", () => {
+  if (!isFullscreen()) {
+    userManuallyExitedFullscreen = true;
+  }
+});
 
 router.beforeEach((to, from, next) => {
-  NProgress.start()
+  NProgress.start();
   if (getToken()) {
-    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
+    to.meta.title && store.dispatch("settings/setTitle", to.meta.title);
     /* has token*/
-    if (to.path === '/login') {
-      next({ path: '/' })
-      NProgress.done()
+    if (to.path === "/login") {
+      next({ path: "/" });
+      NProgress.done();
     } else if (isWhiteList(to.path)) {
-      next()
+      if (isFullscreenSupported() && !userManuallyExitedFullscreen) {
+        const element = document.documentElement;
+        requestFullscreen(element);
+      }
+      next();
     } else {
       if (store.getters.roles.length === 0) {
-        isRelogin.show = true
+        isRelogin.show = true;
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
-          isRelogin.show = false
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
-            // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-          })
-        }).catch(err => {
-            store.dispatch('LogOut').then(() => {
-              Message.error(err)
-              next({ path: '/' })
-            })
+        store
+          .dispatch("GetInfo")
+          .then(() => {
+            isRelogin.show = false;
+            store.dispatch("GenerateRoutes").then((accessRoutes) => {
+              // 根据roles权限生成可访问的路由表
+              router.addRoutes(accessRoutes); // 动态添加可访问路由表
+              next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
+            });
           })
+          .catch((err) => {
+            store.dispatch("LogOut").then(() => {
+              Message.error(err);
+              next({ path: "/" });
+            });
+          });
       } else {
-        next()
+        if (isFullscreenSupported() && !userManuallyExitedFullscreen) {
+          const element = document.documentElement;
+          requestFullscreen(element);
+        }
+        next();
       }
     }
   } else {
     // 没有token
     if (isWhiteList(to.path)) {
       // 在免登录白名单，直接进入
-      next()
+      next();
     } else {
-      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
-      NProgress.done()
+      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`); // 否则全部重定向到登录页
+      NProgress.done();
     }
   }
-})
+});
 
 router.afterEach(() => {
-  NProgress.done()
-})
+  NProgress.done();
+});
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 815fd7e..2b3bc73 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -193,6 +193,31 @@ const permission = {
           } else {
             // console.log("不满足条件");
           }
+
+          // 温度监测
+          const result5 = sidebarRoutes.find((item) => item.name === "TemSys");
+          if (result5) {
+            // 定义要添加的多个路由对象数组
+            const additionalRoutes5 = [
+              {
+                path: "/temMonitorDeatils",
+                name: "temMonitorDeatils",
+                hidden: true,
+                component: () =>
+                  import("@/views/temSys/temMonitor/temMonitorDeatils"),
+                meta: { title: "温度监测", icon: "screen" },
+              },
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            additionalRoutes5.forEach((route) => {
+              sidebarRoutes.push(route);
+              rewriteRoutes.push(route);
+              asyncRoutes.push(route);
+            });
+          } else {
+            // console.log("不满足条件");
+          }
+
           commit("SET_ROUTES", rewriteRoutes);
           commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
           commit("SET_DEFAULT_ROUTES", sidebarRoutes);
diff --git a/src/utils/fullscreen.js b/src/utils/fullscreen.js
new file mode 100644
index 0000000..271a456
--- /dev/null
+++ b/src/utils/fullscreen.js
@@ -0,0 +1,53 @@
+// 检查浏览器是否支持全屏 API
+function isFullscreenSupported() {
+  return (
+    document.fullscreenEnabled ||
+    document.webkitFullscreenEnabled ||
+    document.mozFullScreenEnabled ||
+    document.msFullscreenEnabled
+  );
+}
+
+// 进入全屏模式
+function requestFullscreen(element) {
+  if (element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if (element.webkitRequestFullscreen) {
+    element.webkitRequestFullscreen();
+  } else if (element.mozRequestFullScreen) {
+    element.mozRequestFullScreen();
+  } else if (element.msRequestFullscreen) {
+    element.msRequestFullscreen();
+  }
+}
+
+// 退出全屏模式
+function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen();
+  } else if (document.mozCancelFullScreen) {
+    document.mozCancelFullScreen();
+  } else if (document.msExitFullscreen) {
+    document.msExitFullscreen();
+  }
+}
+
+// 检查当前是否处于全屏状态
+function isFullscreen() {
+  return (
+    document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.msFullscreenElement
+  );
+}
+
+
+export {
+  isFullscreenSupported,
+  requestFullscreen,
+  exitFullscreen,
+  isFullscreen,
+};
diff --git a/src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue b/src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
index 002374b..a009850 100644
--- a/src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
+++ b/src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
@@ -261,7 +261,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -293,7 +293,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
     // 判断对象是否有效（不为空且不为 undefined）
diff --git a/src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue b/src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue
index a79b0fe..a602e6f 100644
--- a/src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue
+++ b/src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue
@@ -204,7 +204,7 @@
               </el-option>
             </el-select>
           </div>
-          <div
+          <!-- <div
             class="context-li"
             v-if="isObjectValid(remoteManualObj) && startStopValue === 0"
           >
@@ -237,7 +237,7 @@
               :disabled="automaticObj.collectValue"
             >
             </el-switch>
-          </div>
+          </div> -->
           <div
             class="context-li"
             v-if="isObjectValid(openingBackObj)"
@@ -463,6 +463,28 @@
             </el-form>
           </div>
         </div>
+        <!-- 远程启停 -->
+        <div
+          class="offClass"
+          @click="handleOneKeyButton(remoteManualObj,'远程手动停止')"
+          v-if="isObjectValid(remoteManualObj) && startStopValue === 0"
+        >
+          <div v-if="remoteManualObj.collectValue" class="off-bg on-animation">
+            ON
+          </div>
+          <div v-else class="off-bg">OFF</div>
+        </div>
+        <!-- 时间表启停 -->
+        <div
+          class="offClass"
+          @click="handleOneKeyButton(timeScheduleObj,'时间表停止')"
+          v-if="isObjectValid(timeScheduleObj) && startStopValue === 1"
+        >
+          <div v-if="timeScheduleObj.collectValue" class="off-bg on-animation">
+            ON
+          </div>
+          <div v-else class="off-bg">OFF</div>
+        </div>
       </div>
     </div>
     <!-- 定时开关内容 -->
@@ -1523,6 +1545,40 @@ export default {
         this.$set(children, "_oldValue", children.collectValue);
       }
     },
+    // 一键启停按钮
+    handleOneKeyButton(item,val) {
+      console.log(
+        "this.automaticObj.collectValue",
+        this.automaticObj.collectValue
+      );
+      if (this.automaticObj.collectValue) {
+        // 如果风机手自动状态为手动，则不可点击该按钮。
+        this.$message({
+          message: "当前风机手自动状态为手动",
+          type: "warning",
+        });
+        return;
+      }
+      let param = "";
+      let paramText = "";
+      if (item.collectValue) {
+        // startControlObj.collectValue为true代表ON开启,此时点击按钮想OFF停止
+        param = 0;
+        paramText = "停止";
+      } else {
+        param = 1;
+        paramText = "开启";
+      }
+      this.$confirm(`确定把${val}设置为:${paramText}吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.hadleOperationConrol(item.id, param);
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -1729,7 +1785,7 @@ export default {
   .fan-satatus1 {
     position: absolute;
     top: 4.3rem;
-    left: 5.9rem;
+    left: 6.4rem;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -1795,7 +1851,7 @@ export default {
   }
   .fan-satatus3 {
     position: absolute;
-    top: 0.7rem;
+    top: 1.1rem;
     left: 6.4rem;
     display: flex;
     flex-direction: column;
@@ -2006,6 +2062,59 @@ export default {
       /* 箭头向右移动的距离 */
     }
   }
+  .offClass {
+    position: absolute;
+    width: 1.6rem;
+    height: 1.6rem;
+    background-image: url(../../../../assets/images/border2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    top: 5.5rem;
+    left: 6.7rem;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    .off-bg {
+      position: absolute;
+      left: 0.38rem;
+      top: 0.32rem;
+      width: 1rem;
+      height: 1rem;
+      background-image: url(../../../../assets/images/border3.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+      line-height: 1rem;
+      font-family: DIN;
+      font-size: 0.3rem;
+      color: #6cf02f;
+      font-weight: bold;
+    }
+    .on-animation {
+      animation: rotateZ 5s linear infinite;
+      transition: 0.6s; /* 设置过渡时间，控制翻转速度 */
+      transform-style: preserve-3d; /* 保持子元素的 3D 效果 */
+    }
+    /* 定义旋转动画 */
+    @keyframes rotateZ {
+      0% {
+        transform: rotateY(0deg); /* 初始状态，不旋转 */
+      }
+      50% {
+        transform: rotateY(180deg); /* 旋转到 180 度，呈现翻面效果 */
+      }
+      100% {
+        transform: rotateY(360deg); /* 旋转回 360 度，回到初始状态 */
+      }
+    }
+  }
+  /* 鼠标悬停时移除动画 */
+  .offClass:hover .on-animation {
+    animation: none;
+  }
 }
 .device-container {
   display: flex;
@@ -2110,7 +2219,7 @@ export default {
   .windC {
     transform: scale(0.8);
     .fan-satatus3 {
-      top: 0.3rem !important;
+      top: 0.6rem !important;
     }
   }
 }
@@ -2127,7 +2236,7 @@ export default {
   .windC {
     transform: scale(0.86);
     .fan-satatus3 {
-      top: 0.4rem !important;
+      top: 0.6rem !important;
     }
   }
   .buildingDiv {
diff --git a/src/views/aircAndWindc/awSysMonitor/components/normalMonitor.vue b/src/views/aircAndWindc/awSysMonitor/components/normalMonitor.vue
index 3b9aeb6..794b5d6 100644
--- a/src/views/aircAndWindc/awSysMonitor/components/normalMonitor.vue
+++ b/src/views/aircAndWindc/awSysMonitor/components/normalMonitor.vue
@@ -140,6 +140,13 @@
             <div class="goodStautus" v-else>正常</div>
           </div>
         </div>
+        <!--风机启停控制 -->
+        <div class="offClass" @click="handleOneKeyButton(startControlObj)">
+          <div v-if="startControlObj.collectValue" class="off-bg on-animation">
+            ON
+          </div>
+          <div v-else class="off-bg">OFF</div>
+        </div>
         <div class="fan-satatus1">
           <div class="context-li" v-if="isObjectValid(automaticObj)">
             <div class="wind-text">风机手自动状态</div>
@@ -156,7 +163,7 @@
             <div class="noneStautus" v-if="automaticObj.collectValue">手动</div>
             <div class="goodStautus" v-else>自动</div>
           </div>
-          <div class="context-li" v-if="isObjectValid(startControlObj)">
+          <!-- <div class="context-li" v-if="isObjectValid(startControlObj)">
             <div class="wind-text">风机启停控制</div>
             <el-switch
               style="display: block"
@@ -169,7 +176,7 @@
               :disabled="automaticObj.collectValue"
             >
             </el-switch>
-          </div>
+          </div> -->
         </div>
         <div class="fan-satatus2">
           <div class="context-li" v-if="isObjectValid(waterSupplyObj)">
@@ -338,10 +345,6 @@
 </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 {
@@ -947,6 +950,40 @@ export default {
           console.log("不请求后台");
         });
     },
+    // 一键启停按钮
+    handleOneKeyButton(startControlObj) {
+      console.log(
+        "this.automaticObj.collectValue",
+        this.automaticObj.collectValue
+      );
+      if (this.automaticObj.collectValue) {
+        // 如果风机手自动状态为手动，则不可点击该按钮。
+        this.$message({
+          message: "当前风机手自动状态为手动",
+          type: "warning",
+        });
+        return;
+      }
+      let param = "";
+      let paramText = "";
+      if (startControlObj.collectValue) {
+        // startControlObj.collectValue为true代表ON开启,此时点击按钮想OFF停止
+        param = 0;
+        paramText = "停止";
+      } else {
+        param = 1;
+        paramText = "开启";
+      }
+      this.$confirm(`确定把风机启停控制设置为:${paramText}吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.hadleOperationConrol(startControlObj.id, param);
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -1108,6 +1145,59 @@ export default {
       margin-bottom: 0.15rem;
     }
   }
+  .offClass {
+    position: absolute;
+    width: 1.6rem;
+    height: 1.6rem;
+    background-image: url(../../../../assets/images/border2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    top: 0rem;
+    left: 0rem;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    .off-bg {
+      position: absolute;
+      left: 0.38rem;
+      top: 0.32rem;
+      width: 1rem;
+      height: 1rem;
+      background-image: url(../../../../assets/images/border3.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+      line-height: 1rem;
+      font-family: DIN;
+      font-size: 0.3rem;
+      color: #6cf02f;
+      font-weight: bold;
+    }
+    .on-animation {
+      animation: rotateZ 5s linear infinite;
+      transition: 0.6s; /* 设置过渡时间，控制翻转速度 */
+      transform-style: preserve-3d; /* 保持子元素的 3D 效果 */
+    }
+    /* 定义旋转动画 */
+    @keyframes rotateZ {
+      0% {
+        transform: rotateY(0deg); /* 初始状态，不旋转 */
+      }
+      50% {
+        transform: rotateY(180deg); /* 旋转到 180 度，呈现翻面效果 */
+      }
+      100% {
+        transform: rotateY(360deg); /* 旋转回 360 度，回到初始状态 */
+      }
+    }
+  }
+  /* 鼠标悬停时移除动画 */
+  .offClass:hover .on-animation {
+    animation: none;
+  }
   .fan-satatus1 {
     position: absolute;
     top: 4.5rem;
diff --git a/src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue b/src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue
index 6442444..7aeacf3 100644
--- a/src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue
+++ b/src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue
@@ -506,7 +506,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -538,7 +538,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
   },
diff --git a/src/views/centerairC/sysMonitor/hostDetails.vue b/src/views/centerairC/sysMonitor/hostDetails.vue
index 90ca975..96dd42b 100644
--- a/src/views/centerairC/sysMonitor/hostDetails.vue
+++ b/src/views/centerairC/sysMonitor/hostDetails.vue
@@ -399,7 +399,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -692,7 +692,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
     // 判断 curValue 是否为特定值
diff --git a/src/views/centerairC/sysMonitor/monitorCenter.vue b/src/views/centerairC/sysMonitor/monitorCenter.vue
index eab299f..1350366 100644
--- a/src/views/centerairC/sysMonitor/monitorCenter.vue
+++ b/src/views/centerairC/sysMonitor/monitorCenter.vue
@@ -1097,7 +1097,7 @@ export default {
       clearInterval(this.nowTimer);
     }
     // 在组件销毁前退出全屏
-    this.exitFullscreen();
+    // this.exitFullscreen();
   },
   methods: {
     // 全屏操作
@@ -1288,7 +1288,7 @@ export default {
             })
             .catch((error) => {
               console.log("请求发生错误，更新设备状态", error);
-              this.ggetOneKeyButton();
+              this.getOneKeyButton();
             });
         })
         .catch(() => {});
diff --git a/src/views/centerairC/sysMonitor/performance.vue b/src/views/centerairC/sysMonitor/performance.vue
index 2de3015..4104b76 100644
--- a/src/views/centerairC/sysMonitor/performance.vue
+++ b/src/views/centerairC/sysMonitor/performance.vue
@@ -492,7 +492,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -528,7 +528,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
   },
diff --git a/src/views/hotWater/waterMonitor/waterMonitorDetails.vue b/src/views/hotWater/waterMonitor/waterMonitorDetails.vue
index 2fc701e..d263574 100644
--- a/src/views/hotWater/waterMonitor/waterMonitorDetails.vue
+++ b/src/views/hotWater/waterMonitor/waterMonitorDetails.vue
@@ -177,6 +177,32 @@
                 src="../../../assets/flowimg/closepum.png"
                 alt=""
               />
+              <!-- 供水泵3定位 -->
+              <img
+                class="waterpum"
+                v-if="this.upWaterState2 === '1'"
+                src="../../../assets/flowimg/startpum.png"
+                alt=""
+              />
+              <img
+                class="waterpum"
+                v-else
+                src="../../../assets/flowimg/closepum.png"
+                alt=""
+              />
+              <!-- 供水泵4定位 -->
+              <img
+                class="waterpum"
+                v-if="this.upWaterState2 === '1'"
+                src="../../../assets/flowimg/startpum.png"
+                alt=""
+              />
+              <img
+                class="waterpum"
+                v-else
+                src="../../../assets/flowimg/closepum.png"
+                alt=""
+              />
               <!-- 补水定位 -->
               <img
                 class="buwaterpum2"
@@ -443,6 +469,7 @@
               class="maintable"
               ref="maintable"
               :data="tableData"
+              height="200"
               highlight-current-row
               @row-click="handlerow"
               :cell-style="tableRowStyle"
@@ -704,7 +731,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -736,7 +763,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
     getImageSrc(item) {
@@ -1134,6 +1161,9 @@ export default {
     width: 256px;
     padding: 15px 10px 10px 10px;
     border: 1px solid #004b8c;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     .status {
       display: flex;
       flex-direction: row;
@@ -1233,10 +1263,9 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
-
         .flowimg {
           width: 12.27rem;
-          height: 4.6rem;
+          height: 5.6rem;
           background-size: 100% 100%;
           background-repeat: no-repeat;
           position: relative;
@@ -1287,8 +1316,8 @@ export default {
 
           .text5 {
             position: absolute;
-            top: 4.2rem;
-            left: 2.1rem;
+            top: 4.4rem;
+            right: 0.2rem;
             z-index: 1;
           }
 
@@ -1323,10 +1352,10 @@ export default {
 
           .supply {
             position: absolute;
-            top: 0rem;
+            top: 1.2rem;
             left: 0rem;
             width: 12.3rem;
-            height: 4.6rem;
+            height: 4.9rem;
             z-index: 0;
           }
 
@@ -1870,10 +1899,10 @@ export default {
       .changecontent {
         background: #142c4e;
         border-radius: 6px;
-        height: 350px;
-        padding: 35px 10px 10px 10px;
+        // height: 250px;
+        padding: 10px;
         overflow: hidden;
-        margin-top: 40px;
+        margin-top: 100px;
 
         .tablemaeta {
           font-family: SourceHanSansCN-Medium;
@@ -1949,9 +1978,9 @@ export default {
   }
   .changecontent {
     border-radius: 0.06rem !important;
-    height: 3.5rem !important;
-    padding: 0.35rem 0.1rem 0.1rem 0.1rem !important;
-    margin-top: 0.4rem !important;
+    // height: 3rem !important;
+    padding: 0.1rem !important;
+    margin-top: 1rem !important;
 
     .tablemaeta {
       font-size: 0.18rem !important;
@@ -2004,9 +2033,8 @@ export default {
     .folw {
       .changecontent {
         border-radius: 0.06rem !important;
-        height: 300px !important;
-        padding: 0.35rem 0.1rem 0.1rem 0.1rem !important;
-        margin-top: 0.4rem !important;
+        padding: 0.1rem !important;
+        margin-top: 1rem !important;
       }
     }
   }
diff --git a/src/views/index.vue b/src/views/index.vue
index abd3236..fcb2500 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -247,6 +247,10 @@ export default {
     this.getProject();
     this.getHomeData();
     this.getSubData();
+    // // 在组件挂载后尝试进入全屏
+    // setTimeout(() => {
+    //   this.requestFullscreen();
+    // }, 100); // 延迟 100 毫秒执行全屏操作
     // this.initChart();
     // window.addEventListener("resize", this.screenAdapter);
     // this.screenAdapter();
@@ -257,6 +261,23 @@ export default {
     // window.removeEventListener("resize", this.screenAdapter);
   },
   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();
+      }
+    },
     // 获取项目简介数据
     getProject() {
       this.imgUrl = imgUrl;
@@ -725,15 +746,15 @@ export default {
 }
 @media (max-width: 1485px) {
   .overview-li {
-      width: calc(33.33%) !important;
-      height: 2rem !important;
-      background-size: 2rem 2rem !important;
-      margin-bottom: 0.3rem;
-      font-size: 0.22rem !important;
-      .overview-details {
-        font-size: 0.27rem !important;
-      }
+    width: calc(33.33%) !important;
+    height: 2rem !important;
+    background-size: 2rem 2rem !important;
+    margin-bottom: 0.3rem;
+    font-size: 0.22rem !important;
+    .overview-details {
+      font-size: 0.27rem !important;
     }
+  }
   .project-bie {
     flex-wrap: wrap !important;
     .special-div {
@@ -743,5 +764,6 @@ export default {
   }
 }
 // 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {}
+@media (min-width: 2000px) {
+}
 </style>
diff --git a/src/views/temSys/temMonitor/index copy.vue b/src/views/temSys/temMonitor/index copy.vue
new file mode 100644
index 0000000..33ecc49
--- /dev/null
+++ b/src/views/temSys/temMonitor/index copy.vue	
@@ -0,0 +1,1021 @@
+<template>
+  <div class="app-container">
+    <div class="left-tree">
+      <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
+      <div style="height: 7rem; overflow-y: auto">
+        <el-tree
+          ref="tree"
+          :data="treeData"
+          node-key="id"
+          :default-expand-all="false"
+          :default-expanded-keys="expandedKeys"
+          :auto-expand-parent="true"
+          icon-class="none"
+          @node-expand="handleNodeExpand"
+          @node-collapse="handleNodeCollapse"
+          :highlight-current="true"
+          @node-click="handleNodeClick"
+        >
+          <template #default="{ node }">
+            <span class="custom-tree-node">
+              <!-- 根据节点状态动态设置图标类名 -->
+              <div class="tree-left">
+                <i :class="getIconClass(node)" class="custom-tree-icon"></i>
+                <span class="tree-label">{{ node.label }}</span>
+              </div>
+            </span>
+          </template>
+        </el-tree>
+      </div>
+    </div>
+    <div class="right-monitor">
+      <div class="buildingDiv">
+        <div class="buildingDiv-left">
+          <img
+            class="title-bg"
+            src="../../../assets/images/title-bg.png"
+            alt=""
+          />
+          <div class="title-word">位置：{{ currentName }}</div>
+        </div>
+        <div class="buildingDiv-right">
+          <div class="wanrn-li">
+            <i class="el-icon-message-solid" style="color: #fe9805"></i>
+            <span>高温报警:</span>
+            <span class="red-text">{{ warningData }}个</span>
+          </div>
+          <div class="wanrn-li">
+            <i class="el-icon-message-solid" style="color: #fa260a"></i>
+            <span>离线设备:</span>
+            <span class="gray-text">{{ offlineData / 2 }}个</span>
+          </div>
+        </div>
+      </div>
+      <div class="tem-data">
+        <div class="tem-li" v-for="(item, index) in tableData" :key="index">
+          <div class="temli-top">
+            <div>
+              <div class="temli-title">{{ item.houseName }}</div>
+            </div>
+            <div class="top-right">
+              <!-- 可能有高温报警的img -->
+              <img
+                v-if="getDeviceWarning(item.deviceList, '12')"
+                src="../../../assets/images/warning.png"
+                class="warning-img"
+                alt=""
+              />
+              <!-- 在线状态 -->
+              <img
+                src="../../../assets/images/online.png"
+                class="online"
+                alt=""
+                v-if="getDevicStatus(item.deviceList, '12')"
+              />
+              <img
+                src="../../../assets/images/offline.png"
+                class="online"
+                alt=""
+                v-else
+              />
+              <!-- 详情 -->
+              <div
+                class="details"
+                @click="getHistory(item)"
+                title="查看历史记录"
+              >
+                <i class="el-icon-s-data"></i>
+              </div>
+            </div>
+          </div>
+          <!-- 显示温度 -->
+          <div
+            class="tem"
+            v-if="getDeviceByParamType(item.deviceList, '12')"
+            :class="{ warningClass: getDeviceWarning(item.deviceList, '12') }"
+          >
+            <div class="tem-word">
+              <img
+                v-if="getDeviceWarning(item.deviceList, '12')"
+                class="tem-img"
+                src="../../../assets/images/tem-warning.png"
+                alt=""
+              />
+              <img
+                v-else
+                class="tem-img"
+                src="../../../assets/images/tem-normal.png"
+                alt=""
+              />
+              <div class="tem-middle">
+                <div>
+                  {{ getDeviceByParamType(item.deviceList, "12").otherName }}
+                </div>
+                <div class="en-text">Temperature</div>
+              </div>
+            </div>
+            <div class="tem-right">
+              <span class="tem-num">{{
+                getDeviceByParamType(item.deviceList, "12").curValue
+              }}</span>
+              <span>℃</span>
+            </div>
+          </div>
+          <!-- 显示湿度 -->
+          <div class="tem" v-if="getDeviceByParamType(item.deviceList, '32')">
+            <div class="tem-word">
+              <img
+                class="tem-img"
+                src="../../../assets/images/hum-normal.png"
+                alt=""
+              />
+              <div class="tem-middle">
+                <div>
+                  {{ getDeviceByParamType(item.deviceList, "32").otherName }}
+                </div>
+                <div class="en-text">Humidity</div>
+              </div>
+            </div>
+            <div class="tem-right">
+              <span class="tem-num">{{
+                getDeviceByParamType(item.deviceList, "32").curValue
+              }}</span>
+              <span>%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 历史数据弹框 -->
+    <el-dialog title="当日数据" :visible.sync="openDialog" append-to-body>
+      <div class="charts" ref="chart_ref"></div>
+    </el-dialog>
+    <!-- <div class="charts" ref="chart_ref"></div> -->
+  </div>
+</template>
+
+<script>
+import { spaceTree } from "@/api/region";
+import { format } from "@/utils/datetime";
+import { temList, temHistory } from "@/api/temSys/temMonitor";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      loading: false,
+      treeData: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      deviceList: [],
+      expandedKeys: [],
+      currentId: "", //当前选中高亮的id
+      currentName: "", //当前选中的名称
+      currentLevel: "", //当前节点的层级
+      currentParentId: "", //当前节点的上级的id
+
+      tableData: [], //系统状态表格数据
+      openDialog: false,
+      chartInstance: null,
+      option: {},
+      chartData1: [],
+      chartData2: [],
+      bottomData: [],
+      warningData: 0,
+      offlineData: 0,
+    };
+  },
+  mounted() {
+    this.getSysBuild();
+  },
+  destroyed() {
+    //取消监听器
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    getSysBuild() {
+      spaceTree().then((res) => {
+        if (res.code == 200) {
+          // 只需要保留热水的系统
+          console.log("楼栋返回值", res);
+          let newRes = { ...res };
+
+          if (newRes.data && newRes.data[0] && newRes.data[0].children) {
+            newRes.data[0].children = newRes.data[0].children.filter((item) => {
+              // 假设子项有一个 label属性，用于检查是否包含 "热水"
+              return item.label && item.label.includes("温度监测");
+            });
+          }
+          console.log("newRes.data[0]", newRes.data[0]);
+          // 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级
+          const targetLevel = 4;
+          // 从 data[0] 开始处理，当前层级为 1
+          if (newRes.data[0]) {
+            this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel);
+          }
+          console.log("筛选后的新结果", newRes);
+          this.treeData = newRes.data;
+          this.$nextTick(() => {
+            // 默认展开节点
+            this.getExpandedKeys(this.treeData, 1);
+            if (this.treeData.length > 0) {
+              // 找到最后一层的第一个子节点
+              const lastLevelFirstChild = this.findLastLevelFirstChild(
+                this.treeData[0]
+              );
+              // this.$refs.tree.setCurrentKey(
+              //   this.treeData[0].children[0].children[0].children[0].id
+              // );
+              // 设置当前选中的节点,默认高亮
+              this.$refs.tree.setCurrentKey(lastLevelFirstChild.id);
+              // 更新当前节点的信息
+              this.currentId = lastLevelFirstChild.id;
+              this.currentLevel = lastLevelFirstChild.level;
+              this.currentName = lastLevelFirstChild.label;
+              console.log("当前选中节点ID", this.currentId);
+              console.log("当前选中节点层级", this.currentLevel);
+              console.log("当前选中节点名称", this.currentName);
+              this.getTemList();
+            }
+          });
+        }
+      });
+    },
+    // 递归函数，用于去除指定层级往后的 children 数据
+    removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
+      if (currentLevel >= targetLevel) {
+        // 当达到指定层级时，将 children 属性置为空数组
+        obj.children = [];
+        return;
+      }
+      if (obj.children && obj.children.length > 0) {
+        // 若存在 children 数组，则递归处理每个子项
+        for (let i = 0; i < obj.children.length; i++) {
+          this.removeChildrenAfterLevel(
+            obj.children[i],
+            currentLevel + 1,
+            targetLevel
+          );
+        }
+      }
+    },
+    // 递归函数，找到最后一层的第一个子节点
+    findLastLevelFirstChild(node, level = 1) {
+      if (!node.children || node.children.length === 0) {
+        return {
+          id: node.id,
+          level,
+          label: node.label,
+        };
+      }
+      return this.findLastLevelFirstChild(node.children[0], level + 1);
+    },
+    // 默认只展示一二级菜单
+    getExpandedKeys(nodes, level) {
+      nodes.forEach((node) => {
+        if (level <= this.currentId + 4) {
+          this.expandedKeys.push(node.id);
+        }
+        if (node.children) {
+          this.getExpandedKeys(node.children, level + 1);
+        }
+      });
+    },
+    // 更换图标
+    getIconClass(node) {
+      // console.log("当前图标的节点内容", node);
+      if (node.level === 4) {
+        // 4级菜单时的图标
+        if (node.expanded) {
+          return "el-icon-document"; // 4级菜单展开时的图标类名
+        }
+        return "el-icon-document"; // 4级菜单收缩时的图标类名
+      }
+      if (node.expanded) {
+        return "el-icon-folder-opened"; // 4三级菜单展开时的图标类名
+      }
+      return "el-icon-folder-add"; // 4三级菜单收缩时的图标类名
+    },
+    handleNodeExpand(node) {
+      // 节点展开时触发
+    },
+    handleNodeCollapse(node) {
+      // 节点收缩时触发
+    },
+    // 点击当前节点，保存节点内容
+    handleNodeClick(node, data) {
+      console.log("点击的当前节点", node, data);
+      if (data.level !== 4) {
+        console.log("不是第4层000");
+        // 设置当前选中的节点,默认高亮
+        this.$refs.tree.setCurrentKey(this.currentId);
+        console.log("当前选中节点ID", this.currentId);
+        console.log("当前选中节点层级", this.currentLevel);
+        console.log("当前选中节点名称", this.currentName);
+      } else {
+        console.log("第5层111");
+        this.currentId = node.id;
+        this.currentLevel = data.level;
+        this.currentName = node.label;
+        // 设置当前选中的节点,默认高亮
+        this.$refs.tree.setCurrentKey(this.currentId);
+        console.log("当前选中节点ID", this.currentId);
+        console.log("当前选中节点层级", this.currentLevel);
+        console.log("当前选中节点名称", this.currentName);
+        this.getTemList();
+      }
+    },
+    getTemList() {
+      let data = {
+        systemType: "4",
+        floorId: this.currentId,
+      };
+      temList(data).then((res) => {
+        console.log("温度返回", res);
+        this.warningData = 0;
+        this.offlineData = 0;
+        if (res.code == 200) {
+          this.tableData = res.rows;
+          // 统计高温报警和离线的数据
+          this.tableData.forEach((item) => {
+            item.deviceList.forEach((device) => {
+              if (device.alarmStatus === 1) {
+                this.warningData++;
+              }
+              if (device.status !== 0) {
+                this.offlineData++;
+              }
+            });
+          });
+        } else {
+          this.tableData = [];
+          this.warningData = 0;
+          this.offlineData = 0;
+        }
+      });
+    },
+    getDeviceByParamType(deviceList, paramType) {
+      let obj = deviceList.find((device) => device.paramType === paramType);
+      return obj;
+    },
+    // 高温报警
+    getDeviceWarning(deviceList, paramType) {
+      // console.log("deviceList", deviceList);
+      return deviceList.some((item) => {
+        // console.log("item.paramType", item.paramType);
+        // console.log("item.alarmStatus", item.alarmStatus);
+        if (item.paramType === paramType && item.alarmStatus === 1) {
+          // console.log("返回true了呀");
+          return true;
+        }
+        return false;
+      });
+    },
+    // 设备在线状态
+    getDevicStatus(deviceList, paramType) {
+      // console.log("在线状态deviceList", deviceList);
+      return deviceList.some((item) => {
+        if (item.paramType === paramType && item.status === 0) {
+          // console.log("返回true了呀");
+          return true;
+        }
+        return false;
+      });
+    },
+    getHistory(item) {
+      console.log("item", item);
+      // 打开当前房间的历史记录的内容
+      this.openDialog = true;
+      this.$nextTick(() => {
+        this.echartsData(item.houseId);
+      });
+    },
+    echartsData(id) {
+      const start = new Date(new Date().setHours(0, 0, 0, 0));
+      const end = new Date(new Date().setHours(23, 59, 59, 59));
+      let data = {
+        systemType: "4",
+        houseIds: [id],
+        startTime: format(start),
+        endTime: format(end),
+      };
+      temHistory(data).then((res) => {
+        console.log("历史数据返回", res);
+        if (res.code == 200) {
+          let data = res.rows[0].dataList;
+          this.chartData1 = [];
+          this.chartData2 = [];
+          this.bottomData = [];
+          console.log("data", data);
+          data.forEach((item) => {
+            // 处理 chartData1
+            const value1 =
+              item.indoorTemp === null || item.indoorTemp === ""
+                ? 0
+                : item.indoorTemp;
+            this.chartData1.push(value1);
+
+            // 假设 item 中对应 chartData2 的字段是 indoorHumidity
+            const value2 =
+              item.indoorHumidity === null || item.indoorHumidity === ""
+                ? 0
+                : item.indoorHumidity;
+            this.chartData2.push(value2);
+
+            // 假设 item 中对应 bottomData 的字段是 curTime
+            const value3 =
+              item.curTime === null || item.curTime === "" ? 0 : item.curTime;
+            this.bottomData.push(value3);
+          });
+          this.initChart();
+          window.addEventListener("resize", this.screenAdapter);
+          this.screenAdapter();
+        }
+      });
+      // // chartData1是实线部分， chartData2是虚线代表预测部分
+      // // chartData2的值 为 [ chartData1的长度-1个" "空值,chartData1最后一个值, xxx，xxx，xxx ]
+      // const adapterOption = {
+      //   xAxis: {
+      //     data: this.bottomData,
+      //   },
+      //   series: [
+      //     {
+      //       yAxisIndex: 0,
+      //       data: this.chartData1,
+      //     },
+      //     {
+      //       yAxisIndex: 0,
+      //       data: this.chartData2,
+      //     },
+      //   ],
+      // };
+      // this.chartInstance.setOption(adapterOption);
+      // //手动的调用图标对象的resize才能产生效果
+      // this.chartInstance.resize();
+    },
+    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {};
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    //初始化chartInstance对象
+    initChart() {
+      const chartRef = this.$refs.chart_ref;
+      if (chartRef) {
+        // 初始化图表的代码
+        this.chartInstance = echarts.init(this.$refs.chart_ref);
+        const titleFontSize = this.$refs.chart_ref.offsetWidth / 70;
+        this.option = {
+          tooltip: {
+            trigger: "axis",
+            textStyle: {
+              // 设置提示框内文字的大小
+              fontSize: titleFontSize,
+            },
+          },
+          legend: {
+            show: true,
+            top: 10,
+            textStyle: {
+              color: "white",
+              fontSize: titleFontSize,
+            },
+          },
+          grid: {
+            top: "10%",
+            left: "4%",
+            right: "6%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            //设置为true代表离零刻度间隔一段距离
+            boundaryGap: true,
+            // 修饰刻度标签的颜色即x坐标数据
+            axisLabel: {
+              // interval: 0, //强制显示所有x轴数据
+              // rotate: 30, //x轴坐标字体倾斜30度
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize, //x轴文字大小
+            },
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            // x坐标轴的颜色
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#e2e6f0",
+              },
+            }, //x轴分割线
+            data: this.bottomData,
+          },
+          yAxis: {
+            min: 0,
+            // max:20,
+            // // // min:'dataMin',
+            // // // max:'dataMax',
+            // name: "kwh", // 第一个 y 轴的单位描述
+            // 设置 name 的样式
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12,
+            },
+            miniInterval: 5,
+            type: "value",
+            // 修饰刻度标签的颜色即y坐标数据
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize, //x轴文字大小
+            },
+            // 显示y坐标轴
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576", // 设置 y 轴线的颜色
+              },
+            },
+            //y轴分割线段数
+            // splitNumber: 10,
+            // 修改y轴分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              // 拐点大小
+              // 拐点大小
+              symbolSize: titleFontSize * 0.5,
+              lineStyle: {
+                // 设置折线的厚度
+                width: titleFontSize * 0.1,
+              },
+              data: this.chartData2,
+              name: "湿度",
+              //折线颜色
+              itemStyle: {
+                color: "#00CED1", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: true,
+              areaStyle: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: titleFontSize * 0.5,
+              lineStyle: {
+                // 设置折线的厚度
+                width: titleFontSize * 0.1,
+              },
+              data: this.chartData1,
+              name: "温度",
+              //折线颜色
+              itemStyle: {
+                color: "#1a69f1", //折线点的颜色
+              },
+              lineStyle: {
+                color: "#1a69f1", //折线点的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: true,
+              // 区域填充样式，添加渐变背景
+              areaStyle: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(26, 105, 241, 0)", // 渐变结束颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+          ],
+        };
+        //把配置项给实例对象
+        this.chartInstance.setOption(this.option, true);
+      } else {
+        console.error("未找到有效的 DOM 元素");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  height: 100%;
+  .left-tree {
+    width: 256px;
+    padding: 15px 10px 10px 10px;
+    border: 1px solid #004b8c;
+  }
+  .right-monitor {
+    width: calc(100% - 280px);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    .buildingDiv {
+      padding-left: 54px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      position: relative;
+      .title-bg {
+        width: 208px;
+        height: 38px;
+        position: absolute;
+        left: 0;
+        z-index: 0;
+      }
+      .title-word {
+        z-index: 10;
+        font-family: YouSheBiaoTiHei;
+        font-size: 24px;
+        color: #ffffff;
+        white-space: nowrap;
+      }
+      .buildingDiv-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 20px;
+        color: #c7dbe6;
+        font-size: 18px;
+        .wanrn-li {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-right: 50px;
+          .el-icon-message-solid {
+            margin-right: 3px;
+          }
+          .red-text {
+            color: #fe9805;
+            font-size: 20px;
+            font-weight: bold;
+            margin-left: 5px;
+          }
+          .gray-text {
+            color: #fa260a;
+            font-size: 20px;
+            font-weight: bold;
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+    .tem-data {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      height: 800px;
+      overflow-y: auto;
+      .tem-li {
+        display: flex;
+        flex-direction: column;
+        width: calc(33.33% - 20px);
+        height: 255px;
+        background-image: url(../../././../assets/images/border-7.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        padding: 20px;
+        margin: 0 10px 20px 10px;
+        transition: filter 0.3s ease;
+        .temli-top {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          color: #ffffff;
+          font-size: 18px;
+          margin-bottom: 15px;
+          .top-right {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            .online {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: center;
+              margin: 0 15px 0 0;
+              width: 25px;
+              height: 18px;
+            }
+          }
+        }
+        .temli-title {
+          height: 40px;
+          font-family: Arial, sans-serif;
+          font-size: 20px;
+          font-weight: bold;
+          color: #00aaff;
+          text-shadow: 0 0 5px rgba(0, 170, 255, 0.5);
+          margin-left: 7px;
+        }
+        .warning-img {
+          width: 35px;
+          height: 35px;
+          margin-right: 10px;
+          /* 添加闪烁动画 */
+          animation: blink 1s infinite;
+        }
+        @keyframes blink {
+          100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0;
+          }
+        }
+        .tem {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          color: #ffffff;
+          font-size: 18px;
+          .tem-word {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            .tem-img {
+              width: 80px;
+              height: 80px;
+              margin-right: 15px;
+            }
+            .tem-middle {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              justify-content: flex-start;
+              .en-text {
+                font-size: 13px;
+                margin-top: 10px;
+              }
+            }
+          }
+          .tem-right {
+            font-size: 16px;
+            margin-top: 15px;
+            .tem-num {
+              font-size: 30px;
+              font-weight: bold;
+              margin-right: 10px;
+            }
+          }
+        }
+        .warningClass {
+          color: #fe9805 !important;
+        }
+        .details {
+          background-color: #3c8dd4;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          text-align: center;
+          line-height: 40px;
+          cursor: pointer;
+        }
+      }
+      .details:hover .tem-li {
+        filter: brightness(
+          1.2
+        ); /* 降低亮度，使背景图片颜色更深，可根据需求调整数值 */
+        transform: scale(1.02);
+      }
+      .tem-li:hover {
+      }
+    }
+  }
+}
+.charts {
+  width: 870px;
+  height: 300px;
+}
+.tree-container {
+  height: 330px; /* 设置固定高度 */
+  overflow-y: auto; /* 启用垂直滚动条 */
+}
+// 滚动条
+:-webkit-scrollbar {
+  width: 10px; /* 滚动条宽度 */
+}
+
+::-webkit-scrollbar-track {
+  background: transparent !important; /* 滚动条轨道背景色 */
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+  .tree-left {
+    .custom-tree-icon {
+      margin-right: 5px;
+    }
+  }
+}
+@media (min-width: 1200px) and (max-width: 1540px) {
+  .tem-li {
+    width: calc(49% - 20px) !important;
+  }
+}
+@media (max-width: 1200px) {
+  .tem-li {
+    width: calc(100% - 40px) !important;
+  }
+}
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .app-container {
+    .left-tree {
+      width: 2.56rem !important;
+      padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
+    }
+    .right-monitor {
+      width: calc(100% - 2.8rem) !important;
+      .buildingDiv {
+        padding-left: 0.54rem !important;
+        margin-bottom: 0.2rem !important;
+        .title-bg {
+          width: 2.08rem !important;
+          height: 0.38rem !important;
+        }
+        .title-word {
+          font-size: 0.24rem !important;
+        }
+        .buildingDiv-right {
+          margin-right: 0.2rem !important;
+          font-size: 0.18rem !important;
+          .wanrn-li {
+            margin-right: 0.5rem !important;
+            .el-icon-message-solid {
+              margin-right: 0.03rem !important;
+            }
+            .red-text {
+              font-size: 0.2rem !important;
+              margin-left: 0.05rem !important;
+            }
+            .gray-text {
+              font-size: 0.2rem !important;
+              margin-left: 0.05rem !important;
+            }
+          }
+        }
+      }
+      .tem-data {
+        height: 8rem !important;
+        .tem-li {
+          width: calc(33.33% - 0.2rem) !important;
+          height: 2.55rem !important;
+          padding: 0.2rem !important;
+          margin: 0 0.1rem 0.2rem 0.1rem !important;
+          .temli-top {
+            font-size: 0.18rem !important;
+            margin-bottom: 0.15rem !important;
+            .top-right {
+              .online {
+                margin: 0 0.15rem 0 0 !important;
+                width: 0.25rem !important;
+                height: 0.18rem !important;
+              }
+            }
+          }
+          .temli-title {
+            height: 0.4rem !important;
+            font-size: 0.2rem !important;
+            margin-left: 0.07rem !important;
+          }
+          .warning-img {
+            width: 0.35rem !important;
+            height: 0.35rem !important;
+            margin-right: 0.1rem !important;
+          }
+          .tem {
+            font-size: 0.18rem !important;
+            .tem-word {
+              .tem-img {
+                width: 0.8rem !important;
+                height: 0.8rem !important;
+                margin-right: 0.15rem !important;
+              }
+              .tem-middle {
+                .en-text {
+                  font-size: 0.13rem !important;
+                  margin-top: 0.1rem !important;
+                }
+              }
+            }
+            .tem-right {
+              font-size: 0.16rem !important;
+              margin-top: 0.15rem !important;
+              .tem-num {
+                font-size: 0.3rem !important;
+                margin-right: 0.1rem !important;
+              }
+            }
+          }
+          .details {
+            width: 0.4rem !important;
+            height: 0.4rem !important;
+            line-height: 0.4rem !important;
+          }
+        }
+      }
+    }
+  }
+  .charts {
+    width: 8.7rem !important;
+    height: 3rem !important;
+  }
+}
+</style>
+<style scoped>
+/* 自定义高亮颜色 */
+.left-tree
+  >>> .el-tree--highlight-current
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+  background-color: #285b9e !important;
+  /* color: #f56c6c;  */
+  color: #25f1f8;
+}
+</style>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 900px !important;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 9rem !important;
+  }
+}
+</style>
diff --git a/src/views/temSys/temMonitor/index.vue b/src/views/temSys/temMonitor/index.vue
index 33ecc49..f0c7872 100644
--- a/src/views/temSys/temMonitor/index.vue
+++ b/src/views/temSys/temMonitor/index.vue
@@ -1,1021 +1,20 @@
 <template>
-  <div class="app-container">
-    <div class="left-tree">
-      <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
-      <div style="height: 7rem; overflow-y: auto">
-        <el-tree
-          ref="tree"
-          :data="treeData"
-          node-key="id"
-          :default-expand-all="false"
-          :default-expanded-keys="expandedKeys"
-          :auto-expand-parent="true"
-          icon-class="none"
-          @node-expand="handleNodeExpand"
-          @node-collapse="handleNodeCollapse"
-          :highlight-current="true"
-          @node-click="handleNodeClick"
-        >
-          <template #default="{ node }">
-            <span class="custom-tree-node">
-              <!-- 根据节点状态动态设置图标类名 -->
-              <div class="tree-left">
-                <i :class="getIconClass(node)" class="custom-tree-icon"></i>
-                <span class="tree-label">{{ node.label }}</span>
-              </div>
-            </span>
-          </template>
-        </el-tree>
-      </div>
-    </div>
-    <div class="right-monitor">
-      <div class="buildingDiv">
-        <div class="buildingDiv-left">
-          <img
-            class="title-bg"
-            src="../../../assets/images/title-bg.png"
-            alt=""
-          />
-          <div class="title-word">位置：{{ currentName }}</div>
-        </div>
-        <div class="buildingDiv-right">
-          <div class="wanrn-li">
-            <i class="el-icon-message-solid" style="color: #fe9805"></i>
-            <span>高温报警:</span>
-            <span class="red-text">{{ warningData }}个</span>
-          </div>
-          <div class="wanrn-li">
-            <i class="el-icon-message-solid" style="color: #fa260a"></i>
-            <span>离线设备:</span>
-            <span class="gray-text">{{ offlineData / 2 }}个</span>
-          </div>
-        </div>
-      </div>
-      <div class="tem-data">
-        <div class="tem-li" v-for="(item, index) in tableData" :key="index">
-          <div class="temli-top">
-            <div>
-              <div class="temli-title">{{ item.houseName }}</div>
-            </div>
-            <div class="top-right">
-              <!-- 可能有高温报警的img -->
-              <img
-                v-if="getDeviceWarning(item.deviceList, '12')"
-                src="../../../assets/images/warning.png"
-                class="warning-img"
-                alt=""
-              />
-              <!-- 在线状态 -->
-              <img
-                src="../../../assets/images/online.png"
-                class="online"
-                alt=""
-                v-if="getDevicStatus(item.deviceList, '12')"
-              />
-              <img
-                src="../../../assets/images/offline.png"
-                class="online"
-                alt=""
-                v-else
-              />
-              <!-- 详情 -->
-              <div
-                class="details"
-                @click="getHistory(item)"
-                title="查看历史记录"
-              >
-                <i class="el-icon-s-data"></i>
-              </div>
-            </div>
-          </div>
-          <!-- 显示温度 -->
-          <div
-            class="tem"
-            v-if="getDeviceByParamType(item.deviceList, '12')"
-            :class="{ warningClass: getDeviceWarning(item.deviceList, '12') }"
-          >
-            <div class="tem-word">
-              <img
-                v-if="getDeviceWarning(item.deviceList, '12')"
-                class="tem-img"
-                src="../../../assets/images/tem-warning.png"
-                alt=""
-              />
-              <img
-                v-else
-                class="tem-img"
-                src="../../../assets/images/tem-normal.png"
-                alt=""
-              />
-              <div class="tem-middle">
-                <div>
-                  {{ getDeviceByParamType(item.deviceList, "12").otherName }}
-                </div>
-                <div class="en-text">Temperature</div>
-              </div>
-            </div>
-            <div class="tem-right">
-              <span class="tem-num">{{
-                getDeviceByParamType(item.deviceList, "12").curValue
-              }}</span>
-              <span>℃</span>
-            </div>
-          </div>
-          <!-- 显示湿度 -->
-          <div class="tem" v-if="getDeviceByParamType(item.deviceList, '32')">
-            <div class="tem-word">
-              <img
-                class="tem-img"
-                src="../../../assets/images/hum-normal.png"
-                alt=""
-              />
-              <div class="tem-middle">
-                <div>
-                  {{ getDeviceByParamType(item.deviceList, "32").otherName }}
-                </div>
-                <div class="en-text">Humidity</div>
-              </div>
-            </div>
-            <div class="tem-right">
-              <span class="tem-num">{{
-                getDeviceByParamType(item.deviceList, "32").curValue
-              }}</span>
-              <span>%</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 历史数据弹框 -->
-    <el-dialog title="当日数据" :visible.sync="openDialog" append-to-body>
-      <div class="charts" ref="chart_ref"></div>
-    </el-dialog>
-    <!-- <div class="charts" ref="chart_ref"></div> -->
-  </div>
+  <div></div>
 </template>
 
 <script>
-import { spaceTree } from "@/api/region";
-import { format } from "@/utils/datetime";
-import { temList, temHistory } from "@/api/temSys/temMonitor";
-import * as echarts from "echarts";
 export default {
-  data() {
-    return {
-      loading: false,
-      treeData: [],
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
-      deviceList: [],
-      expandedKeys: [],
-      currentId: "", //当前选中高亮的id
-      currentName: "", //当前选中的名称
-      currentLevel: "", //当前节点的层级
-      currentParentId: "", //当前节点的上级的id
-
-      tableData: [], //系统状态表格数据
-      openDialog: false,
-      chartInstance: null,
-      option: {},
-      chartData1: [],
-      chartData2: [],
-      bottomData: [],
-      warningData: 0,
-      offlineData: 0,
-    };
-  },
-  mounted() {
-    this.getSysBuild();
-  },
-  destroyed() {
-    //取消监听器
-    window.removeEventListener("resize", this.screenAdapter);
+  created() {
+    this.toPage();
   },
   methods: {
-    getSysBuild() {
-      spaceTree().then((res) => {
-        if (res.code == 200) {
-          // 只需要保留热水的系统
-          console.log("楼栋返回值", res);
-          let newRes = { ...res };
-
-          if (newRes.data && newRes.data[0] && newRes.data[0].children) {
-            newRes.data[0].children = newRes.data[0].children.filter((item) => {
-              // 假设子项有一个 label属性，用于检查是否包含 "热水"
-              return item.label && item.label.includes("温度监测");
-            });
-          }
-          console.log("newRes.data[0]", newRes.data[0]);
-          // 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级
-          const targetLevel = 4;
-          // 从 data[0] 开始处理，当前层级为 1
-          if (newRes.data[0]) {
-            this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel);
-          }
-          console.log("筛选后的新结果", newRes);
-          this.treeData = newRes.data;
-          this.$nextTick(() => {
-            // 默认展开节点
-            this.getExpandedKeys(this.treeData, 1);
-            if (this.treeData.length > 0) {
-              // 找到最后一层的第一个子节点
-              const lastLevelFirstChild = this.findLastLevelFirstChild(
-                this.treeData[0]
-              );
-              // this.$refs.tree.setCurrentKey(
-              //   this.treeData[0].children[0].children[0].children[0].id
-              // );
-              // 设置当前选中的节点,默认高亮
-              this.$refs.tree.setCurrentKey(lastLevelFirstChild.id);
-              // 更新当前节点的信息
-              this.currentId = lastLevelFirstChild.id;
-              this.currentLevel = lastLevelFirstChild.level;
-              this.currentName = lastLevelFirstChild.label;
-              console.log("当前选中节点ID", this.currentId);
-              console.log("当前选中节点层级", this.currentLevel);
-              console.log("当前选中节点名称", this.currentName);
-              this.getTemList();
-            }
-          });
-        }
-      });
-    },
-    // 递归函数，用于去除指定层级往后的 children 数据
-    removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
-      if (currentLevel >= targetLevel) {
-        // 当达到指定层级时，将 children 属性置为空数组
-        obj.children = [];
-        return;
-      }
-      if (obj.children && obj.children.length > 0) {
-        // 若存在 children 数组，则递归处理每个子项
-        for (let i = 0; i < obj.children.length; i++) {
-          this.removeChildrenAfterLevel(
-            obj.children[i],
-            currentLevel + 1,
-            targetLevel
-          );
-        }
-      }
-    },
-    // 递归函数，找到最后一层的第一个子节点
-    findLastLevelFirstChild(node, level = 1) {
-      if (!node.children || node.children.length === 0) {
-        return {
-          id: node.id,
-          level,
-          label: node.label,
-        };
-      }
-      return this.findLastLevelFirstChild(node.children[0], level + 1);
-    },
-    // 默认只展示一二级菜单
-    getExpandedKeys(nodes, level) {
-      nodes.forEach((node) => {
-        if (level <= this.currentId + 4) {
-          this.expandedKeys.push(node.id);
-        }
-        if (node.children) {
-          this.getExpandedKeys(node.children, level + 1);
-        }
-      });
-    },
-    // 更换图标
-    getIconClass(node) {
-      // console.log("当前图标的节点内容", node);
-      if (node.level === 4) {
-        // 4级菜单时的图标
-        if (node.expanded) {
-          return "el-icon-document"; // 4级菜单展开时的图标类名
-        }
-        return "el-icon-document"; // 4级菜单收缩时的图标类名
-      }
-      if (node.expanded) {
-        return "el-icon-folder-opened"; // 4三级菜单展开时的图标类名
-      }
-      return "el-icon-folder-add"; // 4三级菜单收缩时的图标类名
-    },
-    handleNodeExpand(node) {
-      // 节点展开时触发
-    },
-    handleNodeCollapse(node) {
-      // 节点收缩时触发
-    },
-    // 点击当前节点，保存节点内容
-    handleNodeClick(node, data) {
-      console.log("点击的当前节点", node, data);
-      if (data.level !== 4) {
-        console.log("不是第4层000");
-        // 设置当前选中的节点,默认高亮
-        this.$refs.tree.setCurrentKey(this.currentId);
-        console.log("当前选中节点ID", this.currentId);
-        console.log("当前选中节点层级", this.currentLevel);
-        console.log("当前选中节点名称", this.currentName);
-      } else {
-        console.log("第5层111");
-        this.currentId = node.id;
-        this.currentLevel = data.level;
-        this.currentName = node.label;
-        // 设置当前选中的节点,默认高亮
-        this.$refs.tree.setCurrentKey(this.currentId);
-        console.log("当前选中节点ID", this.currentId);
-        console.log("当前选中节点层级", this.currentLevel);
-        console.log("当前选中节点名称", this.currentName);
-        this.getTemList();
-      }
-    },
-    getTemList() {
-      let data = {
-        systemType: "4",
-        floorId: this.currentId,
-      };
-      temList(data).then((res) => {
-        console.log("温度返回", res);
-        this.warningData = 0;
-        this.offlineData = 0;
-        if (res.code == 200) {
-          this.tableData = res.rows;
-          // 统计高温报警和离线的数据
-          this.tableData.forEach((item) => {
-            item.deviceList.forEach((device) => {
-              if (device.alarmStatus === 1) {
-                this.warningData++;
-              }
-              if (device.status !== 0) {
-                this.offlineData++;
-              }
-            });
-          });
-        } else {
-          this.tableData = [];
-          this.warningData = 0;
-          this.offlineData = 0;
-        }
-      });
-    },
-    getDeviceByParamType(deviceList, paramType) {
-      let obj = deviceList.find((device) => device.paramType === paramType);
-      return obj;
-    },
-    // 高温报警
-    getDeviceWarning(deviceList, paramType) {
-      // console.log("deviceList", deviceList);
-      return deviceList.some((item) => {
-        // console.log("item.paramType", item.paramType);
-        // console.log("item.alarmStatus", item.alarmStatus);
-        if (item.paramType === paramType && item.alarmStatus === 1) {
-          // console.log("返回true了呀");
-          return true;
-        }
-        return false;
-      });
-    },
-    // 设备在线状态
-    getDevicStatus(deviceList, paramType) {
-      // console.log("在线状态deviceList", deviceList);
-      return deviceList.some((item) => {
-        if (item.paramType === paramType && item.status === 0) {
-          // console.log("返回true了呀");
-          return true;
-        }
-        return false;
-      });
-    },
-    getHistory(item) {
-      console.log("item", item);
-      // 打开当前房间的历史记录的内容
-      this.openDialog = true;
-      this.$nextTick(() => {
-        this.echartsData(item.houseId);
-      });
-    },
-    echartsData(id) {
-      const start = new Date(new Date().setHours(0, 0, 0, 0));
-      const end = new Date(new Date().setHours(23, 59, 59, 59));
-      let data = {
-        systemType: "4",
-        houseIds: [id],
-        startTime: format(start),
-        endTime: format(end),
-      };
-      temHistory(data).then((res) => {
-        console.log("历史数据返回", res);
-        if (res.code == 200) {
-          let data = res.rows[0].dataList;
-          this.chartData1 = [];
-          this.chartData2 = [];
-          this.bottomData = [];
-          console.log("data", data);
-          data.forEach((item) => {
-            // 处理 chartData1
-            const value1 =
-              item.indoorTemp === null || item.indoorTemp === ""
-                ? 0
-                : item.indoorTemp;
-            this.chartData1.push(value1);
-
-            // 假设 item 中对应 chartData2 的字段是 indoorHumidity
-            const value2 =
-              item.indoorHumidity === null || item.indoorHumidity === ""
-                ? 0
-                : item.indoorHumidity;
-            this.chartData2.push(value2);
-
-            // 假设 item 中对应 bottomData 的字段是 curTime
-            const value3 =
-              item.curTime === null || item.curTime === "" ? 0 : item.curTime;
-            this.bottomData.push(value3);
-          });
-          this.initChart();
-          window.addEventListener("resize", this.screenAdapter);
-          this.screenAdapter();
-        }
-      });
-      // // chartData1是实线部分， chartData2是虚线代表预测部分
-      // // chartData2的值 为 [ chartData1的长度-1个" "空值,chartData1最后一个值, xxx，xxx，xxx ]
-      // const adapterOption = {
-      //   xAxis: {
-      //     data: this.bottomData,
-      //   },
-      //   series: [
-      //     {
-      //       yAxisIndex: 0,
-      //       data: this.chartData1,
-      //     },
-      //     {
-      //       yAxisIndex: 0,
-      //       data: this.chartData2,
-      //     },
-      //   ],
-      // };
-      // this.chartInstance.setOption(adapterOption);
-      // //手动的调用图标对象的resize才能产生效果
-      // this.chartInstance.resize();
-    },
-    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
-    screenAdapter() {
-      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
-      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
-      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
-      const adapterOption = {};
-      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-      this.chartInstance.setOption(adapterOption);
-      //手动的调用图标对象的resize才能产生效果
-      this.chartInstance.resize();
-    },
-    //初始化chartInstance对象
-    initChart() {
-      const chartRef = this.$refs.chart_ref;
-      if (chartRef) {
-        // 初始化图表的代码
-        this.chartInstance = echarts.init(this.$refs.chart_ref);
-        const titleFontSize = this.$refs.chart_ref.offsetWidth / 70;
-        this.option = {
-          tooltip: {
-            trigger: "axis",
-            textStyle: {
-              // 设置提示框内文字的大小
-              fontSize: titleFontSize,
-            },
-          },
-          legend: {
-            show: true,
-            top: 10,
-            textStyle: {
-              color: "white",
-              fontSize: titleFontSize,
-            },
-          },
-          grid: {
-            top: "10%",
-            left: "4%",
-            right: "6%",
-            bottom: "3%",
-            containLabel: true,
-          },
-          xAxis: {
-            type: "category",
-            //设置为true代表离零刻度间隔一段距离
-            boundaryGap: true,
-            // 修饰刻度标签的颜色即x坐标数据
-            axisLabel: {
-              // interval: 0, //强制显示所有x轴数据
-              // rotate: 30, //x轴坐标字体倾斜30度
-              color: "rgba(255, 255, 255, 1)",
-              fontSize: titleFontSize, //x轴文字大小
-            },
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            // x坐标轴的颜色
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#365576",
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: "#e2e6f0",
-              },
-            }, //x轴分割线
-            data: this.bottomData,
-          },
-          yAxis: {
-            min: 0,
-            // max:20,
-            // // // min:'dataMin',
-            // // // max:'dataMax',
-            // name: "kwh", // 第一个 y 轴的单位描述
-            // 设置 name 的样式
-            nameTextStyle: {
-              color: "rgba(255, 255, 255, 1)",
-              fontSize: 12,
-            },
-            miniInterval: 5,
-            type: "value",
-            // 修饰刻度标签的颜色即y坐标数据
-            axisLabel: {
-              color: "rgba(255, 255, 255, 1)",
-              fontSize: titleFontSize, //x轴文字大小
-            },
-            // 显示y坐标轴
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#365576", // 设置 y 轴线的颜色
-              },
-            },
-            //y轴分割线段数
-            // splitNumber: 10,
-            // 修改y轴分割线的颜色
-            splitLine: {
-              lineStyle: {
-                color: "#1a3d62", // 设置分割线的颜色
-                type: "dashed", // 设置分割线为虚线
-              },
-            },
-          },
-          series: [
-            {
-              type: "line",
-              // 拐点大小
-              // 拐点大小
-              symbolSize: titleFontSize * 0.5,
-              lineStyle: {
-                // 设置折线的厚度
-                width: titleFontSize * 0.1,
-              },
-              data: this.chartData2,
-              name: "湿度",
-              //折线颜色
-              itemStyle: {
-                color: "#00CED1", //折线的颜色
-              },
-              smooth: false,
-              // 不显示折线点
-              showSymbol: true,
-              areaStyle: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
-                    },
-                  ],
-                  global: false, // 缺省为 false
-                },
-              },
-            },
-            {
-              type: "line",
-              // 拐点大小
-              symbolSize: titleFontSize * 0.5,
-              lineStyle: {
-                // 设置折线的厚度
-                width: titleFontSize * 0.1,
-              },
-              data: this.chartData1,
-              name: "温度",
-              //折线颜色
-              itemStyle: {
-                color: "#1a69f1", //折线点的颜色
-              },
-              lineStyle: {
-                color: "#1a69f1", //折线点的颜色
-              },
-              smooth: false,
-              // 不显示折线点
-              showSymbol: true,
-              // 区域填充样式，添加渐变背景
-              areaStyle: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(26, 105, 241, 0)", // 渐变结束颜色
-                    },
-                  ],
-                  global: false, // 缺省为 false
-                },
-              },
-            },
-          ],
-        };
-        //把配置项给实例对象
-        this.chartInstance.setOption(this.option, true);
-      } else {
-        console.error("未找到有效的 DOM 元素");
-      }
+    toPage() {
+      console.log("需要跳转的")
+      // 跳转到展示
+      this.$router.push("/temMonitorDeatils")
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.app-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  height: 100%;
-  .left-tree {
-    width: 256px;
-    padding: 15px 10px 10px 10px;
-    border: 1px solid #004b8c;
-  }
-  .right-monitor {
-    width: calc(100% - 280px);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    .buildingDiv {
-      padding-left: 54px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 20px;
-      position: relative;
-      .title-bg {
-        width: 208px;
-        height: 38px;
-        position: absolute;
-        left: 0;
-        z-index: 0;
-      }
-      .title-word {
-        z-index: 10;
-        font-family: YouSheBiaoTiHei;
-        font-size: 24px;
-        color: #ffffff;
-        white-space: nowrap;
-      }
-      .buildingDiv-right {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-right: 20px;
-        color: #c7dbe6;
-        font-size: 18px;
-        .wanrn-li {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          margin-right: 50px;
-          .el-icon-message-solid {
-            margin-right: 3px;
-          }
-          .red-text {
-            color: #fe9805;
-            font-size: 20px;
-            font-weight: bold;
-            margin-left: 5px;
-          }
-          .gray-text {
-            color: #fa260a;
-            font-size: 20px;
-            font-weight: bold;
-            margin-left: 5px;
-          }
-        }
-      }
-    }
-    .tem-data {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-content: flex-start;
-      height: 800px;
-      overflow-y: auto;
-      .tem-li {
-        display: flex;
-        flex-direction: column;
-        width: calc(33.33% - 20px);
-        height: 255px;
-        background-image: url(../../././../assets/images/border-7.png);
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        padding: 20px;
-        margin: 0 10px 20px 10px;
-        transition: filter 0.3s ease;
-        .temli-top {
-          width: 100%;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: space-between;
-          color: #ffffff;
-          font-size: 18px;
-          margin-bottom: 15px;
-          .top-right {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            .online {
-              display: flex;
-              flex-direction: row;
-              align-items: center;
-              justify-content: center;
-              margin: 0 15px 0 0;
-              width: 25px;
-              height: 18px;
-            }
-          }
-        }
-        .temli-title {
-          height: 40px;
-          font-family: Arial, sans-serif;
-          font-size: 20px;
-          font-weight: bold;
-          color: #00aaff;
-          text-shadow: 0 0 5px rgba(0, 170, 255, 0.5);
-          margin-left: 7px;
-        }
-        .warning-img {
-          width: 35px;
-          height: 35px;
-          margin-right: 10px;
-          /* 添加闪烁动画 */
-          animation: blink 1s infinite;
-        }
-        @keyframes blink {
-          100% {
-            opacity: 1;
-          }
-          50% {
-            opacity: 0;
-          }
-        }
-        .tem {
-          width: 100%;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: space-between;
-          color: #ffffff;
-          font-size: 18px;
-          .tem-word {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            .tem-img {
-              width: 80px;
-              height: 80px;
-              margin-right: 15px;
-            }
-            .tem-middle {
-              display: flex;
-              flex-direction: column;
-              align-items: flex-start;
-              justify-content: flex-start;
-              .en-text {
-                font-size: 13px;
-                margin-top: 10px;
-              }
-            }
-          }
-          .tem-right {
-            font-size: 16px;
-            margin-top: 15px;
-            .tem-num {
-              font-size: 30px;
-              font-weight: bold;
-              margin-right: 10px;
-            }
-          }
-        }
-        .warningClass {
-          color: #fe9805 !important;
-        }
-        .details {
-          background-color: #3c8dd4;
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          text-align: center;
-          line-height: 40px;
-          cursor: pointer;
-        }
-      }
-      .details:hover .tem-li {
-        filter: brightness(
-          1.2
-        ); /* 降低亮度，使背景图片颜色更深，可根据需求调整数值 */
-        transform: scale(1.02);
-      }
-      .tem-li:hover {
-      }
-    }
-  }
-}
-.charts {
-  width: 870px;
-  height: 300px;
-}
-.tree-container {
-  height: 330px; /* 设置固定高度 */
-  overflow-y: auto; /* 启用垂直滚动条 */
-}
-// 滚动条
-:-webkit-scrollbar {
-  width: 10px; /* 滚动条宽度 */
-}
-
-::-webkit-scrollbar-track {
-  background: transparent !important; /* 滚动条轨道背景色 */
-}
-.custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  padding-right: 8px;
-  .tree-left {
-    .custom-tree-icon {
-      margin-right: 5px;
-    }
-  }
-}
-@media (min-width: 1200px) and (max-width: 1540px) {
-  .tem-li {
-    width: calc(49% - 20px) !important;
-  }
-}
-@media (max-width: 1200px) {
-  .tem-li {
-    width: calc(100% - 40px) !important;
-  }
-}
-// 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {
-  .app-container {
-    .left-tree {
-      width: 2.56rem !important;
-      padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
-    }
-    .right-monitor {
-      width: calc(100% - 2.8rem) !important;
-      .buildingDiv {
-        padding-left: 0.54rem !important;
-        margin-bottom: 0.2rem !important;
-        .title-bg {
-          width: 2.08rem !important;
-          height: 0.38rem !important;
-        }
-        .title-word {
-          font-size: 0.24rem !important;
-        }
-        .buildingDiv-right {
-          margin-right: 0.2rem !important;
-          font-size: 0.18rem !important;
-          .wanrn-li {
-            margin-right: 0.5rem !important;
-            .el-icon-message-solid {
-              margin-right: 0.03rem !important;
-            }
-            .red-text {
-              font-size: 0.2rem !important;
-              margin-left: 0.05rem !important;
-            }
-            .gray-text {
-              font-size: 0.2rem !important;
-              margin-left: 0.05rem !important;
-            }
-          }
-        }
-      }
-      .tem-data {
-        height: 8rem !important;
-        .tem-li {
-          width: calc(33.33% - 0.2rem) !important;
-          height: 2.55rem !important;
-          padding: 0.2rem !important;
-          margin: 0 0.1rem 0.2rem 0.1rem !important;
-          .temli-top {
-            font-size: 0.18rem !important;
-            margin-bottom: 0.15rem !important;
-            .top-right {
-              .online {
-                margin: 0 0.15rem 0 0 !important;
-                width: 0.25rem !important;
-                height: 0.18rem !important;
-              }
-            }
-          }
-          .temli-title {
-            height: 0.4rem !important;
-            font-size: 0.2rem !important;
-            margin-left: 0.07rem !important;
-          }
-          .warning-img {
-            width: 0.35rem !important;
-            height: 0.35rem !important;
-            margin-right: 0.1rem !important;
-          }
-          .tem {
-            font-size: 0.18rem !important;
-            .tem-word {
-              .tem-img {
-                width: 0.8rem !important;
-                height: 0.8rem !important;
-                margin-right: 0.15rem !important;
-              }
-              .tem-middle {
-                .en-text {
-                  font-size: 0.13rem !important;
-                  margin-top: 0.1rem !important;
-                }
-              }
-            }
-            .tem-right {
-              font-size: 0.16rem !important;
-              margin-top: 0.15rem !important;
-              .tem-num {
-                font-size: 0.3rem !important;
-                margin-right: 0.1rem !important;
-              }
-            }
-          }
-          .details {
-            width: 0.4rem !important;
-            height: 0.4rem !important;
-            line-height: 0.4rem !important;
-          }
-        }
-      }
-    }
-  }
-  .charts {
-    width: 8.7rem !important;
-    height: 3rem !important;
-  }
-}
-</style>
-<style scoped>
-/* 自定义高亮颜色 */
-.left-tree
-  >>> .el-tree--highlight-current
-  .el-tree-node.is-current
-  > .el-tree-node__content {
-  background-color: #285b9e !important;
-  /* color: #f56c6c;  */
-  color: #25f1f8;
-}
-</style>
-<style scoped lang="scss">
-/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
-@media (max-width: 2000px) {
-  ::v-deep .el-dialog {
-    width: 900px !important;
-  }
-}
-@media (min-width: 2000px) {
-  ::v-deep .el-dialog {
-    width: 9rem !important;
-  }
-}
-</style>
+<style></style>
\ No newline at end of file
diff --git a/src/views/temSys/temMonitor/temMonitorDeatils.vue b/src/views/temSys/temMonitor/temMonitorDeatils.vue
new file mode 100644
index 0000000..3fafa6e
--- /dev/null
+++ b/src/views/temSys/temMonitor/temMonitorDeatils.vue
@@ -0,0 +1,1415 @@
+<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 设置一个固定的高度和滚动条 -->
+        <div style="height: 5rem; overflow-y: auto">
+          <el-tree
+            ref="tree"
+            :data="treeData"
+            node-key="id"
+            :default-expand-all="false"
+            :default-expanded-keys="expandedKeys"
+            :auto-expand-parent="true"
+            icon-class="none"
+            @node-expand="handleNodeExpand"
+            @node-collapse="handleNodeCollapse"
+            :highlight-current="true"
+            @node-click="handleNodeClick"
+          >
+            <template #default="{ node }">
+              <span class="custom-tree-node">
+                <!-- 根据节点状态动态设置图标类名 -->
+                <div class="tree-left">
+                  <i :class="getIconClass(node)" class="custom-tree-icon"></i>
+                  <span class="tree-label">{{ node.label }}</span>
+                </div>
+              </span>
+            </template>
+          </el-tree>
+        </div>
+      </div>
+      <div class="right-monitor">
+        <div class="buildingDiv">
+          <div class="buildingDiv-left">
+            <img
+              class="title-bg"
+              src="../../../assets/images/title-bg.png"
+              alt=""
+            />
+            <div class="title-word">位置：{{ currentName }}</div>
+          </div>
+          <div class="buildingDiv-right">
+            <div class="wanrn-li">
+              <i class="el-icon-message-solid" style="color: #fe9805"></i>
+              <span>高温报警:</span>
+              <span class="red-text">{{ warningData }}个</span>
+            </div>
+            <div class="wanrn-li">
+              <i class="el-icon-message-solid" style="color: #fa260a"></i>
+              <span>离线设备:</span>
+              <span class="gray-text">{{ offlineData / 2 }}个</span>
+            </div>
+          </div>
+        </div>
+        <div class="tem-data">
+          <div class="tem-li" v-for="(item, index) in tableData" :key="index">
+            <div class="temli-top">
+              <div>
+                <div class="temli-title">{{ item.houseName }}</div>
+              </div>
+              <div class="top-right">
+                <!-- 可能有高温报警的img -->
+                <img
+                  v-if="getDeviceWarning(item.deviceList, '12')"
+                  src="../../../assets/images/warning.png"
+                  class="warning-img"
+                  alt=""
+                />
+                <!-- 在线状态 -->
+                <img
+                  src="../../../assets/images/online.png"
+                  class="online"
+                  alt=""
+                  v-if="getDevicStatus(item.deviceList, '12')"
+                />
+                <img
+                  src="../../../assets/images/offline.png"
+                  class="online"
+                  alt=""
+                  v-else
+                />
+                <!-- 详情 -->
+                <div
+                  class="details"
+                  @click="getHistory(item)"
+                  title="查看历史记录"
+                >
+                  <i class="el-icon-s-data"></i>
+                </div>
+              </div>
+            </div>
+            <!-- 显示温度 -->
+            <div
+              class="tem"
+              v-if="getDeviceByParamType(item.deviceList, '12')"
+              :class="{ warningClass: getDeviceWarning(item.deviceList, '12') }"
+            >
+              <div class="tem-word">
+                <img
+                  v-if="getDeviceWarning(item.deviceList, '12')"
+                  class="tem-img"
+                  src="../../../assets/images/tem-warning.png"
+                  alt=""
+                />
+                <img
+                  v-else
+                  class="tem-img"
+                  src="../../../assets/images/tem-normal.png"
+                  alt=""
+                />
+                <div class="tem-middle">
+                  <div>
+                    {{ getDeviceByParamType(item.deviceList, "12").otherName }}
+                  </div>
+                  <div class="en-text">Temperature</div>
+                </div>
+              </div>
+              <div class="tem-right">
+                <span class="tem-num">{{
+                  getDeviceByParamType(item.deviceList, "12").curValue
+                }}</span>
+                <span>℃</span>
+              </div>
+            </div>
+            <!-- 显示湿度 -->
+            <div class="tem" v-if="getDeviceByParamType(item.deviceList, '32')">
+              <div class="tem-word">
+                <img
+                  class="tem-img"
+                  src="../../../assets/images/hum-normal.png"
+                  alt=""
+                />
+                <div class="tem-middle">
+                  <div>
+                    {{ getDeviceByParamType(item.deviceList, "32").otherName }}
+                  </div>
+                  <div class="en-text">Humidity</div>
+                </div>
+              </div>
+              <div class="tem-right">
+                <span class="tem-num">{{
+                  getDeviceByParamType(item.deviceList, "32").curValue
+                }}</span>
+                <span>%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 历史数据弹框 -->
+      <el-dialog title="当日数据" :visible.sync="openDialog" append-to-body>
+        <div class="charts" ref="chart_ref"></div>
+      </el-dialog>
+      <!-- <div class="charts" ref="chart_ref"></div> -->
+    </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 { format } from "@/utils/datetime";
+import { temList, temHistory } from "@/api/temSys/temMonitor";
+import * as echarts from "echarts";
+export default {
+  name: "boilerMonitorDetails",
+  data() {
+    return {
+      loading: false,
+      currentDate: new Date(),
+      nowTimer: null,
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+      currentWeekday: "",
+      chartInstance: null,
+      option: {},
+      energyMes: {}, //饼图数据
+      // 报警列表
+      alarmList: [],
+
+      treeData: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      deviceList: [],
+      expandedKeys: [],
+      currentId: "", //当前选中高亮的id
+      currentName: "", //当前选中的名称
+      currentLevel: "", //当前节点的层级
+      currentParentId: "", //当前节点的上级的id
+
+      tableData: [], //系统状态表格数据
+      openDialog: false,
+      chartInstance: null,
+      option: {},
+      chartData1: [],
+      chartData2: [],
+      bottomData: [],
+      warningData: 0,
+      offlineData: 0,
+    };
+  },
+  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}`;
+    },
+  },
+  created() {
+    const weekdays = [
+      "星期日",
+      "星期一",
+      "星期二",
+      "星期三",
+      "星期四",
+      "星期五",
+      "星期六",
+    ];
+    const date = new Date();
+    const dayIndex = date.getDay();
+    this.currentWeekday = weekdays[dayIndex];
+    console.log("今天是星期几", this.currentWeekday);
+  },
+  mounted() {
+    this.getAlarnStatus();
+    this.getDayData();
+    this.getSysBuild();
+  },
+  destroyed() {
+    //取消监听器
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+  },
+  methods: {
+    // 进入系统首页
+    goSys() {
+      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.$router.push("/alarm/alarmRecord");
+    },
+    getSysBuild() {
+      spaceTree().then((res) => {
+        if (res.code == 200) {
+          // 只需要保留热水的系统
+          console.log("楼栋返回值", res);
+          let newRes = { ...res };
+
+          if (newRes.data && newRes.data[0] && newRes.data[0].children) {
+            newRes.data[0].children = newRes.data[0].children.filter((item) => {
+              // 假设子项有一个 label属性，用于检查是否包含 "热水"
+              return item.label && item.label.includes("温度监测");
+            });
+          }
+          console.log("newRes.data[0]", newRes.data[0]);
+          // 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级
+          const targetLevel = 4;
+          // 从 data[0] 开始处理，当前层级为 1
+          if (newRes.data[0]) {
+            this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel);
+          }
+          console.log("筛选后的新结果", newRes);
+          this.treeData = newRes.data;
+          this.$nextTick(() => {
+            // 默认展开节点
+            this.getExpandedKeys(this.treeData, 1);
+            if (this.treeData.length > 0) {
+              // 找到最后一层的第一个子节点
+              const lastLevelFirstChild = this.findLastLevelFirstChild(
+                this.treeData[0]
+              );
+              // this.$refs.tree.setCurrentKey(
+              //   this.treeData[0].children[0].children[0].children[0].id
+              // );
+              // 设置当前选中的节点,默认高亮
+              this.$refs.tree.setCurrentKey(lastLevelFirstChild.id);
+              // 更新当前节点的信息
+              this.currentId = lastLevelFirstChild.id;
+              this.currentLevel = lastLevelFirstChild.level;
+              this.currentName = lastLevelFirstChild.label;
+              console.log("当前选中节点ID", this.currentId);
+              console.log("当前选中节点层级", this.currentLevel);
+              console.log("当前选中节点名称", this.currentName);
+              this.getTemList();
+            }
+          });
+        }
+      });
+    },
+    // 递归函数，用于去除指定层级往后的 children 数据
+    removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
+      if (currentLevel >= targetLevel) {
+        // 当达到指定层级时，将 children 属性置为空数组
+        obj.children = [];
+        return;
+      }
+      if (obj.children && obj.children.length > 0) {
+        // 若存在 children 数组，则递归处理每个子项
+        for (let i = 0; i < obj.children.length; i++) {
+          this.removeChildrenAfterLevel(
+            obj.children[i],
+            currentLevel + 1,
+            targetLevel
+          );
+        }
+      }
+    },
+    // 递归函数，找到最后一层的第一个子节点
+    findLastLevelFirstChild(node, level = 1) {
+      if (!node.children || node.children.length === 0) {
+        return {
+          id: node.id,
+          level,
+          label: node.label,
+        };
+      }
+      return this.findLastLevelFirstChild(node.children[0], level + 1);
+    },
+    // 默认只展示一二级菜单
+    getExpandedKeys(nodes, level) {
+      nodes.forEach((node) => {
+        if (level <= this.currentId + 4) {
+          this.expandedKeys.push(node.id);
+        }
+        if (node.children) {
+          this.getExpandedKeys(node.children, level + 1);
+        }
+      });
+    },
+    // 更换图标
+    getIconClass(node) {
+      // console.log("当前图标的节点内容", node);
+      if (node.level === 4) {
+        // 4级菜单时的图标
+        if (node.expanded) {
+          return "el-icon-document"; // 4级菜单展开时的图标类名
+        }
+        return "el-icon-document"; // 4级菜单收缩时的图标类名
+      }
+      if (node.expanded) {
+        return "el-icon-folder-opened"; // 4三级菜单展开时的图标类名
+      }
+      return "el-icon-folder-add"; // 4三级菜单收缩时的图标类名
+    },
+    handleNodeExpand(node) {
+      // 节点展开时触发
+    },
+    handleNodeCollapse(node) {
+      // 节点收缩时触发
+    },
+    // 点击当前节点，保存节点内容
+    handleNodeClick(node, data) {
+      console.log("点击的当前节点", node, data);
+      if (data.level !== 4) {
+        console.log("不是第4层000");
+        // 设置当前选中的节点,默认高亮
+        this.$refs.tree.setCurrentKey(this.currentId);
+        console.log("当前选中节点ID", this.currentId);
+        console.log("当前选中节点层级", this.currentLevel);
+        console.log("当前选中节点名称", this.currentName);
+      } else {
+        console.log("第5层111");
+        this.currentId = node.id;
+        this.currentLevel = data.level;
+        this.currentName = node.label;
+        // 设置当前选中的节点,默认高亮
+        this.$refs.tree.setCurrentKey(this.currentId);
+        console.log("当前选中节点ID", this.currentId);
+        console.log("当前选中节点层级", this.currentLevel);
+        console.log("当前选中节点名称", this.currentName);
+        this.getTemList();
+      }
+    },
+    getTemList() {
+      let data = {
+        systemType: "4",
+        floorId: this.currentId,
+      };
+      temList(data).then((res) => {
+        console.log("温度返回", res);
+        this.warningData = 0;
+        this.offlineData = 0;
+        if (res.code == 200) {
+          this.tableData = res.rows;
+          // 统计高温报警和离线的数据
+          this.tableData.forEach((item) => {
+            item.deviceList.forEach((device) => {
+              if (device.alarmStatus === 1) {
+                this.warningData++;
+              }
+              if (device.status !== 0) {
+                this.offlineData++;
+              }
+            });
+          });
+        } else {
+          this.tableData = [];
+          this.warningData = 0;
+          this.offlineData = 0;
+        }
+      });
+    },
+    getDeviceByParamType(deviceList, paramType) {
+      let obj = deviceList.find((device) => device.paramType === paramType);
+      return obj;
+    },
+    // 高温报警
+    getDeviceWarning(deviceList, paramType) {
+      // console.log("deviceList", deviceList);
+      return deviceList.some((item) => {
+        // console.log("item.paramType", item.paramType);
+        // console.log("item.alarmStatus", item.alarmStatus);
+        if (item.paramType === paramType && item.alarmStatus === 1) {
+          // console.log("返回true了呀");
+          return true;
+        }
+        return false;
+      });
+    },
+    // 设备在线状态
+    getDevicStatus(deviceList, paramType) {
+      // console.log("在线状态deviceList", deviceList);
+      return deviceList.some((item) => {
+        if (item.paramType === paramType && item.status === 0) {
+          // console.log("返回true了呀");
+          return true;
+        }
+        return false;
+      });
+    },
+    getHistory(item) {
+      console.log("item", item);
+      // 打开当前房间的历史记录的内容
+      this.openDialog = true;
+      this.$nextTick(() => {
+        this.echartsData(item.houseId);
+      });
+    },
+    echartsData(id) {
+      const start = new Date(new Date().setHours(0, 0, 0, 0));
+      const end = new Date(new Date().setHours(23, 59, 59, 59));
+      let data = {
+        systemType: "4",
+        houseIds: [id],
+        startTime: format(start),
+        endTime: format(end),
+      };
+      temHistory(data).then((res) => {
+        console.log("历史数据返回", res);
+        if (res.code == 200) {
+          let data = res.rows[0].dataList;
+          this.chartData1 = [];
+          this.chartData2 = [];
+          this.bottomData = [];
+          console.log("data", data);
+          data.forEach((item) => {
+            // 处理 chartData1
+            const value1 =
+              item.indoorTemp === null || item.indoorTemp === ""
+                ? 0
+                : item.indoorTemp;
+            this.chartData1.push(value1);
+
+            // 假设 item 中对应 chartData2 的字段是 indoorHumidity
+            const value2 =
+              item.indoorHumidity === null || item.indoorHumidity === ""
+                ? 0
+                : item.indoorHumidity;
+            this.chartData2.push(value2);
+
+            // 假设 item 中对应 bottomData 的字段是 curTime
+            const value3 =
+              item.curTime === null || item.curTime === "" ? 0 : item.curTime;
+            this.bottomData.push(value3);
+          });
+          this.initChart();
+          window.addEventListener("resize", this.screenAdapter);
+          this.screenAdapter();
+          const dom = this.$refs.chart_ref;
+          const width = dom.clientWidth;
+          const height = dom.clientHeight;
+          if (width > 0 && height > 0) {
+            console.log("????????????????");
+          }
+        }
+      });
+      // // chartData1是实线部分， chartData2是虚线代表预测部分
+      // // chartData2的值 为 [ chartData1的长度-1个" "空值,chartData1最后一个值, xxx，xxx，xxx ]
+      // const adapterOption = {
+      //   xAxis: {
+      //     data: this.bottomData,
+      //   },
+      //   series: [
+      //     {
+      //       yAxisIndex: 0,
+      //       data: this.chartData1,
+      //     },
+      //     {
+      //       yAxisIndex: 0,
+      //       data: this.chartData2,
+      //     },
+      //   ],
+      // };
+      // this.chartInstance.setOption(adapterOption);
+      // //手动的调用图标对象的resize才能产生效果
+      // this.chartInstance.resize();
+    },
+    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {};
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    //初始化chartInstance对象
+    initChart() {
+      const chartRef = this.$refs.chart_ref;
+      if (chartRef) {
+        // 初始化图表的代码
+        this.chartInstance = echarts.init(this.$refs.chart_ref);
+        const titleFontSize = this.$refs.chart_ref.offsetWidth / 70;
+        this.option = {
+          tooltip: {
+            trigger: "axis",
+            textStyle: {
+              // 设置提示框内文字的大小
+              fontSize: titleFontSize,
+            },
+          },
+          legend: {
+            show: true,
+            top: 10,
+            textStyle: {
+              color: "white",
+              fontSize: titleFontSize,
+            },
+          },
+          grid: {
+            top: "10%",
+            left: "4%",
+            right: "6%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            //设置为true代表离零刻度间隔一段距离
+            boundaryGap: true,
+            // 修饰刻度标签的颜色即x坐标数据
+            axisLabel: {
+              // interval: 0, //强制显示所有x轴数据
+              // rotate: 30, //x轴坐标字体倾斜30度
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize, //x轴文字大小
+            },
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            // x坐标轴的颜色
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#e2e6f0",
+              },
+            }, //x轴分割线
+            data: this.bottomData,
+          },
+          yAxis: {
+            min: 0,
+            // max:20,
+            // // // min:'dataMin',
+            // // // max:'dataMax',
+            // name: "kwh", // 第一个 y 轴的单位描述
+            // 设置 name 的样式
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12,
+            },
+            miniInterval: 5,
+            type: "value",
+            // 修饰刻度标签的颜色即y坐标数据
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize, //x轴文字大小
+            },
+            // 显示y坐标轴
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576", // 设置 y 轴线的颜色
+              },
+            },
+            //y轴分割线段数
+            // splitNumber: 10,
+            // 修改y轴分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              // 拐点大小
+              // 拐点大小
+              symbolSize: titleFontSize * 0.5,
+              lineStyle: {
+                // 设置折线的厚度
+                width: titleFontSize * 0.1,
+              },
+              data: this.chartData2,
+              name: "湿度",
+              //折线颜色
+              itemStyle: {
+                color: "#00CED1", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: true,
+              areaStyle: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: titleFontSize * 0.5,
+              lineStyle: {
+                // 设置折线的厚度
+                width: titleFontSize * 0.1,
+              },
+              data: this.chartData1,
+              name: "温度",
+              //折线颜色
+              itemStyle: {
+                color: "#1a69f1", //折线点的颜色
+              },
+              lineStyle: {
+                color: "#1a69f1", //折线点的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: true,
+              // 区域填充样式，添加渐变背景
+              areaStyle: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(26, 105, 241, 0)", // 渐变结束颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+          ],
+        };
+        //把配置项给实例对象
+        this.chartInstance.setOption(this.option, true);
+      } else {
+        console.error("未找到有效的 DOM 元素");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.charts {
+  width: 870px;
+  height: 300px;
+}
+.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;
+    }
+  }
+  .app-container {
+    display: flex;
+    flex-direction: row;
+    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;
+      border: 1px solid #004b8c;
+    }
+    .right-monitor {
+      width: calc(100% - 280px);
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      .buildingDiv {
+        padding-left: 54px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20px;
+        position: relative;
+        .title-bg {
+          width: 208px;
+          height: 38px;
+          position: absolute;
+          left: 0;
+          z-index: 0;
+        }
+        .title-word {
+          z-index: 10;
+          font-family: YouSheBiaoTiHei;
+          font-size: 24px;
+          color: #ffffff;
+          white-space: nowrap;
+        }
+        .buildingDiv-right {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-right: 20px;
+          color: #c7dbe6;
+          font-size: 18px;
+          .wanrn-li {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin-right: 50px;
+            .el-icon-message-solid {
+              margin-right: 3px;
+            }
+            .red-text {
+              color: #fe9805;
+              font-size: 20px;
+              font-weight: bold;
+              margin-left: 5px;
+            }
+            .gray-text {
+              color: #fa260a;
+              font-size: 20px;
+              font-weight: bold;
+              margin-left: 5px;
+            }
+          }
+        }
+      }
+      .tem-data {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        height: 810px;
+        overflow-y: auto;
+        .tem-li {
+          display: flex;
+          flex-direction: column;
+          width: calc(33.33% - 20px);
+          height: 255px;
+          background-image: url(../../././../assets/images/border-7.png);
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          padding: 20px;
+          margin: 0 10px 20px 10px;
+          transition: filter 0.3s ease;
+          .temli-top {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            color: #ffffff;
+            font-size: 18px;
+            margin-bottom: 15px;
+            .top-right {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              .online {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                margin: 0 15px 0 0;
+                width: 25px;
+                height: 18px;
+              }
+            }
+          }
+          .temli-title {
+            height: 40px;
+            font-family: Arial, sans-serif;
+            font-size: 20px;
+            font-weight: bold;
+            color: #00aaff;
+            text-shadow: 0 0 5px rgba(0, 170, 255, 0.5);
+            margin-left: 7px;
+          }
+          .warning-img {
+            width: 35px;
+            height: 35px;
+            margin-right: 10px;
+            /* 添加闪烁动画 */
+            animation: blink 1s infinite;
+          }
+          @keyframes blink {
+            100% {
+              opacity: 1;
+            }
+            50% {
+              opacity: 0;
+            }
+          }
+          .tem {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            color: #ffffff;
+            font-size: 18px;
+            .tem-word {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              .tem-img {
+                width: 80px;
+                height: 80px;
+                margin-right: 15px;
+              }
+              .tem-middle {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: flex-start;
+                .en-text {
+                  font-size: 13px;
+                  margin-top: 10px;
+                }
+              }
+            }
+            .tem-right {
+              font-size: 16px;
+              margin-top: 15px;
+              .tem-num {
+                font-size: 30px;
+                font-weight: bold;
+                margin-right: 10px;
+              }
+            }
+          }
+          .warningClass {
+            color: #fe9805 !important;
+          }
+          .details {
+            background-color: #3c8dd4;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 40px;
+            cursor: pointer;
+          }
+        }
+        .details:hover .tem-li {
+          filter: brightness(
+            1.2
+          ); /* 降低亮度，使背景图片颜色更深，可根据需求调整数值 */
+          transform: scale(1.02);
+        }
+        .tem-li:hover {
+        }
+      }
+    }
+  }
+  .tree-container {
+    height: 330px; /* 设置固定高度 */
+    overflow-y: auto; /* 启用垂直滚动条 */
+  }
+  // 滚动条
+  :-webkit-scrollbar {
+    width: 10px; /* 滚动条宽度 */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent !important; /* 滚动条轨道背景色 */
+  }
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+    .tree-left {
+      .custom-tree-icon {
+        margin-right: 5px;
+      }
+    }
+  }
+  @media (min-width: 1200px) and (max-width: 1540px) {
+    .tem-li {
+      width: calc(49% - 20px) !important;
+    }
+  }
+  @media (max-width: 1200px) {
+    .tem-li {
+      width: calc(100% - 40px) !important;
+    }
+  }
+  // 媒体查询，适配大于2000px分辨率的大屏样式
+  @media (min-width: 2000px) {
+    .app-container {
+      .left-tree {
+        width: 2.56rem !important;
+        padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
+      }
+      .right-monitor {
+        width: calc(100% - 2.8rem) !important;
+        .buildingDiv {
+          padding-left: 0.54rem !important;
+          margin-bottom: 0.2rem !important;
+          .title-bg {
+            width: 2.08rem !important;
+            height: 0.38rem !important;
+          }
+          .title-word {
+            font-size: 0.24rem !important;
+          }
+          .buildingDiv-right {
+            margin-right: 0.2rem !important;
+            font-size: 0.18rem !important;
+            .wanrn-li {
+              margin-right: 0.5rem !important;
+              .el-icon-message-solid {
+                margin-right: 0.03rem !important;
+              }
+              .red-text {
+                font-size: 0.2rem !important;
+                margin-left: 0.05rem !important;
+              }
+              .gray-text {
+                font-size: 0.2rem !important;
+                margin-left: 0.05rem !important;
+              }
+            }
+          }
+        }
+        .tem-data {
+          height: 8rem !important;
+          .tem-li {
+            width: calc(33.33% - 0.2rem) !important;
+            height: 2.55rem !important;
+            padding: 0.2rem !important;
+            margin: 0 0.1rem 0.2rem 0.1rem !important;
+            .temli-top {
+              font-size: 0.18rem !important;
+              margin-bottom: 0.15rem !important;
+              .top-right {
+                .online {
+                  margin: 0 0.15rem 0 0 !important;
+                  width: 0.25rem !important;
+                  height: 0.18rem !important;
+                }
+              }
+            }
+            .temli-title {
+              height: 0.4rem !important;
+              font-size: 0.2rem !important;
+              margin-left: 0.07rem !important;
+            }
+            .warning-img {
+              width: 0.35rem !important;
+              height: 0.35rem !important;
+              margin-right: 0.1rem !important;
+            }
+            .tem {
+              font-size: 0.18rem !important;
+              .tem-word {
+                .tem-img {
+                  width: 0.8rem !important;
+                  height: 0.8rem !important;
+                  margin-right: 0.15rem !important;
+                }
+                .tem-middle {
+                  .en-text {
+                    font-size: 0.13rem !important;
+                    margin-top: 0.1rem !important;
+                  }
+                }
+              }
+              .tem-right {
+                font-size: 0.16rem !important;
+                margin-top: 0.15rem !important;
+                .tem-num {
+                  font-size: 0.3rem !important;
+                  margin-right: 0.1rem !important;
+                }
+              }
+            }
+            .details {
+              width: 0.4rem !important;
+              height: 0.4rem !important;
+              line-height: 0.4rem !important;
+            }
+          }
+        }
+      }
+    }
+    .charts {
+      width: 8.7rem !important;
+      height: 3rem !important;
+    }
+  }
+  // 手机端样式
+  @media (min-width: 0px) and (max-width: 990px) {
+    .tem-data {
+      height: 500px !important;
+      .tem-li {
+        display: flex;
+        flex-direction: column;
+        width: calc(49% - 0.2rem) !important;
+        height: 2.55rem !important;
+        padding: 0.2rem !important;
+        margin: 0 0.1rem 0.2rem 0.1rem !important;
+        .temli-top {
+          font-size: 0.18rem !important;
+          margin-bottom: 0.15rem !important;
+          .top-right {
+            .online {
+              margin: 0 0.15rem 0 0 !important;
+              width: 0.25rem !important;
+              height: 0.18rem !important;
+            }
+          }
+        }
+        .temli-title {
+          height: 0.4rem !important;
+          font-size: 0.2rem !important;
+          margin-left: 0.07rem !important;
+        }
+        .warning-img {
+          width: 0.35rem !important;
+          height: 0.35rem !important;
+          margin-right: 0.1rem !important;
+        }
+        .tem {
+          font-size: 0.18rem !important;
+          .tem-word {
+            .tem-img {
+              width: 0.8rem !important;
+              height: 0.8rem !important;
+              margin-right: 0.15rem !important;
+            }
+            .tem-middle {
+              .en-text {
+                font-size: 0.13rem !important;
+                margin-top: 0.1rem !important;
+              }
+            }
+          }
+          .tem-right {
+            font-size: 0.16rem !important;
+            margin-top: 0.15rem !important;
+            .tem-num {
+              font-size: 0.3rem !important;
+              margin-right: 0.1rem !important;
+            }
+          }
+        }
+        .details {
+          width: 0.4rem !important;
+          height: 0.4rem !important;
+          line-height: 0.4rem !important;
+        }
+      }
+    }
+    .buildingDiv {
+      padding-left: 0.54rem !important;
+      margin-bottom: 0.2rem !important;
+      .title-bg {
+        width: 2.08rem !important;
+        height: 0.38rem !important;
+      }
+      .title-word {
+        font-size: 15px !important;
+      }
+    }
+    .app-container {
+      padding: 0rem 0.2rem 0 0.35rem !important;
+    }
+    .app-container .left-tree {
+      width: 200px !important;
+      min-height: 340px !important;
+      padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
+    }
+    .app-container .tree-div {
+      height: 300px !important;
+      width: 100%;
+      overflow-x: hidden !important;
+    }
+    .app-container .right-monitor {
+      width: calc(100% - 210px) !important;
+    }
+    .custom-tree-node {
+      font-size: 12px !important;
+    }
+    .buildingDiv-right {
+      margin-right: 0.2rem !important;
+      font-size: 0.18rem !important;
+      .wanrn-li {
+        margin-right: 0.5rem !important;
+        .el-icon-message-solid {
+          margin-right: 0.03rem !important;
+        }
+        .red-text {
+          font-size: 0.2rem !important;
+          margin-left: 0.05rem !important;
+        }
+        .gray-text {
+          font-size: 0.2rem !important;
+          margin-left: 0.05rem !important;
+        }
+      }
+    }
+  }
+}
+</style>
+<style scoped>
+.special-div .special-title {
+  padding-left: 0.36rem !important;
+  font-size: 0.2rem !important;
+  line-height: 0.23rem !important;
+  background-size: 1.4rem 0.35rem !important;
+  background-position: 0px -0.03rem !important;
+}
+.special-div .special-top {
+  padding: 0.04rem 0.26rem 0.04rem 0px;
+  min-height: 0.37rem;
+}
+</style>
+<style scoped>
+/* 自定义高亮颜色 */
+.left-tree
+  >>> .el-tree--highlight-current
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+  background-color: #285b9e !important;
+  /* color: #f56c6c;  */
+  color: #25f1f8;
+}
+/* 手机端样式 */
+@media (min-width: 0px) and (max-width: 990px) {
+  .left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon {
+    padding: 3px !important;
+  }
+}
+</style>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 900px !important;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 9rem !important;
+  }
+}
+/* 手机端样式 */
+@media (min-width: 0px) and (max-width: 990px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-dialog__title {
+    font-size: 16px !important;
+  }
+  .charts {
+    width: 600px !important;
+    height: 300px;
+  }
+}
+</style>