From 3f5dde3aedcb55ae538f177a5d3b318b4e537e23 Mon Sep 17 00:00:00 2001
From: zx-student <1771203023@qq.com>
Date: Wed, 15 Oct 2025 20:42:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E6=9C=BA=E8=AF=A6=E6=83=85-=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=86=B7=E6=B0=B4=E8=AE=BE=E5=AE=9A=E5=80=BC=E5=81=8F?=
 =?UTF-8?q?=E7=A7=BB=E8=BE=93=E5=85=A5=E8=8C=83=E5=9B=B4=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E3=80=81=E6=B7=BB=E5=8A=A0=E6=9C=80=E7=BB=88=E5=87=BA=E6=B0=B4?=
 =?UTF-8?q?=E6=B8=A9=E5=BA=A6=E8=AE=BE=E5=AE=9A=E5=80=BC=E3=80=81=E5=B1=8F?=
 =?UTF-8?q?=E8=94=BD=E5=81=8F=E7=A7=BB=E5=80=BC=E5=AE=9A=E6=97=B6=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../centerairC/sysMonitor/hostDetails.vue     | 471 ++++++++----------
 1 file changed, 211 insertions(+), 260 deletions(-)

diff --git a/src/views/centerairC/sysMonitor/hostDetails.vue b/src/views/centerairC/sysMonitor/hostDetails.vue
index 5a1f3d6..77f2ccc 100644
--- a/src/views/centerairC/sysMonitor/hostDetails.vue
+++ b/src/views/centerairC/sysMonitor/hostDetails.vue
@@ -1,64 +1,24 @@
 <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=""
-      />
+      <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" @click="goSys">铭汉高效冷源站管理系统</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=""
-      />
+      <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
-          />
+          <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">
@@ -80,15 +40,11 @@
             </div> -->
           </div>
           <!-- 运行状态 -->
-          <img
-            src="../../../assets/images/fan-img.png"
-            :class="{
-              moveClass: hostListClass('1'),
-              fanBlade: isMagnetic === 'true',
-              leftFan: isMagnetic === 'false',
-            }"
-            alt=""
-          />
+          <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>
           <!-- 冷冻冷却水流信号 -->
@@ -97,19 +53,13 @@
               <span>冷却水流:</span>
               <span v-if="hostListClass('21')">接通</span>
               <span v-else>断开</span>
-              <span
-                class="break"
-                :class="{ connect: hostListClass('21') }"
-              ></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>
+              <span class="break" :class="{ connect: hostListClass('20') }"></span>
             </div>
           </div>
           <div class="hostStatus">
@@ -134,22 +84,18 @@
               <span>冷水设定值偏移:</span>
               <!-- <span class="goodData">{{ offsetValuerControlObj.curValue }}℃</span> -->
               <span class="goodData">
-                <el-input
-                  v-model="offsetValuerControlObj.curValue"
-                  size="mini"
-                  @keyup.enter.native="
-                    handleEnter(offsetValuerControlObj, $event)
-                  "
-                  @input="handleInput(offsetValuerControlObj.curValue)"
-                  @blur="handleBlur()"
-                >
-                  <template #suffix>℃</template></el-input
-                ></span
-              >
+                <el-input v-model="offsetValuerControlObj.curValue" size="mini" @keyup.enter.native="
+                  handleEnter(offsetValuerControlObj, $event)
+                  " @input="handleInput(offsetValuerControlObj.curValue)" @blur="handleBlur()">
+                  <template #suffix>℃</template></el-input></span>
             </div>
-            <div class="hostStatus-li2" @click="openTimeSwitch">
-              偏移值定时设置
+            <div class="hostStatus-li">
+              <span>最终冷冻水温度设定值:</span>
+              <span class="goodData">{{ finalColdWaterTemp }}℃</span>
             </div>
+            <!-- <div class="hostStatus-li2" @click="openTimeSwitch">
+              偏移值定时设置
+            </div> -->
           </div>
           <!-- 负载 -->
           <LoadData class="loadData" :hostData="hostData"></LoadData>
@@ -167,22 +113,15 @@
             <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="detail-data-li" v-for="(item, index) in rightHostData" :key="index">
               <div class="rightDot">
                 <div class="leftDot">
                   <span>{{ item.otherName }}:</span>
