emsfront/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue

<template>
  <el-dialog
    :visible.sync="dialogTableVisible"
    :close-on-click-modal="false"
    show-close
    destroy-on-close
    lock-scroll
    append-to-body
    width="700px"
    class="ems-dialog chart-detail-dialog"
    :before-close="handleColsed"
  >
    <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">
        <div id="lineChart" style="height: 310px"></div>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { getSingleBatteryData } from "@/api/ems/dzjk";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
  components: { DateRangeSelect },
  mixins: [resize],
  data() {
    return {
      loading: false,
      siteId: "",
      deviceId: "",
      clusterDeviceId: "",
      dataType: "", //展示的数据类型 空值展示所有数据
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dialogTableVisible: false,
      dateRange: [],
    };
  },
  methods: {
    // 更新时间范围 重置图表
    updateDate(data) {
      this.dateRange = data || [];
      this.getData();
    },
    handleColsed(done) {
      if (!this.chart) {
        return done();
      }
      this.chart.dispose();
      this.chart = null;
      done();
    },
    getData() {
      if (this.loading) return;
      this.loading = true;
      this.chart.showLoading();
      const {
        siteId,
        deviceId,
        clusterDeviceId,
        dateRange: [startDate = "", endDate = ""],
      } = this;
      getSingleBatteryData({
        siteId,
        deviceId,
        clusterDeviceId,
        startDate,
        endDate,
      })
        .then((response) => {
          this.setOption(response?.data || []);
        })
        .finally(() => {
          this.loading = false;
          this.chart.hideLoading();
        });
    },
    initChart({ siteId, clusterDeviceId, deviceId }, dataType) {
      this.siteId = siteId;
      this.clusterDeviceId = clusterDeviceId;
      this.deviceId = deviceId;
      this.dataType = dataType;
      this.dialogTableVisible = true;
      this.$nextTick(() => {
        !this.chart &&
          (this.chart = echarts.init(document.querySelector("#lineChart")));
        this.$refs.dateRangeSelect.init();
      });
    },
    setOption(data) {
      const obj = {
        voltage: "电压",
        temperature: "温度",
        soc: "SOC",
        soh: "SOH",
      };
      let source,
        series,
        { dataType } = this;
      if (dataType) {
        source = [["日期", obj[dataType]]];
        data.forEach((item) => {
          source.push([item.dataTimestamp, item[dataType]]);
        });
        series = [
          {
            name: obj[dataType],
            type: "line",
          },
        ];
      } else {
        source = [["日期", "电压", "温度", "SOC", "SOH"]];
        data.forEach((item) => {
          source.push([
            item.dataTimestamp,
            item.voltage,
            item.temperature,
            item.soc,
            item.soh,
          ]);
        });
        series = [
          {
            name: "电压",
            type: "line",
          },
          {
            name: "温度",
            type: "line",
          },
          {
            name: "SOC",
            type: "line",
          },
          {
            name: "SOH",
            type: "line",
          },
        ];
      }
      this.chart &&
        this.chart.setOption({
          color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"],
          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,
        });
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.chart-detail-dialog {
  ::v-deep {
    .el-dialog__body {
      padding-top: 0;
    }
  }
}
</style>