# 添加时间选择

src/lang/en.js

@@ -181,6 +181,9 @@ export default {
     humitureChart: 'Humiture chart',
     temperature: 'Temperature',
     humidity: 'Humidity',
-    logSeachContent: 'Device ID/Name'
+    logSeachContent: 'Device ID/Name',
+    to: 'To',
+    start_date: 'Start Date',
+    end_date: 'End Date'
   }
 }

src/lang/zh.js

@@ -181,6 +181,9 @@ export default {
     humitureChart: '温湿度',
     temperature: '温度',
     humidity: '湿度',
-    logSeachContent: '设备名称/ID'
+    to: '至',
+    logSeachContent: '设备名称/ID',
+    start_date: '开始日期',
+    end_date: '结束日期'
   }
 }

src/views/counter/logs.vue

@@ -1,8 +1,22 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input @keyup.enter.native="handleFilter" size="small" style="width: 220px;" class="filter-item" :placeholder="$t('counter.logSeachContent')" v-model="logsListQuery.search">
+      <el-input @keyup.enter.native="handleFilter" size="small" style="width: 220px;" class="filter-item" :placeholder="$t('counter.logSeachContent')" v-model="logsListQuery.device">
       </el-input>
+      <div class="date-selector filter-item">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          type="daterange"
+          align="right"
+          :range-separator="$t('counter.to')"
+          :start-placeholder="$t('counter.start_date')"
+          :end-placeholder="$t('counter.end_date')"
+          :picker-options="pickerOptions"
+          value-format="yyyy-MM-dd"
+          @change="handleDateSelect"
+        />
+      </div>
       <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
     </div>
     <el-table
@@ -80,10 +94,14 @@ export default {
       listLoading: true,
       total: 0,
       logsListQuery: {
-        search: undefined,
+        device: undefined,
         limit: 10,
-        page: 1
+        page: 1,
-      }
+        start: undefined,
+        end: undefined
+      },
+      pickerOptions: null,
+      dateRange: undefined
     }
   },
   methods: {
@@ -113,6 +131,17 @@ export default {
     handleFilter() {
       this.logsListQuery.page = 1
       this.getDeviceLogs(this.logsListQuery)
+    },
+    handleDateSelect(value) {
+      if (value === null) {
+        this.logsListQuery.start = undefined
+        this.logsListQuery.end = undefined
+      } else {
+        const [start, end] = value
+        this.logsListQuery.start = start
+        this.logsListQuery.end = end
+      }
+      // this.getDeviceLogs(this.logsListQuery)
     }
   },
   created() {
@@ -124,6 +153,39 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-  
+  .date-selector {
+      margin-left: 10px;
+  }
+  .date-selector /deep/ .el-date-editor .el-range-separator {
+      margin-right: 10px !important;
+  }
+  @media only screen and (max-width: 768px) {
+    .filter-container {
+    display: block;
+      .filter-item {
+        margin-bottom: 10px;
+        display: block;
+      }
+      .date-selector {
+        margin-left: 0;
+        margin-bottom: 0;
+      }
+      .time-selector {
+        margin-left: 0;
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+  @media only screen and (max-width: 500px) {
+      .el-date-range-picker {
+        width: 100% !important;
+      }
+      .el-date-range-picker__content {
+        float: none;
+        width: 80%;
+      }
+  }
 </style>