emsfront/src/views/ems/dzjk/sbjk/PointChart.vue

<!--电位展示图表-->
<template>
  <el-dialog
    :visible.sync="show"
    :title="pointName"
    :close-on-click-modal="false"
    show-close
    destroy-on-close
    lock-scroll
    append-to-body
    width="1000px"
    class="ems-dialog"
    :before-close="handleColsed"
  >
    <el-card
      shadow="always"
      class="common-card-container common-card-container-body-no-padding time-range-card"
    >
      <div slot="header" class="time-range-header">
        <el-radio-group class="card-title" v-model="dataUnit">
          <el-radio :label="1">分钟</el-radio>
          <el-radio :label="2">小时</el-radio>
          <el-radio :label="3">天</el-radio>
        </el-radio-group>
        <date-time-select
          ref="dateTimeSelect"
          :data-unit="dataUnit"
          @initDate="(e) => (dataRange = e || [])"
          @updateDate="updateDate"
        />
      </div>
      <div style="height: 350px" id="searchChart"></div>
    </el-card>
  </el-dialog>
</template>
<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
import { getPointValueList } from "@/api/ems/search";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
  components: { DateRangeSelect, DateTimeSelect },
  mixins: [resize],
  props: {
    siteId: {
      type: String,
      required: true,
    },
  },
  computed: {
    isDtdc() {
      return this.categoryName === "单体电池";
    },
  },
  watch: {
    show(val) {
      if (!val) {
        this.pointName = "";
        this.categoryName = "";
        this.deviceId = "";
        this.dataUnit = 1;
        this.child = "";
        if (!this.chart) {
          return;
        }
        this.hideLoading();
        this.chart.dispose();
        this.chart = null;
      }
    },
    dataUnit: {
      handler(newVal, oldVal) {
        if (!this.show) return;
        console.log("wacth到了dataUnit的变化", newVal, oldVal);
        this.$nextTick(() => {
          this.$refs.dateTimeSelect.init();
          this.getDate();
        });
      },
    },
  },
  data() {
    return {
      show: false,
      chart: null,
      dataUnit: 1,
      dataRange: [],
      child: "", //单体电池需要数据
      pointName: "",
      categoryName: "",
      deviceId: "",
    };
  },
  methods: {
    showChart({ pointName, categoryName, deviceId, child = "" }) {
      //初始化数据
      this.pointName = pointName;
      this.categoryName = categoryName;
      this.deviceId = deviceId;
      child && (this.child = child);
      this.show = true;
      this.$nextTick(() => {
        this.$refs.dateTimeSelect.init();
        this.initChart();
        this.getDate();
      });
    },
    initChart() {
      this.chart = echarts.init(document.querySelector("#searchChart"));
    },
    showLoading() {
      this.chart && this.chart.showLoading();
    },
    hideLoading() {
      this.chart && this.chart.hideLoading();
    },
    getDate() {
      this.showLoading();
      const {
        siteId,
        dataUnit,
        dataRange: [start = "", end = ""],
        child,
        deviceId,
        categoryName,
        pointName,
      } = this;
      let siteDeviceMap = {};
      child && (siteDeviceMap[siteId] = child);
      let startDate, endDate;
      if (start && dataUnit === 3) {
        // startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
        startDate = start + " 00:00:00";
      } else {
        startDate = start;
      }
      if (end && dataUnit === 3) {
        // endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
        endDate = end + " 00:00:00";
      } else {
        endDate = end;
      }

      getPointValueList({
        siteIds: [siteId],
        deviceId,
        dataUnit,
        categoryName,
        pointName,
        startDate,
        endDate,
        siteDeviceMap,
      })
        .then((response) => {
          this.setOption(response?.data || []);
        })
        .finally(() => {
          this.hideLoading();
        });
    },
    setOption(data) {
      if (!this.chart) return;
      this.chart.clear();
      console.log("返回的数据", data);
      let dataset = [];
      if (data.length > 0) {
        data.forEach((item, index) => {
          item.deviceList.forEach((inner) => {
            dataset.push({
              name: `${
                this.isDtdc
                  ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
                  : ""
              }${this.isDtdc ? inner.deviceId : this.pointName}`,
              type: "line",
              xdata: [],
              data: [],
            });
            const length = dataset.length;
            inner.pointValueList.forEach((value) => {
              dataset[length - 1].xdata.push(value.valueDate);
              dataset[length - 1].data.push(value.pointValue);
            });
          });
        });
      } else {
        this.$message.warning("暂无数据");
      }
      console.log("图表数据", dataset);
      this.chart.setOption({
        legend: {
          // left: 'center',
          // top: '10',
        },
        grid: {
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        textStyle: {
          color: "#333333",
        },
        xAxis: { type: "category", data: dataset?.[0]?.xdata || [] },
        yAxis: {
          type: "value",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        series: dataset,
      });
    },
    updateDate(val) {
      this.dataRange = val || [];
      this.getDate();
    },
    handleColsed(done) {
      if (!this.chart) {
        return done();
      }
      this.chart.dispose();
      this.chart = null;
      done();
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep {
  .card-title .el-radio {
    line-height: 40px;
  }
}
</style>