From 783ae45994602ac40258d2fcba7329bbfd53b8c6 Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Tue, 17 Mar 2026 09:29:52 +0800
Subject: [PATCH] =?UTF-8?q?1.=E7=94=9F=E6=B4=BB=E5=86=B7=E6=B0=B4=E5=AE=9E?=
 =?UTF-8?q?=E6=97=B6=E7=9B=91=E6=8E=A7=E6=8A=8A=E6=B0=B4=E7=AE=B1=E3=80=81?=
 =?UTF-8?q?=E6=B0=B4=E6=B3=B5=E6=94=BE=E5=9C=A8=E4=B8=80=E8=B5=B7=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../waterMonitor/waterMonitorDetails.vue      | 619 +++++++-----------
 1 file changed, 234 insertions(+), 385 deletions(-)

diff --git a/src/views/hotWater/waterMonitor/waterMonitorDetails.vue b/src/views/hotWater/waterMonitor/waterMonitorDetails.vue
index 8ebc927..1362486 100644
--- a/src/views/hotWater/waterMonitor/waterMonitorDetails.vue
+++ b/src/views/hotWater/waterMonitor/waterMonitorDetails.vue
@@ -1,67 +1,27 @@
 <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=""
-        @click="goSys"
-      />
-      <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="" @click="goSys" />
+      <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="app-container">
       <div class="left-tree">
         <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
         <div style="height: 5rem; overflow-y: auto">
-          <el-tree
-            ref="tree"
-            :data="treeData"
-            node-key="id"
-            :default-expand-all="false"
-            :default-expanded-keys="expandedKeys"
-            :auto-expand-parent="true"
-            icon-class="none"
-            @node-expand="handleNodeExpand"
-            @node-collapse="handleNodeCollapse"
-            :highlight-current="true"
-            @node-click="handleNodeClick"
-          >
+          <el-tree ref="tree" :data="treeData" node-key="id" :default-expand-all="false"
+            :default-expanded-keys="expandedKeys" :auto-expand-parent="true" icon-class="none"
+            @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :highlight-current="true"
+            @node-click="handleNodeClick">
             <template #default="{ node }">
               <span class="custom-tree-node">
                 <!-- 根据节点状态动态设置图标类名 -->
@@ -76,24 +36,15 @@
         <div class="base-mes" v-if="isShowHotWater">
           <div class="base-title">公共信息</div>
           <div class="base-height">
-            <div
-              class="base-li"
-              v-for="(item, index) in baseTable"
-              :key="index"
-            >
-              {{ item.name }}:<span class="deepColor">{{ item.value }}</span
-              >{{ item.unit }}
+            <div class="base-li" v-for="(item, index) in baseTable" :key="index">
+              {{ item.name }}:<span class="deepColor">{{ item.value }}</span>{{ item.unit }}
             </div>
           </div>
         </div>
       </div>
       <div class="right-monitor">
         <div class="buildingDiv">
-          <img
-            class="title-bg"
-            src="../../../assets/images/title-bg.png"
-            alt=""
-          />
+          <img class="title-bg" src="../../../assets/images/title-bg.png" alt="" />
           <div class="title-word">楼层：{{ currentName }}</div>
         </div>
         <!-- 四个泵 -->
@@ -117,114 +68,40 @@
               <!-- <div class="flow-text text7">循环加热泵</div> -->
               <div class="flow-text text8">补水阀</div>
               <!-- 补水阀定位 -->
-              <img
-                class="replenish"
-                v-if="this.useWaterState === '1'"
-                src="../../../assets/flowimg/replenish-move.gif"
-                alt=""
-              />
-              <img
-                class="replenish"
-                v-else
-                src="../../../assets/flowimg/replenish-nomove.png"
-                alt=""
-              />
+              <img class="replenish" v-if="this.useWaterState === '1'" src="../../../assets/flowimg/replenish-move.gif"
+                alt="" />
+              <img class="replenish" v-else src="../../../assets/flowimg/replenish-nomove.png" alt="" />
               <!-- 供水定位 -->
-              <img
-                class="supply"
-                v-if="
-                  this.upWaterState1 === '1' ||
-                  this.upWaterState2 === '1' ||
-                  this.upWaterState3 === '1' ||
-                  this.upWaterState4 === '1'
-                "
-                src="../../../assets/flowimg/supply-move.gif"
-                alt=""
-              />
-              <img
-                class="supply"
-                v-else
-                src="../../../assets/flowimg/supply-nomove.png"
-                alt=""
-              />
+              <img class="supply" v-if="
+                this.upWaterState1 === '1' ||
+                this.upWaterState2 === '1' ||
+                this.upWaterState3 === '1' ||
+                this.upWaterState4 === '1'
+              " src="../../../assets/flowimg/supply-move.gif" alt="" />
+              <img class="supply" v-else src="../../../assets/flowimg/supply-nomove.png" alt="" />
               <!-- 加热定位 -->
-              <img
-                class="circulate"
-                v-if="this.hotPumState === '1' && this.isBad !== '1'"
-                src="../../../assets/flowimg/circulate-move.gif"
-                alt=""
-              />
-              <img
-                class="circulate"
-                v-else
-                src="../../../assets/flowimg/circulate-nomove.png"
-                alt=""
-              />
+              <img class="circulate" v-if="this.hotPumState === '1' && this.isBad !== '1'"
+                src="../../../assets/flowimg/circulate-move.gif" alt="" />
+              <img class="circulate" v-else src="../../../assets/flowimg/circulate-nomove.png" alt="" />
               <!-- 供水泵1定位 -->
