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/hotWater/energyAnalysis.js b/src/api/hotWater/energyAnalysis.js
new file mode 100644
index 0000000..6420131
--- /dev/null
+++ b/src/api/hotWater/energyAnalysis.js
@@ -0,0 +1,34 @@
+import request from "@/utils/request";
+
+// 楼层
+export function hotBuildList(query) {
+  return request({
+    url: "/space/building/hot_list",
+    method: "get",
+    params: query,
+  });
+}
+// 楼栋能耗环比
+export function hotEnergySum(query) {
+  return request({
+    url: "/hot_energy/energySum",
+    method: "get",
+    params: query,
+  });
+}
+// 温度变化表
+export function hotWaterTemp(query) {
+  return request({
+    url: "/hot_energy/waterTemp",
+    method: "get",
+    params: query,
+  });
+}
+// 温度变化表
+export function hotWaterLevel(query) {
+  return request({
+    url: "/hot_energy/waterLevel",
+    method: "get",
+    params: query,
+  });
+}
diff --git a/src/api/hotWater/energyQuery.js b/src/api/hotWater/energyQuery.js
new file mode 100644
index 0000000..585a255
--- /dev/null
+++ b/src/api/hotWater/energyQuery.js
@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+// 水电表读数
+export function queryDeviceDatas(query) {
+  return request({
+    url: "/hot_energy/queryDeviceDatas",
+    method: "get",
+    params: query,
+  });
+}
\ No newline at end of file
diff --git a/src/api/hotWater/overview.js b/src/api/hotWater/overview.js
new file mode 100644
index 0000000..f909bd3
--- /dev/null
+++ b/src/api/hotWater/overview.js
@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+// 设备状态
+export function deviceState(query) {
+  return request({
+    url: "/device/hotWater/deviceState",
+    method: "get",
+    params: query,
+  });
+}
+// 楼栋能耗
+export function hotEnergyQuery(query) {
+  return request({
+    url: "/hot_energy/query",
+    method: "get",
+    params: query,
+  });
+}
diff --git a/src/assets/icons/svg/dataAnalysis.svg b/src/assets/icons/svg/dataAnalysis.svg
new file mode 100644
index 0000000..29dfa1d
--- /dev/null
+++ b/src/assets/icons/svg/dataAnalysis.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750837487744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6669" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M930.133333 900.266667H93.866667a8.533333 8.533333 0 0 1-8.533334-8.533334v-25.6a8.533333 8.533333 0 0 1 8.533334-8.533333h836.266666a8.533333 8.533333 0 0 1 8.533334 8.533333v25.6a8.533333 8.533333 0 0 1-8.533334 8.533334zM746.666667 661.333333h-170.666667a8.533333 8.533333 0 0 1-8.533333-8.533333v-25.6a8.533333 8.533333 0 0 1 8.533333-8.533333h170.666667a8.533333 8.533333 0 0 1 8.533333 8.533333v25.6a8.533333 8.533333 0 0 1-8.533333 8.533333z" fill="" p-id="6670"></path><path d="M904.533333 117.333333H119.466667a8.533333 8.533333 0 0 0-8.533334 8.533334v665.6a8.533333 8.533333 0 0 0 8.533334 8.533333h785.066666a8.533333 8.533333 0 0 0 8.533334-8.533333v-665.6a8.533333 8.533333 0 0 0-8.533334-8.533334z m-563.2 149.333334c51.84 0 93.866667 42.026667 93.866667 93.866666s-42.026667 93.866667-93.866667 93.866667-93.866667-42.026667-93.866666-93.866667 42.026667-93.866667 93.866666-93.866666zM247.466667 512a8.533333 8.533333 0 0 1 8.533333-8.533333h170.666667a8.533333 8.533333 0 0 1 8.533333 8.533333v25.6a8.533333 8.533333 0 0 1-8.533333 8.533333H256a8.533333 8.533333 0 0 1-8.533333-8.533333v-25.6z m520.682666-82.709333l-0.149333 0.149333v0.247467l-16.0256 16.0256h-0.247467l-68.053333 68.053333a8.533333 8.533333 0 0 1-12.066133 0l-18.103467-18.103467a8.533333 8.533333 0 0 1 0-12.066133l37.883733-37.883733h-54.135466l-212.241067 212.241066a8.503467 8.503467 0 0 1-6.8736 3.515734H256a8.533333 8.533333 0 0 1-8.533333-8.533334v-25.6a8.533333 8.533333 0 0 1 8.533333-8.533333h147.818667l212.245333-212.245333a8.503467 8.503467 0 0 1 6.8736-3.515734h70.8864l-40.315733-40.315733a8.533333 8.533333 0 0 1 0-12.066133l18.103466-18.103467a8.533333 8.533333 0 0 1 12.066134 0l84.475733 84.475733c1.6896 1.6896 2.513067 3.912533 2.491733 6.126934a8.533333 8.533333 0 0 1-2.496 6.1312z" fill="" p-id="6671"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/energyQuery.svg b/src/assets/icons/svg/energyQuery.svg
new file mode 100644
index 0000000..53f761a
--- /dev/null
+++ b/src/assets/icons/svg/energyQuery.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750837471498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4744" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 64H128c-35.328 0-64 28.672-64 64v768c0 35.328 28.672 64 64 64h592a32 32 0 1 0 0-64H128V128h768v592a32 32 0 1 0 64 0V128c0-35.328-28.672-64-64-64z m-104.256 682.496A206.72 206.72 0 0 0 832 624 208.256 208.256 0 0 0 624 416 208.256 208.256 0 0 0 416 624 208.256 208.256 0 0 0 624 832c44.096 0 87.04-14.08 122.496-40.256l110.848 110.848a31.936 31.936 0 0 0 54.656-22.592 32 32 0 0 0-9.344-22.656l-110.912-110.848zM480 624c0-79.36 64.64-144 144-144S768 544.64 768 624 703.36 768 624 768 480 703.36 480 624z m320-360a32 32 0 0 0-32-32H256a32 32 0 0 0 0 64h512a32 32 0 0 0 32-32zM256 422.656a32 32 0 0 0 0 64h96a32 32 0 0 0 0-64H256z" fill="" p-id="4745"></path></svg>
\ No newline at end of file
diff --git a/src/views/hotWater/energyAnalysis/components/energyReport.vue b/src/views/hotWater/energyAnalysis/components/energyReport.vue
index f08f015..1b434da 100644
--- a/src/views/hotWater/energyAnalysis/components/energyReport.vue
+++ b/src/views/hotWater/energyAnalysis/components/energyReport.vue
@@ -5,13 +5,19 @@
         <img class="use-icon" src="../../../../assets/images/use1.png" alt="" />
         <div class="use-text">
           <div>用水量(吨)</div>
-          <div class="data-text">2</div>
+          <div class="data-text">{{ useWater }}</div>
         </div>
         <div class="use-text">
-          <div>与昨日相比</div>
-          <div class="downText">
+          <div v-if="dateType === 'day'">与昨日相比</div>
+          <div v-if="dateType === 'month'">与上月相比</div>
+          <div v-if="dateType === 'year'">与上年相比</div>
+          <div class="upText" v-if="useWaterRadio > 0">
             <i class="el-icon-bottom"></i>
-            <span>-10%</span>
+            <span>+{{ useWaterRadio }}</span>
+          </div>
+          <div class="downText" v-else>
+            <i class="el-icon-bottom"></i>
+            <span>-{{ useWaterRadio }}</span>
           </div>
         </div>
         <img
@@ -24,13 +30,19 @@
         <img class="use-icon" src="../../../../assets/images/use2.png" alt="" />
         <div class="use-text">
           <div>用电量(度)</div>
-          <div class="data-text">31.600</div>
+          <div class="data-text">{{ useElect }}</div>
         </div>
         <div class="use-text">
-          <div>与昨日相比</div>
-          <div class="upText">
-            <i class="el-icon-top"></i>
-            <span>64.41%</span>
+          <div v-if="dateType === 'day'">与昨日相比</div>
+          <div v-if="dateType === 'month'">与上月相比</div>
+          <div v-if="dateType === 'year'">与上年相比</div>
+          <div class="upText" v-if="useElectRadio > 0">
+            <i class="el-icon-bottom"></i>
+            <span>+{{ useElectRadio }}</span>
+          </div>
+          <div class="downText" v-else>
+            <i class="el-icon-bottom"></i>
+            <span>-{{ useElectRadio }}</span>
           </div>
         </div>
         <img
@@ -43,13 +55,19 @@
         <img class="use-icon" src="../../../../assets/images/use3.png" alt="" />
         <div class="use-text">
           <div>单耗(度/吨)</div>
-          <div class="data-text">2</div>
+          <div class="data-text">{{ useUnit }}</div>
         </div>
         <div class="use-text">
-          <div>与昨日相比</div>
-          <div class="upText">
-            <i class="el-icon-top"></i>
-            <span>64.41%</span>
+          <div v-if="dateType === 'day'">与昨日相比</div>
+          <div v-if="dateType === 'month'">与上月相比</div>
+          <div v-if="dateType === 'year'">与上年相比</div>
+          <div class="upText" v-if="useUnitRadio > 0">
+            <i class="el-icon-bottom"></i>
+            <span>+{{ useUnitRadio }}</span>
+          </div>
+          <div class="downText" v-else>
+            <i class="el-icon-bottom"></i>
+            <span>-{{ useUnitRadio }}</span>
           </div>
         </div>
         <img
@@ -70,7 +88,7 @@
           <el-option
             v-for="(item, index) in builds"
             :key="index"
-            :label="item.label"
+            :label="item.building_name"
             :value="item.id"
           />
         </el-select>
@@ -131,7 +149,7 @@
           <el-button type="success" @click="findData">查询</el-button>
         </div>
         <div class="warning-btn">
-          <el-button type="warning" @click="exportData">导出</el-button>
+          <el-button type="warning" @click="goExport">导出</el-button>
         </div>
       </div>
     </div>
@@ -147,25 +165,19 @@
       </div>
     </div>
     <div class="charts" ref="chart_ref"></div>
-    <el-table
-      v-loading="loading"
-      :data="postList"
-      stripe
-      :cell-style="tableRowStyle"
-    >
-      <el-table-column label="日期" align="center" prop="dateAndWeek" />
-      <el-table-column label="所属楼栋" align="center" prop="maxTemp" />
-      <el-table-column label="用水量(吨)" align="center" prop="minTemp" />
+    <el-table :data="tableData" stripe>
+      <el-table-column label="日期" align="center" prop="curDate" />
       <el-table-column
-        label="用电量(度)"
+        label="所属楼栋"
+        v-if="isBuildNone"
         align="center"
-        prop="weatherConditions"
-      />
-      <el-table-column
-        label="单耗(度/吨)"
-        align="center"
-        prop="windDirection"
+        prop="buildingName"
       />
+      <el-table-column label="用水量(吨)" align="center" prop="useHotWater" />
+      <el-table-column label="用电量(度)" align="center" prop="electValue" />
+      <el-table-column label="单耗(度/吨)" align="center" prop="electWater" />
+      <el-table-column label="楼栋人数" align="center" prop="checkInCount" />
+      <el-table-column label="人均用水(人/升)" align="center" prop="perWater" />
     </el-table>
 
     <pagination
@@ -179,13 +191,14 @@
 </template>
 
 <script>
