From 46fe8ea70c9094cc3140671e4bc0ee3f6210aedf Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Thu, 26 Jun 2025 17:11:38 +0800
Subject: [PATCH] =?UTF-8?q?1.=E7=94=9F=E6=B4=BB=E7=83=AD=E6=B0=B4-?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BF=AE=E6=94=B9=E7=83=AD=E6=B3=B5=E6=80=BB?=
 =?UTF-8?q?=E6=95=B0=202.=E8=83=BD=E6=BA=90=E5=88=86=E6=9E=90-=E8=83=BD?=
 =?UTF-8?q?=E8=80=97=E6=8A=A5=E8=A1=A8=E5=8E=BB=E6=8E=89=E6=A5=BC=E6=A0=8B?=
 =?UTF-8?q?=E4=BA=BA=E6=95=B0=E3=80=81=E4=BA=BA=E5=9D=87=E7=94=A8=E9=87=8F?=
 =?UTF-8?q?=E5=80=BC=203.=E7=94=A8=E8=83=BD=E6=9F=A5=E8=AF=A2=E6=B0=B4?=
 =?UTF-8?q?=E7=94=B5=E8=A1=A8=E8=AF=BB=E6=95=B0=E6=B7=BB=E5=8A=A0=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E9=87=8F=204.=E5=AF=B9=E6=8E=A5=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=E9=A1=B5=E9=9D=A2=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/hotWater/dataAnalysis.js              |  18 +
 .../dataAnalysis/components/analyzeMonth.vue  | 495 ++++++++++--------
 .../dataAnalysis/components/analyzeYear.vue   | 451 +++++++++-------
 src/views/hotWater/dataAnalysis/index.vue     | 241 ++-------
 .../components/energyReport.vue               |  10 -
 .../energyAnalysis/components/temReport.vue   |   4 +-
 .../energyAnalysis/components/waterReport.vue |   4 +-
 .../energyQuery/components/electReading.vue   |  90 +++-
 .../energyQuery/components/waterReading.vue   |  94 ++--
 src/views/hotWater/overview/index.vue         |   4 +-
 10 files changed, 733 insertions(+), 678 deletions(-)
 create mode 100644 src/api/hotWater/dataAnalysis.js

diff --git a/src/api/hotWater/dataAnalysis.js b/src/api/hotWater/dataAnalysis.js
new file mode 100644
index 0000000..462dd00
--- /dev/null
+++ b/src/api/hotWater/dataAnalysis.js
@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+// 数据分析-月
+export function queryMonthDatas(query) {
+  return request({
+    url: "/hot_energy/analysis/queryMonth",
+    method: "get",
+    params: query,
+  });
+}
+// 数据分析-年
+export function queryYearDatas(query) {
+  return request({
+    url: "/hot_energy/analysis/queryYear",
+    method: "get",
+    params: query,
+  });
+}
diff --git a/src/views/hotWater/dataAnalysis/components/analyzeMonth.vue b/src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
index 4db2274..3b463c2 100644
--- a/src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
+++ b/src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
@@ -1,6 +1,6 @@
 <!-- 报表查询-用能查询-年数据 -->
 <template>
-  <div>
+  <div class="analy-table">
     <div class="findwatercharts" ref="findwater_ref"></div>
     <!-- 表格 -->
     <el-table
@@ -88,6 +88,7 @@
 
 <script>
 import { getDay, getMonth, getYear } from "@/utils/datetime";
