电表报表

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

@@ -8,6 +8,11 @@
 <!--            <el-option :label="item.name" :value="item.id" v-for="(item,index) in wdOptions" :key="index+'sblxOptions'"></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"
@@ -46,9 +51,12 @@
 <script>
 import * as echarts from 'echarts'
 import resize from "@/mixins/ems/resize";
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getPcsNameList, getPowerData} from "@/api/ems/dzjk";
+import {formatDate} from "@/filters/ems";
 export default {
   name:'DzjkTjbbGlqx',
-  mixins: [resize],
+  mixins: [resize,getQuerySiteId],
   data() {
     return {
       pickerOptions:{
@@ -59,18 +67,14 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      // todo delete
-      // wd:'',
-      // wdOptions: [
-      //   {name:'网点一',id:1},
-      //   {name:'网点二',id:2},
-      // ],
-      activeBtn:'dwgl',
+      pcs:'',
+      pcsOptions: [],
+      activeBtn:'1',
       btnList:[
-        {name:'电网功率',id:'dwgl'},
-        {name:'负载功率',id:'fzgl'},
-        {name:'储能功率',id:'cngl'},
-        {name:'光伏功率',id:'gfgl'},
+        {name:'电网功率',id:'1',attr:'gridPower'},
+        {name:'负载功率',id:'2',attr:'loadPower'},
+        {name:'储能功率',id:'3',attr:'storagePower'},
+        {name:'光伏功率',id:'4',attr:'pvPower'},
       ],
 
     }
@@ -80,6 +84,7 @@ export default {
       if(id !== this.activeBtn){
         console.log('点击了不同的菜单，更新数据')
         this.activeBtn=id;
+        this.getData()
       }
     },
     // 搜索
@@ -91,15 +96,29 @@ export default {
       this.dateRange=[]
       this.getData()
     },
-    getData(){
-      this.loading=true;
-      this.chart.showLoading()
-      //接口调用完成之后 设置图表、结束loading
-      this.setOption()
-      this.loading=false;
-      this.chart.hideLoading()
+    getPcsList(){
+      return getPcsNameList(this.siteId).then(response => {
+        const data = response?.data || [];
+        this.pcsOptions = data
+        this.pcs = data.length>0?data[0].id:'';
+      })
     },
-    setOption() {
+    getData(){
+      const {siteId,pcs,activeBtn}=this;
+      const [start='',end='']=(this.dateRange || [])
+      if(!pcs) return
+      //接口调用完成之后 设置图表、结束loading
+      this.loading=true;
+      getPowerData({siteId,deviceId:pcs,startDate:formatDate(start),endDate:formatDate(end),dataType:activeBtn}).then(response => {
+        this.setOption(response?.data || [])
+      }).finally(()=>{this.loading=false;})
+    },
+    setOption(data) {
+      const {name,attr} =this.btnList.find(item=>item.id===this.activeBtn)
+      const source = [['日期',name]]
+      data.forEach((item,index)=>{
+        source.push([item.statisDate,item[attr]])
+      })
       this.chart.setOption({
         color:['#FFBD00','#3C81FF'],
         legend: {
@@ -116,35 +135,41 @@ 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',
         },
+        dataset:{source},
         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],
+            name,
             type: 'scatter',
           }
-          // ,{
-          //   name:'实时电池平均SOC',
-          //   data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
-          //   type: 'scatter',
-          // }
-          ]
-      })
+        ]
+      },true)
     },
     initChart() {
       this.chart = echarts.init(document.querySelector('#glqxEchart'));
+    },
+    init(){
+      this.loading = true
+      this.pcs=''
+      this.pcsOptions=[]
+      this.initChart()
+      this.getPcsList().then(()=>{
+        if(this.pcs){
+          this.onReset()
+        }else{
+          this.loading = false
+        }
+      })
     }
   },
   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) {