-import { formatDay } from "@/utils/datetime";
-import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage";
-import { spaceTree } from "@/api/region";
+import { formatDay, getDay, getMonth, getYear } from "@/utils/datetime";
+import { hotBuildList, hotEnergySum } from "@/api/hotWater/energyAnalysis";
+import { hotEnergyQuery } from "@/api/hotWater/overview";
 import * as echarts from "echarts";
 export default {
   data() {
     return {
+      isBuildNone: true,
       listLoading: false,
       dateType: "day", //默认选择天
       dayDate: [], //日值
@@ -196,12 +209,11 @@ export default {
       dialogVisible: false,
       building: "", //选中的楼栋
       builds: [], //楼栋列表
-      // 遮罩层
-      loading: true,
       // 总条数
       total: 0,
       // 表格数据
-      postList: [],
+      tableData: [],
+      exportData: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -217,6 +229,12 @@ export default {
       brokenData2: [],
       brokenData3: [],
       brokenTime: [],
+      useWater: 0,
+      useWaterRadio: 0,
+      useElect: 0,
+      useElectRadio: 0,
+      useUnit: 0,
+      useUnitRadio: 0,
     };
   },
   created() {
@@ -225,11 +243,9 @@ export default {
   mounted() {
     this.initializeTimeDate();
     this.getBuildList();
-    this.getList();
     this.initChart();
     window.addEventListener("resize", this.screenAdapter);
     this.screenAdapter();
-    this.getChartData();
   },
   destroyed() {
     //取消监听器
@@ -242,32 +258,23 @@ export default {
     },
     /** 查询楼栋 */
     getBuildList() {
-      spaceTree().then((res) => {
+      let data = {
+        systemType: "1",
+      };
+      hotBuildList(data).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);
-          }
-          this.builds = newRes.data[0].children[0].children[0].children;
+          this.builds = res.rows;
           //   console.log("筛选后的新结果", this.builds);
-          this.building = this.builds[0].id;
+          this.building = res.rows[0].id;
           this.getList();
+          this.getRadioData();
         }
       });
     },
     // 递归函数，用于去除指定层级往后的 children 数据
+    // 使用this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel);
     removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
       if (currentLevel >= targetLevel) {
         // 当达到指定层级时，将 children 属性置为空数组
@@ -287,21 +294,41 @@ export default {
     },
     // 初始化时间
     initializeTimeDate() {
-      const now = new Date();
-      // 获取当前月份的第一天
-      const start = new Date(now.getFullYear(), now.getMonth(), 1);
-      // 获取当前日期（作为结束时间）
-      const end = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-      this.dayDate = [formatDay(start), formatDay(end)]; // 更新
+      let date = new Date(); //获取新的时间
+      //获取当前年份,并且转为字符串
+      let year = date.getFullYear().toString();
+      //获取当前月份，因为月份是要从0开始，此处要加1，
+      //使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0'
+      let month =
+        date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1).toString()
+          : (date.getMonth() + 1).toString();
+      //获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0'
+      let day =
+        date.getDate() < 10
+          ? "0" + date.getDate().toString()
+          : date.getDate().toString();
+      //字符串拼接，将开始时间和结束时间进行拼接
+      let start1 = year + "-" + month + "-01"; //当月第一天
+      let end1 = year + "-" + month + "-" + day; //当天
+      let start2 = year + "-" + "01"; //当年第一月
+      let end2 = getMonth(0); //当月
+      let start3 = getYear(0) - 1; //去年
+      let end3 = getYear(0); //今年
+      this.dayDate = [start1, end1]; // 更新
+      this.monthDate = [start2, end2];
+      this.startYear = start3.toString();
+      this.endYear = end3.toString();
     },
     // 选择时间类型
     updateDateType() {
-      // this.dateType = this.radio;
       console.log(this.dateType);
-      (this.dayDate = []), //日值
-        (this.monthDate = []), //月值
-        (this.startYear = ""), //开始年份
-        (this.endYear = ""); //结束年份
+      // (this.dayDate = []), //日值
+      //   (this.monthDate = []), //月值
+      //   (this.startYear = ""), //开始年份
+      //   (this.endYear = ""); //结束年份
+      this.getList();
+      this.getRadioData();
     },
     // 选中日期事件
     dateChange() {
@@ -374,6 +401,7 @@ export default {
         default:
           break;
       }
+      this.getRadioData();
     },
     // 显示消息的函数
     showMessage(message, type) {
@@ -382,110 +410,115 @@ export default {
         type: type,
       });
     },
-    //请求数据
+    //请求表格数据
     getList() {
+      let timeType = null;
       if (this.dateType == "day") {
+        timeType = 1;
         this.queryParams.startTime =
           this.dayDate.length > 0 ? this.dayDate[0] : "";
         this.queryParams.endTime =
           this.dayDate.length > 0 ? this.dayDate[1] : "";
       } else if (this.dateType == "month") {
+        timeType = 2;
         this.queryParams.startTime =
           this.monthDate.length > 0 ? this.monthDate[0] : "";
         this.queryParams.endTime =
           this.monthDate.length > 0 ? this.monthDate[1] : "";
       } else if (this.dateType == "year") {
-        (this.queryParams.startTime = this.startYear),
-          (this.queryParams.endTime = this.endYear);
+        timeType = 3;
+        this.queryParams.startTime = this.startYear;
+        this.queryParams.endTime = this.endYear;
       }
       let data = {
-        timeType: this.dateType,
-        startTime: this.queryParams.startTime,
-        endTime: this.queryParams.endTime,
-        building: this.building,
+        type: timeType,
+        page: this.queryParams.pageNum,
+        limit: this.queryParams.pageSize,
+        startDate: this.queryParams.startTime,
+        endDate: this.queryParams.endTime,
+        buildingId: this.building,
       };
-      console.log("查询数据参数", data);
+      console.log("查询表格数据参数", data);
       this.listLoading = true;
+      hotEnergyQuery(data).then((res) => {
+        console.log("表格返回的数据", res);
+        if (res.code == 200 && res.rows.length > 0) {
+          this.tableData = res.rows;
+          this.total = res.total;
+          if (this.building == "所有") {
+            this.isBuildNone = false;
+          } else {
+            this.isBuildNone = true;
+          }
+        } else {
+          this.tableData = [];
+          this.total = 0;
+        }
+        this.getChartData();
+      });
       //   请求数据
       // Just to simulate the time of the request
       setTimeout(() => {
         this.listLoading = false;
       }, 1.0 * 1000);
     },
-    //
+    //请求折线图数据
     getChartData() {
-      this.queryParams.pageNum = 0;
       console.log("图表参数", this.queryParams);
-      this.brokenData1 = [30, 40, 29];
-      this.brokenData2 = [10, 23, 12];
-      this.brokenData3 = [3, 4, 2];
-      this.brokenTime = ["3月", "4月", "5月"];
-      //   weatherTempData(this.queryParams).then((response) => {
-      //     console.log("处理值然后渲染");
-      //     if (response.rows.length > 0) {
-      //       let data = response.rows;
-      //       let timeValue = [];
-      //       let hightValue = [];
-      //       let lowValue = [];
-      //       data.forEach((element) => {
-      //         timeValue.push(element.weatherDate);
-      //         hightValue.push(element.maxTemp);
-      //         lowValue.push(element.minTemp);
-      //       });
-      //       let adapterOption = {};
-      //       adapterOption = {
-      //         xAxis: {
-      //           data: timeValue,
-      //         },
-      //         series: [
-      //           {
-      //             data: hightValue,
-      //             //折线颜色
-      //             itemStyle: {
-      //               color: "rgb(18, 126, 226)", //折线的颜色
-      //             },
-      //             lineStyle: {
-      //               color: "rgb(18, 126, 226)", //折线点的颜色
-      //             },
-      //           },
-      //           {
-      //             data: lowValue,
-      //             //折线颜色
-      //             itemStyle: {
-      //               color: "rgb(250, 169, 19)", //折线的颜色
-      //             },
-      //             lineStyle: {
-      //               color: "rgb(250, 169, 19)", //折线点的颜色
-      //             },
-      //           },
-      //         ],
-      //       };
-      //       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-      //       this.brokenInstanc.setOption(adapterOption);
-      //       //手动的调用图标对象的resize才能产生效果
-      //       this.brokenInstanc.resize();
-      //     } else {
-      //       let adapterOption = {};
-      //       adapterOption = {
-      //         xAxis: {
-      //           data: [],
-      //         },
-      //         series: [
-      //           {
-      //             data: [],
-      //           },
-      //           {
-      //             data: [],
-      //           },
-      //         ],
-      //       };
-      //       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-      //       this.brokenInstanc.setOption(adapterOption);
-      //       //手动的调用图标对象的resize才能产生效果
-      //       this.brokenInstanc.resize();
-      //     }
-      //   });
-      this.renderingBroken();
+      let timeType = null;
+      if (this.dateType == "day") {
+        timeType = 1;
+        this.queryParams.startTime =
+          this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.queryParams.endTime =
+          this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.dateType == "month") {
+        timeType = 2;
+        this.queryParams.startTime =
+          this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.queryParams.endTime =
+          this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.dateType == "year") {
+        timeType = 3;
+        this.queryParams.startTime = this.startYear;
+        this.queryParams.endTime = this.endYear;
+      }
+      let data = {
+        type: timeType,
+        page: this.queryParams.pageNum,
+        limit: this.total,
+        startDate: this.queryParams.startTime,
+        endDate: this.queryParams.endTime,
+        buildingId: this.building,
+      };
+      hotEnergyQuery(data).then((res) => {
+        console.log("图表返回的数据", res);
+        this.brokenData1 = [];
+        this.brokenData2 = [];
+        this.brokenData3 = [];
+        this.brokenTime = [];
+        if (res.code == 200 && res.rows.length > 0) {
+          this.exportData = res.rows;
+          res.rows.forEach((item) => {
+            this.brokenData1.push(item.useHotWater);
+            this.brokenData2.push(item.electValue);
+            this.brokenData3.push(item.electWater);
+            this.brokenTime.push(item.curDate);
+          });
+          // 对数组进行反转操作
+          this.brokenData1.reverse();
+          this.brokenData2.reverse();
+          this.brokenData3.reverse();
+          this.brokenTime.reverse();
+          this.renderingBroken();
+        } else {
+          this.brokenData1 = [];
+          this.brokenData2 = [];
+          this.brokenData3 = [];
+          this.brokenTime = [];
+        }
+        this.renderingBroken();
+      });
     },
     renderingBroken() {
       if (this.currentIndex === 0) {
@@ -552,55 +585,107 @@ export default {
       this.brokenOption.xAxis.data = this.brokenTime;
       this.brokenInstanc.setOption(this.brokenOption);
     },
-    // 导出
-    exportData() {
+    // 请求环比数据
+    getRadioData() {
+      let curType = "";
+      let curTime = "";
+      if (this.dateType == "day") {
+        curType = 1;
+        curTime = getDay(0);
+      } else if (this.dateType == "month") {
+        curType = 2;
+        curTime = getMonth(0);
+      } else if (this.dateType == "year") {
+        curType = 3;
+        curTime = getYear(0);
+      }
       let data = {
-        timeType: this.dateType,
-        startTime: this.queryParams.startTime,
-        endTime: this.endTime,
-        building: this.building,
+        curDate: curTime,
+        type: curType,
+        buildingId: this.building,
       };
-      console.log("导出数据参数", data);
-      analyzeExport(data).then((res) => {
-        console.log("导出返回", res);
-        if (res) {
-          // 请求的结果就是文件
-          // 创建一个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("导出失败!");
+      hotEnergySum(data).then((res) => {
+        console.log("上层数据返回", res);
+        if (res.code == 200) {
+          this.useWater = res.rows[0].waterValue;
+          this.useWaterRadio = res.rows[0].waterP;
+          this.useElect = res.rows[0].electValue;
+          this.useElectRadio = res.rows[0].electP;
+          this.useUnit = res.rows[0].electWater;
+          this.useUnitRadio = res.rows[0].electWaterP;
         }
       });
-      // .catch((err) => {
-      //     this.$message.error('导出失败!');
-      // })
     },
-    tableRowStyle({ row, column, rowIndex, columnIndex }) {
-      // 修改颜色
-      if (columnIndex === 1) {
-        return "color: #fd1e00;!important;text-align:center";
-      }
-      if (columnIndex === 2) {
-        return "color: #3390ff;!important;text-align:center";
-      }
-      if (columnIndex === 4) {
-        return "color: #75d148;!important;text-align:center";
+    // 导出
+    goExport() {
+      if (this.exportData) {
+        import("@/assets/excel/Export2Excel").then((excel) => {
+          // 导出的excel表头字段名，需要导出表格字段名
+          if (this.building == "所有") {
+            var tHeader = [
+              "日期",
+              "用水量(吨)",
+              "用电量(度)",
+              "单耗(度/吨)",
+              "楼栋人数",
+              "人均用水(人/升)",
+            ]; // 导出的excel表头名信息 改参数
+            var filterVal = [
+              "curDate",
+              "useHotWater",
+              "electValue",
+              "electWater",
+              "checkInCount",
+              "perWater",
+            ];
+          } else {
+            var tHeader = [
+              "日期",
+              "所属楼栋",
+              "用水量(吨)",
+              "用电量(度)",
+              "单耗(度/吨)",
+              "楼栋人数",
+              "人均用水(人/升)",
+            ]; // 导出的excel表头名信息 改参数
+            var filterVal = [
+              "curDate",
+              "buildingName",
+              "useHotWater",
+              "electValue",
+              "electWater",
+              "checkInCount",
+              "perWater",
+            ];
+          }
+          const data = this.formatJson(filterVal, this.exportData);
+          const autoWidth = true;
+          excel.export_json_to_excel({
+            header: tHeader, //表头
+            data, //数据
+            filename: "能耗报表", //名称
+            autoWidth: true, //宽度自适应
+          });
+        });
+        this.$message({
+          type: "success",
+          message: "导出成功!",
+        });
+      } else {
+        this.$message.error("导出失败!");
       }
-      // return "text-align:center";
+    },
+    //格式转换,不需要改动
+    formatJson(filterVal, jsonData) {
+      return jsonData.map((v) =>
+        filterVal.map((j) => {
+          if (j === "perWater") {
+            return (v[j] * 1000).toFixed(1);
+          } else {
+            return v[j];
+          }
+        })
+      );
     },
     // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
     screenAdapter() {
diff --git a/src/views/hotWater/energyAnalysis/components/temReport.vue b/src/views/hotWater/energyAnalysis/components/temReport.vue
index 945e42a..7bcaa3d 100644
--- a/src/views/hotWater/energyAnalysis/components/temReport.vue
+++ b/src/views/hotWater/energyAnalysis/components/temReport.vue
@@ -11,7 +11,7 @@
           <el-option
             v-for="(item, index) in builds"
             :key="index"
-            :label="item.label"
+            :label="item.building_name"
             :value="item.id"
           />
         </el-select>
@@ -26,56 +26,51 @@
           <el-button type="success" @click="findData">查询</el-button>
         </div>
         <div class="warning-btn">
-          <el-button type="warning" @click="exportData">导出</el-button>
+          <el-button type="warning" @click="goExport">导出</el-button>
         </div>
       </div>
     </div>
     <div class="charts" ref="chart_ref"></div>
     <el-table
-      :data="postList"
-      stripe
-      :cell-style="tableRowStyle"
+      :data="tableData"
       @row-click="handlerow"
       highlight-current-row
       height="500"
+      ref="maintable"
+      :cell-style="tableRowStyle"
     >
-      <el-table-column label="楼栋名称" align="center" prop="dateAndWeek" />
-      <el-table-column label="0点" align="center" prop="maxTemp" />
-      <el-table-column label="2点" align="center" prop="minTemp" />
-      <el-table-column label="6点" align="center" prop="minTemp" />
-      <el-table-column label="8点" align="center" prop="minTemp" />
-      <el-table-column label="11点" align="center" prop="minTemp" />
-      <el-table-column label="13点" align="center" prop="minTemp" />
-      <el-table-column label="14点" align="center" prop="minTemp" />
-      <el-table-column label="15点" align="center" prop="minTemp" />
-      <el-table-column label="16点" align="center" prop="minTemp" />
-      <el-table-column label="17点" align="center" prop="minTemp" />
-      <el-table-column label="18点" align="center" prop="minTemp" />
-      <el-table-column label="19点" align="center" prop="minTemp" />
-      <el-table-column label="20点" align="center" prop="minTemp" />
-      <el-table-column label="21点" align="center" prop="minTemp" />
-      <el-table-column label="22点" align="center" prop="minTemp" />
-      <el-table-column label="23点" align="center" prop="minTemp" />
+      <el-table-column v-if="showBuild" prop="buildingName" label="楼栋名称">
+      </el-table-column>
+      <el-table-column v-if="!showBuild" prop="deviceName" label="热泵名称">
+      </el-table-column>
+      <el-table-column label="0点" align="center" prop="temp00" />
+      <el-table-column label="2点" align="center" prop="temp02" />
+      <el-table-column label="6点" align="center" prop="temp06" />
+      <el-table-column label="8点" align="center" prop="temp08" />
+      <el-table-column label="11点" align="center" prop="temp11" />
+      <el-table-column label="13点" align="center" prop="temp13" />
+      <el-table-column label="14点" align="center" prop="temp14" />
+      <el-table-column label="15点" align="center" prop="temp15" />
+      <el-table-column label="16点" align="center" prop="temp16" />
+      <el-table-column label="17点" align="center" prop="temp17" />
+      <el-table-column label="18点" align="center" prop="temp18" />
+      <el-table-column label="19点" align="center" prop="temp19" />
+      <el-table-column label="20点" align="center" prop="temp20" />
+      <el-table-column label="21点" align="center" prop="temp21" />
+      <el-table-column label="22点" align="center" prop="temp22" />
+      <el-table-column label="23点" align="center" prop="temp23" />
     </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
   </div>
 </template>
 
 <script>
 import { formatDay } from "@/utils/datetime";
-import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage";
-import { spaceTree } from "@/api/region";
+import { hotBuildList, hotWaterTemp } from "@/api/hotWater/energyAnalysis";
 import * as echarts from "echarts";
 export default {
   data() {
     return {
+      showBuild: true, //控制表格显示楼栋名称还是热泵名称
       listLoading: false,
       dayDate: [], //日值
       dialogVisible: false,
@@ -86,7 +81,7 @@ export default {
       // 总条数
       total: 0,
       // 表格数据
-      postList: [],
+      tableData: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -100,6 +95,15 @@ export default {
       brokenTime: [],
     };
   },
+  // 表格第一行高亮
+  watch: {
+    // 请求后端才有效果
+    tableData: function () {
+      this.$nextTick(function () {
+        this.$refs.maintable.setCurrentRow(this.tableData[0]);
+      });
+    },
+  },
   created() {
     // 在组件创建完成后，设置默认值
   },
@@ -110,7 +114,6 @@ export default {
     this.initChart();
     window.addEventListener("resize", this.screenAdapter);
     this.screenAdapter();
-    this.getChartData();
   },
   destroyed() {
     //取消监听器
@@ -119,49 +122,20 @@ export default {
   methods: {
     /** 查询楼栋 */
     getBuildList() {
-      spaceTree().then((res) => {
+      let data = {
+        systemType: "1",
+      };
+      hotBuildList(data).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);
-          }
-          this.builds = newRes.data[0].children[0].children[0].children;
+          this.builds = res.rows;
           //   console.log("筛选后的新结果", this.builds);
-          this.building = this.builds[0].id;
+          this.building = res.rows[0].id;
           this.getList();
         }
       });
     },
-    // 递归函数，用于去除指定层级往后的 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
-          );
-        }
-      }
-    },
     // 初始化时间
     initializeTimeDate() {
       this.dayDate = formatDay(new Date()); // 更新
@@ -170,135 +144,50 @@ export default {
     findData() {
       this.getList();
     },
-    // 显示消息的函数
-    showMessage(message, type) {
-      this.$message({
-        message: message,
-        type: type,
-      });
+    /* 加入小手状态 */
+    tableRowStyle({ row, column, rowIndex, columnIndex }) {
+      if (row) {
+        return "cursor:pointer;text-align:center";
+      }
     },
     //请求数据
     getList() {
+      if (this.building == "所有") {
+        this.showBuild = true;
+      } else {
+        this.showBuild = false;
+      }
       let data = {
-        startTime: this.dayDate,
-        endTime: this.dayDate,
-        building: this.building,
+        buildingId: this.building,
+        curDate: this.dayDate,
       };
       console.log("查询数据参数", data);
       this.listLoading = true;
       //   请求数据
+      hotWaterTemp(data).then((res) => {
+        if (res.code == 200 && res.rows.length >0) {
+          this.tableData = res.rows;
+          // this.firstRow();
+          this.handlerow(this.tableData[0]);
+        } else {
+          this.rows = [];
+        }
+      });
       // Just to simulate the time of the request
       setTimeout(() => {
         this.listLoading = false;
       }, 1.0 * 1000);
     },
-    //
-    getChartData() {
-      this.queryParams.pageNum = 0;
-      console.log("图表参数", this.queryParams);
-      this.brokenData1 = [30, 40, 29];
-      this.brokenTime = ["3月", "4月", "5月"];
-      this.brokenOption.series[0].data = this.brokenData1;
-      this.brokenOption.series[0].itemStyle.color = "#1f8dee";
-      this.brokenOption.series[0].areaStyle.color.colorStops = [
-        {
-          offset: 0,
-          color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色
-        },
-        {
-          offset: 0.8,
-          color: "rgba(31, 141, 238,0)", // 100% 处的颜色
-        },
-      ];
-      // 动态设置 tooltip 格式化函数
-      this.brokenOption.tooltip = {
-        trigger: "axis",
-        formatter: function (params) {
-          // 获取当前数据点信息
-          const data = params[0];
-          const month = data.name;
-          const value = data.value;
-          return `${month}<br/>温度: ${value} ℃`;
-        },
-      };
-      this.brokenOption.xAxis.data = this.brokenTime;
-      this.brokenInstanc.setOption(this.brokenOption);
-      //   weatherTempData(this.queryParams).then((response) => {
-      //     console.log("处理值然后渲染");
-      //     if (response.rows.length > 0) {
-      //       let data = response.rows;
-      //       let timeValue = [];
-      //       let hightValue = [];
-      //       let lowValue = [];
-      //       data.forEach((element) => {
-      //         timeValue.push(element.weatherDate);
-      //         hightValue.push(element.maxTemp);
-      //         lowValue.push(element.minTemp);
-      //       });
-      //       let adapterOption = {};
-      //       adapterOption = {
-      //         xAxis: {
-      //           data: timeValue,
-      //         },
-      //         series: [
-      //           {
-      //             data: hightValue,
-      //             //折线颜色
-      //             itemStyle: {
-      //               color: "rgb(18, 126, 226)", //折线的颜色
-      //             },
-      //             lineStyle: {
-      //               color: "rgb(18, 126, 226)", //折线点的颜色
-      //             },
-      //           },
-      //           {
-      //             data: lowValue,
-      //             //折线颜色
-      //             itemStyle: {
-      //               color: "rgb(250, 169, 19)", //折线的颜色
-      //             },
-      //             lineStyle: {
-      //               color: "rgb(250, 169, 19)", //折线点的颜色
-      //             },
-      //           },
-      //         ],
-      //       };
-      //       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-      //       this.brokenInstanc.setOption(adapterOption);
-      //       //手动的调用图标对象的resize才能产生效果
-      //       this.brokenInstanc.resize();
-      //     } else {
-      //       let adapterOption = {};
-      //       adapterOption = {
-      //         xAxis: {
-      //           data: [],
-      //         },
-      //         series: [
-      //           {
-      //             data: [],
-      //           },
-      //           {
-      //             data: [],
-      //           },
-      //         ],
-      //       };
-      //       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-      //       this.brokenInstanc.setOption(adapterOption);
-      //       //手动的调用图标对象的resize才能产生效果
-      //       this.brokenInstanc.resize();
-      //     }
-      //   });
-    },
     //查询单个热泵状态 点击表格的某一行
     handlerow(row, event, column) {
-      // console.log("点击的行数据----", row)
+      console.log("点击的行数据----", row);
       if (row) {
         const obj = Object.assign({}, row);
         // 先截取掉不需要的对象属性和值
-        delete obj.buildingID;
+        delete obj.buildingId;
         delete obj.curDate;
-        delete obj.pumpID;
-        delete obj.pumpName;
+        delete obj.deviceNum;
+        delete obj.deviceName;
         delete obj.buildingName;
         //定义一个新数组
         let newObj = {};
@@ -307,10 +196,6 @@ export default {
             newObj[key] = obj[key];
           }
         }
-        // console.log("不含空的数组对象", newObj);
-        // 在返回的新的对象中，取出对象的所有key值返回新数组
-        // Object.setPrototypeOf(this.newObj);
-        // let data7 = Object.keys(newObj);
         // console.log("不含空的x轴数据", data7);
         const keysArr = Object.keys(newObj); // 获取对象所有属性名的数组
         this.brokenTime = [];
@@ -323,105 +208,152 @@ export default {
         // console.log("值", valuesArr);
         // console.log("坐标", this.brokenTime);
         this.brokenData1 = valuesArr;
-        const adapterOption = {
-          xAxis: {
-            data: this.brokenTime,
-          },
-          series: [
-            {
-              name: "温度",
-              data: this.brokenData1,
-              itemStyle: {
-                color: "#1f8dee",
-              },
-              areaStyle: {
-                color: {
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.8,
-                      color: "rgba(31, 141, 238,0)", // 100% 处的颜色
-                    },
-                  ],
-                },
-              },
-            },
-          ],
-        };
-        //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-        this.brokenInstanc.setOption(adapterOption);
-        //手动的调用图标对象的resize才能产生效果
-        this.brokenInstanc.resize();
       } else {
-        const adapterOption = {
-          xAxis: {
-            data: [],
-          },
-          series: [
-            {
-              name: "温度",
-              data: [],
-            },
-          ],
-        };
-        //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-        this.brokenInstanc.setOption(adapterOption);
-        //手动的调用图标对象的resize才能产生效果
-        this.brokenInstanc.resize();
+        this.brokenTime = [];
+        this.brokenData1 = [];
       }
+      this.renderingBroken();
     },
-    // 导出
-    exportData() {
-      let data = {
-        timeType: this.dateType,
-        startTime: this.queryParams.startTime,
-        endTime: this.endTime,
-        building: this.building,
+    //渲染
+    renderingBroken() {
+      this.brokenOption.series[0].data = this.brokenData1;
+      this.brokenOption.series[0].itemStyle.color = "#1f8dee";
+      this.brokenOption.series[0].areaStyle.color.colorStops = [
+        {
+          offset: 0,
+          color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色
+        },
+        {
+          offset: 0.8,
+          color: "rgba(31, 141, 238,0)", // 100% 处的颜色
+        },
+      ];
+      // 动态设置 tooltip 格式化函数
+      this.brokenOption.tooltip = {
+        trigger: "axis",
+        formatter: function (params) {
+          // 获取当前数据点信息
+          const data = params[0];
+          const month = data.name;
+          const value = data.value;
+          return `${month}<br/>温度: ${value} ℃`;
+        },
       };
-      console.log("导出数据参数", data);
-      analyzeExport(data).then((res) => {
-        console.log("导出返回", res);
-        if (res) {
-          // 请求的结果就是文件
-          // 创建一个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("导出失败!");
-        }
-      });
-      // .catch((err) => {
-      //     this.$message.error('导出失败!');
-      // })
+      this.brokenOption.xAxis.data = this.brokenTime;
+      this.brokenInstanc.setOption(this.brokenOption);
     },
-    tableRowStyle({ row, column, rowIndex, columnIndex }) {
-      // 修改颜色
-      if (columnIndex === 1) {
-        return "color: #fd1e00;!important;text-align:center";
-      }
-      if (columnIndex === 2) {
-        return "color: #3390ff;!important;text-align:center";
-      }
-      if (columnIndex === 4) {
-        return "color: #75d148;!important;text-align:center";
+    // 导出
+    goExport() {
+      if (this.tableData) {
+        import("@/assets/excel/Export2Excel").then((excel) => {
+          // 所有楼栋
+          if (this.showBuild) {
+            var tHeader = [
+              "楼栋名称",
+              "0点",
+              "02点",
+              "06点",
+              "8点",
+              "11点",
+              "13点",
+              "14点",
+              "15点",
+              "16点",
+              "17点",
+              "18点",
+              "19点",
+              "20点",
+              "21点",
+              "22点",
+              "23点",
+            ]; // 导出的excel表头名信息
+            var filterVal = [
+              "buildingName",
+              "temp00",
+              "temp02",
+              "temp06",
+              "temp08",
+              "temp11",
+              "temp13",
+              "temp14",
+              "temp15",
+              "temp16",
+              "temp17",
+              "temp18",
+              "temp19",
+              "temp20",
+              "temp21",
+              "temp22",
+              "temp23",
+            ]; // 导出的excel表头字段名，需要导出表格字段名
+          } else {
+            var tHeader = [
+              "热泵名称",
+              "0点",
+              "02点",
+              "06点",
+              "8点",
+              "11点",
+              "13点",
+              "14点",
+              "15点",
+              "16点",
+              "17点",
+              "18点",
+              "19点",
+              "20点",
+              "21点",
+              "22点",
+              "23点",
+            ]; // 导出的excel表头名信息
+            var filterVal = [
+              "deviceName",
+              "temp00",
+              "temp02",
+              "temp06",
+              "temp08",
+              "temp11",
+              "temp13",
+              "temp14",
+              "temp15",
+              "temp16",
+              "temp17",
+              "temp18",
+              "temp19",
+              "temp20",
+              "temp21",
+              "temp22",
+              "temp23",
+            ]; // 导出的excel表头字段名，需要导出表格字段名
+          }
+          const data = this.formatJson(filterVal, this.tableData);
+          const autoWidth = true;
+          excel.export_json_to_excel({
+            header: tHeader, //表头
+            data, //数据
+            filename: "温度变化报表", //名称
+            autoWidth: true, //宽度自适应
+          });
+        });
+        this.$message({
+          type: "success",
+          message: "导出成功!",
+        });
+      } else {
+        this.$message.error("导出失败!");
       }
-      // return "text-align:center";
+    },
+    //格式转换,不需要改动
+    formatJson(filterVal, jsonData) {
+      return jsonData.map((v) =>
+        filterVal.map((j) => {
+          if (j === "installDate") {
+            return format(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
     },
     // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
     screenAdapter() {
diff --git a/src/views/hotWater/energyAnalysis/components/waterReport.vue b/src/views/hotWater/energyAnalysis/components/waterReport.vue
index 503a7f7..9a21571 100644
--- a/src/views/hotWater/energyAnalysis/components/waterReport.vue
+++ b/src/views/hotWater/energyAnalysis/components/waterReport.vue
@@ -11,7 +11,7 @@
           <el-option
             v-for="(item, index) in builds"
             :key="index"
-            :label="item.label"
+            :label="item.building_name"
             :value="item.id"
           />
         </el-select>
@@ -26,56 +26,50 @@
           <el-button type="success" @click="findData">查询</el-button>
         </div>
         <div class="warning-btn">
-          <el-button type="warning" @click="exportData">导出</el-button>
+          <el-button type="warning" @click="goExport">导出</el-button>
         </div>
       </div>
     </div>
     <div class="charts" ref="chart_ref"></div>
     <el-table
-      :data="postList"
-      stripe
-      :cell-style="tableRowStyle"
+      :data="tableData"
       @row-click="handlerow"
       highlight-current-row
       height="500"
+      ref="maintable"
+      :cell-style="tableRowStyle"
     >
-      <el-table-column label="楼栋名称" align="center" prop="dateAndWeek" />
-      <el-table-column label="0点" align="center" prop="maxTemp" />
-      <el-table-column label="2点" align="center" prop="minTemp" />
-      <el-table-column label="6点" align="center" prop="minTemp" />
-      <el-table-column label="8点" align="center" prop="minTemp" />
-      <el-table-column label="11点" align="center" prop="minTemp" />
-      <el-table-column label="13点" align="center" prop="minTemp" />
-      <el-table-column label="14点" align="center" prop="minTemp" />
-      <el-table-column label="15点" align="center" prop="minTemp" />
-      <el-table-column label="16点" align="center" prop="minTemp" />
-      <el-table-column label="17点" align="center" prop="minTemp" />
-      <el-table-column label="18点" align="center" prop="minTemp" />
-      <el-table-column label="19点" align="center" prop="minTemp" />
-      <el-table-column label="20点" align="center" prop="minTemp" />
-      <el-table-column label="21点" align="center" prop="minTemp" />
-      <el-table-column label="22点" align="center" prop="minTemp" />
-      <el-table-column label="23点" align="center" prop="minTemp" />
+      <el-table-column prop="buildingName" label="楼栋名称"> </el-table-column>
+      <el-table-column v-if="showDeviceName" prop="deviceName" label="设备名称">
+      </el-table-column>
+      <el-table-column label="0点" align="center" prop="temp00" />
+      <el-table-column label="2点" align="center" prop="temp02" />
+      <el-table-column label="6点" align="center" prop="temp06" />
+      <el-table-column label="8点" align="center" prop="temp08" />
+      <el-table-column label="11点" align="center" prop="temp11" />
+      <el-table-column label="13点" align="center" prop="temp13" />
+      <el-table-column label="14点" align="center" prop="temp14" />
+      <el-table-column label="15点" align="center" prop="temp15" />
+      <el-table-column label="16点" align="center" prop="temp16" />
+      <el-table-column label="17点" align="center" prop="temp17" />
+      <el-table-column label="18点" align="center" prop="temp18" />
+      <el-table-column label="19点" align="center" prop="temp19" />
+      <el-table-column label="20点" align="center" prop="temp20" />
+      <el-table-column label="21点" align="center" prop="temp21" />
+      <el-table-column label="22点" align="center" prop="temp22" />
+      <el-table-column label="23点" align="center" prop="temp23" />
     </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
   </div>
 </template>
 
 <script>
 import { formatDay } from "@/utils/datetime";
-import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage";
-import { spaceTree } from "@/api/region";
+import { hotBuildList, hotWaterLevel } from "@/api/hotWater/energyAnalysis";
 import * as echarts from "echarts";
 export default {
   data() {
     return {
+      showDeviceName: false, //是否显示设备名称
       listLoading: false,
       dayDate: [], //日值
       dialogVisible: false,
@@ -86,7 +80,7 @@ export default {
       // 总条数
       total: 0,
       // 表格数据
-      postList: [],
+      tableData: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -100,6 +94,15 @@ export default {
       brokenTime: [],
     };
   },
+  // 表格第一行高亮
+  watch: {
+    // 请求后端才有效果
+    tableData: function () {
+      this.$nextTick(function () {
+        this.$refs.maintable.setCurrentRow(this.tableData[0]);
+      });
+    },
+  },
   created() {
     // 在组件创建完成后，设置默认值
   },
@@ -110,7 +113,6 @@ export default {
     this.initChart();
     window.addEventListener("resize", this.screenAdapter);
     this.screenAdapter();
-    this.getChartData();
   },
   destroyed() {
     //取消监听器
@@ -119,49 +121,20 @@ export default {
   methods: {
     /** 查询楼栋 */
     getBuildList() {
-      spaceTree().then((res) => {
+      let data = {
+        systemType: "1",
+      };
+      hotBuildList(data).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);
-          }
-          this.builds = newRes.data[0].children[0].children[0].children;
+          this.builds = res.rows;
           //   console.log("筛选后的新结果", this.builds);
-          this.building = this.builds[0].id;
+          this.building = res.rows[0].id;
           this.getList();
         }
       });
     },
-    // 递归函数，用于去除指定层级往后的 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
-          );
-        }
-      }
-    },
     // 初始化时间
     initializeTimeDate() {
       this.dayDate = formatDay(new Date()); // 更新
@@ -170,135 +143,50 @@ export default {
     findData() {
       this.getList();
     },
-    // 显示消息的函数
-    showMessage(message, type) {
-      this.$message({
-        message: message,
-        type: type,
-      });
+    /* 加入小手状态 */
+    tableRowStyle({ row, column, rowIndex, columnIndex }) {
+      if (row) {
+        return "cursor:pointer;text-align:center";
+      }
     },
     //请求数据
     getList() {
+      if (this.building == "所有") {
+        this.showDeviceName = false;
+      } else {
+        this.showDeviceName = true;
+      }
       let data = {
-        startTime: this.dayDate,
-        endTime: this.dayDate,
-        building: this.building,
+        buildingId: this.building,
+        curDate: this.dayDate,
       };
       console.log("查询数据参数", data);
       this.listLoading = true;
       //   请求数据
+      hotWaterLevel(data).then((res) => {
+        if (res.code == 200 && res.rows.length >0) {
+          this.tableData = res.rows;
+          // this.firstRow();
+          this.handlerow(this.tableData[0]);
+        } else {
+          this.rows = [];
+        }
+      });
       // Just to simulate the time of the request
       setTimeout(() => {
         this.listLoading = false;
       }, 1.0 * 1000);
     },
-    //
-    getChartData() {
-      this.queryParams.pageNum = 0;
-      console.log("图表参数", this.queryParams);
-      this.brokenData1 = [30, 40, 29];
-      this.brokenTime = ["3月", "4月", "5月"];
-      this.brokenOption.series[0].data = this.brokenData1;
-      this.brokenOption.series[0].itemStyle.color = "#1f8dee";
-      this.brokenOption.series[0].areaStyle.color.colorStops = [
-        {
-          offset: 0,
-          color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色
-        },
-        {
-          offset: 0.8,
-          color: "rgba(31, 141, 238,0)", // 100% 处的颜色
-        },
-      ];
-      // 动态设置 tooltip 格式化函数
-      this.brokenOption.tooltip = {
-        trigger: "axis",
-        formatter: function (params) {
-          // 获取当前数据点信息
-          const data = params[0];
-          const month = data.name;
-          const value = data.value;
-          return `${month}<br/>水位: ${value} %`;
-        },
-      };
-      this.brokenOption.xAxis.data = this.brokenTime;
-      this.brokenInstanc.setOption(this.brokenOption);
-      //   weatherTempData(this.queryParams).then((response) => {
-      //     console.log("处理值然后渲染");
-      //     if (response.rows.length > 0) {
-      //       let data = response.rows;
-      //       let timeValue = [];
-      //       let hightValue = [];
-      //       let lowValue = [];
-      //       data.forEach((element) => {
-      //         timeValue.push(element.weatherDate);
-      //         hightValue.push(element.maxTemp);
-      //         lowValue.push(element.minTemp);
-      //       });
-      //       let adapterOption = {};
-      //       adapterOption = {
-      //         xAxis: {
-      //           data: timeValue,
-      //         },
-      //         series: [
-      //           {
-      //             data: hightValue,
-      //             //折线颜色
-      //             itemStyle: {
-      //               color: "rgb(18, 126, 226)", //折线的颜色
-      //             },
-      //             lineStyle: {
-      //               color: "rgb(18, 126, 226)", //折线点的颜色
-      //             },
-      //           },
-      //           {
-      //             data: lowValue,
-      //             //折线颜色
-      //             itemStyle: {
-      //               color: "rgb(250, 169, 19)", //折线的颜色
-      //             },
-      //             lineStyle: {
-      //               color: "rgb(250, 169, 19)", //折线点的颜色
-      //             },
-      //           },
-      //         ],
-      //       };
-      //       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-      //       this.brokenInstanc.setOption(adapterOption);
-      //       //手动的调用图标对象的resize才能产生效果
-      //       this.brokenInstanc.resize();
-      //     } else {
-      //       let adapterOption = {};
-      //       adapterOption = {
-      //         xAxis: {
-      //           data: [],
-      //         },
-      //         series: [
-      //           {
-      //             data: [],
-      //           },
-      //           {
-      //             data: [],
-      //           },
-      //         ],
-      //       };
-      //       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-      //       this.brokenInstanc.setOption(adapterOption);
-      //       //手动的调用图标对象的resize才能产生效果
-      //       this.brokenInstanc.resize();
-      //     }
-      //   });
-    },
     //查询单个热泵状态 点击表格的某一行
     handlerow(row, event, column) {
-      // console.log("点击的行数据----", row)
+      console.log("点击的行数据----", row);
       if (row) {
         const obj = Object.assign({}, row);
         // 先截取掉不需要的对象属性和值
-        delete obj.buildingID;
+        delete obj.buildingId;
         delete obj.curDate;
-        delete obj.pumpID;
-        delete obj.pumpName;
+        delete obj.deviceNum;
+        delete obj.deviceName;
         delete obj.buildingName;
         //定义一个新数组
         let newObj = {};
@@ -307,10 +195,6 @@ export default {
             newObj[key] = obj[key];
           }
         }
-        // console.log("不含空的数组对象", newObj);
-        // 在返回的新的对象中，取出对象的所有key值返回新数组
-        // Object.setPrototypeOf(this.newObj);
-        // let data7 = Object.keys(newObj);
         // console.log("不含空的x轴数据", data7);
         const keysArr = Object.keys(newObj); // 获取对象所有属性名的数组
         this.brokenTime = [];
@@ -323,105 +207,153 @@ export default {
         // console.log("值", valuesArr);
         // console.log("坐标", this.brokenTime);
         this.brokenData1 = valuesArr;
-        const adapterOption = {
-          xAxis: {
-            data: this.brokenTime,
-          },
-          series: [
-            {
-              name: "温度",
-              data: this.brokenData1,
-              itemStyle: {
-                color: "#1f8dee",
-              },
-              areaStyle: {
-                color: {
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.8,
-                      color: "rgba(31, 141, 238,0)", // 100% 处的颜色
-                    },
-                  ],
-                },
-              },
-            },
-          ],
-        };
-        //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-        this.brokenInstanc.setOption(adapterOption);
-        //手动的调用图标对象的resize才能产生效果
-        this.brokenInstanc.resize();
       } else {
-        const adapterOption = {
-          xAxis: {
-            data: [],
-          },
-          series: [
-            {
-              name: "温度",
-              data: [],
-            },
-          ],
-        };
-        //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-        this.brokenInstanc.setOption(adapterOption);
-        //手动的调用图标对象的resize才能产生效果
-        this.brokenInstanc.resize();
+        this.brokenTime = [];
+        this.brokenData1 = [];
       }
+      this.renderingBroken();
     },
-    // 导出
-    exportData() {
-      let data = {
-        timeType: this.dateType,
-        startTime: this.queryParams.startTime,
-        endTime: this.endTime,
-        building: this.building,
+    //渲染
+    renderingBroken() {
+      this.brokenOption.series[0].data = this.brokenData1;
+      this.brokenOption.series[0].itemStyle.color = "#1f8dee";
+      this.brokenOption.series[0].areaStyle.color.colorStops = [
+        {
+          offset: 0,
+          color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色
+        },
+        {
+          offset: 0.8,
+          color: "rgba(31, 141, 238,0)", // 100% 处的颜色
+        },
+      ];
+      // 动态设置 tooltip 格式化函数
+      this.brokenOption.tooltip = {
+        trigger: "axis",
+        formatter: function (params) {
+          // 获取当前数据点信息
+          const data = params[0];
+          const month = data.name;
+          const value = data.value;
+          return `${month}<br/>温度: ${value} ℃`;
+        },
       };
-      console.log("导出数据参数", data);
-      analyzeExport(data).then((res) => {
-        console.log("导出返回", res);
-        if (res) {
-          // 请求的结果就是文件
-          // 创建一个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("导出失败!");
-        }
-      });
-      // .catch((err) => {
-      //     this.$message.error('导出失败!');
-      // })
+      this.brokenOption.xAxis.data = this.brokenTime;
+      this.brokenInstanc.setOption(this.brokenOption);
     },
-    tableRowStyle({ row, column, rowIndex, columnIndex }) {
-      // 修改颜色
-      if (columnIndex === 1) {
-        return "color: #fd1e00;!important;text-align:center";
-      }
-      if (columnIndex === 2) {
-        return "color: #3390ff;!important;text-align:center";
-      }
-      if (columnIndex === 4) {
-        return "color: #75d148;!important;text-align:center";
+    // 导出
+    goExport() {
+      if (this.tableData) {
+        import("@/assets/excel/Export2Excel").then((excel) => {
+          if (this.showDeviceName) {
+            var tHeader = [
+              "楼栋名称",
+              "设备名称",
+              "0点",
+              "02点",
+              "06点",
+              "8点",
+              "11点",
+              "13点",
+              "14点",
+              "15点",
+              "16点",
+              "17点",
+              "18点",
+              "19点",
+              "20点",
+              "21点",
+              "22点",
+              "23点",
+            ]; // 导出的excel表头名信息
+            var filterVal = [
+              "buildingName",
+              "deviceName",
+              "temp00",
+              "temp02",
+              "temp06",
+              "temp08",
+              "temp11",
+              "temp13",
+              "temp14",
+              "temp15",
+              "temp16",
+              "temp17",
+              "temp18",
+              "temp19",
+              "temp20",
+              "temp21",
+              "temp22",
+              "temp23",
+            ]; // 导出的excel表头字段名，需要导出表格字段名
+          } else {
+            var tHeader = [
+              "楼栋名称",
+              "0点",
+              "02点",
+              "06点",
+              "8点",
+              "11点",
+              "13点",
+              "14点",
+              "15点",
+              "16点",
+              "17点",
+              "18点",
+              "19点",
+              "20点",
+              "21点",
+              "22点",
+              "23点",
+            ]; // 导出的excel表头名信息
+            var filterVal = [
+              "buildingName",
+              "temp00",
+              "temp02",
+              "temp06",
+              "temp08",
+              "temp11",
+              "temp13",
+              "temp14",
+              "temp15",
+              "temp16",
+              "temp17",
+              "temp18",
+              "temp19",
+              "temp20",
+              "temp21",
+              "temp22",
+              "temp23",
+            ]; // 导出的excel表头字段名，需要导出表格字段名
+          }
+          const data = this.formatJson(filterVal, this.tableData);
+          const autoWidth = true;
+          excel.export_json_to_excel({
+            header: tHeader, //表头
+            data, //数据
+            filename: "温度变化报表", //名称
+            autoWidth: true, //宽度自适应
+          });
+        });
+        this.$message({
+          type: "success",
+          message: "导出成功!",
+        });
+      } else {
+        this.$message.error("导出失败!");
       }
-      // return "text-align:center";
+    },
+    //格式转换,不需要改动
+    formatJson(filterVal, jsonData) {
+      return jsonData.map((v) =>
+        filterVal.map((j) => {
+          if (j === "installDate") {
+            return format(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
     },
     // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
     screenAdapter() {
diff --git a/src/views/hotWater/energyQuery/components/electReading.vue b/src/views/hotWater/energyQuery/components/electReading.vue
index dda6d39..c48a409 100644
--- a/src/views/hotWater/energyQuery/components/electReading.vue
+++ b/src/views/hotWater/energyQuery/components/electReading.vue
@@ -11,7 +11,7 @@
           <el-option
             v-for="(item, index) in builds"
             :key="index"
-            :label="item.label"
+            :label="item.building_name"
             :value="item.id"
           />
         </el-select>
@@ -40,13 +40,20 @@
       highlight-current-row
       height="500"
     >
-      <el-table-column label="所属楼栋" align="center" prop="dateAndWeek" />
-      <el-table-column label="设备编号" align="center" prop="maxTemp" />
-      <el-table-column label="设备名称" align="center" prop="minTemp" />
-      <el-table-column label="抄表时间" align="center" prop="minTemp" />
-      <el-table-column label="采集读数" align="center" prop="minTemp" />
-      <el-table-column label="用量" align="center" prop="minTemp" />
-      <el-table-column label="倍率" align="center" prop="minTemp" />
+      <el-table-column
+        type="index"
+        :index="indexAdd"
+        prop="number"
+        label="序号"
+        width="90"
+      ></el-table-column>
+      <el-table-column label="所属楼栋" align="center" prop="buildingName" />
+      <el-table-column label="设备编号" align="center" prop="deviceNum" />
+      <el-table-column label="设备名称" align="center" prop="deviceName" />
+      <el-table-column label="抄表时间" align="center" prop="curTime" />
+      <el-table-column label="采集读数" align="center" prop="curValue" />
+      <el-table-column label="用量" align="center" prop="usedValue" />
+      <el-table-column label="倍率" align="center" prop="ratio" />
     </el-table>
 
     <pagination
@@ -61,8 +68,8 @@
 
 <script>
 import { formatDay } from "@/utils/datetime";
-import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage";
-import { spaceTree } from "@/api/region";
+import { hotBuildList } from "@/api/hotWater/energyAnalysis";
+import { queryDeviceDatas } from "@/api/hotWater/energyQuery";
 export default {
   data() {
     return {
@@ -106,65 +113,77 @@ export default {
     },
     /** 查询楼栋 */
     getBuildList() {
-      spaceTree().then((res) => {
+      let data = {
+        systemType: "1",
+      };
+      hotBuildList(data).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);
-          }
-          this.builds = newRes.data[0].children[0].children[0].children;
+          this.builds = res.rows;
           //   console.log("筛选后的新结果", this.builds);
+          this.building = res.rows[0].id;
           this.getList();
         }
       });
     },
-    // 递归函数，用于去除指定层级往后的 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
-          );
-        }
-      }
-    },
     // 初始化时间
     initializeTimeDate() {
-      this.dayDate = formatDay(new Date()); // 更新
+      let date = new Date(); //获取新的时间
+      //获取当前年份,并且转为字符串
+      let year = date.getFullYear().toString();
+      //获取当前月份，因为月份是要从0开始，此处要加1，
+      //使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0'
+      let month =
+        date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1).toString()
+          : (date.getMonth() + 1).toString();
+      //获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0'
+      let day =
+        date.getDate() < 10
+          ? "0" + date.getDate().toString()
+          : date.getDate().toString();
+      //字符串拼接，将开始时间和结束时间进行拼接
+      let start1 = year + "-" + month + "-01"; //当月第一天
+      let end1 = year + "-" + month + "-" + day; //当天
+      this.dayDate = [start1, end1]; // 更新
     },
     // 查询
     findData() {
+      this.queryParams.pageNum = 1;
       this.getList();
     },
+    // 序号
+    indexAdd(index) {
+      return (
+        index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
+      );
+    },
     //请求数据
     getList() {
+      if (this.dayDate.length == 0) {
+        this.initializeTimeDate();
+      }
       let data = {
-        startTime: this.dayDate,
-        endTime: this.dayDate,
-        building: this.building,
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        startDate: this.dayDate[0],
+        endDate: this.dayDate[1],
+        buildingId: this.building,
+        deviceType: "18",
       };
       console.log("查询数据参数", data);
       this.listLoading = true;
+      queryDeviceDatas(data).then((res) => {
+        console.log("返回", res);
+        if (res.code == 200) {
+          this.postList = res.rows;
+          this.total = res.total;
+        } else {
+          this.postList = [];
+          this.total = 0;
+        }
+      });
       //   请求数据
       // Just to simulate the time of the request
       setTimeout(() => {
@@ -209,14 +228,7 @@ export default {
       // })
     },
     tableRowStyle({ row, column, rowIndex, columnIndex }) {
-      // 修改颜色
-      if (columnIndex === 1) {
-        return "color: #fd1e00;!important;text-align:center";
-      }
-      if (columnIndex === 2) {
-        return "color: #3390ff;!important;text-align:center";
-      }
-      if (columnIndex === 4) {
+      if (columnIndex === 6) {
         return "color: #75d148;!important;text-align:center";
       }
       // return "text-align:center";
diff --git a/src/views/hotWater/energyQuery/components/energy.vue b/src/views/hotWater/energyQuery/components/energy.vue
index 21ede9c..7245372 100644
--- a/src/views/hotWater/energyQuery/components/energy.vue
+++ b/src/views/hotWater/energyQuery/components/energy.vue
@@ -11,7 +11,7 @@
           <el-option
             v-for="(item, index) in builds"
             :key="index"
-            :label="item.label"
+            :label="item.building_name"
             :value="item.id"
           />
         </el-select>
@@ -44,8 +44,8 @@
 
 <script>
 import { formatDay } from "@/utils/datetime";
-import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage";
-import { spaceTree } from "@/api/region";
+import { hotBuildList } from "@/api/hotWater/energyAnalysis";
+import { hotEnergyQuery } from "@/api/hotWater/overview";
 import * as echarts from "echarts";
 export default {
   data() {
@@ -81,7 +81,6 @@ export default {
     this.initChart();
     window.addEventListener("resize", this.screenAdapter);
     this.screenAdapter();
-    this.getList();
   },
   destroyed() {
     //取消监听器
@@ -90,49 +89,20 @@ export default {
   methods: {
     /** 查询楼栋 */
     getBuildList() {
-      spaceTree().then((res) => {
+      let data = {
+        systemType: "1",
+      };
+      hotBuildList(data).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);
-          }
-          this.builds = newRes.data[0].children[0].children[0].children;
+          this.builds = res.rows;
           //   console.log("筛选后的新结果", this.builds);
-          this.building = this.builds[0].id;
+          this.building = res.rows[0].id;
           this.getList();
         }
       });
     },
-    // 递归函数，用于去除指定层级往后的 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
-          );
-        }
-      }
-    },
     // 初始化时间
     initializeTimeDate() {
       this.dayDate = formatDay(new Date()); // 更新
@@ -144,17 +114,44 @@ export default {
     //请求数据
     getList() {
       let data = {
-        startTime: this.dayDate,
-        endTime: this.dayDate,
-        building: this.building,
+        type: 0,
+        page: 1,
+        limit: 31,
+        // curDate:this.dayDate,
+        startDate: this.dayDate,
+        endDate: this.dayDate,
+        buildingId: this.building,
       };
       console.log("查询数据参数", data);
       this.listLoading = true;
       //   请求数据
-      this.brokenData1 = [30, 40, 29];
-      this.brokenData2 = [40, 42, 29];
-      this.brokenTime = ["3月", "4月", "5月"];
-      this.getChartData();
+      hotEnergyQuery(data).then((res) => {
+        console.log("图表返回的数据", res);
+        this.brokenData1 = [];
+        this.brokenData2 = [];
+        this.brokenTime = [];
+        if (res.code == 200 && res.rows.length > 0) {
+          this.exportData = res.rows;
+          res.rows.forEach((item) => {
+            this.brokenData1.push(item.useHotWater);
+            this.brokenData2.push(item.electValue);
+            if (item.curDate.includes(" ")) {
+              var oneStr = item.curDate.split(" ");
+              this.brokenTime.push(oneStr[oneStr.length - 1] + ":00");
+            }
+          });
+          // 对数组进行反转操作
+          this.brokenData1.reverse();
+          this.brokenData2.reverse();
+          this.brokenTime.reverse();
+        } else {
+          this.brokenData1 = [];
+          this.brokenData2 = [];
+          this.brokenTime = [];
+        }
+
+        this.getChartData();
+      });
       // Just to simulate the time of the request
       setTimeout(() => {
         this.listLoading = false;
@@ -162,18 +159,6 @@ export default {
     },
     //
     getChartData() {
-      this.brokenOption.series[0].data = this.brokenData1;
-      this.brokenOption.series[0].itemStyle.color = "#1f8dee";
-      this.brokenOption.series[0].areaStyle.color.colorStops = [
-        {
-          offset: 0,
-          color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色
-        },
-        {
-          offset: 0.8,
-          color: "rgba(31, 141, 238,0)", // 100% 处的颜色
-        },
-      ];
       if (this.currentIndex === 0) {
         this.brokenOption.series[0].data = this.brokenData1;
         this.brokenOption.series[0].itemStyle.color = "#1f8dee";
diff --git a/src/views/hotWater/energyQuery/components/waterReading.vue b/src/views/hotWater/energyQuery/components/waterReading.vue
index dda6d39..41c509f 100644
--- a/src/views/hotWater/energyQuery/components/waterReading.vue
+++ b/src/views/hotWater/energyQuery/components/waterReading.vue
@@ -11,7 +11,7 @@
           <el-option
             v-for="(item, index) in builds"
             :key="index"
-            :label="item.label"
+            :label="item.building_name"
             :value="item.id"
           />
         </el-select>
@@ -40,13 +40,20 @@
       highlight-current-row
       height="500"
     >
-      <el-table-column label="所属楼栋" align="center" prop="dateAndWeek" />
-      <el-table-column label="设备编号" align="center" prop="maxTemp" />
-      <el-table-column label="设备名称" align="center" prop="minTemp" />
-      <el-table-column label="抄表时间" align="center" prop="minTemp" />
-      <el-table-column label="采集读数" align="center" prop="minTemp" />
-      <el-table-column label="用量" align="center" prop="minTemp" />
-      <el-table-column label="倍率" align="center" prop="minTemp" />
+      <el-table-column
+        type="index"
+        :index="indexAdd"
+        prop="number"
+        label="序号"
+        width="90"
+      ></el-table-column>
+      <el-table-column label="所属楼栋" align="center" prop="buildingName" />
+      <el-table-column label="设备编号" align="center" prop="deviceNum" />
+      <el-table-column label="设备名称" align="center" prop="deviceName" />
+      <el-table-column label="抄表时间" align="center" prop="curTime" />
+      <el-table-column label="采集读数" align="center" prop="curValue" />
+      <el-table-column label="用量" align="center" prop="usedValue" />
+      <el-table-column label="倍率" align="center" prop="ratio" />
     </el-table>
 
     <pagination
@@ -61,8 +68,8 @@
 
 <script>
 import { formatDay } from "@/utils/datetime";
-import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage";
-import { spaceTree } from "@/api/region";
+import { hotBuildList } from "@/api/hotWater/energyAnalysis";
+import { queryDeviceDatas } from "@/api/hotWater/energyQuery";
 export default {
   data() {
     return {
@@ -106,65 +113,75 @@ export default {
     },
     /** 查询楼栋 */
     getBuildList() {
-      spaceTree().then((res) => {
+      let data = {
+        systemType: "1",
+      };
+      hotBuildList(data).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);
-          }
-          this.builds = newRes.data[0].children[0].children[0].children;
+          this.builds = res.rows;
           //   console.log("筛选后的新结果", this.builds);
+          this.building = res.rows[0].id;
           this.getList();
         }
       });
     },
-    // 递归函数，用于去除指定层级往后的 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
-          );
-        }
-      }
-    },
     // 初始化时间
     initializeTimeDate() {
-      this.dayDate = formatDay(new Date()); // 更新
+      let date = new Date(); //获取新的时间
+      //获取当前年份,并且转为字符串
+      let year = date.getFullYear().toString();
+      //获取当前月份，因为月份是要从0开始，此处要加1，
+      //使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0'
+      let month =
+        date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1).toString()
+          : (date.getMonth() + 1).toString();
+      //获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0'
+      let day =
+        date.getDate() < 10
+          ? "0" + date.getDate().toString()
+          : date.getDate().toString();
+      //字符串拼接，将开始时间和结束时间进行拼接
+      let start1 = year + "-" + month + "-01"; //当月第一天
+      let end1 = year + "-" + month + "-" + day; //当天
+      this.dayDate = [start1, end1]; // 更新
     },
     // 查询
     findData() {
+      this.queryParams.pageNum = 1;
       this.getList();
     },
+    // 序号
+    indexAdd(index) {
+      return index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
+    },
     //请求数据
     getList() {
+      if (this.dayDate.length == 0) {
+        this.initializeTimeDate();
+      }
       let data = {
-        startTime: this.dayDate,
-        endTime: this.dayDate,
-        building: this.building,
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        startDate: this.dayDate[0],
+        endDate: this.dayDate[1],
+        buildingId: this.building,
+        deviceType: "16",
       };
       console.log("查询数据参数", data);
       this.listLoading = true;
+      queryDeviceDatas(data).then((res) => {
+        console.log("返回", res);
+        if (res.code == 200) {
+          this.postList = res.rows;
+          this.total = res.total;
+        } else {
+          this.postList = [];
+          this.total = 0;
+        }
+      });
       //   请求数据
       // Just to simulate the time of the request
       setTimeout(() => {
@@ -209,14 +226,7 @@ export default {
       // })
     },
     tableRowStyle({ row, column, rowIndex, columnIndex }) {
-      // 修改颜色
-      if (columnIndex === 1) {
-        return "color: #fd1e00;!important;text-align:center";
-      }
-      if (columnIndex === 2) {
-        return "color: #3390ff;!important;text-align:center";
-      }
-      if (columnIndex === 4) {
+      if (columnIndex === 6) {
         return "color: #75d148;!important;text-align:center";
       }
       // return "text-align:center";
diff --git a/src/views/hotWater/energyQuery/index.vue b/src/views/hotWater/energyQuery/index.vue
index dda6d39..b3525e8 100644
--- a/src/views/hotWater/energyQuery/index.vue
+++ b/src/views/hotWater/energyQuery/index.vue
@@ -1,439 +1,94 @@
 <template>
-  <div class="big-machine" v-loading="listLoading">
-    <div class="condition">
-      <div class="condition-left">
-        <el-select
-          style="margin-right: 0.1rem"
-          v-model="building"
-          placeholder="请选择楼栋"
-          clearable
-        >
-          <el-option
-            v-for="(item, index) in builds"
-            :key="index"
-            :label="item.label"
-            :value="item.id"
-          />
-        </el-select>
-        <el-date-picker
-          v-model="dayDate"
-          type="daterange"
-          range-separator="至"
-          value-format="yyyy-MM-dd"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          @change="dateChange"
-        >
-        </el-date-picker>
-        <div class="success-btn" style="margin: 0 0.12rem">
-          <el-button type="success" @click="findData">查询</el-button>
-        </div>
-        <div class="warning-btn">
-          <el-button type="warning" @click="exportData">导出</el-button>
-        </div>
+  <div class="paramsDetails">
+    <div class="details-content">
+      <div class="details-header">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="能耗" name="first">
+            <energy v-if="activeName === 'first'"></energy>
+          </el-tab-pane>
+          <el-tab-pane label="水表读数" name="second">
+            <water-reading v-if="activeName === 'second'"></water-reading>
+          </el-tab-pane>
+          <el-tab-pane label="电表读数" name="three">
+            <elect-reading v-if="activeName === 'three'"></elect-reading>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </div>
-    <el-table
-      :data="postList"
-      stripe
-      :cell-style="tableRowStyle"
-      highlight-current-row
-      height="500"
-    >
-      <el-table-column label="所属楼栋" align="center" prop="dateAndWeek" />
-      <el-table-column label="设备编号" align="center" prop="maxTemp" />
-      <el-table-column label="设备名称" align="center" prop="minTemp" />
-      <el-table-column label="抄表时间" align="center" prop="minTemp" />
-      <el-table-column label="采集读数" align="center" prop="minTemp" />
-      <el-table-column label="用量" align="center" prop="minTemp" />
-      <el-table-column label="倍率" align="center" prop="minTemp" />
-    </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
   </div>
 </template>
 
 <script>
-import { formatDay } from "@/utils/datetime";
-import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage";
-import { spaceTree } from "@/api/region";
+import ElectReading from "./components/electReading.vue";
+import WaterReading from "./components/waterReading.vue";
+import Energy from "./components/energy.vue";
+
 export default {
+  components: { Energy, ElectReading, WaterReading },
   data() {
     return {
-      listLoading: false,
-      dayDate: [], //日值
-      dialogVisible: false,
-      building: "", //选中的楼栋
-      builds: [], //楼栋列表
-      // 遮罩层
-      loading: false,
-      // 总条数
-      total: 0,
-      // 表格数据
-      postList: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        startTime: "",
-        endTime: "",
-      },
+      activeName: "first", //能耗
     };
   },
-  created() {
-    // 在组件创建完成后，设置默认值
-  },
-  mounted() {
-    this.initializeTimeDate();
-    this.getBuildList();
-    this.getList();
-  },
   methods: {
-    // 选中日期事件
-    dateChange() {
-      // console.log("打印时间", this.timeform.time1);
-      if (!this.dayDate) {
-        this.$nextTick(() => {
-          this.dayDate = [];
-        });
-      }
+    handleClick(tab, event) {
+      console.log(tab, event);
     },
-    /** 查询楼栋 */
-    getBuildList() {
-      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);
-          }
-          this.builds = newRes.data[0].children[0].children[0].children;
-          //   console.log("筛选后的新结果", this.builds);
-          this.getList();
-        }
-      });
-    },
-    // 递归函数，用于去除指定层级往后的 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
-          );
-        }
-      }
-    },
-    // 初始化时间
-    initializeTimeDate() {
-      this.dayDate = formatDay(new Date()); // 更新
+    //当在子页面中点击按钮时，会触发switch-tab事件，
+    // 然后在父组件中监听到这个事件，并将activeName设置为'second'，从而让第二个tab成为当前选中的tab。
+    switchToEquitesMess() {
+      this.activeName = "second";
     },
-    // 查询
-    findData() {
-      this.getList();
-    },
-    //请求数据
-    getList() {
-      let data = {
-        startTime: this.dayDate,
-        endTime: this.dayDate,
-        building: this.building,
-      };
-      console.log("查询数据参数", data);
-      this.listLoading = true;
-      //   请求数据
-      // Just to simulate the time of the request
-      setTimeout(() => {
-        this.listLoading = false;
-      }, 1.0 * 1000);
-    },
-    // 导出
-    exportData() {
-      let data = {
-        timeType: this.dateType,
-        startTime: this.queryParams.startTime,
-        endTime: this.endTime,
-        building: this.building,
-      };
-      console.log("导出数据参数", data);
-      analyzeExport(data).then((res) => {
-        console.log("导出返回", res);
-        if (res) {
-          // 请求的结果就是文件
-          // 创建一个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("导出失败!");
-        }
-      });
-      // .catch((err) => {
-      //     this.$message.error('导出失败!');
-      // })
-    },
-    tableRowStyle({ row, column, rowIndex, columnIndex }) {
-      // 修改颜色
-      if (columnIndex === 1) {
-        return "color: #fd1e00;!important;text-align:center";
-      }
-      if (columnIndex === 2) {
-        return "color: #3390ff;!important;text-align:center";
-      }
-      if (columnIndex === 4) {
-        return "color: #75d148;!important;text-align:center";
-      }
-      // return "text-align:center";
+    switchToPatrolTem() {
+      // this.activeName = 'fourth';
     },
+    // 记得请求冷水机组数据时，默认选中第一个冷水机组
   },
 };
 </script>
+
 <style lang="scss" scoped>
-.condition {
+.paramsDetails {
   display: flex;
   flex-direction: row;
+  align-items: stretch;
   justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin-bottom: 0.24rem;
-
-  .condition-left {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
 
-    .years-div {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .years-word {
-        font-size: 14px;
-        margin: 0 5px;
-        color: #388ff3;
-      }
-    }
-
-    .time-label {
-      font-size: 16px;
-      line-height: 7px;
-      margin-right: 12px;
-      white-space: nowrap;
-    }
-  }
-}
-.data-content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  width: 100%;
-  margin-top: 23px;
-  .data-li {
-    background-color: transparent;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0.3rem;
-    width: 31%;
-    justify-content: space-between;
-    margin-bottom: 0.24rem;
-    font-family: SourceHanSansCN-Regular;
-    font-size: 0.16rem;
-    position: relative;
-    overflow: hidden;
-    .use-icon {
-      width: 0.6rem;
-      height: 0.6rem;
-    }
-    .use-text {
-      width: 33%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      color: #dbdbdb;
-      .data-text {
-        z-index: 11 !important;
-        font-family: DIN-Bold;
-        font-size: 0.24rem;
-        margin-top: 0.05rem;
-        color: #ffffff;
-      }
-      .downText {
-        color: #ff4027;
-        z-index: 11 !important;
-        font-family: DIN-Bold;
-        font-size: 0.24rem;
-        margin-top: 0.05rem;
-        .el-icon-bottom {
-          margin-right: 0.08rem;
-        }
-      }
-      .upText {
-        color: #2ff016;
-        z-index: 11 !important;
-        font-family: DIN-Bold;
-        font-size: 0.24rem;
-        margin-top: 0.05rem;
-        .el-icon-bottom,
-        .el-icon-top {
-          margin-right: 0.08rem;
-        }
-      }
-    }
-  }
-  .type-img {
-    position: absolute;
-    bottom: 0;
-    width: 3.17rem;
-    height: 0.52rem;
-    z-index: 10;
-  }
-  .type1 {
-    border: 1px solid #e8aa13;
-    border-radius: 10px;
-    /* 设置渐变背景 */
-    background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5));
-  }
-  .type1::after {
-    content: "";
-    width: 100%;
-    height: 90%;
-    box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    bottom: -100% !important;
-    z-index: 1;
-  }
-  .type2 {
-    border: 1px solid #27a0f2;
-    border-radius: 10px;
-    /* 设置渐变背景 */
-    background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5));
-  }
-  .type2::after {
-    content: "";
+  .details-content {
     width: 100%;
-    height: 90%;
-    box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    bottom: -100% !important;
-    z-index: 1;
-  }
-  .type3 {
-    border: 1px solid #1ad3ef;
-    border-radius: 10px;
-    /* 设置渐变背景 */
-    background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5));
-  }
-  .type3::after {
-    content: "";
-    width: 100%;
-    height: 90%;
-    box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    bottom: -100% !important;
-    z-index: 1;
-  }
-  .type4 {
-    border: 1px solid #11d47b;
-    border-radius: 10px;
-    /* 设置渐变背景 */
-    background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5));
-  }
-  .type4::after {
-    content: "";
-    width: 100%;
-    height: 90%;
-    box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    bottom: -100% !important;
-    z-index: 1;
+    // height: 0.42rem;
+    position: relative;
   }
 }
-.choice {
-  margin: 20px;
-  .mr20 {
-    padding: 0.05rem 0.2rem;
-    white-space: nowrap;
-    width: auto;
-  }
+</style>
+<style scoped>
+.none-div {
+  padding-top: 0.31rem;
 }
-.charts {
-  width: 100%;
-  height: 300px;
-  margin-bottom: 0.1rem;
+
+.none-div >>> .el-tree {
+  background: transparent;
+  color: #789d9f;
 }
-// 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {
-  .condition {
-    .condition-left {
-      .years-div {
-        .years-word {
-          font-size: 0.14rem !important;
-          margin: 0 0.05rem !important;
-        }
-      }
 
-      .time-label {
-        font-size: 0.16rem !important;
-        line-height: 0.07rem !important;
-        margin-right: 0.12rem !important;
-      }
-    }
-  }
+.none-div >>> .el-tree-node:focus > .el-tree-node__content {
+  background-color: #00be97;
+  color: #fff;
+}
+
+.none-div >>> .el-tree-node__content:hover,
+.none-div >>> .el-upload-list__item:hover {
+  background-color: #00be97;
+  color: #fff;
+}
+
+.none-div >>> .el-tree-node__content {
+  height: 0.48rem;
+  justify-content: center;
+}
+
+.none-div >>> .el-tree-node__expand-icon.is-leaf {
+  display: none !important;
 }
 </style>
diff --git a/src/views/hotWater/overview/index.vue b/src/views/hotWater/overview/index.vue
index 2ca463c..b634e57 100644
--- a/src/views/hotWater/overview/index.vue
+++ b/src/views/hotWater/overview/index.vue
@@ -13,7 +13,7 @@
                 src="../../../assets/images/overview1.png"
                 alt=""
               />
-              <div class="overview-num">640.4</div>
+              <div class="overview-num">{{ useHotWater }}</div>
               <div class="overview-title">昨日用水量(吨)</div>
             </div>
             <div class="overview-data-li">
@@ -22,7 +22,7 @@
                 src="../../../assets/images/overview2.png"
                 alt=""
               />
-              <div class="overview-num">2428.88</div>
+              <div class="overview-num">{{ electValue }}</div>
               <div class="overview-title">昨日用电量(度)</div>
             </div>
             <div class="overview-data-li">
@@ -31,7 +31,7 @@
                 src="../../../assets/images/overview3.png"
                 alt=""
               />
-              <div class="overview-num">3.79</div>
+              <div class="overview-num">{{ electWater }}</div>
               <div class="overview-title">昨日单耗(度/吨)</div>
             </div>
             <div class="overview-data-li">
@@ -40,7 +40,7 @@
                 src="../../../assets/images/overview4.png"
                 alt=""
               />
-              <div class="overview-num">186</div>
+              <div class="overview-num">{{ allData }}</div>
               <div class="overview-title">通讯设备设备总数(台)</div>
             </div>
           </div>
@@ -80,9 +80,14 @@
 </template>
 <script>
 import * as echarts from "echarts";
+import { getDay } from "@/utils/datetime";
+import { deviceState, hotEnergyQuery } from "@/api/hotWater/overview";
 export default {
   data() {
     return {
+      electWater: "",
+      electValue: "",
+      useHotWater: "",
       loading: false,
       chartInstance: null,
       option: {},
@@ -133,208 +138,219 @@ export default {
       //手动的调用图标对象的resize才能产生效果
       this.chartInstance.resize();
     },
+
     // 获取热泵运行状态
     pumpEchartsData() {
-      let data = true;
-      this.chartData1 = 10;
-      this.chartData2 = 3;
-      this.allData = 13;
-      if (data) {
-        const titleFontSize = (this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
-        const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表
-        const adapterOption = {
-          tooltip: {
-            trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)",
-          },
-          //环形图中间文字
-          title: {
-            subtext: this.allData,
-          },
-          legend: {
-            itemWidth: titleFontSize,
-            itemHeight: titleFontSize,
-            itemGap: titleFontSize * 2,
-            formatter: function (name) {
-              var arr = [];
-              let data = adapterOption.series[0].data;
-              var index = 0;
-              var total = 0;
-              for (var i = 0; i < data.length; i++) {
-                total += data[i].value;
-                if (data[i].name == name) {
-                  index = i;
-                }
-              }
-              arr.push(
-                "{name|" + name + "}",
-                "{text|" + " " + ":" + " " + "}",
-                "{value|" + data[index].value + "}",
-                "{text|" + " " + "台" + "}"
-              );
-              return arr.join("");
+      let data = {
+        systemType: 1,
+      };
+      deviceState(data).then((res) => {
+        if (res.rows) {
+          console.log("进行赋值", res.rows);
+          this.chartData1 = res.rows[0].pumpOnline;
+          this.chartData2 = parseInt(
+            res.rows[0].deviceNum - res.rows[0].pumpOnline
+          );
+          this.allData = res.rows[0].deviceNum;
+          const titleFontSize =
+            (this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
+          const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表
+          const adapterOption = {
+            tooltip: {
+              trigger: "item",
+              formatter: "{a} <br/>{b} : {c} ({d}%)",
             },
-            textStyle: {
-              color: function (name) {
-                const dataSeries = adapterOption.series[1].data; // 数据圆的data
-                const index = dataSeries.findIndex(
-                  (item) => item.name === name
+            //环形图中间文字
+            title: {
+              subtext: this.allData,
+            },
+            legend: {
+              itemWidth: titleFontSize,
+              itemHeight: titleFontSize,
+              itemGap: titleFontSize * 2,
+              formatter: function (name) {
+                var arr = [];
+                let data = adapterOption.series[0].data;
+                var index = 0;
+                var total = 0;
+                for (var i = 0; i < data.length; i++) {
+                  total += data[i].value;
+                  if (data[i].name == name) {
+                    index = i;
+                  }
+                }
+                arr.push(
+                  "{name|" + name + "}",
+                  "{text|" + " " + ":" + " " + "}",
+                  "{value|" + data[index].value + "}",
+                  "{text|" + " " + "台" + "}"
                 );
-                const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
-                return colorList[index];
+                return arr.join("");
               },
-              rich: {
-                name: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                },
-                text: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
+              textStyle: {
+                color: function (name) {
+                  const dataSeries = adapterOption.series[1].data; // 数据圆的data
+                  const index = dataSeries.findIndex(
+                    (item) => item.name === name
+                  );
+                  const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
+                  return colorList[index];
                 },
-                value: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                  // color: function (params) {
-                  //   let data = adapterOption.series[1].data;
-                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
-                  // },
-                },
-                percentage: {
-                  align: "left",
-                  fontSize: titleFontSize * 2,
-                  // color: function (params) {
-                  //   let data = adapterOption.series[1].data;
-                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
-                  // },
+                rich: {
+                  name: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                  },
+                  text: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                  },
+                  value: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                    // color: function (params) {
+                    //   let data = adapterOption.series[1].data;
+                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                    // },
+                  },
+                  percentage: {
+                    align: "left",
+                    fontSize: titleFontSize * 2,
+                    // color: function (params) {
+                    //   let data = adapterOption.series[1].data;
+                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                    // },
+                  },
                 },
               },
             },
-          },
-          series: [
-            {
-              name: "温度监测:",
-              data: [
-                { value: this.chartData1, name: "运行" },
-                { value: this.chartData2, name: "不运行" },
-              ],
-              itemStyle: {
-                color: function (params) {
-                  var colorList = ["#2df499", "#08c8ff"];
-                  return colorList[params.dataIndex];
+            series: [
+              {
+                name: "温度监测:",
+                data: [
+                  { value: this.chartData1, name: "运行" },
+                  { value: this.chartData2, name: "不运行" },
+                ],
+                itemStyle: {
+                  color: function (params) {
+                    var colorList = ["#2df499", "#08c8ff"];
+                    return colorList[params.dataIndex];
+                  },
+                  // borderWidth: 5,
+                  borderColor: "#002a56",
                 },
-                // borderWidth: 5,
-                borderColor: "#002a56",
               },
+              {
+                data: [
+                  { value: this.chartData1, name: "运行" },
+                  { value: this.chartData2, name: "不运行" },
+                ],
+              },
+            ],
+          };
+          this.chartInstance.setOption(adapterOption);
+          this.chartInstance.resize();
+        } else {
+          this.allData = 0;
+          const titleFontSize =
+            (this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
+          const adapterOption = {
+            tooltip: {
+              trigger: "item",
+              formatter: "{a} <br/>{b} : {c} ({d}%)",
             },
-            {
-              data: [
-                { value: this.chartData1, name: "运行" },
-                { value: this.chartData2, name: "不运行" },
-              ],
+            //环形图中间文字
+            title: {
+              subtext: 0,
             },
-          ],
-        };
-        this.chartInstance.setOption(adapterOption);
-        this.chartInstance.resize();
-      } else {
-        const titleFontSize = (this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
-        const adapterOption = {
-          tooltip: {
-            trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)",
-          },
-          //环形图中间文字
-          title: {
-            subtext: 0,
-          },
-          legend: {
-            itemWidth: titleFontSize,
-            itemHeight: titleFontSize,
-            itemGap: titleFontSize * 2,
-            formatter: function (name) {
-              var arr = [];
-              let data = adapterOption.series[0].data;
-              var index = 0;
-              var total = 0;
-              for (var i = 0; i < data.length; i++) {
-                total += data[i].value;
-                if (data[i].name == name) {
-                  index = i;
+            legend: {
+              itemWidth: titleFontSize,
+              itemHeight: titleFontSize,
+              itemGap: titleFontSize * 2,
+              formatter: function (name) {
+                var arr = [];
+                let data = adapterOption.series[0].data;
+                var index = 0;
+                var total = 0;
+                for (var i = 0; i < data.length; i++) {
+                  total += data[i].value;
+                  if (data[i].name == name) {
+                    index = i;
+                  }
                 }
-              }
-              arr.push(
-                "{name|" + name + "}",
-                "{text|" + " " + ":" + " " + "}",
-                "{value|" + data[index].value + "}",
-                "{text|" + " " + "台" + "}"
-              );
-              return arr.join("");
-            },
-            textStyle: {
-              color: function (name) {
-                const dataSeries = adapterOption.series[1].data; // 数据圆的data
-                const index = dataSeries.findIndex(
-                  (item) => item.name === name
+                arr.push(
+                  "{name|" + name + "}",
+                  "{text|" + " " + ":" + " " + "}",
+                  "{value|" + data[index].value + "}",
+                  "{text|" + " " + "台" + "}"
                 );
-                const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
-                return colorList[index];
+                return arr.join("");
               },
-              rich: {
-                name: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                },
-                text: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
+              textStyle: {
+                color: function (name) {
+                  const dataSeries = adapterOption.series[1].data; // 数据圆的data
+                  const index = dataSeries.findIndex(
+                    (item) => item.name === name
+                  );
+                  const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
+                  return colorList[index];
                 },
-                value: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                  // color: function (params) {
-                  //   let data = adapterOption.series[1].data;
-                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
-                  // },
-                },
-                percentage: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                  // color: function (params) {
-                  //   let data = adapterOption.series[1].data;
-                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
-                  // },
+                rich: {
+                  name: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                  },
+                  text: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                  },
+                  value: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                    // color: function (params) {
+                    //   let data = adapterOption.series[1].data;
+                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                    // },
+                  },
+                  percentage: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                    // color: function (params) {
+                    //   let data = adapterOption.series[1].data;
+                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                    // },
+                  },
                 },
               },
             },
-          },
-          series: [
-            {
-              name: "温度监测:",
-              data: [
-                { value: 0, name: "运行" },
-                { value: 0, name: "不运行" },
-              ],
-              itemStyle: {
-                color: function (params) {
-                  var colorList = ["#2df499", "#08c8ff"];
-                  return colorList[params.dataIndex];
+            series: [
+              {
+                name: "温度监测:",
+                data: [
+                  { value: 0, name: "运行" },
+                  { value: 0, name: "不运行" },
+                ],
+                itemStyle: {
+                  color: function (params) {
+                    var colorList = ["#2df499", "#08c8ff"];
+                    return colorList[params.dataIndex];
+                  },
+                  // borderWidth: 5,
+                  borderColor: "#002a56",
                 },
-                // borderWidth: 5,
-                borderColor: "#002a56",
               },
-            },
-            {
-              data: [
-                { value: 0, name: "运行" },
-                { value: 0, name: "不运行" },
-              ],
-            },
-          ],
-        };
-        this.chartInstance.setOption(adapterOption);
-        this.chartInstance.resize();
-      }
+              {
+                data: [
+                  { value: 0, name: "运行" },
+                  { value: 0, name: "不运行" },
+                ],
+              },
+            ],
+          };
+          this.chartInstance.setOption(adapterOption);
+          this.chartInstance.resize();
+        }
+      });
     },
     //初始化chartInstance对象-饼图
     initChart() {
@@ -612,11 +628,87 @@ export default {
     },
     // 获取折线图数据
     getTableData() {
-      this.brokenData1 = [30, 40, 29];
-      this.brokenData2 = [10, 23, 12];
-      this.brokenData3 = [3, 4, 2];
-      this.brokenTime = ["3月", "4月", "5月"];
-      this.renderingBroken();
+      let date = new Date();
+      let year = date.getFullYear().toString();
+      let month =
+        date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1).toString()
+          : (date.getMonth() + 1).toString();
+      let day =
+        date.getDate() < 10
+          ? "0" + date.getDate().toString()
+          : date.getDate().toString();
+      let start = year + "-" + month + "-01"; //当月第一天
+      let end = year + "-" + month + "-" + day; //当天
+
+      const dailyParams = {
+        type: 1,
+        buildingId: "所有",
+        page: 1,
+        limit: 31,
+        startDate: getDay(-1),
+        endDate: getDay(-1),
+      };
+      const monthlyParams = {
+        type: 1,
+        buildingId: "所有",
+        page: 1,
+        limit: 31,
+        startDate: start,
+        endDate: end,
+      };
+
+      // 并发请求日数据和月数据
+      Promise.all([hotEnergyQuery(dailyParams), hotEnergyQuery(monthlyParams)])
+        .then(([dailyResponse, monthlyResponse]) => {
+          console.log("昨日数据", dailyResponse);
+          if (
+            dailyResponse.code == 200 &&
+            dailyResponse.rows !== null &&
+            dailyResponse.rows.length > 0
+          ) {
+            this.electWater = dailyResponse.rows[0].electWater;
+            this.electValue = dailyResponse.rows[0].electValue;
+            this.useHotWater = dailyResponse.rows[0].useHotWater;
+          } else {
+            this.electWater = 0;
+            this.electValue = 0;
+            this.useHotWater = 0;
+          }
+          console.log("当月数据", monthlyResponse);
+          this.brokenData1 = [];
+          this.brokenData2 = [];
+          this.brokenData3 = [];
+          this.brokenTime = [];
+          if (monthlyResponse.code == 200) {
+            monthlyResponse.rows.forEach((item) => {
+              this.brokenData1.push(item.useHotWater);
+              this.brokenData2.push(item.electValue);
+              this.brokenData3.push(item.electWater);
+              if (item.curDate.includes("-")) {
+                var oneStr = item.curDate.split("-");
+                this.brokenTime.push(
+                  oneStr[oneStr.length - 2] + "-" + oneStr[oneStr.length - 1]
+                );
+              }
+            });
+            // 对数组进行反转操作
+            this.brokenData1.reverse();
+            this.brokenData2.reverse();
+            this.brokenData3.reverse();
+            this.brokenTime.reverse();
+            this.renderingBroken();
+          } else {
+            this.brokenData1 = [];
+            this.brokenData2 = [];
+            this.brokenData3 = [];
+            this.brokenTime = [];
+            this.renderingBroken();
+          }
+        })
+        .catch((error) => {
+          console.error("请求数据时出错:", error);
+        });
     },
     renderingBroken() {
       if (this.currentIndex === 0) {
diff --git a/src/views/temSys/temMonitor/index.vue b/src/views/temSys/temMonitor/index.vue
index d3fa0e0..9c497bd 100644
--- a/src/views/temSys/temMonitor/index.vue
+++ b/src/views/temSys/temMonitor/index.vue
@@ -212,6 +212,7 @@ export default {
               return item.label && item.label.includes("温度监测");
             });
           }
+          console.log("newRes.data[0]",newRes.data[0])
           // 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级
           const targetLevel = 4;
           // 从 data[0] 开始处理，当前层级为 1