-              <img
-                class="coolpum"
-                v-if="this.upWaterState1 === '1'"
-                src="../../../assets/flowimg/startpum.png"
-                alt=""
-              />
-              <img
-                class="coolpum"
-                v-else
-                src="../../../assets/flowimg/closepum.png"
-                alt=""
-              />
+              <img class="coolpum" v-if="this.upWaterState1 === '1'" src="../../../assets/flowimg/startpum.png"
+                alt="" />
+              <img class="coolpum" v-else src="../../../assets/flowimg/closepum.png" alt="" />
               <!-- 供水泵2定位 -->
-              <img
-                class="waterpum"
-                v-if="this.upWaterState2 === '1'"
-                src="../../../assets/flowimg/startpum.png"
-                alt=""
-              />
-              <img
-                class="waterpum"
-                v-else
-                src="../../../assets/flowimg/closepum.png"
-                alt=""
-              />
+              <img class="waterpum" v-if="this.upWaterState2 === '1'" src="../../../assets/flowimg/startpum.png"
+                alt="" />
+              <img class="waterpum" v-else src="../../../assets/flowimg/closepum.png" alt="" />
               <!-- 供水泵3定位 -->
-              <img
-                class="waterpum2"
-                v-if="this.upWaterState3 === '1'"
-                src="../../../assets/flowimg/startpum.png"
-                alt=""
-              />
-              <img
-                class="waterpum2"
-                v-else
-                src="../../../assets/flowimg/closepum.png"
-                alt=""
-              />
+              <img class="waterpum2" v-if="this.upWaterState3 === '1'" src="../../../assets/flowimg/startpum.png"
+                alt="" />
+              <img class="waterpum2" v-else src="../../../assets/flowimg/closepum.png" alt="" />
               <!-- 供水泵4定位 -->
-              <img
-                class="waterpum3"
-                v-if="this.upWaterState4 === '1'"
-                src="../../../assets/flowimg/startpum.png"
-                alt=""
-              />
-              <img
-                class="waterpum3"
-                v-else
-                src="../../../assets/flowimg/closepum.png"
-                alt=""
-              />
+              <img class="waterpum3" v-if="this.upWaterState4 === '1'" src="../../../assets/flowimg/startpum.png"
+                alt="" />
+              <img class="waterpum3" v-else src="../../../assets/flowimg/closepum.png" alt="" />
               <!-- 补水定位 -->
-              <img
-                class="buwaterpum2"
-                v-if="backWaterState === '1'"
-                src="../../../assets/flowimg/bu-move.gif"
-                alt=""
-              />
-              <img
-                class="buwaterpum"
-                v-else
-                src="../../../assets/flowimg/bu-nomove.png"
-                alt=""
-              />
+              <img class="buwaterpum2" v-if="backWaterState === '1'" src="../../../assets/flowimg/bu-move.gif" alt="" />
+              <img class="buwaterpum" v-else src="../../../assets/flowimg/bu-nomove.png" alt="" />
               <!-- 循环加热泵定位-->
               <!-- <img
                 class="cirpum"
@@ -240,51 +117,25 @@
               /> -->
               <!-- 热泵定位 -->
               <div :class="getHotPumPositionClass">
-                <div
-                  class="hotPump-li"
-                  v-for="(item, index) in tableData"
-                  :key="index"
-                >
+                <div class="hotPump-li" v-for="(item, index) in tableData" :key="index">
                   <template v-if="tableData.length === 2">
                     <template v-if="index === 0">
                       <div class="hotPump-name">{{ item.pumpName }}</div>
-                      <img
-                        class="hotPump-img"
-                        :src="getImageSrc(item)"
-                        alt=""
-                      />
+                      <img class="hotPump-img" :src="getImageSrc(item)" alt="" />
                       <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
                       -->
-                      <img
-                        class="tem2"
-                        src="../../../assets/flowimg/thermometer.png"
-                        alt=""
-                      />
+                      <img class="tem2" src="../../../assets/flowimg/thermometer.png" alt="" />
                       <div class="temContainer2">
-                        <div
-                          class="temprogress"
-                          :style="{ height: item.waterTemp + '%' }"
-                        ></div>
+                        <div class="temprogress" :style="{ height: item.waterTemp + '%' }"></div>
                       </div>
                       <b class="temdiv2">{{ item.waterTemp }}℃</b>
                     </template>
                     <template v-else>
-                      <img
-                        class="hotPump-img"
-                        :src="getImageSrc(item)"
-                        alt=""
-                      />
+                      <img class="hotPump-img" :src="getImageSrc(item)" alt="" />
                       <div class="hotPump-name">{{ item.pumpName }}</div>
-                      <img
-                        class="tem2"
-                        src="../../../assets/flowimg/thermometer.png"
-                        alt=""
-                      />
+                      <img class="tem2" src="../../../assets/flowimg/thermometer.png" alt="" />
                       <div class="temContainer2">
-                        <div
-                          class="temprogress"
-                          :style="{ height: item.waterTemp + '%' }"
-                        ></div>
+                        <div class="temprogress" :style="{ height: item.waterTemp + '%' }"></div>
                       </div>
                       <b class="temdiv2">{{ item.waterTemp }}℃</b>
                     </template>
@@ -293,87 +144,43 @@
                     <template v-if="index < 2">
                       <template v-if="index === 0">
                         <div class="hotPump-name">{{ item.pumpName }}</div>