-                  <span
-                    :class="{
-                      dotData: !isSpecialValue(item.curValue),
-                      goodData: isSpecialValue(item.curValue),
-                      badData: item.curValue === '故障',
-                    }"
-                    >{{ item.curValue }}</span
-                  >
+                  <span :class="{
+                    dotData: !isSpecialValue(item.curValue),
+                    goodData: isSpecialValue(item.curValue),
+                    badData: item.curValue === '故障',
+                  }">{{ item.curValue }}</span>
                   <span>{{ item.unit }}</span>
                 </div>
               </div>
@@ -198,22 +137,15 @@
             <title-img></title-img>
           </div>
           <div class="detail-data-bottom">
-            <div
-              class="detail-data-li"
-              v-for="(subItem, subIndex) in compressorData1.list"
-              :key="subIndex"
-            >
+            <div class="detail-data-li" v-for="(subItem, subIndex) in compressorData1.list" :key="subIndex">
               <div class="rightDot">
                 <div class="leftDot">
                   <span>{{ subItem.otherName }}:</span>
-                  <span
-                    :class="{
-                      dotData: !isSpecialValue(subItem.curValue),
-                      goodData: isSpecialValue(subItem.curValue),
-                      badData: subItem.curValue === '故障',
-                    }"
-                    >{{ subItem.curValue }}</span
-                  >
+                  <span :class="{
+                    dotData: !isSpecialValue(subItem.curValue),
+                    goodData: isSpecialValue(subItem.curValue),
+                    badData: subItem.curValue === '故障',
+                  }">{{ subItem.curValue }}</span>
                   <span>{{ subItem.unit }}</span>
                 </div>
               </div>
@@ -229,22 +161,15 @@
             <title-img></title-img>
           </div>
           <div class="detail-data-bottom">
-            <div
-              class="detail-data-li"
-              v-for="(subItem, subIndex) in compressorData2.list"
-              :key="subIndex"
-            >
+            <div class="detail-data-li" v-for="(subItem, subIndex) in compressorData2.list" :key="subIndex">
               <div class="rightDot">
                 <div class="leftDot">
                   <span>{{ subItem.otherName }}:</span>
-                  <span
-                    :class="{
-                      dotData: !isSpecialValue(subItem.curValue),
-                      goodData: isSpecialValue(subItem.curValue),
-                      badData: subItem.curValue === '故障',
-                    }"
-                    >{{ subItem.curValue }}</span
-                  >
+                  <span :class="{
+                    dotData: !isSpecialValue(subItem.curValue),
+                    goodData: isSpecialValue(subItem.curValue),
+                    badData: subItem.curValue === '故障',
+                  }">{{ subItem.curValue }}</span>
                   <span>{{ subItem.unit }}</span>
                 </div>
               </div>
@@ -260,22 +185,15 @@
             <title-img></title-img>
           </div>
           <div class="detail-data-bottom">
-            <div
-              class="detail-data-li"
-              v-for="(subItem, subIndex) in compressorData3.list"
-              :key="subIndex"
-            >
+            <div class="detail-data-li" v-for="(subItem, subIndex) in compressorData3.list" :key="subIndex">
               <div class="rightDot">
                 <div class="leftDot">
                   <span>{{ subItem.otherName }}:</span>
-                  <span
-                    :class="{
-                      dotData: !isSpecialValue(subItem.curValue),
-                      goodData: isSpecialValue(subItem.curValue),
-                      badData: subItem.curValue === '故障',
-                    }"
-                    >{{ subItem.curValue }}</span
-                  >
+                  <span :class="{
+                    dotData: !isSpecialValue(subItem.curValue),
+                    goodData: isSpecialValue(subItem.curValue),
+                    badData: subItem.curValue === '故障',
+                  }">{{ subItem.curValue }}</span>
                   <span>{{ subItem.unit }}</span>
                 </div>
               </div>
@@ -285,13 +203,7 @@
       </div>
     </div>
     <!-- 定时开关内容 -->
-    <el-dialog
-      title="偏移值定时设置"
-      :visible.sync="isOpenTimeSwitch"
-      append-to-body
-      width="800px"
-      class="custom-dialog"
-    >
+    <el-dialog title="偏移值定时设置" :visible.sync="isOpenTimeSwitch" append-to-body width="800px" class="custom-dialog">
       <div class="dialog-content">
         <div class="device-container" v-loading="loading">
           <div class="device-li">
