emsfront/src/views/ems/dzjk/tjbb/glqx/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"
        @reset="resetTime"
        @updateDate="updateDate"
      />
    </div>
    <div class="card-main" v-loading="loading">
      <div id="glqxEchart" 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 { getPcsNameList, getPowerData } from "@/api/ems/dzjk";
import { formatDate } from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
  name: "DzjkTjbbGlqx",
  components: { DateRangeSelect },
  mixins: [resize, getQuerySiteId],
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dateRange: [],
      loading: false,
      dateRangeInit: true,
    };
  },
  methods: {
    // 更新时间范围 重置图表
    updateDate(data) {
      this.dateRange = data || [];
      this.getData();
    },
    resetTime() {
      this.dateRangeInit = true;
    },
    getData() {
      const { siteId } = this;
      let [start = "", end = ""] = this.dateRange || [];
      //接口调用完成之后 设置图表、结束loading
      this.loading = true;
      if (this.dateRangeInit) {
        start = "";
        end = "";
        this.dateRangeInit = false;
      }
      getPowerData({
        siteId,
        startDate: formatDate(start),
        endDate: formatDate(end),
      })
        .then((response) => {
          this.setOption(response?.data || []);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    setOption(data) {
      const source = [["日期", "电网功率", "负载功率", "储能功率", "光伏功率"]];
      data.forEach((item) => {
        source.push([
          item.statisDate,
          item.gridPower,
          item.loadPower,
          item.storagePower,
          item.pvPower,
        ]);
      });
      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: [
            {
              type: "line",
            },
            {
              type: "line",
            },
            {
              type: "line",
            },
            {
              type: "line",
            },
          ],
        },
        true
      );
    },
    initChart() {
      if (this.chart) return;
      this.chart = echarts.init(document.querySelector("#glqxEchart"));
    },
    init() {
      this.$nextTick(() => {
        this.dateRangeInit = true;
        this.initChart();
        this.$refs.dateRangeSelect.init();
      });
    },
  },

  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
};
</script>