emsfront/src/views/ems/dzjk/tjbb/pcsqx/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 + 'flqxcBtns'"
          size="mini"
          :class="{ activeBtn: activeBtn === item.id }"
          @click="changeDataType(item.id)"
          >{{ item.name }}</el-button
        >
      </el-button-group>
      <div id="pcsEchart" 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 { getPCSData, getPcsNameList } from "@/api/ems/dzjk";
import { formatDate } from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
  name: "DzjkTjbbPcsqx",
  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: ["activePower"],
          source: ["有功功率"],
        },
        {
          name: "无功功率",
          id: "2",
          attr: ["reactivePower"],
          source: ["无功功率"],
        },
        {
          name: "三相电流",
          id: "3",
          attr: ["uCurrent", "vCurrent", "wCurrent"],
          source: ["u电流", "v电流", "w电流"],
          type: "bar",
        },
      ],
    };
  },
  methods: {
    changeDataType(id) {
      if (id !== this.activeBtn) {
        console.log("点击了不同的菜单，更新数据");
        this.activeBtn = id;
        this.getData();
      }
    },
    // 更新时间范围 重置图表
    updateDate(data) {
      this.dateRange = data || [];
      this.getData();
    },
    getData() {
      const { siteId, activeBtn } = this;
      const [start = "", end = ""] = this.dateRange || [];
      this.loading = true;
      //接口调用完成之后 设置图表、结束loading
      getPCSData({
        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",
            bottom: "15",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          textStyle: {
            color: "#333333",
          },
          xAxis: {
            type: "category",
          },
          yAxis: {
            type: "value",
          },
          dataset: { source },
          series: source[0].slice(1).map((item) => {
            return {
              type: "line",
            };
          }),
        },
        true
      );
    },
    initChart() {
      this.chart = echarts.init(document.querySelector("#pcsEchart"));
    },
    init() {
      this.$nextTick(() => {
        this.initChart();
        this.$refs.dateRangeSelect.init();
      });
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
};
</script>