@@ -303,93 +215,52 @@
             <div class="device-name">最终设定值</div>
             <div class="device-name">启动状态</div>
           </div>
-          <div
-            class="device-li"
-            v-for="(item, index) in delayList"
-            :key="index"
-            :class="{ highlight: item.name.includes(currentWeekday) }"
-          >
+          <div class="device-li" v-for="(item, index) in delayList" :key="index"
+            :class="{ highlight: item.name.includes(currentWeekday) }">
             <div class="device-name">{{ item.name }}</div>
             <div class="device-name">
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.delayOpenHour"
-                    @keyup.enter.native="
-                      handleSwitchEnter(item, 'openHour', $event)
-                    "
-                    @input="handleSwitchInput(item, 'delayOpenHour', 'hour')"
-                  ></el-input> </el-form-item
-              ></el-form>
+                  <el-input size="mini" v-model="item.delayOpenHour" @keyup.enter.native="
+                    handleSwitchEnter(item, 'openHour', $event)
+                    " @input="handleSwitchInput(item, 'delayOpenHour', 'hour')"></el-input> </el-form-item></el-form>
               <div class="slip">:</div>
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.delayOpenMinute"
-                    @keyup.enter.native="
-                      handleSwitchEnter(item, 'openMinute', $event)
-                    "
-                    @input="
+                  <el-input size="mini" v-model="item.delayOpenMinute" @keyup.enter.native="
+                    handleSwitchEnter(item, 'openMinute', $event)
+                    " @input="
                       handleSwitchInput(item, 'delayOpenMinute', 'minute')
-                    "
-                  ></el-input> </el-form-item
-              ></el-form>
+                      "></el-input> </el-form-item></el-form>
             </div>
             <div class="device-name">
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.delayCloseHour"
-                    @keyup.enter.native="
-                      handleSwitchEnter(item, 'closeHour', $event)
-                    "
-                    @input="handleSwitchInput(item, 'delayCloseHour', 'hour')"
-                  ></el-input></el-form-item
-              ></el-form>
+                  <el-input size="mini" v-model="item.delayCloseHour" @keyup.enter.native="
+                    handleSwitchEnter(item, 'closeHour', $event)
+                    " @input="handleSwitchInput(item, 'delayCloseHour', 'hour')"></el-input></el-form-item></el-form>
               <div class="slip">:</div>
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.delayCloseMinute"
-                    @keyup.enter.native="
-                      handleSwitchEnter(item, 'closeMinute', $event)
-                    "
-                    @input="
+                  <el-input size="mini" v-model="item.delayCloseMinute" @keyup.enter.native="
+                    handleSwitchEnter(item, 'closeMinute', $event)
+                    " @input="
                       handleSwitchInput(item, 'delayCloseMinute', 'minute')
-                    "
-                  ></el-input></el-form-item
-              ></el-form>
+                      "></el-input></el-form-item></el-form>
             </div>
             <!-- 三个值，偏移值可输入 -->
             <div class="device-name">
               <el-form @submit.native.prevent>
                 <el-form-item>
-                  <el-input
-                    size="mini"
-                    v-model="item.offsetValue"
-                    @keyup.enter.native="
-                      handleOffsetValueEnter(item, 'offset', $event)
-                    "
-                    @input="handleSwitchInput(item, 'offsetValue', 'offset')"
-                  ></el-input></el-form-item
-              ></el-form>
+                  <el-input size="mini" v-model="item.offsetValue" @keyup.enter.native="
+                    handleOffsetValueEnter(item, 'offset', $event)
+                    " @input="handleSwitchInput(item, 'offsetValue', 'offset')"></el-input></el-form-item></el-form>
             </div>
             <div class="device-name">{{ item.curValue }}</div>
             <div class="device-name">{{ item.finalOutWaterTemp }}</div>
             <div class="device-name">
-              <el-switch
-                style="display: block"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
-                active-text="开启"
-                inactive-text="停用"
-                v-model="item.delayStatus"
-                @change="handleSwitchStatus(item)"
-              >
+              <el-switch style="display: block" active-color="#13ce66" inactive-color="#ff4949" active-text="开启"
+                inactive-text="停用" v-model="item.delayStatus" @change="handleSwitchStatus(item)">
               </el-switch>
             </div>
           </div>
