diff --git a/.env.development b/.env.development
index 13c7001..a08e7e1 100644
--- a/.env.development
+++ b/.env.development
@@ -7,9 +7,9 @@ ENV = 'development'
 # 开发环境
 # VUE_APP_BASE_API = '/dev-api'
 # 后台
-# VUE_APP_BASE_API = 'http://192.168.1.222:8080'
+VUE_APP_BASE_API = 'http://192.168.1.222:8080'
 # 梅州云端
-VUE_APP_BASE_API = 'http://106.55.173.225:8091'
+# VUE_APP_BASE_API = 'http://106.55.173.225:8091'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/api/centerairC/hostRunReport.js b/src/api/centerairC/hostRunReport.js
new file mode 100644
index 0000000..a9a849a
--- /dev/null
+++ b/src/api/centerairC/hostRunReport.js
@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+// 查询运行记录
+export function reportSysList(data) {
+  return request({
+    url: "/reportSys/list",
+    method: "post",
+    data,
+  });
+}
+// 编辑运行记录
+export function reportSysEdit(data) {
+  return request({
+    url: "/reportSys/edit",
+    method: "put",
+    data,
+  });
+}
+// 导出
+export function reportSysExport(data) {
+  return request({
+    url: "/reportSys/export",
+    method: "post",
+    data,
+      responseType: 'blob',
+  });
+}
diff --git a/src/api/region.js b/src/api/region.js
index db51c9b..3797eba 100644
--- a/src/api/region.js
+++ b/src/api/region.js
@@ -7,6 +7,13 @@ export function spaceTree() {
     method: "get",
   });
 }
+export function floorTree() {
+  return request({
+    url: "/space/floorTree",
+    method: "get",
+  });
+}
+
 
 // 获取区域信息
 export function getAreaList(query) {
diff --git a/src/assets/flowimg/circulate-move - 副本.gif b/src/assets/flowimg/circulate-move - 副本.gif
new file mode 100644
index 0000000..24276f6
Binary files /dev/null and b/src/assets/flowimg/circulate-move - 副本.gif differ
diff --git a/src/assets/flowimg/circulate-move.gif b/src/assets/flowimg/circulate-move.gif
index 24276f6..fc9a46b 100644
Binary files a/src/assets/flowimg/circulate-move.gif and b/src/assets/flowimg/circulate-move.gif differ
diff --git a/src/assets/flowimg/circulate-nomove - 副本.png b/src/assets/flowimg/circulate-nomove - 副本.png
new file mode 100644
index 0000000..1d14fb1
Binary files /dev/null and b/src/assets/flowimg/circulate-nomove - 副本.png differ
diff --git a/src/assets/flowimg/circulate-nomove.png b/src/assets/flowimg/circulate-nomove.png
index 1d14fb1..95bcc0d 100644
Binary files a/src/assets/flowimg/circulate-nomove.png and b/src/assets/flowimg/circulate-nomove.png differ
diff --git a/src/assets/flowimg/waterBox - 副本.png b/src/assets/flowimg/waterBox - 副本.png
new file mode 100644
index 0000000..8f70533
Binary files /dev/null and b/src/assets/flowimg/waterBox - 副本.png differ
diff --git a/src/assets/flowimg/waterBox.png b/src/assets/flowimg/waterBox.png
index 8f70533..419a8d0 100644
Binary files a/src/assets/flowimg/waterBox.png and b/src/assets/flowimg/waterBox.png differ
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index e522185..d6028ce 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -1430,7 +1430,7 @@
   min-width: 50px !important;
   z-index: 0;
 }
