1.修改风柜监测系统

2.修改生活热水-监控页面为大屏

src/store/modules/permission.js

@@ -166,6 +166,33 @@ const permission = {
           } else {
             // console.log("不满足条件");
           }
+
+          // 热水
+          const result4 = sidebarRoutes.find(
+            (item) => item.name === "HotWater"
+          );
+          if (result4) {
+            // 定义要添加的多个路由对象数组
+            const additionalRoutes4 = [
+              {
+                path: "/waterMonitorDetails",
+                name: "waterMonitorDetails",
+                hidden: true,
+                component: () =>
+                  import("@/views/hotWater/waterMonitor/waterMonitorDetails"),
+                meta: { title: "热水监控", icon: "screen" },
+              },
+              // 可以继续添加更多路由对象
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            additionalRoutes4.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);

src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue

@@ -94,8 +94,6 @@ import { runTime } from "@/api/centerairC/sysMonitor";
 import { alarmRecordList } from "@/api/alarm/alarmRecord";
 import { getDay } from "@/utils/datetime";
 import { spaceTree } from "@/api/region";
-import { windList, timeList, undateTime } from "@/api/aircAndWindc/index";
-import { operationConrol } from "@/api/hotWater/waterControl";
 import damperMonitor from "./components/damperMonitor.vue";
 import normalMonitor from "./components/normalMonitor.vue";
 export default {
@@ -213,13 +211,15 @@ export default {
     console.log("今天是星期几", this.currentWeekday);
   },
   mounted() {
+    this.requestFullscreen();
+    // 首次进入页面时执行
     this.getSysBuild();
     this.getAlarnStatus();
     this.getDayData();
-    // 在组件挂载后尝试进入全屏
+    // 每秒更新一次时间
-    setTimeout(() => {
+    this.nowTimer = setInterval(() => {
-      this.requestFullscreen();
+      this.currentDate = new Date();
-    }, 100); // 延迟 100 毫秒执行全屏操作
+    }, 1000);
   },
   beforeDestroy() {
     // 组件销毁前清除定时器
@@ -562,390 +562,6 @@ export default {
     }
   }
 }
-.buildingDiv {
-  padding-left: 54px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 20px;
-  position: relative;
-  .title-bg {
-    width: 208px;
-    height: 38px;
-    position: absolute;
-    left: 0;
-    z-index: 0;
-  }
-  .title-word {
-    z-index: 10;
-    font-family: YouSheBiaoTiHei;
-    font-size: 24px;
-    color: #ffffff;
-    white-space: nowrap;
-  }
-}
-.mostDiv {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.windC {
-  width: 13rem;
-  height: 5.38rem;
-  position: relative;
-  .menu-title {
-    color: #e1f4ff;
-    font-size: 0.18rem;
-    --bRadius: 0.05rem;
-    text-align: center;
-    position: absolute;
-    top: 0;
-    right: 0.5rem;
-    width: 1.25rem;
-    cursor: pointer;
-    z-index: 9;
-    div {
-      position: relative;
-      text-align: center;
-      border-radius: var(--bRadius);
-      transition: all 0.3s;
-      padding: 0.01rem 0.02rem;
-      background-color: rgba(85, 139, 211, 0.2);
-      cursor: pointer;
-      &::before,
-      &::after {
-        content: "";
-        position: absolute;
-        top: -10px;
-        left: -10px;
-        right: -10px;
-        bottom: -10px;
-        border: 2px solid #46b2f1;
-        transition: all 0.5s;
-        border-radius: var(--bRadius);
-        animation: clippath 3s infinite linear;
-        cursor: pointer;
-      }
-      &::after {
-        animation: clippath 3s infinite -1.5s linear;
-      }
-      @keyframes clippath {
-        0%,
-        100% {
-          clip-path: inset(0 0 98% 0);
-        }
-        25% {
-          clip-path: inset(0 98% 0 0);
-        }
-        50% {
-          clip-path: inset(98% 0 0 0);
-        }
-        75% {
-          clip-path: inset(0 0 0 98%);
-        }
-      }
-    }
-  }
-  .wind-img {
-    width: 13.1rem;
-    height: 5.5rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-  .wind-tem1 {
-    z-index: 10;
-    width: 1.3rem;
-    position: absolute;
-    top: 0.3rem;
-    left: 7.3rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .wind-text {
-      color: #00d2ff;
-      font-size: 0.18rem;
-      margin-bottom: 0.15rem;
-    }
-  }
-  .wind-tem2 {
-    z-index: 10;
-    width: 1.3rem;
-    position: absolute;
-    top: 1.7rem;
-    right: 0.3rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .wind-text {
-      color: #00d2ff;
-      font-size: 0.18rem;
-      margin-bottom: 0.15rem;
-    }
-  }
-  .fan-frequency {
-    z-index: 10;
-    position: absolute;
-    top: 1.7rem;
-    left: 8.5rem;
-    width: 1.3rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .wind-text {
-      color: #00d2ff;
-      font-size: 0.18rem;
-      margin-bottom: 0.15rem;
-    }
-  }
-  .fan-satatus1 {
-    position: absolute;
-    top: 4.5rem;
-    left: 8.5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    .context-li {
-      z-index: 10;
-      // width: 2rem;
-      margin-bottom: 0.1rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-    .wind-text {
-      color: #00d2ff;
-      font-size: 0.18rem;
-      margin-right: 0.15rem;
-      white-space: nowrap;
-    }
-  }
-  .fan-satatus2 {
-    position: absolute;
-    top: 5.5rem;
-    left: 6rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    .context-li {
-      z-index: 10;
-      width: 2rem;
-      margin-bottom: 0.1rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-    .wind-text {
-      color: #00d2ff;
-      font-size: 0.18rem;
-      margin-right: 0.15rem;
-      white-space: nowrap;
-    }
-  }
-  .fan-satatus3 {
-    position: absolute;
-    top: 1.7rem;
-    left: 8.5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    .context-li {
-      z-index: 10;
-      // width: 2rem;
-      margin-bottom: 0.1rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-    .wind-text {
-      color: #00d2ff;
-      font-size: 0.18rem;
-      margin-right: 0.15rem;
-      white-space: nowrap;
-    }
-    .goodStautus {
-      color: rgb(57, 248, 51);
-      font-size: 0.18rem;
-      font-weight: bold;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-    .goodStautus::before {
-      content: "";
-      display: inline-block;
-      width: 0.1rem;
-      height: 0.1rem;
-      margin-right: 0.1rem;
-      border-radius: 50%;
-      background-color: rgb(57, 248, 51);
-    }
-    .badStautus {
-      color: rgb(248, 48, 41);
-      font-size: 0.18rem;
-      font-weight: bold;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      animation: blink 1s infinite;
-    }
-    .badStautus::before {
-      content: "";
-      display: inline-block;
-      width: 0.1rem;
-      height: 0.1rem;
-      margin-right: 0.1rem;
-      border-radius: 50%;
-      background-color: rgb(248, 48, 41);
-      animation: blink 1s infinite;
-    }
-    .noneStautus {
-      color: rgb(194, 191, 191);
-      font-size: 0.18rem;
-      font-weight: bold;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-    .noneStautus::before {
-      content: "";
-      display: inline-block;
-      width: 0.1rem;
-      height: 0.1rem;
-      margin-right: 0.1rem;
-      border-radius: 50%;
-      background-color: rgb(194, 191, 191);
-    }
-  }
-  /* 定义灯闪烁的动画 */
-  @keyframes blink {
-    0% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.7;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  .wind-valve {
-    z-index: 10;
-    position: absolute;
-    top: 4.6rem;
-    left: 3rem;
-    width: 2rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 0.18rem;
-    .wind-text {
-      color: #00d2ff;
-      font-size: 0.18rem;
-      white-space: nowrap;
-    }
-  }
-  .wind-valve2 {
-    z-index: 10;
-    position: absolute;
-    top: 5rem;
-    left: 3rem;
-    width: 2rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    .wind-text {
-      color: #00d2ff;
-      font-size: 0.18rem;
-      margin-right: 0.1rem;
-      white-space: nowrap;
-    }
-  }
-  .windMove {
-    width: 0.72rem;
-    height: 0.73rem;
-    position: absolute;
-    top: 3.23rem;
-    right: 3.81rem;
-    z-index: 10;
-  }
-  .tunCircle {
-    /* 应用动画 */
-    animation: rotate 2s linear infinite;
-  } /* 定义旋转动画 */
-  @keyframes rotate {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  .arrow-flex {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    z-index: 10;
-    position: absolute;
-    top: 3.2rem;
-    left: -0.1rem;
-  }
-  .arrow-flex2 {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    z-index: 10;
-    position: absolute;
-    top: 3.2rem;
-    right: 0.6rem;
-  }
-  .arrow-flex3 {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    z-index: 10;
-    position: absolute;
-    top: 0.6rem;
-    right: 6rem;
-    transform: rotateY(180deg);
-  }
-  .wind-arrow {
-    width: 0.4rem;
-    height: 0.6rem;
-    margin-right: 0.15rem;
-    animation: moveArrow 2s linear infinite;
-  }
-  /* 定义每个箭头的透明度 */
-  .wind-arrow:nth-child(1) {
-    opacity: 1;
-  }
-
-  .wind-arrow:nth-child(2) {
-    opacity: 0.6;
-  }
-
-  .wind-arrow:nth-child(3) {
-    opacity: 0.4;
-  }
-  .wind-arrow:nth-child(4) {
-    opacity: 0.2;
-  }
-
-  /* 定义箭头移动的动画 */
-  @keyframes moveArrow {
-    0% {
-      transform: translateX(0);
-    }
-
-    100% {
-      transform: translateX(0.2rem);
-      /* 箭头向右移动的距离 */
-    }
-  }
-}
 .app-container {
   display: flex;
   flex-direction: row;
@@ -1051,112 +667,11 @@ export default {
     }
   }
 }
-.device-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 530px;
-  background-color: #142c4e;
-  padding: 10px 10px 30px 10px;
-  border-radius: 10px;
-  font-size: 14px;
-  .device-li {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 12px 0;
-    color: #abcdfc;
-    border-bottom: 1px dashed #0349ac;
-    .device-name {
-      flex: 1;
-      white-space: nowrap;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      flex-wrap: nowrap;
-      padding: 0 5px;
-      .slip {
-        margin: 0 5px;
-        color: #1282d8;
-        font-weight: bold;
-      }
-    }
-  }
-  .device-li:nth-child(1) {
-    color: #9ca3af;
-  }
-}
 .highlight {
   background-color: #003863 !important; /* 定义高亮的背景颜色 */
   color: #ffffff !important;
   font-weight: bold;
 }
-.device-container .highlight .device-name .slip {
-  color: #ffffff !important;
-  font-weight: bold;
-}
-/* 为高亮行添加图片箭头 */
-.device-li.highlight::before {
-  content: "";
-  background-image: url("../../../assets/images/step.png");
-  background-size: contain;
-  background-repeat: no-repeat;
-  width: 30px;
-  height: 30px;
-  position: absolute;
-  left: 2px; /* 图片位置，根据实际情况调整 */
-  top: 20%;
-  transform: translateY(-50%);
-  z-index: 999;
-  animation: moveRight 1s ease-in-out infinite alternate;
-}
-@keyframes moveRight {
-  0% {
-    transform: translateX(0); /* 初始位置，不移动 */
-  }
-  100% {
-    transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
-  }
-}
-
-/* 确保 device-li 有相对定位 */
-.device-li {
-  position: relative;
-}
-// 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {
-  .device-container {
-    min-height: 7rem !important;
-    padding: 0.1rem 0.1rem 0.3rem 0.1rem !important;
-    border-radius: 0.1rem !important;
-    font-size: 0.14rem !important;
-    .device-li {
-      padding: 0.12rem 0 !important;
-      .device-name {
-        .slip {
-          margin: 0 0.05rem !important;
-        }
-      }
-    }
-  }
-}
-@media (min-width: 1360px) and (max-width: 1680px) {
-  .windC {
-    transform: scale(0.9);
-  }
-}
-@media (min-width: 1160px) and (max-width: 1360px) {
-  .windC {
-    transform: scale(0.8);
-  }
-}
-@media (min-width: 990px) and (max-width: 1160px) {
-  .windC {
-    transform: scale(0.7);
-  }
-}
 // 手机端样式
 @media (min-width: 0px) and (max-width: 990px) {
   .app-container {
@@ -1178,17 +693,6 @@ export default {
   .custom-tree-node {
     font-size: 12px !important;
   }
-  .buildingDiv {
-    padding-left: 0.54rem !important;
-    margin-bottom: 0.2rem !important;
-    .title-bg {
-      width: 2.08rem !important;
-      height: 0.38rem !important;
-    }
-    .title-word {
-      font-size: 15px !important;
-    }
-  }
 }
 </style>
 <style scoped>
@@ -1201,110 +705,10 @@ export default {
   /* color: #f56c6c;  */
   color: #25f1f8;
 }
-.windC >>> .el-input__inner {
-  background-color: #04193a;
-  border: 1px solid #1262db;
-  color: #3ef0fd;
-  font-weight: 700;
-  text-align: center;
-  padding: 0 0.1rem !important;
-  font-size: 0.18rem !important;
-}
-.windC >>> .el-input__prefix {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-.windC >>> .svg-icon {
-  width: 0.2rem !important;
-  height: 0.2rem !important;
-  fill: #ffffff !important;
-}
-.windC >>> .el-form-item {
-  margin-bottom: 0 !important;
-}
-.windC >>> .el-form-item--medium .el-form-item__content {
-  line-height: 0 !important;
-}
 /* 手机端样式 */
 @media (min-width: 0px) and (max-width: 990px) {
   .left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon {
     padding: 3px !important;
   }
-  .windC >>> .el-input--mini .el-input__inner {
-    height: 0.28rem !important;
-    line-height: 0.28rem !important;
-    padding: 0.2rem 0.1rem !important;
-  }
-  .windC >>> .el-switch {
-    height: 0.2rem !important;
-    line-height: 0.2rem !important;
-    font-size: 0.18rem !important;
-  }
-  .windC >>> .el-switch__label {
-    height: 0.2rem !important;
-    line-height: 0.2rem !important;
-    font-size: 0.18rem !important;
-  }
-  .windC >>> .el-switch__label * {
-    font-size: 0.18rem !important;
-  }
-  .windC >>> .el-switch__core {
-    width: 0.4rem !important;
-    height: 0.2rem !important;
-    border-radius: 0.1rem !important;
-  }
-  .windC >>> .el-switch__core:after {
-    width: 0.16rem !important;
-    height: 0.16rem !important;
-  }
-  .windC >>> .el-switch.is-checked .el-switch__core::after {
-    margin-left: -0.17rem !important;
-  }
-  .custom-dialog >>> .el-dialog {
-    width: 550px !important;
-  }
-  .custom-dialog >>> .el-dialog__title {
-    width: 224px !important;
-    height: 35px !important;
-    font-size: 18px !important;
-    line-height: 20px !important;
-  }
-  .custom-dialog >>> .el-dialog__body {
-    padding: 10px 20px !important;
-  }
-  .device-li .device-name {
-    font-size: 12px !important;
-  }
-  .device-container .device-li {
-    padding: 10px 0 !important;
-  }
-  .device-li .device-name .el-input {
-    width: 50px !important;
-  }
-  .device-li.highlight::before {
-    left: -5px !important;
-    width: 20px !important;
-    height: 20px !important;
-    top: 30% !important;
-  }
-  .custom-dialog >>> .el-switch__label * {
-    font-size: 12px !important;
-  }
-  .custom-dialog >>> .el-switch__core {
-    width: 37px !important;
-    height: 17px !important;
-  }
-  .custom-dialog >>> .el-switch__core:after {
-    width: 13px !important;
-    height: 13px !important;
-  }
-  .custom-dialog >>> .el-form-item {
-    margin-bottom: 0 !important;
-  }
-  .custom-dialog >>> .el-form-item--medium .el-form-item__content {
-    line-height: 0 !important;
-  }
 }
 </style>

src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue

@@ -326,7 +326,9 @@
             <el-form @submit.native.prevent>
               <el-form-item>
                 <el-input
-                  @keyup.enter.native="handleEnter(waterValveObjSet, $event, '%')"
+                  @keyup.enter.native="
+                    handleEnter(waterValveObjSet, $event, '%')
+                  "
                   @input="handleInput(waterValveObjSet)"
                   @blur="handleBlur()"
                   v-model="waterValveObjSet.collectValue"
@@ -878,6 +880,7 @@ export default {
                     this.startStopObj = item;
                     if (String(this.startStopObj.collectValue) === "0.00") {
                       this.startStopObj.collectValue = 0;
+                      this.startStopValue = 0;
                     }
                   }
                   //远程手动启停 0停止1开启
@@ -1701,7 +1704,7 @@ export default {
   .fan-satatus1 {
     position: absolute;
     top: 4.3rem;
-    left: 5.5rem;
+    left: 5.9rem;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -1767,8 +1770,8 @@ export default {
   }
   .fan-satatus3 {
     position: absolute;
-    top: 0.9rem;
+    top: 0.7rem;
-    left: 6.3rem;
+    left: 6.4rem;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -2078,21 +2081,30 @@ export default {
     transform: scale(0.9);
   }
 }
-@media (min-width: 1160px) and (max-width: 1360px) {
+@media (min-width: 990px) and (max-width: 1360px) {
   .windC {
     transform: scale(0.8);
+    .fan-satatus3 {
+      top: 0.3rem !important;
+    }
   }
 }
-@media (min-width: 990px) and (max-width: 1160px) {
+// @media (min-width: 990px) and (max-width: 1160px) {
-  .windC {
+//   .windC {
-    transform: scale(0.7);
+//     transform: scale(0.7);
-  }
+//   }
-}
+// }
 // 手机端样式
 @media (min-width: 0px) and (max-width: 990px) {
   .right-monitor {
     width: calc(100% - 210px) !important;
   }
+  .windC {
+    transform: scale(0.86);
+    .fan-satatus3 {
+      top: 0.4rem !important;
+    }
+  }
   .buildingDiv {
     padding-left: 0.54rem !important;
     margin-bottom: 0.2rem !important;
@@ -2218,5 +2230,14 @@ export default {
   .custom-dialog >>> .el-form-item--medium .el-form-item__content {
     line-height: 0 !important;
   }
+  .windC >>> .el-select .el-input .el-select__caret {
+    font-size: 0.14rem !important;
+  }
+  .windC >>> .el-input--mini .el-input__icon {
+    line-height: 0.28rem !important;
+  }
+  .windC >>> .el-input__icon {
+    width: 0.25rem !important;
+  }
 }
 </style>