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"
    :before-close="handleColsed"
  >
    <div>
      <el-form size="medium" label-width="100px" inline>
        <el-form-item label="时间选择">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            end-placeholder="结束时间"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <div id="lineChart" style="height: 360px; width: 100%"></div>
    </div>
  </el-dialog>
</template>

<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { getSingleBatteryData } from "@/api/ems/dzjk";
import { formatDate } from "@/filters/ems";
export default {
  mixins: [resize],
  data() {
    return {
      loading: false,
      siteId: "",
      deviceId: "",
      clusterDeviceId: "",
      dataType: "", //展示的数据类型 空值展示所有数据
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dialogTableVisible: false,
      dateRange: [],
      defaultDateRange: [],
    };
  },
  methods: {
    resetDefaultDateRange() {
      const now = new Date(),
        formatNow = formatDate(now);
      const weekAgo = formatDate(
        new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
      );
      this.dateRange = [weekAgo, formatNow];
      this.defaultDateRange = [weekAgo, formatNow];
    },
    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();
        });
    },
    // 重置
    onReset() {
      this.dateRange = this.defaultDateRange;
      this.getData();
    },
    initChart({ siteId, clusterDeviceId, deviceId }, dataType) {
      this.siteId = siteId;
      this.clusterDeviceId = clusterDeviceId;
      this.deviceId = deviceId;
      this.dataType = dataType;
      this.resetDefaultDateRange();
      this.dialogTableVisible = true;
      this.$nextTick(() => {
        !this.chart &&
          (this.chart = echarts.init(document.querySelector("#lineChart")));
        this.getData();
      });
    },
    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>