-.el-input__suffix{
+.el-input__suffix {
   z-index: 10;
 }
 .el-cascader__tags {
@@ -1438,4 +1438,14 @@
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
-}
\ No newline at end of file
+}
+.el-table--group,
+.el-table--border {
+  border: 1px solid #00264f !important;
+}
+.el-table--border .el-table__cell {
+  border-right: 1px solid #00264f !important;
+}
+.el-table--border th.el-table__cell {
+  border-bottom: 1px solid #00264f !important;
+}
diff --git a/src/views/centerairC/hostRunReport/index.vue b/src/views/centerairC/hostRunReport/index.vue
new file mode 100644
index 0000000..0ea661c
--- /dev/null
+++ b/src/views/centerairC/hostRunReport/index.vue
@@ -0,0 +1,915 @@
+<template>
+  <div class="app-container">
+    <div class="btn-condition">
+      <div class="condition-left" v-show="showSearch">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+        >
+          <el-form-item label="主机编号" prop="deviceNum">
+            <el-select
+              v-model="queryParams.deviceNum"
+              placeholder="请选择主机编号"
+              clearable
+            >
+              <el-option label="1号主机" value="1" />
+              <el-option label="2号主机" value="2" />
+              <el-option label="3号主机" value="3" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="日期范围" prop="timeArr">
+            <el-date-picker
+              style="width: 220px"
+              v-model="timeArr"
+              type="daterange"
+              unlink-panels
+              range-separator="~"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+              @change="dateChange"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+        <div class="primary-btn">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+        </div>
+        <div class="cancel-btn">
+          <el-button
+            type="cancel"
+            icon="el-icon-refresh"
+            size="mini"
+            @click="resetQuery"
+            >重置</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <div class="success-btn">
+          <el-button
+            type="success"
+            @click="leadingPrint"
+            icon="el-icon-printer"
+            size="mini"
+            >打印</el-button
+          >
+        </div>
+      </el-col> -->
+      <el-col :span="1.5">
+        <div class="warning-btn">
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            >导出</el-button
+          >
+        </div>
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="postList" stripe>
+      <el-table-column label="主机id" align="center" prop="deviceNum" />
+      <el-table-column label="时间" align="center" prop="curTime" />
+      <el-table-column label="蒸发器">
+        <el-table-column
+          label="冷冻水进水温度(℃)"
+          align="center"
+          prop="tempInChillerWater" />
+        <el-table-column
+          label="冷冻水出水温度(℃)"
+          align="center"
+          prop="tempOutChillerWater" />
+        <el-table-column label="设计流量(%)" align="center" prop="designFlow" />
+        <el-table-column
+          label="蒸发器压力(kpa)"
+          align="center"
+          prop="pressEvapSaturation" />
+        <el-table-column
+          label="蒸发器饱和温度(℃)"
+          align="center"
+          prop="tempEvapSaturation" />
+        <el-table-column
+          label="蒸发器趋近温度(℃)"
+          align="center"
+          prop="tempEvapApproaching"
+      /></el-table-column>
+      <el-table-column label="冷凝器">
+        <el-table-column
+          label="冷却水进水温度(℃)"
+          align="center"
+          prop="tempInCoolingWater"
+        />
+        <el-table-column
+          label="冷却水出水温度(℃)"
+          align="center"
+          prop="tempOutCoolingWater"
+        />
+        <el-table-column
+          label="冷凝器压力(kpa)"
+          align="center"
+          prop="pressCondenserSaturation"
+        />
+        <el-table-column
+          label="冷凝器饱和温度(℃)"
+          align="center"
+          prop="tempCondenserSaturation"
+        />
+        <el-table-column
+          label="冷凝器趋近温度(℃)"
+          align="center"
+          prop="tempCondenserApproaching"
+        />
+      </el-table-column>
+      <el-table-column label="系统">
+        <el-table-column
+          label="冷冻水设定值(℃)"
+          align="center"
+          prop="setChillerWater"
+        />
+        <el-table-column label="冷水机需求(%)" align="center" prop="setLoad" />
+        <el-table-column label="总电流(%)" align="center" prop="currentTotal" />
+        <el-table-column
+          label="总输入功率(kw)"
+          align="center"
+          prop="inputPowerTotal"
+        />
+        <el-table-column
+          label="压缩机1_压缩比"
+          align="center"
+          prop="ratioCompOne"
+        />
+        <el-table-column
+          label="压缩机2_压缩比"
+          align="center"
+          prop="ratioCompTwo"
+        />
+        <el-table-column
+          label="压缩机3_压缩比"
+          align="center"
+          prop="ratioCompThree"
+        />
+        <el-table-column label="膨胀阀开度(%)" align="center" prop="openExv" />
+        <el-table-column
+          label="运行中的压缩机数量"
+          align="center"
+          prop="runCompNum"
+        />
+      </el-table-column>
+      <el-table-column label="冷冻泵">
+        <el-table-column
+          label="冷冻水泵频率(hz)"
+          align="center"
+          prop="frequencyChiller"
+        />
+        <el-table-column
+          label="冷冻水出水压力(kpa)"
+          align="center"
+          prop="pressOutChillerWater"
+        />
+        <el-table-column
+          label="冷冻水进水压力(kpa)"
+          align="center"
+          prop="pressInChillerWater"
+        />
+      </el-table-column>
+      <el-table-column label="冷却泵">
+        <el-table-column
+          label="冷却水泵频率(hz)"
+          align="center"
+          prop="frequencyCooling"
+        />
+        <el-table-column
+          label="冷却水出水压力(kpa)"
+          align="center"
+          prop="pressOutCoolingWater"
+        />
+        <el-table-column
+          label="冷却水进水压力(kpa)"
+          align="center"
+          prop="pressInCoolingWater"
+        />
+      </el-table-column>
+      <el-table-column label="冷却塔">
+        <el-table-column
+          label="冷却塔水泵频率(hz)"
+          align="center"
+          prop="frequencyCoolingTower"
+        />
+        <el-table-column
+          label="冷却塔运行数量"
+          align="center"
+          prop="runCoolingTower"
+        />
+      </el-table-column>
+      <el-table-column label="室外温度(℃)" align="center" prop="tempOutdoor" />
+      <el-table-column
+        label="室外湿度(%)"
+        align="center"
+        prop="humidityOutdoor"
+      />
+      <el-table-column
+        label="恒压补水罐压力(Mpa)"
+        align="center"
+        prop="pressConstantWaterTank"
+      />
+      <el-table-column label="巡查记录人" align="center" prop="recorder" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['device:ledger:edit']"
+            >修改</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改设备台账对话框 -->
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules">
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="主机编号" prop="deviceNum">
+              <el-select
+                v-model="form.deviceNum"
+                placeholder="请选择主机编号"
+                clearable
+              >
+                <el-option label="1号主机" value="1" />
+                <el-option label="2号主机" value="2" />
+                <el-option label="3号主机" value="3" />
+              </el-select> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="设计流量(%)" prop="designFlow">
+              <el-input v-model="form.designFlow" placeholder="请输入流量(%)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷冻水进水温度(℃)" prop="tempInChillerWater">
+              <el-input
+                v-model="form.tempInChillerWater"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="冷冻水出水温度(℃)" prop="tempOutChillerWater">
+              <el-input
+                v-model="form.tempOutChillerWater"
+                placeholder="请输入温度(℃)"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="蒸发器饱和温度(℃)" prop="tempEvapSaturation">
+              <el-input
+                v-model="form.tempEvapSaturation"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="蒸发器趋近温度(℃)" prop="tempEvapApproaching">
+              <el-input
+                v-model="form.tempEvapApproaching"
+                placeholder="请输入温度(℃)"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="蒸发器压力(kpa)" prop="pressEvapSaturation">
+              <el-input
+                v-model="form.pressEvapSaturation"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷凝器压力(kpa)"
+              prop="pressCondenserSaturation"
+            >
+              <el-input
+                v-model="form.pressCondenserSaturation"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷却水进水温度(℃)" prop="tempInCoolingWater">
+              <el-input
+                v-model="form.tempInCoolingWater"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="冷却水出水温度(℃)" prop="tempOutCoolingWater">
+              <el-input
+                v-model="form.tempOutCoolingWater"
+                placeholder="请输入温度(℃)"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item
+              label="冷凝器饱和温度(℃)"
+              prop="tempCondenserSaturation"
+            >
+              <el-input
+                v-model="form.tempCondenserSaturation"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷凝器趋近温度(℃)"
+              prop="tempCondenserApproaching"
+            >
+              <el-input
+                v-model="form.tempCondenserApproaching"
+                placeholder="请输入温度(℃)"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷冻水设定值(℃)" prop="setChillerWater">
+              <el-input
+                v-model="form.setChillerWater"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="冷水机需求(%)" prop="setLoad">
+              <el-input v-model="form.setLoad" placeholder="请输入(%)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="总输入功率(kw)" prop="inputPowerTotal">
+              <el-input
+                v-model="form.inputPowerTotal"
+                placeholder="请输入功率(kw)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="总电流(%)" prop="currentTotal">
+              <el-input v-model="form.currentTotal" placeholder="请输入(%)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="压缩机1_压缩比" prop="ratioCompOne">
+              <el-input
+                v-model="form.ratioCompOne"
+                placeholder="请输入压缩比"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="压缩机2_压缩比" prop="ratioCompTwo">
+              <el-input
+                v-model="form.ratioCompTwo"
+                placeholder="请输入压缩比"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="压缩机3_压缩比" prop="ratioCompThree">
+              <el-input
+                v-model="form.ratioCompThree"
+                placeholder="请输入压缩比"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="膨胀阀开度(%)" prop="openExv">
+              <el-input v-model="form.openExv" placeholder="请输入(%)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="运行中的压缩机数量" prop="runCompNum">
+              <el-input
+                v-model="form.runCompNum"
+                placeholder="请输入数量"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="冷冻水泵频率(hz)" prop="frequencyChiller">
+              <el-input v-model="form.openExv" placeholder="请输入频率(hz)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item
+              label="冷冻水出水压力(kpa)"
+              prop="pressOutChillerWater"
+            >
+              <el-input
+                v-model="form.pressOutChillerWater"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷冻水进水压力(kpa)"
+              prop="pressInChillerWater"
+            >
+              <el-input
+                v-model="form.pressInChillerWater"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item
+              label="冷却水出水压力(kpa)"
+              prop="pressOutCoolingWater"
+            >
+              <el-input
+                v-model="form.pressOutCoolingWater"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷却水进水压力(kpa)"
+              prop="pressInCoolingWater"
+            >
+              <el-input
+                v-model="form.pressInCoolingWater"
+                placeholder="请输入压力(kpa)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷却水泵频率(hz)" prop="frequencyCooling">
+              <el-input
+                v-model="form.frequencyCooling"
+                placeholder="请输入频率(hz)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="冷却塔水泵频率(hz)"
+              prop="frequencyCoolingTower"
+            >
+              <el-input
+                v-model="form.frequencyCoolingTower"
+                placeholder="请输入频率(hz)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="冷却塔运行数量" prop="runCoolingTower">
+              <el-input
+                v-model="form.runCoolingTower"
+                placeholder="请输入数量"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="恒压补水罐压力(Mpa)"
+              prop="pressConstantWaterTank"
+            >
+              <el-input
+                v-model="form.pressConstantWaterTank"
+                placeholder="请输入压力(Mpa)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="室外温度" prop="tempOutdoor">
+              <el-input
+                v-model="form.tempOutdoor"
+                placeholder="请输入温度(℃)"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="室外湿度(%)" prop="humidityOutdoor">
+              <el-input
+                v-model="form.humidityOutdoor"
+                placeholder="请输入湿度(%)"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :span="12">
+            <el-form-item label="巡查记录人" prop="recorder">
+              <el-input
+                v-model="form.recorder"
+                placeholder="请输入巡查记录人"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="form.remark"
+                placeholder="请输入备注"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="dialogPrintVisible"
+      title="打印预览"
+      class="print-dialog"
+    >
+      <div id="report" ref="report" class="report">
+        <table
+          border="1"
+          style="
+            table-layout: fixed;
+            width: 100%;
+            border: 1px solid #e2e6f0;
+            margin-bottom: 35px;
+          "
+        >
+          <thead>
+            <tr>
+              <th rowspan="1" colspan="32">磁悬浮水冷冷水机组数据运行记录表</th>
+            </tr>
+            <tr>
+              <th>主机id</th>
+              <th>时间</th>
+              <th colspan="6">蒸发器</th>
+              <th colspan="5">冷凝器</th>
+              <th colspan="7">系统</th>
+              <th colspan="3">冷冻泵</th>
+              <th colspan="3">冷却泵</th>
+              <th colspan="2">冷却塔</th>
+              <th>室外温度(℃)</th>
+              <th>室外湿度(%)</th>
+              <th>恒压补水罐压力(Mpa)</th>
+              <th>巡查记录人</th>
+            </tr>
+            <tr>
+              <th></th>
+              <th></th>
+              <th>冷冻水进水温度(℃)</th>
+              <th>冷冻水出水温度(℃)</th>
+              <th>设计流量(%)</th>
+              <th>蒸发器压力(kpa)</th>
+              <th>蒸发器饱和温度(℃)</th>
+              <th>蒸发器趋近温度(℃)</th>
+              <th>冷却水进水温度(℃)</th>
+              <th>冷却水出水温度(℃)</th>
+              <th>冷凝器压力(kpa)</th>
+              <th>冷凝器饱和温度(℃)</th>
+              <th>冷凝器趋近温度(℃)</th>
+              <th>冷冻水设定值(℃)</th>
+              <th>冷水机需求(%)</th>
+              <th>总电流(%)</th>
+              <th>总输入功率(kw)</th>
+              <th>压缩机1_压缩比</th>
+              <th>膨胀阀开度(%)</th>
+              <th>运行中的压缩机数量</th>
+              <th>冷冻水泵频率(hz)</th>
+              <th>冷冻水出水压力(kpa)</th>
+              <th>冷冻水进水压力(kpa)</th>
+              <th>冷却水泵频率(hz)</th>
+              <th>冷却水出水压力(kpa)</th>
+              <th>冷却水进水压力(kpa)</th>
+              <th>冷却塔水泵频率(hz)</th>
+              <th>冷却塔运行数量</th>
+              <th></th>
+              <th></th>
+              <th></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tr v-for="(item, index) in postList" :key="index">
+            <td align="center" v-for="(value, key) in item" :key="key">
+              {{ value }}
+            </td>
+          </tr>
+        </table>
+        <div
+          class="detail"
+          style="
+            display: flex;
+            flex-direction: row;
+            font-size: 14px;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            width: 40%;
+            color: #ffffff;
+          "
+        >
+          <div>操作员: {{ this.userName }}</div>
+          <div class="print-date">日期： {{ this.operationDate }}</div>
+        </div>
+      </div>
+      <el-row type="flex" justify="end" style="margin-top: 0.2rem">
+        <el-col :span="2">
+          <el-button type="info" @click="dialogPrintVisible = false"
+            >取消</el-button
+          >
+        </el-col>
+        <el-col :span="2" style="margin-left: 60px">
+          <el-button type="success" @click="surePrint">确认</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  reportSysList,
+  reportSysEdit,
+  reportSysExport,
+} from "@/api/centerairC/hostRunReport";
+import { format2, getDay } from "@/utils/datetime";
+export default {
+  name: "ledger",
+  data() {
+    return {
+      timeArr: [],
+      // 遮罩层
+      loading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deviceNum: "",
+        params: {
+          startTime: "",
+          endTime: "",
+        },
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        deviceName: [
+          { required: true, message: "设备名称不能为空", trigger: "blur" },
+        ],
+      },
+      dialogPrintVisible: false,
+      userName: "", //操作员
+      operationDate: getDay(0), //操作日期
+      titleDate: "",
+    };
+  },
+  created() {
+    this.userName = sessionStorage.getItem("userName");
+    this.queryParams.deviceNum = "1";
+    this.getList();
+  },
+  methods: {
+    // 选中日期事件
+    dateChange() {
+      // console.log("打印时间", this.timeArr);
+      if (!this.timeArr) {
+        this.$nextTick(() => {
+          this.timeArr = [];
+          this.queryParams.params.startTime = "";
+          this.queryParams.params.endTime = "";
+        });
+      } else {
+        this.queryParams.params.startTime = this.timeArr[0];
+        this.queryParams.params.endTime = this.timeArr[1];
+      }
+    },
+    /** 查询设备台账列表 */
+    getList() {
+      this.loading = true;
+      reportSysList(this.queryParams).then((response) => {
+        if (response.code == 200) {
+          this.postList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        } else {
+          this.postList = [];
+          this.total = 0;
+          this.loading = false;
+        }
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+      this.form.id = "";
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: "",
+        deviceNum: "",
+        curTime: "",
+        tempInChillerWater: "",
+        tempOutChillerWater: "",
+        designFlow: "",
+        pressEvapSaturation: "",
+        tempEvapSaturation: "",
+        tempEvapApproaching: "",
+        tempInCoolingWater: "",
+        tempOutCoolingWater: "",
+        pressCondenserSaturation: "",
+        tempCondenserSaturation: "",
+        tempCondenserApproaching: "",
+        setChillerWater: "",
+        setLoad: "",
+        currentTotal: "",
+        inputPowerTotal: "",
+        ratioCompOne: "",
+        openExv: "",
+        runCompNum: "",
+        frequencyChiller: "",
+        pressOutChillerWater: "",
+        pressInChillerWater: "",
+        frequencyCooling: "",
+        pressOutCoolingWater: "",
+        pressInCoolingWater: "",
+        frequencyCoolingTower: "",
+        runCoolingTower: "",
+        pressConstantWaterTank: "",
+        tempOutdoor: "",
+        humidityOutdoor: "",
+        recorder: "",
+        remark: "",
+        ratioCompTwo: "",
+        ratioCompThree: "",
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.form = Object.assign({}, row);
+      this.open = true;
+      this.title = "修改主机运行记录";
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            reportSysEdit(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            console.log("新增参数", this.form);
+          }
+        }
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      reportSysExport(this.queryParams).then((res) => {
+        console.log("导出返回", res);
+        if (res.code == 200) {
+          // 请求的结果就是文件
+          // 创建一个blob URL，用于生成下载链接
+          const url = window.URL.createObjectURL(new Blob([res]));
+          // 创建一个<a>元素，并设置其href和download属性
+          const link = document.createElement("a");
+          link.href = url;
+          link.setAttribute("download", "主机运行记录报表.xls"); // 设置下载的文件名
+          // 模拟点击下载链接
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          // 释放blob URL资源
+          window.URL.revokeObjectURL(url);
+          this.$message({
+            type: "success",
+            message: "导出成功!",
+          });
+        } else {
+          this.$message.error("导出失败!");
+        }
+      });
+    },
+    // 打印
+    leadingPrint() {
+      this.dialogPrintVisible = true;
+    },
+    // 打印
+    surePrint() {
+      const printHTML = document.querySelector("#report").innerHTML;
+      // 将打印的区域赋值，进行打印
+      window.document.body.innerHTML = printHTML;
+      window.print(); // 调用window打印方法
+      window.location.reload(); // 打印完成后重新加载页面
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 800px !important;
+  }
+  ::v-deep .print-dialog .el-dialog {
+    width: 1200px !important;
+  }
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 150px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  //   ::v-deep .el-dialog {
+  //     width: 8rem !important;
+  //   }
+
+  //   ::v-deep .el-dialog .el-form-item__label {
+  //     width: 1.5rem !important;
+  //   }
+  //   ::v-deep .el-dialog .el-form-item {
+  //     display: flex;
+  //     flex-direction: row;
+  //     align-items: center;
+  //   }
+}
+</style>
diff --git a/src/views/hotWater/waterMonitor/index copy.vue b/src/views/hotWater/waterMonitor/index copy.vue
new file mode 100644
index 0000000..045da6e
--- /dev/null
+++ b/src/views/hotWater/waterMonitor/index copy.vue	
@@ -0,0 +1,1112 @@
+<template>
+  <div class="app-container">
+    <div class="left-tree">
+      <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
+      <div style="height: 5.08rem; 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"
+        >
+          <template #default="{ node }">
+            <span class="custom-tree-node">
+              <!-- 根据节点状态动态设置图标类名 -->
+              <div class="tree-left">
+                <i :class="getIconClass(node)" class="custom-tree-icon"></i>
+                <span class="tree-label">{{ node.label }}</span>
+              </div>
+            </span>
+          </template>
+        </el-tree>
+      </div>
+      <div class="base-mes">
+        <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>
+        </div>
+      </div>
+    </div>
+    <div class="right-monitor">
+      <div class="buildingDiv">
+        <img
+          class="title-bg"
+          src="../../../assets/images/title-bg.png"
+          alt=""
+        />
+        <div class="title-word">楼层：{{ currentName }}</div>
+      </div>
+      <div class="folw">
+        <!-- 动态流程图 -->
+        <div class="changeimage">
+          <!-- <img class="img-rad" src="" alt="" /> -->
+          <div class="flowimg">
+            <!-- <img v-if="this.useWater == '运行'" src="../../../assets/images/flowimg/move.gif" class="bigMove" alt="" />
+            <img v-else src="../../../assets/images/flowimg/nomove.png" class="bigMove" alt="" /> -->
+
+            <!-- 文字定位  -->
+            <div class="flow-text text1">供水泵1</div>
+            <div class="flow-text text2">回水管</div>
+            <div class="flow-text text3">无线网关</div>
+            <div class="flow-text text4">回水阀</div>
+            <div class="flow-text text5">房间</div>
+            <div class="flow-text text6">供水泵2</div>
+            <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="supply"
+              v-if="this.upWaterState1 === '1' || this.upWaterState2 === '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=""
+            />
+            <!-- 供水泵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=""
+            />
+            <!-- 供水泵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="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"
+              v-if="this.hotPumState === '1' && this.isBad !== '1'"
+              src="../../../assets/flowimg/startpum.png"
+              alt=""
+            />
+            <img
+              class="cirpum"
+              v-else
+              src="../../../assets/flowimg/closepum.png"
+              alt=""
+            />
+            <!-- 热泵定位 -->
+            <img
+              class="hotpum"
+              v-if="this.hotPumState === '1' && this.isBad !== '1'"
+              src="../../../assets/flowimg/starthotpum.png"
+              alt=""
+            />
+            <img
+              class="hotpum"
+              v-else-if="this.isBad === '1'"
+              src="../../../assets/flowimg/badhotpum.png"
+              alt=""
+            />
+            <img
+              class="hotpum"
+              v-else
+              src="../../../assets/flowimg/closehotpum.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=""
+            />
+            <!-- 热泵名称定位 -->
+            <div class="pumname">{{ this.pumname }}</div>
+            <!-- 温度定位 -->
+            <img
+              class="tem"
+              src="../../../assets/flowimg/thermometer.png"
+              alt=""
+            />
+            <div class="temContainer">
+              <div class="temprogress" :style="{ height: temdata + '%' }"></div>
+            </div>
+            <b class="temdiv">{{ temdata }}℃</b>
+            <!-- 水位定位 -->
+            <div class="progressContainer1" v-if="progress > 50">
+              <div class="progress" :style="{ height: progress + '%' }">
+                <!-- <b class="propo">{{ progress }}%</b> -->
+              </div>
+              <!-- 水位定位 -->
+              <b class="propo">{{ progress }}%</b>
+            </div>
+            <div class="progressContainer2" v-else>
+              <div class="progress" :style="{ height: progress + '%' }"></div>
+              <b class="propo">{{ progress }}%</b>
+            </div>
+          </div>
+        </div>
+        <div class="changecontent">
+          <div class="tablemaeta">系统状态显示</div>
+          <el-table
+            height="2.5rem"
+            class="maintable"
+            ref="maintable"
+            :data="tableData"
+            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 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="curDate" label="状态时间" min-width="130">
+            </el-table-column>
+            <el-table-column prop="pumpName" label="热泵名称">
+            </el-table-column>
+            <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"
+            >
+              <template slot-scope="{ row }">
+                <span>{{ row.waterTemp }} </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="levelSet"
+              label="设置水位(%)"
+              min-width="100"
+            >
+              <template slot-scope="{ row }">
+                <span>{{ row.levelSet }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="waterLevel"
+              label="实际水位(%)"
+              min-width="100"
+            >
+              <template slot-scope="{ row }">
+                <span>{{ row.waterLevel }} </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="upWaterState1" label="供水泵1状态">
+              <template slot-scope="{ row }">
+                <span v-if="row.upWaterState1 === '0'">不运行 </span>
+                <span v-if="row.upWaterState1 === '1'">运行 </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="upWaterState2" label="供水泵2状态">
+              <template slot-scope="{ row }">
+                <span v-if="row.upWaterState2 === '0'">不运行 </span>
+                <span v-if="row.upWaterState2 === '1'">运行 </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="upWaterState" label="补水状态">
+              <template slot-scope="{ row }">
+                <span v-if="row.useWaterState === '0'">不运行 </span>
+                <span v-if="row.useWaterState === '1'">运行 </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="backWaterState" label="回水状态">
+              <template slot-scope="{ row }">
+                <span v-if="row.backWaterState === '0'">不运行 </span>
+                <span v-if="row.backWaterState === '1'">运行 </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="runState" label="热泵状态">
+              <template slot-scope="{ row }">
+                <span v-if="row.runState === '0'">不运行 </span>
+                <span v-if="row.runState === '1'">运行 </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="isFault" label="是否故障">
+              <template slot-scope="{ row }">
+                <span v-if="row.isFault === '0'">无故障</span>
+                <span v-if="row.isFault === '1'">有故障</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { spaceTree } from "@/api/region";
+import { waterPublic, waterMonitorList } from "@/api/hotWater/waterMonitor";
+export default {
+  data() {
+    return {
+      loading: false,
+      treeData: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      deviceList: [],
+      expandedKeys: [],
+      currentId: "", //当前选中高亮的id
+      currentName: "", //当前选中的名称
+      currentLevel: "", //当前节点的层级
+      currentParentId: "", //当前节点的上级的id
+
+      baseTable: [], //公共信息列表数据
+      tableData: [], //系统状态表格数据
+
+      // 供水阀状态 0表示关闭 1表示开启
+      useWaterState: "",
+      upWaterState1: "", //供水泵1状态
+      upWaterState2: "", //供水泵2状态
+      backWaterState: "", //回水阀状态
+      // 热泵状态 两个系数
+      hotPumState: "",
+      isBad: "无故障",
+      // 网关在线状态 0表示离线 1表示在线
+      webstate: 1,
+      // 水位变化数值
+      progress: 0,
+      // 温度变化数值
+      temdata: 0,
+      // 热泵名称
+      pumname: "",
+    };
+  },
+  mounted() {
+    this.getSysBuild();
+  },
+  methods: {
+    getSysBuild() {
+      spaceTree().then((res) => {
+        if (res.code == 200) {
+          // 只需要保留热水的系统
+          console.log("楼栋返回值", res);
+          let newRes = { ...res };
+
+          if (newRes.data && newRes.data[0] && newRes.data[0].children) {
+            newRes.data[0].children = newRes.data[0].children.filter((item) => {
+              // 假设子项有一个 label属性，用于检查是否包含 "热水"
+              return item.label && item.label.includes("热水");
+            });
+          }
+          // 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级
+          const targetLevel = 4;
+          // 从 data[0] 开始处理，当前层级为 1
+          if (newRes.data[0]) {
+            this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel);
+          }
+          console.log("筛选后的新结果", newRes);
+          this.treeData = newRes.data;
+          this.$nextTick(() => {
+            // 默认展开节点
+            this.getExpandedKeys(this.treeData, 2);
+            if (this.treeData.length > 0) {
+              // 找到最后一层的第一个子节点
+              const lastLevelFirstChild = this.findLastLevelFirstChild(
+                this.treeData[0]
+              );
+              // this.$refs.tree.setCurrentKey(
+              //   this.treeData[0].children[0].children[0].children[0].id
+              // );
+              // 设置当前选中的节点,默认高亮
+              this.$refs.tree.setCurrentKey(lastLevelFirstChild.id);
+              // 更新当前节点的信息
+              this.currentId = lastLevelFirstChild.id;
+              this.currentLevel = lastLevelFirstChild.level;
+              this.currentName = lastLevelFirstChild.label;
+              console.log("当前选中节点ID", this.currentId);
+              console.log("当前选中节点层级", this.currentLevel);
+              console.log("当前选中节点名称", this.currentName);
+              this.baseMessgae();
+              this.sysStatus();
+            }
+          });
+        }
+      });
+    },
+    // 递归函数，用于去除指定层级往后的 children 数据
+    removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
+      if (currentLevel >= targetLevel) {
+        // 当达到指定层级时，将 children 属性置为空数组
+        obj.children = [];
+        return;
+      }
+      if (obj.children && obj.children.length > 0) {
+        // 若存在 children 数组，则递归处理每个子项
+        for (let i = 0; i < obj.children.length; i++) {
+          this.removeChildrenAfterLevel(
+            obj.children[i],
+            currentLevel + 1,
+            targetLevel
+          );
+        }
+      }
+    },
+    // 递归函数，找到最后一层的第一个子节点
+    findLastLevelFirstChild(node, level = 1) {
+      if (!node.children || node.children.length === 0) {
+        return {
+          id: node.id,
+          level,
+          label: node.label,
+        };
+      }
+      return this.findLastLevelFirstChild(node.children[0], level + 1);
+    },
+    // 默认只展示一二级菜单
+    getExpandedKeys(nodes, level) {
+      nodes.forEach((node) => {
+        if (level <= this.currentId + 4) {
+          this.expandedKeys.push(node.id);
+        }
+        if (node.children) {
+          this.getExpandedKeys(node.children, level + 1);
+        }
+      });
+    },
+    // 更换图标
+    getIconClass(node) {
+      // console.log("当前图标的节点内容", node);
+      if (node.level === 4) {
+        // 4级菜单时的图标
+        if (node.expanded) {
+          return "el-icon-document-opened"; // 三级菜单展开时的图标类名
+        }
+        return "el-icon-document"; // 三级菜单收缩时的图标类名
+      }
+      if (node.expanded) {
+        return "el-icon-folder-opened"; // 非三级菜单展开时的图标类名
+      }
+      return "el-icon-folder-add"; // 非三级菜单收缩时的图标类名
+    },
+    handleNodeExpand(node) {
+      // 节点展开时触发
+    },
+    handleNodeCollapse(node) {
+      // 节点收缩时触发
+    },
+    // 点击当前节点，保存节点内容
+    handleNodeClick(node, data) {
+      console.log("点击的当前节点", node, data);
+      if (data.level !== 4) {
+        console.log("不是第4层000");
+        // 设置当前选中的节点,默认高亮
+        this.$refs.tree.setCurrentKey(this.currentId);
+        console.log("当前选中节点ID", this.currentId);
+        console.log("当前选中节点层级", this.currentLevel);
+        console.log("当前选中节点名称", this.currentName);
+      } else {
+        console.log("第4层111");
+        this.currentId = node.id;
+        this.currentLevel = data.level;
+        this.currentName = node.label;
+        // 设置当前选中的节点,默认高亮
+        this.$refs.tree.setCurrentKey(this.currentId);
+        console.log("当前选中节点ID", this.currentId);
+        console.log("当前选中节点层级", this.currentLevel);
+        console.log("当前选中节点名称", this.currentName);
+        this.baseMessgae();
+        this.sysStatus();
+      }
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+      console.log("activeName", this.activeName);
+    },
+    //查询单个热泵状态 点击表格的某一行
+    handlerow(row, event, column) {
+      console.log("row", row);
+      //水位 温度 热泵名称
+      this.progress = row.waterLevel;
+      this.temdata = row.waterTemp;
+      this.pumname = row.pumpName;
+      // 热泵状态 是否故障
+      this.hotPumState = row.runState;
+      this.isBad = row.isFault;
+      this.useWaterState = row.useWaterState;
+      this.upWaterState1 = row.upWaterState1;
+      this.upWaterState2 = row.upWaterState2;
+      this.backWaterState = row.backWaterState;
+      console.log("补水阀状态11111111111111111111", this.useWaterState);
+    },
+    /* 加入小手状态 */
+    tableRowStyle({ row, column, rowIndex, columnIndex }) {
+      if (row) {
+        return "cursor:pointer;text-align:center";
+      }
+    },
+    // 公共信息
+    baseMessgae() {
+      let data = {
+        systemType: "1",
+        floorId: this.currentId,
+      };
+      waterPublic(data).then((res) => {
+        console.log("公共信息返回", res);
+        if (res.code == 200 && res.rows.length > 0) {
+          this.baseTable = [];
+          res.rows.forEach((item) => {
+            // 初始化一个空对象来存储阀门处理后的结果
+            let baseltem = {
+              name: item.name,
+            };
+            if (item.name.includes("温度")) {
+              baseltem.unit = "℃";
+            }
+            if (item.name.includes("压力")) {
+              baseltem.unit = "bar";
+            }
+            if (item.value.includes("采集失败")) {
+              baseltem.value = "0";
+            } else {
+              baseltem.value = item.value;
+            }
+            // 将处理后的对象添加到 deviceList 中
+            if (Object.keys(baseltem).length > 1) {
+              this.baseTable.push(baseltem);
+            }
+          });
+          console.log("处理后的公共信息返回", this.baseTable);
+        }
+      });
+    },
+    // 系统状态显示
+    sysStatus() {
+      let data = {
+        systemType: "1",
+        floorId: this.currentId,
+      };
+      waterMonitorList(data).then((res) => {
+        console.log("系统状态返回", res);
+        if (res.code == 200 && res.rows.length > 0) {
+          this.tableData = [];
+          res.rows.forEach((item) => {
+            let deviceItem = {
+              ...item,
+              runState: Number(item.runState) == 0 ? "0" : "1", //运行状态
+              upWaterState: Number(item.upWaterState) == 0 ? "0" : "1", //供水状态
+              isFault: Number(item.isFault) == 0 ? "0" : "1", //故障状态
+            };
+            this.tableData.push(deviceItem);
+          });
+          console.log("处理后的tableData", this.tableData);
+          if (this.tableData.length > 0) {
+            // 获取第一行数据
+            const firstRow = this.tableData[0];
+            // 模拟点击第一行
+            this.handlerow(firstRow);
+            // 设置当前选中行
+            this.$refs.maintable.setCurrentRow(firstRow);
+          }
+        } else {
+          this.tableData = [];
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.buildingDiv {
+  padding-left: 54px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 20px;
+  position: relative;
+  .title-bg {
+    width: 208px;
+    height: 38px;
+    position: absolute;
+    left: 0;
+    z-index: 0;
+  }
+  .title-word {
+    z-index: 10;
+    font-family: YouSheBiaoTiHei;
+    font-size: 24px;
+    color: #ffffff;
+    white-space: nowrap;
+  }
+}
+.app-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+  height: 100%;
+  .left-tree {
+    width: 256px;
+    padding: 15px 10px 10px 10px;
+    border: 1px solid #004b8c;
+    .status {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-top: 20px;
+      .status-li {
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 15px;
+      }
+      .status1,
+      .status2,
+      .status3,
+      .status4 {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 5px;
+      }
+      .status1::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: #00d2ff;
+        margin-right: 5px;
+      }
+      .status2::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: #ff2f2f;
+        margin-right: 5px;
+      }
+      .status3::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: #ff9908;
+        margin-right: 5px;
+      }
+      .status4::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: #7398c7;
+        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;
+        font-style: italic;
+        color: #d1d6df;
+        margin-bottom: 20px;
+      }
+      .base-height {
+        height: 2.02rem;
+        overflow-y: auto;
+        .base-li {
+          margin-bottom: 20px;
+          .deepColor {
+            display: inline-block;
+            margin: 0 10px 0 5px;
+            color: #20ebfa;
+            font-weight: bold;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+  .right-monitor {
+    width: calc(100% - 280px);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    .folw {
+      width: 100%;
+      margin-top: -0.2rem;
+
+      .changeimage {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .flowimg {
+          width: 12.27rem;
+          height: 4.6rem;
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          position: relative;
+
+          .bigMove {
+            width: 12.27rem;
+            height: 4.6rem;
+            position: absolute;
+            top: 0;
+          }
+
+          .flow-text {
+            font-size: 0.17rem;
+            line-height: 0.18rem;
+            letter-spacing: 0.01rem;
+            color: #fefefe;
+          }
+
+          .text1 {
+            position: absolute;
+            top: 2.9rem;
+            left: 0.6rem;
+            z-index: 1;
+          }
+
+          .text2 {
+            position: absolute;
+            top: 0.22rem;
+            left: 5.3rem;
+            z-index: 1;
+          }
+
+          .text3 {
+            position: absolute;
+            top: 0.6rem;
+            width: 0.4rem;
+            right: 1.2rem;
+            line-height: 0.28rem;
+            z-index: 1;
+          }
+
+          .text4 {
+            position: absolute;
+            top: 2.6rem;
+            right: 0.5rem;
+            z-index: 1;
+          }
+
+          .text5 {
+            position: absolute;
+            top: 4.2rem;
+            left: 2.1rem;
+            z-index: 1;
+          }
+
+          .text6 {
+            position: absolute;
+            top: 4.27rem;
+            left: 0.6rem;
+            z-index: 1;
+          }
+
+          .text7 {
+            position: absolute;
+            top: 2.6rem;
+            left: 5.6rem;
+            z-index: 1;
+          }
+          .text8 {
+            position: absolute;
+            top: 0.5rem;
+            left: 1.4rem;
+            z-index: 1;
+          }
+
+          .replenish {
+            position: absolute;
+            top: 0.7rem;
+            left: 0rem;
+            width:2.55rem;
+            height: 0.34rem;
+            z-index: 1;
+          }
+
+          .supply {
+            position: absolute;
+            top: 0rem;
+            left: 0rem;
+            width: 12.3rem;
+            height: 4.6rem;
+            z-index: 0;
+          }
+
+          .circulate {
+            position: absolute;
+            top: 1.5rem;
+            left: 4.8rem;
+            width: 3.5rem;
+            height: 0.7rem;
+          }
+
+          .coolpum {
+            width: 1rem;
+            height: 0.78rem;
+            position: absolute;
+            top: 2rem;
+            left: 0.5rem;
+            z-index: 2;
+          }
+
+          .waterpum {
+            width: 1rem;
+            height: 0.78rem;
+            position: absolute;
+            top: 3.37rem;
+            left: 0.5rem;
+          }
+          .buwaterpum {
+            width: 8.5rem;
+            height: 2.9rem;
+            position: absolute;
+            top: -0.1rem;
+            right: -0.02rem;
+            z-index: 2;
+          }
+          .buwaterpum2 {
+            width: 8.5rem;
+            height: 4.4rem;
+            position: absolute;
+            top: -0.9rem;
+            right: -0.02rem;
+            z-index: 2;
+          }
+
+          .cirpum {
+            width: 1rem;
+            height: 0.78rem;
+            position: absolute;
+            top: 1.68rem;
+            left: 5.64rem;
+          }
+
+          .hotpum {
+            width: 2.2rem;
+            height: 2.2rem;
+            position: absolute;
+            top: 1.2rem;
+            left: 7.9rem;
+          }
+
+          .web {
+            width: 0.78rem;
+            height: 1.12rem;
+            position: absolute;
+            top: 0.26rem;
+            right: 0.36rem;
+          }
+
+          .tem {
+            width: 0.8rem;
+            height: 1.5rem;
+            position: absolute;
+            top: 1.68rem;
+            left: 4rem;
+            z-index: 3;
+          }
+
+          .temContainer {
+            width: 0.076rem;
+            height: 0.84rem;
+            background-color: #02072d;
+            // background-color: #11aaea;
+            position: absolute;
+            top: 2.17rem;
+            left: 4.36rem;
+            z-index: 3;
+
+            .temprogress {
+              background-color: #d22727;
+              width: 100%;
+              position: absolute;
+              bottom: 0;
+              z-index: 3;
+            }
+          }
+
+          .waterBox {
+            position: absolute;
+            top: 0.3rem;
+            left: 2.47rem;
+            width: 2.86rem;
+            height: 3.32rem;
+            z-index: 2;
+          }
+
+          .temdiv {
+            font-size: 0.15rem;
+            line-height: 0.18rem;
+            letter-spacing: 0.01rem;
+            color: #d22727;
+            position: absolute;
+            top: 3.26rem;
+            left: 4.3rem;
+            z-index: 3;
+          }
+
+          .progressContainer1 {
+            width: 0.42rem;
+            height: 2.03rem;
+            background-color: #dff1fa;
+            margin-left: 2%;
+            position: absolute;
+            top: 1.47rem;
+            left: 2.6rem;
+            border: solid 0.01rem #11aaea;
+            z-index: 3;
+
+            .progress {
+              background-color: #1c89ee;
+              width: 100%;
+              position: absolute;
+              bottom: 0;
+              z-index: 3;
+            }
+
+            b {
+              font-family: AdobeHeitiStd-Regular;
+              font-size: 0.17rem;
+              line-height: 0.2rem;
+              letter-spacing: 0rem;
+              color: #d22727;
+              position: absolute;
+              top: -0.3rem;
+              z-index: 3;
+            }
+          }
+
+          .progressContainer2 {
+            width: 0.42rem;
+            height: 2.03rem;
+            background-color: #dff1fa;
+            margin-left: 2%;
+            position: absolute;
+            top: 1.45rem;
+            left: 2.6rem;
+            border: solid 0.01rem red;
+            z-index: 3;
+
+            .progress {
+              background-color: red;
+              width: 100%;
+              position: absolute;
+              bottom: 0;
+              z-index: 3;
+            }
+
+            b {
+              font-family: AdobeHeitiStd-Regular;
+              font-size: 0.17rem;
+              line-height: 0.2rem;
+              letter-spacing: 0rem;
+              color: #d22727;
+              position: absolute;
+              top: -0.3rem;
+              z-index: 3;
+            }
+          }
+
+          .pumname {
+            font-size: 0.17rem;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 0.2rem;
+            letter-spacing: 0.01rem;
+            color: #fefefe;
+            position: absolute;
+            top: 0.8rem;
+            left: 8.8rem;
+            z-index: 1;
+          }
+        }
+      }
+
+      .changecontent {
+        background: #142c4e;
+        border-radius: 6px;
+        height: 300px;
+        padding: 15px 10px 0 10px;
+        overflow: hidden;
+        margin-top: 30px;
+
+        .tablemaeta {
+          font-family: SourceHanSansCN-Medium;
+          font-size: 18px;
+          font-style: italic;
+          color: #d1d6df;
+          margin-bottom: 20px;
+        }
+      }
+    }
+  }
+}
+.tree-container {
+  height: 300px; /* 设置固定高度 */
+  overflow-y: auto; /* 启用垂直滚动条 */
+}
+// 滚动条
+:-webkit-scrollbar {
+  width: 10px; /* 滚动条宽度 */
+}
+
+::-webkit-scrollbar-track {
+  background: transparent !important; /* 滚动条轨道背景色 */
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  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);
+  }
+}
+@media (min-width: 1120px) and (max-width: 1270px) {
+  .changeimage {
+    transform: scale(0.8);
+  }
+}
+@media (min-width: 990px) and (max-width: 1120px) {
+  .changeimage {
+    transform: scale(0.7);
+  }
+}
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .base-mes {
+    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.02rem !important;
+      .base-li {
+        margin-bottom: 0.2rem !important;
+        .deepColor {
+          margin: 0 0.1rem 0 0.05rem !important;
+          font-size: 0.18rem !important;
+        }
+      }
+    }
+  }
+  .changecontent {
+    border-radius: 0.06rem !important;
+    height: 3rem !important;
+    padding: 0.15rem 0.1rem 0 0.1rem !important;
+    margin-top: 0.3rem !important;
+
+    .tablemaeta {
+      font-size: 0.18rem !important;
+      margin-bottom: 0.2rem !important;
+    }
+  }
+}
+</style>
+<style scoped>
+/* 自定义高亮颜色 */
+.left-tree
+  >>> .el-tree--highlight-current
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+  background-color: #285b9e !important;
+  /* color: #f56c6c;  */
+  color: #25f1f8;
+}
+</style>
diff --git a/src/views/hotWater/waterMonitor/index.vue b/src/views/hotWater/waterMonitor/index.vue
index 045da6e..b5aec39 100644
--- a/src/views/hotWater/waterMonitor/index.vue
+++ b/src/views/hotWater/waterMonitor/index.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <div class="left-tree">
       <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
-      <div style="height: 5.08rem; overflow-y: auto">
+      <div style="height: 4.5rem; overflow-y: auto">
         <el-tree
           ref="tree"
           :data="treeData"
@@ -155,7 +155,144 @@
               alt=""
             />
             <!-- 热泵定位 -->
-            <img
+            <div :class="getHotPumPositionClass">
+              <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="" />
+                    <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
+                      -->
+                    <img
+                      class="tem2"
+                      src="../../../assets/flowimg/thermometer.png"
+                      alt=""
+                    />
+                    <div class="temContainer2">
+                      <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="" />
+                    <div class="hotPump-name">{{ item.pumpName }}</div>
+                    <img
+                      class="tem2"
+                      src="../../../assets/flowimg/thermometer.png"
+                      alt=""
+                    />
+                    <div class="temContainer2">
+                      <div
+                        class="temprogress"
+                        :style="{ height: item.waterTemp + '%' }"
+                      ></div>
+                    </div>
+                    <b class="temdiv2">{{ item.waterTemp }}℃</b>
+                  </template>
+                </template>
+                <template v-else-if="tableData.length === 4">
+                  <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=""
+                      />
+                      <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
+                      -->
+                      <img
+                        class="tem2"
+                        src="../../../assets/flowimg/thermometer.png"
+                        alt=""
+                      />
+                      <div class="temContainer2">
+                        <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=""
+                      />
+                      <div class="temContainer1">
+                        <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=""
+                      />
+                      <div class="hotPump-name">{{ item.pumpName }}</div>
+                      <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
+                      -->
+                      <img
+                        class="tem2"
+                        src="../../../assets/flowimg/thermometer.png"
+                        alt=""
+                      />
+                      <div class="temContainer2">
+                        <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=""
+                      />
+                      <div class="hotPump-name">{{ item.pumpName }}</div>
+                      <img
+                        class="tem1"
+                        src="../../../assets/flowimg/thermometer.png"
+                        alt=""
+                      />
+                      <div class="temContainer1">
+                        <div
+                          class="temprogress"
+                          :style="{ height: item.waterTemp + '%' }"
+                        ></div>
+                      </div>
+                      <b class="temdiv1">{{ item.waterTemp }}℃</b>
+                    </template>
+                  </template>
+                </template>
+              </div>
+            </div>
+            <!-- 热泵名称定位 -->
+            <!-- <div class="pumname">{{ this.pumname }}</div> -->
+            <!-- 热泵定位 -->
+            <!-- <img
               class="hotpum"
               v-if="this.hotPumState === '1' && this.isBad !== '1'"
               src="../../../assets/flowimg/starthotpum.png"
@@ -172,7 +309,7 @@
               v-else
               src="../../../assets/flowimg/closehotpum.png"
               alt=""
-            />
+            /> -->
             <!-- 无线网关定位 无状态。-->
             <img
               class="web"
@@ -189,30 +326,46 @@
               src="../../../assets/flowimg/waterBox.png"
               alt=""
             />
-            <!-- 热泵名称定位 -->
-            <div class="pumname">{{ this.pumname }}</div>
-            <!-- 温度定位 -->
-            <img
-              class="tem"
+            <!-- 温度定位1 -->
+            <!-- <img
+              class="tem1"
               src="../../../assets/flowimg/thermometer.png"
               alt=""
             />
-            <div class="temContainer">
+            <div class="temContainer1">
               <div class="temprogress" :style="{ height: temdata + '%' }"></div>
             </div>
-            <b class="temdiv">{{ temdata }}℃</b>
-            <!-- 水位定位 -->
-            <div class="progressContainer1" v-if="progress > 50">
-              <div class="progress" :style="{ height: progress + '%' }">
-                <!-- <b class="propo">{{ progress }}%</b> -->
-              </div>
-              <!-- 水位定位 -->
-              <b class="propo">{{ progress }}%</b>
+            <b class="temdiv1">{{ temdata }}℃</b> -->
+            <!-- 温度定位2 -->
+            <!-- <img
+              class="tem2"
+              src="../../../assets/flowimg/thermometer.png"
+              alt=""
+            />
+            <div class="temContainer2">
+              <div class="temprogress" :style="{ height: temdata + '%' }"></div>
+            </div>
+            <b class="temdiv2">{{ temdata }}℃</b> -->
+            <!-- 水位定位1 -->
+            <div class="progressContainer1" v-if="progress1 > 50">
+              <div class="progress" :style="{ height: progress1 + '%' }"></div>
+              <b class="propo">{{ progress1 }}%</b>
             </div>
             <div class="progressContainer2" v-else>
-              <div class="progress" :style="{ height: progress + '%' }"></div>
-              <b class="propo">{{ progress }}%</b>
+              <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>
+              <b class="propo">{{ progress2 }}%</b>
             </div>
+            <div class="progressContainer4" v-else>
+              <div class="progress" :style="{ height: progress2 + '%' }"></div>
+              <b class="propo">{{ progress2 }}%</b>
+            </div>
+            <div class="progressName2">{{ progressName2 }}</div>
           </div>
         </div>
         <div class="changecontent">
@@ -251,22 +404,42 @@
                 <span>{{ row.waterTemp }} </span>
               </template>
             </el-table-column>
+            <!-- 裙楼、高区 -->
+            <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"
+            >
+              <template slot-scope="{ row }">
+                <span>{{ row.waterLevel1 }} </span>
+              </template>
+            </el-table-column>
+            <!-- 中厨、中区 -->
             <el-table-column
-              prop="levelSet"
-              label="设置水位(%)"
+              prop="levelSet2"
+              label="设置水位2(%)"
               min-width="100"
             >
               <template slot-scope="{ row }">
-                <span>{{ row.levelSet }}</span>
+                <span>{{ row.levelSet2 }}</span>
               </template>
             </el-table-column>
             <el-table-column
-              prop="waterLevel"
-              label="实际水位(%)"
+              prop="waterLevel2"
+              label="实际水位2(%)"
               min-width="100"
             >
               <template slot-scope="{ row }">
-                <span>{{ row.waterLevel }} </span>
+                <span>{{ row.waterLevel2 }} </span>
               </template>
             </el-table-column>
             <el-table-column prop="upWaterState1" label="供水泵1状态">
@@ -313,7 +486,7 @@
 </template>
 
 <script>
-import { spaceTree } from "@/api/region";
+import { floorTree } from "@/api/region";
 import { waterPublic, waterMonitorList } from "@/api/hotWater/waterMonitor";
 export default {
   data() {
@@ -345,19 +518,43 @@ export default {
       // 网关在线状态 0表示离线 1表示在线
       webstate: 1,
       // 水位变化数值
-      progress: 0,
+      progress1: 0,
+      progress2: 0,
+      progressName1: "",
+      progressName2: "",
       // 温度变化数值
       temdata: 0,
       // 热泵名称
       pumname: "",
     };
   },
+  computed: {
+    getHotPumPositionClass() {
+      if (this.tableData.length === 4) {
+        return "hotPumPosition-four";
+      } else if (this.tableData.length === 2) {
+        return "hotPumPosition-two";
+      }
+      return "";
+    },
+  },
   mounted() {
     this.getSysBuild();
   },
   methods: {
+    getImageSrc(item) {
+      console.log("item", item);
+      if (item.runState === "1" && item.isFault !== "1") {
+        // 使用 require 函数导入图片
+        return require("@/assets/flowimg/starthotpum.png");
+      } else if (item.isFault === "1") {
+        return require("@/assets/flowimg/badhotpum.png");
+      } else {
+        return require("@/assets/flowimg/closehotpum.png");
+      }
+    },
     getSysBuild() {
-      spaceTree().then((res) => {
+      floorTree().then((res) => {
         if (res.code == 200) {
           // 只需要保留热水的系统
           console.log("楼栋返回值", res);
@@ -397,6 +594,13 @@ export default {
               console.log("当前选中节点ID", this.currentId);
               console.log("当前选中节点层级", this.currentLevel);
               console.log("当前选中节点名称", this.currentName);
+              if (this.currentName === "-1楼") {
+                this.progressName1 = "裙楼";
+                this.progressName2 = "中厨";
+              } else if (this.currentName === "3楼") {
+                this.progressName1 = "高区";
+                this.progressName2 = "中区";
+              }
               this.baseMessgae();
               this.sysStatus();
             }
@@ -488,6 +692,13 @@ export default {
         this.baseMessgae();
         this.sysStatus();
       }
+      if (this.currentName === "-1楼") {
+        this.progressName1 = "裙楼";
+        this.progressName2 = "中厨";
+      } else if (this.currentName === "3楼") {
+        this.progressName1 = "高区";
+        this.progressName2 = "中区";
+      }
     },
     handleClick(tab, event) {
       console.log(tab, event);
@@ -497,7 +708,8 @@ export default {
     handlerow(row, event, column) {
       console.log("row", row);
       //水位 温度 热泵名称
-      this.progress = row.waterLevel;
+      this.progress1 = row.waterLevel1;
+      this.progress2 = row.waterLevel2;
       this.temdata = row.waterTemp;
       this.pumname = row.pumpName;
       // 热泵状态 是否故障
@@ -690,7 +902,7 @@ export default {
         margin-bottom: 20px;
       }
       .base-height {
-        height: 2.02rem;
+        height: 2.6rem;
         overflow-y: auto;
         .base-li {
           margin-bottom: 20px;
@@ -787,8 +999,8 @@ export default {
 
           .text7 {
             position: absolute;
-            top: 2.6rem;
-            left: 5.6rem;
+            top: 3.1rem;
+            left: 5.75rem;
             z-index: 1;
           }
           .text8 {
@@ -802,7 +1014,7 @@ export default {
             position: absolute;
             top: 0.7rem;
             left: 0rem;
-            width:2.55rem;
+            width: 2.55rem;
             height: 0.34rem;
             z-index: 1;
           }
@@ -821,7 +1033,7 @@ export default {
             top: 1.5rem;
             left: 4.8rem;
             width: 3.5rem;
-            height: 0.7rem;
+            height: 1.2rem;
           }
 
           .coolpum {
@@ -861,7 +1073,7 @@ export default {
             width: 1rem;
             height: 0.78rem;
             position: absolute;
-            top: 1.68rem;
+            top: 2.15rem;
             left: 5.64rem;
           }
 
@@ -881,23 +1093,50 @@ export default {
             right: 0.36rem;
           }
 
-          .tem {
-            width: 0.8rem;
-            height: 1.5rem;
+          .tem1 {
+            width: 0.6rem;
+            height: 1.15rem;
             position: absolute;
-            top: 1.68rem;
-            left: 4rem;
+            top: 2.25rem;
+            left: 3.2rem;
             z-index: 3;
           }
 
-          .temContainer {
-            width: 0.076rem;
-            height: 0.84rem;
+          .tem2 {
+            width: 0.6rem;
+            height: 1.15rem;
+            position: absolute;
+            top: 2.25rem;
+            left: 4.51rem;
+            z-index: 3;
+          }
+
+          .temContainer1 {
+            width: 0.06rem;
+            height: 0.65rem;
+            background-color: #02072d;
+            // background-color: #11aaea;
+            position: absolute;
+            top: 2.63rem;
+            left: 3.46rem;
+            z-index: 3;
+
+            .temprogress {
+              background-color: #d22727;
+              width: 100%;
+              position: absolute;
+              bottom: 0;
+              z-index: 3;
+            }
+          }
+          .temContainer2 {
+            width: 0.06rem;
+            height: 0.65rem;
             background-color: #02072d;
             // background-color: #11aaea;
             position: absolute;
-            top: 2.17rem;
-            left: 4.36rem;
+            top: 2.63rem;
+            left: 4.77rem;
             z-index: 3;
 
             .temprogress {
@@ -918,30 +1157,40 @@ export default {
             z-index: 2;
           }
 
-          .temdiv {
+          .temdiv1 {
             font-size: 0.15rem;
             line-height: 0.18rem;
             letter-spacing: 0.01rem;
             color: #d22727;
             position: absolute;
-            top: 3.26rem;
-            left: 4.3rem;
+            top: 2.15rem;
+            left: 3.2rem;
+            z-index: 3;
+          }
+          .temdiv2 {
+            font-size: 0.15rem;
+            line-height: 0.18rem;
+            letter-spacing: 0.01rem;
+            color: #d22727;
+            position: absolute;
+            top: 2.15rem;
+            left: 4.5rem;
             z-index: 3;
           }
 
           .progressContainer1 {
-            width: 0.42rem;
-            height: 2.03rem;
+            width: 0.3rem;
+            height: 1.7rem;
             background-color: #dff1fa;
             margin-left: 2%;
             position: absolute;
-            top: 1.47rem;
-            left: 2.6rem;
+            top: 1.8rem;
+            left: 2.8rem;
             border: solid 0.01rem #11aaea;
             z-index: 3;
 
             .progress {
-              background-color: #1c89ee;
+              background-color: #1167db;
               width: 100%;
               position: absolute;
               bottom: 0;
@@ -961,13 +1210,73 @@ export default {
           }
 
           .progressContainer2 {
-            width: 0.42rem;
-            height: 2.03rem;
+            width: 0.3rem;
+            height: 1.7rem;
             background-color: #dff1fa;
             margin-left: 2%;
             position: absolute;
-            top: 1.45rem;
-            left: 2.6rem;
+            top: 1.8rem;
+            left: 2.8rem;
+            border: solid 0.01rem red;
+            z-index: 3;
+
+            .progress {
+              background-color: red;
+              width: 100%;
+              position: absolute;
+              bottom: 0;
+              z-index: 3;
+            }
+
+            b {
+              font-family: AdobeHeitiStd-Regular;
+              font-size: 0.17rem;
+              line-height: 0.2rem;
+              letter-spacing: 0rem;
+              color: #d22727;
+              position: absolute;
+              top: -0.3rem;
+              z-index: 3;
+            }
+          }
+          .progressContainer3 {
+            width: 0.3rem;
+            height: 1.7rem;
+            background-color: #dff1fa;
+            margin-left: 2%;
+            position: absolute;
+            top: 1.8rem;
+            left: 4.2rem;
+            border: solid 0.01rem #11aaea;
+            z-index: 3;
+
+            .progress {
+              background-color: #1167db;
+              width: 100%;
+              position: absolute;
+              bottom: 0;
+              z-index: 3;
+            }
+
+            b {
+              font-family: AdobeHeitiStd-Regular;
+              font-size: 0.17rem;
+              line-height: 0.2rem;
+              letter-spacing: 0rem;
+              color: #d22727;
+              position: absolute;
+              top: -0.3rem;
+              z-index: 3;
+            }
+          }
+          .progressContainer4 {
+            width: 0.3rem;
+            height: 1.7rem;
+            background-color: #dff1fa;
+            margin-left: 2%;
+            position: absolute;
+            top: 1.8rem;
+            left: 4.2rem;
             border: solid 0.01rem red;
             z-index: 3;
 
@@ -990,6 +1299,30 @@ export default {
               z-index: 3;
             }
           }
+          .progressName1 {
+            font-size: 0.17rem;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 0.2rem;
+            letter-spacing: 0.01rem;
+            color: #0a3797;
+            position: absolute;
+            top: 2rem;
+            left: 2.6rem;
+            z-index: 3;
+          }
+          .progressName2 {
+            font-size: 0.17rem;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 0.2rem;
+            letter-spacing: 0.01rem;
+            color: #0a3797;
+            position: absolute;
+            top: 2rem;
+            left: 4rem;
+            z-index: 3;
+          }
 
           .pumname {
             font-size: 0.17rem;
@@ -1003,14 +1336,240 @@ export default {
             left: 8.8rem;
             z-index: 1;
           }
+          /* 四个元素时的样式 */
+          .hotPumPosition-four {
+            font-size: 0.17rem;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 0.2rem;
+            letter-spacing: 0.01rem;
+            color: #fefefe;
+            position: absolute;
+            top: 0.7rem;
+            left: 7.8rem;
+            z-index: 1;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            width: 2.3rem !important;
+            .hotPump-li {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              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;
+                color: #ee3a7f;
+                font-size: 0.13rem;
+                font-weight: bold;
+              }
+              .hotPump-tem2 {
+                position: absolute;
+                bottom: 0.4rem;
+                color: #ee3a7f;
+                font-size: 0.13rem;
+                font-weight: bold;
+              }
+              .tem1 {
+                width: 0.4rem;
+                height: 0.7rem;
+                position: absolute;
+                top: 0.3rem;
+                left: 1rem;
+                z-index: 3;
+              }
+              .tem2 {
+                width: 0.4rem;
+                height: 0.7rem;
+                position: absolute;
+                top: 0.3rem;
+                left: -0.3rem;
+                z-index: 3;
+              }
+              .temContainer2 {
+                width: 0.042rem;
+                height: 0.4rem;
+                background-color: #02072d;
+                // background-color: #11aaea;
+                position: absolute;
+                top: 0.52rem;
+                left: -0.12rem;
+                z-index: 3;
+
+                .temprogress {
+                  background-color: #d22727;
+                  width: 100%;
+                  position: absolute;
+                  bottom: 0;
+                  z-index: 3;
+                }
+              }
+              .temdiv2 {
+                font-size: 0.15rem;
+                line-height: 0.18rem;
+                letter-spacing: 0.01rem;
+                color: #d22727;
+                position: absolute;
+                top: 1rem;
+                left: -0.5rem;
+                z-index: 3;
+              }
+              .temContainer1 {
+                width: 0.042rem;
+                height: 0.4rem;
+                background-color: #02072d;
+                // background-color: #11aaea;
+                position: absolute;
+                top: 0.52rem;
+                left: 1.18rem;
+                z-index: 3;
+
+                .temprogress {
+                  background-color: #d22727;
+                  width: 100%;
+                  position: absolute;
+                  bottom: 0;
+                  z-index: 3;
+                }
+              }
+              .temdiv1 {
+                font-size: 0.15rem;
+                line-height: 0.18rem;
+                letter-spacing: 0.01rem;
+                color: #d22727;
+                position: absolute;
+                top: 1rem;
+                left: 1.1rem;
+                z-index: 3;
+              }
+            }
+          }
+          /* 两个元素时的样式 */
+          .hotPumPosition-two {
+            font-size: 0.17rem;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 0.2rem;
+            letter-spacing: 0.01rem;
+            color: #fefefe;
+            position: absolute;
+            top: 0.7rem;
+            left: 7.8rem;
+            z-index: 1;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            width: 1.2rem !important;
+            .hotPump-li {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              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;
+                color: #ee3a7f;
+                font-size: 0.13rem;
+                font-weight: bold;
+              }
+              .hotPump-tem2 {
+                position: absolute;
+                bottom: 0.4rem;
+                color: #ee3a7f;
+                font-size: 0.13rem;
+                font-weight: bold;
+              }
+              .tem2 {
+                width: 0.4rem;
+                height: 0.7rem;
+                position: absolute;
+                top: 0.3rem;
+                left: -0.3rem;
+                z-index: 3;
+              }
+              .temContainer2 {
+                width: 0.042rem;
+                height: 0.4rem;
+                background-color: #02072d;
+                // background-color: #11aaea;
+                position: absolute;
+                top: 0.52rem;
+                left: -0.12rem;
+                z-index: 3;
+
+                .temprogress {
+                  background-color: #d22727;
+                  width: 100%;
+                  position: absolute;
+                  bottom: 0;
+                  z-index: 3;
+                }
+              }
+              .temdiv2 {
+                font-size: 0.15rem;
+                line-height: 0.18rem;
+                letter-spacing: 0.01rem;
+                color: #d22727;
+                position: absolute;
+                top: 1rem;
+                left: -0.5rem;
+                z-index: 3;
+              }
+              .temContainer1 {
+                width: 0.042rem;
+                height: 0.4rem;
+                background-color: #02072d;
+                // background-color: #11aaea;
+                position: absolute;
+                top: 0.52rem;
+                left: -0.12rem;
+                z-index: 3;
+
+                .temprogress {
+                  background-color: #d22727;
+                  width: 100%;
+                  position: absolute;
+                  bottom: 0;
+                  z-index: 3;
+                }
+              }
+              .temdiv1 {
+                font-size: 0.15rem;
+                line-height: 0.18rem;
+                letter-spacing: 0.01rem;
+                color: #d22727;
+                position: absolute;
+                top: 1rem;
+                left: -0.5rem;
+                z-index: 3;
+              }
+            }
+          }
         }
       }
 
       .changecontent {
         background: #142c4e;
         border-radius: 6px;
-        height: 300px;
-        padding: 15px 10px 0 10px;
+        height: 310px;
+        padding: 15px 10px 10px 10px;
         overflow: hidden;
         margin-top: 30px;
 
@@ -1076,7 +1635,7 @@ export default {
       margin-bottom: 0.2rem !important;
     }
     .base-height {
-      height: 2.02rem !important;
+      height: 2.6rem !important;
       .base-li {
         margin-bottom: 0.2rem !important;
         .deepColor {
@@ -1088,8 +1647,8 @@ export default {
   }
   .changecontent {
     border-radius: 0.06rem !important;
-    height: 3rem !important;
-    padding: 0.15rem 0.1rem 0 0.1rem !important;
+    height: 3.1rem !important;
+    padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
     margin-top: 0.3rem !important;
 
     .tablemaeta {
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 8ca5522..134b450 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -570,14 +570,14 @@ export default {
 /* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
 @media (max-width: 2000px) {
   ::v-deep .el-dialog {
-    width: 680px !important;
+    width: 700px !important;
   }
   ::v-deep .el-form-item--medium .el-form-item__content {
     width: 100%;
   }
 
   ::v-deep .el-dialog .el-form-item__label {
-    width: 120px !important;
+    width: 140px !important;
   }
   ::v-deep .el-dialog .el-form-item {
     display: flex;
@@ -591,7 +591,7 @@ export default {
   }
 
   ::v-deep .el-dialog .el-form-item__label {
-    width: 1.2rem !important;
+    width: 1.4rem !important;
   }
   ::v-deep .el-dialog .el-form-item {
     display: flex;