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="handleClosed"
  >
    <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.deviceCategory === "BATTERY";
    },
  },
  watch: {
    show(val) {
      if (!val) {
        this.pointName = "";
        this.deviceCategory = "";
        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: "",
      deviceCategory: "",
      deviceId: "",
    };
  },
  methods: {
    showChart({pointName, deviceCategory, deviceId, child = ""}) {
      //初始化数据
      this.pointName = pointName;
      this.deviceCategory = deviceCategory;
      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,
        deviceCategory,
        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,
        deviceCategory,
        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);
      if (!data || data.length <= 0) {
        this.$message.warning("暂无数据");
      }
      console.log('展示的图表类型chartType', data[0].chartType)

      if (data[0].chartType === 2) {
        //   箱型图
        this.setBoxOption(data)
      } else {
        //折线图
        this.setLineOption(data)
      }
    },
    setLineOption(data) {
      let dataset = [];
      data.forEach((item, index) => {
        item.deviceList.forEach((inner) => {
          dataset.push({
            name: `${
                this.isDtdc
                    ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
                    : `${inner.deviceId}`
            }`,
            type: "line",
            markPoint: {
              symbolSize: 30,
              emphasis: {
                disabled: false//打开 鼠标高亮
              },
              data: [//最大值、最小值
                {
                  // type: 'max',
                  name: `最大值`,
                  coord: [inner.maxDate, inner.maxValue],
                  relativeTo: 'coordinate',
                  label: {
                    position: "top",
                    formatter: item.dataType === 2 ? ([
                      `最大值:${inner.maxValue}`,
                      // `平均值:${inner.avgValue}`,
                      `差值:${inner.diffValue}`,
                    ]).join('\n') : ([
                      `最大值:${inner.maxValue}`,
                      // `平均值:${inner.avgValue}`,
                    ]).join('\n'),
                  },
                },
                {
                  // type: 'min',
                  name: `最小值`,
                  coord: [inner.minDate, inner.minValue],
                  relativeTo: 'coordinate',
                  label: {
                    position: "top",
                    formatter: item.dataType === 2 ? ([
                      `最小值:${inner.minValue}`,
                      // `平均值:${inner.avgValue}`,
                      `差值:${inner.diffValue}`,
                    ]).join('\n') : ([
                      `最小值:${inner.minValue}`,
                      // `平均值:${inner.avgValue}`,
                    ]).join('\n'),
                  }
                }
              ]
            },
            xdata: [],
            data: [],
          });
          const length = dataset.length;
          inner.pointValueList.forEach((value) => {
            dataset[length - 1].xdata.push(value.valueDate);
            dataset[length - 1].data.push(value.pointValue);
          });
        });
      });
      console.log("折线图图表数据", dataset);
      this.chart.setOption({
        legend: {
          // left: 'center',
          // top: '10',
        },
        grid: {
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: 'cross',
          },
          // 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,
      });
    },
    setBoxOption(data) {
      let dataset = [];
      data.forEach((item, index) => {
        item.deviceList.forEach((inner) => {
          dataset.push({
            name: `${
                this.isDtdc
                    ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
                    : `${inner.deviceId}`
            }`,
            type: "boxplot",
            // markPoint: {
            //   symbolSize: 30,
            //   emphasis: {
            //     disabled: false//打开 鼠标高亮
            //   },
            //   data: [//最大值、最小值
            //     {
            //       // type: 'max',
            //       name: `最大值`,
            //       coord: [inner.maxDate, inner.maxValue],
            //       relativeTo: 'coordinate',
            //       label: {
            //         position: "top",
            //         formatter: item.dataType === 2 ? ([
            //           `最大值:${inner.maxValue}`,
            //           // `平均值:${inner.avgValue}`,
            //           `差值:${inner.diffValue}`,
            //         ]).join('\n') : ([
            //           `最大值:${inner.maxValue}`,
            //           // `平均值:${inner.avgValue}`,
            //         ]).join('\n'),
            //       },
            //     },
            //     {
            //       // type: 'min',
            //       name: `最小值`,
            //       coord: [inner.minDate, inner.minValue],
            //       relativeTo: 'coordinate',
            //       label: {
            //         position: "top",
            //         formatter: item.dataType === 2 ? ([
            //           `最小值:${inner.minValue}`,
            //           // `平均值:${inner.avgValue}`,
            //           `差值:${inner.diffValue}`,
            //         ]).join('\n') : ([
            //           `最小值:${inner.minValue}`,
            //           // `平均值:${inner.avgValue}`,
            //         ]).join('\n'),
            //       }
            //     }
            //   ]
            // },
            xdata: [],
            data: [],
          });
          const length = dataset.length;
          inner.pointValueList.forEach((value) => {
            const {valueDate, min, q1, median, q3, max} = value
            // const mid = (max - min) / 2, minLine = min + Math.abs(median / 2),
            //     maxLine = max - Math.abs(median / 2)
            dataset[length - 1].xdata.push(valueDate);
            dataset[length - 1].data.push([min, q1, median, q3, max]);
          });
        });
      });
      console.log("箱型图图表数据", dataset);
      this.chart.setOption({
        legend: {
          // left: 'center',
          // top: '10',
        },
        grid: {
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let data = params.data;
            let result = params.marker + params.name + ' ' + params.seriesName + '<br/>';
            result += '最小值: ' + data[1] + '<br/>';
            result += '平均值: ' + data[3] + '<br/>';
            result += '最大值: ' + data[5];
            return result;
          }
          // trigger: "axis",
          // axisPointer: {
          //   type: 'cross',
          // },
          // 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();
    },
    handleClosed(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>