优化

src/views/ems/dzjk/home/ActiveChart.vue

@@ -1,26 +1,29 @@
 
 <template>
-  <el-row style="background:#fff;margin-top:30px;">
-    <el-col :xs="24" :sm="24" :lg="24">
-      <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
-        <div slot="header">
-          <span class="card-title">当日功率曲线</span>
-        </div>
-        <div style="height: 310px" id="activeChart"></div>
-      </el-card>
-    </el-col>
-  </el-row>
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
+      <div slot="header" class="time-range-header">
+        <span class="card-title">当日功率曲线</span>
+        <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
+      </div>
+      <div style="height: 310px" id="activeChart"></div>
+    </el-card>
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
+import DateRangeSelect from '@/components/Ems/DateRangeSelect.vue'
+import {getPcsNameList, getPowerData} from '@/api/ems/dzjk'
 
 export default {
   mixins: [resize],
+  components: {DateRangeSelect},
   data() {
     return {
-      chart: null
+      chart: null,
+      timeRange:[],
+      siteId:'',
+      deviceId:''
     }
   },
   mounted() {
@@ -36,22 +39,56 @@ export default {
     this.chart = null
   },
   methods: {
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.timeRange=data
+      this.getGVQXData()
+    },
+    getGVQXData(){
+      this.showLoading()
+      const {siteId,deviceId,timeRange}=this
+      if(!deviceId) return this.hideLoading()
+      getPowerData({siteId,deviceId,startDate:timeRange[0],endDate:timeRange[1],dataType:'1'}).then(response => {
+        this.setOption(response?.data || [])
+      }).finally(()=>this.hideLoading())
+    },
+    init(siteId){
+      //初始化 清空数据
+      this.siteId = siteId
+      this.timeRange=[]
+      this.deviceId=''
+      this.$refs.dateRangeSelect.init()
+      this.showLoading()
+      getPcsNameList(siteId).then(response=>{
+        const data=response?.data || [];
+        if(data.length>0){
+          this.deviceId=data[0].id
+          //接口调用完成之后 设置图表、结束loading
+          this.getGVQXData()
+        }else{
+          this.hideLoading()
+        }
+      })
+    },
     initChart() {
       this.chart = echarts.init(document.querySelector('#activeChart'))
     },
     showLoading(){
       this.chart && this.chart.showLoading()
     },
+    hideLoading(){
+      this.chart && this.chart.hideLoading()
+    },
     setOption(data) {
       const source = [['日期','电网功率']]
-      data.forEach((item)=>{
+      this.chart && data.forEach((item)=>{
         source.push([item.statisDate,item.gridPower])
       })
       this.chart.setOption({
         color:['#FFBD00','#3C81FF'],
         legend: {
           left: 'center',
-          bottom: '10',
+          bottom: '15',
         },
         tooltip: {
           trigger: 'axis',
@@ -76,7 +113,6 @@ export default {
           }
         ]
       })
-      this.chart.hideLoading()
     },
 
   }