<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="coldData" label="制冷量(kwr)">
                </el-table-column>
                <el-table-column prop="electData" label="用电量(kwh)">
                </el-table-column>
                <el-table-column prop="copData" label="EER"> </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">制冷量(kwr)</th>
              <th align="center">用电量(kwh)</th>
              <th align="center">EER</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: "0",
      };
      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,
            coldData: res.data[0].cold[index].toString(), // 转换为字符串
            electData: res.data[1].meter[index].toString(), // 转换为字符串
            copData: res.data[2].cop[index].toString(), // 转换为字符串
          }));
          this.pageParm.total = res.data[5].total;
        } 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: "0",
      };
      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.coldData,
                sampling: "lttb", //降采样策略
              },
              {
                name: "用电量",
                data: this.electData,
                sampling: "lttb", //降采样策略
              },
              {
                name: "EER",
                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 === "制冷量") {
                res +=
                  marker +
                  seriesName +
                  ":" +
                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                  value +
                  " " +
                  "kwr" +
                  "</span><br>";
              } else 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: {
          data: ["制冷量", "用电量", "EER"],
          // 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: "EER",
            // 设置 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: "EER",
            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: "0",
      };
      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>