-                        <img
-                          class="hotPump-img"
-                          :src="getImageSrc(item)"
-                          alt=""
-                        />
+                        <img class="hotPump-img" :src="getImageSrc(item)" alt="" />
                         <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
                       -->
-                        <img
-                          class="tem2"
-                          src="../../../assets/flowimg/thermometer.png"
-                          alt=""
-                        />
+                        <img class="tem2" src="../../../assets/flowimg/thermometer.png" alt="" />
                         <div class="temContainer2">
-                          <div
-                            class="temprogress"
-                            :style="{ height: item.waterTemp + '%' }"
-                          ></div>
+                          <div class="temprogress" :style="{ height: item.waterTemp + '%' }"></div>
                         </div>
                         <b class="temdiv2">{{ item.waterTemp }}℃</b>
                       </template>
                       <template v-else>
                         <div class="hotPump-name">{{ item.pumpName }}</div>
-                        <img
-                          class="hotPump-img"
-                          :src="getImageSrc(item)"
-                          alt=""
-                        />
-                        <img
-                          class="tem1"
-                          src="../../../assets/flowimg/thermometer.png"
-                          alt=""
-                        />
+                        <img class="hotPump-img" :src="getImageSrc(item)" alt="" />
+                        <img class="tem1" src="../../../assets/flowimg/thermometer.png" alt="" />
                         <div class="temContainer1">
-                          <div
-                            class="temprogress"
-                            :style="{ height: item.waterTemp + '%' }"
-                          ></div>
+                          <div class="temprogress" :style="{ height: item.waterTemp + '%' }"></div>
                         </div>
                         <b class="temdiv1">{{ item.waterTemp }}℃</b>
                       </template>
                     </template>
                     <template v-else>
                       <template v-if="index === 2">
-                        <img
-                          class="hotPump-img"
-                          :src="getImageSrc(item)"
-                          alt=""
-                        />
+                        <img class="hotPump-img" :src="getImageSrc(item)" alt="" />
                         <div class="hotPump-name">{{ item.pumpName }}</div>
                         <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
                       -->
-                        <img
-                          class="tem2"
-                          src="../../../assets/flowimg/thermometer.png"
-                          alt=""
-                        />
+                        <img class="tem2" src="../../../assets/flowimg/thermometer.png" alt="" />
                         <div class="temContainer2">
-                          <div
-                            class="temprogress"
-                            :style="{ height: item.waterTemp + '%' }"
-                          ></div>
+                          <div class="temprogress" :style="{ height: item.waterTemp + '%' }"></div>
                         </div>
                         <b class="temdiv2">{{ item.waterTemp }}℃</b>
                       </template>
                       <template v-else>
-                        <img
-                          class="hotPump-img"
-                          :src="getImageSrc(item)"
-                          alt=""
-                        />
+                        <img class="hotPump-img" :src="getImageSrc(item)" alt="" />
                         <div class="hotPump-name">{{ item.pumpName }}</div>
-                        <img
-                          class="tem1"
-                          src="../../../assets/flowimg/thermometer.png"
-                          alt=""
-                        />
+                        <img class="tem1" src="../../../assets/flowimg/thermometer.png" alt="" />
                         <div class="temContainer1">
-                          <div
-                            class="temprogress"
-                            :style="{ height: item.waterTemp + '%' }"
-                          ></div>
+                          <div class="temprogress" :style="{ height: item.waterTemp + '%' }"></div>
                         </div>
                         <b class="temdiv1">{{ item.waterTemp }}℃</b>
                       </template>
@@ -403,21 +210,12 @@
               alt=""
             /> -->
               <!-- 无线网关定位 无状态。-->
-              <img
-                class="web"
-                :src="
-                  webstate == 0
-                    ? require('../../../assets/flowimg/badweb.png')
-                    : require('../../../assets/flowimg/onlineweb.png')
-                "
-                alt=""
-              />
+              <img class="web" :src="webstate == 0
+                ? require('../../../assets/flowimg/badweb.png')
+                : require('../../../assets/flowimg/onlineweb.png')
+                " alt="" />
               <!-- 保温水箱定位 -->
-              <img
-                class="waterBox"
-                src="../../../assets/flowimg/waterBox.png"
-                alt=""
-              />
+              <img class="waterBox" src="../../../assets/flowimg/waterBox.png" alt="" />
               <!-- 温度定位1 -->
               <!-- <img
               class="tem1"
@@ -440,33 +238,21 @@
             <b class="temdiv2">{{ temdata }}℃</b> -->
               <!-- 水位定位1 -->
               <div class="progressContainer1" v-if="progress1 > 50">
-                <div
-                  class="progress"
-                  :style="{ height: progress1 + '%' }"
-                ></div>
+                <div class="progress" :style="{ height: progress1 + '%' }"></div>
                 <b class="propo">{{ progress1 }}%</b>
               </div>
               <div class="progressContainer2" v-else>
-                <div
-                  class="progress"
-                  :style="{ height: progress1 + '%' }"
-                ></div>
+                <div class="progress" :style="{ height: progress1 + '%' }"></div>
                 <b class="propo">{{ progress1 }}%</b>
               </div>
               <div class="progressName1">{{ progressName1 }}</div>
               <!-- 水位定位2 -->
               <div class="progressContainer3" v-if="progress2 > 50">
