diff --git a/src/api/device/gather.js b/src/api/device/gather.js
index 8d856b5..b36deaa 100644
--- a/src/api/device/gather.js
+++ b/src/api/device/gather.js
@@ -48,3 +48,12 @@ export function delCPM(cpmIds) {
     method: "delete",
   });
 }
+
+// 设备组列表
+export function devicesList(query) {
+  return request({
+    url: "/space/tree",
+    method: "get",
+    params: query,
+  });
+}
\ No newline at end of file
diff --git a/src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue b/src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue
index 3e5a3bd..c373eb4 100644
--- a/src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue
+++ b/src/views/heatRecoverySys/deviceMonitor/monitorCenter.vue
@@ -115,8 +115,14 @@
       <div class="text text16">冷却塔</div>
       <div class="text text17">离心机</div>
       <!-- 可点击区域 -->
-      <div class="text click1" @click="controlValve"></div>
-      <div class="text click2" @click="controlValve"></div>
+      <div
+        class="text click2"
+        @click="controlValve(valveOneArr, '二通阀门')"
+      ></div>
+      <div
+        class="text click1"
+        @click="controlValve(valveTwoArr, '三通阀门')"
+      ></div>
       <!-- 数据 -->
       <!-- 压力传感器0-12号 -->
       <div class="text pres0" v-if="pressureArr[0]">
@@ -249,7 +255,7 @@
       </div>
       <!-- 二通阀门 -->
       <div class="text valve1">
-         {{ getHotMeterTemp(valveOneArr, "开度反馈") }}%
+        {{ getHotMeterTemp(valveOneArr, "开度反馈") }}%
       </div>
       <!-- 三通阀门 -->
       <div class="text valve2">
@@ -260,7 +266,7 @@
 </template>
 
 <script>
-import { runTime } from "@/api/centerairC/sysMonitor";
+import { runTime, operationConrol } from "@/api/centerairC/sysMonitor";
 import { alarmRecordList } from "@/api/alarm/alarmRecord";
 import {
   monitorList,
@@ -321,8 +327,22 @@ export default {
     setTimeout(() => {
       this.requestFullscreen();
     }, 100); // 延迟 100 毫秒执行全屏操作
+    // 设置定时器，每 10 秒执行一次
+    this.timer = setInterval(() => {
+      // this.getAlarnStatus();
+      // this.getMonitorList();
+      // this.getMonitorTotalData();
+    }, 10000);
+    // 每秒更新一次时间
+    this.nowTimer = setInterval(() => {
+      this.currentDate = new Date();
+    }, 1000);
   },
   beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
     // 组件销毁前清除定时器
     if (this.nowTimer) {
       clearInterval(this.nowTimer);
@@ -509,11 +529,122 @@ export default {
         return item.collectName.includes(type);
       });
       if (!item) return null;
-      console.log("当前匹配名称和值", item.collectName, item.collectValue);
+      // console.log("当前匹配名称和值", item.collectName, item.collectValue);
       return item.collectValue;
     },
     // 控制开度
