优化

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

@@ -1,26 +1,27 @@
 
 <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">
+      <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="weekChart"></div>
       </el-card>
-    </el-col>
-  </el-row>
 </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:'',
     }
   },
   mounted() {
@@ -36,18 +37,43 @@ export default {
     this.chart = null
   },
   methods: {
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.timeRange=data
+      this.getWeekKData()
+    },
+    getWeekKData(){
+      this.showLoading()
+      const {siteId,timeRange}=this
+      //todo delete
+      this.hideLoading()
+      // todo({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
+      //   this.setOption(response?.data || [])
+      // }).finally(()=>this.hideLoading())
+    },
+    init(siteId){
+      //初始化 清空数据
+      this.siteId = siteId
+      this.timeRange=[]
+      this.deviceId=''
+      this.$refs.dateRangeSelect.init()
+      this.getWeekKData()
+    },
     initChart() {
       this.chart = echarts.init(document.querySelector('#weekChart'))
     },
     showLoading(){
       this.chart && this.chart.showLoading()
     },
+    hideLoading(){
+      this.chart && this.chart.hideLoading()
+    },
     setOption(data,unit) {
       const source = [['日期','充电量','放电量']]
       data.forEach(item=>{
         source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
       })
-      this.chart.setOption({
+      this.chart && this.chart.setOption({
         color:['#FFBD00','#3C81FF','#05AEA3'],
         tooltip: {
           trigger: 'axis',
@@ -57,7 +83,7 @@ export default {
         },
         legend: {
           left: 'center',
-          bottom: '10',
+          bottom: '15',
         },
         xAxis: {
           type: 'category',
@@ -88,10 +114,7 @@ export default {
           },
         ]
       })
-      this.chart.hideLoading()
     }
   }
 }
-
 </script>
-