-                <div
-                  class="progress"
-                  :style="{ height: progress2 + '%' }"
-                ></div>
+                <div class="progress" :style="{ height: progress2 + '%' }"></div>
                 <b class="propo">{{ progress2 }}%</b>
               </div>
               <div class="progressContainer4" v-else>
-                <div
-                  class="progress"
-                  :style="{ height: progress2 + '%' }"
-                ></div>
+                <div class="progress" :style="{ height: progress2 + '%' }"></div>
                 <b class="propo">{{ progress2 }}%</b>
               </div>
               <div class="progressName2">{{ progressName2 }}</div>
@@ -474,17 +260,9 @@
           </div>
           <div class="changecontent">
             <div class="tablemaeta">系统状态显示</div>
-            <el-table
-              class="maintable"
-              ref="maintable"
-              :data="tableData"
-              height="200"
-              highlight-current-row
-              @row-click="handlerow"
-              :cell-style="tableRowStyle"
-              :show-overflow-tooltip="true"
-              :header-cell-style="{ 'text-align': 'center' }"
-            >
+            <el-table class="maintable" ref="maintable" :data="tableData" height="200" highlight-current-row
+              @row-click="handlerow" :cell-style="tableRowStyle" :show-overflow-tooltip="true"
+              :header-cell-style="{ 'text-align': 'center' }">
               <el-table-column label="序号" min-width="50">
                 <template slot-scope="scope">
                   {{ scope.$index + 1 }}
@@ -494,58 +272,34 @@
               </el-table-column>
               <el-table-column prop="pumpName" label="热泵名称">
               </el-table-column>
-              <el-table-column
-                prop="tempSet"
-                label="设置温度(℃)"
-                min-width="100"
-              >
+              <el-table-column prop="tempSet" label="设置温度(℃)" min-width="100">
                 <template slot-scope="{ row }">
                   <span>{{ row.tempSet }} </span>
                 </template>
               </el-table-column>
-              <el-table-column
-                prop="waterTemp"
-                label="实际温度(℃)"
-                min-width="100"
-              >
+              <el-table-column prop="waterTemp" label="实际温度(℃)" min-width="100">
                 <template slot-scope="{ row }">
                   <span>{{ row.waterTemp }} </span>
                 </template>
               </el-table-column>
               <!-- 裙楼、高区 -->
-              <el-table-column
-                prop="levelSet1"
-                label="设置水位1(%)"
-                min-width="100"
-              >
+              <el-table-column prop="levelSet1" label="设置水位1(%)" min-width="100">
                 <template slot-scope="{ row }">
                   <span>{{ row.levelSet1 }}</span>
                 </template>
               </el-table-column>
-              <el-table-column
-                prop="waterLevel1"
-                label="实际水位1(%)"
-                min-width="100"
-              >
+              <el-table-column prop="waterLevel1" label="实际水位1(%)" min-width="100">
                 <template slot-scope="{ row }">
                   <span>{{ row.waterLevel1 }} </span>
                 </template>
               </el-table-column>
               <!-- 中厨、中区 -->
-              <el-table-column
-                prop="levelSet2"
-                label="设置水位2(%)"
-                min-width="100"
-              >
+              <el-table-column prop="levelSet2" label="设置水位2(%)" min-width="100">
                 <template slot-scope="{ row }">
                   <span>{{ row.levelSet2 }}</span>
                 </template>
               </el-table-column>
-              <el-table-column
-                prop="waterLevel2"
-                label="实际水位2(%)"
-                min-width="100"
-              >
+              <el-table-column prop="waterLevel2" label="实际水位2(%)" min-width="100">
                 <template slot-scope="{ row }">
                   <span>{{ row.waterLevel2 }} </span>
                 </template>
@@ -579,49 +333,19 @@
         </div>
         <!-- 三个泵 -->
         <div class="folw" v-else>
-          <div class="changeimage" v-if="isSHowWaterPump">
-            <div
-              class="iframeDiv"
-              style="display: flex; flex-direction: column; gap: 10px"
-            >
-              <iframe
-                src="https://mp.usr.cn/draw/s.html?s=r16650ip36&a=aHR0cHM6Ly9hcGltcC51c3IuY24vdXNyQ2xvdWQ=&l=cn"
-                frameborder="0"
-                style="width: 100%; height: 400px; border: none"
-              ></iframe>
-              <iframe
-                src="https://mp.usr.cn/draw/s.html?s=1055cne5y8&a=aHR0cHM6Ly9hcGltcC51c3IuY24vdXNyQ2xvdWQ=&l=cn"
-                frameborder="0"
-                style="width: 100%; height: 400px; border: none"
-              ></iframe>
-            </div>
-          </div>
-          <div v-else>
-            <!-- 动态流程图 -->
-            <div class="changeimage">
+          <div class="changeimage">
+            <div class="iframeDiv" style="display: flex; flex-direction: column; gap: 10px">
+              <!-- 动态流程图 -->
               <div class="flowimg">
                 <!-- 冷水水箱定位 -->
-                <img
-                  class="waterBox"
-                  src="../../../assets/flowimg/coolWaterBox.png"
-                  alt=""
-                />
+                <img class="waterBox" src="../../../assets/flowimg/coolWaterBox.png" alt="" />
                 <!-- 水位定位1 -->
-                <div
-                  class="progressContainer1"
-                  v-if="getPercentage(progress1) > 50"
-                >
-                  <div
-                    class="progress"
-                    :style="{ height: getPercentage(progress1) + '%' }"
-                  ></div>
+                <div class="progressContainer1" v-if="getPercentage(progress1) > 50">
+                  <div class="progress" :style="{ height: getPercentage(progress1) + '%' }"></div>
                   <b class="propo">{{ getPercentage(progress1) }}%</b>
                 </div>
                 <div class="progressContainer2" v-else>
