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"
            :default-value="defaultDateRange"
            end-placeholder="结束时间">
          </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'
export default {
  mixins: [resize],
  data() {
    return {
      loading: false,
      siteId:'',
      deviceId:'',
      clusterDeviceId:'',
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dialogTableVisible: false,
      dateRange: [],
      defaultDateRange:[]
    }
  },
  methods: {
    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.getData()
    },
    initChart({siteId, clusterDeviceId, deviceId}) {
      this.siteId=siteId
      this.clusterDeviceId=clusterDeviceId
      this.deviceId=deviceId
      this.dateRange=[]
      this.dialogTableVisible = true
      this.$nextTick(()=>{
        !this.chart && (this.chart = echarts.init(document.querySelector('#lineChart')))
        this.getData()
      })
    },
    setOption(data) {
      const source = [['日期','电压','温度','SOC','SOH']]
      data.forEach(item => {
        source.push([item.dataTimestamp,item.voltage,item.temperature,item.soc,item.soh])
      })
      this.chart && this.chart.setOption({
        color:['#FFBD00','#3C81FF','#05AEA3','#F86F70'],
        legend: {
          bottom: '10',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        textStyle:{
          color:"#333333",
        },
        xAxis: {
          type: 'category',
        },
        yAxis: {
          type: 'value',
        },
        dataset:{
          source
        },
        series: [
          {
            name:'电压',
            type: 'line',

          },{
            name:'温度',
            type: 'line',
          },
          {
            name:'SOC',
            type: 'line',

          },{
            name:'SOH',
            type: 'line',
          }]
      })
    }
  },
  mounted(){
    const now = new Date();
    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
    this.defaultDateRange = [lastMonth, now];
  }
}
</script>