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
        if (!this.chart) {
          return
        }
        this.hideLoading()
        this.chart.dispose()
        this.chart = null
      }
    },
    dataUnit:{
      handler(newVal,oldVal){
        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}){
      //初始化数据
      this.pointName=pointName
      this.categoryName=categoryName
      this.deviceId=deviceId
      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{dataUnit,dataRange:[start='',end=''],child}=this
        let siteDeviceMap={}
        child.forEach(([first,second,third])=>{
          if(siteDeviceMap[first]){
            siteDeviceMap[first].push(third)
          }else{
            siteDeviceMap[first]=[]
            siteDeviceMap[first].push(third)
          }
        })
        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:[this.siteId],deviceId:this.deviceId,dataUnit,categoryName:this.categoryName,pointName:this.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+'-' : ''}` : ''}${inner.deviceId}`,
              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>