-                  <div
-                    class="progress"
-                    :style="{ height: getPercentage(progress1) + '%' }"
-                  ></div>
+                  <div class="progress" :style="{ height: getPercentage(progress1) + '%' }"></div>
                   <b class="propo">{{ getPercentage(progress1) }}%</b>
                 </div>
                 <div class="waterBoxLong">
@@ -629,6 +353,12 @@
                   <div>实际值:{{ progress1 }}米</div>
                 </div>
               </div>
+              <iframe class="iframeContext"
+                src="https://mp.usr.cn/draw/s.html?s=r16650ip36&a=aHR0cHM6Ly9hcGltcC51c3IuY24vdXNyQ2xvdWQ=&l=cn"
+                frameborder="0"></iframe>
+              <iframe class="iframeContext twoIframe"
+                src="https://mp.usr.cn/draw/s.html?s=1055cne5y8&a=aHR0cHM6Ly9hcGltcC51c3IuY24vdXNyQ2xvdWQ=&l=cn"
+                frameborder="0"></iframe>
             </div>
           </div>
         </div>
@@ -690,7 +420,6 @@ export default {
       pumname: "",
       currentWeekday: "",
       isShowHotWater: false,
-      isSHowWaterPump: false,
       threePumpObj: {},
     };
   },
@@ -745,10 +474,11 @@ export default {
     this.getDayData();
     // 设置定时器，每 10 秒执行一次
     this.timer = setInterval(() => {
-      if (this.isShowHotWater && !this.isSHowWaterPump) {
+      if (this.isShowHotWater) {
         this.baseMessgae();
         this.sysStatus();
       }
+      this.sysStatus();
     }, 10000);
     // 每秒更新一次时间
     this.nowTimer = setInterval(() => {
@@ -894,23 +624,17 @@ export default {
                 this.progressName1 = "裙楼";
                 this.progressName2 = "中厨";
                 this.isShowHotWater = true;
-                this.isSHowWaterPump = false;
                 this.baseMessgae();
                 this.sysStatus();
               } else if (this.currentName === "3楼") {
                 this.progressName1 = "高区";
                 this.progressName2 = "中区";
                 this.isShowHotWater = true;
-                this.isSHowWaterPump = false;
                 this.baseMessgae();
                 this.sysStatus();
-              } else if (this.currentName.includes("水泵")) {
-                this.isShowHotWater = false;
-                this.isSHowWaterPump = true;
-                // this.sysStatus();
               } else {
                 this.isShowHotWater = false;
-                this.isSHowWaterPump = false;
+                this.sysStatus();
               }
             }
           });
@@ -1011,13 +735,8 @@ export default {
         this.isShowHotWater = true;
         this.baseMessgae();
         this.sysStatus();
-      } else if (this.currentName.includes("水泵")) {
-        this.isShowHotWater = false;
-        this.isSHowWaterPump = true;
-        // this.sysStatus();
       } else {
         this.isShowHotWater = false;
-        this.isSHowWaterPump = false;
         this.sysStatus();
       }
     },
