统计报表优化

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

@@ -3,16 +3,6 @@
   <div v-loading="loading">
     <div class="select-container">
       <el-form :inline="true">
-<!--        <el-form-item label="网点">-->
-<!--          <el-select v-model="wd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
-<!--            <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"
@@ -33,15 +23,6 @@
       </el-form>
     </div>
     <div style="margin:30px 0;">
-      <!--        二个选择按钮-->
-      <el-row style="">
-        <el-col :xs="24" :sm="24" :lg="24">
-          <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
-          </el-button-group>
-        </el-col>
-      </el-row>
-      <!--echart-->
       <div id="glqxEchart" style="height:360px;"></div>
     </div>
   </div>
@@ -67,26 +48,9 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      pcs:'',
-      pcsOptions: [],
-      activeBtn:'1',
-      btnList:[
-        {name:'电网功率',id:'1',attr:'gridPower'},
-        {name:'负载功率',id:'2',attr:'loadPower'},
-        {name:'储能功率',id:'3',attr:'storagePower'},
-        {name:'光伏功率',id:'4',attr:'pvPower'},
-      ],
-
     }
   },
   methods: {
-    changeDataType(id){
-      if(id !== this.activeBtn){
-        console.log('点击了不同的菜单，更新数据')
-        this.activeBtn=id;
-        this.getData()
-      }
-    },
     // 搜索
     onSearch(){
       this.getData()
@@ -96,31 +60,21 @@ 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:'';
-      })
-    },
     getData(){
-      const {siteId,pcs,activeBtn}=this;
+      const {siteId}=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 => {
+      getPowerData({siteId,startDate:formatDate(start),endDate:formatDate(end)}).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]])
+      const source = [['日期','电网功率','负载功率','储能功率','光伏功率']]
+      data.forEach(item=>{
+        source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower])
       })
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
         grid: {
           containLabel: true
         },
@@ -146,7 +100,15 @@ export default {
         dataset:{source},
         series: [
           {
-            name,
+            type: 'scatter',
+          },
+          {
+            type: 'scatter',
+          },
+          {
+            type: 'scatter',
+          },
+          {
             type: 'scatter',
           }
         ]
@@ -157,16 +119,8 @@ export default {
     },
     init(){
       this.loading = true
-      this.pcs=''
-      this.pcsOptions=[]
       this.initChart()
-      this.getPcsList().then(()=>{
-        if(this.pcs){
-          this.onReset()
-        }else{
-          this.loading = false
-        }
-      })
+      this.getData()
     }
   },
   mounted(){