@@ -435,6 +306,7 @@ export default {
       coldWaterSetObj: {}, //本地出水温度设定值
       coldWaterControlObj: {}, //远程出水温度设定值
       offsetValuerControlObj: {}, //偏移值设定
+      finalColdWaterTemp: "",//最终出水温度设定值
       compressorData1: [], //压缩机1参数
       compressorData2: [],
       compressorData3: [],
@@ -471,7 +343,7 @@ export default {
       return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
     },
   },
-  created() {},
+  created() { },
   mounted() {
     this.getHostDetailsData();
     this.getAlarnStatus();
@@ -658,6 +530,10 @@ export default {
                   }
                 }
               });
+              //最终出水温度设定值
+              this.finalColdWaterTemp =
+                parseFloat(this.coldWaterControlObj.curValue) + parseFloat(this.offsetValuerControlObj.curValue);
+
             }
           });
           // 使用 filter 方法过滤掉 item 为 '0' 的对象
@@ -832,7 +708,7 @@ export default {
       const specialValues = ["运行", "启动", "正常"];
       return specialValues.includes(value);
     },
-    // 处理输入事件，过滤非数字字符
+    // 处理输入事件，过滤非数字字符并确保输入值大于 0 小于 10
     handleInput(item) {
       console.log("校验");
       // 实时校验并过滤非数字字符
@@ -841,7 +717,16 @@ export default {
       if (input.startsWith("0") && input.length > 1) {
         input = input.replace(/^0+/, "");
       }
-      this.offsetValuerControlObj.curValue = input;
+      // 将输入转换为数字
+      let numInput = parseInt(input, 10);
+      // 检查输入是否在 0 到 10 之间
+      if (!isNaN(numInput) && numInput > 0 && numInput < 10) {
+        this.offsetValuerControlObj.curValue = String(numInput);
+      } else {
+        this.$modal.msgWarning("只能输入0-10区间")
+        // 如果输入不在有效范围内，清空输入
+        this.offsetValuerControlObj.curValue = "";
+      }
     },
     // 失去焦点
     handleBlur() {
@@ -995,7 +880,7 @@ export default {
                   // 计算最终出水温度设置值
                   const offsetValue =
                     delayItem.offsetValue !== null &&
-                    delayItem.offsetValue !== ""
+                      delayItem.offsetValue !== ""
                       ? parseFloat(delayItem.offsetValue)
                       : NaN;
                   const curValue =
@@ -1175,7 +1060,7 @@ export default {
         policyId: id,
         timeValue: param,
       };
-    //  console.log("操作参数", data);
+      //  console.log("操作参数", data);
       // 开启 loading 效果
       this.loading = true;
       undateTime(data)
@@ -1210,8 +1095,7 @@ export default {
     // 启用状态
     handleSwitchStatus(item) {
       this.$confirm(
-        `确定要切换"${item.name}"的状态为:${
-          item.delayStatus ? "开启" : "停用 吗?"
+        `确定要切换"${item.name}"的状态为:${item.delayStatus ? "开启" : "停用 吗?"
         }`,
         "提示",
         {
@@ -1247,6 +1131,7 @@ export default {
   min-height: 100vh;
   background-color: black;
   color: #fff;
+
   .monitor-top {
     width: 100%;
     display: flex;
@@ -1256,18 +1141,22 @@ export default {
     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.78rem;
     }
+
     .sys-title {
       position: absolute;
       top: 40%;
@@ -1279,6 +1168,7 @@ export default {
       z-index: 100;
       cursor: pointer;
     }
+
     .nowTime {
       position: absolute;
       top: 0.37rem;
@@ -1288,6 +1178,7 @@ export default {
       font-weight: bold;
       z-index: 100;
     }
+
     .sys-logo {
       width: 1.8rem;
       height: 0.5rem;
@@ -1296,6 +1187,7 @@ export default {
       left: 0.8rem;
       z-index: 10;
     }
+
     .monitor-time {
       position: absolute;
       top: 0.44rem;
@@ -1305,6 +1197,7 @@ export default {
       color: #ffffff;
       font-weight: bold;
     }
+
     .icon_warning {
       position: absolute;
       top: 0.39rem;
@@ -1317,14 +1210,17 @@ export default {
       /* 添加闪烁动画 */
       animation: blink 1s infinite;
     }
+
     @keyframes blink {
       100% {
         opacity: 1;
       }
+
       50% {
         opacity: 0;
       }
     }
+
     .icon_home {
       position: absolute;
       top: 0.39rem;
@@ -1335,6 +1231,7 @@ export default {
       margin: 0 0.2rem 0 0.27rem;
       cursor: pointer;
     }
+
     .back-icon {
       position: absolute;
       top: 0.39rem;
@@ -1345,32 +1242,38 @@ export default {
       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 {
         height: 4.8rem;
         // background-color: aquamarine;
         position: relative;
+
         .host-img1 {
           width: 4.48rem;
           height: 3.57rem;
           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;
@@ -1378,59 +1281,71 @@ export default {
             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;
@@ -1442,6 +1357,7 @@ export default {
           animation: blink 1s infinite;
           background-color: #38fc52 !important;
         }
+
         .hostStatus {
           z-index: 10;
           position: absolute;
@@ -1452,6 +1368,7 @@ export default {
           justify-content: flex-start;
           width: 2.8rem !important;
           margin-top: 1.5rem;
+
           .hostStatus-li {
             background-color: #25455a;
             color: #c0dffc;
@@ -1463,10 +1380,12 @@ export default {
             flex-direction: row;
             flex-wrap: nowrap;
             align-items: flex-start;
+
             span {
               white-space: nowrap;
             }
           }
+
           .hostStatus-li2 {
             background-color: #136bf0;
             color: #ffffff;
@@ -1481,15 +1400,18 @@ export default {
             border-radius: 0.1rem;
             cursor: pointer;
           }
+
           .hostStatus-li2:hover {
             background-color: #217af0;
           }
         }
+
         .water-flow3 {
           z-index: 10;
           position: absolute;
           top: 3.5rem;
           left: 1.2rem;
+
           .water-flow-li {
             margin-bottom: 0.04rem;
             color: #46f1e3;
@@ -1497,11 +1419,13 @@ export default {
             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;
@@ -1511,23 +1435,27 @@ export default {
               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;
@@ -1536,9 +1464,9 @@ export default {
           width: 0.5rem;
           height: 0.5rem;
           transform-style: preserve-3d;
-          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
-            rotateY(40deg);
+          transform: translateX(-50%) rotateX(15deg) rotateZ(20deg) rotateY(40deg);
         }
+
         .leftFan {
           z-index: 10;
           position: absolute;
@@ -1549,9 +1477,11 @@ export default {
           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;
@@ -1561,6 +1491,7 @@ export default {
           font-weight: bold;
           font-size: 0.18rem;
         }
+
         .loadData {
           z-index: 10;
           position: absolute;
@@ -1568,12 +1499,14 @@ export default {
           left: 5rem;
         }
       }
+
       .detail-top-right {
         width: calc(100% - 7.6rem);
         height: 4.8rem;
         // background-color: rgb(127, 172, 255);
       }
     }
+
     .detail-bottom {
       // height: 5rem;
       margin-top: 0.3rem;
@@ -1581,11 +1514,13 @@ export default {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+
       .detail-data {
         display: flex;
         flex-direction: column;
         // width: 4rem;
         position: relative;
+
         .detail-data-top {
           display: flex;
           flex-direction: row;
@@ -1597,10 +1532,12 @@ export default {
           width: 100%;
           text-align: center;
           z-index: 10;
+
           .details-title {
             margin: 0 0.15rem;
           }
         }
+
         .detail-data-bottom {
           width: 100%;
           // padding: 0.1rem 0.3rem;
@@ -1610,6 +1547,7 @@ export default {
           flex-wrap: wrap;
           align-items: stretch;
           justify-content: flex-start;
+
           .detail-data-li {
             // width: 100%;
             margin-right: 0.1rem;
@@ -1623,29 +1561,22 @@ export default {
             margin-bottom: 0.2rem;
             border-left: 0.01rem solid #217df5;
             border-right: 0.01rem solid #217df5;
-            background-image: radial-gradient(
-                circle at left top,
+            background-image: radial-gradient(circle at left top,
                 #217df5 0.01rem,
-                transparent 0.01rem
-              ),
-              radial-gradient(
-                circle at right top,
+                transparent 0.01rem),
+              radial-gradient(circle at right top,
                 #217df5 0.01rem,
-                transparent 0.01rem
-              ),
-              radial-gradient(
-                circle at left bottom,
+                transparent 0.01rem),
+              radial-gradient(circle at left bottom,
                 #217df5 0.01rem,
-                transparent 0.01rem
-              ),
-              radial-gradient(
-                circle at right bottom,
+                transparent 0.01rem),
+              radial-gradient(circle at right bottom,
                 #217df5 0.01rem,
-                transparent 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: "";
@@ -1653,25 +1584,26 @@ export default {
             left: 0;
             right: 0;
             height: 0.01rem;
-            background-image: linear-gradient(
-              to right,
-              #217df5 0%,
-              rgba(41, 128, 185, 0) 50%,
-              #217df5 100%
-            );
+            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%;
@@ -1692,11 +1624,9 @@ export default {
             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%
-            );
+            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;
           }
@@ -1710,14 +1640,13 @@ export default {
             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%
-            );
+            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;
@@ -1729,11 +1658,9 @@ export default {
             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%
-            );
+            background-image: radial-gradient(circle at 30% 30%,
+                rgba(255, 255, 255, 0.8) 0%,
+                rgba(255, 255, 255, 0) 70%);
           }
 
           .leftDot::after {
@@ -1746,22 +1673,24 @@ export default {
             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%
-            );
+            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: 0rem;
         }
       }
+
       .hostparams {
         width: 7rem;
+
         .detail-data-bottom {
+
           // padding-left: 0.5rem;
           .detail-data-li {
             // width: 3.2rem;
@@ -1770,9 +1699,12 @@ export default {
           }
         }
       }
+
       .compressor {
         width: 3.5rem;
+
         .detail-data-bottom {
+
           // padding-left: 0.75rem;
           .detail-data-li {
             // width: 3.4rem;
@@ -1784,9 +1716,11 @@ export default {
     }
   }
 }
+
 .choice {
   margin-left: 0 !important;
 }
+
 .choice .mr20 {
   width: 1rem !important;
   color: #c0dffc;
@@ -1796,9 +1730,11 @@ export default {
   background-color: transparent !important;
   box-shadow: none !important;
 }
+
 .timeStyle {
   color: #ffffff !important;
 }
+
 .dotData {
   font-weight: bold;
   margin: 0 0.06rem;
@@ -1806,21 +1742,25 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .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;
@@ -1828,40 +1768,48 @@ export default {
 }
 </style>
 <style scoped>
-.goodData >>> .el-input--mini {
+.goodData>>>.el-input--mini {
   font-size: 0.16rem !important;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.goodData >>> .el-input {
+
+.goodData>>>.el-input {
   width: 1rem !important;
 }
-.goodData >>> .el-input--mini .el-input__inner {
+
+.goodData>>>.el-input--mini .el-input__inner {
   height: 0.28rem !important;
   line-height: 20.28rem !important;
 }
-.goodData >>> .el-input__inner {
+
+.goodData>>>.el-input__inner {
   font-weight: bold;
   box-shadow: none !important;
 }
-.goodData >>> .el-input__suffix {
+
+.goodData>>>.el-input__suffix {
   font-weight: bold;
   right: 0.05rem !important;
   height: 100% !important;
   top: -0.01rem !important;
 }
+
 .device-name:nth-child(3) {
   margin-left: 30px !important;
 }
+
 .device-name {
   justify-content: center !important;
   align-items: center !important;
 }
+
 .device-name .slip {
   margin: 0 5px;
 }
-.device-name >>> .el-form {
+
+.device-name>>>.el-form {
   width: 50px !important;
   display: flex;
   flex-direction: row;
@@ -1869,12 +1817,15 @@ export default {
   align-items: center;
   flex-wrap: nowrap;
 }
-.device-name >>> .el-form-item {
+
+.device-name>>>.el-form-item {
   margin-bottom: 0 !important;
 }
-.device-name >>> .el-input {
+
+.device-name>>>.el-input {
   width: 50px !important;
 }
+
 .device-name {
   display: flex;
   flex-direction: row;