统计报表优化

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

@@ -3,11 +3,11 @@
   <div v-loading="loading">
     <div class="select-container">
       <el-form :inline="true">
-        <el-form-item label="PCS">
-          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
-          </el-select>
-        </el-form-item>
+<!--        <el-form-item label="PCS">-->
+<!--          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
+<!--            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
         <el-form-item label="时间选择">
           <el-date-picker
             v-model="dateRange"
@@ -62,15 +62,15 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      pcs:'',
-      pcsOptions: [],
+      // pcs:'',
+      // pcsOptions: [],
       activeBtn:'1',
       btnList:[
-        {name:'有功功率',id:'1',attr:['activePower'],source:[['日期','有功功率']]},
-        {name:'无功功率',id:'2',attr:['reactivePower'],source:[['日期','无功功率']]},
+        {name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
+        {name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
         // {name:'温度',id:'wd'},
         // {name:'三相电压',id:'sxdy'},
-        {name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:[['日期','u电流','v电流','w电流']],type:'bar'},
+        {name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
       ],
 
     }
@@ -93,41 +93,42 @@ export default {
       this.dateRange=[]
       this.getData()
     },
-    getPcsList(){
-      return getPcsNameList(this.siteId).then(response => {
-        const data = response?.data || [];
-        this.pcsOptions = data
-        this.pcs = data.length>0?data[0].id:'';
-      })
-    },
+    // getPcsList(){
+    //   return getPcsNameList(this.siteId).then(response => {
+    //     const data = response?.data || [];
+    //     this.pcsOptions = data
+    //     this.pcs = data.length>0?data[0].id:'';
+    //   })
+    // },
     getData(){
-      const {siteId,pcs,activeBtn}=this;
+      const {siteId,activeBtn}=this;
       const [start='',end='']=(this.dateRange || [])
-      if(!pcs) return
       this.loading=true;
       //接口调用完成之后 设置图表、结束loading
-      getPCSData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
+      getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
         this.setOption(response?.data || [])
       }).finally(()=>{this.loading=false;})
 
     },
     setOption(data) {
       const ele = this.btnList.find((item)=>{return item.id === this.activeBtn})
-      const source = JSON.parse(JSON.stringify(ele.source))
-      const length = ele.attr.length
-      const series = []
-      data.forEach((item)=>{
-        const arr = ele.attr.map(key=>item[key])
-        source.push([item.statisDate,...arr])
-      })
-      ele.attr.forEach((item)=>{
-        series.push({
-          name:length>1?item:ele.name,
-          type:ele.type || 'scatter'
+      const sourceBase = JSON.parse(JSON.stringify(ele.source))
+      const source=[]
+      const sourceTop = ['日期']
+      sourceBase.forEach((outer,outerIndex)=>{
+        data.forEach((item,itemIndex)=>{
+          sourceTop.push(`${item.deviceId}-${outer}`)
+          item.dataList.forEach((inner,innerIndex)=>{
+            if(itemIndex === 0 || innerIndex+1>source.length) {
+              source.push([inner.statisDate])
+            }
+            source[innerIndex].push(inner[ele.attr[outerIndex]])
+          })
         })
       })
+      source.unshift(sourceTop)
+      console.log('========',source)
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF','#91cc74'],
         grid: {
           containLabel: true
         },
@@ -151,7 +152,11 @@ export default {
           type: 'value',
         },
         dataset: {source},
-        series
+        series:source[0].slice(1).map(item=>{
+          return {
+            type:ele.type || 'scatter'
+          }
+        })
 
       },true)
     },
@@ -160,18 +165,18 @@ export default {
     },
     init(){
       this.loading = true
-      this.pcs=''
-      this.pcsOptions=[]
-      this.dateRange =[]
+      // this.pcs=''
+      // this.pcsOptions=[]
       this.initChart()
-      this.getPcsList().then(()=>{
-        if(this.pcs){
-          this.onReset()
-        }else{
-          this.loading=false;
-        }
-
-      })
+      this.onReset()
+      // this.getPcsList().then(()=>{
+      //   if(this.pcs){
+      //     this.onReset()
+      //   }else{
+      //     this.loading=false;
+      //   }
+      //
+      // })
     }
   },
   mounted(){