+import { queryMonthDatas } from "@/api/hotWater/dataAnalysis";
 import * as echarts from "echarts";
 export default {
   props: {
@@ -97,9 +98,12 @@ export default {
     chTime: {
       type: String,
     },
-    jtData: {
+    chBuild: {
       type: String,
     },
+    currentIndex: {
+      type: Number,
+    },
   },
   data() {
     return {
@@ -124,30 +128,21 @@ export default {
     };
   },
   watch: {
-    chType: {
+    currentIndex: {
       immediate: true,
       deep: true,
       handler(newVal, val) {
         // console.log("子组件改变的值", newVal);
         this.$nextTick(function () {
+          console.log("子组件接受的type类型", this.chType);
+          console.log("子组件这时候有building吗", this.chBuild);
           this.getMothData();
         });
       },
     },
-    // 对vuex里的点击的楼栋id进行监听
-    jtData: {
-      handler(newVal, oldVal) {
-        // console.log("监听vuex的id", newVal, oldVal);
-        this.$nextTick(function () {
-          this.getMothData();
-        });
-      },
-      deep: true,
-      immediate: true,
-    },
   },
   mounted() {
-    this.getMothData();
+    // this.getMothData();
     this.initChart1();
     window.addEventListener("resize", this.screenAdapter);
     this.screenAdapter();
@@ -160,7 +155,7 @@ export default {
     tableRowStyle({ row, column, rowIndex, columnIndex }) {
       // 如果第1列，修改颜色
       if (columnIndex === 0) {
-        return "background-color: #31354e !important;";
+        return "background-color:rgb(11 ,100, 201) !important;";
       }
     },
     // 查询表格数据
@@ -172,180 +167,228 @@ export default {
       if (this.chTime) {
         this.endTime = this.chTime;
       } else {
-        this.endTime = getMonth(0)
+        this.endTime = getMonth(0);
       }
       let params = {
         curDate: this.endTime,
-        buildingId: this.endId,
+        buildingId: this.chBuild,
         type: this.chType,
       };
       console.log("月参数", params);
-      //   this.$api.statementfind.energyMonth(params).then((res) => {
-      //     // console.log("月表格返回", res);
-      //     if (res.code == 200) {
-      //       var line1 = [];
-      //       var line2 = [];
-      //       var line3 = [];
-      //       var line4 = [];
-      //       this.tableData = res.data;
-      //       // Object.values 把数组对象 转化为 数组
-      //       line1 = Object.values(this.tableData[0]).slice(3, 35);
-      //       line2 = Object.values(this.tableData[1]).slice(3, 35);
-      //       line3 = Object.values(this.tableData[2]).slice(3, 35);
-      //       line4 = Object.values(this.tableData[3]).slice(3, 35);
-      //       // 四条折线图  filter里过滤掉空值
-      //       this.data1 = line1.filter(function (s) {
-      //         return s && s.trim();
-      //       });
-      //       this.data2 = line2.filter(function (s) {
-      //         return s && s.trim();
-      //       });
-      //       // 含百分比的数组数据还需要处理
-      //       var line5 = line3.filter(function (s) {
-      //         return s && s.trim();
-      //       });
-      //       this.data3 = [];
-      //       this.data4 = [];
-      //       // 遍历去除掉%，拼接后返回新数组
-      //       line5.forEach((item) => {
-      //         this.data3.push(item.split("%").join(""));
-      //       });
-      //       var line6 = line4.filter(function (s) {
-      //         return s && s.trim();
-      //       });
-      //       line6.forEach((item) => {
-      //         this.data4.push(item.split("%").join(""));
-      //       });
-      //       // 折线图x轴 数据
-      //       // 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值
-      //       //定义一个新数组
-      //       let newObj = {};
-      //       for (let key in this.tableData[0]) {
-      //         if (this.tableData[0][key]) {
-      //           newObj[key] = this.tableData[0][key];
-      //         }
-      //       }
-      //       // console.log("不含空的数组对象", newObj);
-      //       // 在返回的新的对象中，取出对象的所有key值返回新数组
-      //       // Object.setPrototypeOf(this.newObj);
-      //       let data7 = Object.keys(newObj);
-      //       // console.log("不含空的x轴数据", data7);
-      //       // 先返回月的数组
-      //       let allArr = [
-      //         "day01",
-      //         "day02",
-      //         "day03",
-      //         "day04",
-      //         "day05",
-      //         "day06",
-      //         "day07",
-      //         "day08",
-      //         "day09",
-      //         "day10",
-      //         "day11",
-      //         "day12",
-      //         "day13",
-      //         "day14",
-      //         "day15",
-      //         "day16",
-      //         "day17",
-      //         "day18",
-      //         "day19",
-      //         "day20",
-      //         "day21",
-      //         "day22",
-      //         "day23",
-      //         "day24",
-      //         "day25",
-      //         "day26",
-      //         "day27",
-      //         "day28",
-      //         "day29",
-      //         "day30",
-      //         "day31",
-      //       ];
-      //       // 非空数组和所有月的数组进行筛选出重复的元素
-      //       function compare(data7, allArr) {
-      //         return data7.filter((v) => {
-      //           return allArr.includes(v);
-      //         });
-      //       }
-      //       // console.log("x轴未分割日份", compare(data7, allArr));
-      //       // 分割data7，返回月份 xx月
-      //       this.data8 = [];
-      //       compare(data7, allArr).forEach((item) => {
-      //         if (item) {
-      //           this.data8.push(item.split("day").join("") + "日");
-      //         }
-      //       });
-      //       // console.log("x轴数据", this.data8);
-      //       // 图例
-      //       this.data6 = [];
-      //       this.data5 = this.tableData.forEach((item) => {
-      //         return this.data6.push(item.itemType);
-      //       });
-      //       // console.log("data1数据", this.data1);
-      //       // console.log("data2数据", this.data2);
-      //       // console.log("data3数据", this.data3);
-      //       // console.log("data4数据", this.data4);
-      //       // console.log("图例文字", this.data6);
-      //       // 月数据
-      //       var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
-      //         Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
-      //         Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
-      //         Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
-      //       // console.log("Min1", Min1);
-      //       // console.log("Min2", Min2);
-      //       // console.log("Max1", Max1);
-      //       // console.log("Max2", Max2);
-      //       this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
-      //       const adapterOption = {
-      //         legend: {
-      //           data: this.data6,
-      //         },
-      //         xAxis: {
-      //           data: this.data8,
-      //         },
-      //         yAxis: [
-      //           //两个y轴
-      //           {
-      //             min: Min1,
-      //             max: Max1,
-      //             splitNumber: 10,
-      //             interval: (Max1 - Min1) / 10,
-      //           },
-      //           {
-      //             min: Min2,
-      //             max: Max2,
-      //             splitNumber: 10,
-      //             interval: (Max2 - Min2) / 10,
-      //           },
-      //         ],
-      //         series: [
-      //           {
-      //             name: this.data6[0],
-      //             data: this.data1,
-      //           },
-      //           {
-      //             name: this.data6[1],
-      //             data: this.data2,
-      //           },
-      //           {
-      //             name: this.data6[2],
-      //             data: this.data3,
-      //           },
-      //           {
-      //             name: this.data6[3],
-      //             data: this.data4,
-      //           },
-      //         ],
-      //       };
-      //       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-      //       this.chartInstance1.setOption(adapterOption);
-      //       //手动的调用图标对象的resize才能产生效果
-      //       this.chartInstance1.resize();
-      //     }
-      //   });
+      queryMonthDatas(params).then((res) => {
+        // console.log("月表格返回", res);
+        if (res.code == 200 && res.rows.length > 0) {
+          var line1 = [];
+          var line2 = [];
+          var line3 = [];
+          var line4 = [];
+          this.tableData = res.rows;
+          // Object.values 把数组对象 转化为 数组
+          line1 = Object.values(this.tableData[0]).slice(3, 35);
+          line2 = Object.values(this.tableData[1]).slice(3, 35);
+          line3 = Object.values(this.tableData[2]).slice(3, 35);
+          line4 = Object.values(this.tableData[3]).slice(3, 35);
+          // 四条折线图  filter里过滤掉空值
+          this.data1 = line1.filter(function (s) {
+            return s && s.trim();
+          });
+          this.data2 = line2.filter(function (s) {
+            return s && s.trim();
+          });
+          // 含百分比的数组数据还需要处理
+          var line5 = line3.filter(function (s) {
+            return s && s.trim();
+          });
+          this.data3 = [];
+          this.data4 = [];
+          // 遍历去除掉%，拼接后返回新数组
+          line5.forEach((item) => {
+            this.data3.push(item.split("%").join(""));
+          });
+          var line6 = line4.filter(function (s) {
+            return s && s.trim();
+          });
+          line6.forEach((item) => {
+            this.data4.push(item.split("%").join(""));
+          });
+          // 折线图x轴 数据
+          // 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值
+          //定义一个新数组
+          let newObj = {};
+          for (let key in this.tableData[0]) {
+            if (this.tableData[0][key]) {
+              newObj[key] = this.tableData[0][key];
+            }
+          }
+          // console.log("不含空的数组对象", newObj);
+          // 在返回的新的对象中，取出对象的所有key值返回新数组
+          // Object.setPrototypeOf(this.newObj);
+          let data7 = Object.keys(newObj);
+          // console.log("不含空的x轴数据", data7);
+          // 先返回月的数组
+          let allArr = [
+            "day01",
+            "day02",
+            "day03",
+            "day04",
+            "day05",
+            "day06",
+            "day07",
+            "day08",
+            "day09",
+            "day10",
+            "day11",
+            "day12",
+            "day13",
+            "day14",
+            "day15",
+            "day16",
+            "day17",
+            "day18",
+            "day19",
+            "day20",
+            "day21",
+            "day22",
+            "day23",
+            "day24",
+            "day25",
+            "day26",
+            "day27",
+            "day28",
+            "day29",
+            "day30",
+            "day31",
+          ];
+          // 非空数组和所有月的数组进行筛选出重复的元素
+          function compare(data7, allArr) {
+            return data7.filter((v) => {
+              return allArr.includes(v);
+            });
+          }
+          // console.log("x轴未分割日份", compare(data7, allArr));
+          // 分割data7，返回月份 xx月
+          this.data8 = [];
+          compare(data7, allArr).forEach((item) => {
+            if (item) {
+              this.data8.push(item.split("day").join("") + "日");
+            }
+          });
+          // console.log("x轴数据", this.data8);
+          // 图例
+          this.data6 = [];
+          this.data5 = this.tableData.forEach((item) => {
+            return this.data6.push(item.itemType);
+          });
+          // console.log("data1数据", this.data1);
+          // console.log("data2数据", this.data2);
+          // console.log("data3数据", this.data3);
+          // console.log("data4数据", this.data4);
+          // console.log("图例文字", this.data6);
+          // 月数据
+          var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
+            Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
+            Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
+            Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
+          // console.log("Min1", Min1);
+          // console.log("Min2", Min2);
+          // console.log("Max1", Max1);
+          // console.log("Max2", Max2);
+          this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
+          const adapterOption = {
+            legend: {
+              data: this.data6,
+            },
+            xAxis: {
+              data: this.data8,
+            },
+            yAxis: [
+              //两个y轴
+              {
+                min: Min1,
+                max: Max1,
+                splitNumber: 10,
+                interval: (Max1 - Min1) / 10,
+              },
+              {
+                min: Min2,
+                max: Max2,
+                splitNumber: 10,
+                interval: (Max2 - Min2) / 10,
+              },
+            ],
+            series: [
+              {
+                name: this.data6[0],
+                data: this.data1,
+              },
+              {
+                name: this.data6[1],
+                data: this.data2,
+              },
+              {
+                name: this.data6[2],
+                data: this.data3,
+              },
+              {
+                name: this.data6[3],
+                data: this.data4,
+              },
+            ],
+          };
+          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+          this.chartInstance1.setOption(adapterOption);
+          //手动的调用图标对象的resize才能产生效果
+          this.chartInstance1.resize();
+        } else {
+          this.tableData = [];
+          this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
+          const adapterOption = {
+            legend: {
+              data: [],
+            },
+            xAxis: {
+              data: [],
+            },
+            yAxis: [
+              //两个y轴
+              {
+                min: 0,
+                max: 0,
+                splitNumber: 10,
+                interval: 0,
+              },
+              {
+                min: 0,
+                max: 0,
+                splitNumber: 10,
+                interval: 0,
+              },
+            ],
+            series: [
+              {
+                name: "",
+                data: [],
+              },
+              {
+                name: "",
+                data: [],
+              },
+              {
+                name: "",
+                data: [],
+              },
+              {
+                name: "",
+                data: [],
+              },
+            ],
+          };
+          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+          this.chartInstance1.setOption(adapterOption);
+          //手动的调用图标对象的resize才能产生效果
+          this.chartInstance1.resize();
+        }
+      });
     },
     // 导出数据
     outTable() {
@@ -426,27 +469,27 @@ export default {
         if (this.chTime) {
           this.endTime = this.chTime;
         } else {
-          this.endTime = getMonth(0)
+          this.endTime = getMonth(0);
         }
         let params = {
           curDate: this.endTime,
-          buildingId: this.endId,
+          buildingId: this.chBuild,
           type: this.chType,
         };
         console.log("月参数", params);
-        // this.$api.statementfind.energyMonth(params).then((res) => {
-        //   if (res.code == 200) {
-        //     // console.log(res);
-        //     const data = this.formatJson(filterVal, res.data);
-        //     const autoWidth = true;
-        //     excel.export_json_to_excel({
-        //       header: tHeader, //表头
-        //       data, //数据
-        //       filename: "月数据报表", //名称
-        //       autoWidth: true, //宽度自适应
-        //     });
-        //   }
-        // });
+        queryMonthDatas(params).then((res) => {
+          if (res.code == 200 && res.rows.length > 0) {
+            // console.log(res);
+            const data = this.formatJson(filterVal, res.rows);
+            const autoWidth = true;
+            excel.export_json_to_excel({
+              header: tHeader, //表头
+              data, //数据
+              filename: "月数据报表", //名称
+              autoWidth: true, //宽度自适应
+            });
+          }
+        });
       });
     },
     //格式转换,不需要改动
@@ -507,22 +550,26 @@ export default {
           boundaryGap: true,
           // 修饰刻度标签的颜色即x坐标数据
           axisLabel: {
-            // interval: 0,
+            // interval: 0, //强制显示所有x轴数据
             // rotate: 30, //x轴坐标字体倾斜30度
-            color: "rgba(255,255,255,.7)",
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: 14, // 设置字体大小，可根据需要调整
           },
           axisTick: {
             show: false, // 不显示坐标轴刻度线
           },
-          // 去除x坐标轴的颜色
+          // x坐标轴的颜色
           axisLine: {
             show: true,
             lineStyle: {
-              // X 轴颜色配置
-              color: "#707070",
+              color: "#365576",
             },
           },
-          //splitLine: { show: true }  //x轴分割线
+          splitLine: {
+            lineStyle: {
+              color: "#e2e6f0",
+            },
+          }, //x轴分割线
         },
         yAxis: [
           //两个y轴
@@ -530,50 +577,53 @@ export default {
             type: "value",
             // 修饰刻度标签的颜色即y坐标数据
             axisLabel: {
-              color: "rgba(255,255,255,.7)",
+              color: "rgba(255, 255, 255, 1)",
             },
-            // 显示y坐标轴的颜色
+            // 显示y坐标轴
             axisLine: {
               show: true,
               lineStyle: {
-                // X 轴颜色配置
-                color: "#707070",
+                color: "#365576", // 设置 y 轴线的颜色
               },
+              fontSize: 14, // 设置字体大小，可根据需要调整
             },
             //y轴分割线段数
-            splitNumber: 10,
+            // splitNumber: 10,
             // 修改y轴分割线的颜色
             splitLine: {
               lineStyle: {
-                // color: "#252843",
-                color: "#707070",
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
               },
             },
+            //y轴分割线段数
+            splitNumber: 10,
           },
           {
             type: "value",
             // 修饰刻度标签的颜色即y坐标数据
             axisLabel: {
-              color: "rgba(255,255,255,.7)",
-              formatter: "{value} %",
+              color: "rgba(255, 255, 255, 1)",
             },
-            // 显示y坐标轴的颜色
+            // 显示y坐标轴
             axisLine: {
               show: true,
               lineStyle: {
-                // X 轴颜色配置
-                color: "#707070",
+                color: "#365576", // 设置 y 轴线的颜色
               },
+              fontSize: 14, // 设置字体大小，可根据需要调整
             },
             //y轴分割线段数
-            splitNumber: 5,
+            // splitNumber: 10,
             // 修改y轴分割线的颜色
             splitLine: {
               lineStyle: {
-                // color: "#252843",
-                color: "#707070",
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
               },
             },
+            //y轴分割线段数
+            splitNumber: 10,
           },
         ],
 
@@ -688,4 +738,9 @@ export default {
   height: 4.5rem;
   /* background-color: pink; */
 }
+.analy-table >>> .el-table th.el-table__cell.is-leaf,
+.analy-table >>> .el-table td.el-table__cell {
+  border-bottom: 1px solid #093769 !important;
+  border-right: 1px solid #093769 !important;
+}
 </style>
diff --git a/src/views/hotWater/dataAnalysis/components/analyzeYear.vue b/src/views/hotWater/dataAnalysis/components/analyzeYear.vue
index ee2f964..b39a866 100644
--- a/src/views/hotWater/dataAnalysis/components/analyzeYear.vue
+++ b/src/views/hotWater/dataAnalysis/components/analyzeYear.vue
@@ -1,6 +1,6 @@
 <!-- 报表查询-用能查询-年数据 -->
 <template>
-  <div>
+  <div class="analy-table">
     <div class="findwatercharts" ref="findwater_ref"></div>
     <!-- 表格 -->
     <el-table
@@ -56,6 +56,7 @@
 
 <script>
 import { getYear } from "@/utils/datetime";
+import { queryYearDatas } from "@/api/hotWater/dataAnalysis";
 import * as echarts from "echarts";
 export default {
   props: {
@@ -65,9 +66,12 @@ export default {
     chTime: {
       type: String,
     },
-    jtData: {
+    chBuild: {
       type: String,
     },
+    currentIndex: {
+      type: Number,
+    },
   },
   data() {
     return {
@@ -92,7 +96,7 @@ export default {
     };
   },
   watch: {
-    chType: {
+    currentIndex: {
       immediate: true,
       deep: true,
       handler(newVal, val) {
@@ -102,20 +106,9 @@ export default {
         });
       },
     },
-    // 对vuex里的点击的楼栋id进行监听
-    jtData: {
-      handler(newVal, oldVal) {
-        // console.log("监听vuex的id", newVal, oldVal);
-        this.$nextTick(function () {
-          this.getYearData();
-        });
-      },
-      deep: true,
-      immediate: true,
-    },
   },
   mounted() {
-    this.getYearData();
+    // this.getYearData();
     this.initChart1();
     window.addEventListener("resize", this.screenAdapter);
     this.screenAdapter();
@@ -128,7 +121,7 @@ export default {
     tableRowStyle({ row, column, rowIndex, columnIndex }) {
       // 如果第1列，修改颜色
       if (columnIndex === 0) {
-        return "background-color: #31354e !important;";
+        return "background-color:rgb(11 ,100, 201) !important;";
       }
     },
     // 查询表格数据
@@ -144,157 +137,205 @@ export default {
       }
       let params = {
         curDate: this.endTime,
-        buildingId: this.endId,
+        buildingId: this.chBuild,
         type: this.chType,
       };
       console.log("年表格参数", params);
-      //   this.$api.statementfind.energyYear(params).then((res) => {
-      //     // console.log("年表格返回", res);
-      //     if (res.code == 200) {
-      //       var line1 = [];
-      //       var line2 = [];
-      //       var line3 = [];
-      //       var line4 = [];
-      //       this.tableData = res.data;
-      //       // Object.values 把数组对象 转化为 数组
-      //       line1 = Object.values(this.tableData[0]).slice(3, 15);
-      //       line2 = Object.values(this.tableData[1]).slice(3, 15);
-      //       line3 = Object.values(this.tableData[2]).slice(3, 15);
-      //       line4 = Object.values(this.tableData[3]).slice(3, 15);
-      //       // 四条折线图  filter里过滤掉空值
-      //       this.data1 = line1.filter(function (s) {
-      //         return s && s.trim();
-      //       });
-      //       this.data2 = line2.filter(function (s) {
-      //         return s && s.trim();
-      //       });
-      //       // 含百分比的数组数据还需要处理
-      //       var line5 = line3.filter(function (s) {
-      //         return s && s.trim();
-      //       });
-      //       this.data3 = [];
-      //       this.data4 = [];
-      //       // 遍历去除掉%，拼接后返回新数组
-      //       line5.forEach((item) => {
-      //         this.data3.push(item.split("%").join(""));
-      //       });
-      //       var line6 = line4.filter(function (s) {
-      //         return s && s.trim();
-      //       });
-      //       line6.forEach((item) => {
-      //         this.data4.push(item.split("%").join(""));
-      //       });
-      //       // 折线图x轴 数据
-      //       // 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值
-      //       //定义一个新数组
-      //       let newObj = {};
-      //       for (let key in this.tableData[0]) {
-      //         if (this.tableData[0][key]) {
-      //           newObj[key] = this.tableData[0][key];
-      //         }
-      //       }
-      //       // console.log("不含空的数组对象", newObj);
-      //       // 在返回的新的对象中，取出对象的所有key值返回新数组
-      //       // Object.setPrototypeOf(this.newObj);
-      //       let data7 = Object.keys(newObj);
-      //       // console.log("不含空的x轴数据", data7);
-      //       // 先返回月的数组
-      //       let allArr = [
-      //         "month01",
-      //         "month02",
-      //         "month03",
-      //         "month04",
-      //         "month05",
-      //         "month06",
-      //         "month07",
-      //         "month08",
-      //         "month09",
-      //         "month10",
-      //         "month11",
-      //         "month12",
-      //       ];
-      //       // 非空数组和所有月的数组进行筛选出重复的元素
-      //       function compare(data7, allArr) {
-      //         return data7.filter((v) => {
-      //           return allArr.includes(v);
-      //         });
-      //       }
-      //       // console.log("x轴未分割月份", compare(data7, allArr));
-      //       // 分割data7，返回月份 xx月
-      //       this.data8 = [];
-      //       compare(data7, allArr).forEach((item) => {
-      //         if (item) {
-      //           this.data8.push(item.split("month").join("") + "月");
-      //         }
-      //       });
-      //       // console.log("x轴数据", this.data8);
-      //       // 图例
-      //       this.data6 = [];
-      //       this.data5 = this.tableData.forEach((item) => {
-      //         return this.data6.push(item.itemType);
-      //       });
-      //       // console.log("data1数据", this.data1);
-      //       // console.log("data2数据", this.data2);
-      //       // console.log("data3数据", this.data3);
-      //       // console.log("data4数据", this.data4);
-      //       // console.log("图例文字", this.data6);
-      //       // 月数据
-      //       var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
-      //         Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
-      //         Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
-      //         Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
-      //       // console.log("Min1", Min1);
-      //       // console.log("Min2", Min2);
-      //       // console.log("Max1", Max1);
-      //       // console.log("Max2", Max2);
-      //       this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
-      //       const adapterOption = {
-      //         legend: {
-      //           data: this.data6,
-      //         },
-      //         xAxis: {
-      //           data: this.data8,
-      //         },
-      //         yAxis: [
-      //           //两个y轴
-      //           {
-      //             min: Min1,
-      //             max: Max1,
-      //             splitNumber: 10,
-      //             interval: (Max1 - Min1) / 10,
-      //           },
-      //           {
-      //             min: Min2,
-      //             max: Max2,
-      //             splitNumber: 10,
-      //             interval: (Max2 - Min2) / 10,
-      //           },
-      //         ],
-      //         series: [
-      //           {
-      //             name: this.data6[0],
-      //             data: this.data1,
-      //           },
-      //           {
-      //             name: this.data6[1],
-      //             data: this.data2,
-      //           },
-      //           {
-      //             name: this.data6[2],
-      //             data: this.data3,
-      //           },
-      //           {
-      //             name: this.data6[3],
-      //             data: this.data4,
-      //           },
-      //         ],
-      //       };
-      //       //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
-      //       this.chartInstance1.setOption(adapterOption);
-      //       //手动的调用图标对象的resize才能产生效果
-      //       this.chartInstance1.resize();
-      //     }
-      //   });
+      queryYearDatas(params).then((res) => {
+        // console.log("年表格返回", res);
+        if (res.code == 200 && res.rows.length > 0) {
+          var line1 = [];
+          var line2 = [];
+          var line3 = [];
+          var line4 = [];
+          this.tableData = res.rows;
+          // Object.values 把数组对象 转化为 数组
+          line1 = Object.values(this.tableData[0]).slice(3, 15);
+          line2 = Object.values(this.tableData[1]).slice(3, 15);
+          line3 = Object.values(this.tableData[2]).slice(3, 15);
+          line4 = Object.values(this.tableData[3]).slice(3, 15);
+          // 四条折线图  filter里过滤掉空值
+          this.data1 = line1.filter(function (s) {
+            return s && s.trim();
+          });
+          this.data2 = line2.filter(function (s) {
+            return s && s.trim();
+          });
+          // 含百分比的数组数据还需要处理
+          var line5 = line3.filter(function (s) {
+            return s && s.trim();
+          });
+          this.data3 = [];
+          this.data4 = [];
+          // 遍历去除掉%，拼接后返回新数组
+          line5.forEach((item) => {
+            this.data3.push(item.split("%").join(""));
+          });
+          var line6 = line4.filter(function (s) {
+            return s && s.trim();
+          });
+          line6.forEach((item) => {
+            this.data4.push(item.split("%").join(""));
+          });
+          // 折线图x轴 数据
+          // 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值
+          //定义一个新数组
+          let newObj = {};
+          for (let key in this.tableData[0]) {
+            if (this.tableData[0][key]) {
+              newObj[key] = this.tableData[0][key];
+            }
+          }
+          // console.log("不含空的数组对象", newObj);
+          // 在返回的新的对象中，取出对象的所有key值返回新数组
+          // Object.setPrototypeOf(this.newObj);
+          let data7 = Object.keys(newObj);
+          // console.log("不含空的x轴数据", data7);
+          // 先返回月的数组
+          let allArr = [
+            "month01",
+            "month02",
+            "month03",
+            "month04",
+            "month05",
+            "month06",
+            "month07",
+            "month08",
+            "month09",
+            "month10",
+            "month11",
+            "month12",
+          ];
+          // 非空数组和所有月的数组进行筛选出重复的元素
+          function compare(data7, allArr) {
+            return data7.filter((v) => {
+              return allArr.includes(v);
+            });
+          }
+          // console.log("x轴未分割月份", compare(data7, allArr));
+          // 分割data7，返回月份 xx月
+          this.data8 = [];
+          compare(data7, allArr).forEach((item) => {
+            if (item) {
+              this.data8.push(item.split("month").join("") + "月");
+            }
+          });
+          // console.log("x轴数据", this.data8);
+          // 图例
+          this.data6 = [];
+          this.data5 = this.tableData.forEach((item) => {
+            return this.data6.push(item.itemType);
+          });
+          // console.log("data1数据", this.data1);
+          // console.log("data2数据", this.data2);
+          // console.log("data3数据", this.data3);
+          // console.log("data4数据", this.data4);
+          // console.log("图例文字", this.data6);
+          // 月数据
+          var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
+            Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
+            Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
+            Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
+          // console.log("Min1", Min1);
+          // console.log("Min2", Min2);
+          // console.log("Max1", Max1);
+          // console.log("Max2", Max2);
+          this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
+          const adapterOption = {
+            legend: {
+              data: this.data6,
+            },
+            xAxis: {
+              data: this.data8,
+            },
+            yAxis: [
+              //两个y轴
+              {
+                min: Min1,
+                max: Max1,
+                splitNumber: 10,
+                interval: (Max1 - Min1) / 10,
+              },
+              {
+                min: Min2,
+                max: Max2,
+                splitNumber: 10,
+                interval: (Max2 - Min2) / 10,
+              },
+            ],
+            series: [
+              {
+                name: this.data6[0],
+                data: this.data1,
+              },
+              {
+                name: this.data6[1],
+                data: this.data2,
+              },
+              {
+                name: this.data6[2],
+                data: this.data3,
+              },
+              {
+                name: this.data6[3],
+                data: this.data4,
+              },
+            ],
+          };
+          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+          this.chartInstance1.setOption(adapterOption);
+          //手动的调用图标对象的resize才能产生效果
+          this.chartInstance1.resize();
+        } else {
+          this.tableData = [];
+          this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
+          const adapterOption = {
+            legend: {
+              data: [],
+            },
+            xAxis: {
+              data: [],
+            },
+            yAxis: [
+              //两个y轴
+              {
+                min: 0,
+                max: 0,
+                splitNumber: 10,
+                interval: 0,
+              },
+              {
+                min: 0,
+                max: 0,
+                splitNumber: 10,
+                interval: 0,
+              },
+            ],
+            series: [
+              {
+                name: "",
+                data: [],
+              },
+              {
+                name: "",
+                data: [],
+              },
+              {
+                name: "",
+                data: [],
+              },
+              {
+                name: "",
+                data: [],
+              },
+            ],
+          };
+          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+          this.chartInstance1.setOption(adapterOption);
+          //手动的调用图标对象的resize才能产生效果
+          this.chartInstance1.resize();
+        }
+      });
     },
     // 导出数据
     outTable() {
@@ -341,23 +382,23 @@ export default {
         }
         let params = {
           curDate: this.endTime,
-          buildingId: this.endId,
+          buildingId: this.chBuild,
           type: this.chType,
         };
         console.log("年表格参数", params);
-        // this.$api.statementfind.energyYear(params).then((res) => {
-        //   if (res.code == 200) {
-        //     // console.log(res);
-        //     const data = this.formatJson(filterVal, res.data);
-        //     const autoWidth = true;
-        //     excel.export_json_to_excel({
-        //       header: tHeader, //表头
-        //       data, //数据
-        //       filename: "年数据报表", //名称
-        //       autoWidth: true, //宽度自适应
-        //     });
-        //   }
-        // });
+        queryYearDatas(params).then((res) => {
+          if (res.code == 200 && res.rows.length > 0) {
+            // console.log(res);
+            const data = this.formatJson(filterVal, res.rows);
+            const autoWidth = true;
+            excel.export_json_to_excel({
+              header: tHeader, //表头
+              data, //数据
+              filename: "年数据报表", //名称
+              autoWidth: true, //宽度自适应
+            });
+          }
+        });
       });
     },
     //格式转换,不需要改动
@@ -418,22 +459,26 @@ export default {
           boundaryGap: true,
           // 修饰刻度标签的颜色即x坐标数据
           axisLabel: {
-            // interval: 0,
+            // interval: 0, //强制显示所有x轴数据
             // rotate: 30, //x轴坐标字体倾斜30度
-            color: "rgba(255,255,255,.7)",
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: 14, // 设置字体大小，可根据需要调整
           },
           axisTick: {
             show: false, // 不显示坐标轴刻度线
           },
-          // 去除x坐标轴的颜色
+          // x坐标轴的颜色
           axisLine: {
             show: true,
             lineStyle: {
-              // X 轴颜色配置
-              color: "#707070",
+              color: "#365576",
             },
           },
-          //splitLine: { show: true }  //x轴分割线
+          splitLine: {
+            lineStyle: {
+              color: "#e2e6f0",
+            },
+          }, //x轴分割线
         },
         yAxis: [
           //两个y轴
@@ -441,50 +486,53 @@ export default {
             type: "value",
             // 修饰刻度标签的颜色即y坐标数据
             axisLabel: {
-              color: "rgba(255,255,255,.7)",
+              color: "rgba(255, 255, 255, 1)",
             },
-            // 显示y坐标轴的颜色
+            // 显示y坐标轴
             axisLine: {
               show: true,
               lineStyle: {
-                // X 轴颜色配置
-                color: "#707070",
+                color: "#365576", // 设置 y 轴线的颜色
               },
+              fontSize: 14, // 设置字体大小，可根据需要调整
             },
             //y轴分割线段数
-            splitNumber: 10,
+            // splitNumber: 10,
             // 修改y轴分割线的颜色
             splitLine: {
               lineStyle: {
-                // color: "#252843",
-                color: "#707070",
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
               },
             },
+            //y轴分割线段数
+            splitNumber: 10,
           },
           {
             type: "value",
             // 修饰刻度标签的颜色即y坐标数据
             axisLabel: {
-              color: "rgba(255,255,255,.7)",
-              formatter: "{value} %",
+              color: "rgba(255, 255, 255, 1)",
             },
-            // 显示y坐标轴的颜色
+            // 显示y坐标轴
             axisLine: {
               show: true,
               lineStyle: {
-                // X 轴颜色配置
-                color: "#707070",
+                color: "#365576", // 设置 y 轴线的颜色
               },
+              fontSize: 14, // 设置字体大小，可根据需要调整
             },
             //y轴分割线段数
-            splitNumber: 5,
+            // splitNumber: 10,
             // 修改y轴分割线的颜色
             splitLine: {
               lineStyle: {
-                // color: "#252843",
-                color: "#707070",
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
               },
             },
+            //y轴分割线段数
+            splitNumber: 10,
           },
         ],
 
@@ -635,4 +683,9 @@ export default {
   height: 4.5rem;
   /* background-color: pink; */
 }
+.analy-table >>> .el-table th.el-table__cell.is-leaf,
+.analy-table >>> .el-table td.el-table__cell {
+  border-bottom: 1px solid #093769 !important;
+  border-right: 1px solid #093769 !important;
+}
 </style>
diff --git a/src/views/hotWater/dataAnalysis/index.vue b/src/views/hotWater/dataAnalysis/index.vue
index 87d4807..ada1d56 100644
--- a/src/views/hotWater/dataAnalysis/index.vue
+++ b/src/views/hotWater/dataAnalysis/index.vue
@@ -1,33 +1,5 @@
 <template>
   <div class="app-container">
-    <div class="left-tree">
-      <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
-      <div style="height: 7rem; overflow-y: auto">
-        <el-tree
-          ref="tree"
-          :data="treeData"
-          node-key="id"
-          :default-expand-all="false"
-          :default-expanded-keys="expandedKeys"
-          :auto-expand-parent="true"
-          icon-class="none"
-          @node-expand="handleNodeExpand"
-          @node-collapse="handleNodeCollapse"
-          :highlight-current="true"
-          @node-click="handleNodeClick"
-        >
-          <template #default="{ node }">
-            <span class="custom-tree-node">
-              <!-- 根据节点状态动态设置图标类名 -->
-              <div class="tree-left">
-                <i :class="getIconClass(node)" class="custom-tree-icon"></i>
-                <span class="tree-label">{{ node.label }}</span>
-              </div>
-            </span>
-          </template>
-        </el-tree>
-      </div>
-    </div>
     <div class="right-monitor">
       <div class="buildingDiv">
         <div class="buildingDiv-left">
@@ -42,6 +14,20 @@
       <!-- 条件 -->
       <div class="condition">
         <div class="condition-left">
+          <el-select
+            style="margin-right: 0.1rem"
+            v-model="building"
+            placeholder="请选择楼栋"
+            clearable
+            @change="handleBuildingChange"
+          >
+            <el-option
+              v-for="(item, index) in builds"
+              :key="index"
+              :label="item.building_name"
+              :value="item.id"
+            />
+          </el-select>
           <el-select
             style="margin-right: 0.1rem"
             v-model="analysisType"
@@ -94,24 +80,25 @@
       <analyze-month
         v-if="currentIndex === 0"
         ref="monthRef"
+        :currentIndex="currentIndex"
         :chType="analysisType"
         :chTime="monthDate"
+        :chBuild="building"
       ></analyze-month>
       <analyze-year
         v-if="currentIndex === 1"
+        :currentIndex="currentIndex"
         ref="yearRef"
         :chType="analysisType"
         :chTime="yearDate"
+        :chBuild="building"
       ></analyze-year>
     </div>
   </div>
 </template>
 
 <script>
-import { spaceTree } from "@/api/region";
-import { format } from "@/utils/datetime";
-import { temList, temHistory } from "@/api/temSys/temMonitor";
-import * as echarts from "echarts";
+import { hotBuildList } from "@/api/hotWater/energyAnalysis";
 import analyzeMonth from "./components/analyzeMonth.vue";
 import analyzeYear from "./components/analyzeYear.vue";
 export default {
@@ -119,7 +106,9 @@ export default {
   data() {
     return {
       loading: false,
-      treeData: [],
+      currentName: "",
+      building: "", //选中的楼栋
+      builds: [], //楼栋列表
       analysisType: 1,
       analysisTypes: [
         {
@@ -134,177 +123,61 @@ export default {
           label: "耗能",
           value: 3,
         },
-        {
-          label: "维保量",
-          value: 4,
-        },
-        {
-          label: "使用时间",
-          value: 5,
-        },
       ],
       monthDate: "",
       yearDate: "",
       timeData2: [{ title: "月" }, { title: "年" }],
-      currentIndex: 0, //月
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
-      deviceList: [],
-      expandedKeys: [],
-      currentId: "", //当前选中高亮的id
-      currentName: "", //当前选中的名称
-      currentLevel: "", //当前节点的层级
-      currentParentId: "", //当前节点的上级的id
-
-      tableData: [], //系统状态表格数据
-      chartInstance: null,
-      option: {},
-      chartData1: [],
-      chartData2: [],
-      bottomData: [],
+      currentIndex: null, //月
     };
   },
   mounted() {
-    this.getSysBuild();
+    this.getBuildList();
   },
   methods: {
     handleEnter(index) {
       this.currentIndex = index;
       // this.renderingBroken();
+      console.log("切换日月");
+    },
+    handleBuildingChange(selectedId) {
+      // 找到选中项的对象
+      const selectedItem = this.builds.find((item) => item.id === selectedId);
+      if (selectedItem) {
+        this.currentName = selectedItem.building_name;
+        console.log("选中的楼栋 ID:", selectedId);
+        console.log("选中的楼栋名称:", this.currentName);
+        // 这里可以添加你需要执行的其他操作
+      }
     },
-    getSysBuild() {
-      spaceTree().then((res) => {
+    /** 查询楼栋 */
+    getBuildList() {
+      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);
-          }
-          console.log("筛选后的新结果", newRes);
-          this.treeData = newRes.data;
-          this.$nextTick(() => {
-            // 默认展开节点
-            this.getExpandedKeys(this.treeData, 1);
-            if (this.treeData.length > 0) {
-              // 找到最后一层的第一个子节点
-              const lastLevelFirstChild = this.findLastLevelFirstChild(
-                this.treeData[0]
-              );
-              // this.$refs.tree.setCurrentKey(
-              //   this.treeData[0].children[0].children[0].children[0].id
-              // );
-              // 设置当前选中的节点,默认高亮
-              this.$refs.tree.setCurrentKey(lastLevelFirstChild.id);
-              // 更新当前节点的信息
-              this.currentId = lastLevelFirstChild.id;
-              this.currentLevel = lastLevelFirstChild.level;
-              this.currentName = lastLevelFirstChild.label;
-              console.log("当前选中节点ID", this.currentId);
-              console.log("当前选中节点层级", this.currentLevel);
-              console.log("当前选中节点名称", this.currentName);
-              // this.getTemList();
+          // 过滤掉 building_name 是 "所有" 的第一个对象
+          const filteredRows = res.rows.filter((row, index) => {
+            if (index === 0 && row.building_name === "所有") {
+              return false;
             }
+            return true;
           });
+
+          this.builds = filteredRows;
+          //   console.log("筛选后的新结果", this.builds);
+
+          if (this.builds.length > 0) {
+            this.building = this.builds[0].id;
+            this.currentName = this.builds[0].building_name;
+            console.log("选中的第一个楼栋id-传给子组件", this.building);
+            this.handleEnter(0); //默认月
+          }
         }
       });
     },
-    // 递归函数，用于去除指定层级往后的 children 数据
-    removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
-      if (currentLevel >= targetLevel) {
-        // 当达到指定层级时，将 children 属性置为空数组
-        obj.children = [];
-        return;
-      }
-      if (obj.children && obj.children.length > 0) {
-        // 若存在 children 数组，则递归处理每个子项
-        for (let i = 0; i < obj.children.length; i++) {
-          this.removeChildrenAfterLevel(
-            obj.children[i],
-            currentLevel + 1,
-            targetLevel
-          );
-        }
-      }
-    },
-    // 递归函数，找到最后一层的第一个子节点
-    findLastLevelFirstChild(node, level = 1) {
-      if (!node.children || node.children.length === 0) {
-        return {
-          id: node.id,
-          level,
-          label: node.label,
-        };
-      }
-      return this.findLastLevelFirstChild(node.children[0], level + 1);
-    },
-    // 默认只展示一二级菜单
-    getExpandedKeys(nodes, level) {
-      nodes.forEach((node) => {
-        if (level <= this.currentId + 4) {
-          this.expandedKeys.push(node.id);
-        }
-        if (node.children) {
-          this.getExpandedKeys(node.children, level + 1);
-        }
-      });
-    },
-    // 更换图标
-    getIconClass(node) {
-      // console.log("当前图标的节点内容", node);
-      if (node.level === 4) {
-        // 4级菜单时的图标
-        if (node.expanded) {
-          return "el-icon-document"; // 4级菜单展开时的图标类名
-        }
-        return "el-icon-document"; // 4级菜单收缩时的图标类名
-      }
-      if (node.expanded) {
-        return "el-icon-folder-opened"; // 4三级菜单展开时的图标类名
-      }
-      return "el-icon-folder-add"; // 4三级菜单收缩时的图标类名
-    },
-    handleNodeExpand(node) {
-      // 节点展开时触发
-    },
-    handleNodeCollapse(node) {
-      // 节点收缩时触发
-    },
-    // 点击当前节点，保存节点内容
-    handleNodeClick(node, data) {
-      console.log("点击的当前节点", node, data);
-      if (data.level !== 4) {
-        console.log("不是第4层000");
-        // 设置当前选中的节点,默认高亮
-        this.$refs.tree.setCurrentKey(this.currentId);
-        console.log("当前选中节点ID", this.currentId);
-        console.log("当前选中节点层级", this.currentLevel);
-        console.log("当前选中节点名称", this.currentName);
-      } else {
-        console.log("第5层111");
-        this.currentId = node.id;
-        this.currentLevel = data.level;
-        this.currentName = node.label;
-        // 设置当前选中的节点,默认高亮
-        this.$refs.tree.setCurrentKey(this.currentId);
-        console.log("当前选中节点ID", this.currentId);
-        console.log("当前选中节点层级", this.currentLevel);
-        console.log("当前选中节点名称", this.currentName);
-        // this.getTemList();
-      }
-    },
     // 查询
     findData() {
       if (this.currentIndex == 0) {
@@ -358,7 +231,7 @@ export default {
     border: 1px solid #004b8c;
   }
   .right-monitor {
-    width: calc(100% - 280px);
+    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
diff --git a/src/views/hotWater/energyAnalysis/components/energyReport.vue b/src/views/hotWater/energyAnalysis/components/energyReport.vue
index 1b434da..7d628d8 100644
--- a/src/views/hotWater/energyAnalysis/components/energyReport.vue
+++ b/src/views/hotWater/energyAnalysis/components/energyReport.vue
@@ -176,8 +176,6 @@
       <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
@@ -627,16 +625,12 @@ export default {
               "用水量(吨)",
               "用电量(度)",
               "单耗(度/吨)",
-              "楼栋人数",
-              "人均用水(人/升)",
             ]; // 导出的excel表头名信息 改参数
             var filterVal = [
               "curDate",
               "useHotWater",
               "electValue",
               "electWater",
-              "checkInCount",
-              "perWater",
             ];
           } else {
             var tHeader = [
@@ -645,8 +639,6 @@ export default {
               "用水量(吨)",
               "用电量(度)",
               "单耗(度/吨)",
-              "楼栋人数",
-              "人均用水(人/升)",
             ]; // 导出的excel表头名信息 改参数
             var filterVal = [
               "curDate",
@@ -654,8 +646,6 @@ export default {
               "useHotWater",
               "electValue",
               "electWater",
-              "checkInCount",
-              "perWater",
             ];
           }
           const data = this.formatJson(filterVal, this.exportData);
diff --git a/src/views/hotWater/energyAnalysis/components/temReport.vue b/src/views/hotWater/energyAnalysis/components/temReport.vue
index 7bcaa3d..441b147 100644
--- a/src/views/hotWater/energyAnalysis/components/temReport.vue
+++ b/src/views/hotWater/energyAnalysis/components/temReport.vue
@@ -165,12 +165,12 @@ export default {
       this.listLoading = true;
       //   请求数据
       hotWaterTemp(data).then((res) => {
-        if (res.code == 200 && res.rows.length >0) {
+        if (res.code == 200 && res.rows.length > 0) {
           this.tableData = res.rows;
           // this.firstRow();
           this.handlerow(this.tableData[0]);
         } else {
-          this.rows = [];
+          this.tableData = [];
         }
       });
       // Just to simulate the time of the request
diff --git a/src/views/hotWater/energyAnalysis/components/waterReport.vue b/src/views/hotWater/energyAnalysis/components/waterReport.vue
index 9a21571..545f710 100644
--- a/src/views/hotWater/energyAnalysis/components/waterReport.vue
+++ b/src/views/hotWater/energyAnalysis/components/waterReport.vue
@@ -164,12 +164,12 @@ export default {
       this.listLoading = true;
       //   请求数据
       hotWaterLevel(data).then((res) => {
-        if (res.code == 200 && res.rows.length >0) {
+        if (res.code == 200 && res.rows.length > 0) {
           this.tableData = res.rows;
           // this.firstRow();
           this.handlerow(this.tableData[0]);
         } else {
-          this.rows = [];
+          this.tableData = [];
         }
       });
       // Just to simulate the time of the request
diff --git a/src/views/hotWater/energyQuery/components/electReading.vue b/src/views/hotWater/energyQuery/components/electReading.vue
index c48a409..d462445 100644
--- a/src/views/hotWater/energyQuery/components/electReading.vue
+++ b/src/views/hotWater/energyQuery/components/electReading.vue
@@ -54,6 +54,7 @@
       <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-column label="计算量" align="center" prop="calcValue" />
     </el-table>
 
     <pagination
@@ -170,7 +171,7 @@ export default {
         startDate: this.dayDate[0],
         endDate: this.dayDate[1],
         buildingId: this.building,
-        deviceType: "18",
+        deviceType: "16",
       };
       console.log("查询数据参数", data);
       this.listLoading = true;
@@ -192,43 +193,74 @@ export default {
     },
     // 导出
     exportData() {
+      if (this.dayDate.length == 0) {
+        this.initializeTimeDate();
+      }
       let data = {
-        timeType: this.dateType,
-        startTime: this.queryParams.startTime,
-        endTime: this.endTime,
-        building: this.building,
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.total,
+        startDate: this.dayDate[0],
+        endDate: this.dayDate[1],
+        buildingId: this.building,
+        deviceType: "16",
       };
-      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: "导出成功!",
+      console.log("查询数据参数", data);
+      queryDeviceDatas(data).then((res) => {
+        console.log("返回", res);
+        if (res.code == 200) {
+          import("@/assets/excel/Export2Excel").then((excel) => {
+            var tHeader = [
+              "所属楼栋",
+              "设备编号",
+              "设备名称",
+              "抄表时间",
+              "采集读数",
+              "用量",
+              "倍率",
+              "计算量",
+            ]; // 导出的excel表头名信息 改参数
+            var filterVal = [
+              "buildingName",
+              "deviceNum",
+              "deviceName",
+              "curTime",
+              "curValue",
+              "usedValue",
+              "ratio",
+              "calcValue",
+            ];
+            const data = this.formatJson(filterVal, res.rows);
+            const autoWidth = true;
+            excel.export_json_to_excel({
+              header: tHeader, //表头
+              data, //数据
+              filename: "电表读数报表", //名称
+              autoWidth: true, //宽度自适应
+            });
+            this.$message({
+              type: "success",
+              message: "导出成功!",
+            });
           });
         } else {
           this.$message.error("导出失败!");
         }
       });
-      // .catch((err) => {
-      //     this.$message.error('导出失败!');
-      // })
+    },
+    //格式转换,不需要改动
+    formatJson(filterVal, jsonData) {
+      return jsonData.map((v) =>
+        filterVal.map((j) => {
+          if (j === "installDate") {
+            return format(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
     },
     tableRowStyle({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 6) {
+      if (columnIndex === 6 || columnIndex === 8) {
         return "color: #75d148;!important;text-align:center";
       }
       // return "text-align:center";
diff --git a/src/views/hotWater/energyQuery/components/waterReading.vue b/src/views/hotWater/energyQuery/components/waterReading.vue
index 41c509f..666e386 100644
--- a/src/views/hotWater/energyQuery/components/waterReading.vue
+++ b/src/views/hotWater/energyQuery/components/waterReading.vue
@@ -54,6 +54,7 @@
       <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-column label="计算量" align="center" prop="calcValue" />
     </el-table>
 
     <pagination
@@ -155,7 +156,9 @@ export default {
     },
     // 序号
     indexAdd(index) {
-      return index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
+      return (
+        index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
+      );
     },
     //请求数据
     getList() {
@@ -168,7 +171,7 @@ export default {
         startDate: this.dayDate[0],
         endDate: this.dayDate[1],
         buildingId: this.building,
-        deviceType: "16",
+        deviceType: "18",
       };
       console.log("查询数据参数", data);
       this.listLoading = true;
@@ -190,43 +193,74 @@ export default {
     },
     // 导出
     exportData() {
+      if (this.dayDate.length == 0) {
+        this.initializeTimeDate();
+      }
       let data = {
-        timeType: this.dateType,
-        startTime: this.queryParams.startTime,
-        endTime: this.endTime,
-        building: this.building,
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.total,
+        startDate: this.dayDate[0],
+        endDate: this.dayDate[1],
+        buildingId: this.building,
+        deviceType: "18",
       };
-      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: "导出成功!",
+      console.log("查询数据参数", data);
+      queryDeviceDatas(data).then((res) => {
+        console.log("返回", res);
+        if (res.code == 200) {
+          import("@/assets/excel/Export2Excel").then((excel) => {
+            var tHeader = [
+              "所属楼栋",
+              "设备编号",
+              "设备名称",
+              "抄表时间",
+              "采集读数",
+              "用量",
+              "倍率",
+              "计算量",
+            ]; // 导出的excel表头名信息 改参数
+            var filterVal = [
+              "buildingName",
+              "deviceNum",
+              "deviceName",
+              "curTime",
+              "curValue",
+              "usedValue",
+              "ratio",
+              "calcValue",
+            ];
+            const data = this.formatJson(filterVal, res.rows);
+            const autoWidth = true;
+            excel.export_json_to_excel({
+              header: tHeader, //表头
+              data, //数据
+              filename: "水表读数报表", //名称
+              autoWidth: true, //宽度自适应
+            });
+            this.$message({
+              type: "success",
+              message: "导出成功!",
+            });
           });
         } else {
           this.$message.error("导出失败!");
         }
       });
-      // .catch((err) => {
-      //     this.$message.error('导出失败!');
-      // })
+    },
+    //格式转换,不需要改动
+    formatJson(filterVal, jsonData) {
+      return jsonData.map((v) =>
+        filterVal.map((j) => {
+          if (j === "installDate") {
+            return format(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
     },
     tableRowStyle({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 6) {
+      if (columnIndex === 6 || columnIndex === 8) {
         return "color: #75d148;!important;text-align:center";
       }
       // return "text-align:center";
diff --git a/src/views/hotWater/overview/index.vue b/src/views/hotWater/overview/index.vue
index b634e57..4cd9069 100644
--- a/src/views/hotWater/overview/index.vue
+++ b/src/views/hotWater/overview/index.vue
@@ -149,9 +149,9 @@ export default {
           console.log("进行赋值", res.rows);
           this.chartData1 = res.rows[0].pumpOnline;
           this.chartData2 = parseInt(
-            res.rows[0].deviceNum - res.rows[0].pumpOnline
+            res.rows[0].pumpNum - res.rows[0].pumpOnline
           );
-          this.allData = res.rows[0].deviceNum;
+          this.allData = res.rows[0].pumpNum;
           const titleFontSize =
             (this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
           const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表