<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>
            <div class="condition-btn">
              <div
                class="legend-li"
                v-for="(item, index) in timeData2"
                :key="index + 1"
                @click="handleEnter(item.title, index)"
                :class="{ timeStyle2: timeIndex2 == index }"
              >
                {{ item.title }}
              </div>
            </div>
            <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: 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" style="margin-left: 0.24rem">
              <el-button type="success" @click="findData">查询</el-button>
            </div>
            <!-- <div class="warning-bnt" style="margin-left: 0.24rem">
              <el-button type="warning" @click="exportData">导出</el-button>
            </div> -->
          </div>
        </div>
        <div class="charts-table" v-loading="listLoading">
          <div class="charts-title">
            {{ this.titleDate }} {{ this.checkList }}
          </div>
          <div class="details_ref" ref="details_ref"></div>
          <div class="analysis-table" style="margin-bottom: 0.2rem">
            <table>
              <thead>
                <tr>
                  <th v-if="dateList.length > 0">类型</th>
                  <th v-for="(item, index) in dateList" :key="index + 2">
                    {{ item }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td v-if="curValue2.length > 0">本期{{ this.unitValue }}</td>
                  <td v-for="(item, index) in curValue2" :key="index + 3">
                    {{ item }}
                  </td>
                </tr>
                <tr>
                  <td v-if="lastValue2.length > 0">同期{{ this.unitValue }}</td>
                  <td v-for="(item, index) in lastValue2" :key="index + 4">
                    {{ item }}
                  </td>
                </tr>
                <tr>
                  <td v-if="yoy2.length > 0">同比(%)</td>
                  <td v-for="(item, index) in yoy2" :key="index + 5">
                    {{ item }}
                  </td>
                </tr>
                <tr>
                  <td v-if="mom2.length > 0">环比(%)</td>
                  <td v-for="(item, index) in mom2" :key="index + 5">
                    {{ item }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { format2 } from "@/utils/datetime";
import * as echarts from "echarts";
import { yoyMomEnergy } from "@/api/centerairC/energyManage";
import { listData } from "@/api/system/dict/data";
export default {
  data() {
    return {
      listLoading: false,
      dateType: "hour", //默认选择小时
      timeDate: [], //小时值
      dayDate: [], //日值
      monthDate: [], //月值
      startYear: "", //开始年份
      endYear: "", //结束年份
      startTime: "", //开始日期
      endTime: "", //结束日期
      timeData2: [{ title: "制冷量" }, { title: "用电量" }, { title: "EER" }],
      timeIndex2: 0, //制冷量
      paramType: "cloud", //传给后端的类型
      // 标题日期
      titleDate: "",
      checkList: "制冷量", //默认选择制冷量
      // 图例数据
      dateList: [],
      curValue: [],
      lastValue: [],
      yoy: [],
      mom: [],
      //表格数据
      curValue2: [],
      lastValue2: [],
      yoy2: [],
      mom2: [],
      unitValue: "", //单位
      exportArr: [],
      systemType: "", //系统类型
      systemTypes: [],
    };
  },
  mounted() {
    this.initializeTimeDate();
    this.initChart1();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
    // this.getDictList();
    this.getTableData();
  },
  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();
      });
    },
    // 初始化时间
    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 = ""); //结束年份
    },
    handleEnter(title, index) {
      console.log("打印", title, index);
      this.timeIndex2 = index;
      if (index == "0") {
        this.paramType = "cloud";
      } else if (index == "1") {
        this.paramType = "meter";
      } else if (index == "2") {
        this.paramType = "cop";
      }
    },
    // 选中日期事件
    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", 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.checkList = this.timeData2[this.timeIndex2].title;
            this.getTableData();
          }
          break;
        case "day":
          if (this.dayDate.length === 0) {
            this.showMessage("请选择时间！", "warning");
          } else {
            this.titleDate = this.dayDate[0] + "至" + this.dayDate[1];
            this.checkList = this.timeData2[this.timeIndex2].title;
            this.getTableData();
          }
          break;
        case "month":
          if (this.monthDate.length === 0) {
            this.showMessage("请选择时间！", "warning");
          } else {
            this.titleDate = this.monthDate[0] + "至" + this.monthDate[1];
            this.checkList = this.timeData2[this.timeIndex2].title;
            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.checkList = this.timeData2[this.timeIndex2].title;
            this.getTableData();
          }
          break;
        default:
          break;
      }
    },
    // 显示消息的函数
    showMessage(message, type) {
      this.$message({
        message: message,
        type: type,
      });
    },
    //请求数据
    getTableData() {
      this.initChart1();
      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,
        paramType: this.paramType,
        systemType: "0",
      };
      console.log("查询数据参数", data);
      this.listLoading = true;
      yoyMomEnergy(data).then((res) => {
        console.log("查询返回", res);
        if (res.code == 200 && res.data.data !== null) {
          this.dateList = res.data.times;
          // 具体看看怎么拿到三组数据
          this.curValue2 = [];
          this.lastValue2 = [];
          this.yoy = [];
          this.mom = [];
          this.curValue2 = res.data.data[2].curValue;
          this.lastValue2 = res.data.data[0].lastValue;
          this.yoy2 = res.data.data[1].yoy;
          this.mom2 = res.data.data[3].mom;
          // console.log("后端返回的时间", this.dateList)
          // console.log("后端返回的本期值", this.curValue2)
          // console.log("后端返回的上期值", this.lastValue2)
          // console.log("后端返回的同比值", this.yoy2)
          // console.log("后端返回的环比值", this.mom2)
          // 折线图的上期值和同比值需要单独处理
          this.curValue = this.curValue2.map(function (value) {
            if (value === null) {
              return 0;
            } else if (typeof value === "string") {
              return parseFloat(value);
            }
            return value;
          });
          this.lastValue = this.lastValue2.map(function (value) {
            if (value === null) {
              return 0;
            } else if (typeof value === "string") {
              return parseFloat(value);
            }
            return value;
          });
          this.yoy = this.yoy2.map(function (value) {
            if (value === "同期无数据") {
              return 0;
            } else if (typeof value === "string") {
              if (value.endsWith("%")) {
                return parseFloat(value);
              } else {
                return parseFloat(value);
              }
            }
            return value;
          });
          this.mom = this.mom2.map(function (value) {
            if (value === "上期无数据") {
              return 0;
            } else if (typeof value === "string") {
              if (value.endsWith("%")) {
                return parseFloat(value);
              } else {
                return parseFloat(value);
              }
            }
            return value;
          });
          // console.log("处理过的本期值", this.curValue)
          // console.log("处理过的上期值", this.lastValue)
          // console.log("处理过的同比值", this.yoy)
          // 计算双y轴最大最小值，
          // var Min1 = Math.floor(Math.min(...this.curValue, ...this.lastValue)),
          var Min1 = 0,
            Min2 = Math.floor(Math.min(...this.yoy, ...this.mom)),
            Max1 = Math.ceil(Math.max(...this.curValue, ...this.lastValue)),
            Max2 = Math.ceil(Math.max(...this.yoy, ...this.mom));
          // console.log("Min1", Min1);
          // console.log("Min2", Min2);
          // console.log("Max1", Max1);
          // console.log("Max2", Max2);
          // 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变
          if (this.timeIndex2 == 0) {
            this.unitValue = "(kwr)";
          } else if (this.timeIndex2 == 1) {
            this.unitValue = "(kwh)";
          } else {
            this.unitValue = " ";
          }
          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.curValue,
              },
              {
                name: "同期",
                data: this.lastValue,
              },
              {
                name: "同比",
                data: this.yoy,
              },
              {
                name: "环比",
                data: this.mom,
              },
            ],
          };
          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
          this.chartInstance1.setOption(adapterOption);
          //手动的调用图标对象的resize才能产生效果
          this.chartInstance1.resize();
        } else {
          // console.log("后端返回的时间", this.dateList)
          // console.log("后端返回的本期值", this.curValue2)
          // console.log("后端返回的上期值", this.lastValue2)
          // console.log("后端返回的同比值", this.yoy2)
          this.dateList = [];
          (this.curValue2 = []), (this.lastValue2 = []), (this.yoy2 = []);
          this.mom2 = [];
          var Min1 = 0,
            Min2 = 0,
            Max1 = 0,
            Max2 = 0;
          const adapterOption = {
            xAxis: {
              data: [],
            },
            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: [],
              },
              {
                name: "同期",
                data: [],
              },
              {
                name: "同比",
                data: [],
              },
              {
                name: "环比",
                data: [],
              },
            ],
          };
          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
          this.chartInstance1.setOption(adapterOption);
          //手动的调用图标对象的resize才能产生效果
          this.chartInstance1.resize();
        }
      });
      // Just to simulate the time of the request
      setTimeout(() => {
        this.listLoading = false;
      }, 1.0 * 1000);
    },
    initChart1() {
      var paramType = this.paramType;
      this.chartInstance1 = echarts.init(this.$refs.details_ref);
      this.option1 = {
        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 === "同期") &&
                paramType === "cloud"
              ) {
                res +=
                  marker +
                  seriesName +
                  ":" +
                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                  value +
                  " " +
                  "kwr" +
                  "</span><br>";
              } else if (
                (seriesName === "本期" || seriesName === "同期") &&
                paramType === "meter"
              ) {
                res +=
                  marker +
                  seriesName +
                  ":" +
                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                  value +
                  " " +
                  "kwh" +
                  "</span><br>";
              } else if (
                (seriesName === "本期" || seriesName === "同期") &&
                paramType === "cop"
              ) {
                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: ["本期", "同期", "同比", "环比"],
          textStyle: {
            color: "#ffff",
            fontSize: 16, //这里改字体大小
          },
          left: "41%",
          top: "0%",
          bottom: "10%",
          //图例距离饼图的距离
          itemGap: 50,
          itemWidth: 16,
          itemHeight: 8,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "0%",
          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: [
          {
            type: "value",
            name: "本期、同期", // 第一个 y 轴的单位描述
            nameTextStyle: {
              fontSize: 15, // 调整字体大小
              color: "#fff", // 调整字体颜色
              // 其他样式属性...
            },
            // 修饰刻度标签的颜色即y坐标数据
            axisLabel: {
              color: "rgba(255, 255, 255, 1)",
            },
            // 显示y坐标轴
            axisLine: {
              show: true,
              lineStyle: {
                color: "#365576", // 设置 y 轴线的颜色
              },
            },
            splitLine: {
              lineStyle: {
                color: "#1a3d62", // 设置分割线的颜色
                type: "dashed", // 设置分割线为虚线
              },
            },
          },
          {
            type: "value",
            name: "同比、环比", // 第二个 y 轴的单位描述
            nameTextStyle: {
              fontSize: 15, // 调整字体大小
              color: "#fff", // 调整字体颜色
              // 其他样式属性...
            },
            // 修饰刻度标签的颜色即y坐标数据
            axisLabel: {
              color: "rgba(255, 255, 255, 1)",
              formatter: "{value} %",
            },
            // 显示y坐标轴
            axisLine: {
              show: true,
              lineStyle: {
                color: "#365576", // 设置 y 轴线的颜色
              },
            },
            splitLine: {
              lineStyle: {
                color: "#1a3d62", // 设置分割线的颜色
                type: "dashed", // 设置分割线为虚线
              },
            },
            // min: Min2,
            // max: Max2,
            // splitNumber: 10,
            // interval: (Max2 - Min2) / 10,
          },
        ],
        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", //折线的颜色
              },
            },
          },
          {
            name: "环比",
            type: "line",
            smooth: false,
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            yAxisIndex: 1,
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            //折线颜色
            itemStyle: {
              color: "#f0ad01", //折线点的颜色
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#f0ad01", // 起始颜色
                  },
                  {
                    offset: 1,
                    color: "#f0ad01", // 结束颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              lineStyle: {
                color: "#f0ad01", //折线的颜色
              },
            },
          },
        ],
      };
      //把配置项给实例对象
      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() {
      this.exportArr = [];
      for (var i = 0; i < this.dateList.length; i++) {
        var newData = {
          dateList: this.dateList[i],
          curValue2: this.curValue2[i],
          lastValue2: this.lastValue2[i],
          yoy2: this.yoy2[i],
          mom2: this.mom2[i],
        };
        this.exportArr.push(newData);
      }

      //   // console.log("导出的数据", this.exportArr);
      //   import("@/assets/excel/Export2Excel").then((excel) => {
      //     let filterVal = ["dateList", "curValue2", "lastValue2", "yoy2", "mom2"]; // 导出的excel表头字段名，需要导出表格字段名
      //     let tHeader = ["时间", "本期", "同期", "同比", "环比"]; // 导出的excel表头名信息
      //     const data = this.formatJson(filterVal, this.exportArr);
      //     const autoWidth = true;
      //     excel.export_json_to_excel({
      //       header: tHeader, //表头
      //       data, //数据
      //       filename: `${this.checkList}同比环比分析报表`, //名称
      //       autoWidth: true, //宽度自适应
      //     });
      //     this.$message.success("导出成功!");
      //   });
    },
    //格式转换,不需要改动
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "installDate") {
            return format(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.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;
  width: 100%;
  text-align: center;
}
.main-content {
  min-height: 6.6rem;
}

.analysis-table table thead th {
  min-width: 1.6rem;
}

.details_ref {
  width: 16.5rem;
  height: 3.55rem;
  margin-bottom: 0.39rem;
  margin-left: -0.3rem;
}

.condition-btn {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 0.24rem;
  background-color: #324868;

  .legend-li {
    text-align: center;
    line-height: 100%;
    padding: 7px 13px;
    white-space: nowrap;
    font-size: 16px;
    color: #9eb5cf;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .timeStyle2 {
    color: #ffffff !important;
    background-color: #2886e3;
    border: 1px solid #2886e3;
    border-radius: 4px;
  }
}

// 媒体查询，适配大于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;
      }
    }
  }
  .condition-btn {
    border-radius: 0.04rem !important;

    .legend-li {
      padding: 0.07rem 0.13rem !important;
      font-size: 0.16rem !important;
    }

    .timeStyle2 {
      border-radius: 0.04rem !important;
    }
  }
}
</style>
