统计报表优化

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

@@ -3,11 +3,11 @@
   <div v-loading="loading">
     <div class="select-container">
       <el-form :inline="true">
-        <el-form-item label="电池堆">
-          <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-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,14 +62,14 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      pcs:'',
-      pcsOptions: [],
+      // pcs:'',
+      // pcsOptions: [],
       activeBtn:'1',
       btnList:[
-        {name:'堆平均维度',id:'1',attr:['temp'],source:[['日期','有功功率']]},
-        {name:'堆电压',id:'2',attr:['voltage'],source:[['日期','堆电压']]},
-        {name:'堆电流',id:'3',attr:['current'],source:[['日期','堆电流']]},
-        {name:'堆soc',id:'4',attr:['soc'],source:[['日期','堆soc']]},
+        {name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
+        {name:'堆电压',id:'2',attr:['voltage'],source:['堆电压']},
+        {name:'堆电流',id:'3',attr:['current'],source:['堆电流']},
+        {name:'堆soc',id:'4',attr:['soc'],source:['堆soc']},
       ],
     }
   },
@@ -90,41 +90,65 @@ export default {
       this.dateRange=''
       this.getData()
     },
-    getPcsList(){
-      return getStackNameList(this.siteId).then(response => {
-        const data = JSON.parse(JSON.stringify(response?.data || []))
-        this.pcsOptions = data
-        this.pcs = data.length>0?data[0].id:'';
-      })
-    },
+    // getPcsList(){
+    //   return getStackNameList(this.siteId).then(response => {
+    //     const data = JSON.parse(JSON.stringify(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
       //接口调用完成之后 设置图表、结束loading
       this.loading=true;
-       getStackData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
+       getStackData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
         this.setOption(response?.data || [])
       }).finally(()=>{this.loading=false;})
-
     },
     setOption(data) {
+
+      // [{
+      //   "deviceId": "PCS04",
+      //   "dataList": [
+      //     {
+      //       "statisDate": "2025-09-05",
+      //       "activePower": null,
+      //       "reactivePower": null,
+      //       "uCurrent": 1.30,
+      //       "vCurrent": 0.90,
+      //       "wCurrent": 1.00,
+      //       "deviceId": "PCS04"
+      //     },
+      //     {
+      //       "statisDate": "2025-09-04",
+      //       "activePower": null,
+      //       "reactivePower": null,
+      //       "uCurrent": 71.40,
+      //       "vCurrent": 71.30,
+      //       "wCurrent": 71.80,
+      //       "deviceId": "PCS04"
+      //     }
+      //   ]
+      // }]
       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'],
         grid: {
           containLabel: true
         },
@@ -148,7 +172,11 @@ export default {
           type: 'value',
         },
         dataset: {source},
-        series
+        series:source[0].slice(1).map(item=>{
+          return {
+            type:ele.type || 'scatter'
+          }
+        })
       },true)
     },
     initChart() {
@@ -156,16 +184,10 @@ export default {
     },
     init(){
       this.loading = true
-      this.pcs=''
-      this.pcsOptions=[]
+      // this.pcs=''
+      // this.pcsOptions=[]
       this.initChart()
-      this.getPcsList().then(()=>{
-        if(this.pcs){
-          this.onReset()
-        }else{
-          this.loading = false
-        }
-      })
+      this.onReset()
     }
   },
   mounted(){