emsfront/src/views/ems/dzjk/tjbb/pcsqx/index.vue

<template>
  <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
    <div slot="header" class="time-range-header">
      <span class="card-title">
         <el-button-group class="ems-btns-group">
            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
          </el-button-group>
      </span>
      <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
    </div>
    <div class="card-main" v-loading="loading">
      <div id="pcsEchart" style="height: 310px;"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getPCSData, getPcsNameList} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
  name:'DzjkTjbbPcsqx',
  components: {DateRangeSelect},
  mixins: [resize,getQuerySiteId],
  data() {
    return {
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dateRange:[],
      loading:false,
      activeBtn:'1',
      btnList:[
        {name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
        {name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
        {name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
      ],

    }
  },
  methods: {
    changeDataType(id){
      if(id !== this.activeBtn){
        console.log('点击了不同的菜单，更新数据')
        this.activeBtn=id;
        this.getData()
      }
    },
    // 更新时间范围 重置图表
    updateDate(data){
      this.dateRange=data || []
      this.getData()
    },
    getData(){
      const {siteId,activeBtn}=this;
      const [start='',end='']=(this.dateRange || [])
      this.loading=true;
      //接口调用完成之后 设置图表、结束loading
      getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
        this.setOption(response?.data || [])
      }).finally(()=>{this.loading=false;})
    },
    compareDate(date1,date2){
      console.log('比较时间',date1,date2)
      // 年2025-09/天2025-09-15/时2025-09-15/10:00
      if(date1.indexOf(':') > -1 && date2.indexOf(':') > -1){
        return parseInt(date1) - parseInt(date2)
      }
      const [date1_Y='',date1_M='',date1_D=''] = date1.split('-')//根据空格区分[年月日,小时]
      const [date2_Y='',date2_M='',date2_D=''] = date2.split('-')//根据空格区分[年月日,小时]
      return (date1_Y === date2_Y && date1_M === date2_M && date1_D - date2_D) || (date1_Y === date2_Y && date1_M - date2_M) || date1_Y - date2_Y
    },
    setOption(data) {
      const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
      const sourceBase = JSON.parse(JSON.stringify(ele.source))
      // sourceBase={name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
      const source=[]
      const sourceTop = ['日期']
      let map={},mapArr=[]
      // 生成所有{日期:[],日期:[]}格式的对象和所有包含所有日期的[日期1,日期2...]
      data.forEach((item)=>{
        item.dataList.forEach((inner)=>{
          // 日期格式
          // 年2025-09/天2025-09-15/时2025-09-15/10:00
          // 所有数据的日期格式一致
          if(!map[inner.statisDate]) {
            map[inner.statisDate] = []
            mapArr.push(inner.statisDate)
          }
        })
      })
      data.forEach((item,itemIndex)=>{
        const dataTimeList = item.dataList.map(i =>i.statisDate)
        const noDataTime = mapArr.filter(i=>!dataTimeList.includes(i))
        sourceBase.forEach((outer,outerIndex)=>{
          sourceTop.push(`${item.deviceId}-${outer}`)
          noDataTime.forEach(i=>map[i].push(''))
          item.dataList.forEach((inner,innerIndex)=>{
            map[inner.statisDate].push(inner[ele.attr[outerIndex]])
          })
        })
      })
      mapArr = mapArr.sort((a,b)=>this.compareDate(a,b))
      mapArr.forEach(item=>{
        source.push([item,...map[item]])
      })
      source.unshift(sourceTop)
      console.log('map=',map)
      console.log('mapArr=',mapArr)
      console.log('========',source)
      this.chart.setOption({
        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:source[0].slice(1).map(item=>{
          return {
            type:ele.type || 'scatter'
          }
        })

      },true)
    },
    initChart() {
      this.chart = echarts.init(document.querySelector('#pcsEchart'));
    },
    init(){
      this.$nextTick(()=>{
        this.initChart()
        this.$refs.dateRangeSelect.init()
      })
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
}
</script>