diff --git a/src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue b/src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue
index 9060d3a..8b831f3 100644
--- a/src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue
+++ b/src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue
@@ -1,99 +1,48 @@
 <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"
-        @click="goSys"
-        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" @click="goSys" 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">
       <!-- 流程底图 -->
-      <img
-        class="flowchart"
-        src="../../../assets/images/flowchart.png"
-        alt=""
-      />
+      <img class="flowchart" src="../../../assets/images/flowchart.png" alt="" />
       <!-- 热量数据 -->
       <div class="hot-details">
         <div class="hot-title">热量计量</div>
         <div class="hot-li">
-          <img
-            src="../../../assets/images/hot-icon1.png"
-            class="hot-icon"
-            alt=""
-          />
+          <img src="../../../assets/images/hot-icon1.png" class="hot-icon" alt="" />
           <div>热回收总量:</div>
           <div class="hot-data">
             {{ formatHeatValue(hotData.totalHeatRecoverySum) }}
           </div>
         </div>
         <div class="hot-li">
-          <img
-            src="../../../assets/images/hot-icon2.png"
-            class="hot-icon"
-            alt=""
-          />
+          <img src="../../../assets/images/hot-icon2.png" class="hot-icon" alt="" />
           <div>离心机热量回收:</div>
           <div class="hot-data">
             {{ formatHeatValue(hotData.centrifugalHeatRecoverySum) }}
           </div>
         </div>
         <div class="hot-li">
-          <img
-            src="../../../assets/images/hot-icon3.png"
-            class="hot-icon"
-            alt=""
-          />
+          <img src="../../../assets/images/hot-icon3.png" class="hot-icon" alt="" />
           <div>后处理及MD热量回收:</div>
           <div class="hot-data">
             {{ formatHeatValue(hotData.postProcessingAndMdHeatRecoverySum) }}
           </div>
         </div>
         <div class="hot-li">
-          <img
-            src="../../../assets/images/hot-icon4.png"
-            class="hot-icon"
-            alt=""
-          />
+          <img src="../../../assets/images/hot-icon4.png" class="hot-icon" alt="" />
           <div>水源热泵热量:</div>
           <div class="hot-data">
             {{ formatHeatValue(hotData.waterSourceHeatPumpSum) }}
@@ -206,7 +155,7 @@
       <!-- <div class="text tem1">{{ getTemPreData(temArr, "1号温度传感器") }}℃</div> -->
       <div class="text tem2">{{ getTemPreData(temArr, "2号温度传感器") }}℃</div>
       <div class="text tem3">{{ getTemPreData(temArr, "3号温度传感器") }}℃</div>
-      <div class="text tem4">{{ getTemPreData(temArr, "4号温度传感器") }}℃</div>
+      <div class="text tem4">{{ getHotMeterTemp(allValveArr, "温度模块2_输入值", 99) }}℃</div>
       <div class="text tem5">{{ getTemPreData(temArr, "5号温度传感器") }}℃</div>
       <div class="text tem6">{{ getTemPreData(temArr, "6号温度传感器") }}℃</div>
       <!-- <div class="text tem7">{{ getTemPreData(temArr, "7号温度传感器") }}℃</div> -->
@@ -283,39 +232,23 @@
       </div>
       <!-- 二通阀门 -->
       <div class="text valve1">
-        {{ getHotMeterTemp(valveOneArr, "开度反馈", 4) }}%
+        {{ getHotMeterTemp(allValveArr, "二通阀输出百分比", 99) }}%
       </div>
       <!-- 可点击区域 -->
-      <div
-        class="text click2"
-        @click="controlValve(valveOneArr, '二通阀门')"
-      ></div>
+      <div class="text click2" @click="controlValve(valveOneArr, '二通阀门')"></div>
       <!-- 三通阀门 -->
