设备监控使用统一的时间选择组件、文案更新

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

@@ -1,56 +1,29 @@
-
 <template>
-  <div v-loading="loading">
-    <div class="select-container">
-      <el-form :inline="true">
-<!--        <el-form-item label="电池堆">-->
-<!--          <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"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始时间"
-            :picker-options="pickerOptions"
-            :default-value="defaultDateRange"
-            end-placeholder="结束时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="onReset" native-type="button">重置</el-button>
-        </el-form-item>
-      </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+'dcdqxBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+  <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
+    <div slot="header" class="time-range-header">
+      <span class="card-title">
+        <el-button-group class="ems-btns-group">
+            <el-button v-for="(item,index) in btnList" :key="index+'dcdqxBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
           </el-button-group>
-        </el-col>
-      </el-row>
-      <!--echart-->
-      <div id="dcdEchart" style="height:360px;"></div>
+      </span>
+      <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
     </div>
-  </div>
+    <div class="card-main" v-loading="loading">
+      <div id="dcdEchart" style="height: 310px;"></div>
+    </div>
+  </el-card>
 </template>
 
-
 <script>
 import * as echarts from 'echarts'
 import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { getStackData, getStackNameList} from '@/api/ems/dzjk'
 import {formatDate} from "@/filters/ems";
+import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
 export default {
   name:'DzjkTjbbDcdqx',
+  components: {DateRangeSelect},
   mixins: [resize,getQuerySiteId],
   data() {
     return {
@@ -59,11 +32,8 @@ export default {
           return time.getTime() > Date.now();
         },
       },
-      defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      // pcs:'',
-      // pcsOptions: [],
       activeBtn:'1',
       btnList:[
         {name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
@@ -80,23 +50,11 @@ export default {
         this.getData()
       }
     },
-    // 搜索
-    onSearch(){
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.dateRange=data || []
       this.getData()
     },
-    // 重置
-    onReset(){
-      // this.pcs = this.pcsOptions.length > 0 ?this.pcsOptions[0].id : ''
-      this.dateRange=''
-      this.getData()
-    },
-    // getPcsList(){
-    //   return getStackNameList(this.siteId).then(response => {
-    //     const data = JSON.parse(JSON.stringify(response?.data || []))
-    //     this.pcsOptions = data
-    //     this.pcs = data.length>0?data[0].id:'';
-    //   })
-    // },
     getData(){
       const {siteId,activeBtn}=this;
       const [start='',end='']=(this.dateRange || [])
@@ -189,18 +147,12 @@ export default {
       this.chart = echarts.init(document.querySelector('#dcdEchart'));
     },
     init(){
-      this.loading = true
-      // this.pcs=''
-      // this.pcsOptions=[]
-      this.initChart()
-      this.onReset()
+      this.$nextTick(()=>{
+        this.initChart()
+        this.$refs.dateRangeSelect.init()
+      })
     }
   },
-  mounted(){
-    const now = new Date();
-    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-    this.defaultDateRange = [lastMonth, now];
-  },
   beforeDestroy() {
     if (!this.chart) {
       return