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

src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue

@@ -7,31 +7,18 @@
     lock-scroll
     append-to-body
     width="700px"
-    class="ems-dialog"
+    class="ems-dialog chart-detail-dialog"
     :before-close="handleColsed"
   >
-    <div>
-      <el-form size="medium" label-width="100px" inline>
-        <el-form-item label="时间选择">
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始时间"
-            value-format="yyyy-MM-dd"
-            :picker-options="pickerOptions"
-            end-placeholder="结束时间"
-            :clearable="false"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="getData">搜索</el-button>
-          <el-button @click="onReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <div id="lineChart" style="height: 360px; width: 100%"></div>
-    </div>
+    <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"></span>
+        <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
+      </div>
+      <div class="card-main" v-loading="loading">
+        <div id="lineChart" style="height: 310px;"></div>
+      </div>
+    </el-card>
   </el-dialog>
 </template>
 
@@ -39,8 +26,9 @@
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
 import { getSingleBatteryData } from "@/api/ems/dzjk";
-import { formatDate } from "@/filters/ems";
+import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
 export default {
+  components: {DateRangeSelect},
   mixins: [resize],
   data() {
     return {
@@ -56,18 +44,13 @@ export default {
       },
       dialogTableVisible: false,
       dateRange: [],
-      defaultDateRange: [],
     };
   },
   methods: {
-    resetDefaultDateRange() {
-      const now = new Date(),
-        formatNow = formatDate(now);
-      const weekAgo = formatDate(
-        new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
-      );
-      this.dateRange = [weekAgo, formatNow];
-      this.defaultDateRange = [weekAgo, formatNow];
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.dateRange=data || []
+      this.getData()
     },
     handleColsed(done) {
       if (!this.chart) {
@@ -102,22 +85,16 @@ export default {
           this.chart.hideLoading();
         });
     },
-    // 重置
-    onReset() {
-      this.dateRange = this.defaultDateRange;
-      this.getData();
-    },
     initChart({ siteId, clusterDeviceId, deviceId }, dataType) {
       this.siteId = siteId;
       this.clusterDeviceId = clusterDeviceId;
       this.deviceId = deviceId;
       this.dataType = dataType;
-      this.resetDefaultDateRange();
       this.dialogTableVisible = true;
       this.$nextTick(() => {
         !this.chart &&
           (this.chart = echarts.init(document.querySelector("#lineChart")));
-        this.getData();
+        this.$refs.dateRangeSelect.init()
       });
     },
     setOption(data) {
@@ -208,3 +185,12 @@ export default {
   mounted() {},
 };
 </script>
+<style lang="scss" scoped>
+.chart-detail-dialog{
+  ::v-deep{
+    .el-dialog__body{
+      padding-top:0;
+    }
+  }
+}
+</style>