diff --git a/src/api/alarm/alarmRecord.js b/src/api/alarm/alarmRecord.js
index 74e2707..b74f707 100644
--- a/src/api/alarm/alarmRecord.js
+++ b/src/api/alarm/alarmRecord.js
@@ -15,4 +15,12 @@ export function getAlarmRecord(ardId) {
     url: "/alarm/ard/" + ardId,
     method: "get",
   });
-}
\ No newline at end of file
+}
+// 修改报警记录状态
+export function updateAlarmRecord(data) {
+  return request({
+    url: "/alarm/ard",
+    method: "put",
+    data: data,
+  });
+}
diff --git a/src/api/centerairC/sysMonitor.js b/src/api/centerairC/sysMonitor.js
index 50806cd..8042a94 100644
--- a/src/api/centerairC/sysMonitor.js
+++ b/src/api/centerairC/sysMonitor.js
@@ -65,3 +65,19 @@ export function systemMode(query) {
     params: query,
   });
 }
+// 查询主机参数
+export function hostDetailsData(query) {
+  return request({
+    url: "/chillers/list",
+    method: "get",
+    params: query,
+  });
+}
+// 主机冷冻冷却进出水温度
+export function hostTemData(data) {
+  return request({
+    url: "/chillers/lineList",
+    method: "post",
+    data
+  });
+}
diff --git a/src/assets/icons/svg/arrow.svg b/src/assets/icons/svg/arrow.svg
new file mode 100644
index 0000000..e13aa66
--- /dev/null
+++ b/src/assets/icons/svg/arrow.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745981751444" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4350" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M978.46285085 519.68535919l-611.60394228 0L366.85890857 463.05536438 978.46285085 463.05536438l-2e-8 56.62999481z" fill="" p-id="4351"></path><path d="M360.30189532 689.14672739L30.97795841 495.73425621l329.32393691-198.63983493 0 392.05230611z" fill="" p-id="4352"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/back-icon.png b/src/assets/images/back-icon.png
new file mode 100644
index 0000000..fb7ff9b
Binary files /dev/null and b/src/assets/images/back-icon.png differ
diff --git a/src/assets/images/back.png b/src/assets/images/back.png
new file mode 100644
index 0000000..fb7ff9b
Binary files /dev/null and b/src/assets/images/back.png differ
diff --git a/src/assets/images/bar.png b/src/assets/images/bar.png
new file mode 100644
index 0000000..25e6117
Binary files /dev/null and b/src/assets/images/bar.png differ
diff --git a/src/assets/images/big.png b/src/assets/images/big.png
new file mode 100644
index 0000000..8338984
Binary files /dev/null and b/src/assets/images/big.png differ
diff --git a/src/assets/images/cicle1.png b/src/assets/images/cicle1.png
new file mode 100644
index 0000000..2c0c2e2
Binary files /dev/null and b/src/assets/images/cicle1.png differ
diff --git a/src/assets/images/circle.png b/src/assets/images/circle.png
new file mode 100644
index 0000000..6050513
Binary files /dev/null and b/src/assets/images/circle.png differ
diff --git a/src/assets/images/detail-line.png b/src/assets/images/detail-line.png
new file mode 100644
index 0000000..bc79eff
Binary files /dev/null and b/src/assets/images/detail-line.png differ
diff --git a/src/assets/images/di.png b/src/assets/images/di.png
new file mode 100644
index 0000000..86a05ba
Binary files /dev/null and b/src/assets/images/di.png differ
diff --git a/src/assets/images/fanBlade.png b/src/assets/images/fanBlade.png
new file mode 100644
index 0000000..518fd40
Binary files /dev/null and b/src/assets/images/fanBlade.png differ
diff --git a/src/assets/images/host-img3.png b/src/assets/images/host-img3.png
new file mode 100644
index 0000000..76784e1
Binary files /dev/null and b/src/assets/images/host-img3.png differ
diff --git a/src/assets/images/host-img4.png b/src/assets/images/host-img4.png
new file mode 100644
index 0000000..e662140
Binary files /dev/null and b/src/assets/images/host-img4.png differ
diff --git a/src/assets/images/menu.png b/src/assets/images/menu.png
new file mode 100644
index 0000000..5f4c712
Binary files /dev/null and b/src/assets/images/menu.png differ
diff --git a/src/assets/images/title-center.png b/src/assets/images/title-center.png
new file mode 100644
index 0000000..b61aaeb
Binary files /dev/null and b/src/assets/images/title-center.png differ
diff --git a/src/assets/images/title-left.png b/src/assets/images/title-left.png
new file mode 100644
index 0000000..0b83182
Binary files /dev/null and b/src/assets/images/title-left.png differ
diff --git a/src/assets/images/title-right.png b/src/assets/images/title-right.png
new file mode 100644
index 0000000..5f4c712
Binary files /dev/null and b/src/assets/images/title-right.png differ
diff --git a/src/assets/images/标题.png b/src/assets/images/标题.png
new file mode 100644
index 0000000..b61aaeb
Binary files /dev/null and b/src/assets/images/标题.png differ
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index c9bb3ec..e522185 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -1397,10 +1397,10 @@
 .popup-result {
   border: 1px solid #0e5191 !important;
 }
-.popup-result table span{
+.popup-result table span {
   border: 1px solid #0e5191 !important;
 }
-.popup-result .title{
+.popup-result .title {
   background: #405e7e !important;
 }
 .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
@@ -1408,9 +1408,34 @@
   border-right-color: transparent;
   border-left-color: transparent;
 }
-.el-tabs--border-card > .el-tabs__header .el-tabs__item{
+.el-tabs--border-card > .el-tabs__header .el-tabs__item {
   color: #c3cbd4;
 }
-.drawing-item:hover > .el-form-item, .drawing-row-item:hover > .el-form-item {
+.drawing-item:hover > .el-form-item,
+.drawing-row-item:hover > .el-form-item {
   background: #b6b6b6 !important;
+}
+.el-cascader__suggestion-list {
+  color: #a4b2af;
+}
+.el-cascader__suggestion-item:hover,
+.el-cascader__suggestion-item:focus {
+  background-color: #00b4ff;
+  color: #ffffff;
+}
+.el-cascader__search-input {
+  background: transparent !important;
+  color: #a4b2af;
+  margin-left: 10px !important;
+  min-width: 50px !important;
+  z-index: 0;
+}
+.el-input__suffix{
+  z-index: 10;
+}
+.el-cascader__tags {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
 }
\ No newline at end of file
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 3cc8b02..7ebc310 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -16,6 +16,14 @@
 
     <div class="right-menu">
       <template v-if="device !== 'mobile'">
+        <img
+          v-if="isShowWarning"
+          class="warning"
+          src="../../assets/images/warning.png"
+          title="报警记录"
+          @click="goWarning"
+          alt=""
+        />
         <search id="header-search" class="right-menu-item" />
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
       </template>
@@ -51,7 +59,8 @@ import TopNav from "@/components/TopNav";
 import Hamburger from "@/components/Hamburger";
 import Screenfull from "@/components/Screenfull";
 import Search from "@/components/HeaderSearch";
-
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { getDay } from "@/utils/datetime";
 export default {
   components: {
     Breadcrumb,
@@ -79,6 +88,14 @@ export default {
       },
     },
   },
+  data() {
+    return {
+      isShowWarning: false,
+    };
+  },
+  mounted() {
+    this.getAlarnStatus();
+  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch("app/toggleSideBar");
@@ -96,6 +113,27 @@ export default {
         })
         .catch(() => {});
     },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        console.log("请求了报警列表·············");
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      // this.exitFullscreen();
+      this.$router.push("/alarm/alarmRecord");
+    },
   },
 };
 </script>
@@ -126,6 +164,23 @@ export default {
       background: rgba(0, 0, 0, 0.025);
     }
   }
+  .warning {
+    width: 30px;
+    height: 30px;
+    margin: 0 10px;
+    z-index: 10;
+    cursor: pointer;
+    /* 添加闪烁动画 */
+    animation: blink 1s infinite;
+  }
+  @keyframes blink {
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
 
   .breadcrumb-container {
     float: left;
@@ -206,7 +261,11 @@ export default {
   .hamburger-container {
     line-height: 0.46rem !important;
   }
-
+  .warning {
+    width: 0.3rem !important;
+    height: 0.3rem !important;
+    margin: 0 0.1rem !important;
+  }
   .topmenu-container {
     left: 0.5rem !important;
   }
@@ -225,7 +284,7 @@ export default {
         margin-top: 0.05rem !important;
 
         .user-avatar {
-          width:0.4rem !important;
+          width: 0.4rem !important;
           height: 0.4rem !important;
           border-radius: 0.1rem !important;
         }
diff --git a/src/router/index.js b/src/router/index.js
index 795935a..39af3ca 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -90,7 +90,8 @@ export const constantRoutes = [
   },
     // 综合大屏
     {
-      path: "/bigScreen",
+      path: "/Screen",
+      name:"Screen",
       hidden: true,
       component: () => import("@/views/bigScreen/bigScreen"),
       meta: { title: "大屏总览", icon: "screen" },
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index b3c216a..882a08b 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,9 +1,9 @@
-import auth from '@/plugins/auth'
-import router, { constantRoutes, dynamicRoutes } from '@/router'
-import { getRouters } from '@/api/menu'
-import Layout from '@/layout/index'
-import ParentView from '@/components/ParentView'
-import InnerLink from '@/layout/components/InnerLink'
+import auth from "@/plugins/auth";
+import router, { constantRoutes, dynamicRoutes } from "@/router";
+import { getRouters } from "@/api/menu";
+import Layout from "@/layout/index";
+import ParentView from "@/components/ParentView";
+import InnerLink from "@/layout/components/InnerLink";
 
 const permission = {
   state: {
@@ -11,127 +11,216 @@ const permission = {
     addRoutes: [],
     defaultRoutes: [],
     topbarRouters: [],
-    sidebarRouters: []
+    sidebarRouters: [],
   },
   mutations: {
     SET_ROUTES: (state, routes) => {
-      state.addRoutes = routes
-      state.routes = constantRoutes.concat(routes)
+      state.addRoutes = routes;
+      state.routes = constantRoutes.concat(routes);
     },
     SET_DEFAULT_ROUTES: (state, routes) => {
-      state.defaultRoutes = constantRoutes.concat(routes)
+      state.defaultRoutes = constantRoutes.concat(routes);
     },
     SET_TOPBAR_ROUTES: (state, routes) => {
-      state.topbarRouters = routes
+      state.topbarRouters = routes;
     },
     SET_SIDEBAR_ROUTERS: (state, routes) => {
-      state.sidebarRouters = routes
+      state.sidebarRouters = routes;
     },
   },
   actions: {
     // 生成路由
     GenerateRoutes({ commit }) {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         // 向后端请求路由数据
-        getRouters().then(res => {
-          const sdata = JSON.parse(JSON.stringify(res.data))
-          const rdata = JSON.parse(JSON.stringify(res.data))
-          const sidebarRoutes = filterAsyncRouter(sdata)
-          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
+        getRouters().then((res) => {
+          const sdata = JSON.parse(JSON.stringify(res.data));
+          const rdata = JSON.parse(JSON.stringify(res.data));
+          const sidebarRoutes = filterAsyncRouter(sdata);
+          const rewriteRoutes = filterAsyncRouter(rdata, false, true);
           const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
-          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
+          rewriteRoutes.push({ path: "*", redirect: "/404", hidden: true });
+          // 如果动态的路由有中央空调-系统监控-系统监测页面，那就添加一个hidden为true非Layout的大屏页面
+          const result = checkRouteArray(
+            sidebarRoutes,
+            "centerairC",
+            "monitorControl",
+            "sysMonitor"
+          );
           router.addRoutes(asyncRoutes);
-          commit('SET_ROUTES', rewriteRoutes)
-          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
-          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
-          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
-          resolve(rewriteRoutes)
-        })
-      })
+          if (result) {
+            // console.log(
+            //   "满足条件,添加中央空调-系统监控-系统监测相关的大屏页面路由"
+            // );
+            // 定义要添加的多个路由对象数组
+            const additionalRoutes = [
+              {
+                path: "/monitorCenter",
+                name: "monitorCenter",
+                hidden: true,
+                component: () =>
+                  import("@/views/centerairC/sysMonitor/monitorCenter"),
+                meta: { title: "系统监测", icon: "screen" },
+              },
+              {
+                path: "/hostDetails",
+                name: "hostDetails",
+                hidden: true,
+                component: () =>
+                  import("@/views/centerairC/sysMonitor/hostDetails"),
+                meta: { title: "主机性能", icon: "new2" },
+              },
+              {
+                path: "/performance",
+                name: "performance",
+                hidden: true,
+                component: () =>
+                  import("@/views/centerairC/sysMonitor/performance"),
+                meta: { title: "冷机性能性能", icon: "new2" },
+              },
+              // 可以继续添加更多路由对象
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            additionalRoutes.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);
+          commit("SET_TOPBAR_ROUTES", sidebarRoutes);
+          console.log("返回的动态路由", sidebarRoutes);
+          console.log("静态的动态路由", constantRoutes);
+          resolve(rewriteRoutes);
+        });
+      });
+    },
+  },
+};
+//判断是否返回特定的菜单，再添加大屏路由的动态菜单
+function checkRouteArray(routes, ...paths) {
+  // 检查传入路径参数的数量，用于确定要检查的层级
+  const level = paths.length;
+  function checkLevel(route, currentLevel) {
+    // 如果当前层级的路径参数存在且当前路由的 path 包含该路径
+    if (
+      paths[currentLevel] &&
+      route.path &&
+      route.path.includes(paths[currentLevel])
+    ) {
+      // 如果已经到达指定的最后一层级，返回 true
+      if (currentLevel === level - 1) {
+        return true;
+      }
+      // 如果还有下一层级且当前路由有 children 属性
+      if (route.children) {
+        for (let i = 0; i < route.children.length; i++) {
+          const childRoute = route.children[i];
+          // 递归检查下一层级
+          if (checkLevel(childRoute, currentLevel + 1)) {
+            return true;
+          }
+        }
+      }
     }
+    return false;
   }
+
+  // 遍历路由数组，对每个一级路由调用 checkLevel 函数开始检查
+  for (let i = 0; i < routes.length; i++) {
+    const route = routes[i];
+    if (checkLevel(route, 0)) {
+      return true;
+    }
+  }
+  return false;
 }
 
 // 遍历后台传来的路由字符串，转换为组件对象
 function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
-  return asyncRouterMap.filter(route => {
+  return asyncRouterMap.filter((route) => {
     if (type && route.children) {
-      route.children = filterChildren(route.children)
+      route.children = filterChildren(route.children);
     }
     if (route.component) {
       // Layout ParentView 组件特殊处理
-      if (route.component === 'Layout') {
-        route.component = Layout
-      } else if (route.component === 'ParentView') {
-        route.component = ParentView
-      } else if (route.component === 'InnerLink') {
-        route.component = InnerLink
+      if (route.component === "Layout") {
+        route.component = Layout;
+      } else if (route.component === "ParentView") {
+        route.component = ParentView;
+      } else if (route.component === "InnerLink") {
+        route.component = InnerLink;
       } else {
-        route.component = loadView(route.component)
+        route.component = loadView(route.component);
       }
     }
     if (route.children != null && route.children && route.children.length) {
-      route.children = filterAsyncRouter(route.children, route, type)
+      route.children = filterAsyncRouter(route.children, route, type);
     } else {
-      delete route['children']
-      delete route['redirect']
+      delete route["children"];
+      delete route["redirect"];
     }
-    return true
-  })
+    return true;
+  });
 }
 
 function filterChildren(childrenMap, lastRouter = false) {
-  var children = []
+  var children = [];
   childrenMap.forEach((el, index) => {
     if (el.children && el.children.length) {
-      if (el.component === 'ParentView' && !lastRouter) {
-        el.children.forEach(c => {
-          c.path = el.path + '/' + c.path
+      if (el.component === "ParentView" && !lastRouter) {
+        el.children.forEach((c) => {
+          c.path = el.path + "/" + c.path;
           if (c.children && c.children.length) {
-            children = children.concat(filterChildren(c.children, c))
-            return
+            children = children.concat(filterChildren(c.children, c));
+            return;
           }
-          children.push(c)
-        })
-        return
+          children.push(c);
+        });
+        return;
       }
     }
     if (lastRouter) {
-      el.path = lastRouter.path + '/' + el.path
+      el.path = lastRouter.path + "/" + el.path;
       if (el.children && el.children.length) {
-        children = children.concat(filterChildren(el.children, el))
-        return
+        children = children.concat(filterChildren(el.children, el));
+        return;
       }
     }
-    children = children.concat(el)
-  })
-  return children
+    children = children.concat(el);
+  });
+  return children;
 }
 
 // 动态路由遍历，验证是否具备权限
 export function filterDynamicRoutes(routes) {
-  const res = []
-  routes.forEach(route => {
+  const res = [];
+  routes.forEach((route) => {
     if (route.permissions) {
       if (auth.hasPermiOr(route.permissions)) {
-        res.push(route)
+        res.push(route);
       }
     } else if (route.roles) {
       if (auth.hasRoleOr(route.roles)) {
-        res.push(route)
+        res.push(route);
       }
     }
-  })
-  return res
+  });
+  return res;
 }
 
 export const loadView = (view) => {
-  if (process.env.NODE_ENV === 'development') {
-    return (resolve) => require([`@/views/${view}`], resolve)
+  if (process.env.NODE_ENV === "development") {
+    return (resolve) => require([`@/views/${view}`], resolve);
   } else {
     // 使用 import 实现生产环境的路由懒加载
-    return () => import(`@/views/${view}`)
+    return () => import(`@/views/${view}`);
   }
-}
+};
 
-export default permission
+export default permission;
diff --git a/src/views/alarm/alarmCode/index.vue b/src/views/alarm/alarmCode/index.vue
index e85d995..3ee0494 100644
--- a/src/views/alarm/alarmCode/index.vue
+++ b/src/views/alarm/alarmCode/index.vue
@@ -83,7 +83,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['alarm:ac:add']">
           <el-button
             type="primary"
             icon="el-icon-plus"
@@ -94,7 +94,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="success-btn" v-hasPermi="['system:post:edit']">
+        <div class="success-btn" v-hasPermi="['alarm:ac:edit']">
           <el-button
             type="success"
             icon="el-icon-edit"
@@ -106,7 +106,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="delete-btn" v-hasPermi="['system:post:remove']">
+        <div class="delete-btn" v-hasPermi="['alarm:ac:remove']">
           <el-button
             type="delete"
             icon="el-icon-delete"
@@ -117,7 +117,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -127,7 +127,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -189,7 +189,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['alarm:ac:edit']"
             >修改</el-button
           >
           <el-button
@@ -197,7 +197,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
+            v-hasPermi="['alarm:ac:remove']"
             >删除</el-button
           >
         </template>
diff --git a/src/views/alarm/alarmRecord/index.vue b/src/views/alarm/alarmRecord/index.vue
index 5846c27..8a2dbe2 100644
--- a/src/views/alarm/alarmRecord/index.vue
+++ b/src/views/alarm/alarmRecord/index.vue
@@ -67,6 +67,30 @@
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
+          <el-form-item label="处理状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="选择处理状态"
+              clearable
+            >
+              <el-option label="未处理" value="0" />
+              <el-option label="已处理" value="1" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="日期范围" prop="timeArr">
+            <el-date-picker
+              style="width: 220px"
+              v-model="timeArr"
+              type="daterange"
+              unlink-panels
+              range-separator="~"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+              @change="dateChange"
+            >
+            </el-date-picker>
+          </el-form-item>
         </el-form>
         <div class="primary-btn">
           <el-button
@@ -86,7 +110,7 @@
             >重置</el-button
           >
         </div>
-        <div class="warning-btn" v-hasPermi="['system:post:export']">
+        <!-- <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
             icon="el-icon-download"
@@ -94,7 +118,7 @@
             @click="handleExport"
             >导出</el-button
           >
-        </div>
+        </div> -->
       </div>
     </div>
     <el-table v-loading="loading" :data="postList" stripe>
@@ -125,16 +149,25 @@
         </template>
       </el-table-column>
       <el-table-column label="报警内容" align="center" prop="content" />
-      <!-- <el-table-column
-          label="更新时间"
-          align="center"
-          prop="updateTime"
-          width="180"
-        >
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.updateTime) }}</span>
-          </template>
-        </el-table-column> -->
+      <el-table-column label="报警时间" align="center" prop="createTime">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="处理状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <span
+            :class="getStatusClass(scope.row.status)"
+            v-if="scope.row.status === 0"
+            >未处理</span
+          >
+          <span
+            :class="getStatusClass(scope.row.status)"
+            v-if="scope.row.status === 1"
+            >已处理</span
+          >
+        </template>
+      </el-table-column>
       <el-table-column
         label="操作"
         align="center"
@@ -144,9 +177,17 @@
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-tickets"
+            icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['alarm:ard:edit']"
+            >处理</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-tickets"
+            @click="handleLook(scope.row)"
+            v-hasPermi="['alarm:ard:query']"
             >详情</el-button
           >
         </template>
@@ -226,19 +267,19 @@
         <el-row type="flex" justify="center">
           <el-col :span="12">
             <el-form-item label="仪表名称" prop="cpmName">
-              <el-input v-model="form.cpmName"  readonly />
+              <el-input v-model="form.cpmName" readonly />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="报警时间" prop="createTime">
-              <el-input v-model="form.createTime"  readonly />
+              <el-input v-model="form.createTime" readonly />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row type="flex" justify="center">
           <el-col :span="24">
             <el-form-item label="报警内容" prop="content">
-              <el-input v-model="form.content" type="textarea"  readonly />
+              <el-input v-model="form.content" type="textarea" readonly />
             </el-form-item>
           </el-col>
         </el-row>
@@ -251,13 +292,18 @@
 </template>
 
 <script>
