概率统计接口联调

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

@@ -1,11 +1,11 @@
 
 <template>
-  <div>
+  <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.name" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'sblxOptions'"></el-option>
+            <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="时间选择">
@@ -46,9 +46,12 @@
 <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";
 export default {
   name:'DzjkTjbbPcsqx',
-  mixins: [resize],
+  mixins: [resize,getQuerySiteId],
   data() {
     return {
       pickerOptions:{
@@ -60,17 +63,14 @@ export default {
       dateRange:[],
       loading:false,
       pcs:'',
-      pcsOptions: [
-        {name:'Pcs1',id:1},
-        {name:'Pcs2',id:2},
-      ],
-      activeBtn:'yggl',
+      pcsOptions: [],
+      activeBtn:'1',
       btnList:[
-        {name:'有功功率',id:'yggl'},
-        {name:'无功功率',id:'wggl'},
-        {name:'温度',id:'wd'},
-        {name:'三相电压',id:'sxdy'},
-        {name:'三相电流',id:'sxdl'},
+        {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'},
       ],
 
     }
@@ -80,6 +80,7 @@ export default {
       if(id !== this.activeBtn){
         console.log('点击了不同的菜单，更新数据')
         this.activeBtn=id;
+        this.getData()
       }
     },
     // 搜索
@@ -88,21 +89,44 @@ export default {
     },
     // 重置
     onReset(){
-      this.pcs = ''
+      // this.pcs = this.pcsOptions.length > 0 ?this.pcsOptions[0].id : ''
       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:'';
+      })
+    },
     getData(){
       this.loading=true;
-      this.chart.showLoading()
+      const {siteId,pcs,activeBtn}=this;
+      const [start='',end='']=(this.dateRange || [])
       //接口调用完成之后 设置图表、结束loading
-      this.setOption()
-      this.loading=false;
-      this.chart.hideLoading()
+      getPCSData({siteId,deviceId:pcs,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
+        this.setOption(response?.data || [])
+      }).finally(()=>{this.loading=false;})
+
     },
-    setOption() {
+    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'
+        })
+      })
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
+        color:['#FFBD00','#3C81FF','#91cc74'],
         legend: {
           left: 'center',
           bottom: '10',
@@ -117,35 +141,32 @@ export default {
           color:"#333333",
         },
         xAxis: {
-          data: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
+          type: 'category',
         },
         yAxis: {
           type: 'value',
         },
-        series: [
-          {
-            name:this.btnList.find(item=>item.id===this.activeBtn).name,
-            data: [80,92,1,34,90,130,320,80,9,91,34,90,80,92,1,34,90,130,320,80,9,91,34,90],
-            type: 'scatter',
-          }
-          // ,{
-          //   name:'实时电池平均SOC',
-          //   data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
-          //   type: 'scatter',
-          // }
-          ]
-      })
+        dataset: {source},
+        series
+
+      },true)
     },
     initChart() {
       this.chart = echarts.init(document.querySelector('#pcsEchart'));
+    },
+    init(){
+      this.loading = true
+      this.initChart()
+      this.getPcsList().then(()=>{
+        this.onReset()
+      })
     }
   },
   mounted(){
     const now = new Date();
     const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
     this.defaultDateRange = [lastMonth, now];
-    this.initChart()
-    this.getData()
+
   },
   beforeDestroy() {
     if (!this.chart) {