emsfront/src/views/ems/dzjk/tjbb/dcdqx/index.vue

<template>
  <el-card
      shadow="always"
      class="common-card-container time-range-card"
      style="margin-top: 20px"
  >
    <div slot="header" class="time-range-header">
      <span class="card-title"> </span>
      <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
    </div>
    <div class="card-main" v-loading="loading">
      <el-button-group class="ems-btns-group">
        <el-button
            v-for="(item, index) in btnList"
            :key="index + 'dcdqxBtns'"
            size="mini"
            :class="{ activeBtn: activeBtn === item.id }"
            @click="changeDataType(item.id)"
        >{{ item.name }}
        </el-button
        >
      </el-button-group>
      <div id="dcdEchart" style="height: 310px"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getStackData} from "@/api/ems/dzjk";
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";

export default {
  name: "DzjkTjbbDcdqx",
  components: {DateRangeSelect},
  mixins: [resize, getQuerySiteId],
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dateRange: [],
      loading: false,
      activeBtn: "1",
      btnList: [
        {name: "堆平均维度", id: "1", attr: ["temp"], source: ["有功功率"]},
        {name: "堆电压", id: "2", attr: ["voltage"], source: ["堆电压"]},
        {name: "堆电流", id: "3", attr: ["current"], source: ["堆电流"]},
        {name: "堆soc", id: "4", attr: ["soc"], source: ["堆soc"]},
      ],
    };
  },
  methods: {
    changeDataType(id) {
      if (id !== this.activeBtn) {
        this.activeBtn = id;
        this.getData();
      }
    },
    // 更新时间范围 重置图表
    updateDate(data) {
      this.dateRange = data || [];
      this.getData();
    },
    getData() {
      const {siteId, activeBtn} = this;
      const [start = "", end = ""] = this.dateRange || [];
      //接口调用完成之后 设置图表、结束loading
      this.loading = true;
      getStackData({
        siteId,
        startTime: formatDate(start),
        endTime: formatDate(end),
        dataType: activeBtn,
      })
          .then((response) => {
            this.setOption(response?.data || []);
          })
          .finally(() => {
            this.loading = false;
          });
    },
    compareDate(date1, date2) {
      console.log("比较时间", date1, date2);
      // 年2025-09/天2025-09-15/时2025-09-15/10:00
      if (date1.indexOf(":") > -1 && date2.indexOf(":") > -1) {
        return parseInt(date1) - parseInt(date2);
      }
      const [date1_Y = "", date1_M = "", date1_D = ""] = date1.split("-"); //根据空格区分[年月日,小时]
      const [date2_Y = "", date2_M = "", date2_D = ""] = date2.split("-"); //根据空格区分[年月日,小时]
      return (
          (date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) ||
          (date1_Y === date2_Y && date1_M - date2_M) ||
          date1_Y - date2_Y
      );
    },
    setOption(data) {
      const ele = this.btnList.find((item) => {
        return item.id === this.activeBtn;
      });
      const sourceBase = JSON.parse(JSON.stringify(ele.source));
      // sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
      const source = [];
      const sourceTop = ["日期"];
      let map = {},
          mapArr = [];
      // 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
      data.forEach((item) => {
        item.dataList.forEach((inner) => {
          // 日期格式
          // 年2025-09/天2025-09-15/时2025-09-15/10:00
          // 所有数据的日期格式一致
          if (!map[inner.statisDate]) {
            map[inner.statisDate] = [];
            mapArr.push(inner.statisDate);
          }
        });
      });
      data.forEach((item, itemIndex) => {
        const dataTimeList = item.dataList.map((i) => i.statisDate);
        const noDataTime = mapArr.filter((i) => !dataTimeList.includes(i));
        sourceBase.forEach((outer, outerIndex) => {
          sourceTop.push(`${item.deviceId}-${outer}`);
          noDataTime.forEach((i) => map[i].push(""));
          item.dataList.forEach((inner, innerIndex) => {
            map[inner.statisDate].push(inner[ele.attr[outerIndex]]);
          });
        });
      });
      mapArr = mapArr.sort((a, b) => this.compareDate(a, b));
      mapArr.forEach((item) => {
        source.push([item, ...map[item]]);
      });
      source.unshift(sourceTop);
      this.chart.setOption(
          {
            grid: {
              containLabel: true,
            },
            legend: {
              left: "center",
              top: "10",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            textStyle: {
              color: "#333333",
            },
            xAxis: {
              type: "category",
            },
            yAxis: {
              type: "value",
            },
            dataZoom: [
              {
                type: "inside",
                start: 0,
                end: 100,
              },
              {
                start: 0,
                end: 100,
              },
            ],
            dataset: {source},
            series: source[0].slice(1).map((item) => {
              return {
                type: "line",
                smooth: true,
                connectNulls: true,
                areaStyle: {
                  opacity: 0.7,
                },
              };
            }),
          },
          true
      );
    },
    initChart() {
      this.chart = echarts.init(document.querySelector("#dcdEchart"));
    },
    init() {
      this.$nextTick(() => {
        this.initChart();
        this.$refs.dateRangeSelect.init(true);
      });
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
};
</script>