-import { alarmRecordList, getAlarmRecord } from "@/api/alarm/alarmRecord";
+import {
+  alarmRecordList,
+  getAlarmRecord,
+  updateAlarmRecord,
+} from "@/api/alarm/alarmRecord";
 
 export default {
   name: "alarmRecord",
   dicts: ["alarm_type", , "alarm_type", "alarm_event_type", "alarm_level"],
   data() {
     return {
+      timeArr: [],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -285,6 +331,9 @@ export default {
         eventType: "",
         alarmLevel: "",
         content: "",
+        status: "",
+        beginTime: "",
+        endTime: "",
       },
       // 表单参数
       form: {},
@@ -296,14 +345,36 @@ export default {
     this.getList();
   },
   methods: {
+    // 表格动态类名
+    getStatusClass(status) {
+      switch (status) {
+        case 0:
+          return "status-green";
+        case 1:
+          return "status-red";
+        default:
+          return "";
+      }
+    },
+    // 选中日期事件
+    dateChange() {
+      // console.log("打印时间", this.timeArr);
+      if (!this.timeArr) {
+        this.$nextTick(() => {
+          this.timeArr = [];
+        });
+      }
+    },
     /** 查询报警编码列表 */
     getList() {
       this.loading = true;
-      alarmRecordList(this.queryParams).then((response) => {
-        this.postList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+      alarmRecordList(this.addDateRange(this.queryParams, this.timeArr)).then(
+        (response) => {
+          this.postList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
     },
     // 取消按钮
     cancel() {
@@ -333,8 +404,8 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
+    /** 详情 */
+    handleLook(row) {
       this.reset();
       this.form.id = "";
       const acId = row.id || this.ids;
@@ -364,6 +435,31 @@ export default {
         this.title = "报警记录详情";
       });
     },
+    /** 处理 */
+    handleUpdate(row) {
+      if (row.status === 0) {
+        this.$confirm(`是否要处理该条报警记录?`, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            let data = {
+              id: row.id,
+              status: 1,
+            };
+            updateAlarmRecord(data).then((res) => {
+              if (res.code == 200) {
+                this.$modal.msgSuccess("处理成功！");
+                this.getList();
+              }
+            });
+          })
+          .catch(() => {});
+      } else if (row.status === 1) {
+        this.$modal.msgWarning("该报警记录已被处理!");
+      }
+    },
     /** 导出按钮操作 */
     handleExport() {
       this.download(
@@ -377,3 +473,11 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.status-green {
+  color: red;
+}
+.status-red {
+  color: rgb(7, 214, 110);
+}
+</style>
diff --git a/src/views/alarm/alarmRule/index.vue b/src/views/alarm/alarmRule/index.vue
index 2db5229..e8cc8b2 100644
--- a/src/views/alarm/alarmRule/index.vue
+++ b/src/views/alarm/alarmRule/index.vue
@@ -75,7 +75,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['alarm:ar:add']">
           <el-button
             type="primary"
             icon="el-icon-plus"
@@ -86,7 +86,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="success-btn" v-hasPermi="['system:post:edit']">
+        <div class="success-btn" v-hasPermi="['alarm:ar:edit']">
           <el-button
             type="success"
             icon="el-icon-edit"
@@ -98,7 +98,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="delete-btn" v-hasPermi="['system:post:remove']">
+        <div class="delete-btn" v-hasPermi="['alarm:ar:remove']">
           <el-button
             type="delete"
             icon="el-icon-delete"
@@ -109,7 +109,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -119,7 +119,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -219,7 +219,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['alarm:ar:edit']"
             >修改</el-button
           >
           <el-button
@@ -227,7 +227,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
+            v-hasPermi="['alarm:ar:remove']"
             >删除</el-button
           >
         </template>
@@ -669,6 +669,8 @@ export default {
         // 请求采集位点
         this.getCpmIdList(this.form.ledgerId);
       }
+      //清除采集位点
+      this.form.cpmId = ""
     },
     //采集参数列表
     getCpmIdList(id) {
diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue
index 3862860..d8860a2 100644
--- a/src/views/bigScreen/index.vue
+++ b/src/views/bigScreen/index.vue
@@ -11,7 +11,7 @@ export default {
     toPage() {
       console.log("需要跳转的")
       // 跳转到高校导航大屏展示
-      this.$router.push("/bigScreen")
+      this.$router.push("/Screen")
     },
   },
 };
diff --git a/src/views/centerairC/sysMonitor/components/hostChart.vue b/src/views/centerairC/sysMonitor/components/hostChart.vue
new file mode 100644
index 0000000..52294c2
--- /dev/null
+++ b/src/views/centerairC/sysMonitor/components/hostChart.vue
@@ -0,0 +1,415 @@
+<template>
+  <div>
+    <div class="historyCharts" ref="chart_ref"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    temArray: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: {},
+      chartData1: [],
+      chartData2: [],
+      chartData3: [],
+      chartData4: [],
+      bottomData: [],
+    };
+  },
+  watch: {
+    temArray: {
+      immediate: true, // 页面加载时立即触发一次监听
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.chartData1 = []; // 清空 chartData1
+          this.chartData2 = []; // 清空 chartData2
+          this.bottomData = []; // 清空 bottomData
+          console.log("charts传值", newVal);
+          let data = newVal;
+          if (data.length > 0) {
+            // 获取 title 和 titleStr 数组
+            const title = data.data[0].title;
+            const titleStr = data.data[1].titleStr;
+            // 获取 dataList 数组
+            const dataList = data.data[3].dataList;
+
+            // 遍历 dataList 数组
+            dataList.forEach((item) => {
+              // 查找 name 在 title 数组中的索引
+              const index = title.indexOf(item.name);
+              if (index !== -1) {
+                // 若找到匹配项，则将 name 替换为 titleStr 中对应位置的值
+                item.name = titleStr[index];
+              }
+            });
+            console.log("处理后的data", data);
+            data.forEach((item) => {
+              if (item.timeStr) {
+                this.bottomData = item.timeStr;
+              }
+              if (item.dataList) {
+                let name1 = "";
+                let name2 = "";
+                let name3 = "";
+                let name4 = "";
+                item.dataList.forEach((val, index) => {
+                  if (val.name) {
+                    switch (index) {
+                      case 0:
+                        this.chartData1 = val.value;
+                        name1 = val.name;
+                        break;
+                      case 1:
+                        this.chartData2 = val.value;
+                        name2 = val.name;
+                        break;
+                      case 2:
+                        this.chartData3 = val.value;
+                        name3 = val.name;
+                        break;
+                      case 3:
+                        this.chartData4 = val.value;
+                        name4 = val.name;
+                        break;
+                      default:
+                        break;
+                    }
+                  }
+                });
+              }
+            });
+            this.$nextTick(() => {
+              const adapterOption = {
+                xAxis: {
+                  data: this.bottomData,
+                },
+                series: [
+                  {
+                    yAxisIndex: 0,
+                    name:name1,
+                    data: this.chartData1,
+                  },
+                  {
+                    yAxisIndex: 0,
+                    name:name2,
+                    data: this.chartData2,
+                  },
+                  {
+                    yAxisIndex: 0,
+                    name:name3,
+                    data: this.chartData3,
+                  },
+                  {
+                    yAxisIndex: 0,
+                    name:name4,
+                    data: this.chartData4,
+                  },
+                ],
+              };
+              this.chartInstance.setOption(adapterOption);
+              //手动的调用图标对象的resize才能产生效果
+              this.chartInstance.resize();
+            });
+          } else {
+            this.$nextTick(() => {
+              const adapterOption = {
+                xAxis: {
+                  data: [],
+                },
+                series: [
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
+                ],
+              };
+              this.chartInstance.setOption(adapterOption);
+              //手动的调用图标对象的resize才能产生效果
+              this.chartInstance.resize();
+              this.screenAdapter();
+            });
+          }
+        }
+      },
+    },
+  },
+  mounted() {
+    this.initChart();
+    this.screenAdapter();
+  },
+  destroyed() {
+    //取消监听器
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+    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);
+        this.option = {
+          tooltip: {
+            trigger: "axis",
+          },
+          legend: {
+            show: true,
+            top: 0,
+            textStyle: {
+              color: "white",
+            },
+          },
+          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)",
+            },
+            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)",
+            },
+            // 显示y坐标轴
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576", // 设置 y 轴线的颜色
+              },
+            },
+            //y轴分割线段数
+            // splitNumber: 10,
+            // 修改y轴分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: 8,
+              data: this.chartData1,
+              //折线颜色
+              itemStyle: {
+                color: "#1a69f1", //折线点的颜色
+              },
+              lineStyle: {
+                color: "#1a69f1", //折线点的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
+              // 区域填充样式，添加渐变背景
+              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
+                },
+              },
+            },
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: 8,
+              data: this.chartData2,
+              //折线颜色
+              itemStyle: {
+                color: "#00CED1", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
+              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: 8,
+              data: this.chartData3,
+              //折线颜色
+              itemStyle: {
+                color: "#00CED1", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
+              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: 8,
+              data: this.chartData4,
+              //折线颜色
+              itemStyle: {
+                color: "#00CED1", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: false,
+              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
+                },
+              },
+            },
+          ],
+        };
+        //把配置项给实例对象
+        this.chartInstance.setOption(this.option, true);
+      } else {
+        console.error("未找到有效的 DOM 元素");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.historyCharts {
+  width: 100%;
+  height: 4rem;
+}
+</style>
diff --git a/src/views/centerairC/sysMonitor/lineChildren.vue b/src/views/centerairC/sysMonitor/components/lineChildren.vue
similarity index 100%
rename from src/views/centerairC/sysMonitor/lineChildren.vue
rename to src/views/centerairC/sysMonitor/components/lineChildren.vue
diff --git a/src/views/centerairC/sysMonitor/components/lineSquare.vue b/src/views/centerairC/sysMonitor/components/lineSquare.vue
new file mode 100644
index 0000000..f960fa1
--- /dev/null
+++ b/src/views/centerairC/sysMonitor/components/lineSquare.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="crossed-lines-container">
+      <!-- 上边线 -->
+      <div
+        class="line horizontal-line"
+        :style="{ width: (horizontalLength / 100) + 'rem', left: `calc(50% - ${horizontalLength / 200}rem)`, top: `calc(50% - ${(verticalLength / 200) - (overlap / 100)}rem)` }"
+      ></div>
+      <!-- 右边线 -->
+      <div
+        class="line vertical-line"
+        :style="{ height: (verticalLength / 100) + 'rem', top: `calc(50% - ${verticalLength / 200}rem)`, left: `calc(50% + ${(horizontalLength / 200) - (overlap / 100)}rem)` }"
+      ></div>
+      <!-- 下边线 -->
+      <div
+        class="line horizontal-line"
+        :style="{ width: (horizontalLength / 100) + 'rem', left: `calc(50% - ${horizontalLength / 200}rem)`, top: `calc(50% + ${(verticalLength / 200) - (overlap / 100)}rem)` }"
+      ></div>
+      <!-- 左边线 -->
+      <div
+        class="line vertical-line"
+        :style="{ height: (verticalLength / 100) + 'rem', top: `calc(50% - ${verticalLength / 200}rem)`, left: `calc(50% - ${(horizontalLength / 200) - (overlap / 100)}rem)` }"
+      ></div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      // 水平方向（上下边）的直线长度
+      horizontalLength: {
+        type: Number,
+        default: 100
+      },
+      // 垂直方向（左右边）的直线长度
+      verticalLength: {
+        type: Number,
+        default: 100
+      },
+      // 直线交叉时超出的长度
+      overlap: {
+        type: Number,
+        default: 10
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .crossed-lines-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .line {
+    position: absolute;
+    background-color: rgb(45, 121, 236,0.7);
+  }
+  
+  .horizontal-line {
+    height: 0.01rem;
+  }
+  
+  .vertical-line {
+    width: 0.01rem;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/centerairC/sysMonitor/components/loadData.vue b/src/views/centerairC/sysMonitor/components/loadData.vue
new file mode 100644
index 0000000..dc031d7
--- /dev/null
+++ b/src/views/centerairC/sysMonitor/components/loadData.vue
@@ -0,0 +1,452 @@
+<template>
+  <div>
+    <div class="sys_charts" ref="sys_charts"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { eventBus } from "@/utils/evenBus";
+import { overView } from "@/api/bigScreen";
+import { getDay, getMonth, getYear } from "@/utils/datetime";
+export default {
+  props: {
+    hostData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: {},
+      loadPercent: "",
+    };
+  },
+  watch: {
+    hostData: {
+      immediate: true, // 页面加载时立即触发一次监听
+      handler(newVal, oldVal) {
+        if (newVal) {
+          console.log("charts传值", newVal);
+          let data = newVal;
+          if (data.length > 0) {
+            data.forEach((item) => {
+              if (item.paramType === "28") {
+                this.loadPercent = item.curValue;
+              }
+            });
+            this.$nextTick(() => {
+              // 销毁现有的 ECharts 实例
+              if (this.chartInstance) {
+                this.chartInstance.dispose();
+              }
+              // 重新初始化图表
+              this.initChart();
+            });
+          } else {
+          }
+        }
+      },
+    },
+  },
+  mounted() {
+    this.initChart();
+    this.screenAdapter();
+    window.addEventListener("resize", this.screenAdapter);
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    // 计算颜色设置的函数
+    getAxisLineColor(useData, maxData) {
+      // 计算阈值
+      // 真实值大于最大值的0.75才使用颜色渐变
+      const threshold = maxData * 0.75;
+
+      // 判断实际值是否超过阈值
+      if (useData > threshold) {
+        return [
+          [
+            useData / maxData,
+            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: "rgba(0,127,208,1)" },
+              { offset: 0.6, color: "rgba(0,127,208,1)" },
+              { offset: 1, color: "rgba(69, 235, 167,0.5)" },
+            ]),
+          ],
+          [1, "rgba(28,128,245,.0)"],
+        ];
+      } else {
+        return [
+          [
+            useData / maxData,
+            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: "rgba(0,127,208,1)" },
+              { offset: 0.5, color: "rgba(0,127,208,1)" },
+              { offset: 1, color: "rgba(0,127,208,1)" },
+            ]),
+          ],
+          [1, "rgba(28,128,245,.0)"],
+        ];
+      }
+    },
+    //初始化chartInstance2对象 折线图
+    initChart() {
+      var value = 80;
+      // 初始化数据
+      const dataArr = this.loadPercent; //负载数据
+      const dataX = 100;
+      this.chartInstance = echarts.init(this.$refs.sys_charts);
+      this.option = {
+        backgroundStyle: {
+          borderWidth: 1,
+          color: "transparent",
+        },
+        title: [
+          {
+            text: `${dataArr} %`,
+            bottom: "8%",
+            left: "center",
+            textStyle: {
+              fontSize: "16", //标记
+              color: "#ffff",
+              fontWeight: 800,
+            },
+            triggerEvent: true,
+          },
+        ],
+
+        legend: {
+          show: false,
+        },
+        series: [
+          {
+            name: "最外部进度条",
+            type: "gauge",
+            radius: "99%",
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [
+                    dataArr / dataX,
+                    {
+                      type: "linear",
+                      x: 0,
+                      y: 1,
+                      x2: 0.5,
+                      y2: 0.5,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "rgba(0,0,0,0)", // 0% 处的颜色
+                        },
+                        {
+                          offset: 0.8,
+                          color: "#195b9d", // 100% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#0a2256", // 100% 处的颜色
+                        },
+                      ],
+                      global: false, // 缺省为 false
+                    },
+                  ],
+                  [1, "#083158"],
+                ],
+                width: 5, //标记
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+            title: {
+              // 标题
+              show: false,
+            },
+            data: [
+              {
+                name: "title",
+                value: dataArr,
+              },
+            ],
+            pointer: {
+              show: false,
+            },
+            animationDuration: 4000,
+          },
+          {
+            name: "刻度尺",
+            type: "gauge",
+            radius: "88%",
+            splitNumber: 10, // 刻度数量
+            min: 0, // 最小刻度
+            max: dataX, // 最大刻度
+            // 分隔线
+            splitLine: {
+              show: true,
+              length: 12,
+              lineStyle: {
+                width: 3,
+                color: "#12E5FE",
+              },
+            },
+            // 刻度线
+            axisTick: {
+              show: true,
+              splitNumber: 10,
+              length: 5,
+              lineStyle: {
+                color: "#12E5FE",
+                width: 2,
+              },
+            },
+            // 刻度标签
+            axisLabel: {
+              distance: -8, //刻度数字离轴线的距离
+              color: "#CEF3FE",
+              fontSize: "6",
+              fontWeight: 600,
+            },
+            detail: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                width: -10, //刻度离轴线的距离
+                color: [
+                  [
+                    1,
+                    {
+                      type: "radial",
+                      x: 0.5,
+                      y: 0.6,
+                      r: 0.6,
+                      colorStops: [
+                        {
+                          offset: 0.85,
+                          color: "#031F46", // 0% 处的颜色
+                        },
+                        {
+                          offset: 0.93,
+                          color: "#060d25", // 100% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#12D7EF", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  ],
+                ],
+              },
+            },
+          },
+          {
+            name: "外部指针",
+            type: "gauge",
+            radius: "90%",
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [dataArr / dataX - 0.001, "rgba(0,0,0,0)"],
+                  [dataArr / dataX + 0.003, "#e43c59"],
+                  [1, "rgba(0,0,0,0)"],
+                ],
+                width: 33,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+            title: {
+              // 标题
+              show: false,
+            },
+            data: [
+              {
+                name: "title",
+                value: dataArr,
+              },
+            ],
+            pointer: {
+              show: false,
+            },
+          },
+          {
+            name: "内层带指针",
+            type: "gauge",
+            radius: "60%",
+            splitNumber: 10, // 刻度数量
+            min: 0, // 最小刻度
+            max: dataX, // 最大刻度
+            // 仪表盘轴线相关配置
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [
+                    1,
+                    {
+                      type: "radial",
+                      x: 0.5,
+                      y: 0.59,
+                      r: 0.6,
+                      colorStops: [
+                        {
+                          offset: 0.72,
+                          color: "#032046",
+                        },
+                        {
+                          offset: 0.94,
+                          color: "#086989",
+                        },
+                        {
+                          offset: 0.98,
+                          color: "#0FAFCB",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0EA4C1",
+                        },
+                      ],
+                    },
+                  ],
+                ],
+                width: 1000,
+              },
+            },
+            // 分隔线
+            splitLine: {
+              show: false,
+            },
+            // 刻度线
+            axisTick: {
+              show: false,
+            },
+            // 刻度标签
+            axisLabel: {
+              show: false,
+            },
+            // 仪表盘指针
+            pointer: {
+              show: true,
+              length: "95%",
+              width: 5, // 指针粗细
+            },
+            // 仪表盘指针样式
+            itemStyle: {
+              color: "#01eaf8",
+            },
+            data: [
+              {
+                value: dataArr,
+              },
+            ],
+            detail: {
+              show: false,
+            },
+          },
+
+          // 中间半圆装饰
+          {
+            type: "gauge",
+            radius: "110%", // 大小
+            center: ["50%", "127%"],
+            axisLine: {
+              show: true,
+              lineStyle: {
+                // 轴线样式
+                width: 4, // 宽度
+                color: [
+                  [
+                    1,
+                    {
+                      type: "radial",
+                      x: 0.5,
+                      y: 0,
+                      r: 0.6,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#00f3f9", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#000", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              // 刻度
+              show: false,
+            },
+            splitLine: {
+              // 分割线
+              show: false,
+            },
+            axisLabel: {
+              // 刻度标签
+              show: false,
+            },
+            pointer: {
+              // 仪表盘指针
+              show: false,
+            },
+            detail: {
+              // 仪表盘详情
+              show: false,
+            },
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance.setOption(this.option, true);
+    },
+    screenAdapter() {
+      const titleFontSize = this.$refs.sys_charts.offsetWidth / 18;
+      const adapterOption = {};
+      this.chartInstance.setOption(adapterOption);
+      this.chartInstance.resize();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sys_charts {
+  width: 2rem;
+  height: 2rem;
+}
+</style>
diff --git a/src/views/centerairC/sysMonitor/components/titleImg.vue b/src/views/centerairC/sysMonitor/components/titleImg.vue
new file mode 100644
index 0000000..352709f
--- /dev/null
+++ b/src/views/centerairC/sysMonitor/components/titleImg.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="title-img">
+    <img src="../../../../assets/images/big.png" class="img1" alt="" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.title-img {
+  position: relative;
+}
+.img1 {
+  width: 0.8rem;
+  height: 0.5rem;
+  z-index: 10;
+}
+</style>
diff --git a/src/views/centerairC/sysMonitor/hostDetails.vue b/src/views/centerairC/sysMonitor/hostDetails.vue
new file mode 100644
index 0000000..e22a076
--- /dev/null
+++ b/src/views/centerairC/sysMonitor/hostDetails.vue
@@ -0,0 +1,1039 @@
+<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="host-detail">
+      <div class="detail-top">
+        <div class="detail-top-left">
+          <img
+            class="host-img1"
+            src="../../../assets/images/host-img3.png"
+            alt=""
+            v-if="isMagnetic === 'true'"
+          />
+          <img
+            class="host-img1"
+            src="../../../assets/images/host-img4.png"
+            alt=""
+            v-else
+          />
+          <div class="host-name">{{ deviceName }}</div>
+          <!-- 冷凝器蒸发器压力-->
+          <div class="outIn">
+            <div class="outIn-li in1">
+              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
+              <div class="kpa">冷凝器压力:{{ condenserPre }}kpa</div>
+            </div>
+            <div class="outIn-li out1">
+              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
+              <div class="kpa">蒸发器压力:{{ evaporatorPre }}kpa</div>
+            </div>
+            <!-- <div class="outIn-li in2">
+              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
+              <div class="kpa">566.6kpa</div>
+            </div>
+            <div class="outIn-li out2">
+              <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
+              <div class="kpa">566.6kpa</div>
+            </div> -->
+          </div>
+          <!-- 运行状态 -->
+          <img
+            src="../../../assets/images/fan-img.png"
+            :class="{
+              moveClass: hostListClass('1'),
+              fanBlade: isMagnetic === 'true',
+              leftFan: isMagnetic === 'false',
+            }"
+            alt=""
+          />
+          <!-- 启停状态 -->
+          <div class="startClass" v-if="hostListClass('2')"></div>
+          <!-- 冷冻冷却水流信号 -->
+          <div class="water-flow3">
+            <div class="water-flow-li">
+              <span>冷却水流:</span>
+              <span v-if="hostListClass('21')">接通</span>
+              <span v-else>断开</span>
+              <span
+                class="break"
+                :class="{ connect: hostListClass('21') }"
+              ></span>
+            </div>
+            <div class="water-flow-li">
+              <span>冷冻水流:</span>
+              <span v-if="hostListClass('20')">接通</span>
+              <span v-else>断开</span>
+              <span
+                class="break"
+                :class="{ connect: hostListClass('20') }"
+              ></span>
+            </div>
+          </div>
+          <!-- 负载 -->
+          <LoadData class="loadData" :hostData="hostData"></LoadData>
+        </div>
+        <div class="detail-top-right">
+          <!-- 温度 -->
+          <host-chart :temArray="temArray"></host-chart>
+        </div>
+      </div>
+      <div class="detail-bottom">
+        <div class="hostStatus">
+          <div class="hostStatus-li">
+            <span>手自动切换:</span>
+            <span class="automaticData">{{ automaticObj.showValue }}</span>
+          </div>
+          <div class="hostStatus-li">
+            <span>本地远程状态:</span>
+            <span class="dotData">{{ localObj.showValue }}</span>
+          </div>
+          <div class="hostStatus-li">
+            <span>故障状态:</span>
+            <span class="goodData" v-if="badObj.showValue === '未故障'">{{
+              badObj.showValue
+            }}</span>
+            <span class="badData" v-else>{{ badObj.showValue }}</span>
+          </div>
+          <div class="hostStatus-li">
+            <span>运行累计时间:</span>
+            <span class="timeData">{{ timeObj.showValue }}</span>
+          </div>
+        </div>
+        <div class="detail-data hostparams">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="details-title">主机参数</div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
+            <div
+              class="detail-data-li"
+              v-for="(item, index) in rightHostData"
+              :key="index"
+            >
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ item.otherName }}:</span>
+                  <span class="dotData">{{ item.curValue }}</span>
+                  <span>{{ item.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <line-square
+            class="line1"
+            :horizontalLength="700"
+            :verticalLength="300"
+            :overlap="15"
+          ></line-square>
+        </div>
+        <div class="detail-data compressor">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="details-title">压缩机参数</div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
+            <div
+              class="detail-data-li"
+              v-for="(item, index) in compressorData"
+              :key="index + 1"
+            >
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ item.otherName }}:</span>
+                  <span class="dotData">{{ item.curValue }}</span>
+                  <span>{{ item.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <line-square
+            class="line1"
+            :horizontalLength="700"
+            :verticalLength="300"
+            :overlap="15"
+          ></line-square>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  hostDetailsData,
+  hostTemData,
+  runTime,
+} from "@/api/centerairC/sysMonitor";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { cpmList } from "@/api/device/gather";
+import LoadData from "./components/loadData.vue";
+import hostChart from "./components/hostChart.vue";
+import titleImg from "./components/titleImg.vue";
+import lineSquare from "./components/lineSquare.vue";
+import { format } from "@/utils/datetime";
+export default {
+  name: "sysControl",
+  components: { LoadData, hostChart, titleImg, lineSquare },
+  data() {
+    return {
+      loading: false,
+
+      currentDate: new Date(),
+      nowTimer: null,
+      deviceName: "", //主机名称
+      hostData: [], //主机参数
+      condenserPre: "", //冷凝器压力
+      evaporatorPre: "", //蒸发器压力
+      rightHostData: [], //右
+      automaticObj: {}, //手自动状态
+      localObj: {}, //本地远程状态
+      badObj: {}, //故障状态
+      timeObj: {}, //累计运行时间
+      compressorData: [], //压缩机参数
+      temArray: [], //冷冻冷却水温度
+      isMagnetic: false,
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+    };
+  },
+  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() {},
+  mounted() {
+    this.getHostDetailsData();
+    this.getAlarnStatus();
+    this.getDayData();
+    // 在组件挂载后尝试进入全屏
+    setTimeout(() => {
+      this.requestFullscreen();
+    }, 100); // 延迟 100 毫秒执行全屏操作
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+  },
+  methods: {
+    // 全屏操作
+    requestFullscreen() {
+      const element = document.documentElement;
+      console.log("全屏了吗");
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        // Firefox
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        // Chrome, Safari and Opera
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        // IE/Edge
+        element.msRequestFullscreen();
+      }
+    },
+    // 退出全屏
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        // Firefox
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        // Chrome, Safari and Opera
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        // IE/Edge
+        document.msExitFullscreen();
+      }
+    },
+    // 进入系统首页
+    goSys() {
+      this.exitFullscreen();
+      this.$router.push("/");
+    },
+    // 返回上一页
+    goBack() {
+      this.$router.back();
+    },
+    // 监测天数
+    getDayData() {
+      runTime().then((res) => {
+        if (res.code == 200) {
+          this.dayData = res.data.runTime;
+        }
+      });
+    },
+    getHostDetailsData() {
+      //判断当前的url是否有传参
+      // 获取查询字符串
+      const search = window.location.search;
+      // 判断是否有查询参数
+      const hasQueryParams = search.length > 1;
+      if (hasQueryParams) {
+        console.log("当前 URL 有传参");
+        // 解析查询字符串
+        const queryParams = {};
+        const params = search.slice(1).split("&");
+        params.forEach((param) => {
+          const [key, value] = param.split("=");
+          queryParams[key] = decodeURIComponent(value);
+        });
+        console.log("传递的参数:", queryParams);
+        // 获取特定参数
+        const deviceLedgerId = queryParams.hostId;
+        this.deviceName = queryParams.hostName;
+        this.isMagnetic = queryParams.isMagnetic;
+        console.log("是否是磁悬浮主机", this.isMagnetic);
+        // 请求主机参数、压缩机参数
+        this.getHostParams(deviceLedgerId);
+        // 请求采集位点
+        this.getCollect(deviceLedgerId);
+      } else {
+      }
+    },
+    // 主机参数、压缩机参数
+    getHostParams(id) {
+      hostDetailsData({ deviceLedgerId: id }).then((res) => {
+        console.log("主机参数返回", res);
+        if (res.code == 200) {
+          let data = res.rows;
+          data.forEach((item) => {
+            if (item.mtType === "0") {
+              // 主机参数
+              this.hostData = item.list;
+              // 主机参数分开两列
+              this.leftHostData = [];
+              this.rightHostData = [];
+              this.hostData.forEach((item) => {
+                // 右边主机参数  温度12
+                if (item.paramType === "12") {
+                  this.rightHostData.push(item);
+                }
+                //左边主机参数 根据不同的 paramType 处理 showValue
+                if (item.paramType === "6") {
+                  // 运行状态
+                  item.showValue =
+                    Number(item.curValue) === 0 ? "自动" : "手动";
+                  this.automaticObj = item;
+                } else if (item.paramType === "5") {
+                  // 故障状态
+                  item.showValue =
+                    Number(item.curValue) === 0 ? "未故障" : "故障";
+                  this.badObj = item;
+                } else if (item.paramType === "22") {
+                  // 本地远程
+                  item.showValue =
+                    Number(item.curValue) === 0 ? "本地" : "远程";
+                  this.localObj = item;
+                } else if (item.paramType === "26") {
+                  // 累计运行时间
+                  item.showValue = item.curValue;
+                  this.timeObj = item;
+                }
+              });
+            }
+            if (item.mtType === "9") {
+              // 压缩机参数
+              this.compressorData = item.list;
+              this.compressorData.forEach((item) => {
+                if (
+                  item.paramType === "13" &&
+                  item.otherName.includes("冷凝器")
+                ) {
+                  this.condenserPre = item.curValue;
+                } else if (
+                  item.paramType === "13" &&
+                  item.otherName.includes("蒸发器")
+                ) {
+                  this.evaporatorPre = item.curValue;
+                }
+              });
+            }
+          });
+        }
+      });
+    },
+    // 采集参数列表
+    getCollect(id) {
+      let data = {
+        pageNum: 1,
+        pageSize: 10000,
+        deviceLedgerId: id,
+      };
+      cpmList(data).then((res) => {
+        console.log("采集位点返回", res);
+        if (res.code == 200) {
+          // 过滤掉结果，只保留冷冻冷却进出水温度
+          let data = res.rows;
+          let newDataArray = []; // 用于存储符合条件的对象的新数组
+          data.forEach((item) => {
+            if (
+              item.otherName.includes("冷冻出水温度") ||
+              item.otherName.includes("冷冻进水温度") ||
+              item.otherName.includes("冷却出水温度") ||
+              item.otherName.includes("冷却进水温度")
+            ) {
+              let dataItem = {
+                name: item.otherName,
+                value: item.id,
+              };
+              newDataArray.push(dataItem);
+            }
+          });
+          console.log("处理后的数组···", newDataArray);
+          // 请求温度
+          this.getTemData(newDataArray);
+        }
+      });
+    },
+    // 冷冻冷却进出水温度图表数据
+    getTemData(array) {
+      const start = new Date(new Date().setHours(0, 0, 0, 0));
+      const end = new Date(new Date().setHours(23, 59, 59, 59));
+      let data = {
+        timeType: "min",
+        startTime: format(start),
+        endTime: format(end),
+        pageNum: 0,
+        pageSize: 10,
+        searchParams: array,
+        systemType: "0",
+      };
+      hostTemData(data).then((res) => {
+        console.log("进出水温度返回值", res);
+        if (res.code == 200 && res.data.length > 0) {
+          this.temArray = res.data;
+        }
+      });
+    },
+    hostListClass(paramType) {
+      for (let i = 0; i < this.hostData.length; i++) {
+        const item = this.hostData[i];
+        if (item.paramType === paramType && Number(item.curValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则
+      return false;
+    },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      this.exitFullscreen();
+      this.$router.push("/alarm/alarmRecord");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monitor {
+  width: 100%;
+  min-height: 100vh;
+  height: auto;
+  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;
+    }
+  }
+  .host-detail {
+    padding: 0.2rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .detail-top {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      .detail-top-left {
+        width: 7rem;
+        height: 4.4rem;
+        // background-color: aquamarine;
+        position: relative;
+        .host-img1 {
+          width: 4.88rem;
+          height: 3.97rem;
+          margin: 0.2rem 0 0 0.2rem;
+        }
+        .outIn {
+          position: absolute;
+          left: 4.8rem;
+          top: 1rem;
+          display: flex;
+          flex-direction: column;
+          .outIn-li {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            width: 2rem;
+            height: 1rem;
+            font-weight: bold;
+            // background-color: #e2aeae;
+            .arrow {
+              font-size: 0.3rem;
+              z-index: 10;
+            }
+            .kpa {
+              font-size: 0.18rem;
+              z-index: 10;
+            }
+          }
+          .in1 {
+            position: absolute;
+            top: 1.3rem;
+            left: 0.2rem;
+            color: rgb(123, 212, 247);
+          }
+          .out1 {
+            position: absolute;
+            top: 1.6rem;
+            left: 0.18rem;
+            color: rgb(38, 122, 218);
+            .arrow {
+              transform: scaleX(-1);
+            }
+          }
+          .in2 {
+            position: absolute;
+            top: 1.9rem;
+            left: -0.4rem;
+            color: rgb(235, 120, 206);
+          }
+          .out2 {
+            position: absolute;
+            top: 2.2rem;
+            left: -0.4rem;
+            color: rgb(240, 56, 95);
+            .arrow {
+              transform: scaleX(-1);
+            }
+          }
+        }
+        /* 定义灯闪烁的动画 */
+        @keyframes blink {
+          0% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.7;
+          }
+          100% {
+            opacity: 1;
+          }
+        }
+        .startClass {
+          z-index: 10;
+          position: absolute;
+          top: 2.9rem;
+          left: 3.4rem;
+          width: 0.18rem;
+          height: 0.18rem;
+          border-radius: 50%;
+          animation: blink 1s infinite;
+          background-color: #38fc52 !important;
+        }
+        .water-flow3 {
+          z-index: 10;
+          position: absolute;
+          top: 3.6rem;
+          left: 1.2rem;
+          .water-flow-li {
+            margin-bottom: 0.04rem;
+            color: #46f1e3;
+            font-size: 0.18rem;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            span {
+              background-color: rgba(0, 255, 255, 0.2);
+              border-radius: 0.1rem;
+              padding: 0.01rem 0.03rem;
+            }
+            .break {
+              margin-left: 0.07rem;
+              display: inline-block;
+              width: 0.18rem;
+              height: 0.18rem;
+              border-radius: 50%;
+              border: 1px solid #46f1e3;
+              background-color: transparent !important;
+            }
+            .connect {
+              animation: blink 1s infinite;
+              background-color: #38fc52 !important;
+            }
+          }
+        }
+        /* 定义 host 动画关键帧 */
+        @keyframes host {
+          0% {
+            /* 修改初始旋转角度 */
+            transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
+          }
+          100% {
+            /* 修改结束旋转角度 */
+            transform: translateX(-50%) rotateX(15deg) rotateZ(360deg);
+          }
+        }
+        .fanBlade {
+          z-index: 10;
+          position: absolute;
+          top: 2.55rem;
+          left: 4.65rem;
+          width: 0.5rem;
+          height: 0.5rem;
+          transform-style: preserve-3d;
+          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
+            rotateY(40deg);
+        }
+        .leftFan {
+          z-index: 10;
+          position: absolute;
+          top: 2.55rem;
+          left: 0.53rem;
+          width: 0.5rem;
+          height: 0.5rem;
+          transform-style: preserve-3d;
+          transform: translateX(-50%) rotateX(0deg) rotateZ(0deg) rotateY(-0deg);
+        }
+        .moveClass {
+          animation: host 2s linear infinite;
+        }
+        .host-name {
+          z-index: 10;
+          position: absolute;
+          top: 1.55rem;
+          left: 1.8rem;
+          color: #3520f8;
+          font-weight: bold;
+          font-size: 0.18rem;
+        }
+        .loadData {
+          z-index: 10;
+          position: absolute;
+          top: 0.2rem;
+          right: 0rem;
+        }
+      }
+      .detail-top-right {
+        width: calc(100% - 7.25rem);
+        height: 4.4rem;
+        // background-color: rgb(127, 172, 255);
+      }
+    }
+    .detail-bottom {
+      height: 2.6rem;
+      margin-top: 0.3rem;
+      margin-left: 0.25rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .hostStatus {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        width: 3rem;
+        .hostStatus-li {
+          background-color: #25455a;
+          color: #c0dffc;
+          font-size: 0.18rem;
+          margin-bottom: 0.1rem;
+          padding: 0.1rem;
+          letter-spacing: 0.02rem;
+        }
+      }
+      .detail-data {
+        display: flex;
+        flex-direction: column;
+        // width: 4rem;
+        position: relative;
+        .detail-data-top {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          color: #c0dffc;
+          font-weight: bold;
+          font-size: 0.18rem;
+          width: 100%;
+          text-align: center;
+          z-index: 10;
+          .details-title {
+            margin: 0 0.15rem;
+          }
+        }
+        .detail-data-bottom {
+          width: 100%;
+          padding: 0.1rem 0.3rem;
+          z-index: 0;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-items: flex-start;
+          justify-content: flex-start;
+          .detail-data-li {
+            // width: 100%;
+            margin-right: 0.1rem;
+            position: relative;
+            color: #2980b9;
+            font-family: Arial, sans-serif;
+            letter-spacing: 0.02rem;
+            font-size: 0.18rem;
+            position: relative;
+            margin-bottom: 0.2rem;
+            border-left: 0.01rem solid #217df5;
+            border-right: 0.01rem solid #217df5;
+            background-image: radial-gradient(
+                circle at left top,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              ),
+              radial-gradient(
+                circle at right top,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              ),
+              radial-gradient(
+                circle at left bottom,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              ),
+              radial-gradient(
+                circle at right bottom,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              );
+            background-repeat: no-repeat;
+            background-position: left top, right top, left bottom, right bottom;
+          }
+          .detail-data-li::before,
+          .detail-data-li::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 0.01rem;
+            background-image: linear-gradient(
+              to right,
+              #217df5 0%,
+              rgba(41, 128, 185, 0) 50%,
+              #217df5 100%
+            );
+          }
+
+          .detail-data-li::before {
+            top: 0;
+          }
+          .detail-data-li::after {
+            bottom: 0;
+          }
+          .rightDot {
+            position: relative;
+            width: 100%;
+            height: 100%;
+          }
+          .leftDot {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            padding: 0.04rem 0.1rem;
+          }
+
+          .rightDot::before {
+            content: "";
+            position: absolute;
+            top: -0.03rem;
+            right: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+            border-radius: 50%;
+            z-index: 10;
+          }
+
+          .rightDot::after {
+            content: "";
+            position: absolute;
+            bottom: -0.03rem;
+            right: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+            border-radius: 50%;
+            z-index: 10;
+          }
+          .leftDot::before {
+            content: "";
+            position: absolute;
+            top: -0.03rem;
+            left: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            border-radius: 50%;
+            z-index: 10;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+          }
+
+          .leftDot::after {
+            content: "";
+            position: absolute;
+            bottom: -0.03rem;
+            left: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            z-index: 10;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+            border-radius: 50%;
+          }
+        }
+        .line1 {
+          position: absolute;
+          top: 0.53rem;
+        }
+      }
+      .hostparams {
+        width: 7.6rem;
+        .detail-data-bottom {
+          padding-left: 0.75rem;
+          .detail-data-li {
+            width: 3rem;
+          }
+        }
+      }
+      .compressor {
+        width: 7.6rem;
+        .detail-data-bottom {
+          padding-left: 0.75rem;
+          .detail-data-li {
+            width: 3rem;
+          }
+        }
+      }
+      .dotData {
+        font-weight: bold;
+        margin: 0 0.06rem;
+        color: #3d8df5;
+      }
+      .goodData {
+        font-weight: bold;
+        margin: 0 0.06rem;
+        color: #3df574;
+      }
+      .badData {
+        font-weight: bold;
+        margin: 0 0.06rem;
+        color: #cf3607;
+      }
+      .automaticData {
+        font-weight: bold;
+        margin: 0 0.06rem;
+        color: #da7b10;
+      }
+      .timeData {
+        font-weight: bold;
+        margin: 0 0.06rem;
+        color: #1df3e8;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/centerairC/sysMonitor/index.vue b/src/views/centerairC/sysMonitor/index.vue
index dc25621..fb61bdd 100644
--- a/src/views/centerairC/sysMonitor/index.vue
+++ b/src/views/centerairC/sysMonitor/index.vue
@@ -1,2257 +1,20 @@
 <template>
-  <div class="monitor" v-loading="loading">
-    <div class="monitor-content">
-      <!-- logo -->
-      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
-      <!-- 标题 -->
-      <div class="sys-title">铭汉高效冷源站管理系统</div>
-      <!-- 天气数据 -->
-      <div class="weather">
-        <div class="weather-li">
-          <span>室外温度：</span>
-          <span class="deepColor">{{ weatherObj.temperature }}</span>
-          <span>℃</span>
-        </div>
-        <div class="weather-li">
-          <span>室外湿度：</span>
-          <span class="deepColor">{{ weatherObj.humidity }}</span>
-          <span>%</span>
-        </div>
-        <div class="weather-li">
-          <span>室外含湿：</span>
-          <span class="deepColor">{{ weatherObj.humidityRatio }}</span>
-          <span>g/kg</span>
-        </div>
-        <div class="weather-li">
-          <span>室外焓值：</span>
-          <span class="deepColor">{{ weatherObj.enthalpy }}</span>
-          <span>kj/kg</span>
-        </div>
-        <div class="weather-li">
-          <span>室外露点：</span>
-          <span class="deepColor">{{ weatherObj.dewPointTemp }}</span>
-          <span>℃</span>
-        </div>
-        <div class="weather-li">
-          <span>室外湿球：</span>
-          <span class="deepColor">{{ weatherObj.wetBulbTemp }}</span>
-          <span>℃</span>
-        </div>
-      </div>
-      <!-- 系统性能数据 -->
-      <div class="performance">
-        <div class="title">系 统 性 能</div>
-        <div class="perdformance-bg">
-          <div class="weather-li">
-            <span>实时EER：</span>
-            <span class="deepColor">{{ performanceObj.realEER }}</span>
-            <span>kw/kw</span>
-          </div>
-          <div class="weather-li">
-            <span>实时功率：</span>
-            <span class="deepColor">{{ performanceObj.realPower }}</span>
-            <span>kw</span>
-          </div>
-          <div class="weather-li">
-            <span>实时冷量：</span>
-            <span class="deepColor">{{ performanceObj.realCold }}</span>
-            <span>kw</span>
-          </div>
-          <div class="weather-li">
-            <span>全年EER：</span>
-            <span class="deepColor">{{ performanceObj.yearEER }}</span>
-            <span>kw</span>
-          </div>
-          <div class="weather-li">
-            <span>全年用电：</span>
-            <span class="deepColor">{{ performanceObj.yearPower }}</span>
-            <span>kw/h</span>
-          </div>
-          <div class="weather-li">
-            <span>全年产冷：</span>
-            <span class="deepColor">{{ performanceObj.yearCold }}</span>
-            <span>kw</span>
-          </div>
-        </div>
-      </div>
-      <!-- 一键启停 -->
-      <div class="offClass" @click="handleOneKeyButton">
-        <div v-if="isShowOn" class="off-bg on-animation">ON</div>
-        <div v-else class="off-bg">OFF</div>
-      </div>
-      <!-- 系统提示 -->
-      <div class="sysTips" v-if="startOrStopStatus">
-        <img class="step" src="../../../assets/images/step.png" alt="" />
-        <div class="tips-text">{{ startOrStopStatus }}</div>
-      </div>
-      <!-- 整体图 -->
-      <img
-        class="monitor-img"
-        src="../../../assets/images/haiwang.png"
-        alt=""
-      />
-      <!-- 主机1数据定位 -->
-      <div class="hostName1" v-if="hostList.length > 0">
-        {{ hostList[0].deviceName }}
-      </div>
-      <div
-        class="hostStatus1"
-        :class="{ startClass: hostListControlClass(0) }"
-      ></div>
-      <img
-        class="host-img1"
-        v-if="hostListRunClass(0)"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-        :class="{ moveClass: hostListRunClass(0) }"
-      />
-      <div class="hostLoad1" v-if="hostLoadData(0) && hostListRunClass(0)">
-        {{ hostLoad0 }}%
-      </div>
-      <div class="water-flow1">
-        <div class="water-flow-li">
-          <span>1#冷却水流:</span>
-          <span v-if="hostCoolingWaterFlowClass(0)">接通</span>
-          <span v-else>断开</span>
-          <span
-            class="break"
-            :class="{ connect: hostCoolingWaterFlowClass(0) }"
-          ></span>
-        </div>
-        <div class="water-flow-li">
-          <span>1#冷冻水流:</span>
-          <span v-if="hostCoolingWaterFlowClass(0)">接通</span>
-          <span v-else>断开</span>
-          <span
-            class="break"
-            :class="{ connect: hostFreezeWaterFlowClass(0) }"
-          ></span>
-        </div>
-      </div>
-      <line-children
-        :angle1="-0"
-        :angle2="-20"
-        :lineWidth1="200"
-        :lineWidth2="130"
-        class="host-line1"
-      ></line-children>
-      <!-- 主机2数据定位 -->
-      <div class="hostName2" v-if="hostList.length > 0">
-        {{ hostList[1].deviceName }}
-      </div>
-      <div
-        class="hostStatus2"
-        :class="{ startClass: hostListControlClass(1) }"
-      ></div>
-      <img
-        class="host-img2"
-        v-if="hostListRunClass(1)"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-        :class="{ moveClass: hostListRunClass(1) }"
-      />
-      <div class="hostLoad2" v-if="hostLoadData(1) && hostListRunClass(1)">
-        {{ hostLoad1 }}%
-      </div>
-      <div class="water-flow2">
-        <div class="water-flow-li">
-          <span>2#冷却水流:</span>
-          <span v-if="hostCoolingWaterFlowClass(1)">接通</span>
-          <span v-else>断开</span>
-          <span
-            class="break"
-            :class="{ connect: hostCoolingWaterFlowClass(1) }"
-          ></span>
-        </div>
-        <div class="water-flow-li">
-          <span>2#冷冻水流:</span>
-          <span v-if="hostCoolingWaterFlowClass(1)">接通</span>
-          <span v-else>断开</span>
-          <span
-            class="break"
-            :class="{ connect: hostFreezeWaterFlowClass(1) }"
-          ></span>
-        </div>
-      </div>
-      <line-children
-        :angle1="-0"
-        :angle2="-30"
-        :lineWidth1="250"
-        :lineWidth2="350"
-        class="host-line2"
-      ></line-children>
-      <!-- 主机3数据定位 -->
-      <div class="hostName3" v-if="hostList.length > 0">
-        {{ hostList[2].deviceName }}
-      </div>
-      <!-- 主机启停状态 -->
-      <div
-        class="hostStatus3"
-        :class="{ startClass: hostListControlClass(2) }"
-      ></div>
-      <!-- 主机运行状态 -->
-      <img
-        class="host-img3"
-        v-if="hostListRunClass(2)"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-        :class="{ moveClass: hostListRunClass(2) }"
-      />
-      <!-- 主机负载 -->
-      <div class="hostLoad3" v-if="hostLoadData(2) && hostListRunClass(2)">
-        {{ hostLoad2 }}%
-      </div>
-      <!-- 主机冷却冷冻水流信息 -->
-      <div class="water-flow3">
-        <div class="water-flow-li">
-          <span>3#冷却水流:</span>
-          <span v-if="hostCoolingWaterFlowClass(2)">接通</span>
-          <span v-else>断开</span>
-          <span
-            class="break"
-            :class="{ connect: hostCoolingWaterFlowClass(2) }"
-          ></span>
-        </div>
-        <div class="water-flow-li">
-          <span>3#冷冻水流:</span>
-          <span v-if="hostCoolingWaterFlowClass(2)">接通</span>
-          <span v-else>断开</span>
-          <span
-            class="break"
-            :class="{ connect: hostFreezeWaterFlowClass(2) }"
-          ></span>
-        </div>
-      </div>
-      <!-- 线+主机冷却水流状态 -->
-      <line-children
-        :angle1="-0"
-        :angle2="-40"
-        :lineWidth1="350"
-        :lineWidth2="520"
-        class="host-line3"
-      ></line-children>
-
-      <!-- 冷却泵数据定位 -->
-      <div class="coolingPump1">1#</div>
-      <div class="coolingPump2">2#</div>
-      <div class="coolingPump3">3#</div>
-      <!-- 运行状态 -->
-      <img
-        class="cooling-img1"
-        v-if="coolingPumpRunClass(0)"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-        :class="{ moveClass2: coolingPumpRunClass(0) }"
-      />
-      <img
-        class="cooling-img2"
-        v-if="coolingPumpRunClass(1)"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-        :class="{ moveClass2: coolingPumpRunClass(1) }"
-      />
-      <img
-        class="cooling-img3"
-        v-if="coolingPumpRunClass(2)"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-        :class="{ moveClass2: coolingPumpRunClass(2) }"
-      />
-      <!-- 频率反馈 -->
-      <div
-        class="cooling-hz1"
-        v-if="coolingPumpHz(0) && coolingPumpRunClass(0)"
-      >
-        {{ coolingPumpHz0 }}Hz
-      </div>
-      <div
-        class="cooling-hz2"
-        v-if="coolingPumpHz(1) && coolingPumpRunClass(1)"
-      >
-        {{ coolingPumpHz1 }}Hz
-      </div>
-      <div
-        class="cooling-hz3"
-        v-if="coolingPumpHz(2) && coolingPumpRunClass(2)"
-      >
-        {{ coolingPumpHz2 }}Hz
-      </div>
-      <!-- 冷冻泵数据定位 -->
-      <div class="freezingPump1">1#</div>
-      <div class="freezingPump2">2#</div>
-      <div class="freezingPump3">3#</div>
-      <img
-        class="freezing-img1"
-        v-if="freezingPumpRunClass(0)"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-        :class="{ moveClass2: freezingPumpRunClass(0) }"
-      />
-      <img
-        class="freezing-img2"
-        v-if="freezingPumpRunClass(1)"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-        :class="{ moveClass2: freezingPumpRunClass(1) }"
-      />
-      <img
-        class="freezing-img3"
-        v-if="freezingPumpRunClass(2)"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-        :class="{ moveClass2: freezingPumpRunClass(2) }"
-      />
-      <!-- 频率反馈 旋转+有频率反馈才显示 -->
-      <div
-        class="freezing-hz1"
-        v-if="freezingPumpHz(0) && freezingPumpRunClass(0)"
-      >
-        {{ freezingPumpHz0 }}Hz
-      </div>
-      <div
-        class="freezing-hz2"
-        v-if="freezingPumpHz(1) && freezingPumpRunClass(1)"
-      >
-        {{ freezingPumpHz1 }}Hz
-      </div>
-      <div
-        class="freezing-hz3"
-        v-if="freezingPumpHz(2) && freezingPumpRunClass(2)"
-      >
-        {{ freezingPumpHz2 }}Hz
-      </div>
-      <!-- 冷却塔数据定位 五个风机 三个出水阀 -->
-      <div class="coolingTower3">3#-1</div>
-      <div class="coolingTower22">2#-2</div>
-      <div class="coolingTower21">2#-1</div>
-      <div class="coolingTower12">1#-2</div>
-      <div class="coolingTower11">1#-1</div>
-      <!-- 风机频率 -->
-      <div
-        class="coolingTowerHz3"
-        v-if="coolingTowerHz(2, 1) && coolingTowerRunClass(2, 1)"
-      >
-        {{ coolingTowerHz31 }}Hz
-      </div>
-      <div
-        class="coolingTowerHz22"
-        v-if="coolingTowerHz(1, 2) && coolingTowerRunClass(1, 2)"
-      >
-        {{ coolingTowerHz22 }}Hz
-      </div>
-      <div
-        class="coolingTowerHz21"
-        v-if="coolingTowerHz(1, 1) && coolingTowerRunClass(1, 1)"
-      >
-        {{ coolingTowerHz21 }}Hz
-      </div>
-      <div
-        class="coolingTowerHz12"
-        v-if="coolingTowerHz(0, 2) && coolingTowerRunClass(0, 2)"
-      >
-        {{ coolingTowerHz12 }}Hz
-      </div>
-      <div
-        class="coolingTowerHz11"
-        v-if="coolingTowerHz(0, 1) && coolingTowerRunClass(0, 1)"
-      >
-        {{ coolingTowerHz11 }}Hz
-      </div>
-      <!-- 3号冷却塔风机1 -->
-      <img
-        class="fan-img1"
-        v-if="coolingTowerRunClass(2, 1)"
-        :class="{ moveClass2: coolingTowerRunClass(2, 1) }"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-      />
-      <!-- 2号冷却塔风机1 -->
-      <img
-        class="fan-img3"
-        v-if="coolingTowerRunClass(1, 1)"
-        :class="{ moveClass2: coolingTowerRunClass(1, 1) }"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-      />
-      <!-- 2号冷却塔风机2 -->
-      <img
-        class="fan-img2"
-        v-if="coolingTowerRunClass(1, 2)"
-        :class="{ moveClass2: coolingTowerRunClass(1, 2) }"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-      />
-      <!-- 1 号冷却塔风机1 -->
-      <img
-        class="fan-img5"
-        v-if="coolingTowerRunClass(0, 1)"
-        :class="{ moveClass2: coolingTowerRunClass(0, 1) }"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-      />
-      <!-- 1号冷却塔风机2 -->
-      <img
-        class="fan-img4"
-        v-if="coolingTowerRunClass(0, 2)"
-        :class="{ moveClass2: coolingTowerRunClass(0, 2) }"
-        src="../../../assets/images/fan-img.png"
-        alt=""
-      />
-      <div
-        class="towerValve1"
-        :class="{ startClass: towerValveControlClass(2) }"
-      ></div>
-      <div
-        class="towerValve2"
-        :class="{ startClass: towerValveControlClass(1) }"
-      ></div>
-      <div
-        class="towerValve3"
-        :class="{ startClass: towerValveControlClass(0) }"
-      ></div>
-      <!-- 冷冻蝶阀数据定位 -->
-      <div
-        class="frozenValve1"
-        :class="{ startClass: frozenValveControlClass(0) }"
-      ></div>
-      <div
-        class="frozenValve2"
-        :class="{ startClass: frozenValveControlClass(1) }"
-      ></div>
-      <div
-        class="frozenValve3"
-        :class="{ startClass: frozenValveControlClass(2) }"
-      ></div>
-      <!-- 冷却蝶阀数据定位 -->
-      <div
-        class="coolingValue1"
-        :class="{ startClass: coolingValueControlClass(0) }"
-      ></div>
-      <div
-        class="coolingValue2"
-        :class="{ startClass: coolingValueControlClass(1) }"
-      ></div>
-      <div
-        class="coolingValue3"
-        :class="{ startClass: coolingValueControlClass(2) }"
-      ></div>
-      <!-- 箭头 -->
-      <img class="in-arrow" src="../../../assets/images/in-arrow.png" alt="" />
-      <img
-        class="out-arrow"
-        src="../../../assets/images/out-arrow.png"
-        alt=""
-      />
-      <!-- 冷冻进出水温度 0是out供(出)水，1是in回(进)水 -->
-      <div class="freezingInTem">{{ freezingInTem }}℃</div>
-      <div class="freezingOutTem">{{ freezingOutTem }}℃</div>
-      <!-- 冷冻水流 -->
-      <div class="freezingOutWater">{{ freezingOutWater }}m³/h</div>
-      <!-- 冷冻进出水压力 -->
-      <div class="freezingInPre">{{ freezingInPre }}kpa</div>
-      <div class="freezingOutPre">{{ freezingOutPre }}kpa</div>
-      <!-- 冷却进出水温度 -->
-      <div class="coolingInTem">{{ coolingInTem }}℃</div>
-      <div class="coolingOutTem">{{ coolingOutTem }}℃</div>
-      <!-- 报警状态与系统模式 -->
-      <div class="statusAndModel" v-if="isWarning">
-        <img src="../../../assets/images/red.png" class="warnStatus" alt="" />
-        <img
-          src="../../../assets/images/border6.png"
-          class="modelStatus"
-          alt=""
-        />
-        <div class="sysWarning" @click="showAlarm">Warning</div>
-        <div class="sysStatus">{{ sysStatus }}</div>
-      </div>
-      <div class="statusAndModel" v-else>
-        <img src="../../../assets/images/blue.png" class="warnStatus" alt="" />
-        <img
-          src="../../../assets/images/border5.png"
-          class="modelStatus"
-          alt=""
-        />
-        <div class="sysNormal">Normal</div>
-        <div class="sysStatus">{{ sysStatus }}</div>
-      </div>
-    </div>
-    <!-- 报警弹框内容 -->
-    <el-dialog
-      title="报警内容"
-      :visible.sync="openDialog"
-      width="680px"
-      append-to-body
-    >
-      <el-table :data="alarmList" height="600px">
-        <el-table-column
-          prop="otherName"
-          label="报警位置"
-          :show-overflow-tooltip="true"
-        ></el-table-column>
-        <el-table-column
-          prop="curTime"
-          label="报警时间"
-          :show-overflow-tooltip="true"
-        ></el-table-column>
-      </el-table>
-    </el-dialog>
-  </div>
+  <div></div>
 </template>
 
 <script>
-import {
-  weatherData,
-  sysPerformance,
-  oneKeyButton,
-  monitorList,
-  operationConrol,
-  systemMode,
-} from "@/api/centerairC/sysMonitor";
-import LineChildren from "./lineChildren.vue";
 export default {
-  name: "sysControl",
-  components: { LineChildren },
-  data() {
-    return {
-      loading: false,
-      weatherObj: {},
-      performanceObj: {},
-      hostList: [], //主机列表
-      coolingPump: [], //冷却泵
-      freezingPump: [], //冷冻泵
-      coolingTower: [], //冷却塔
-      frozenValve: [], //冷冻蝶阀
-      coolingValue: [], //冷却蝶阀
-      coolingTowerInlet: [], //冷却塔进水阀
-      coolingTowerOutlet: [], //冷却塔出水阀
-      freezingManifold: [], //冷冻总管
-      isShowOn: false, //一键启停,false是Off,true显示On
-      oneKeyButtonId: "",
-
-      // 主机负载
-      hostLoad0: "",
-      hostLoad1: "",
-      hostLoad2: "",
-      // 冷却泵频率反馈
-      coolingPumpHz0: "",
-      coolingPumpHz1: "",
-      coolingPumpHz2: "",
-      // 冷冻泵频率反馈
-      freezingPumpHz0: "",
-      freezingPumpHz1: "",
-      freezingPumpHz2: "",
-      // 冷却塔风机频率
-      coolingTowerHz31: "",
-      coolingTowerHz22: "",
-      coolingTowerHz21: "",
-      coolingTowerHz12: "",
-      coolingTowerHz11: "",
-      // 冷冻泵进出水温度
-      freezingInTem: "",
-      freezingOutTem: "",
-      // 冷冻水流
-      freezingOutWater: "",
-      // 冷冻泵进出压力
-      freezingInPre: "",
-      freezingOutPre: "",
-      // 冷却进出水温度
-      coolingInTem: "",
-      coolingOutTem: "",
-
-      // 报警标志
-      isWarning: false,
-      // 报警列表
-      alarmList: [],
-      // 系统模式
-      sysStatus: "",
-      // 模式提示
-      startOrStopStatus: "",
-      openDialog: false,
-      timer: null, // 用于存储定时器 ID
-    };
-  },
-  created() {},
-  mounted() {
-    // 首次进入页面时执行
-    this.getWeatherData();
-    this.getSystemMode();
-    this.getPerformance();
-    this.getOneKeyButton();
-    this.getMonitorList();
-
-    // 设置定时器，每 10 秒执行一次
-    this.timer = setInterval(() => {
-      this.getWeatherData();
-      this.getSystemMode();
-      this.getPerformance();
-      this.getOneKeyButton();
-      this.getMonitorList();
-    }, 10000);
-  },
-  beforeDestroy() {
-    // 组件销毁前清除定时器
-    if (this.timer) {
-      clearInterval(this.timer);
-    }
+  created() {
+    this.toPage();
   },
   methods: {
-    // 获取天气相关数据
-    getWeatherData() {
-      weatherData().then((res) => {
-        if (res.code == 200) {
-          this.weatherObj = res.data;
-        }
-      });
-    },
-    // 获取系统性能数据
-    getPerformance() {
-      sysPerformance().then((res) => {
-        if (res.code == 200) {
-          this.performanceObj = res.data;
-        }
-      });
-    },
-    // 获取当前系统模式/启动、停止运行状态/报警列表
-    getSystemMode() {
-      let data = {
-        systemType: "0",
-        paramType: "27",
-      };
-      systemMode(data).then((res) => {
-        console.log("当前系统模式与报警列表返回", res);
-        if (res.code == 200) {
-          this.sysStatus = res.data.autoType;
-          this.alarmList = res.data.alarmList;
-          if (res.data.alarmList.length > 0) {
-            this.isWarning = true;
-          } else {
-            this.isWarning = false;
-          }
-          this.startOrStopStatus = res.data.startOrStopStatus;
-        }
-      });
-    },
-    showAlarm() {
-      this.openDialog = true;
-    },
-    // 获取一键启停信息
-    getOneKeyButton() {
-      return new Promise((resolve, reject) => {
-        let data = {
-          systemType: 0,
-          paramType: "27",
-        };
-        oneKeyButton(data)
-          .then((res) => {
-            console.log("一键启停返回信息", res);
-            if (res.code === 200) {
-              this.oneKeyButtonId = res.data.id;
-              if (Number(res.data.curValue) == 0) {
-                this.isShowOn = false;
-              } else {
-                this.isShowOn = true;
-              }
-            } else {
-              this.oneKeyButtonId = "";
-              this.isShowOn = false;
-            }
-            // 成功时解析 Promise
-            resolve(res);
-          })
-          .catch((error) => {
-            // 失败时拒绝 Promise
-            reject(error);
-          });
-      });
-    },
-    // 一键启停按钮
-    handleOneKeyButton() {
-      let param = "";
-      let paramText = "";
-      if (this.isShowOn) {
-        // this.isShowOn为true代表ON,此时点击按钮想OFF
-        param = 0;
-        paramText = "一键关闭";
-      } else {
-        param = 1;
-        paramText = "一键开启";
-      }
-      this.$confirm(`确定要${paramText}吗?`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          let data = {
-            id: this.oneKeyButtonId,
-            param: param,
-          };
-          operationConrol([data])
-            .then((res) => {
-              if (res.code == 200) {
-                this.$modal.msgSuccess("指令下发成功!");
-                // 开启 loading 效果
-                this.loading = true;
-                // 更新状态;
-                setTimeout(() => {
-                  this.getOneKeyButton().finally(() => {
-                    // 关闭 loading 效果
-                    this.loading = false;
-                  });
-                }, 5000);
-              } else {
-                this.getOneKeyButton();
-              }
-            })
-            .catch((error) => {
-              console.log("请求发生错误，更新设备状态", error);
-              this.ggetOneKeyButton();
-            });
-        })
-        .catch(() => {});
-    },
-    // 系统监测数据
-    getMonitorList() {
-      monitorList({ systemType: 0 }).then((res) => {
-        if (res.code === 200) {
-          console.log("设备监测列表返回", res);
-
-          // 初始化各个设备列表
-          this.hostList = [];
-          this.coolingPump = [];
-          this.freezingPump = [];
-          this.coolingTower = [];
-          this.frozenValve = [];
-          this.coolingValue = [];
-          this.coolingTowerInlet = [];
-          this.coolingTowerOutlet = [];
-          this.freezingManifold = [];
-
-          res.rows.forEach((row) => {
-            switch (row.name) {
-              case "0":
-                this.hostList = this.processDeviceList(row.values);
-                console.log("主机列表", this.hostList);
-                break;
-              case "1":
-                this.coolingPump = this.processDeviceList(row.values);
-                console.log("冷却泵列表", this.coolingPump);
-                break;
-              case "2":
-                this.freezingPump = this.processDeviceList(row.values);
-                console.log("冷冻泵列表", this.freezingPump);
-                break;
-              case "3":
-                this.coolingTower = this.processDeviceList(row.values);
-                console.log("冷却塔列表", this.coolingTower);
-                break;
-              case "4":
-                this.frozenValve = this.processDeviceList(row.values);
-                console.log("冷冻蝶阀列表", this.frozenValve);
-                break;
-              case "7":
-                this.coolingValue = this.processDeviceList(row.values);
-                console.log("冷却蝶阀列表", this.coolingValue);
-                break;
-              case "8":
-                this.coolingTowerInlet = this.processDeviceList(row.values);
-                console.log("冷却塔进水阀列表", this.coolingTowerInlet);
-                break;
-              case "9":
-                this.coolingTowerOutlet = this.processDeviceList(row.values);
-                console.log("冷却塔出水阀列表", this.coolingTowerOutlet);
-                break;
-              case "15":
-                this.freezingManifold = row.values;
-                console.log("冷冻总管", this.freezingManifold);
-                this.freezingManifoldData();
-                break;
-              default:
-                break;
-            }
-          });
-        }
-      });
-    },
-    // 封装一个通用函数来处理设备列表
-    processDeviceList(values) {
-      const deviceList = [];
-      // 遍历每个设备属性
-      values.forEach((item) => {
-        // 提取设备编号
-        const match = item.deviceName.match(/(\d+)号/);
-        if (match) {
-          const deviceNumber = parseInt(match[1]);
-          // 如果 deviceList 中对应编号的对象还不存在，则创建一个新对象
-          if (!deviceList[deviceNumber - 1]) {
-            deviceList[deviceNumber - 1] = {
-              deviceName: item.deviceName,
-              properties: [],
-            };
-          }
-          // 将当前属性添加到对应设备的 properties 数组中
-          deviceList[deviceNumber - 1].properties.push(item);
-        }
-      });
-      // 过滤掉 deviceList 中可能存在的空元素
-      return deviceList.filter((item) => item);
-    },
-    // 主机负载
-    hostLoadData(index) {
-      // 检查 hostList 长度是否足够
-      if (this.hostList.length <= index) {
-        return false;
-      }
-      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
-      const properties = this.hostList[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-      // 遍历 properties 数组，如果当前对象paramType === 28表示主机负载
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "28") {
-          // 动态构造属性名
-          const propertyName = `hostLoad${index}`;
-          // 使用方括号语法动态设置属性值
-          this[propertyName] = item.collectValue;
-          return true;
-        }
-      }
-      // 否则代表启停控制中的停止
-      return false;
-    },
-    // 主机启停状态
-    hostListControlClass(index) {
-      // 检查 hostList 长度是否足够
-      if (this.hostList.length <= index) {
-        return false;
-      }
-      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
-      const properties = this.hostList[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-      // 遍历 properties 数组，如果当前对象paramType === 2并且item.collectValue !== "0.00"则便是启停控制中的开启
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "2" && Number(item.collectValue) !== 0) {
-          return true;
-        }
-      }
-      // 否则代表启停控制中的停止
-      return false;
-    },
-    // 主机运行状态
-    hostListRunClass(index) {
-      // 检查 hostList 长度是否足够
-      if (this.hostList.length <= index) {
-        return false;
-      }
-      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
-      const properties = this.hostList[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "1" && Number(item.collectValue) !== 0) {
-          return true;
-        }
-      }
-      // 否则代表运行状态中的不运行
-      return false;
-    },
-    // 主机冷却水流信号
-    hostCoolingWaterFlowClass(index) {
-      // 检查 hostList 长度是否足够
-      if (this.hostList.length <= index) {
-        return false;
-      }
-      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
-      const properties = this.hostList[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-      // 遍历 properties 数组，如果当前对象paramType === 21并且item.collectValue !== "0.00"则便是主机冷却水流信号：接通
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "21" && Number(item.collectValue) !== 0) {
-          return true;
-        }
-      }
-      // 否则代表主机冷却水流信号：断开
-      return false;
-    },
-    // 主机冷冻水流信号
-    hostFreezeWaterFlowClass(index) {
-      // 检查 hostList 长度是否足够
-      if (this.hostList.length <= index) {
-        return false;
-      }
-      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
-      const properties = this.hostList[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-      // 遍历 properties 数组，如果当前对象paramType === 20并且item.collectValue !== "0.00"则便是主机冷冻水流信号：接通
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "20" && Number(item.collectValue) !== 0) {
-          return true;
-        }
-      }
-      // 否则代表主机冷冻水流信号：断开
-      return false;
-    },
-    // 冷却泵运行状态
-    coolingPumpRunClass(index) {
-      // 检查 coolingPump 长度是否足够
-      if (this.coolingPump.length <= index) {
-        return false;
-      }
-      // 检查 properties 数组是否存在    coolingPump[index]数组的properties数组
-      const properties = this.coolingPump[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "1" && Number(item.collectValue) !== 0) {
-          return true;
-        }
-      }
-      // 否则代表运行状态中的不运行
-      return false;
-    },
-    // 冷却泵频率
-    coolingPumpHz(index) {
-      // 检查 coolingPump 长度是否足够
-      if (this.coolingPump.length <= index) {
-        return false;
-      }
-      // 检查 properties 数组是否存在    coolingPump[index]数组的properties数组
-      const properties = this.coolingPump[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-      // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "4") {
-          // 动态构造属性名
-          const propertyName = `coolingPumpHz${index}`;
-          // 使用方括号语法动态设置属性值
-          this[propertyName] = item.collectValue;
-          // this.coolingPumpHz[index] = item.collectValue;
-          return true;
-        }
-      }
-      // 否则代表运行状态中的不运行
-      return false;
-    },
-    // 冷冻泵运行状态
-    freezingPumpRunClass(index) {
-      // 检查 freezingPump 长度是否足够
-      if (this.freezingPump.length <= index) {
-        return false;
-      }
-      // console.log("打印this.freezingPump数组", this.freezingPump);
-      // 检查 properties 数组是否存在    freezingPump[index]数组的properties数组
-      const properties = this.freezingPump[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "1" && Number(item.collectValue) !== 0) {
-          return true;
-        }
-      }
-      // 否则代表运行状态中的不运行
-      return false;
-    },
-    //冷冻泵频率
-    freezingPumpHz(index) {
-      // 检查 freezingPump 长度是否足够
-      if (this.freezingPump.length <= index) {
-        return false;
-      }
-      // 检查 properties 数组是否存在    freezingPump[index]数组的properties数组
-      const properties = this.freezingPump[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-      // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "4") {
-          // 动态构造属性名
-          const propertyName = `freezingPumpHz${index}`;
-          // 使用方括号语法动态设置属性值
-          this[propertyName] = item.collectValue;
-          // this.freezingPumpHz[index] = item.collectValue;
-          return true;
-        }
-      }
-      // 否则代表运行状态中的不运行
-      return false;
-    },
-    // 冷却塔风机运行状态,index为多少号风机,0表示1号风机;item表示风机x
-    coolingTowerRunClass(index, item) {
-      // 检查 coolingTower 长度是否足够
-      if (this.coolingTower.length <= index) {
-        return false;
-      }
-
-      // 获取指定索引的 coolingTower 元素的 properties 数组
-      const properties = this.coolingTower[index].properties;
-
-      // 检查 properties 数组是否存在
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-
-      // 创建一个新数组，用于存储 paramType === 1 的对象
-      const filteredProperties = [];
-      let filterItem = {};
-      for (let i = 0; i < properties.length; i++) {
-        // console.log('properties[i].paramType',properties[i].paramType)
-        if (properties[i].paramType === "1") {
-          filteredProperties.push(properties[i]);
-          // filterItem  = properties[i]
-        }
-      }
-      // // 将处理后的对象添加到 deviceList 中
-      // if (Object.keys(filterItem).length > 1) {
-      //   filteredProperties.push(filterItem);
-      // }
-      // console.log("paramType为1的对象", filteredProperties);
-      // console.log("index, item", index, item);
-      // 根据 index 和 item 生成目标属性名称
-      const towerNumber = index + 1;
-      const targetPropertyName = `${towerNumber}号冷却塔风机${item}运行`;
-      // console.log("targetPropertyName",targetPropertyName)
-      // 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
-      for (let i = 0; i < filteredProperties.length; i++) {
-        if (
-          filteredProperties[i].collectName === targetPropertyName &&
-          Number(filteredProperties[i].collectValue) !== 0
-        ) {
-          if (index === 0 && item === 1) {
-            // console.log(
-            //   "返回的true",
-            //   filteredProperties[i].collectName === targetPropertyName &&
-            //     Number(filteredProperties[i].collectValue) !== 0
-            // );
-          }
-          return true;
-        }
-      }
-
-      // 否则代表运行状态中的不运行
-      return false;
-    },
-    // 冷却塔风机频率,index为多少号风机,0表示1号风机;item表示风机x
-    coolingTowerHz(index, item) {
-      // 检查 coolingTower 长度是否足够
-      if (this.coolingTower.length <= index) {
-        return false;
-      }
-
-      // 获取指定索引的 coolingTower 元素的 properties 数组
-      const properties = this.coolingTower[index].properties;
-
-      // 检查 properties 数组是否存在
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-
-      // 创建一个新数组，用于存储 paramType === 4 的对象
-      const filteredProperties = [];
-      let filterItem = {};
-      for (let i = 0; i < properties.length; i++) {
-        // console.log('properties[i].paramType',properties[i].paramType)
-        if (properties[i].paramType === "4") {
-          filteredProperties.push(properties[i]);
-          // filterItem  = properties[i]
-        }
-      }
-      // // 将处理后的对象添加到 deviceList 中
-      // if (Object.keys(filterItem).length > 1) {
-      //   filteredProperties.push(filterItem);
-      // }
-      // console.log("paramType为4的对象", filteredProperties);
-      // console.log("index, item", index, item);
-      // 根据 index 和 item 生成目标属性名称
-      const towerNumber = index + 1;
-      const targetPropertyName = `${towerNumber}号冷却塔风机${item}频率反馈`;
-      // console.log("targetPropertyName",targetPropertyName)
-      // 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
-      for (let i = 0; i < filteredProperties.length; i++) {
-        if (filteredProperties[i].collectName === targetPropertyName) {
-          // 动态构造 coolingTowerHz 相关属性名
-          const coolingTowerHzPropertyName = `coolingTowerHz${towerNumber}${item}`;
-          // console.log(
-          //   "coolingTowerHzPropertyName---",
-          //   coolingTowerHzPropertyName
-          // );
-          // 获取 collectValue 转换为数字后的值
-          const value = Number(filteredProperties[i].collectValue);
-          // 使用方括号语法动态设置属性值
-          this[coolingTowerHzPropertyName] = value;
-          // console.log("Number(filteredProperties[i].collectValue)", value);
-          return true;
-        }
-      }
-
-      // 否则代表运行状态中的不运行
-      return false;
-    },
-    // 冷却塔出水蝶阀启停状态
-    towerValveControlClass(index) {
-      // 检查 coolingTowerOutlet 长度是否足够
-      if (this.coolingTowerOutlet.length <= index) {
-        return false;
-      }
-      // console.log("打印this.coolingTowerOutlet数组", this.coolingTowerOutlet);
-      // 检查 properties 数组是否存在    coolingTowerOutlet[index]数组的properties数组
-      const properties = this.coolingTowerOutlet[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-
-      let valveOpenFeedbackFound = false;
-      let valveCloseFeedbackFound = false;
-      // 遍历 properties 数组
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "7") {
-          // console.log("item.collectName", item.collectName);
-          // console.log("item.collectValue", item.collectValue);
-          // 阀开到位是开启
-          if (
-            item.collectName.includes("阀开到位") &&
-            Number(item.collectValue) == 1
-          ) {
-            valveOpenFeedbackFound = true;
-          }
-          // 阀关到位是关闭
-          if (
-            item.collectName.includes("阀关到位") &&
-            Number(item.collectValue) == 0
-          ) {
-            valveCloseFeedbackFound = true;
-          }
-        }
-      }
-
-      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
-      return valveOpenFeedbackFound && valveCloseFeedbackFound;
-    },
-    // 冷冻蝶阀启停状态
-    frozenValveControlClass(index) {
-      // 检查 frozenValve 长度是否足够
-      if (this.frozenValve.length <= index) {
-        return false;
-      }
-      // console.log("打印this.frozenValve数组", this.frozenValve);
-      // 检查 properties 数组是否存在    frozenValve[index]数组的properties数组
-      const properties = this.frozenValve[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-
-      let valveOpenFeedbackFound = false;
-      let valveCloseFeedbackFound = false;
-
-      // 遍历 properties 数组
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "7") {
-          // 阀开到位是开启
-          if (
-            item.collectName.includes("阀开到位") &&
-            Number(item.collectValue) !== 0
-          ) {
-            valveOpenFeedbackFound = true;
-          }
-          // 阀关到位是关闭
-          if (
-            item.collectName.includes("阀关到位") &&
-            Number(item.collectValue) === 0
-          ) {
-            valveCloseFeedbackFound = true;
-          }
-        }
-      }
-
-      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
-      return valveOpenFeedbackFound && valveCloseFeedbackFound;
-    },
-    // 冷却蝶阀启停状态
-    coolingValueControlClass(index) {
-      // 检查 coolingValue 长度是否足够
-      if (this.coolingValue.length <= index) {
-        return false;
-      }
-      // console.log("打印this.coolingValue数组", this.coolingValue);
-      // 检查 properties 数组是否存在    coolingValue[index]数组的properties数组
-      const properties = this.coolingValue[index].properties;
-      if (!properties || properties.length === 0) {
-        return false;
-      }
-
-      let valveOpenFeedbackFound = false;
-      let valveCloseFeedbackFound = false;
-
-      // 遍历 properties 数组
-      for (let i = 0; i < properties.length; i++) {
-        const item = properties[i];
-        if (item.paramType === "7") {
-          // 阀开到位是开启
-          if (
-            item.collectName.includes("阀开到位") &&
-            Number(item.collectValue) !== 0
-          ) {
-            valveOpenFeedbackFound = true;
-          }
-          // 阀关到位是关闭
-          if (
-            item.collectName.includes("阀关到位") &&
-            Number(item.collectValue) === 0
-          ) {
-            valveCloseFeedbackFound = true;
-            // console.log("冷冻蝶阀阀关到位应该是true才对呀");
-          }
-        }
-      }
-
-      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
-      return valveOpenFeedbackFound && valveCloseFeedbackFound;
-    },
-    // 冷冻总管数据 供回水温度、压力等
-    freezingManifoldData(index, val) {
-      console.log("this.freezingManifold", this.freezingManifold);
-      // 检查 freezingManifold 长度是否足够
-      if (this.freezingManifold.length <= index) {
-        return false;
-      }
-      this.freezingManifold.forEach((item) => {
-        if (item.collectName === "冷冻供水温度") {
-          this.freezingOutTem = item.collectValue;
-          console.log("item.collectName", item.collectName);
-        } else if (item.collectName === "冷冻回水温度") {
-          this.freezingInTem = item.collectValue;
-        } else if (item.collectName === "冷冻供水压力") {
-          this.freezingOutPre = item.collectValue;
-        } else if (item.collectName === "冷冻回水压力") {
-          this.freezingInPre = item.collectValue;
-        } else if (item.collectName === "冷却供水温度") {
-          this.coolingOutTem = item.collectValue;
-        } else if (item.collectName === "冷却回水温度") {
-          this.coolingInTem = item.collectValue;
-        } else if (item.collectName === "总冷量计瞬时流量") {
-          this.freezingOutWater = item.collectValue;
-        }
-      });
-      return true;
+    toPage() {
+      console.log("需要跳转的")
+      // 跳转到高校导航大屏展示
+      this.$router.push("/monitorCenter")
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.monitor {
-  width: 100%;
-  .monitor-content {
-    width: 16rem;
-    // height: 9.65rem;
-    position: relative;
-    margin-left: calc((100% - 16rem) / 2);
-    .sys-logo {
-      width: 1.9rem;
-      height: 0.56rem;
-      position: absolute;
-      top: 0.4rem;
-      left: 0;
-      z-index: 10;
-    }
-    .sys-title {
-      background-image: url(../../../assets/images/top.png);
-      background-size: 100% 100%;
-      width: 16rem;
-      height: 0.5rem;
-      position: absolute;
-      top: 0;
-      left: 0;
-      font-size: 0.22rem;
-      color: #ffffff;
-      font-weight: bold;
-      z-index: 100;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    .monitor-img {
-      position: absolute;
-      top: 0.6rem;
-      left: calc((100% - 15rem) / 2);
-      width: 15rem;
-      height: 9.15rem;
-      z-index: 1;
-    }
-    .fan-img1 {
-      z-index: 10;
-      position: absolute;
-      top: 1.45rem;
-      left: 5.27rem;
-      width: 0.5rem;
-      height: 0.5rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .fan-img2 {
-      z-index: 10;
-      position: absolute;
-      top: 1.16rem;
-      left: 6.23rem;
-      width: 0.5rem;
-      height: 0.5rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .fan-img3 {
-      z-index: 10;
-      position: absolute;
-      top: 1.06rem;
-      left: 6.72rem;
-      width: 0.5rem;
-      height: 0.5rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .fan-img4 {
-      z-index: 10;
-      position: absolute;
-      top: 0.85rem;
-      left: 7.54rem;
-      width: 0.5rem;
-      height: 0.5rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .fan-img5 {
-      z-index: 10;
-      position: absolute;
-      top: 0.74rem;
-      left: 7.95rem;
-      width: 0.5rem;
-      height: 0.5rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    /* 定义 fan 动画关键帧 */
-    @keyframes fan {
-      0% {
-        /* 修改初始旋转角度 */
-        transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-      }
-      100% {
-        /* 修改结束旋转角度 */
-        transform: translateX(-50%) rotateX(60deg) rotateZ(360deg);
-      }
-    }
-    .towerValve1 {
-      z-index: 10;
-      position: absolute;
-      top: 1.88rem;
-      left: 5.98rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      background-color: #ebebeb;
-      border-radius: 50%;
-    }
-    .towerValve2 {
-      z-index: 10;
-      position: absolute;
-      top: 1.64rem;
-      left: 7.04rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      background-color: #ebebeb;
-      border-radius: 50%;
-    }
-    .towerValve3 {
-      z-index: 10;
-      position: absolute;
-      top: 1.3rem;
-      left: 8.29rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      background-color: #ebebeb;
-      border-radius: 50%;
-    }
-    .in-arrow {
-      position: absolute;
-      top: 3.2rem;
-      right: 3.6rem;
-      transform: rotate(180deg);
-      width: 0.4rem;
-      height: 0.6rem;
-      z-index: 10;
-    }
-    .out-arrow {
-      position: absolute;
-      top: 4rem;
-      right: 1.3rem;
-      width: 0.4rem;
-      height: 0.6rem;
-      z-index: 10;
-    }
-    .coolingInTem {
-      z-index: 10;
-      position: absolute;
-      top: 2.9rem;
-      left: 8.35rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .coolingOutTem {
-      z-index: 10;
-      position: absolute;
-      top: 3.6rem;
-      left: 4.77rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .freezingInTem {
-      z-index: 10;
-      position: absolute;
-      top: 4.85rem;
-      right: 4.5rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .freezingOutTem {
-      z-index: 10;
-      position: absolute;
-      top: 5.44rem;
-      right: 3.04rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .freezingOutWater {
-      z-index: 10;
-      position: absolute;
-      top: 6.7rem;
-      right: 4.4rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-
-    .freezingInPre {
-      z-index: 10;
-      position: absolute;
-      top: 5.3rem;
-      right: 5.3rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .freezingOutPre {
-      z-index: 10;
-      position: absolute;
-      top: 5.9rem;
-      right: 3.7rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .host-line1 {
-      position: absolute;
-      left: -0.95rem;
-      top: 6.97rem;
-      z-index: 10;
-    }
-    .host-line2 {
-      position: absolute;
-      left: -0.74rem;
-      top: 7.72rem;
-      z-index: 10;
-    }
-    .host-line3 {
-      position: absolute;
-      left: -0.6rem;
-      top: 8.55rem;
-      z-index: 10;
-    }
-    .hostName1 {
-      border-bottom: 1px solid rgba(0, 255, 255, 1);
-      z-index: 10;
-      font-size: 0.22rem;
-      font-weight: bold;
-      color: aqua;
-      position: absolute;
-      top: 7.26rem;
-      left: 2.9rem;
-      transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); /* 分别在 X、Y、Z 轴上旋转 */
-      transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
-      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
-    }
-    .hostName2 {
-      border-bottom: 1px solid rgba(0, 255, 255, 1);
-      z-index: 10;
-      font-size: 0.22rem;
-      font-weight: bold;
-      color: aqua;
-      position: absolute;
-      top: 6.5rem;
-      left: 5rem;
-      transform: rotateX(50deg) rotateY(0deg) rotateZ(42deg);
-      transform-origin: bottom center;
-      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
-    }
-    .hostName3 {
-      border-bottom: 1px solid rgba(0, 255, 255, 1);
-      z-index: 10;
-      font-size: 0.22rem;
-      font-weight: bold;
-      color: aqua;
-      position: absolute;
-      top: 5.6rem;
-      left: 6.67rem;
-      transform: rotateX(50deg) rotateY(0deg) rotateZ(39deg);
-      transform-origin: bottom center;
-      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
-    }
-    /* 定义 host 动画关键帧 */
-    @keyframes host {
-      0% {
-        /* 修改初始旋转角度 */
-        transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
-      }
-      100% {
-        /* 修改结束旋转角度 */
-        transform: translateX(-50%) rotateX(15deg) rotateZ(360deg);
-      }
-    }
-    .host-img1 {
-      z-index: 10;
-      position: absolute;
-      top: 7.14rem;
-      left: 4.4rem;
-      width: 0.4rem;
-      height: 0.4rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
-    }
-    .host-img2 {
-      z-index: 10;
-      position: absolute;
-      top: 6.32rem;
-      left: 6.34rem;
-      width: 0.4rem;
-      height: 0.4rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(0deg) rotateZ(0deg);
-    }
-    .host-img3 {
-      z-index: 10;
-      position: absolute;
-      top: 5.55rem;
-      left: 8.42rem;
-      width: 0.4rem;
-      height: 0.4rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
-    }
-    .hostLoad1 {
-      z-index: 10;
-      position: absolute;
-      top: 6.5rem;
-      left: 4rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .hostLoad2 {
-      z-index: 10;
-      position: absolute;
-      top: 5.8rem;
-      left: 6rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .hostLoad3 {
-      z-index: 10;
-      position: absolute;
-      top: 5rem;
-      left: 7.9rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .water-flow1 {
-      z-index: 10;
-      position: absolute;
-      top: 7.4rem;
-      left: 0.1rem;
-      font-size: 0.16rem;
-    }
-    .water-flow2 {
-      z-index: 10;
-      position: absolute;
-      top: 8.18rem;
-      left: 0.4rem;
-      font-size: 0.16rem;
-    }
-    .water-flow3 {
-      z-index: 10;
-      position: absolute;
-      top: 9rem;
-      left: 0.52rem;
-      font-size: 0.16rem;
-    }
-    .water-flow-li {
-      margin-bottom: 0.04rem;
-      color: #46f1e3;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      span {
-        background-color: rgba(0, 255, 255, 0.2);
-        border-radius: 0.1rem;
-        padding: 0.01rem 0.03rem;
-      }
-      .break {
-        margin-left: 0.07rem;
-        display: inline-block;
-        width: 0.18rem;
-        height: 0.18rem;
-        border-radius: 50%;
-        border: 1px solid #46f1e3;
-        background-color: transparent !important;
-      }
-      .connect {
-        animation: blink 1s infinite;
-        background-color: #38fc52 !important;
-      }
-    }
-    .moveClass {
-      animation: host 2s linear infinite;
-    }
-    .moveClass2 {
-      animation: fan 2s linear infinite;
-    }
-    .startClass {
-      /* 应用动画 */
-      animation: blink 1s infinite;
-      background-color: #38fc52 !important;
-    }
-    .hostStatus1 {
-      z-index: 10;
-      position: absolute;
-      top: 6.7rem;
-      left: 4.05rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      border-radius: 50%;
-    }
-    .hostStatus2 {
-      z-index: 10;
-      position: absolute;
-      top: 6rem;
-      left: 6.05rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      border-radius: 50%;
-    }
-    .hostStatus3 {
-      z-index: 10;
-      position: absolute;
-      top: 5.2rem;
-      left: 7.8rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      border-radius: 50%;
-    }
-    .coolingPump1 {
-      z-index: 10;
-      font-size: 0.15rem;
-      font-weight: bold;
-      color: #46f1e3;
-      position: absolute;
-      top: 4.4rem;
-      left: 7.55rem;
-    }
-    .coolingPump2 {
-      z-index: 10;
-      font-size: 0.15rem;
-      font-weight: bold;
-      color: #46f1e3;
-      position: absolute;
-      top: 4.1rem;
-      left: 8.48rem;
-    }
-    .coolingPump3 {
-      z-index: 10;
-      font-size: 0.15rem;
-      font-weight: bold;
-      color: #46f1e3;
-      position: absolute;
-      top: 3.74rem;
-      left: 9.34rem;
-    }
-    .cooling-img1 {
-      z-index: 10;
-      position: absolute;
-      top: 3.94rem;
-      left: 7.65rem;
-      width: 0.4rem;
-      height: 0.4rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .cooling-img2 {
-      z-index: 10;
-      position: absolute;
-      top: 3.6rem;
-      left: 8.57rem;
-      width: 0.4rem;
-      height: 0.4rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .cooling-img3 {
-      z-index: 10;
-      position: absolute;
-      top: 3.3rem;
-      left: 9.45rem;
-      width: 0.4rem;
-      height: 0.4rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .cooling-hz1 {
-      z-index: 10;
-      position: absolute;
-      top: 3.88rem;
-      left: 7.43rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .cooling-hz2 {
-      z-index: 10;
-      position: absolute;
-      top: 3.55rem;
-      left: 8.35rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .cooling-hz3 {
-      z-index: 10;
-      position: absolute;
-      top: 3.25rem;
-      left: 9.25rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .freezingPump1 {
-      z-index: 10;
-      font-size: 0.15rem;
-      font-weight: bold;
-      color: #46f1e3;
-      position: absolute;
-      top: 7.88rem;
-      left: 7.13rem;
-    }
-    .freezingPump2 {
-      z-index: 10;
-      font-size: 0.15rem;
-      font-weight: bold;
-      color: #46f1e3;
-      position: absolute;
-      top: 7.28rem;
-      left: 8.4rem;
-    }
-    .freezingPump3 {
-      z-index: 10;
-      font-size: 0.15rem;
-      font-weight: bold;
-      color: #46f1e3;
-      position: absolute;
-      top: 6.75rem;
-      left: 9.47rem;
-    }
-    .freezing-img1 {
-      z-index: 10;
-      position: absolute;
-      top: 7.35rem;
-      left: 7.2rem;
-      width: 0.4rem;
-      height: 0.4rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .freezing-img2 {
-      z-index: 10;
-      position: absolute;
-      top: 6.73rem;
-      left: 8.5rem;
-      width: 0.4rem;
-      height: 0.4rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .freezing-img3 {
-      z-index: 10;
-      position: absolute;
-      top: 6.21rem;
-      left: 9.56rem;
-      width: 0.4rem;
-      height: 0.4rem;
-      transform-style: preserve-3d;
-      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
-    }
-    .freezing-hz1 {
-      z-index: 10;
-      position: absolute;
-      top: 7.3rem;
-      left: 6.93rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .freezing-hz2 {
-      z-index: 10;
-      position: absolute;
-      top: 6.66rem;
-      left: 8.25rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .freezing-hz3 {
-      z-index: 10;
-      position: absolute;
-      top: 6.15rem;
-      left: 9.36rem;
-      font-size: 0.16rem;
-      font-weight: bold;
-    }
-    .coolingTower3 {
-      z-index: 10;
-      font-size: 0.18rem;
-      color: #46f1e3;
-      position: absolute;
-      top: 2.44rem;
-      left: 5.4rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    .coolingTower22 {
-      z-index: 10;
-      font-size: 0.18rem;
-      color: #46f1e3;
-      position: absolute;
-      top: 2.2rem;
-      left: 6.3rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    .coolingTower21 {
-      z-index: 10;
-      font-size: 0.18rem;
-      color: #46f1e3;
-      position: absolute;
-      top: 2.07rem;
-      left: 6.76rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    .coolingTower12 {
-      z-index: 10;
-      font-size: 0.18rem;
-      color: #46f1e3;
-      position: absolute;
-      top: 1.83rem;
-      left: 7.57rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    .coolingTower11 {
-      z-index: 10;
-      font-size: 0.18rem;
-      color: #46f1e3;
-      position: absolute;
-      top: 1.72rem;
-      left: 8rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    .coolingTowerHz11 {
-      z-index: 10;
-      font-size: 0.16rem;
-      color: #ffffff;
-      position: absolute;
-      top: 0.7rem;
-      left: 7.56rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    .coolingTowerHz12 {
-      z-index: 10;
-      font-size: 0.16rem;
-      color: #ffffff;
-      position: absolute;
-      top: 0.85rem;
-      left: 6.95rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    .coolingTowerHz21 {
-      z-index: 10;
-      font-size: 0.16rem;
-      color: #ffffff;
-      position: absolute;
-      top: 1.02rem;
-      left: 6.2rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    .coolingTowerHz22 {
-      z-index: 10;
-      font-size: 0.16rem;
-      color: #ffffff;
-      position: absolute;
-      top: 1.17rem;
-      left: 5.57rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    .coolingTowerHz3 {
-      z-index: 10;
-      font-size: 0.16rem;
-      color: #ffffff;
-      position: absolute;
-      top: 1.38rem;
-      left: 4.7rem;
-      font-weight: bold;
-      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
-    }
-    /* 定义灯闪烁的动画 */
-    @keyframes blink {
-      0% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.7;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-    .frozenValve1 {
-      z-index: 10;
-      position: absolute;
-      top: 7.1rem;
-      left: 4.96rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      background-color: #ebebeb;
-      border-radius: 50%;
-    }
-    .frozenValve2 {
-      z-index: 10;
-      position: absolute;
-      top: 6.26rem;
-      left: 6.91rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      background-color: #ebebeb;
-      border-radius: 50%;
-    }
-    .frozenValve3 {
-      z-index: 10;
-      position: absolute;
-      top: 5.34rem;
-      left: 8.68rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      background-color: #ebebeb;
-      border-radius: 50%;
-    }
-    .coolingValue1 {
-      z-index: 10;
-      position: absolute;
-      top: 6.26rem;
-      left: 3.11rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      background-color: #ebebeb;
-      border-radius: 50%;
-    }
-    .coolingValue2 {
-      z-index: 10;
-      position: absolute;
-      top: 5.52rem;
-      left: 5.07rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      background-color: #ebebeb;
-      border-radius: 50%;
-    }
-    .coolingValue3 {
-      z-index: 10;
-      position: absolute;
-      top: 4.8rem;
-      left: 7.15rem;
-      width: 0.18rem;
-      height: 0.18rem;
-      background-color: #ebebeb;
-      border-radius: 50%;
-    }
-    .statusAndModel {
-      z-index: 10;
-      position: absolute;
-      top: 8.7rem;
-      right: 3rem;
-      width: 3rem;
-      .warnStatus {
-        position: absolute;
-        left: 0.04rem;
-        top: 0.3rem;
-        width: 0.45rem;
-        height: 0.45rem;
-        animation: breathe 4s ease-in-out infinite;
-      }
-      @keyframes breathe {
-        0% {
-          transform: scale(1);
-          opacity: 0.5;
-        }
-        50% {
-          transform: scale(1.1);
-          opacity: 1;
-        }
-        100% {
-          transform: scale(1);
-          opacity: 0.5;
-        }
-      }
-      .modelStatus {
-        position: absolute;
-        top: 0;
-        right: 0rem;
-        width: 2.65rem;
-        height: 0.83rem;
-      }
-      .sysNormal {
-        position: absolute;
-        top: 0.63rem;
-        right: 0.7rem;
-        font-size: 0.14rem;
-        font-weight: bold;
-        color: #89e8f5;
-        letter-spacing: 0.02rem;
-      }
-      .sysWarning {
-        position: absolute;
-        top: 0.63rem;
-        right: 0.7rem;
-        font-size: 0.14rem;
-        font-weight: bold;
-        cursor: pointer;
-        color: #ffffff;
-        letter-spacing: 0.02rem;
-        animation: blink 0.5s ease-in-out infinite;
-      }
-      .sysStatus {
-        position: absolute;
-        top: 0.2rem;
-        left: 0.8rem;
-        font-size: 0.18rem;
-        font-weight: bold;
-        color: #ffffff;
-        letter-spacing: 0.02rem;
-      }
-    }
-  }
-  .weather {
-    min-width: 2.85rem;
-    z-index: 10;
-    position: absolute;
-    top: 1rem;
-    left: 1.1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    font-size: 0.2rem;
-    // color: rgb(18, 155, 209);
-    // color: rgb(147, 204, 236);
-    color: rgb(144, 167, 197);
-    background-image: url(../../../assets/images/border1.png);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    padding: 0.15rem 0.1rem 0.25rem 0rem;
-  }
-  .weather-li {
-    width: 100%;
-    padding: 0.05rem 0 0.05rem 0.3rem;
-    /* 初始设置上下边框宽度为 1px，颜色和样式可以先设为透明，后续由 border-image 覆盖 */
-    border-top: 1px solid transparent;
-    border-bottom: 1px dashed #1a3f8f;
-    position: relative;
-    .deepColor {
-      display: inline-block;
-      margin: 0 0.1rem 0 0.05rem;
-      // color: #20ebfa;
-      // color: #18f13c;
-      // color: #6cf02f;
-      color: #6cf02f;
-      font-weight: bold;
-      font-family: DIN;
-      font-size: 0.25rem;
-    }
-  }
-
-  .performance {
-    position: absolute;
-    top: 6.3rem !important;
-    right: 0rem !important;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    font-size: 0.16rem;
-  }
-  .perdformance-bg {
-    width: 2.85rem;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    font-size: 0.2rem;
-    color: rgb(144, 167, 197);
-    background-image: url(../../../assets/images/border4.png);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    padding: 0.15rem 0.1rem 0.25rem 0rem;
-  }
-  .title {
-    z-index: 10;
-    width: 100%;
-    background-image: url(../../../assets/images/text_img_title.png);
-    background-repeat: no-repeat;
-    background-repeat: no-repeat;
-    background-size: 2rem 0.45rem;
-    background-position: bottom left;
-    font-family: SourceHanSansCN-Medium;
-    font-size: 0.2rem;
-    font-style: italic;
-    font-weight: bold;
-    line-height: 0.6rem;
-    color: rgba(209, 214, 223, 1);
-    padding-left: 0.5rem;
-    margin-bottom: 0.01rem;
-    margin-left: 0.4rem;
-  }
-  .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: 0.6rem;
-    right: 0.8rem;
-    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;
-  }
-  .sysTips {
-    position: absolute;
-    top: 2.5rem;
-    left: 13.6rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    z-index: 10;
-    .step {
-      width: 0.2rem;
-      height: 0.3rem;
-      margin-right: 0.04rem;
-      animation: moveRight 1s ease-in-out infinite alternate;
-    }
-    @keyframes moveRight {
-      0% {
-        transform: translateX(0); /* 初始位置，不移动 */
-      }
-      100% {
-        transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
-      }
-    }
-    .tips-text {
-      border: 0.01rem solid transparent;
-      border-image: linear-gradient(to right, #007bff, #00ffff);
-      border-image-slice: 1;
-      font-size: 0.18rem;
-      color: #1fecf3;
-      padding: 0.01rem 0.03rem;
-    }
-  }
-}
-// @media (min-width: 1240px) and (max-width: 1440px) {
-// }
-@media (max-width: 1440px) {
-  .monitor-content {
-    transform: scale(0.9);
-  }
-}
-</style>
-<style scoped>
-.monitor >>> .el-dialog:not(.is-fullscreen) {
-  margin-top: 15% !important;
-}
-</style>
+<style></style>
diff --git a/src/views/centerairC/sysMonitor/monitorCenter.vue b/src/views/centerairC/sysMonitor/monitorCenter.vue
new file mode 100644
index 0000000..3065812
--- /dev/null
+++ b/src/views/centerairC/sysMonitor/monitorCenter.vue
@@ -0,0 +1,2658 @@
+<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="monitor-content">
+      <!-- 天气数据 -->
+      <div class="weather">
+        <div class="weather-li">
+          <span>室外温度：</span>
+          <span class="deepColor">{{ weatherObj.temperature }}</span>
+          <span>℃</span>
+        </div>
+        <div class="weather-li">
+          <span>室外湿度：</span>
+          <span class="deepColor">{{ weatherObj.humidity }}</span>
+          <span>%</span>
+        </div>
+        <div class="weather-li">
+          <span>室外含湿：</span>
+          <span class="deepColor">{{ weatherObj.humidityRatio }}</span>
+          <span>g/kg</span>
+        </div>
+        <div class="weather-li">
+          <span>室外焓值：</span>
+          <span class="deepColor">{{ weatherObj.enthalpy }}</span>
+          <span>kj/kg</span>
+        </div>
+        <div class="weather-li">
+          <span>室外露点：</span>
+          <span class="deepColor">{{ weatherObj.dewPointTemp }}</span>
+          <span>℃</span>
+        </div>
+        <div class="weather-li">
+          <span>室外湿球：</span>
+          <span class="deepColor">{{ weatherObj.wetBulbTemp }}</span>
+          <span>℃</span>
+        </div>
+      </div>
+      <!-- 系统性能数据 -->
+      <div class="performance">
+        <div class="title">系 统 性 能</div>
+        <div class="perdformance-bg">
+          <div class="weather-li">
+            <span>实时EER：</span>
+            <span class="deepColor">{{ performanceObj.realEER }}</span>
+            <span>kw/kw</span>
+          </div>
+          <div class="weather-li">
+            <span>实时功率：</span>
+            <span class="deepColor">{{ performanceObj.realPower }}</span>
+            <span>kw</span>
+          </div>
+          <div class="weather-li">
+            <span>实时冷量：</span>
+            <span class="deepColor">{{ performanceObj.realCold }}</span>
+            <span>kw</span>
+          </div>
+          <div class="weather-li">
+            <span>全年EER：</span>
+            <span class="deepColor">{{ performanceObj.yearEER }}</span>
+            <span>kw</span>
+          </div>
+          <div class="weather-li">
+            <span>全年用电：</span>
+            <span class="deepColor">{{ performanceObj.yearPower }}</span>
+            <span>kw/h</span>
+          </div>
+          <div class="weather-li">
+            <span>全年产冷：</span>
+            <span class="deepColor">{{ performanceObj.yearCold }}</span>
+            <span>kw</span>
+          </div>
+        </div>
+      </div>
+      <!-- 一键启停 -->
+      <div class="offClass" @click="handleOneKeyButton">
+        <div v-if="isShowOn" class="off-bg on-animation">ON</div>
+        <div v-else class="off-bg">OFF</div>
+      </div>
+      <!-- 系统提示 -->
+      <div class="sysTips" v-if="startOrStopStatus">
+        <img class="step" src="../../../assets/images/step.png" alt="" />
+        <div class="tips-text">{{ startOrStopStatus }}</div>
+      </div>
+      <!-- <div class="funtion-menu1" @click="goPerformance">
+        <div class="menu-title"><div>冷机性能统计</div></div>
+        <img class="ditu" src="../../../assets/images/di.png" />
+      </div> -->
+      <div class="funtion-menu1 menu2" @click="goControl">
+        <div class="menu-title"><div>系统控制</div></div>
+        <img class="ditu" src="../../../assets/images/di.png" />
+      </div>
+      <!-- 整体图 -->
+      <img
+        class="monitor-img"
+        src="../../../assets/images/haiwang.png"
+        alt=""
+      />
+
+      <!-- 主机1数据定位 -->
+      <div class="hostName1" v-if="hostList.length > 0">
+        {{ hostList[0].deviceName }}
+      </div>
+      <div
+        class="hostStatus1"
+        :class="{ startClass: hostListControlClass(0) }"
+      ></div>
+      <img
+        class="host-img1"
+        v-if="hostListRunClass(0)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass: hostListRunClass(0) }"
+      />
+      <div
+        class="host-main1"
+        v-if="hostList.length > 0 && hostList[0].deviceName"
+        :title="`${hostList[0].deviceName}性能`"
+        @click="goHostDetail(hostList[0], false)"
+      ></div>
+      <div class="hostLoad1" v-if="hostLoadData(0) && hostListRunClass(0)">
+        {{ hostLoad0 }}
+      </div>
+      <div class="water-flow1">
+        <div class="water-flow-li">
+          <span>1#冷却水流:</span>
+          <span v-if="hostCoolingWaterFlowClass(0)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostCoolingWaterFlowClass(0) }"
+          ></span>
+        </div>
+        <div class="water-flow-li">
+          <span>1#冷冻水流:</span>
+          <span v-if="hostCoolingWaterFlowClass(0)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostFreezeWaterFlowClass(0) }"
+          ></span>
+        </div>
+      </div>
+      <line-children
+        :angle1="-0"
+        :angle2="-40"
+        :lineWidth1="200"
+        :lineWidth2="100"
+        class="host-line1"
+      ></line-children>
+      <!-- 主机2数据定位 -->
+      <div class="hostName2" v-if="hostList.length > 0">
+        {{ hostList[1].deviceName }}
+      </div>
+      <div
+        class="hostStatus2"
+        :class="{ startClass: hostListControlClass(1) }"
+      ></div>
+      <img
+        class="host-img2"
+        v-if="hostListRunClass(1)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass: hostListRunClass(1) }"
+      />
+      <div
+        class="host-main2"
+        v-if="hostList.length > 0 && hostList[1].deviceName"
+        :title="`${hostList[1].deviceName}性能`"
+        @click="goHostDetail(hostList[1], false)"
+      ></div>
+      <div class="hostLoad2" v-if="hostListRunClass(1) && hostListRunClass(1)">
+        {{ hostLoad1 }}
+      </div>
+      <div class="water-flow2">
+        <div class="water-flow-li">
+          <span>2#冷却水流:</span>
+          <span v-if="hostCoolingWaterFlowClass(1)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostCoolingWaterFlowClass(1) }"
+          ></span>
+        </div>
+        <div class="water-flow-li">
+          <span>2#冷冻水流:</span>
+          <span v-if="hostCoolingWaterFlowClass(1)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostFreezeWaterFlowClass(1) }"
+          ></span>
+        </div>
+      </div>
+      <line-children
+        :angle1="-0"
+        :angle2="-40"
+        :lineWidth1="230"
+        :lineWidth2="330"
+        class="host-line2"
+      ></line-children>
+      <!-- 主机3数据定位 -->
+      <div class="hostName3" v-if="hostList.length > 0">
+        {{ hostList[2].deviceName }}
+      </div>
+      <!-- 主机启停状态 -->
+      <div
+        class="hostStatus3"
+        :class="{ startClass: hostListControlClass(2) }"
+      ></div>
+      <!-- 主机运行状态 -->
+      <img
+        class="host-img3"
+        v-if="hostListRunClass(2)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass: hostListRunClass(2) }"
+      />
+      <!-- 点击主机跳转到主机参数详情页 -->
+      <div
+        class="host-main3"
+        v-if="hostList.length > 0 && hostList[2].deviceName"
+        :title="`${hostList[2].deviceName}性能`"
+        @click="goHostDetail(hostList[2], true)"
+      ></div>
+      <!-- 主机负载 -->
+      <div class="hostLoad3" v-if="hostListRunClass(2) && hostListRunClass(2)">
+        {{ hostLoad2 }}
+      </div>
+      <!-- 主机冷却冷冻水流信息 -->
+      <div class="water-flow3">
+        <div class="water-flow-li">
+          <span>3#冷却水流:</span>
+          <span v-if="hostCoolingWaterFlowClass(2)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostCoolingWaterFlowClass(2) }"
+          ></span>
+        </div>
+        <div class="water-flow-li">
+          <span>3#冷冻水流:</span>
+          <span v-if="hostCoolingWaterFlowClass(2)">接通</span>
+          <span v-else>断开</span>
+          <span
+            class="break"
+            :class="{ connect: hostFreezeWaterFlowClass(2) }"
+          ></span>
+        </div>
+      </div>
+      <!-- 线+主机冷却水流状态 -->
+      <line-children
+        :angle1="-0"
+        :angle2="-45"
+        :lineWidth1="300"
+        :lineWidth2="500"
+        class="host-line3"
+      ></line-children>
+
+      <!-- 冷却泵数据定位 -->
+      <div class="coolingPump1">1#</div>
+      <div class="coolingPump2">2#</div>
+      <div class="coolingPump3">3#</div>
+      <!-- 运行状态 -->
+      <img
+        class="cooling-img1"
+        v-if="coolingPumpRunClass(0)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: coolingPumpRunClass(0) }"
+      />
+      <img
+        class="cooling-img2"
+        v-if="coolingPumpRunClass(1)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: coolingPumpRunClass(1) }"
+      />
+      <img
+        class="cooling-img3"
+        v-if="coolingPumpRunClass(2)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: coolingPumpRunClass(2) }"
+      />
+      <!-- 频率反馈 -->
+      <div
+        class="cooling-hz1"
+        v-if="coolingPumpHz(0) && coolingPumpRunClass(0)"
+      >
+        {{ coolingPumpHz0 }}Hz
+      </div>
+      <div
+        class="cooling-hz2"
+        v-if="coolingPumpHz(1) && coolingPumpRunClass(1)"
+      >
+        {{ coolingPumpHz1 }}Hz
+      </div>
+      <div
+        class="cooling-hz3"
+        v-if="coolingPumpHz(2) && coolingPumpRunClass(2)"
+      >
+        {{ coolingPumpHz2 }}Hz
+      </div>
+      <!-- 冷冻泵数据定位 -->
+      <div class="freezingPump1">1#</div>
+      <div class="freezingPump2">2#</div>
+      <div class="freezingPump3">3#</div>
+      <img
+        class="freezing-img1"
+        v-if="freezingPumpRunClass(0)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: freezingPumpRunClass(0) }"
+      />
+      <img
+        class="freezing-img2"
+        v-if="freezingPumpRunClass(1)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: freezingPumpRunClass(1) }"
+      />
+      <img
+        class="freezing-img3"
+        v-if="freezingPumpRunClass(2)"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+        :class="{ moveClass2: freezingPumpRunClass(2) }"
+      />
+      <!-- 频率反馈 旋转+有频率反馈才显示 -->
+      <div
+        class="freezing-hz1"
+        v-if="freezingPumpHz(0) && freezingPumpRunClass(0)"
+      >
+        {{ freezingPumpHz0 }}Hz
+      </div>
+      <div
+        class="freezing-hz2"
+        v-if="freezingPumpHz(1) && freezingPumpRunClass(1)"
+      >
+        {{ freezingPumpHz1 }}Hz
+      </div>
+      <div
+        class="freezing-hz3"
+        v-if="freezingPumpHz(2) && freezingPumpRunClass(2)"
+      >
+        {{ freezingPumpHz2 }}Hz
+      </div>
+      <!-- 冷却塔数据定位 五个风机 三个出水阀 -->
+      <div class="coolingTower3">3#-1</div>
+      <div class="coolingTower22">2#-2</div>
+      <div class="coolingTower21">2#-1</div>
+      <div class="coolingTower12">1#-2</div>
+      <div class="coolingTower11">1#-1</div>
+      <!-- 风机频率 -->
+      <div
+        class="coolingTowerHz3"
+        v-if="coolingTowerHz(2, 1) && coolingTowerRunClass(2, 1)"
+      >
+        {{ coolingTowerHz31 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz22"
+        v-if="coolingTowerHz(1, 2) && coolingTowerRunClass(1, 2)"
+      >
+        {{ coolingTowerHz22 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz21"
+        v-if="coolingTowerHz(1, 1) && coolingTowerRunClass(1, 1)"
+      >
+        {{ coolingTowerHz21 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz12"
+        v-if="coolingTowerHz(0, 2) && coolingTowerRunClass(0, 2)"
+      >
+        {{ coolingTowerHz12 }}Hz
+      </div>
+      <div
+        class="coolingTowerHz11"
+        v-if="coolingTowerHz(0, 1) && coolingTowerRunClass(0, 1)"
+      >
+        {{ coolingTowerHz11 }}Hz
+      </div>
+      <!-- 3号冷却塔风机1 -->
+      <img
+        class="fan-img1"
+        v-if="coolingTowerRunClass(2, 1)"
+        :class="{ moveClass2: coolingTowerRunClass(2, 1) }"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+      />
+      <!-- 2号冷却塔风机1 -->
+      <img
+        class="fan-img3"
+        v-if="coolingTowerRunClass(1, 1)"
+        :class="{ moveClass2: coolingTowerRunClass(1, 1) }"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+      />
+      <!-- 2号冷却塔风机2 -->
+      <img
+        class="fan-img2"
+        v-if="coolingTowerRunClass(1, 2)"
+        :class="{ moveClass2: coolingTowerRunClass(1, 2) }"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+      />
+      <!-- 1 号冷却塔风机1 -->
+      <img
+        class="fan-img5"
+        v-if="coolingTowerRunClass(0, 1)"
+        :class="{ moveClass2: coolingTowerRunClass(0, 1) }"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+      />
+      <!-- 1号冷却塔风机2 -->
+      <img
+        class="fan-img4"
+        v-if="coolingTowerRunClass(0, 2)"
+        :class="{ moveClass2: coolingTowerRunClass(0, 2) }"
+        src="../../../assets/images/fan-img.png"
+        alt=""
+      />
+      <div
+        class="towerValve1"
+        :class="{ startClass: towerValveControlClass(2) }"
+      ></div>
+      <div
+        class="towerValve2"
+        :class="{ startClass: towerValveControlClass(1) }"
+      ></div>
+      <div
+        class="towerValve3"
+        :class="{ startClass: towerValveControlClass(0) }"
+      ></div>
+      <!-- 冷冻蝶阀数据定位 -->
+      <div
+        class="frozenValve1"
+        :class="{ startClass: frozenValveControlClass(0) }"
+      ></div>
+      <div
+        class="frozenValve2"
+        :class="{ startClass: frozenValveControlClass(1) }"
+      ></div>
+      <div
+        class="frozenValve3"
+        :class="{ startClass: frozenValveControlClass(2) }"
+      ></div>
+      <!-- 冷却蝶阀数据定位 -->
+      <div
+        class="coolingValue1"
+        :class="{ startClass: coolingValueControlClass(0) }"
+      ></div>
+      <div
+        class="coolingValue2"
+        :class="{ startClass: coolingValueControlClass(1) }"
+      ></div>
+      <div
+        class="coolingValue3"
+        :class="{ startClass: coolingValueControlClass(2) }"
+      ></div>
+      <!-- 箭头 -->
+      <img class="in-arrow" src="../../../assets/images/in-arrow.png" alt="" />
+      <img
+        class="out-arrow"
+        src="../../../assets/images/out-arrow.png"
+        alt=""
+      />
+      <!-- 冷冻进出水温度 0是out供(出)水，1是in回(进)水 -->
+      <div class="freezingInTem">{{ freezingInTem }}℃</div>
+      <div class="freezingOutTem">{{ freezingOutTem }}℃</div>
+      <!-- 冷冻水流 -->
+      <div class="freezingOutWater">{{ freezingOutWater }}m³/h</div>
+      <!-- 冷冻进出水压力 -->
+      <div class="freezingInPre">{{ freezingInPre }}kpa</div>
+      <div class="freezingOutPre">{{ freezingOutPre }}kpa</div>
+      <!-- 冷却进出水温度 -->
+      <div class="coolingInTem">{{ coolingInTem }}℃</div>
+      <div class="coolingOutTem">{{ coolingOutTem }}℃</div>
+      <!-- 报警状态与系统模式 -->
+      <div class="statusAndModel" v-if="isWarning">
+        <img src="../../../assets/images/red.png" class="warnStatus" alt="" />
+        <img
+          src="../../../assets/images/border6.png"
+          class="modelStatus"
+          alt=""
+        />
+        <div class="sysWarning" @click="showAlarm">Warning</div>
+        <div class="sysStatus">{{ sysStatus }}</div>
+      </div>
+      <div class="statusAndModel" v-else>
+        <img src="../../../assets/images/blue.png" class="warnStatus" alt="" />
+        <img
+          src="../../../assets/images/border5.png"
+          class="modelStatus"
+          alt=""
+        />
+        <div class="sysNormal">Normal</div>
+        <div class="sysStatus">{{ sysStatus }}</div>
+      </div>
+    </div>
+    <!-- 报警弹框内容 -->
+    <el-dialog
+      title="报警内容"
+      :visible.sync="openDialog"
+      width="680px"
+      append-to-body
+    >
+      <el-table :data="alarmList" height="600px">
+        <el-table-column
+          prop="otherName"
+          label="报警位置"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="curTime"
+          label="报警时间"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  weatherData,
+  sysPerformance,
+  oneKeyButton,
+  monitorList,
+  operationConrol,
+  systemMode,
+  runTime,
+} from "@/api/centerairC/sysMonitor";
+import LineChildren from "./components/lineChildren.vue";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { getDay } from "@/utils/datetime";
+export default {
+  components: { LineChildren },
+  data() {
+    return {
+      loading: false,
+      weatherObj: {},
+      performanceObj: {},
+      hostList: [], //主机列表
+      coolingPump: [], //冷却泵
+      freezingPump: [], //冷冻泵
+      coolingTower: [], //冷却塔
+      frozenValve: [], //冷冻蝶阀
+      coolingValue: [], //冷却蝶阀
+      coolingTowerInlet: [], //冷却塔进水阀
+      coolingTowerOutlet: [], //冷却塔出水阀
+      freezingManifold: [], //冷冻总管
+      isShowOn: false, //一键启停,false是Off,true显示On
+      oneKeyButtonId: "",
+
+      // 主机负载
+      hostLoad0: "",
+      hostLoad1: "",
+      hostLoad2: "",
+      // 冷却泵频率反馈
+      coolingPumpHz0: "",
+      coolingPumpHz1: "",
+      coolingPumpHz2: "",
+      // 冷冻泵频率反馈
+      freezingPumpHz0: "",
+      freezingPumpHz1: "",
+      freezingPumpHz2: "",
+      // 冷却塔风机频率
+      coolingTowerHz31: "",
+      coolingTowerHz22: "",
+      coolingTowerHz21: "",
+      coolingTowerHz12: "",
+      coolingTowerHz11: "",
+      // 冷冻泵进出水温度
+      freezingInTem: "",
+      freezingOutTem: "",
+      // 冷冻水流
+      freezingOutWater: "",
+      // 冷冻泵进出压力
+      freezingInPre: "",
+      freezingOutPre: "",
+      // 冷却进出水温度
+      coolingInTem: "",
+      coolingOutTem: "",
+
+      // 报警标志
+      isWarning: false,
+      // 报警列表
+      alarmList: [],
+      // 系统模式
+      sysStatus: "",
+      // 模式提示
+      startOrStopStatus: "",
+      openDialog: false,
+      timer: null, // 用于存储定时器 ID
+
+      currentDate: new Date(),
+      nowTimer: null,
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+    };
+  },
+  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() {},
+  mounted() {
+    // 在组件挂载后尝试进入全屏
+    this.requestFullscreen();
+    // 首次进入页面时执行
+    this.getWeatherData();
+    this.getSystemMode();
+    this.getPerformance();
+    this.getOneKeyButton();
+    this.getMonitorList();
+    this.getAlarnStatus();
+    this.getDayData();
+
+    // 设置定时器，每 10 秒执行一次
+    this.timer = setInterval(() => {
+      this.getWeatherData();
+      this.getSystemMode();
+      this.getPerformance();
+      this.getOneKeyButton();
+      this.getMonitorList();
+    }, 10000);
+    // 每秒更新一次时间
+    this.nowTimer = setInterval(() => {
+      this.currentDate = new Date();
+    }, 1000);
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+    // 在组件销毁前退出全屏
+    this.exitFullscreen();
+  },
+  methods: {
+    // 全屏操作
+    requestFullscreen() {
+      const element = document.documentElement;
+      console.log("全屏操作没有进行中啊~~~~~~~~~~~~~~~~", element);
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        // Firefox
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        // Chrome, Safari and Opera
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        // IE/Edge
+        element.msRequestFullscreen();
+      }
+    },
+    // 退出全屏
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        // Firefox
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        // Chrome, Safari and Opera
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        // IE/Edge
+        document.msExitFullscreen();
+      }
+    },
+    // 进入系统首页
+    goSys() {
+      // 退出全屏
+      // this.exitFullscreen();
+      this.$router.push("/");
+    },
+    // 返回上一页
+    goBack() {
+      // 退出全屏
+      // this.exitFullscreen();
+      window.history.go(-2);
+    },
+    // 冷机性能
+    goPerformance() {
+      // 退出全屏
+      // this.exitFullscreen();
+      // this.$router.push("/performance");
+    },
+    // 系统控制
+    goControl() {
+      // 退出全屏
+      // this.exitFullscreen();
+      this.$router.push("/centerairC/monitorControl/sysControl");
+    },
+    // 监测天数
+    getDayData() {
+      runTime().then((res) => {
+        if (res.code == 200) {
+          this.dayData = res.data.runTime;
+        }
+      });
+    },
+
+    // 主机参数
+    goHostDetail(item, val) {
+      console.log("item", item);
+      let hostId = item.properties[0].deviceLedgerId;
+      this.$router.push({
+        path: "/hostDetails",
+        query: {
+          hostId: hostId,
+          hostName: item.deviceName,
+          isMagnetic: val,
+        },
+      });
+    },
+    // 获取天气相关数据
+    getWeatherData() {
+      weatherData().then((res) => {
+        if (res.code == 200) {
+          this.weatherObj = res.data;
+        }
+      });
+    },
+    // 获取系统性能数据
+    getPerformance() {
+      sysPerformance().then((res) => {
+        if (res.code == 200) {
+          this.performanceObj = res.data;
+        }
+      });
+    },
+    // 获取当前系统模式/启动、停止运行状态/报警列表
+    getSystemMode() {
+      let data = {
+        systemType: "0",
+        paramType: "27",
+      };
+      systemMode(data).then((res) => {
+        console.log("当前系统模式与报警列表返回", res);
+        if (res.code == 200) {
+          this.sysStatus = res.data.autoType;
+          this.alarmList = res.data.alarmList;
+          if (res.data.alarmList.length > 0) {
+            this.isWarning = true;
+          } else {
+            this.isWarning = false;
+          }
+          this.startOrStopStatus = res.data.startOrStopStatus;
+        }
+      });
+    },
+    showAlarm() {
+      this.openDialog = true;
+    },
+    // 获取一键启停信息
+    getOneKeyButton() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          systemType: 0,
+          paramType: "27",
+        };
+        oneKeyButton(data)
+          .then((res) => {
+            console.log("一键启停返回信息", res);
+            if (res.code === 200) {
+              this.oneKeyButtonId = res.data.id;
+              if (Number(res.data.curValue) == 0) {
+                this.isShowOn = false;
+              } else {
+                this.isShowOn = true;
+              }
+            } else {
+              this.oneKeyButtonId = "";
+              this.isShowOn = false;
+            }
+            // 成功时解析 Promise
+            resolve(res);
+          })
+          .catch((error) => {
+            // 失败时拒绝 Promise
+            reject(error);
+          });
+      });
+    },
+    // 一键启停按钮
+    handleOneKeyButton() {
+      let param = "";
+      let paramText = "";
+      if (this.isShowOn) {
+        // this.isShowOn为true代表ON,此时点击按钮想OFF
+        param = 0;
+        paramText = "一键关闭";
+      } else {
+        param = 1;
+        paramText = "一键开启";
+      }
+      this.$confirm(`确定要${paramText}吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          let data = {
+            id: this.oneKeyButtonId,
+            param: param,
+          };
+          operationConrol([data])
+            .then((res) => {
+              if (res.code == 200) {
+                this.$modal.msgSuccess("指令下发成功!");
+                // 开启 loading 效果
+                this.loading = true;
+                // 更新状态;
+                setTimeout(() => {
+                  this.getOneKeyButton().finally(() => {
+                    // 关闭 loading 效果
+                    this.loading = false;
+                  });
+                }, 5000);
+              } else {
+                this.getOneKeyButton();
+              }
+            })
+            .catch((error) => {
+              console.log("请求发生错误，更新设备状态", error);
+              this.ggetOneKeyButton();
+            });
+        })
+        .catch(() => {});
+    },
+    // 系统监测数据
+    getMonitorList() {
+      monitorList({ systemType: 0 }).then((res) => {
+        if (res.code === 200) {
+          console.log("设备监测列表返回", res);
+
+          // 初始化各个设备列表
+          this.hostList = [];
+          this.coolingPump = [];
+          this.freezingPump = [];
+          this.coolingTower = [];
+          this.frozenValve = [];
+          this.coolingValue = [];
+          this.coolingTowerInlet = [];
+          this.coolingTowerOutlet = [];
+          this.freezingManifold = [];
+
+          res.rows.forEach((row) => {
+            switch (row.name) {
+              case "0":
+                this.hostList = this.processDeviceList(row.values);
+                console.log("主机列表", this.hostList);
+                break;
+              case "1":
+                this.coolingPump = this.processDeviceList(row.values);
+                console.log("冷却泵列表", this.coolingPump);
+                break;
+              case "2":
+                this.freezingPump = this.processDeviceList(row.values);
+                console.log("冷冻泵列表", this.freezingPump);
+                break;
+              case "3":
+                this.coolingTower = this.processDeviceList(row.values);
+                console.log("冷却塔列表", this.coolingTower);
+                break;
+              case "4":
+                this.frozenValve = this.processDeviceList(row.values);
+                console.log("冷冻蝶阀列表", this.frozenValve);
+                break;
+              case "7":
+                this.coolingValue = this.processDeviceList(row.values);
+                console.log("冷却蝶阀列表", this.coolingValue);
+                break;
+              case "8":
+                this.coolingTowerInlet = this.processDeviceList(row.values);
+                console.log("冷却塔进水阀列表", this.coolingTowerInlet);
+                break;
+              case "9":
+                this.coolingTowerOutlet = this.processDeviceList(row.values);
+                console.log("冷却塔出水阀列表", this.coolingTowerOutlet);
+                break;
+              case "15":
+                this.freezingManifold = row.values;
+                console.log("冷冻总管", this.freezingManifold);
+                this.freezingManifoldData();
+                break;
+              default:
+                break;
+            }
+          });
+        }
+      });
+    },
+    // 封装一个通用函数来处理设备列表
+    processDeviceList(values) {
+      const deviceList = [];
+      // 遍历每个设备属性
+      values.forEach((item) => {
+        // 提取设备编号
+        const match = item.deviceName.match(/(\d+)号/);
+        if (match) {
+          const deviceNumber = parseInt(match[1]);
+          // 如果 deviceList 中对应编号的对象还不存在，则创建一个新对象
+          if (!deviceList[deviceNumber - 1]) {
+            deviceList[deviceNumber - 1] = {
+              deviceName: item.deviceName,
+              properties: [],
+            };
+          }
+          // 将当前属性添加到对应设备的 properties 数组中
+          deviceList[deviceNumber - 1].properties.push(item);
+        }
+      });
+      // 过滤掉 deviceList 中可能存在的空元素
+      return deviceList.filter((item) => item);
+    },
+    // 主机负载
+    hostLoadData(index) {
+      // 检查 hostList 长度是否足够
+      if (this.hostList.length <= index) {
+        return false;
+      }
+      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
+      const properties = this.hostList[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 28表示主机负载
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "28") {
+          // 动态构造属性名
+          const propertyName = `hostLoad${index}`;
+          // 使用方括号语法动态设置属性值
+          this[propertyName] = item.collectValue;
+          return true;
+        }
+      }
+      // 否则代表启停控制中的停止
+      return false;
+    },
+    // 主机启停状态
+    hostListControlClass(index) {
+      // 检查 hostList 长度是否足够
+      if (this.hostList.length <= index) {
+        return false;
+      }
+      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
+      const properties = this.hostList[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 2并且item.collectValue !== "0.00"则便是启停控制中的开启
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "2" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表启停控制中的停止
+      return false;
+    },
+    // 主机运行状态
+    hostListRunClass(index) {
+      // 检查 hostList 长度是否足够
+      if (this.hostList.length <= index) {
+        return false;
+      }
+      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
+      const properties = this.hostList[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "1" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 主机冷却水流信号
+    hostCoolingWaterFlowClass(index) {
+      // 检查 hostList 长度是否足够
+      if (this.hostList.length <= index) {
+        return false;
+      }
+      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
+      const properties = this.hostList[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 21并且item.collectValue !== "0.00"则便是主机冷却水流信号：接通
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "21" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表主机冷却水流信号：断开
+      return false;
+    },
+    // 主机冷冻水流信号
+    hostFreezeWaterFlowClass(index) {
+      // 检查 hostList 长度是否足够
+      if (this.hostList.length <= index) {
+        return false;
+      }
+      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
+      const properties = this.hostList[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 20并且item.collectValue !== "0.00"则便是主机冷冻水流信号：接通
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "20" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表主机冷冻水流信号：断开
+      return false;
+    },
+    // 冷却泵运行状态
+    coolingPumpRunClass(index) {
+      // 检查 coolingPump 长度是否足够
+      if (this.coolingPump.length <= index) {
+        return false;
+      }
+      // 检查 properties 数组是否存在    coolingPump[index]数组的properties数组
+      const properties = this.coolingPump[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "1" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷却泵频率
+    coolingPumpHz(index) {
+      // 检查 coolingPump 长度是否足够
+      if (this.coolingPump.length <= index) {
+        return false;
+      }
+      // 检查 properties 数组是否存在    coolingPump[index]数组的properties数组
+      const properties = this.coolingPump[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "4") {
+          // 动态构造属性名
+          const propertyName = `coolingPumpHz${index}`;
+          // 使用方括号语法动态设置属性值
+          this[propertyName] = item.collectValue;
+          // this.coolingPumpHz[index] = item.collectValue;
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷冻泵运行状态
+    freezingPumpRunClass(index) {
+      // 检查 freezingPump 长度是否足够
+      if (this.freezingPump.length <= index) {
+        return false;
+      }
+      // console.log("打印this.freezingPump数组", this.freezingPump);
+      // 检查 properties 数组是否存在    freezingPump[index]数组的properties数组
+      const properties = this.freezingPump[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "1" && Number(item.collectValue) !== 0) {
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    //冷冻泵频率
+    freezingPumpHz(index) {
+      // 检查 freezingPump 长度是否足够
+      if (this.freezingPump.length <= index) {
+        return false;
+      }
+      // 检查 properties 数组是否存在    freezingPump[index]数组的properties数组
+      const properties = this.freezingPump[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+      // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "4") {
+          // 动态构造属性名
+          const propertyName = `freezingPumpHz${index}`;
+          // 使用方括号语法动态设置属性值
+          this[propertyName] = item.collectValue;
+          // this.freezingPumpHz[index] = item.collectValue;
+          return true;
+        }
+      }
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷却塔风机运行状态,index为多少号风机,0表示1号风机;item表示风机x
+    coolingTowerRunClass(index, item) {
+      // 检查 coolingTower 长度是否足够
+      if (this.coolingTower.length <= index) {
+        return false;
+      }
+
+      // 获取指定索引的 coolingTower 元素的 properties 数组
+      const properties = this.coolingTower[index].properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      // 创建一个新数组，用于存储 paramType === 1 的对象
+      const filteredProperties = [];
+      let filterItem = {};
+      for (let i = 0; i < properties.length; i++) {
+        // console.log('properties[i].paramType',properties[i].paramType)
+        if (properties[i].paramType === "1") {
+          filteredProperties.push(properties[i]);
+          // filterItem  = properties[i]
+        }
+      }
+      // // 将处理后的对象添加到 deviceList 中
+      // if (Object.keys(filterItem).length > 1) {
+      //   filteredProperties.push(filterItem);
+      // }
+      // console.log("paramType为1的对象", filteredProperties);
+      // console.log("index, item", index, item);
+      // 根据 index 和 item 生成目标属性名称
+      const towerNumber = index + 1;
+      const targetPropertyName = `${towerNumber}号冷却塔风机${item}运行`;
+      // console.log("targetPropertyName",targetPropertyName)
+      // 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
+      for (let i = 0; i < filteredProperties.length; i++) {
+        if (
+          filteredProperties[i].collectName === targetPropertyName &&
+          Number(filteredProperties[i].collectValue) !== 0
+        ) {
+          if (index === 0 && item === 1) {
+            // console.log(
+            //   "返回的true",
+            //   filteredProperties[i].collectName === targetPropertyName &&
+            //     Number(filteredProperties[i].collectValue) !== 0
+            // );
+          }
+          return true;
+        }
+      }
+
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷却塔风机频率,index为多少号风机,0表示1号风机;item表示风机x
+    coolingTowerHz(index, item) {
+      // 检查 coolingTower 长度是否足够
+      if (this.coolingTower.length <= index) {
+        return false;
+      }
+
+      // 获取指定索引的 coolingTower 元素的 properties 数组
+      const properties = this.coolingTower[index].properties;
+
+      // 检查 properties 数组是否存在
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      // 创建一个新数组，用于存储 paramType === 4 的对象
+      const filteredProperties = [];
+      let filterItem = {};
+      for (let i = 0; i < properties.length; i++) {
+        // console.log('properties[i].paramType',properties[i].paramType)
+        if (properties[i].paramType === "4") {
+          filteredProperties.push(properties[i]);
+          // filterItem  = properties[i]
+        }
+      }
+      // // 将处理后的对象添加到 deviceList 中
+      // if (Object.keys(filterItem).length > 1) {
+      //   filteredProperties.push(filterItem);
+      // }
+      // console.log("paramType为4的对象", filteredProperties);
+      // console.log("index, item", index, item);
+      // 根据 index 和 item 生成目标属性名称
+      const towerNumber = index + 1;
+      const targetPropertyName = `${towerNumber}号冷却塔风机${item}频率反馈`;
+      // console.log("targetPropertyName",targetPropertyName)
+      // 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
+      for (let i = 0; i < filteredProperties.length; i++) {
+        if (filteredProperties[i].collectName === targetPropertyName) {
+          // 动态构造 coolingTowerHz 相关属性名
+          const coolingTowerHzPropertyName = `coolingTowerHz${towerNumber}${item}`;
+          // console.log(
+          //   "coolingTowerHzPropertyName---",
+          //   coolingTowerHzPropertyName
+          // );
+          // 获取 collectValue 转换为数字后的值
+          const value = Number(filteredProperties[i].collectValue);
+          // 使用方括号语法动态设置属性值
+          this[coolingTowerHzPropertyName] = value;
+          // console.log("Number(filteredProperties[i].collectValue)", value);
+          return true;
+        }
+      }
+
+      // 否则代表运行状态中的不运行
+      return false;
+    },
+    // 冷却塔出水蝶阀启停状态
+    towerValveControlClass(index) {
+      // 检查 coolingTowerOutlet 长度是否足够
+      if (this.coolingTowerOutlet.length <= index) {
+        return false;
+      }
+      // console.log("打印this.coolingTowerOutlet数组", this.coolingTowerOutlet);
+      // 检查 properties 数组是否存在    coolingTowerOutlet[index]数组的properties数组
+      const properties = this.coolingTowerOutlet[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      let valveOpenFeedbackFound = false;
+      let valveCloseFeedbackFound = false;
+      // 遍历 properties 数组
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "7") {
+          // console.log("item.collectName", item.collectName);
+          // console.log("item.collectValue", item.collectValue);
+          // 阀开到位是开启
+          if (
+            item.collectName.includes("阀开到位") &&
+            Number(item.collectValue) == 1
+          ) {
+            valveOpenFeedbackFound = true;
+          }
+          // 阀关到位是关闭
+          if (
+            item.collectName.includes("阀关到位") &&
+            Number(item.collectValue) == 0
+          ) {
+            valveCloseFeedbackFound = true;
+          }
+        }
+      }
+
+      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
+      return valveOpenFeedbackFound && valveCloseFeedbackFound;
+    },
+    // 冷冻蝶阀启停状态
+    frozenValveControlClass(index) {
+      // 检查 frozenValve 长度是否足够
+      if (this.frozenValve.length <= index) {
+        return false;
+      }
+      // console.log("打印this.frozenValve数组", this.frozenValve);
+      // 检查 properties 数组是否存在    frozenValve[index]数组的properties数组
+      const properties = this.frozenValve[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      let valveOpenFeedbackFound = false;
+      let valveCloseFeedbackFound = false;
+
+      // 遍历 properties 数组
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "7") {
+          // 阀开到位是开启
+          if (
+            item.collectName.includes("阀开到位") &&
+            Number(item.collectValue) !== 0
+          ) {
+            valveOpenFeedbackFound = true;
+          }
+          // 阀关到位是关闭
+          if (
+            item.collectName.includes("阀关到位") &&
+            Number(item.collectValue) === 0
+          ) {
+            valveCloseFeedbackFound = true;
+          }
+        }
+      }
+
+      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
+      return valveOpenFeedbackFound && valveCloseFeedbackFound;
+    },
+    // 冷却蝶阀启停状态
+    coolingValueControlClass(index) {
+      // 检查 coolingValue 长度是否足够
+      if (this.coolingValue.length <= index) {
+        return false;
+      }
+      // console.log("打印this.coolingValue数组", this.coolingValue);
+      // 检查 properties 数组是否存在    coolingValue[index]数组的properties数组
+      const properties = this.coolingValue[index].properties;
+      if (!properties || properties.length === 0) {
+        return false;
+      }
+
+      let valveOpenFeedbackFound = false;
+      let valveCloseFeedbackFound = false;
+
+      // 遍历 properties 数组
+      for (let i = 0; i < properties.length; i++) {
+        const item = properties[i];
+        if (item.paramType === "7") {
+          // 阀开到位是开启
+          if (
+            item.collectName.includes("阀开到位") &&
+            Number(item.collectValue) !== 0
+          ) {
+            valveOpenFeedbackFound = true;
+          }
+          // 阀关到位是关闭
+          if (
+            item.collectName.includes("阀关到位") &&
+            Number(item.collectValue) === 0
+          ) {
+            valveCloseFeedbackFound = true;
+            // console.log("冷冻蝶阀阀关到位应该是true才对呀");
+          }
+        }
+      }
+
+      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
+      return valveOpenFeedbackFound && valveCloseFeedbackFound;
+    },
+    // 冷冻总管数据 供回水温度、压力等
+    freezingManifoldData(index, val) {
+      console.log("this.freezingManifold", this.freezingManifold);
+      // 检查 freezingManifold 长度是否足够
+      if (this.freezingManifold.length <= index) {
+        return false;
+      }
+      this.freezingManifold.forEach((item) => {
+        if (item.collectName === "冷冻供水温度") {
+          this.freezingOutTem = item.collectValue;
+          console.log("item.collectName", item.collectName);
+        } else if (item.collectName === "冷冻回水温度") {
+          this.freezingInTem = item.collectValue;
+        } else if (item.collectName === "冷冻供水压力") {
+          this.freezingOutPre = item.collectValue;
+        } else if (item.collectName === "冷冻回水压力") {
+          this.freezingInPre = item.collectValue;
+        } else if (item.collectName === "冷却供水温度") {
+          this.coolingOutTem = item.collectValue;
+        } else if (item.collectName === "冷却回水温度") {
+          this.coolingInTem = item.collectValue;
+        } else if (item.collectName === "总冷量计瞬时流量") {
+          this.freezingOutWater = item.collectValue;
+        }
+      });
+      return true;
+    },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      // this.exitFullscreen();
+      this.$router.push("/alarm/alarmRecord");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monitor {
+  width: 100%;
+  min-height: 100vh;
+  height: auto;
+  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;
+    }
+  }
+  .monitor-content {
+    width: 16rem;
+    min-height: calc(10.74rem - 1rem);
+    position: relative;
+    margin-left: calc((100% - 16rem) / 2);
+    .monitor-img {
+      position: absolute;
+      top: 0.2rem;
+      left: calc((100% - 15.4rem) / 2);
+      // left:1rem;
+      width: 15.4rem;
+      height: 9.25rem;
+      z-index: 1;
+    }
+    .fan-img1 {
+      z-index: 10;
+      position: absolute;
+      top: 1.06rem;
+      left: 5.2rem;
+      width: 0.5rem;
+      height: 0.5rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .fan-img2 {
+      z-index: 10;
+      position: absolute;
+      top: 0.77rem;
+      left: 6.2rem;
+      width: 0.5rem;
+      height: 0.5rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .fan-img3 {
+      z-index: 10;
+      position: absolute;
+      top: 0.67rem;
+      left: 6.69rem;
+      width: 0.5rem;
+      height: 0.5rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .fan-img4 {
+      z-index: 10;
+      position: absolute;
+      top: 0.46rem;
+      left: 7.54rem;
+      width: 0.5rem;
+      height: 0.5rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .fan-img5 {
+      z-index: 10;
+      position: absolute;
+      top: 0.34rem;
+      left: 7.95rem;
+      width: 0.5rem;
+      height: 0.5rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    /* 定义 fan 动画关键帧 */
+    @keyframes fan {
+      0% {
+        /* 修改初始旋转角度 */
+        transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+      }
+      100% {
+        /* 修改结束旋转角度 */
+        transform: translateX(-50%) rotateX(60deg) rotateZ(360deg);
+      }
+    }
+    .towerValve1 {
+      z-index: 10;
+      position: absolute;
+      top: 1.51rem;
+      left: 5.91rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .towerValve2 {
+      z-index: 10;
+      position: absolute;
+      top: 1.24rem;
+      left: 7.02rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .towerValve3 {
+      z-index: 10;
+      position: absolute;
+      top: 0.91rem;
+      left: 8.29rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .in-arrow {
+      position: absolute;
+      top: 2.9rem;
+      right: 3.6rem;
+      transform: rotate(180deg);
+      width: 0.4rem;
+      height: 0.6rem;
+      z-index: 10;
+    }
+    .out-arrow {
+      position: absolute;
+      top: 3.7rem;
+      right: 1.3rem;
+      width: 0.4rem;
+      height: 0.6rem;
+      z-index: 10;
+    }
+    .coolingInTem {
+      z-index: 10;
+      position: absolute;
+      top: 2.2rem;
+      left: 8.35rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .coolingOutTem {
+      z-index: 10;
+      position: absolute;
+      top: 3.1rem;
+      left: 4.77rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingInTem {
+      z-index: 10;
+      position: absolute;
+      top: 4.45rem;
+      right: 4.35rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingOutTem {
+      z-index: 10;
+      position: absolute;
+      top: 5.06rem;
+      right: 2.9rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingOutWater {
+      z-index: 10;
+      position: absolute;
+      top: 6.2rem;
+      right: 4.4rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+
+    .freezingInPre {
+      z-index: 10;
+      position: absolute;
+      top: 4.9rem;
+      right: 4.9rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingOutPre {
+      z-index: 10;
+      position: absolute;
+      top: 5.6rem;
+      right: 3.4rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .host-line1 {
+      position: absolute;
+      left: -0.2rem;
+      top: 7.04rem;
+      z-index: 10;
+    }
+    .host-line2 {
+      position: absolute;
+      left: -0.25rem;
+      top: 7.72rem;
+      z-index: 10;
+    }
+    .host-line3 {
+      position: absolute;
+      left: 0.3rem;
+      top: 8.4rem;
+      z-index: 10;
+    }
+    .hostName1 {
+      border-bottom: 1px solid rgba(0, 255, 255, 1);
+      z-index: 10;
+      font-size: 0.22rem;
+      font-weight: bold;
+      color: aqua;
+      position: absolute;
+      top: 6.95rem;
+      left: 2.85rem;
+      transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); /* 分别在 X、Y、Z 轴上旋转 */
+      transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
+      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
+    }
+    .hostName2 {
+      border-bottom: 1px solid rgba(0, 255, 255, 1);
+      z-index: 10;
+      font-size: 0.22rem;
+      font-weight: bold;
+      color: aqua;
+      position: absolute;
+      top: 6.15rem;
+      left: 4.87rem;
+      transform: rotateX(50deg) rotateY(0deg) rotateZ(42deg);
+      transform-origin: bottom center;
+      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
+    }
+    .hostName3 {
+      border-bottom: 1px solid rgba(0, 255, 255, 1);
+      z-index: 10;
+      font-size: 0.22rem;
+      font-weight: bold;
+      color: aqua;
+      position: absolute;
+      top: 5.3rem;
+      left: 6.7rem;
+      transform: rotateX(50deg) rotateY(0deg) rotateZ(39deg);
+      transform-origin: bottom center;
+      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
+    }
+    /* 定义 host 动画关键帧 */
+    @keyframes host {
+      0% {
+        /* 修改初始旋转角度 */
+        transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
+      }
+      100% {
+        /* 修改结束旋转角度 */
+        transform: translateX(-50%) rotateX(15deg) rotateZ(360deg);
+      }
+    }
+    .host-img1 {
+      z-index: 10;
+      position: absolute;
+      top: 6.83rem;
+      left: 4.3rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
+    }
+    .host-img2 {
+      z-index: 10;
+      position: absolute;
+      top: 6rem;
+      left: 6.3rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(0deg) rotateZ(0deg);
+    }
+    .host-img3 {
+      z-index: 10;
+      position: absolute;
+      top: 5.22rem;
+      left: 8.43rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
+    }
+    .host-main1 {
+      z-index: 100;
+      position: absolute;
+      top: 5.99rem;
+      left: 4.02rem;
+      width: 1.6rem;
+      height: 1.3rem;
+      // background-color: #007bff;
+      cursor: pointer;
+      opacity: 0.4;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(30deg);
+    }
+    .host-main2 {
+      z-index: 100;
+      position: absolute;
+      top: 5.13rem;
+      left: 6rem;
+      width: 1.55rem;
+      height: 1.3rem;
+      // background-color: #007bff;
+      cursor: pointer;
+      opacity: 0.4;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(30deg);
+    }
+    .host-main3 {
+      z-index: 100;
+      position: absolute;
+      top: 4.6rem;
+      left: 8rem;
+      width: 1.5rem;
+      height: 1rem;
+      // background-color: #007bff;
+      cursor: pointer;
+      opacity: 0.4;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(30deg);
+    }
+    .hostLoad1 {
+      z-index: 10;
+      position: absolute;
+      top: 6.4rem;
+      left: 4.1rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .hostLoad2 {
+      z-index: 10;
+      position: absolute;
+      top: 5.6rem;
+      left: 6.1rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .hostLoad3 {
+      z-index: 10;
+      position: absolute;
+      top: 4.8rem;
+      left: 8.05rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .water-flow1 {
+      z-index: 10;
+      position: absolute;
+      top: 7.5rem;
+      left: 0.75rem;
+      font-size: 0.16rem;
+    }
+    .water-flow2 {
+      z-index: 10;
+      position: absolute;
+      top: 8.18rem;
+      left: 1rem;
+      font-size: 0.16rem;
+    }
+    .water-flow3 {
+      z-index: 10;
+      position: absolute;
+      top: 8.84rem;
+      left: 1.52rem;
+      font-size: 0.16rem;
+    }
+    .water-flow-li {
+      margin-bottom: 0.04rem;
+      color: #46f1e3;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      span {
+        background-color: rgba(0, 255, 255, 0.2);
+        border-radius: 0.1rem;
+        padding: 0.01rem 0.03rem;
+      }
+      .break {
+        margin-left: 0.07rem;
+        display: inline-block;
+        width: 0.18rem;
+        height: 0.18rem;
+        border-radius: 50%;
+        border: 1px solid #46f1e3;
+        background-color: transparent !important;
+      }
+      .connect {
+        animation: blink 1s infinite;
+        background-color: #38fc52 !important;
+      }
+    }
+    .moveClass {
+      animation: host 2s linear infinite;
+    }
+    .moveClass2 {
+      animation: fan 2s linear infinite;
+    }
+    .startClass {
+      /* 应用动画 */
+      animation: blink 1s infinite;
+      background-color: #38fc52 !important;
+    }
+    .hostStatus1 {
+      z-index: 10;
+      position: absolute;
+      top: 6.4rem;
+      left: 3.8rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      border-radius: 50%;
+    }
+    .hostStatus2 {
+      z-index: 10;
+      position: absolute;
+      top: 5.6rem;
+      left: 5.83rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      border-radius: 50%;
+    }
+    .hostStatus3 {
+      z-index: 10;
+      position: absolute;
+      top: 4.8rem;
+      left: 7.8rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      border-radius: 50%;
+    }
+    .coolingPump1 {
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 4.07rem;
+      left: 7.57rem;
+    }
+    .coolingPump2 {
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 3.67rem;
+      left: 8.5rem;
+    }
+    .coolingPump3 {
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 3.34rem;
+      left: 9.4rem;
+    }
+    .cooling-img1 {
+      z-index: 10;
+      position: absolute;
+      top: 3.57rem;
+      left: 7.65rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .cooling-img2 {
+      z-index: 10;
+      position: absolute;
+      top: 3.24rem;
+      left: 8.58rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .cooling-img3 {
+      z-index: 10;
+      position: absolute;
+      top: 2.93rem;
+      left: 9.49rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .cooling-hz1 {
+      z-index: 10;
+      position: absolute;
+      top: 3.5rem;
+      left: 7.43rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .cooling-hz2 {
+      z-index: 10;
+      position: absolute;
+      top: 3.17rem;
+      left: 8.35rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .cooling-hz3 {
+      z-index: 10;
+      position: absolute;
+      top: 2.87rem;
+      left: 9.25rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezingPump1 {
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 7.56rem;
+      left: 7.11rem;
+    }
+    .freezingPump2 {
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 6.89rem;
+      left: 8.43rem;
+    }
+    .freezingPump3 {
+      z-index: 10;
+      font-size: 0.15rem;
+      font-weight: bold;
+      color: #46f1e3;
+      position: absolute;
+      top: 6.38rem;
+      left: 9.5rem;
+    }
+    .freezing-img1 {
+      z-index: 10;
+      position: absolute;
+      top: 7rem;
+      left: 7.18rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .freezing-img2 {
+      z-index: 10;
+      position: absolute;
+      top: 6.41rem;
+      left: 8.51rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .freezing-img3 {
+      z-index: 10;
+      position: absolute;
+      top: 5.91rem;
+      left: 9.6rem;
+      width: 0.4rem;
+      height: 0.4rem;
+      transform-style: preserve-3d;
+      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
+    }
+    .freezing-hz1 {
+      z-index: 10;
+      position: absolute;
+      top: 6.96rem;
+      left: 6.93rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezing-hz2 {
+      z-index: 10;
+      position: absolute;
+      top: 6.36rem;
+      left: 8.25rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .freezing-hz3 {
+      z-index: 10;
+      position: absolute;
+      top: 5.85rem;
+      left: 9.36rem;
+      font-size: 0.16rem;
+      font-weight: bold;
+    }
+    .coolingTower3 {
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #46f1e3;
+      position: absolute;
+      top: 2.1rem;
+      left: 5.34rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    .coolingTower22 {
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #46f1e3;
+      position: absolute;
+      top: 1.8rem;
+      left: 6.3rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    .coolingTower21 {
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #46f1e3;
+      position: absolute;
+      top: 1.7rem;
+      left: 6.76rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    .coolingTower12 {
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #46f1e3;
+      position: absolute;
+      top: 1.47rem;
+      left: 7.57rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    .coolingTower11 {
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #46f1e3;
+      position: absolute;
+      top: 1.36rem;
+      left: 8rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    .coolingTowerHz11 {
+      z-index: 10;
+      font-size: 0.16rem;
+      color: #ffffff;
+      position: absolute;
+      top: 0.33rem;
+      left: 7.5rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    .coolingTowerHz12 {
+      z-index: 10;
+      font-size: 0.16rem;
+      color: #ffffff;
+      position: absolute;
+      top: 0.48rem;
+      left: 7.03rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    .coolingTowerHz21 {
+      z-index: 10;
+      font-size: 0.16rem;
+      color: #ffffff;
+      position: absolute;
+      top: 0.65rem;
+      left: 6.2rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    .coolingTowerHz22 {
+      z-index: 10;
+      font-size: 0.16rem;
+      color: #ffffff;
+      position: absolute;
+      top: 0.79rem;
+      left: 5.64rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    .coolingTowerHz3 {
+      z-index: 10;
+      font-size: 0.16rem;
+      color: #ffffff;
+      position: absolute;
+      top: 1rem;
+      left: 4.7rem;
+      font-weight: bold;
+      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
+    }
+    /* 定义灯闪烁的动画 */
+    @keyframes blink {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.7;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    .frozenValve1 {
+      z-index: 10;
+      position: absolute;
+      top: 6.75rem;
+      left: 4.88rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .frozenValve2 {
+      z-index: 10;
+      position: absolute;
+      top: 5.93rem;
+      left: 6.87rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .frozenValve3 {
+      z-index: 10;
+      position: absolute;
+      top: 5rem;
+      left: 8.73rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .coolingValue1 {
+      z-index: 10;
+      position: absolute;
+      top: 5.93rem;
+      left: 2.97rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .coolingValue2 {
+      z-index: 10;
+      position: absolute;
+      top: 5.17rem;
+      left: 4.98rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .coolingValue3 {
+      z-index: 10;
+      position: absolute;
+      top: 4.45rem;
+      left: 7.11rem;
+      width: 0.18rem;
+      height: 0.18rem;
+      background-color: #ebebeb;
+      border-radius: 50%;
+    }
+    .statusAndModel {
+      z-index: 10;
+      position: absolute;
+      top: 8.6rem;
+      right: 2.3rem;
+      width: 3rem;
+      .warnStatus {
+        position: absolute;
+        left: 0.04rem;
+        top: 0.3rem;
+        width: 0.45rem;
+        height: 0.45rem;
+        animation: breathe 4s ease-in-out infinite;
+      }
+      @keyframes breathe {
+        0% {
+          transform: scale(1);
+          opacity: 0.5;
+        }
+        50% {
+          transform: scale(1.1);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(1);
+          opacity: 0.5;
+        }
+      }
+      .modelStatus {
+        position: absolute;
+        top: 0;
+        right: 0rem;
+        width: 2.65rem;
+        height: 0.83rem;
+      }
+      .sysNormal {
+        position: absolute;
+        top: 0.63rem;
+        right: 0.7rem;
+        font-size: 0.14rem;
+        font-weight: bold;
+        color: #89e8f5;
+        letter-spacing: 0.02rem;
+      }
+      .sysWarning {
+        position: absolute;
+        top: 0.63rem;
+        right: 0.7rem;
+        font-size: 0.14rem;
+        font-weight: bold;
+        cursor: pointer;
+        color: #ffffff;
+        letter-spacing: 0.02rem;
+        animation: blink 0.5s ease-in-out infinite;
+      }
+      .sysStatus {
+        position: absolute;
+        top: 0.2rem;
+        left: 0.8rem;
+        font-size: 0.18rem;
+        font-weight: bold;
+        color: #ffffff;
+        letter-spacing: 0.02rem;
+      }
+    }
+  }
+  .weather {
+    min-width: 2.85rem;
+    z-index: 10;
+    position: absolute;
+    top: 0.5rem;
+    left: 0rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: 0.2rem;
+    // color: rgb(18, 155, 209);
+    // color: rgb(147, 204, 236);
+    color: rgb(144, 167, 197);
+    background-image: url(../../../assets/images/border1.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    padding: 0.15rem 0.1rem 0.25rem 0rem;
+  }
+  .weather-li {
+    width: 100%;
+    padding: 0.05rem 0 0.05rem 0.3rem;
+    /* 初始设置上下边框宽度为 1px，颜色和样式可以先设为透明，后续由 border-image 覆盖 */
+    border-top: 1px solid transparent;
+    border-bottom: 1px dashed #1a3f8f;
+    position: relative;
+    .deepColor {
+      display: inline-block;
+      margin: 0 0.1rem 0 0.05rem;
+      // color: #20ebfa;
+      // color: #18f13c;
+      // color: #6cf02f;
+      color: #6cf02f;
+      font-weight: bold;
+      font-family: DIN;
+      font-size: 0.25rem;
+    }
+  }
+
+  .performance {
+    position: absolute;
+    top: 6.2rem !important;
+    right: -1rem !important;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: 0.16rem;
+  }
+  .perdformance-bg {
+    width: 2.85rem;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: 0.2rem;
+    color: rgb(144, 167, 197);
+    background-image: url(../../../assets/images/border4.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    padding: 0.15rem 0.1rem 0.25rem 0rem;
+  }
+  .title {
+    z-index: 10;
+    width: 100%;
+    background-image: url(../../../assets/images/text_img_title.png);
+    background-repeat: no-repeat;
+    background-repeat: no-repeat;
+    background-size: 2rem 0.45rem;
+    background-position: bottom left;
+    font-family: SourceHanSansCN-Medium;
+    font-size: 0.2rem;
+    font-style: italic;
+    font-weight: bold;
+    line-height: 0.6rem;
+    color: rgba(209, 214, 223, 1);
+    padding-left: 0.5rem;
+    margin-bottom: 0.01rem;
+    margin-left: 0.4rem;
+  }
+  .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: 0.5rem;
+    right: 0.3rem;
+    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;
+  }
+  .sysTips {
+    position: absolute;
+    top: 2.2rem;
+    left: 14.3rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 10;
+    .step {
+      width: 0.2rem;
+      height: 0.3rem;
+      margin-right: 0.04rem;
+      animation: moveRight 1s ease-in-out infinite alternate;
+    }
+    @keyframes moveRight {
+      0% {
+        transform: translateX(0); /* 初始位置，不移动 */
+      }
+      100% {
+        transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
+      }
+    }
+    .tips-text {
+      border: 0.01rem solid transparent;
+      border-image: linear-gradient(to right, #007bff, #00ffff);
+      border-image-slice: 1;
+      font-size: 0.18rem;
+      color: #1fecf3;
+      padding: 0.01rem 0.03rem;
+    }
+  }
+  .funtion-menu1 {
+    position: absolute;
+    top: 7.2rem;
+    left: -1.4rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 10;
+    width: 1.7rem;
+    height: 0.8rem;
+    cursor: pointer;
+    .ditu {
+      width: 1.7rem;
+      height: 0.8rem;
+      position: absolute;
+      top: 0;
+    }
+    .menu-title {
+      color: #46f1e3;
+      font-size: 0.18rem;
+      --bRadius: 0.05rem;
+      text-align: center;
+      position: absolute;
+      top: 0;
+      left: 0.2rem;
+      width: 1.25rem;
+      div {
+        position: relative;
+        text-align: center;
+        border-radius: var(--bRadius);
+        transition: all 0.3s;
+        padding: 0.01rem 0.02rem;
+        background-color: rgba(0, 255, 255, 0.2);
+        &::before,
+        &::after {
+          content: "";
+          position: absolute;
+          top: -10px;
+          left: -10px;
+          right: -10px;
+          bottom: -10px;
+          border: 2px solid #46f1e3;
+          transition: all 0.5s;
+          border-radius: var(--bRadius);
+          animation: clippath 3s infinite linear;
+        }
+        &::after {
+          animation: clippath 3s infinite -1.5s linear;
+        }
+        @keyframes clippath {
+          0%,
+          100% {
+            clip-path: inset(0 0 98% 0);
+          }
+          25% {
+            clip-path: inset(0 98% 0 0);
+          }
+          50% {
+            clip-path: inset(98% 0 0 0);
+          }
+          75% {
+            clip-path: inset(0 0 0 98%);
+          }
+        }
+      }
+    }
+  }
+  .menu2 {
+    position: absolute;
+    top: 8.6rem;
+    left: -1.4rem;
+  }
+  .funtion-menu1:hover {
+    .menu-title {
+      transform: scale(1.1);
+    }
+  }
+}
+// @media (min-width: 1240px) and (max-width: 1440px) {
+// }
+@media (max-width: 1440px) {
+  .monitor-content {
+    transform: scale(0.9);
+  }
+}
+</style>
+<style scoped>
+.monitor >>> .el-dialog:not(.is-fullscreen) {
+  margin-top: 15% !important;
+}
+</style>
diff --git a/src/views/centerairC/sysMonitor/performance.vue b/src/views/centerairC/sysMonitor/performance.vue
new file mode 100644
index 0000000..d0719a9
--- /dev/null
+++ b/src/views/centerairC/sysMonitor/performance.vue
@@ -0,0 +1,344 @@
+<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="host-detail">
+      <div class="detail-top">
+        <div class="detail-top-left"></div>
+        <div class="detail-top-middle"></div>
+        <div class="detail-top-right"></div>
+      </div>
+      <div class="detail-bottom"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  hostDetailsData,
+  hostTemData,
+  runTime,
+} from "@/api/centerairC/sysMonitor";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { cpmList } from "@/api/device/gather";
+import LoadData from "./components/loadData.vue";
+import hostChart from "./components/hostChart.vue";
+import titleImg from "./components/titleImg.vue";
+import lineSquare from "./components/lineSquare.vue";
+import { format } from "@/utils/datetime";
+export default {
+  name: "sysControl",
+  components: { LoadData, hostChart, titleImg, lineSquare },
+  data() {
+    return {
+      loading: false,
+
+      currentDate: new Date(),
+      nowTimer: null,
+      deviceName: "", //主机名称
+      hostData: [], //主机参数
+      rightHostData: [], //右
+      automaticObj: {}, //手自动状态
+      localObj: {}, //本地远程状态
+      badObj: {}, //故障状态
+      timeObj: {}, //累计运行时间
+      compressorData: [], //压缩机参数
+      temArray: [], //冷冻冷却水温度
+      isMagnetic: false,
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+    };
+  },
+  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() {},
+  mounted() {
+    this.getHostDetailsData();
+    this.getDayData();
+    // 在组件挂载后尝试进入全屏
+    setTimeout(() => {
+      this.requestFullscreen();
+    }, 100); // 延迟 100 毫秒执行全屏操作
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+  },
+  methods: {
+    // 全屏操作
+    requestFullscreen() {
+      const element = document.documentElement;
+      console.log("全屏了吗");
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        // Firefox
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        // Chrome, Safari and Opera
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        // IE/Edge
+        element.msRequestFullscreen();
+      }
+    },
+    // 退出全屏
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        // Firefox
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        // Chrome, Safari and Opera
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        // IE/Edge
+        document.msExitFullscreen();
+      }
+    },
+    // 进入系统首页
+    goSys() {
+      this.exitFullscreen();
+      this.$router.push("/");
+    },
+    // 返回上一页
+    goBack() {
+      this.$router.back();
+    },
+    getHostDetailsData() {
+      // 请求数据
+      // this.getHostParams(deviceLedgerId);
+    },
+    // 监测天数
+    getDayData() {
+      runTime().then((res) => {
+        if (res.code == 200) {
+          this.dayData = res.data.runTime;
+        }
+      });
+    },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      this.exitFullscreen();
+      this.$router.push("/alarm/alarmRecord");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monitor {
+  width: 100%;
+  min-height: 100vh;
+  height: auto;
+  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;
+    }
+  }
+  .host-detail {
+    padding: 0.2rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .detail-top {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      .detail-top-left {
+        width: 7rem;
+        height: 4.4rem;
+        // background-color: aquamarine;
+        position: relative;
+      }
+      .detail-top-right {
+        width: calc(100% - 7.25rem);
+        height: 4.4rem;
+      }
+    }
+    .detail-bottom {
+      height: 2.6rem;
+      margin-top: 0.3rem;
+      margin-left: 0.25rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+}
+</style>
diff --git a/src/views/device/comm/index.vue b/src/views/device/comm/index.vue
index 08ea041..2a9a9a1 100644
--- a/src/views/device/comm/index.vue
+++ b/src/views/device/comm/index.vue
@@ -47,7 +47,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['device:cmp:add']">
           <el-button
             type="primary"
             icon="el-icon-plus"
@@ -58,7 +58,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="success-btn" v-hasPermi="['system:post:edit']">
+        <div class="success-btn" v-hasPermi="['device:cmp:edit']">
           <el-button
             type="success"
             icon="el-icon-edit"
@@ -70,7 +70,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="delete-btn" v-hasPermi="['system:post:remove']">
+        <div class="delete-btn" v-hasPermi="['device:cmp:remove']">
           <el-button
             type="delete"
             icon="el-icon-delete"
@@ -81,7 +81,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -91,7 +91,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -144,7 +144,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['device:cmp:edit']"
             >修改</el-button
           >
           <el-button
@@ -152,7 +152,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
+            v-hasPermi="['device:cmp:remove']"
             >删除</el-button
           >
         </template>
diff --git a/src/views/device/gateway/index.vue b/src/views/device/gateway/index.vue
index d9320e8..f6560c5 100644
--- a/src/views/device/gateway/index.vue
+++ b/src/views/device/gateway/index.vue
@@ -55,7 +55,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['device:gw:add']">
           <el-button
             type="primary"
             icon="el-icon-plus"
@@ -66,7 +66,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="success-btn" v-hasPermi="['system:post:edit']">
+        <div class="success-btn" v-hasPermi="['device:gw:edit']">
           <el-button
             type="success"
             icon="el-icon-edit"
@@ -78,7 +78,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="delete-btn" v-hasPermi="['system:post:remove']">
+        <div class="delete-btn" v-hasPermi="['device:gw:remove']">
           <el-button
             type="delete"
             icon="el-icon-delete"
@@ -89,7 +89,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -99,7 +99,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -170,7 +170,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['device:gw:edit']"
             >修改</el-button
           >
           <el-button
@@ -178,7 +178,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
+            v-hasPermi="['device:gw:remove']"
             >删除</el-button
           >
         </template>
diff --git a/src/views/device/gather/index.vue b/src/views/device/gather/index.vue
index 3150204..187ffdf 100644
--- a/src/views/device/gather/index.vue
+++ b/src/views/device/gather/index.vue
@@ -92,7 +92,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['device:cpm:add']">
           <el-button
             type="primary"
             icon="el-icon-plus"
@@ -103,7 +103,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="success-btn" v-hasPermi="['system:post:edit']">
+        <div class="success-btn" v-hasPermi="['device:cpm:edit']">
           <el-button
             type="success"
             icon="el-icon-edit"
@@ -115,7 +115,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="delete-btn" v-hasPermi="['system:post:remove']">
+        <div class="delete-btn" v-hasPermi="['device:cpm:remove']">
           <el-button
             type="delete"
             icon="el-icon-delete"
@@ -126,7 +126,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -136,7 +136,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -281,7 +281,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['device:cpm:edit']"
             >修改</el-button
           >
           <el-button
@@ -289,7 +289,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
+            v-hasPermi="['device:cpm:remove']"
             >删除</el-button
           >
         </template>
diff --git a/src/views/device/ledger/index.vue b/src/views/device/ledger/index.vue
index 1fae964..0fa78b5 100644
--- a/src/views/device/ledger/index.vue
+++ b/src/views/device/ledger/index.vue
@@ -77,7 +77,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['device:ledger:add']">
           <el-button
             type="primary"
             icon="el-icon-plus"
@@ -88,7 +88,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="success-btn" v-hasPermi="['system:post:edit']">
+        <div class="success-btn" v-hasPermi="['device:ledger:edit']">
           <el-button
             type="success"
             icon="el-icon-edit"
@@ -100,7 +100,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="delete-btn" v-hasPermi="['system:post:remove']">
+        <div class="delete-btn" v-hasPermi="['device:ledger:remove']">
           <el-button
             type="delete"
             icon="el-icon-delete"
@@ -111,7 +111,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -121,7 +121,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -192,7 +192,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['device:ledger:edit']"
             >修改</el-button
           >
           <el-button
@@ -200,7 +200,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
+            v-hasPermi="['device:ledger:remove']"
             >删除</el-button
           >
         </template>
diff --git a/src/views/device/maintenance/index.vue b/src/views/device/maintenance/index.vue
index b447afd..d522de3 100644
--- a/src/views/device/maintenance/index.vue
+++ b/src/views/device/maintenance/index.vue
@@ -153,7 +153,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['device:maintain:add']">
           <el-button
             type="primary"
             icon="el-icon-plus"
@@ -164,7 +164,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="success-btn" v-hasPermi="['system:post:edit']">
+        <div class="success-btn" v-hasPermi="['device:maintain:edit']">
           <el-button
             type="success"
             icon="el-icon-edit"
@@ -176,7 +176,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="delete-btn" v-hasPermi="['system:post:remove']">
+        <div class="delete-btn" v-hasPermi="['device:maintain:remove']">
           <el-button
             type="delete"
             icon="el-icon-delete"
@@ -187,7 +187,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -197,7 +197,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -263,7 +263,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['device:maintain:edit']"
             >修改</el-button
           >
           <el-button
@@ -271,7 +271,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
+            v-hasPermi="['device:maintain:remove']"
             >删除</el-button
           >
         </template>
diff --git a/src/views/device/qrCode/index.vue b/src/views/device/qrCode/index.vue
index a8e5b10..a57937e 100644
--- a/src/views/device/qrCode/index.vue
+++ b/src/views/device/qrCode/index.vue
@@ -47,7 +47,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['device:qr:create']">
           <el-button
             type="primary"
             icon="el-icon-folder-add"
@@ -58,7 +58,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="success-btn" v-hasPermi="['system:post:edit']">
+        <div class="success-btn" v-hasPermi="['device:qr:edit']">
           <el-button
             type="success"
             icon="el-icon-edit"
@@ -70,7 +70,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="delete-btn" v-hasPermi="['system:post:remove']">
+        <div class="delete-btn" v-hasPermi="['device:qr:remove']">
           <el-button
             type="delete"
             icon="el-icon-delete"
@@ -81,7 +81,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -91,7 +91,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -171,7 +171,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['device:qr:edit']"
             >修改</el-button
           >
           <el-button
@@ -179,7 +179,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
+            v-hasPermi="['device:qr:remove']"
             >删除</el-button
           >
         </template>
diff --git a/src/views/device/spare/index.vue b/src/views/device/spare/index.vue
index 9ad8818..69db42c 100644
--- a/src/views/device/spare/index.vue
+++ b/src/views/device/spare/index.vue
@@ -63,7 +63,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['device:spare:add']">
           <el-button
             type="primary"
             icon="el-icon-plus"
@@ -74,7 +74,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="success-btn" v-hasPermi="['system:post:edit']">
+        <div class="success-btn" v-hasPermi="['device:spare:edit']">
           <el-button
             type="success"
             icon="el-icon-edit"
@@ -86,7 +86,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="delete-btn" v-hasPermi="['system:post:remove']">
+        <div class="delete-btn" v-hasPermi="['device:spare:remove']">
           <el-button
             type="delete"
             icon="el-icon-delete"
@@ -97,7 +97,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -107,7 +107,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -154,7 +154,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:post:edit']"
+            v-hasPermi="['device:spare:edit']"
             >修改</el-button
           >
           <el-button
@@ -162,7 +162,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
+            v-hasPermi="['device:spare:remove']"
             >删除</el-button
           >
         </template>
diff --git a/src/views/device/spareInOut/index.vue b/src/views/device/spareInOut/index.vue
index 4b5c513..e8e9c0a 100644
--- a/src/views/device/spareInOut/index.vue
+++ b/src/views/device/spareInOut/index.vue
@@ -77,7 +77,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['device:spareInOut:add']">
           <el-button type="primary" size="mini" @click="handleOut"
             ><svg-icon
               icon-class="Outbound"
@@ -87,7 +87,7 @@
         </div>
       </el-col>
       <el-col :span="1.5">
-        <div class="primary-btn" v-hasPermi="['system:post:add']">
+        <div class="primary-btn" v-hasPermi="['device:spareInOut:add']">
           <el-button type="primary" size="mini" @click="handleIn"
             ><svg-icon
               icon-class="Inbound"
@@ -96,7 +96,7 @@
           >
         </div>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <div class="warning-btn" v-hasPermi="['system:post:export']">
           <el-button
             type="warning"
@@ -106,7 +106,7 @@
             >导出</el-button
           >
         </div>
-      </el-col>
+      </el-col> -->
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
diff --git a/src/views/region/index.vue b/src/views/region/index.vue
index b327fc1..df49d6f 100644
--- a/src/views/region/index.vue
+++ b/src/views/region/index.vue
@@ -178,7 +178,6 @@
               type="text"
               icon="el-icon-edit"
               @click="handleUpdate(scope.row)"
-              v-hasPermi="['system:post:edit']"
               >修改</el-button
             >
             <el-button
@@ -186,7 +185,6 @@
               type="text"
               icon="el-icon-delete"
               @click="handleDelete(scope.row)"
-              v-hasPermi="['system:post:remove']"
               >删除</el-button
             >
           </template>
diff --git a/src/views/temSys/temHistory/index.vue b/src/views/temSys/temHistory/index.vue
index 0034f93..557fc7d 100644
--- a/src/views/temSys/temHistory/index.vue
+++ b/src/views/temSys/temHistory/index.vue
@@ -18,6 +18,7 @@
               clearable
               v-model="selectedValue"
               @change="handleCascaderChange"
+              filterable
             ></el-cascader>
           </el-form-item>
           <el-form-item label="时间范围" prop="gwName">
@@ -251,7 +252,7 @@ export default {
 
 <style lang="scss" scoped>
 .elCascader {
-  width: 290px;
+  width: 350px;
 }
 .history {
   width: 100%;
@@ -306,3 +307,8 @@ export default {
   }
 }
 </style>
+<style scoped>
+.elCascader >>>.el-input__inner::placeholder {
+  color: transparent !important;
+}
+</style>