@@ -1127,7 +846,7 @@ export default {
             // 模拟点击第一行
             this.handlerow(firstRow);
             // 设置当前选中行
-            if (this.isShowHotWater && !isSHowWaterPump) {
+            if (this.isShowHotWater) {
               this.$refs.maintable.setCurrentRow(firstRow);
             }
           }
@@ -1152,6 +871,7 @@ export default {
   align-items: center;
   margin-bottom: 20px;
   position: relative;
+
   .title-bg {
     width: 208px;
     height: 38px;
@@ -1159,6 +879,7 @@ export default {
     left: 0;
     z-index: 0;
   }
+
   .title-word {
     z-index: 10;
     font-family: YouSheBiaoTiHei;
@@ -1167,11 +888,13 @@ export default {
     white-space: nowrap;
   }
 }
+
 .monitor {
   width: 100%;
   min-height: 100vh;
   background-color: black;
   color: #fff;
+
   .monitor-top {
     width: 100%;
     display: flex;
@@ -1181,18 +904,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.8rem;
     }
+
     .title-right {
       width: 5.04rem;
       height: 0.78rem;
     }
+
     .sys-title {
       position: absolute;
       top: 40%;
@@ -1204,6 +931,7 @@ export default {
       z-index: 100;
       cursor: pointer;
     }
+
     .nowTime {
       position: absolute;
       top: 0.37rem;
@@ -1213,6 +941,7 @@ export default {
       font-weight: bold;
       z-index: 100;
     }
+
     .sys-logo {
       width: 1.8rem;
       height: 0.5rem;
@@ -1221,6 +950,7 @@ export default {
       left: 0.8rem;
       z-index: 10;
     }
+
     .monitor-time {
       position: absolute;
       top: 0.44rem;
@@ -1230,6 +960,7 @@ export default {
       color: #ffffff;
       font-weight: bold;
     }
+
     .icon_warning {
       position: absolute;
       top: 0.39rem;
@@ -1242,14 +973,17 @@ export default {
       /* 添加闪烁动画 */
       animation: blink 1s infinite;
     }
+
     @keyframes blink {
       100% {
         opacity: 1;
       }
+
       50% {
         opacity: 0;
       }
     }
+
     .icon_home {
       position: absolute;
       top: 0.39rem;
@@ -1260,6 +994,7 @@ export default {
       margin: 0 0.2rem 0 0.27rem;
       cursor: pointer;
     }
+
     .back-icon {
       position: absolute;
       top: 0.39rem;
@@ -1271,6 +1006,7 @@ export default {
     }
   }
 }
+
 .app-container {
   display: flex;
   flex-direction: row;
@@ -1279,6 +1015,7 @@ export default {
   height: 100%;
   padding: 0.3rem 0.2rem 0 0.35rem;
   width: 100%;
+
   .left-tree {
     width: 256px;
     padding: 15px 10px 10px 10px;
@@ -1286,12 +1023,15 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    z-index: 999999;
+
     .status {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       flex-wrap: wrap;
       margin-top: 20px;
+
       .status-li {
         width: 50%;
         display: flex;
@@ -1300,6 +1040,7 @@ export default {
         justify-content: center;
         margin-bottom: 15px;
       }
+
       .status1,
       .status2,
       .status3,
@@ -1309,6 +1050,7 @@ export default {
         align-items: center;
         margin-bottom: 5px;
       }
+
       .status1::before {
         content: "";
         width: 10px;
@@ -1317,6 +1059,7 @@ export default {
         background-color: #00d2ff;
         margin-right: 5px;
       }
+
       .status2::before {
         content: "";
         width: 10px;
@@ -1325,6 +1068,7 @@ export default {
         background-color: #ff2f2f;
         margin-right: 5px;
       }
+
       .status3::before {
         content: "";
         width: 10px;
@@ -1333,6 +1077,7 @@ export default {
         background-color: #ff9908;
         margin-right: 5px;
       }
+
       .status4::before {
         content: "";
         width: 10px;
@@ -1342,12 +1087,14 @@ export default {
         margin-right: 5px;
       }
     }
+
     .base-mes {
       background-color: #142c4e;
       padding: 20px 10px;
       font-size: 16px;
       border-radius: 6px;
       color: #129bd1;
+
       .base-title {
         font-family: SourceHanSansCN-Medium;
         font-size: 18px;
@@ -1355,11 +1102,14 @@ export default {
         color: #d1d6df;
         margin-bottom: 20px;
       }
+
       .base-height {
         height: 2.6rem;
         overflow-y: auto;
+
         .base-li {
           margin-bottom: 20px;
+
           .deepColor {
             display: inline-block;
             margin: 0 10px 0 5px;
@@ -1371,11 +1121,13 @@ export default {
       }
     }
   }
+
   .right-monitor {
     width: calc(100% - 280px);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+
     .folw {
       width: 100%;
       margin-top: -0.2rem;
@@ -1385,6 +1137,7 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
+
         .flowimg {
           width: 12.27rem;
           height: 5.6rem;
@@ -1456,18 +1209,21 @@ export default {
             left: 5.75rem;
             z-index: 1;
           }
+
           .text8 {
             position: absolute;
             top: 0.5rem;
             left: 1.4rem;
             z-index: 1;
           }
+
           .text9 {
             position: absolute;
             top: 5.4rem;
             left: 0.55rem;
             z-index: 1;
           }
+
           .text10 {
             position: absolute;
             top: 6.4rem;
@@ -1517,6 +1273,7 @@ export default {
             top: 3.55rem;
             left: 0.6rem;
           }
+
           .waterpum2 {
             width: 0.9rem;
             height: 0.68rem;
@@ -1524,6 +1281,7 @@ export default {
             top: 4.65rem;
             left: 0.6rem;
           }
+
           .waterpum3 {
             width: 0.9rem;
             height: 0.68rem;
@@ -1531,6 +1289,7 @@ export default {
             top: 5.65rem;
             left: 0.6rem;
           }
+
           .buwaterpum {
             width: 8.5rem;
             height: 2.9rem;
@@ -1539,6 +1298,7 @@ export default {
             right: -0.02rem;
             z-index: 2;
           }
+
           .buwaterpum2 {
             width: 8.5rem;
             height: 4.4rem;
@@ -1608,6 +1368,7 @@ export default {
               z-index: 3;
             }
           }
+
           .temContainer2 {
             width: 0.06rem;
             height: 0.65rem;
@@ -1646,6 +1407,7 @@ export default {
             left: 3.2rem;
             z-index: 3;
           }
+
           .temdiv2 {
             font-size: 0.15rem;
             line-height: 0.18rem;
@@ -1718,6 +1480,7 @@ export default {
               z-index: 3;
             }
           }
+
           .progressContainer3 {
             width: 0.3rem;
             height: 1.7rem;
@@ -1748,6 +1511,7 @@ export default {
               z-index: 3;
             }
           }
+
           .progressContainer4 {
             width: 0.3rem;
             height: 1.7rem;
@@ -1778,6 +1542,7 @@ export default {
               z-index: 3;
             }
           }
+
           .waterBoxLong {
             font-size: 0.17rem;
             font-weight: normal;
@@ -1790,6 +1555,7 @@ export default {
             left: 3.6rem;
             z-index: 3;
           }
+
           .progressName1 {
             font-size: 0.17rem;
             font-weight: normal;
@@ -1802,6 +1568,7 @@ export default {
             left: 2.6rem;
             z-index: 3;
           }
+
           .progressName2 {
             font-size: 0.17rem;
             font-weight: normal;
@@ -1827,6 +1594,7 @@ export default {
             left: 8.8rem;
             z-index: 1;
           }
+
           /* 四个元素时的样式 */
           .hotPumPosition-four {
             font-size: 0.17rem;
@@ -1843,6 +1611,7 @@ export default {
             flex-direction: row;
             flex-wrap: wrap;
             width: 2.3rem !important;
+
             .hotPump-li {
               display: flex;
               flex-direction: column;
@@ -1850,12 +1619,14 @@ export default {
               justify-content: center;
               width: 50% !important;
               position: relative;
+
               // margin-bottom: 0.2rem;
               .hotPump-img {
                 width: 1rem;
                 height: 1rem;
                 margin: 0.1rem 0;
               }
+
               .hotPump-tem1 {
                 position: absolute;
                 bottom: 0.2rem;
@@ -1863,6 +1634,7 @@ export default {
                 font-size: 0.13rem;
                 font-weight: bold;
               }
+
               .hotPump-tem2 {
                 position: absolute;
                 bottom: 0.4rem;
@@ -1870,6 +1642,7 @@ export default {
                 font-size: 0.13rem;
                 font-weight: bold;
               }
+
               .tem1 {
                 width: 0.4rem;
                 height: 0.7rem;
@@ -1878,6 +1651,7 @@ export default {
                 left: 1rem;
                 z-index: 3;
               }
+
               .tem2 {
                 width: 0.4rem;
                 height: 0.7rem;
@@ -1886,6 +1660,7 @@ export default {
                 left: -0.3rem;
                 z-index: 3;
               }
+
               .temContainer2 {
                 width: 0.042rem;
                 height: 0.4rem;
@@ -1904,6 +1679,7 @@ export default {
                   z-index: 3;
                 }
               }
+
               .temdiv2 {
                 font-size: 0.15rem;
                 line-height: 0.18rem;
@@ -1914,6 +1690,7 @@ export default {
                 left: -0.5rem;
                 z-index: 3;
               }
+
               .temContainer1 {
                 width: 0.042rem;
                 height: 0.4rem;
@@ -1932,6 +1709,7 @@ export default {
                   z-index: 3;
                 }
               }
+
               .temdiv1 {
                 font-size: 0.15rem;
                 line-height: 0.18rem;
@@ -1944,6 +1722,7 @@ export default {
               }
             }
           }
+
           /* 两个元素时的样式 */
           .hotPumPosition-two {
             font-size: 0.17rem;
@@ -1960,6 +1739,7 @@ export default {
             flex-direction: row;
             flex-wrap: wrap;
             width: 1.2rem !important;
+
             .hotPump-li {
               display: flex;
               flex-direction: column;
@@ -1967,12 +1747,14 @@ export default {
               justify-content: center;
               width: 100% !important;
               position: relative;
+
               // margin-bottom: 0.2rem;
               .hotPump-img {
                 width: 1rem;
                 height: 1rem;
                 margin: 0.1rem 0;
               }
+
               .hotPump-tem1 {
                 position: absolute;
                 bottom: 0.2rem;
@@ -1980,6 +1762,7 @@ export default {
                 font-size: 0.13rem;
                 font-weight: bold;
               }
+
               .hotPump-tem2 {
                 position: absolute;
                 bottom: 0.4rem;
@@ -1987,6 +1770,7 @@ export default {
                 font-size: 0.13rem;
                 font-weight: bold;
               }
+
               .tem2 {
                 width: 0.4rem;
                 height: 0.7rem;
@@ -1995,6 +1779,7 @@ export default {
                 left: -0.3rem;
                 z-index: 3;
               }
+
               .temContainer2 {
                 width: 0.042rem;
                 height: 0.4rem;
@@ -2013,6 +1798,7 @@ export default {
                   z-index: 3;
                 }
               }
+
               .temdiv2 {
                 font-size: 0.15rem;
                 line-height: 0.18rem;
@@ -2023,6 +1809,7 @@ export default {
                 left: -0.5rem;
                 z-index: 3;
               }
+
               .temContainer1 {
                 width: 0.042rem;
                 height: 0.4rem;
@@ -2041,6 +1828,7 @@ export default {
                   z-index: 3;
                 }
               }
+
               .temdiv1 {
                 font-size: 0.15rem;
                 line-height: 0.18rem;
@@ -2053,6 +1841,7 @@ export default {
               }
             }
           }
+
           .supply3 {
             position: absolute;
             top: 1.2rem;
@@ -2061,6 +1850,7 @@ export default {
             height: 4.4rem;
             z-index: 0;
           }
+
           .coolpum1 {
             width: 0.9rem;
             height: 0.68rem;
@@ -2069,6 +1859,7 @@ export default {
             left: 0.6rem;
             z-index: 2;
           }
+
           .coolpum2 {
             width: 0.9rem;
             height: 0.68rem;
@@ -2077,6 +1868,7 @@ export default {
             left: 0.6rem;
             z-index: 2;
           }
+
           .coolpum3 {
             width: 0.9rem;
             height: 0.68rem;
@@ -2085,42 +1877,49 @@ export default {
             left: 0.6rem;
             z-index: 2;
           }
+
           .pumpName1 {
             position: absolute;
             top: 3.35rem;
             left: 0.85rem;
             z-index: 1;
           }
+
           .pumpName2 {
             position: absolute;
             top: 4.55rem;
             left: 0.85rem;
             z-index: 1;
           }
+
           .pumpName3 {
             position: absolute;
             top: 5.8rem;
             left: 0.85rem;
             z-index: 1;
           }
+
           .inPressure {
             position: absolute;
             top: 1rem;
             left: 0.85rem;
             z-index: 1;
           }
+
           .goalPressure {
             position: absolute;
             top: 3.6rem;
             left: 6.85rem;
             z-index: 1;
           }
+
           .outPressure {
             position: absolute;
             top: 3.9rem;
             left: 6.85rem;
             z-index: 1;
           }
+
           .warning {
             position: absolute;
             width: 0.5rem;
@@ -2131,6 +1930,7 @@ export default {
             /* 添加闪烁动画 */
             animation: blink 1s infinite;
           }
+
           .warning-text {
             position: absolute;
             top: 2.6rem;
@@ -2139,8 +1939,24 @@ export default {
             color: #e40825;
           }
         }
+
         .iframeDiv {
           width: 100%;
+          position: relative;
+          padding-left: 12%;
+
+          .flowimg {
+            position: absolute;
+            left: -2rem;
+            top: 20%;
+            z-index: 999;
+          }
+
+          .iframeContext {
+            width: 100%;
+            height: 4rem;
+            border: none
+          }
         }
       }
 
@@ -2163,18 +1979,25 @@ export default {
     }
   }
 }
+
 .tree-container {
-  height: 300px; /* 设置固定高度 */
-  overflow-y: auto; /* 启用垂直滚动条 */
+  height: 300px;
+  /* 设置固定高度 */
+  overflow-y: auto;
+  /* 启用垂直滚动条 */
 }
+
 // 滚动条
 :-webkit-scrollbar {
-  width: 10px; /* 滚动条宽度 */
+  width: 10px;
+  /* 滚动条宽度 */
 }
 
 ::-webkit-scrollbar-track {
-  background: transparent !important; /* 滚动条轨道背景色 */
+  background: transparent !important;
+  /* 滚动条轨道背景色 */
 }
+
 .custom-tree-node {
   flex: 1;
   display: flex;
@@ -2182,12 +2005,14 @@ export default {
   justify-content: space-between;
   font-size: 14px;
   padding-right: 8px;
+
   .tree-left {
     .custom-tree-icon {
       margin-right: 5px;
     }
   }
 }
+
 // @media (min-width: 1270px) and (max-width: 1490px) {
 //   .changeimage {
 //     transform: scale(0.9);
@@ -2209,14 +2034,18 @@ export default {
     padding: 0.2rem 0.1rem !important;
     font-size: 0.16rem !important;
     border-radius: 0.06rem !important;
+
     .base-title {
       font-size: 0.18rem !important;
       margin-bottom: 0.2rem !important;
     }
+
     .base-height {
       height: 2.6rem !important;
+
       .base-li {
         margin-bottom: 0.2rem !important;
+
         .deepColor {
           margin: 0 0.1rem 0 0.05rem !important;
           font-size: 0.18rem !important;
@@ -2224,6 +2053,7 @@ export default {
       }
     }
   }
+
   .changecontent {
     border-radius: 0.06rem !important;
     // height: 3rem !important;
@@ -2236,53 +2066,66 @@ export default {
     }
   }
 }
+
 // 手机端样式
 @media (min-width: 0px) and (max-width: 990px) {
   .buildingDiv {
     padding-left: 0.54rem !important;
     margin-bottom: 0.2rem !important;
+
     .title-bg {
       width: 2.08rem !important;
       height: 0.38rem !important;
     }
+
     .title-word {
       font-size: 15px !important;
     }
   }
+
   .app-container .left-tree .base-mes {
     padding: 0.2rem 0.1rem !important;
     font-size: 14px !important;
     border-radius: 0.06rem !important;
   }
+
   .app-container .left-tree .base-mes .base-title {
     font-size: 15px !important;
   }
+
   .app-container .left-tree .base-mes .base-height {
     height: 5.7rem !important;
   }
+
   .app-container .right-monitor .folw .changecontent .tablemaeta {
     font-size: 14px !important;
   }
+
   .app-container {
     padding: 0rem 0.2rem 0 0.35rem !important;
   }
+
   .app-container .left-tree {
     width: 200px !important;
     min-height: 340px !important;
     padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
     // justify-content: flex-start !important;
   }
+
   .app-container .tree-div {
     height: 200px !important;
     width: 100%;
     overflow-x: hidden !important;
   }
+
   .base-height {
     overflow-y: hidden !important;
     min-height: 250px !important;
   }
+
   .app-container .right-monitor {
     width: calc(100% - 210px) !important;
+
     .folw {
       .changecontent {
         border-radius: 0.06rem !important;
@@ -2291,24 +2134,30 @@ export default {
       }
     }
   }
+
   .custom-tree-node {
     font-size: 12px !important;
   }
+
+  .iframeDiv {
+
+    .twoIframe {
+      margin-top: -0.8rem !important;
+    }
+  }
 }
 </style>
 <style scoped>
 /* 自定义高亮颜色 */
-.left-tree
-  >>> .el-tree--highlight-current
-  .el-tree-node.is-current
-  > .el-tree-node__content {
+.left-tree>>>.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
   background-color: #285b9e !important;
   /* color: #f56c6c;  */
   color: #25f1f8;
 }
+
 /* 手机端样式 */
 @media (min-width: 0px) and (max-width: 990px) {
-  .left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon {
+  .left-tree>>>.el-tree-node__content>.el-tree-node__expand-icon {
     padding: 3px !important;
   }
 }