-      <img
-        :src="getThreeWaySrc"
-        :class="['text', openPercent < 100 ? 'three-way' : 'three-way-less']"
-        alt=""
-      />
-      <div :class="['text', openPercent < 100 ? 'text18' : 'text11']">
+      <img :src="getThreeWaySrc" :class="['text', openPercent <= 0 ? 'three-way-less' : 'three-way']" alt="" />
+      <div :class="['text', openPercent <= 0  ? 'text11' : 'text18']">
         三通阀
       </div>
       <div class="text valve2">{{ openPercent }}%</div>
-      <div :class="['text', openPercent < 100 ? 'valve3' : 'valve4']">
+      <div :class="['text', openPercent <= 0  ? 'valve4' : 'valve3']">
         {{ 100 - openPercent }}%
       </div>
-      <div
-        :class="['text', openPercent < 100 ? 'click4' : 'click3']"
-        @click="controlValve(valveTwoArr, '三通阀门')"
-      ></div>
+      <div :class="['text', openPercent <= 0  ? 'click3' : 'click4']" @click="controlValve(valveTwoArr, '三通阀门')"></div>
     </div>
     <!-- 控制弹框内容 -->
-    <el-dialog
-      :title="controlTitle"
-      :visible.sync="openHotDialog"
-      width="500px"
-      append-to-body
-      class="monitor-dialog"
-    >
+    <el-dialog :title="controlTitle" :visible.sync="openHotDialog" width="500px" append-to-body class="monitor-dialog">
       <div class="hot-list">
         <div class="hot-data">
           <div class="hot-text">回水温度：</div>
@@ -349,6 +282,44 @@
         </div>
       </div>
     </el-dialog>