-    controlValve(){},
+    async controlValve(data, title) {
+      try {
+        // 获取当前开阀开度
+        await this.getCurrentValveOpening(data, title);
+
+        // 弹出设置框，并预填当前值
+        this.$prompt(`请输入${title}开度(0-100%)`, "开阀开度设置", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          inputType: "number",
+          inputValue: this.currentOpening, // 预填当前值
+          inputPlaceholder: "请输入0-100之间的数值",
+          inputValidator: (value) => {
+            // 检查是否为空
+            if (value === "" || value === null || value === undefined) {
+              return "请输入开阀开度";
+            }
+
+            // 转换为数字
+            const num = Number(value);
+
+            // 检查是否为有效数字
+            if (isNaN(num)) {
+              return "请输入有效的数字";
+            }
+
+            // 检查范围
+            if (num < 0 || num > 100) {
+              return "开阀开度必须在0-100之间";
+            }
+
+            // 验证通过
+            return true;
+          },
+          inputErrorMessage: "请输入有效的开阀开度",
+        })
+          .then(({ value }) => {
+            // 这里可以调用实际的控制函数
+            this.setValveOpening(data, value);
+          })
+          .catch(() => {
+            // 取消操作
+          });
+      } catch (error) {
+        console.error("获取当前开度失败:", error);
+        this.$message.error("获取当前开度失败，请重试");
+      } finally {
+        // this.loading = false;
+      }
+    },
+
+    // 获取当前开阀开度的函数
+    async getCurrentValveOpening(data, title) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          // 在data数组中查找deviceName等于title的对象
+          const device = data.find(
+            (item) =>
+              item.deviceName === title && item.collectName.includes("开度反馈")
+          );
+          console.log("当前的对象", device);
+          if (device) {
+            // 找到设备，获取当前开度
+            this.currentOpening = device.collectValue;
+            console.log(`获取到${title}的当前开度:`, this.currentOpening);
+            resolve(this.currentOpening);
+          } else {
+            // 未找到设备
+            const errorMsg = `未找到设备: ${title}`;
+            console.error(errorMsg);
+            reject(new Error(errorMsg));
+          }
+        }, 500);
+      });
+    },
+
+    // 实际设置开阀开度的函数
+    async setValveOpening(data, value) {
+      try {
+        console.log("正在设置开阀开度为:", value);
+        let id = "";
+        // 在data数组中查找deviceName等于title的对象
+        const device = data.find((item) =>
+          item.collectName.includes("开度设置")
+        );
+        console.log("当前的对象", device);
+        if (device) {
+          id = device.id;
+        } else {
+          id = "";
+        }
+        // 准备请求参数
+        const params = {
+          id: id,
+          param: value,
+        };
+        console.log("params", params);
+        // 调用operationConrol接口
+        const result = await operationConrol([params]);
+        if (result.code == 200) {
+          this.$modal.msgSuccess("指令下发成功!");
+          this.getMonitorList();
+          this.getMonitorTotalData();
+        }
+        // 更新当前开度值
+        this.currentOpening = Number(value);
+        console.log("设置成功，当前开度更新为:", this.currentOpening);
+      } catch (error) {
+        console.error("设置开阀开度失败:", error);
+        // this.$message.error("设置开阀开度失败，请重试");
+      }
+    },
     // 积累热量数据
     getMonitorTotalData() {
       let data = {
@@ -1014,7 +1145,7 @@ export default {
       left: 11.32rem;
       // background: #eaf12a;
       cursor: pointer;
-       z-index: 999;
+      z-index: 999;
     }
     .click2 {
       width: 0.8rem;
diff --git a/src/views/heatRecoverySys/heatOverview/index.vue b/src/views/heatRecoverySys/heatOverview/index.vue
new file mode 100644
index 0000000..058d177
--- /dev/null
+++ b/src/views/heatRecoverySys/heatOverview/index.vue
@@ -0,0 +1,1027 @@
+<template>
+  <div class="main-body">
+    <div class="irregular-border">
+      <div class="main-content">
+        <div class="condition">
+          <div class="condition-left">
+            <div class="time-label">时间类型:</div>
+            <el-radio-group
+              v-model="dateType"
+              style="margin-right: 0.24rem"
+              @change="updateDateType"
+            >
+              <el-radio label="hour">小时</el-radio>
+              <el-radio label="day">日</el-radio>
+              <el-radio label="month">月</el-radio>
+              <el-radio label="year">年</el-radio>
+            </el-radio-group>
+            <el-date-picker
+              v-model="timeDate"
+              :default-time="['00:00:00', '23:59:59']"
+              type="datetimerange"
+              range-separator="至"
+              v-if="dateType == 'hour'"
+              placeholder="选择日期"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-model="dayDate"
+              type="daterange"
+              v-if="dateType == 'day'"
+              :key="this.dateType"
+              range-separator="至"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="dateChange"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-model="monthDate"
+              type="monthrange"
+              v-if="dateType == 'month'"
+              :key="this.dateType"
+              range-separator="至"
+              start-placeholder="开始月份"
+              end-placeholder="结束月份"
+              value-format="yyyy-MM"
+              @change="dateChange"
+            >
+            </el-date-picker>
+            <div
+              class="years-div"
+              v-if="dateType == 'year'"
+              :key="this.dateType"
+            >
+              <el-date-picker
+                v-model="startYear"
+                type="year"
+                placeholder="选择开始年份"
+                style="width: 180px"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+              <div class="years-word">至</div>
+              <el-date-picker
+                v-model="endYear"
+                type="year"
+                placeholder="选择结束年份"
+                style="width: 180px"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+            </div>
+            <!-- <el-select
+              style="margin-left: 0.12rem"
+              v-model="systemType"
+              placeholder="请选择系统类型"
+              clearable
+            >
+              <el-option
+                v-for="dict in systemTypes"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              />
+            </el-select> -->
+            <div class="success-btn">
+              <el-button
+                type="success"
+                style="margin-left: 0.12rem"
+                @click="findData"
+                >查询</el-button
+              >
+            </div>
+            <div class="primary-btn">
+              <el-button type="primary" @click="leadingPrint">打印</el-button>
+            </div>
+            <div class="warning-btn">
+              <el-button type="warning" @click="exportData">导出</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="charts-table">
+          <div class="connect-div" v-loading="listLoading">
+            <div class="charts-title">{{ this.titleDate }}热量总览</div>
+            <div class="charts_refs" ref="charts_refs"></div>
+            <div class="table-content" style="width: 100%">
+              <el-table :data="tableData" style="width: 100%" stripe>
+                <el-table-column prop="date" label="时间"> </el-table-column>
+                <el-table-column prop="meter" label="总热量回收(kwh)">
+                </el-table-column>
+                <el-table-column prop="cold" label="散热量(kwh)">
+                </el-table-column>
+                <el-table-column prop="cop" label="热利用率(%)"> </el-table-column>
+              </el-table>
+              <div class="page">
+                <el-pagination
+                  background
+                  style="width: 100%; height: 20%"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                  :current-page="this.pageParm.page"
+                  :page-size="10"
+                  layout="->,total, sizes, prev, pager, next, jumper"
+                  :page-sizes="[10, 20, 30, 50, 100, 200, 9999]"
+                  :total="this.pageParm.total"
+                >
+                </el-pagination>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="dialogPrintVisible"
+      title="打印预览"
+      width="900px"
+    >
+      <div id="report" ref="report" class="report">
+        <table
+          border="1"
+          style="
+            table-layout: fixed;
+            width: 100%;
+            border: 1px solid #e2e6f0;
+            margin-bottom: 35px;
+          "
+        >
+          <thead>
+            <tr>
+              <th rowspan="1" colspan="4">热量报表</th>
+            </tr>
+            <tr>
+              <th align="center">时间</th>
+              <th align="center">总热量回收(kwh)</th>
+              <th align="center">散热量(kwh)</th>
+              <th align="center">热利用率(%)</th>
+            </tr>
+          </thead>
+          <tr v-for="(item, index) in tableData" :key="index">
+            <td align="center" v-for="(value, key) in item" :key="key">
+              {{ value }}
+            </td>
+          </tr>
+        </table>
+        <div
+          class="detail"
+          style="
+            display: flex;
+            flex-direction: row;
+            font-size: 14px;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            width: 40%;
+            color: #ffffff;
+          "
+        >
+          <div>操作员: {{ this.userName }}</div>
+          <div class="print-date">日期： {{ this.operationDate }}</div>
+        </div>
+      </div>
+      <el-row type="flex" justify="end" style="margin-top: 0.2rem">
+        <el-col :span="2">
+          <el-button type="info" @click="dialogPrintVisible = false"
+            >取消</el-button
+          >
+        </el-col>
+        <el-col :span="2" style="margin-left: 60px">
+          <el-button type="success" @click="surePrint">确认</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { format2, getDay } from "@/utils/datetime";
+import { energyInquiry, exportData } from "@/api/centerairC/energyManage";
+import { listData } from "@/api/system/dict/data";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      listLoading: false,
+      dateType: "hour", //默认选择小时
+      timeDate: [], //小时值
+      dayDate: [], //日值
+      monthDate: [], //月值
+      startYear: "", //开始年份
+      endYear: "", //结束年份
+      startTime: "", //开始日期
+      endTime: "", //结束日期
+      // 图表数据
+      dateList: [],
+      coldData: [],   
+      electData: [],
+      copData: [],
+      chartInstance2: null,
+      option2: {},
+      showZoom: true,
+      // 表格数据
+      tableData: [],
+      pageParm: {
+        page: 1, //开始页面页数，初始页
+        pageSize: 10, //每页的数据条数
+        total: null, //页数总数
+      },
+      dialogPrintVisible: false,
+      userName: "", //操作员
+      operationDate: getDay(0), //操作日期
+      titleDate: "",
+      systemType: "", //系统类型
+      systemTypes: [],
+    };
+  },
+  mounted() {
+    this.initializeTimeDate();
+    this.initChart2();
+    this.screenAdapter();
+    window.addEventListener("resize", this.screenAdapter);
+    // this.getDictList();
+    this.getTableData();
+    this.getChartsData();
+    this.userName = sessionStorage.getItem("userName");
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    /** 查询系统类型-字典数据列表 */
+    getDictList() {
+      let data = {
+        pageNum: 1,
+        pageSize: 100,
+        dictType: "sys_type",
+      };
+      listData(data).then((response) => {
+        this.systemTypes = response.rows;
+        this.systemType = this.systemTypes[0].dictValue;
+        this.getTableData();
+        this.getChartsData();
+      });
+    },
+
+    //分页组件切换每页数量
+    handleSizeChange(val) {
+      this.pageParm.pageSize = val;
+      this.pageParm.page = 1;
+      // 更新表格
+      this.getTableData();
+    },
+    //分页组件转页
+    handleCurrentChange(val) {
+      this.pageParm.page = val;
+      // 更新表格
+      this.getTableData();
+    },
+    // 初始化时间
+    initializeTimeDate() {
+      const start = new Date(new Date().setHours(0, 0, 0, 0));
+      const end = new Date(new Date().setHours(23, 59, 59, 59));
+      this.timeDate = [format2(start), format2(end)]; // 更新
+      this.titleDate = format2(start) + "至" + format2(end);
+    },
+
+    // 选择时间类型
+    updateDateType() {
+      // this.dateType = this.radio;
+      console.log(this.dateType);
+      (this.timeDate = []), //小时值
+        (this.dayDate = []), //日值
+        (this.monthDate = []), //月值
+        (this.startYear = ""), //开始年份
+        (this.endYear = ""); //结束年份
+    },
+    // 选中日期事件
+    dateChange() {
+      // console.log("打印时间", this.timeform.time1);
+      if (!this.dayDate) {
+        this.$nextTick(() => {
+          this.dayDate = [];
+        });
+      }
+      if (!this.monthDate) {
+        this.$nextTick(() => {
+          this.monthDate = [];
+        });
+      }
+    },
+    // 查询
+    findData() {
+      this.pageParm.page = 1;
+      console.log("this.dateType", this.dateType);
+      console.log("this.timeDate", this.timeDate);
+      switch (this.dateType) {
+        case "hour":
+          if (!this.timeDate) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            this.titleDate =
+              format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]);
+            this.getTableData();
+            this.getChartsData();
+          }
+          break;
+        case "day":
+          if (this.dayDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            const newLength =
+              new Date(this.dayDate[1]).getTime() -
+              new Date(this.dayDate[0]).getTime();
+            const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24));
+            if (dayDiff > 31) {
+              this.showMessage(
+                "最多只能选择30天区间，请重新选择再查询！",
+                "warning"
+              );
+            } else {
+              this.titleDate = this.dayDate[0] + "至" + this.dayDate[1];
+              this.getTableData();
+              this.getChartsData();
+            }
+          }
+          break;
+        case "month":
+          if (this.monthDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            const [start, end] = this.monthDate;
+            const startDate = new Date(start);
+            const endDate = new Date(end);
+            const startYear = startDate.getFullYear();
+            const startMonth = startDate.getMonth();
+            const endYear = endDate.getFullYear();
+            const endMonth = endDate.getMonth();
+            const monthDiff =
+              (endYear - startYear) * 12 + (endMonth - startMonth);
+            if (monthDiff > 12) {
+              this.showMessage(
+                "最多只能选择12个月区间，请重新选择再查询！",
+                "warning"
+              );
+            } else {
+              this.titleDate = this.monthDate[0] + "至" + this.monthDate[1];
+              this.getTableData();
+              this.getChartsData();
+            }
+          }
+          break;
+        case "year":
+          if (!this.startYear || !this.endYear) {
+            this.showMessage("请选择全年份区间！", "warning");
+          } else if (this.startYear > this.endYear) {
+            this.showMessage("结束年份要大于开始年份！", "warning");
+          } else {
+            this.titleDate = this.startYear + "至" + this.endYear;
+            this.getTableData();
+            this.getChartsData();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    // 显示消息的函数
+    showMessage(message, type) {
+      this.$message({
+        message: message,
+        type: type,
+      });
+    },
+    //请求表格数据
+    getTableData() {
+      if (this.dateType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.dateType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.dateType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.dateType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      let data = {
+        timeType: this.dateType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        pageNum: this.pageParm.page,
+        pageSize: this.pageParm.pageSize,
+        systemType: 7,
+      };
+      console.log("查询数据参数", data);
+      this.listLoading = true;
+      energyInquiry(data).then((res) => {
+        console.log("查询返回", res);
+        if (res.code == 200 && res.data) {
+          this.tableData = res.data[4].timeStrArr.map((date, index) => ({
+            date,
+            electData: res.data[1].meter[index].toString(), // 总热量回收数组
+            coldData: res.data[0].cold[index].toString(), // 散热量数组
+            copData: res.data[2].cop[index].toString(), // 热利用率数组
+          }));
+          this.pageParm.total = res.data.totalPages;
+        } else {
+          this.tableData = [];
+        }
+      });
+      // Just to simulate the time of the request
+      setTimeout(() => {
+        this.listLoading = false;
+      }, 1.0 * 1000);
+    },
+    // 请求图表数据
+    getChartsData() {
+      if (this.dateType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.dateType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.dateType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.dateType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      let data = {
+        timeType: this.dateType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        pageNum: 0,
+        pageSize: 10,
+        systemType: 7,
+      };
+      console.log("查询数据参数", data);
+      energyInquiry(data).then((res) => {
+        console.log("查询返回", res);
+        if (res.code == 200 && res.data) {
+          // 数据
+          this.dateList = res.data[4].timeStrArr;
+          this.coldData = res.data[0].cold;
+          this.electData = res.data[1].meter;
+          this.copData = res.data[2].cop;
+          // this.option2.dataZoom[0].show = this.showZoom
+          // this.option2.series[0].data = this.coldData;
+          // this.option2.series[1].data = this.electData;
+          // this.option2.series[2].data = this.copData;
+          // this.option2.xAxis.data = this.dateList;
+          let coldNumbers = this.coldData.map((value) => parseFloat(value));
+          console.log("coldNumbers", coldNumbers);
+          let electNumbers = this.electData.map((value) => parseFloat(value));
+          let copNumbers = this.copData.map((value) => parseFloat(value));
+          // 计算双y轴最大最小值，
+          var Min1 = 0,
+            Min2 = 0,
+            Max1 = Math.ceil(Math.max(...coldNumbers, ...electNumbers)),
+            Max2 = Math.ceil(Math.max(...copNumbers));
+          console.log("Min1", Min1);
+          console.log("Min2", Min2);
+          console.log("Max1", Max1);
+          console.log("Max2", Max2);
+          const adapterOption = {
+            xAxis: {
+              data: this.dateList,
+            },
+            yAxis: [
+              //两个y轴
+              {
+                min: Min1,
+                max: Max1,
+                splitNumber: 10,
+                interval: (Max1 - Min1) / 10,
+              },
+              {
+                min: Min2,
+                max: Max2,
+                splitNumber: 10,
+                interval: (Max2 - Min2) / 10,
+              },
+            ],
+            series: [
+              {
+                name: "总热量回收",
+                data: this.electData,
+                sampling: "lttb", //降采样策略
+              },
+              {
+                name: "散热量",
+                data:  this.coldData,
+                sampling: "lttb", //降采样策略
+              },
+              {
+                name: "热利用率",
+                data: this.copData,
+                sampling: "lttb", //降采样策略
+              },
+            ],
+          };
+          this.chartInstance2.setOption(adapterOption);
+          this.chartInstance2.resize();
+        } else {
+          this.dateList = [];
+          this.coldData = [];
+          this.electData = [];
+          this.copData = [];
+          this.option2.series[0].data = [];
+          this.option2.series[1].data = [];
+          this.option2.series[2].data = [];
+          this.option2.xAxis.data = [];
+          this.chartInstance2.setOption(this.option2);
+        }
+      });
+    },
+    //初始化chartInstance2对象 折线图
+    initChart2() {
+      var Min1 = 0,
+        Min2 = 0,
+        Max1 = Math.ceil(Math.max(...this.coldData, ...this.electData) + 4),
+        Max2 = Math.ceil(Math.max(...this.copData) + 4);
+      this.chartInstance2 = echarts.init(this.$refs.charts_refs);
+      this.option2 = {
+        tooltip: {
+          trigger: "axis",
+          // 使用 formatter 设定 tooltip 内容格式
+          formatter: function (params) {
+            let seriesHTML = "";
+            params.forEach(function (item) {
+              seriesHTML +=
+                "<div>" +
+                item.seriesName +
+                ': <span style="color: #000000; font-weight: bold;">' +
+                item.value +
+                "</span></div>";
+            });
+            return "<div>" + params[0].name + "</div>" + seriesHTML;
+          },
+          // 自定义 tooltip 内容
+          formatter: function (params) {
+            var res = params[0].name + "<br/>";
+            for (var i = 0, l = params.length; i < l; i++) {
+              var seriesName = params[i].seriesName;
+              var value = params[i].value;
+              // console.log("打印颜色", params[i].color.colorStops[0].color)
+              var marker =
+                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                params[i].color.colorStops[0].color +
+                '"></span>';
+              // 根据不同的seriesName 返回不同的单位
+              if (seriesName === "总热量回收" || seriesName === "散热量") {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "kwh" +
+                  "</span><br>";
+              } else if (seriesName === "热利用率") {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "%" +
+                  "</span><br>";
+              } else {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "</span><br>";
+              }
+            }
+            return res;
+          },
+        },
+        legend: {
+          data: ["总热量回收", "散热量", "热利用率"],
+          // selectedMode: false, // 是否允许图例进行点击
+          show: true, // 不显示图例
+          textStyle: {
+            color: "white", // 设置图例文字颜色为蓝色
+          },
+        },
+
+        grid: {
+          top: "10%",
+          left: "3%",
+          right: "4.4%",
+          bottom: "20%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          //设置为true代表离零刻度间隔一段距离
+          boundaryGap: true,
+          // 修饰刻度标签的颜色即x坐标数据
+          axisLabel: {
+            // interval: 0, //强制显示所有x轴数据
+            // rotate: 30, //x轴坐标字体倾斜30度
+            color: "rgba(255, 255, 255, 1)",
+          },
+          axisTick: {
+            show: false, // 不显示坐标轴刻度线
+          },
+          // x坐标轴的颜色
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#e2e6f0",
+            },
+          }, //x轴分割线
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "热量",
+            // 设置 name 的样式
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12,
+            },
+            // 修饰刻度标签的颜色即y坐标数据
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+            },
+            // 显示y坐标轴
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576", // 设置 y 轴线的颜色
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
+              },
+            },
+            min: Min1,
+            max: Max1,
+            splitNumber: 10,
+            interval: (Max1 - Min1) / 10,
+            scale: true,
+          },
+          {
+            type: "value",
+            name: "热利用率",
+            // 设置 name 的样式
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12,
+            },
+            // 修饰刻度标签的颜色即y坐标数据
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+            },
+            // 显示y坐标轴
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576", // 设置 y 轴线的颜色
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
+              },
+            },
+            min: Min2,
+            max: Max2,
+            splitNumber: 10,
+            interval: (Max2 - Min2) / 10,
+            scale: true,
+          },
+        ],
+        dataZoom: [
+          {
+            type: "slider", // x 轴区域缩放
+            height: 15,
+            xAxisIndex: 0,
+            start: 0,
+            end: 100,
+            handleSize: "120%",
+            filterMode: "filter",
+          },
+          {
+            type: "slider", // y 轴区域缩放
+            width: 15,
+            handleSize: "120%",
+            yAxisIndex: [0, 1],
+            filterMode: "filter",
+            start: 0, // 起始位置设置为0
+            end: 100, // 默认结束位置设置为100
+          },
+        ],
+        series: [
+          {
+            name: "总热量回收",
+            type: "bar",
+            smooth: true,
+            symbol: "circle",
+            // 拐点大小
+            symbolSize: 8,
+
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            //折线颜色
+            itemStyle: {
+              color: "#0b75d3",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(1, 102, 251, 1)", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(1, 102, 251, 0)", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+              borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
+            },
+          },
+          {
+            name: "散热量",
+            type: "bar",
+            smooth: true,
+            symbol: "circle",
+            // 拐点大小
+            symbolSize: 8,
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            //折线颜色
+            itemStyle: {
+              color: "#0b75d3",
+              // 使用颜色渐变
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 224, 225, 1)", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 224, 225, 0)", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+              borderRadius: [5, 5, 0, 0],
+            },
+          },
+          {
+            name: "热利用率",
+            type: "line",
+            smooth: false,
+            symbol: "circle",
+            // 拐点大小
+            symbolSize: 8,
+            yAxisIndex: 1,
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            //折线颜色
+            itemStyle: {
+              color: "#EE5217", //折线点的颜色
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#EE5217", // 起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#EE5217", // 结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+              lineStyle: {
+                color: "#EE5217", //折线的颜色
+              },
+            },
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance2.setOption(this.option2, true);
+    },
+    // 元素大小
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.charts_refs.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {
+        // x轴坐标字体大小
+        xAxis: {
+          axisLabel: {
+            fontSize: titleFontSize * 1.5,
+          },
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: titleFontSize * 1.5,
+          },
+        },
+      };
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance2.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance2.resize();
+    },
+    // 导出
+    exportData() {
+      if (this.dateType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.dateType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.dateType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.dateType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      let data = {
+        timeType: this.dateType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        pageNum: 0,
+        pageSize: 10,
+        systemType:7,
+      };
+      console.log("导出数据参数", data);
+      exportData(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('导出失败!');
+      // })
+    },
+    // 打印
+    leadingPrint() {
+      this.dialogPrintVisible = true;
+    },
+    // 打印
+    surePrint() {
+      const printHTML = document.querySelector("#report").innerHTML;
+      // 将打印的区域赋值，进行打印
+      window.document.body.innerHTML = printHTML;
+      window.print(); // 调用window打印方法
+      window.location.reload(); // 打印完成后重新加载页面
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.condition {
+  display: flex;
+  flex-direction: row;
+  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;
+    }
+  }
+}
+.charts-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.charts-title {
+  font-size: 0.24rem;
+  line-height: 0.07rem;
+  letter-spacing: 0.02rem;
+  color: #1f70e9;
+  margin: 0.3rem 0;
+  width: 100%;
+  text-align: center;
+}
+.main-content {
+  min-height: 6.6rem;
+}
+
+.connect-div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 16rem;
+}
+.page {
+  margin-top: 0.22rem;
+}
+
+.charts_refs {
+  width: 16rem;
+  height: 4.55rem;
+  /* margin-bottom: 0.39rem; */
+  margin-left: -0.35rem;
+}
+// 媒体查询，适配大于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;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/heatRecoverySys/thermalAnalysis/components/deviceEnergy.vue b/src/views/heatRecoverySys/thermalAnalysis/components/deviceEnergy.vue
new file mode 100644
index 0000000..8f81e19
--- /dev/null
+++ b/src/views/heatRecoverySys/thermalAnalysis/components/deviceEnergy.vue
@@ -0,0 +1,775 @@
+<template>
+  <div class="main-body">
+    <div class="irregular-border">
+      <div class="main-content">
+        <div class="condition">
+          <div class="condition-left">
+            <div class="time-label">时间类型:</div>
+            <el-radio-group
+              v-model="dateType"
+              style="margin-right: 0.24rem"
+              @change="updateDateType"
+            >
+              <el-radio label="hour">小时</el-radio>
+              <el-radio label="day">日</el-radio>
+              <el-radio label="month">月</el-radio>
+              <el-radio label="year">年</el-radio>
+            </el-radio-group>
+            <el-date-picker
+              v-if="dateType == 'hour'"
+              v-model="timeDate"
+              @change="handleConfirm"
+              type="datetimerange"
+              :default-time="['00:00:00', '23:59:59']"
+              range-separator="至"
+              placeholder="选择日期"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-model="dayDate"
+              type="daterange"
+              v-if="dateType == 'day'"
+              :key="this.dateType"
+              range-separator="至"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="dateChange"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-model="monthDate"
+              type="monthrange"
+              v-if="dateType == 'month'"
+              :key="this.dateType"
+              range-separator="至"
+              start-placeholder="开始月份"
+              end-placeholder="结束月份"
+              value-format="yyyy-MM"
+              @change="dateChange"
+            >
+            </el-date-picker>
+            <div
+              class="years-div"
+              v-if="dateType == 'year'"
+              :key="this.dateType"
+            >
+              <el-date-picker
+                v-model="startYear"
+                type="year"
+                placeholder="选择开始年份"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+              <div class="years-word">至</div>
+              <el-date-picker
+                v-model="endYear"
+                type="year"
+                placeholder="选择结束年份"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+            </div>
+            <el-select
+              style="margin: 0 10px"
+              clearable
+              class="elSelectDiv"
+              v-model="electType"
+              placeholder="请选择查询类型"
+              @change="handleSelectChange"
+            >
+              <el-option
+                v-for="item in electTypes"
+                :key="item.id"
+                :label="item.label"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+
+            <div class="success-btn">
+              <el-button
+                type="success"
+                style="margin-left: 0.12rem"
+                @click="findData"
+                >查询</el-button
+              >
+            </div>
+          </div>
+          <!-- <div class="condition-right">
+                        <el-button type="warning">导出</el-button>
+                    </div> -->
+        </div>
+        <div class="charts-table" v-loading="listLoading">
+          <div class="charts-title">
+            {{ this.titleDate }} {{ this.deviceTitle }}
+          </div>
+          <div class="charts_refs" ref="charts_refs"></div>
+          <div class="analysis-table">
+            <table>
+              <thead>
+                <tr>
+                  <th v-if="dateList.length > 0">数据类型</th>
+                  <th v-for="(item, index) in dateList" :key="index">
+                    {{ item }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td v-if="electData.length > 0">热量(kwh)</td>
+                  <td v-for="(item, index) in electData" :key="index">
+                    {{ item }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { format2 } from "@/utils/datetime";
+import { deviceEnergy } from "@/api/centerairC/energyManage";
+import * as echarts from "echarts";
+import { listData } from "@/api/system/dict/data";
+import { devicesList } from "@/api/device/gather";
+export default {
+  data() {
+    return {
+      listLoading: false,
+      dateType: "hour", //默认选择小时
+      timeDate: [], //小时值
+      electType: [],
+      electTypes: [],
+      deviceTitle: "",
+      dayDate: [], //日值
+      monthDate: [], //月值
+      startYear: "", //开始年份
+      endYear: "", //结束年份
+      startTime: "", //开始日期
+      endTime: "", //结束日期
+      // 表格数据
+      dateList: [],
+      electData: [],
+      // 折线图数据
+      dateList2: [],
+      electData2: [],
+      chartInstance2: null,
+      option2: {},
+      titleDate: "",
+      systemType: "", //系统类型
+      systemTypes: [],
+    };
+  },
+  mounted() {
+    this.initializeTimeDate();
+    this.initChart2();
+    this.screenAdapter();
+    window.addEventListener("resize", this.screenAdapter);
+    this.initData();
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    /** 查询系统类型-字典数据列表 */
+    getDictList() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          pageNum: 1,
+          pageSize: 100,
+          dictType: "sys_type",
+        };
+        listData(data)
+          .then((response) => {
+            this.systemTypes = response.rows;
+            if (this.systemTypes.length > 0) {
+              this.systemType = this.systemTypes[0].dictValue;
+            }
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    /** 查询设备类型 */
+    getList() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          systemType: 7,
+        };
+        devicesList(data)
+          .then((res) => {
+            // 获取第四层级的children
+            this.electTypes = this.getChildrenAtLevel(res.data, 5);
+            this.electType = this.electTypes[0].id;
+            // 标题
+            let obj = {};
+            obj = this.electTypes.find((item) => {
+              return item.id === this.electType;
+            });
+            this.deviceTitle = obj.label;
+            console.log(obj.label);
+            console.log("this.electTypes", this.electTypes);
+            console.log("this.electType", this.electType);
+            this.handleSelectChange();
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 选择el-select
+    handleSelectChange() {
+      console.log("----和默认选中值比较", this.electType);
+      // this.selectElect = this.electType.map((v) => {
+      //   const selectedItem = this.electTypes.find((item) => item.mtNum === v);
+      //   return {
+      //     name: selectedItem ? selectedItem.otherName : "",
+      //     // 如果 selectedItem 存在，则使用其 id 属性作为 value，否则设为 null
+      //     value: selectedItem ? selectedItem.id : null,
+      //   };
+      // });
+      // console.log("this.selectElect", this.selectElect);
+    },
+    getChildrenAtLevel(data, targetLevel, currentLevel = 1) {
+      if (!Array.isArray(data) || data.length === 0) {
+        return [];
+      }
+
+      if (currentLevel === targetLevel - 1) {
+        // 到达目标层级的前一层，收集其children
+        const result = [];
+        for (let item of data) {
+          if (item.children && Array.isArray(item.children)) {
+            result.push(...item.children);
+          }
+        }
+        return result;
+      }
+
+      // 继续递归遍历
+      const result = [];
+      for (let item of data) {
+        if (item.children && Array.isArray(item.children)) {
+          const children = this.getChildrenAtLevel(
+            item.children,
+            targetLevel,
+            currentLevel + 1
+          );
+          result.push(...children);
+        }
+      }
+
+      return result;
+    },
+    /** 初始化数据 */
+    initData() {
+      Promise.all([
+        // this.getDictList(),
+        this.getList(),
+      ])
+        .then(() => {
+          this.getTableData();
+        })
+        .catch((error) => {
+          console.error("数据获取失败:", error);
+        });
+    },
+    handleConfirm() {
+      console.log("打印选择的时间", this.timeDate);
+      // const start = new Date(this.timeDate[0]);
+      // start.setHours(0, 0, 0, 0);
+      // const end = new Date(this.timeDate[1]);
+      // end.setHours(23, 59, 59, 999);
+      // this.timeDate = [start, end];
+    },
+    // 初始化时间
+    initializeTimeDate() {
+      const start = new Date(new Date().setHours(0, 0, 0, 0));
+      const end = new Date(new Date().setHours(23, 59, 59, 59));
+      this.timeDate = [format2(start), format2(end)]; // 更新
+      this.titleDate = format2(start) + "至" + format2(end);
+    },
+    // 选择时间类型
+    updateDateType() {
+      // this.dateType = this.radio;
+      console.log(this.dateType);
+      (this.timeDate = []), //小时值
+        (this.dayDate = []), //日值
+        (this.monthDate = []), //月值
+        (this.startYear = ""), //开始年份
+        (this.endYear = ""); //结束年份
+    },
+    // 选中日期事件
+    dateChange() {
+      // console.log("打印时间", this.timeform.time1);
+      if (!this.dayDate) {
+        this.$nextTick(() => {
+          this.dayDate = [];
+        });
+      }
+      if (!this.monthDate) {
+        this.$nextTick(() => {
+          this.monthDate = [];
+        });
+      }
+    },
+    // 查询
+    findData() {
+      console.log(this.dateType);
+      switch (this.dateType) {
+        case "hour":
+          if (!this.timeDate) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            this.titleDate =
+              format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]);
+            this.getTableData();
+          }
+          break;
+        case "day":
+          if (this.dayDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            const newLength =
+              new Date(this.dayDate[1]).getTime() -
+              new Date(this.dayDate[0]).getTime();
+            const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24));
+            if (dayDiff > 31) {
+              this.showMessage(
+                "最多只能选择30天区间，请重新选择再查询！",
+                "warning"
+              );
+            } else {
+              this.titleDate = this.dayDate[0] + "至" + this.dayDate[1];
+              this.getTableData();
+            }
+          }
+          break;
+        case "month":
+          if (this.monthDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            const [start, end] = this.monthDate;
+            const startDate = new Date(start);
+            const endDate = new Date(end);
+            const startYear = startDate.getFullYear();
+            const startMonth = startDate.getMonth();
+            const endYear = endDate.getFullYear();
+            const endMonth = endDate.getMonth();
+            const monthDiff =
+              (endYear - startYear) * 12 + (endMonth - startMonth);
+            if (monthDiff > 12) {
+              this.showMessage(
+                "最多只能选择12个月区间，请重新选择再查询！",
+                "warning"
+              );
+            } else {
+              this.titleDate = this.monthDate[0] + "至" + this.monthDate[1];
+              this.getTableData();
+            }
+          }
+          break;
+        case "year":
+          if (!this.startYear || !this.endYear) {
+            this.showMessage("请选择全年份区间！", "warning");
+          } else if (this.startYear > this.endYear) {
+            this.showMessage("结束年份要大于开始年份！", "warning");
+          } else {
+            this.titleDate = this.startYear + "至" + this.endYear;
+            this.getTableData();
+          }
+          break;
+        default:
+          break;
+      }
+
+      // 找到el-select的label的值
+      let value = this.electType;
+      let obj = {};
+      obj = this.electTypes.find((item) => {
+        return item.id === value;
+      });
+      this.deviceTitle = obj.label;
+      console.log(obj.label);
+    },
+    // 显示消息的函数
+    showMessage(message, type) {
+      this.$message({
+        message: message,
+        type: type,
+      });
+    },
+    //请求数据
+    getTableData() {
+      if (this.dateType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.dateType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.dateType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.dateType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      let data = {
+        timeType: this.dateType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        houseId: this.electType,
+        systemType: 7,
+      };
+      console.log("查询数据参数", data);
+      // this.option2.series[0].data = ["1"];
+      // this.option2.xAxis.data = ["1"];
+      // this.screenAdapter();
+      // this.chartInstance2.setOption(this.option2);
+      this.listLoading = true;
+      deviceEnergy(data).then((res) => {
+        console.log("查询返回", res);
+        if (res.code == 200 && res.data.lineTimes) {
+          if (res.data.times && res.data.times.length > 0) {
+            // 表格数据  .map(time => `${time}:00`)
+            this.dateList = res.data.times;
+            this.electData = res.data.data[0].meter;
+            console.log("表头", this.dateList);
+            console.log("表格内容", this.electData);
+          } else {
+            this.dateList = [];
+            this.electData = [];
+          }
+
+          // 图例数据
+          this.dateList2 = res.data.lineTimes.map((item) => {
+            // 使用slice()方法截取需要的部分
+            return item.slice(0, 16);
+          });
+          this.electData2 = res.data.data[1].lineMeter;
+
+          this.option2.series[0].data = this.electData2;
+          this.option2.xAxis.data = this.dateList2;
+          this.option2.yAxis.name = "kwh";
+          this.option2.yAxis.nameTextStyle = {
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: 12,
+          };
+          console.log("x轴", this.dateList2);
+          console.log("折线图数据", this.electData2);
+          this.screenAdapter();
+          this.chartInstance2.setOption(this.option2);
+        } else {
+          this.dateList = [];
+          this.electData = [];
+          this.option2.series[0].data = [];
+          this.option2.xAxis.data = [];
+          this.screenAdapter();
+          this.chartInstance2.setOption(this.option2);
+        }
+      });
+      // Just to simulate the time of the request
+      setTimeout(() => {
+        this.listLoading = false;
+      }, 1.0 * 1000);
+    },
+    //初始化chartInstance2对象 折线图
+    initChart2() {
+      this.chartInstance2 = echarts.init(this.$refs.charts_refs);
+      this.option2 = {
+        tooltip: {
+          trigger: "axis",
+          // 使用 formatter 设定 tooltip 内容格式
+          formatter: function (params) {
+            let seriesHTML = "";
+            params.forEach(function (item) {
+              seriesHTML +=
+                "<div>" +
+                item.seriesName +
+                ': <span style="color: #000000; font-weight: bold;">' +
+                item.value +
+                "</span></div>";
+            });
+            return "<div>" + params[0].name + "</div>" + seriesHTML;
+          },
+          // 自定义 tooltip 内容
+          formatter: function (params) {
+            var res = params[0].name + "<br/>";
+            for (var i = 0, l = params.length; i < l; i++) {
+              var seriesName = params[i].seriesName;
+              var value = params[i].value;
+              var marker =
+                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                params[i].color +
+                '"></span>';
+              // 根据不同德seriesName 返回不同的单位
+              if (seriesName === "热量") {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "kwh" +
+                  "</span><br>";
+              } else {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "</span><br>";
+              }
+            }
+            return res;
+          },
+        },
+        legend: {
+          show: false, // 不显示图例
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "4.4%",
+          bottom: "20%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: this.dateList2,
+          //设置为true代表离零刻度间隔一段距离
+          boundaryGap: true,
+          // 修饰刻度标签的颜色即x坐标数据
+          axisLabel: {
+            // interval: 0, //强制显示所有x轴数据
+            // rotate: 30, //x轴坐标字体倾斜30度
+            color: "rgba(255, 255, 255, 1)",
+          },
+          axisTick: {
+            show: false, // 不显示坐标轴刻度线
+          },
+          // x坐标轴的颜色
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#e2e6f0",
+            },
+          }, //x轴分割线
+        },
+        yAxis: {
+          min: 0,
+          miniInterval: 5,
+          type: "value",
+          // 修饰刻度标签的颜色即y坐标数据
+          axisLabel: {
+            color: "rgba(255, 255, 255, 1)",
+          },
+          // 显示y坐标轴
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576", // 设置 y 轴线的颜色
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62", // 设置分割线的颜色
+              type: "dashed", // 设置分割线为虚线
+            },
+          },
+        },
+        series: [
+          {
+            name: "热量",
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            // 拐点大小
+            symbolSize: 8,
+            data: this.electData2,
+            sampling: "lttb", //降采样策略
+            // 设置拐点颜色以及边框
+            // itemStyle: {
+            //   color: "#0184d5",
+            //   borderColor: "rgba(221, 220, 107, .1)",
+            //   borderWidth: 12
+            //  },
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            //折线颜色
+            itemStyle: {
+              color: "#01c29b", //折线点的颜色
+              lineStyle: {
+                color: "#01c29b", //折线的颜色
+              },
+            },
+            areaStyle: {
+              color: {
+                //线性渐变
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(1, 194, 155, 1)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.8,
+                    color: "rgba(1, 194, 155,0.2)", // 100% 处的颜色
+                  },
+                ],
+                // global: false, // 缺省为 false
+              },
+            },
+          },
+        ],
+      };
+      //把配置项给实例对象
+      this.chartInstance2.setOption(this.option2, true);
+    },
+    // 元素大小
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.charts_refs.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {
+        // x轴坐标字体大小
+        xAxis: {
+          axisLabel: {
+            fontSize: titleFontSize * 1.4,
+          },
+        },
+        yAxis: {
+          axisLabel: {
+            fontSize: titleFontSize * 1.4,
+          },
+        },
+        // 拖拽X轴
+        dataZoom: [
+          {
+            type: "slider", //inside鼠标缩放
+            show: this.showZoom,
+            height: titleFontSize, // 设置控制区域的高度为 20 像素
+            // fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色
+            // backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色
+            start: 0,
+            end: 100,
+            xAxisIndex: [0],
+            handleSize: "120%", // 设置滑块大小为默认大小的 120%
+          },
+        ],
+      };
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance2.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance2.resize();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.condition {
+  display: flex;
+  flex-direction: row;
+  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;
+    }
+  }
+}
+.charts-title {
+  font-size: 0.24rem;
+  line-height: 0.07rem;
+  letter-spacing: 0.02rem;
+  color: #1f70e9;
+  margin: 0.3rem 0 0rem 0;
+  width: 100%;
+  text-align: center;
+}
+.analysis-table table thead th {
+  min-width: 1.6rem;
+}
+
+.analysis-table {
+  margin: 0.3rem 0;
+}
+
+.main-content {
+  min-height: 6.9rem;
+}
+.charts-table {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.charts_refs {
+  width: 17rem;
+  height: 4.55rem;
+  margin-left: -0.35rem;
+}
+// 媒体查询，适配大于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;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/heatRecoverySys/thermalAnalysis/components/equipment.vue b/src/views/heatRecoverySys/thermalAnalysis/components/equipment.vue
new file mode 100644
index 0000000..431ee88
--- /dev/null
+++ b/src/views/heatRecoverySys/thermalAnalysis/components/equipment.vue
@@ -0,0 +1,872 @@
+<template>
+  <div class="main-body">
+    <div class="irregular-border">
+      <div class="main-content">
+        <div class="condition">
+          <div class="condition-left">
+            <div class="time-label">时间类型:</div>
+            <el-radio-group
+              v-model="dateType"
+              style="margin-right: 0.24rem"
+              @change="updateDateType"
+            >
+              <el-radio label="hour">小时</el-radio>
+              <el-radio label="day">日</el-radio>
+              <el-radio label="month">月</el-radio>
+              <el-radio label="year">年</el-radio>
+            </el-radio-group>
+            <el-date-picker
+              v-model="timeDate"
+              :default-time="['00:00:00', '23:59:59']"
+              type="datetimerange"
+              range-separator="至"
+              v-if="dateType == 'hour'"
+              placeholder="选择日期"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-model="dayDate"
+              type="daterange"
+              v-if="dateType == 'day'"
+              :key="this.dateType"
+              range-separator="至"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="dateChange"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-model="monthDate"
+              type="monthrange"
+              v-if="dateType == 'month'"
+              :key="this.dateType"
+              range-separator="至"
+              start-placeholder="开始月份"
+              end-placeholder="结束月份"
+              value-format="yyyy-MM"
+              @change="dateChange"
+            >
+            </el-date-picker>
+            <div
+              class="years-div"
+              v-if="dateType == 'year'"
+              :key="this.dateType"
+            >
+              <el-date-picker
+                v-model="startYear"
+                type="year"
+                placeholder="选择开始年份"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+              <div class="years-word">至</div>
+              <el-date-picker
+                v-model="endYear"
+                type="year"
+                placeholder="选择结束年份"
+                value-format="yyyy"
+              >
+              </el-date-picker>
+            </div>
+            <el-select
+              style="margin: 0 10px"
+              multiple
+              collapse-tags
+              class="elSelectDiv"
+              v-model="electType"
+              placeholder="请选择查询类型"
+              @change="handleSelectChange"
+            >
+              <el-option
+                v-for="item in electTypes"
+                :key="item.mtNum"
+                :label="item.otherName"
+                :value="item.mtNum"
+              ></el-option>
+            </el-select>
+            <!-- <el-select
+              style="margin: 0 10px"
+              v-model="systemType"
+              placeholder="请选择系统类型"
+              clearable
+            >
+              <el-option
+                v-for="dict in systemTypes"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              />
+            </el-select> -->
+            <div class="success-btn">
+              <el-button type="success" @click="findData">查询</el-button>
+            </div>
+            <div class="primary-btn">
+              <el-button type="primary" @click="leadingPrint">打印</el-button>
+            </div>
+            <div class="warning-btn">
+              <el-button type="warning" @click="exportData">导出</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="charts-table" v-loading="listLoading">
+          <div class="details_ref" ref="details_ref"></div>
+          <div class="table-content" style="width: 100%">
+            <el-table
+              stripe
+              :data="tableData"
+              style="width: 100%"
+              v-if="tableData && tableData.length > 0"
+            >
+              <el-table-column
+                v-for="header in headers"
+                :key="header.key"
+                :prop="header.key"
+                :label="header.label"
+              >
+              </el-table-column>
+            </el-table>
+            <div class="page" v-if="tableData && tableData.length > 0">
+              <el-pagination
+                background
+                style="width: 100%; height: 20%"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="this.pageParm.page"
+                :page-size="10"
+                layout="->,total, sizes, prev, pager, next, jumper"
+                :page-sizes="[10, 20, 30, 50, 100, 200, 9999]"
+                :total="this.pageParm.total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="dialogPrintVisible"
+      title="打印预览"
+      width="900px"
+    >
+      <div id="report" ref="report" class="report">
+        <table
+          border="1"
+          style="
+            table-layout: fixed;
+            width: 100%;
+            border: 1px solid #e2e6f0;
+            margin-bottom: 35px;
+          "
+        >
+          <thead>
+            <tr>
+              <th rowspan="1" :colspan="headers.length">设备能耗报表</th>
+            </tr>
+            <tr>
+              <th
+                align="center"
+                v-for="(item, index) in headers"
+                :key="index + 2"
+              >
+                {{ item.label }}
+              </th>
+            </tr>
+          </thead>
+          <tr v-for="(item, index) in tableData" :key="index">
+            <td align="center" v-for="(value, key) in item" :key="key">
+              {{ value }}
+            </td>
+          </tr>
+        </table>
+        <div
+          class="detail"
+          style="
+            display: flex;
+            flex-direction: row;
+            font-size: 14px;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+            width: 40%;
+            color: #ffffff;
+          "
+        >
+          <div>操作员: {{ this.userName }}</div>
+          <div class="print-date">日期： {{ this.operationDate }}</div>
+        </div>
+      </div>
+      <el-row type="flex" justify="end" style="margin-top: 0.2rem">
+        <el-col :span="2">
+          <div class="info-btn">
+            <el-button type="info" @click="dialogPrintVisible = false"
+              >取消</el-button
+            >
+          </div>
+        </el-col>
+        <el-col :span="2" style="margin-left: 60px">
+          <div class="success-btn">
+            <el-button type="success" @click="surePrint">确认</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getDay, format2 } from "@/utils/datetime";
+import * as echarts from "echarts";
+import {
+  deviceAnalyze,
+  deviceAnalyzeExport,
+} from "@/api/centerairC/energyManage";
+import { cpmList } from "@/api/device/gather";
+import { listData } from "@/api/system/dict/data";
+export default {
+  data() {
+    return {
+      listLoading: false,
+      dateType: "hour", //默认选择小时
+      timeDate: [], //小时值
+      dayDate: [], //日值
+      monthDate: [], //月值
+      startYear: "", //开始年份
+      endYear: "", //结束年份
+      startTime: "", //开始日期
+      endTime: "", //结束日期
+      // 图例数据
+      timeData: [],
+      dataArr: [],
+      //表格数据
+      curValue2: [],
+      lastValue2: [],
+      mom2: [],
+      unitValue: "", //单位
+      electType: [],
+      electTypes: [],
+      selectElect: [],
+      // 动态表头
+      headers: [
+        // { key: 'name', label: 'Name' },
+        // { key: 'age', label: 'Age' },
+        // { key: 'gender', label: 'Gender' }
+      ],
+      tableData: [
+        // { name: 'Alice', age: 26, gender: 'Female' },
+        // { name: 'Bob', age: 30, gender: 'Male' },
+        // { name: 'Charlie', age: 25, gender: 'Male' }
+      ],
+      pageParm: {
+        page: 1, //开始页面页数，初始页
+        pageSize: 10, //每页的数据条数
+        total: null, //页数总数
+      },
+      dialogPrintVisible: false,
+      userName: "", //操作员
+      operationDate: getDay(0), //操作日期
+      systemType: "", //系统类型
+      systemTypes: [],
+      electType: "",
+      electTypes: [],
+    };
+  },
+  mounted() {
+    this.initData();
+    this.initializeTimeDate();
+    this.initChart1();
+    window.addEventListener("resize", this.screenAdapter);
+    this.screenAdapter();
+    this.userName = sessionStorage.getItem("userName");
+  },
+  destroyed() {
+    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
+    window.removeEventListener("resize", this.screenAdapter);
+  },
+  methods: {
+    /** 查询系统类型-字典数据列表 */
+    getDictList() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          pageNum: 1,
+          pageSize: 100,
+          dictType: "sys_type",
+        };
+        listData(data)
+          .then((response) => {
+            this.systemTypes = response.rows;
+            if (this.systemTypes.length > 0) {
+              this.systemType = this.systemTypes[0].dictValue;
+            }
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    /** 查询设备类型列表 */
+    getList() {
+      return new Promise((resolve, reject) => {
+        let data = {
+          pageNum: 1,
+          pageSize: 100,
+          mtType: "2", // 热量表
+          isUse: "0",
+        };
+        cpmList(data)
+          .then((response) => {
+            // 过滤数据，只保留 system_type = 0 且 grade = 40 的对象
+            this.electTypes = response.rows.filter(
+              (item) => item.systemType === "7" && item.grade === 40
+            );
+            this.electType = [];
+            if (this.electTypes.length > 3) {
+              this.electType = [
+                this.electTypes[0].mtNum,
+                this.electTypes[1].mtNum,
+                this.electTypes[2].mtNum,
+              ];
+            } else if (this.electTypes.length > 0) {
+              this.electType = [this.electTypes[0].mtNum];
+            }
+            console.log("this.electTypes", this.electTypes);
+            console.log("this.electType", this.electType);
+            this.handleSelectChange();
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    /** 初始化数据 */
+    initData() {
+      Promise.all([
+        // this.getDictList(),
+        this.getList(),
+      ])
+        .then(() => {
+          this.getTableData();
+          this.getChartsData();
+        })
+        .catch((error) => {
+          console.error("数据获取失败:", error);
+        });
+    },
+
+    //分页组件切换每页数量
+    handleSizeChange(val) {
+      this.pageParm.pageSize = val;
+      this.pageParm.page = 1;
+      // 更新表格
+      this.getTableData();
+    },
+    //分页组件转页
+    handleCurrentChange(val) {
+      this.pageParm.page = val;
+      // 更新表格
+      this.getTableData();
+    },
+    // 选择el-select
+    handleSelectChange() {
+      console.log("----和默认选中值比较", this.electType);
+      this.selectElect = this.electType.map((v) => {
+        const selectedItem = this.electTypes.find((item) => item.mtNum === v);
+        return {
+          name: selectedItem ? selectedItem.otherName : "",
+          // 如果 selectedItem 存在，则使用其 id 属性作为 value，否则设为 null
+          value: selectedItem ? selectedItem.id : null,
+        };
+      });
+      console.log("this.selectElect", this.selectElect);
+    },
+    // 初始化时间
+    initializeTimeDate() {
+      const start = new Date(new Date().setHours(0, 0, 0, 0));
+      const end = new Date(new Date().setHours(23, 59, 59, 59));
+      this.timeDate = [format2(start), format2(end)]; // 更新
+    },
+    // 选择时间类型
+    updateDateType() {
+      // this.dateType = this.radio;
+      console.log(this.dateType);
+      (this.timeDate = []), //小时值
+        (this.dayDate = []), //日值
+        (this.monthDate = []), //月值
+        (this.startYear = ""), //开始年份
+        (this.endYear = ""); //结束年份
+    },
+    // 选中日期事件
+    dateChange() {
+      // console.log("打印时间", this.timeform.time1);
+      if (!this.dayDate) {
+        this.$nextTick(() => {
+          this.dayDate = [];
+        });
+      }
+      if (!this.monthDate) {
+        this.$nextTick(() => {
+          this.monthDate = [];
+        });
+      }
+    },
+    // 查询
+    findData() {
+      this.pageParm.page = 1;
+      console.log("this.dateType", this.dateType);
+      console.log("this.timeDate", this.timeDate);
+      switch (this.dateType) {
+        case "hour":
+          if (!this.timeDate) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            this.getTableData();
+            this.getChartsData();
+          }
+          break;
+        case "day":
+          if (this.dayDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            this.getTableData();
+            this.getChartsData();
+          }
+          break;
+        case "month":
+          if (this.monthDate.length === 0) {
+            this.showMessage("请选择时间！", "warning");
+          } else {
+            this.getTableData();
+            this.getChartsData();
+          }
+          break;
+        case "year":
+          if (!this.startYear || !this.endYear) {
+            this.showMessage("请选择全年份区间！", "warning");
+          } else if (this.startYear > this.endYear) {
+            this.showMessage("结束年份要大于开始年份！", "warning");
+          } else {
+            this.getTableData();
+            this.getChartsData();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    // 显示消息的函数
+    showMessage(message, type) {
+      this.$message({
+        message: message,
+        type: type,
+      });
+    },
+    //请求表格数据
+    getTableData() {
+      if (this.dateType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.dateType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.dateType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.dateType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      let data = {
+        timeType: this.dateType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        pageNum: this.pageParm.page,
+        pageSize: this.pageParm.pageSize,
+        searchParams: this.selectElect,
+        systemType: "7",
+      };
+      console.log("查询数据参数", data);
+      this.listLoading = true;
+      deviceAnalyze(data).then((res) => {
+        console.log("查询返回", res);
+        if (res.code == 200 && res.data.length > 0) {
+          // 格式化 data 填充 this.tableData
+          this.tableData = res.data[1].timeStr.map((date, index) => {
+            const rowData = { date };
+            res.data[2].dataList.forEach((data, dataIndex) => {
+              rowData[`data${dataIndex + 1}`] = data.value[index];
+            });
+            return rowData;
+          });
+          console.log("tableData", this.tableData);
+          console.log("res.data[2].dataList", res.data[2].dataList);
+          console.log("this.electTypes", this.electTypes);
+          // 格式化 data 填充 header
+          this.headers = [
+            { key: "date", label: "时间" },
+            ...res.data[2].dataList.map((data, index) => {
+              const matched = this.electTypes.find(
+                (item) => item.mtNum === data.name
+              );
+              const label = matched ? matched.otherName : "";
+              return {
+                key: `data${index + 1}`,
+                label: label,
+              };
+            }),
+          ];
+          this.pageParm.total = res.data.totalPages;
+          console.log("header", this.headers);
+        } else {
+          this.tableData = [];
+          this.headers = [];
+        }
+      });
+      // Just to simulate the time of the request
+      setTimeout(() => {
+        this.listLoading = false;
+      }, 1.0 * 1000);
+    },
+    //请求图表数据
+    getChartsData() {
+      console.log("???????????????");
+      debugger;
+      this.timeData = [];
+      this.dataArr = [];
+      if (this.dateType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.dateType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.dateType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.dateType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      let data = {
+        timeType: this.dateType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        pageNum: 0,
+        pageSize: 10,
+        searchParams: this.selectElect,
+        systemType: "7",
+      };
+      console.log("查询数据参数", data);
+      deviceAnalyze(data).then((res) => {
+        console.log("查询返回", res);
+        if (res.code == 200 && res.data.length > 0) {
+          this.timeData = res.data[1].timeStr;
+          // 具体看看怎么拿到x组数据   得到一个数组，对象{name：需要匹配select数据源,data}
+          console.log("res.data[2].dataList", res.data[2].dataList);
+          this.dataArr = [];
+          this.dataArr = res.data[2].dataList;
+          this.dataArr.forEach((obj) => {
+            const match = this.electTypes.find((s) => s.mtNum === obj.name);
+            if (match) {
+              obj.name = match.otherName;
+            }
+            obj.type = "line";
+            obj.smooth = true;
+            (obj.sampling = "lttb"),
+              (obj.showSymbol = false),
+              (obj.data = obj.value);
+            delete obj.value;
+          });
+          console.log("图表数据", this.dataArr);
+          this.option1.series = this.dataArr;
+          this.option1.xAxis.data = this.timeData;
+          this.option1.yAxis.name = "kwh";
+          this.option1.yAxis.nameTextStyle = {
+            color: "rgba(255, 255, 255, 1)",
+            fontSize: 12,
+          };
+          // 清空图表
+          this.chartInstance1.clear();
+          this.screenAdapter();
+          this.chartInstance1.setOption(this.option1);
+        } else {
+          this.timeData = [];
+          this.curValue2 = [];
+          this.lastValue2 = [];
+          this.mom2 = [];
+          this.option1.series = [];
+          this.option1.xAxis.data = [];
+          // 清空图表
+          this.chartInstance1.clear();
+          this.screenAdapter();
+          this.chartInstance1.setOption(this.option1);
+        }
+      });
+    },
+    initChart1() {
+      this.chartInstance1 = echarts.init(this.$refs.details_ref);
+      this.option1 = {
+        tooltip: {
+          trigger: "axis",
+          // 以下为鼠标hover时的背景颜色
+          showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
+          axisPointer: {
+            type: "shadow",
+            shadowStyle: {
+              color: "rgba(30, 69, 113, 0.15)",
+              width: "",
+            },
+          },
+          valueFormatter: function (value) {
+            return value + " " + "kwh";
+          },
+        },
+        legend: {
+          show: true,
+          top: "0%",
+          textStyle: {
+            fontSize: 14, // 设置图例文字的大小为 14 像素
+            color: "#ffffff",
+          },
+        },
+
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "2%",
+          bottom: "25%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          //设置为true代表离零刻度间隔一段距离
+          boundaryGap: true,
+          // 修饰刻度标签的颜色即x坐标数据
+          axisLabel: {
+            // interval: 0, //强制显示所有x轴数据
+            // rotate: 30, //x轴坐标字体倾斜30度
+            color: "rgba(255, 255, 255, 1)",
+          },
+          axisTick: {
+            show: false, // 不显示坐标轴刻度线
+          },
+          // x坐标轴的颜色
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#e2e6f0",
+            },
+          },
+        },
+        yAxis: {
+          min: 0,
+          miniInterval: 5,
+          type: "value",
+          // 修饰刻度标签的颜色即y坐标数据
+          axisLabel: {
+            color: "rgba(255, 255, 255, 1)",
+          },
+          // 显示y坐标轴
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#365576", // 设置 y 轴线的颜色
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#1a3d62", // 设置分割线的颜色
+              type: "dashed", // 设置分割线为虚线
+            },
+          },
+        },
+        // 拖拽X轴
+        dataZoom: [
+          {
+            type: "slider", //inside鼠标缩放
+            show: true,
+            height: 15, // 设置控制区域的高度为 20 像素
+            // fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色
+            // backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色
+            start: 0,
+            end: 100,
+            xAxisIndex: [0],
+            handleSize: "120%", // 设置滑块大小为默认大小的 120%
+            textStyle: {
+              fontSize: 12, // 设置字体大小为 12px
+            },
+          },
+        ],
+        series: [],
+      };
+      //把配置项给实例对象
+      this.chartInstance1.setOption(this.option1, true);
+    },
+    // 折线图自适应
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = (this.$refs.details_ref.offsetWidth / 100) * 1.8;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {
+        //比如fontSize
+        textStyle: {
+          fontSize: titleFontSize,
+        },
+      };
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance1.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance1.resize();
+    },
+    // 导出
+    exportData() {
+      if (this.dateType == "hour") {
+        this.startTime = format2(this.timeDate[0]);
+        this.endTime = format2(this.timeDate[1]);
+      } else if (this.dateType == "day") {
+        this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : "";
+        this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : "";
+      } else if (this.dateType == "month") {
+        this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : "";
+        this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : "";
+      } else if (this.dateType == "year") {
+        (this.startTime = this.startYear), (this.endTime = this.endYear);
+      }
+      let data = {
+        timeType: this.dateType,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        pageNum: 0,
+        pageSize: 10,
+        searchParams: this.selectElect,
+        systemType: "7",
+      };
+      console.log("导出数据参数", data);
+      deviceAnalyzeExport(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('导出失败!');
+      // })
+    },
+    // 打印
+    leadingPrint() {
+      this.dialogPrintVisible = true;
+      console.log("头部数据", this.headers);
+      console.log("表格数据", this.tableData);
+    },
+    // 打印
+    surePrint() {
+      const printHTML = document.querySelector("#report").innerHTML;
+      // 将打印的区域赋值，进行打印
+      window.document.body.innerHTML = printHTML;
+      window.print(); // 调用window打印方法
+      window.location.reload(); // 打印完成后重新加载页面
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.condition {
+  display: flex;
+  flex-direction: row;
+  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;
+    }
+  }
+}
+.main-content {
+  min-height: 6.6rem;
+}
+.charts-table {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.elSelectDiv {
+  margin-left: 15px;
+  width: 250px;
+}
+.details_ref {
+  width: 16.5rem;
+  height: 3.55rem;
+  margin-bottom: 0.39rem;
+  margin-left: -0.3rem;
+}
+// 媒体查询，适配大于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;
+      }
+    }
+  }
+  .elSelectDiv {
+    margin-left: 0.15rem !important;
+    width: 2.5rem !important;
+  }
+}
+</style>
diff --git a/src/views/heatRecoverySys/thermalAnalysis/index.vue b/src/views/heatRecoverySys/thermalAnalysis/index.vue
index ff46463..e1ddb29 100644
--- a/src/views/heatRecoverySys/thermalAnalysis/index.vue
+++ b/src/views/heatRecoverySys/thermalAnalysis/index.vue
@@ -1,3 +1,79 @@
 <template>
-    <div>222</div>
-</template>
\ No newline at end of file
+  <div class="paramsDetails">
+    <div class="details-content">
+      <div class="details-header">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="设备热量" name="second">
+            <equipment v-if="activeName === 'second'"></equipment>
+          </el-tab-pane>
+          <el-tab-pane label="设备组热量" name="three">
+            <device-energy v-if="activeName === 'three'"></device-energy>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import equipment from "./components/equipment.vue";
+import DeviceEnergy from "./components/deviceEnergy.vue";
+export default {
+  components: { equipment, DeviceEnergy },
+  data() {
+    return {
+      activeName: "second", //设备热量
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.paramsDetails {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+
+  .details-content {
+    width: 100%;
+    // height: 0.42rem;
+    position: relative;
+  }
+}
+</style>
+<style scoped>
+.none-div {
+  padding-top: 0.31rem;
+}
+
+.none-div >>> .el-tree {
+  background: transparent;
+  color: #789d9f;
+}
+
+.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>