+
+    <el-dialog :title="valveTitle" :visible.sync="openValveDialog" width="600px" append-to-body class="monitor-dialog">
+      <div class="hot-list" style="width: 80%;">
+        <div class="hot-data">
+          <div class="hot-text">实际温度差值：</div>
+          <el-input readonly v-model="valveFormData.actualTempDiff" size="small" placeholder="实际温度差值"></el-input>
+        </div>
+        <div class="hot-data">
+          <div class="hot-text">设定温度差值：</div>
+          <el-input v-model="valveFormData.setTempDiff" size="small" placeholder="设定温度差值" clearable
+            @keyup.enter.native="handleEnter('设定温度差值', valveFormData.setTempDiffId, valveFormData.setTempDiff, $event)"
+            @input="handleInput(valveFormData.setTempDiff)" @blur="handleBlur()"></el-input>
+        </div>
+        <div class="hot-data">
+          <div class="hot-text">水阀输出值：</div>
+          <el-input readonly v-model="valveFormData.valveOutput" size="small" placeholder="水阀输出值"></el-input>
+        </div>
+        <div class="hot-data">
+          <div class="hot-text">P值：</div>
+          <el-input v-model="valveFormData.pValue" size="small" placeholder="P值" clearable
+            @keyup.enter.native="handleEnter('P值', valveFormData.pValueId, valveFormData.pValue, $event)"
+            @input="handleInput(valveFormData.pValue)" @blur="handleBlur()"></el-input>
+        </div>
+        <div class="hot-data">
+          <div class="hot-text">I值：</div>
+          <el-input v-model="valveFormData.iValue" size="small" placeholder="I值" clearable
+            @keyup.enter.native="handleEnter('I值', valveFormData.iValueId, valveFormData.iValue, $event)"
+            @input="handleInput(valveFormData.iValue)" @blur="handleBlur()"></el-input>
+        </div>
+        <div class="hot-data">
+          <div class="hot-text">D值：</div>
+          <el-input v-model="valveFormData.dValue" size="small" placeholder="D值" clearable
+            @keyup.enter.native="handleEnter('D值', valveFormData.dValueId, valveFormData.dValue, $event)"
+            @input="handleInput(valveFormData.dValue)" @blur="handleBlur()"></el-input>
+        </div>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -382,10 +353,29 @@ export default {
       hotArrSeven: [], //热量表7数据
       valveOneArr: [], //二通阀门开度
       valveTwoArr: [], //三通阀门开度
+      allValveArr: [], //二、三通阀门弹框数据
 
       openHotDialog: false,
       controlTitle: "热量表",
       hotDialogArr: [],
+
+      openValveDialog: false,
+      valveTitle: "",
+      valveModule: "", // 温度模块名称
+      valveFormData: {
+        actualTempDiff: "", // 实际温度差值
+        actualTempDiffId: "", // 实际温度差值ID
+        setTempDiff: "", // 设定温度差值
+        setTempDiffId: "", // 设定温度差值ID
+        valveOutput: "", // 水阀输出值
+        valveOutputId: "", // 水阀输出值ID
+        pValue: "", // P值
+        pValueId: "", // P值ID
+        iValue: "", // I值
+        iValueId: "", // I值ID
+        dValue: "", // D值
+        dValueId: "", // D值ID
+      },
     };
   },
   computed: {
@@ -413,16 +403,16 @@ export default {
       // return 10;
       // 获取原始值并转成数字
       const originVal = Number(
-        this.getHotMeterTemp(this.valveTwoArr, "开度反馈", 4)
+        this.getHotMeterTemp(this.allValveArr, "三通阀输出百分比", 99)
       );
       // 小于0返回0，大于100返回100，否则返回原值
       return Math.max(0, Math.min(100, originVal));
     },
     getThreeWaySrc() {
       if (this.openPercent <= 0) {
-        return require("../../../assets/images/three-way-less.png");
-      } else if (this.openPercent >= 100) {
         return require("../../../assets/images/three-way-greater.png");
+      } else if (this.openPercent >= 100) {
+        return require("../../../assets/images/three-way-less.png");
       } else {
         return require("../../../assets/images/three-way-between.png");
       }
@@ -550,11 +540,11 @@ export default {
             // 对 values 数组按照 orderNum 进行排序
             const sortedValues = row.values
               ? [...row.values].sort((a, b) => {
-                  // 确保 orderNum 是数字类型进行比较
-                  const orderA = Number(a.orderNum) || 0;
-                  const orderB = Number(b.orderNum) || 0;
-                  return orderA - orderB;
-                })
+                // 确保 orderNum 是数字类型进行比较
+                const orderA = Number(a.orderNum) || 0;
+                const orderB = Number(b.orderNum) || 0;
+                return orderA - orderB;
+              })
               : [];
 
             switch (row.name) {
@@ -577,6 +567,12 @@ export default {
               case "27":
                 this.valveTwoArr = sortedValues;
                 console.log("排序后的三通阀门开度数据", this.valveTwoArr);
+                break;
+              case "28":
+                this.allValveArr = sortedValues;
+                console.log("排序后的二三通阀门开度数据", this.allValveArr);
+                // 获取二通阀、三通阀开度数据  获取T4温度
+
                 break;
               default:
                 break;
@@ -665,47 +661,11 @@ export default {
     // 控制开度
     async controlValve(data, title) {
       try {
-        // 获取当前开阀开度
-        await this.getCurrentValveOpening(data, title);
-
-        // 弹出设置框，并预填当前值
-        this.$prompt(`请输入${title}开度(0-100%)`, "开阀开度设置", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          inputType: "number",
-          inputValue: this.currentOpening, // 预填当前值
-          inputPlaceholder: "请输入0-100之间的数值",
-          inputValidator: (value) => {
-            // 检查是否为空
-            if (value === "" || value === null || value === undefined) {
-              return "请输入开阀开度";
-            }
-
-            // 转换为数字
-            const num = Number(value);
-
-            // 检查是否为有效数字
-            if (isNaN(num)) {
-              return "请输入有效的数字";
-            }
-
-            // 检查范围
-            if (num < 0 || num > 100) {
-              return "开阀开度必须在0-100之间";
-            }
-
-            // 验证通过
-            return true;
-          },
-          inputErrorMessage: "请输入有效的开阀开度",
-        })
-          .then(({ value }) => {
-            // 这里可以调用实际的控制函数
-            this.setValveOpening(data, value);
-          })
-          .catch(() => {
-            // 取消操作
-          });
+        this.valveTitle = title;
+        this.valveModule = title === "二通阀门" ? "温度模块1" : "温度模块2";
+        // 根据 allValveArr 获取数据并填充表单
+        this.fillValveFormData();
+        this.openValveDialog = true;
       } catch (error) {
         console.error("获取当前开度失败:", error);
         this.$message.error("获取当前开度失败，请重试");
@@ -713,72 +673,139 @@ export default {
         // this.loading = false;
       }
     },
+    // 填充阀门控制表单数据
+    fillValveFormData() {
+      this.valveFormData = {
+        actualTempDiff: "",
+        actualTempDiffId: "",
+        setTempDiff: "",
+        setTempDiffId: "",
+        valveOutput: "",
+        valveOutputId: "",
+        pValue: "",
+        pValueId: "",
+        iValue: "",
+        iValueId: "",
+        dValue: "",
+        dValueId: "",
+      };
 
-    // 获取当前开阀开度的函数
-    async getCurrentValveOpening(data, title) {
-      return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          // 在data数组中查找deviceName等于title的对象
-          const device = data.find(
-            (item) =>
-              item.deviceName === title && item.collectName.includes("开度设置")
-          );
-          console.log("当前的对象", device);
-          if (device) {
-            // 找到设备，获取当前开度
-            this.currentOpening = device.collectValue;
-            console.log(`获取到${title}的当前开度:`, this.currentOpening);
-            resolve(this.currentOpening);
-          } else {
-            // 未找到设备
-            const errorMsg = `未找到设备: ${title}`;
-            console.error(errorMsg);
-            reject(new Error(errorMsg));
-          }
-        }, 500);
-      });
-    },
+      // 实际温度差值：collectName 包含温度模块名和"输入值"的 collectValue
+      const actualItem = this.allValveArr.find(
+        item => item.collectName.includes(this.valveModule) && item.collectName.includes("输入值")
+      );
+      if (actualItem) {
+        this.valveFormData.actualTempDiff = actualItem.collectValue;
+        this.valveFormData.actualTempDiffId = actualItem.id;
+      }
 
-    // 实际设置开阀开度的函数
-    async setValveOpening(data, value) {
-      try {
-        console.log("正在设置开阀开度为:", value);
-        let id = "";
-        // 在data数组中查找deviceName等于title的对象
-        const device = data.find((item) =>
-          item.collectName.includes("开度设置")
-        );
-        console.log("当前的对象", device);
-        if (device) {
-          id = device.id;
-        } else {
-          id = "";
+      // 设定温度差值：collectName 包含温度模块名和"控制值"的 collectValue
+      const setItem = this.allValveArr.find(
+        item => item.collectName.includes(this.valveModule) && item.collectName.includes("控制值")
+      );
+      if (setItem) {
+        this.valveFormData.setTempDiff = setItem.collectValue;
+        this.valveFormData.setTempDiffId = setItem.id;
+      }
+
+      // 水阀输出值：collectName 包含"二通阀输出百分比"的 collectValue
+      const outputItem = this.allValveArr.find(
+        item => item.collectName.includes("二通阀输出百分比")
+      );
+      if (outputItem) {
+        this.valveFormData.valveOutput = outputItem.collectValue;
+        this.valveFormData.valveOutputId = outputItem.id;
+      }
+
+      // P值：collectName 包含温度模块名和"P"的 collectValue  显示除10，控制乘10
+      const pItem = this.allValveArr.find(
+        item => item.collectName.includes(this.valveModule) && item.collectName.includes("P")
+      );
+      if (pItem) {
+        this.valveFormData.pValue = (pItem.collectValue / 10).toFixed(1);
+        this.valveFormData.pValueId = pItem.id;
+      }
+
+      // I值：collectName 包含温度模块名和"I"的 collectValue
+      const iItem = this.allValveArr.find(
+        item => item.collectName.includes(this.valveModule) && item.collectName.includes("I")
+      );
+      if (iItem) {
+        this.valveFormData.iValue = iItem.collectValue;
+        this.valveFormData.iValueId = iItem.id;
+      }
+
+      // D值：collectName 包含温度模块名和"D"的 collectValue
+      const dItem = this.allValveArr.find(
+        item => item.collectName.includes(this.valveModule) && item.collectName.includes("D")
+      );
+      if (dItem) {
+        this.valveFormData.dValue = dItem.collectValue;
+        this.valveFormData.dValueId = dItem.id;
+      }
+
+      console.log("填充的表单数据:", this.valveFormData);
+    },
+    // 处理输入事件，过滤非数字字符
+    handleInput(item) {
+      console.log("校验");
+      // 实时校验并过滤非数字字符
+      item = String(item).replace(/[^\d]/g, "");
+    },
+    // 失去焦点
+    handleBlur() {
+    },
+    handleEnter(name, id, value, event) {
+      if(!value){
+        this.$modal.msgWarning("请输入当前值!");
+        return
+      }
+      // 失去焦点
+      event.target.blur();
+      this.$confirm(
+        `确定要修改${name}为:${value} 吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
         }
-        // 准备请求参数
-        const params = {
-          id: id,
-          param: value,
-        };
-        console.log("params", params);
-        // 调用operationConrol接口
-        const result = await operationConrol([params]);
-        if (result.code == 200) {
-          this.$modal.msgSuccess("指令下发成功!");
-          // 开启 loading 效果
-          this.loading = true;
-          setTimeout(() => {
-            this.getMonitorList();
-            this.getMonitorTotalData();
+      )
+        .then(async () => {
+          // 准备请求参数
+          // 如果name为P值，传给后端的value需要乘10
+          const paramValue = name === "P值" ? value * 10 : value;
+          const params = {
+            id: id,
+            param: paramValue,
+          };
+          console.log("params", params);
+          // 调用operationConrol接口
+          try {
+            this.loading = true;
+            const result = await operationConrol([params]);
+            if (result.code == 200) {
+              this.$modal.msgSuccess("指令下发成功!");
+              setTimeout(() => {
+                this.getMonitorList();
+                this.getMonitorTotalData();
+                this.loading = false;
+              }, 3000);
+            } else {
+              this.$modal.msgError("指令下发失败!");
+              this.loading = false;
+            }
+          } catch (error) {
+            console.error("指令下发失败:", error);
+            this.$modal.msgError("指令下发失败，请重试!");
             this.loading = false;
-          }, 2000);
-        }
-        // 更新当前开度值
-        this.currentOpening = Number(value);
-        console.log("设置成功，当前开度更新为:", this.currentOpening);
-      } catch (error) {
-        console.error("设置开阀开度失败:", error);
-        // this.$message.error("设置开阀开度失败，请重试");
-      }
+          }
+        })
+        .catch(() => {
+          // 用户取消操作，需要更新原来的频率
+          // this.$emit("upList");
+          this.loading = false;
+        });
     },
     // 积累热量数据
     getMonitorTotalData() {
@@ -942,6 +969,7 @@ export default {
       top: 0.5rem;
       left: 1.1rem;
     }
+
     .hot-details {
       width: 4.6rem;
       padding: 0.1rem;
@@ -954,6 +982,7 @@ export default {
       right: 0.8rem;
       display: flex;
       flex-direction: column;
+
       .hot-title {
         font-size: 0.18rem;
         color: #ffffff;
@@ -961,6 +990,7 @@ export default {
         padding: 0.05rem 0 0 0.5rem;
         margin-bottom: 0.4rem;
       }
+
       .hot-li {
         width: 100%;
         display: flex;
@@ -973,12 +1003,14 @@ export default {
         margin-bottom: 0.3rem;
         text-align: center;
         letter-spacing: 0.1em;
+
         .hot-icon {
           width: 1rem;
           height: 1rem;
           position: absolute;
           left: 0.2rem;
         }
+
         .hot-data {
           color: #ffffff;
           font-weight: bold;
@@ -986,6 +1018,7 @@ export default {
         }
       }
     }
+
     .text {
       font-size: 0.18rem;
       color: #ffffff;
@@ -997,73 +1030,90 @@ export default {
       top: 1.2rem;
       left: 2.5rem;
     }
+
     .text2 {
       top: 1.5rem;
       left: 2.5rem;
     }
+
     .text3 {
       top: 2.6rem;
       left: 2.5rem;
     }
+
     .text4 {
       top: 2.9rem;
       left: 2.5rem;
     }
+
     .text5 {
       top: 4.3rem;
       left: 0.5rem;
     }
+
     .text6 {
       top: 2.55rem;
       left: 4.4rem;
     }
+
     .text7 {
       top: 3.35rem;
       left: 7.9rem;
     }
+
     .text8 {
       top: 5.02rem;
       left: 7.9rem;
     }
+
     .text9 {
       top: 6.7rem;
       left: 2rem;
     }
+
     .text10 {
       top: 5.45rem;
       left: 4.1rem;
       font-size: 0.14rem;
     }
+
     .text11 {
       top: 5.59rem;
       left: 11.5rem;
       font-size: 0.14rem;
     }
+
     .text18 {
       top: 5.1rem;
       left: 11.5rem;
       font-size: 0.14rem;
     }
+
     .text12 {
       top: 7.7rem;
       left: 6.4rem;
     }
+
     .text13 {
       top: 7.7rem;
       left: 8.6rem;
     }
+
     .text14 {
       top: 7.27rem;
       left: 11.65rem;
     }
+
     .text15 {
       top: 7.57rem;
       left: 14.1rem;
     }
+
     .text16 {
       top: 7.27rem;
       left: 16.3rem;
     }
+
     .text17 {
       top: 5.05rem;
       left: 14.1rem;
@@ -1074,191 +1124,229 @@ export default {
       left: 8.1rem;
       color: #eaf12a;
     }
+
     .pres1 {
       top: 2.35rem;
       left: 9.6rem;
       color: #eaf12a;
     }
+
     .pres2 {
       top: 4rem;
       left: 9.6rem;
       color: #eaf12a;
     }
+
     .pres3 {
       top: 5rem;
       left: 10.5rem;
       color: #eaf12a;
     }
+
     .pres4 {
       top: 5.1rem;
       left: 12.5rem;
       color: #eaf12a;
     }
+
     .pres5 {
       top: 2.9rem;
       left: 12.5rem;
       color: #eaf12a;
     }
+
     .pres6 {
       top: 2.35rem;
       left: 6.8rem;
       color: #eaf12a;
     }
+
     .pres7 {
       top: 3.9rem;
       left: 6.8rem;
       color: #eaf12a;
     }
+
     .pres8 {
       top: 7.5rem;
       left: 2.6rem;
       color: #eaf12a;
     }
+
     .pres9 {
       top: 7.5rem;
       left: 1.2rem;
       color: #eaf12a;
     }
+
     .pres10 {
       top: 4.92rem;
       left: 2.8rem;
       color: #eaf12a;
     }
+
     .pres11 {
       top: 4.9rem;
       left: 1.15rem;
       color: #eaf12a;
     }
+
     .pres12 {
       top: 8rem;
       left: 12.75rem;
       color: #eaf12a;
     }
+
     .tem1 {
       top: 2.33rem;
       left: 10.4rem;
       color: #ef4317;
     }
+
     .tem2 {
       top: 3.97rem;
       left: 10.4rem;
       color: #ef4317;
     }
+
     .tem3 {
       top: 5.27rem;
       left: 10.5rem;
       color: #ef4317;
     }
+
     .tem4 {
       top: 5.5rem;
       left: 12.5rem;
       color: #16cb64;
     }
+
     .tem5 {
       top: 7.49rem;
       left: 3.4rem;
       color: #ef4317;
     }
+
     .tem6 {
       top: 8.78rem;
       left: 13.25rem;
       color: #16cb64;
     }
+
     .tem7 {
       top: 7.98rem;
       left: 13.55rem;
       color: #ef4317;
     }
+
     .intem1 {
       top: 0.25rem;
       left: 7.2rem;
       color: #ef4317;
     }
+
     .outtem1 {
       top: 1.55rem;
       left: 7.2rem;
       color: #16cb64;
     }
+
     .nowhot1 {
       top: 1rem;
       left: 7.2rem;
       color: #ffffff;
     }
+
     .intem2 {
       top: 2.35rem;
       left: 6rem;
       color: #ef4317;
     }
+
     .outtem2 {
       top: 3.25rem;
       left: 6rem;
       color: #16cb64;
     }
+
     .nowhot2 {
       top: 2.85rem;
       left: 6rem;
       color: #ffffff;
     }
+
     .intem3 {
       top: 3.9rem;
       left: 6rem;
       color: #ef4317;
     }
+
     .outtem3 {
       top: 4.7rem;
       left: 6rem;
       color: #16cb64;
     }
+
     .nowhot3 {
       top: 4.3rem;
       left: 6rem;
       color: #ffffff;
     }
+
     .intem4 {
       top: 5.3rem;
       left: 1.2rem;
       color: #ef4317;
     }
+
     .outtem4 {
       top: 5.3rem;
       left: 3rem;
       color: #16cb64;
     }
+
     .nowhot4 {
       top: 5.33rem;
       left: 2.05rem;
       color: #ffffff;
     }
+
     .intem5 {
       top: 7.7rem;
       left: 11.1rem;
       color: #ef4317;
     }
+
     .outtem5 {
       top: 7.7rem;
       left: 12.75rem;
       color: #16cb64;
     }
+
     .nowhot5 {
       top: 7.7rem;
       left: 11.9rem;
       color: #ffffff;
     }
+
     .intem6 {
       top: 8.8rem;
       left: 10.5rem;
       color: #ef4317;
     }
+
     .outtem6 {
       top: 8rem;
       left: 10.5rem;
       color: #16cb64;
     }
+
     .nowhot6 {
       top: 8.4rem;
       left: 10.5rem;
       color: #ffffff;
     }
+
     .intem7 {
       top: 6rem;
       left: 13.4rem;
@@ -1270,47 +1358,55 @@ export default {
       left: 15.1rem;
       color: #16cb64;
     }
+
     .nowhot7 {
       top: 6rem;
       left: 14.15rem;
       color: #ffffff;
     }
+
     .valve1 {
       top: 5.37rem;
       left: 4.9rem;
       color: #ffffff;
       cursor: pointer;
     }
+
     .valve2 {
       top: 5.55rem;
       left: 10.5rem;
       color: #ffffff;
       cursor: pointer;
     }
+
     .valve3 {
       top: 4.55rem;
       left: 12.2rem;
       color: #ffffff;
       cursor: pointer;
     }
+
     .valve4 {
       top: 4.55rem;
       left: 11.9rem;
       color: #ffffff;
       cursor: pointer;
     }
+
     .three-way {
       top: 4.4rem;
       left: 9.2rem;
       width: 4.38rem;
       height: 1.78rem;
     }
+
     .three-way-less {
       top: 4.7rem;
       left: 9.2rem;
       width: 4.39rem;
       height: 1.47rem;
     }
+
     .click2 {
       width: 0.8rem;
       height: 0.8rem;
@@ -1320,6 +1416,7 @@ export default {
       cursor: pointer;
       z-index: 999;
     }
+
     .click3 {
       width: 0.8rem;
       height: 0.8rem;
@@ -1329,6 +1426,7 @@ export default {
       cursor: pointer;
       z-index: 999;
     }
+
     .click4 {
       width: 0.8rem;
       height: 0.8rem;
@@ -1338,106 +1436,127 @@ export default {
       cursor: pointer;
       z-index: 999;
     }
+
     .p0 {
       top: 1.35rem;
       left: 8.3rem;
       color: #ffffff;
     }
+
     .p1 {
       top: 2.15rem;
       left: 9.75rem;
       color: #ffffff;
     }
+
     .p2 {
       top: 3.75rem;
       left: 9.75rem;
       color: #ffffff;
     }
+
     .p3 {
       top: 5rem;
       left: 10.15rem;
       color: #ffffff;
     }
+
     .p4 {
       top: 5.12rem;
       left: 13.25rem;
       color: #ffffff;
     }
+
     .p5 {
       top: 2.67rem;
       left: 12.7rem;
       color: #ffffff;
     }
+
     .p6 {
       top: 2.15rem;
       left: 6.9rem;
       color: #ffffff;
     }
+
     .p7 {
       top: 3.68rem;
       left: 6.9rem;
       color: #ffffff;
     }
+
     .p8 {
       top: 7.72rem;
       left: 2.8rem;
       color: #ffffff;
     }
+
     .p9 {
       top: 7.72rem;
       left: 1.3rem;
       color: #ffffff;
     }
+
     .p10 {
       top: 4.93rem;
       left: 3.55rem;
       color: #ffffff;
     }
+
     .p11 {
       top: 4.9rem;
       left: 0.7rem;
       color: #ffffff;
     }
+
     .p12 {
       top: 8.34rem;
       left: 12.9rem;
       color: #ffffff;
     }
+
     .t1 {
       top: 2.15rem;
       left: 10.45rem;
       color: #ffffff;
     }
+
     .t2 {
       top: 3.75rem;
       left: 10.45rem;
       color: #ffffff;
     }
+
     .t3 {
       top: 5.3rem;
       left: 10.15rem;
       color: #ffffff;
     }
+
     .t4 {
       top: 5.53rem;
       left: 13.25rem;
       color: #ffffff;
     }
+
     .t5 {
       top: 7.72rem;
       left: 3.55rem;
       color: #ffffff;
     }
+
     .t6 {
       top: 8.82rem;
       left: 12.9rem;
       color: #ffffff;
     }
+
     .t7 {
       top: 8.34rem;
       left: 13.7rem;
       color: #ffffff;
     }
+
     .h1 {
       top: 1rem;
       left: 6.2rem;
@@ -1447,6 +1566,7 @@ export default {
       border: 0.01rem dashed #646866;
       cursor: pointer;
     }
+
     .h2 {
       top: 3.15rem;
       left: 5.1rem;
@@ -1456,6 +1576,7 @@ export default {
       border: 0.01rem dashed #646866;
       cursor: pointer;
     }
+
     .h3 {
       top: 4.25rem;
       left: 5.1rem;
@@ -1465,6 +1586,7 @@ export default {
       border: 0.01rem dashed #646866;
       cursor: pointer;
     }
+
     .h4 {
       top: 5rem;
       left: 2rem;
@@ -1474,6 +1596,7 @@ export default {
       border: 0.01rem dashed #646866;
       cursor: pointer;
     }
+
     .h5 {
       top: 7.9rem;
       left: 11.82rem;
@@ -1483,6 +1606,7 @@ export default {
       border: 0.01rem dashed #646866;
       cursor: pointer;
     }
+
     .h6 {
       top: 8.35rem;
       left: 9.55rem;
@@ -1492,6 +1616,7 @@ export default {
       border: 0.01rem dashed #646866;
       cursor: pointer;
     }
+
     .h7 {
       top: 5.5rem;
       left: 14.15rem;
@@ -1503,20 +1628,25 @@ export default {
     }
   }
 }
+
 .hot-list {
   display: flex;
   flex-direction: column;
   margin-left: 50px;
+
   .hot-data {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-bottom: 10px;
+
     .hot-text {
       // text-align: center;
       margin-right: 8px;
-      width: 100px;
+      min-width: 100px;
+      white-space: nowrap;
     }
+
     .hot-details {
       background-color: #1960a3;
       border-radius: 10px;