# 趋势表格添加时间选择

src/views/counter/detail.vue

@@ -30,6 +30,24 @@
         </el-row>
       </el-tab-pane>
     </el-tabs>
+
+    <div class="filter-container">
+      <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
       v-show="!showHumiture"
@@ -94,7 +112,7 @@
       <el-pagination background
         :current-page="1"
         :page-sizes="[10,20,30,50]"
-        :page-size="20"
+        :page-size="deviceHistoryListQuery.limit"
         layout="total, sizes, prev, pager, next, jumper"
         :total="tempTotal" @size-change="handleTempSizeChange" @current-change="handleTempCurrentChange" />
     </div>
@@ -102,6 +120,7 @@
 </template>
 
 <script>
+import waves from '@/directive/waves' // 水波纹指令
 import { fetchDeviceList, fetchDeviceLogsHistory, fetchDeviceTempLog } from '@/api/counter'
 import Screen from './components/screen'
 import Chart from './components/chart'
@@ -114,6 +133,9 @@ export default {
     Chart,
     Humiture
   },
+  directives: {
+    waves
+  },
   data() {
     return {
       lineChartData: {
@@ -139,8 +161,16 @@ export default {
         limit: 20,
         ordering: '-create_time'
       },
+      deviceHistoryListQuery: {
+        page: 1,
+        limit: 20,
+        device_id: undefined,
+        start: undefined,
+        end: undefined
+      },
       listLoading: true,
       tempLoading: true,
+      device_id: undefined,
       deviceLogs: [],
       deviceTempLogs: [],
       deviceTempTableLogs: [],
@@ -151,7 +181,9 @@ export default {
       showScreen: true,
       showChart: false,
       showHumiture: false,
-      flag: false
+      flag: false,
+      pickerOptions: null,
+      dateRange: undefined
     }
   },
   watch: {
@@ -175,6 +207,7 @@ export default {
         })
         this.lineChartData.total.historyData = this.lineChartData.total.historyData.reverse()
         this.lineChartData.total.xAxis = dateList.reverse()
+        this.logsTotal = response.data.count
         this.listLoading = false
       })
     },
@@ -227,21 +260,38 @@ export default {
     coordinate(row, column) {
       return row.longitude + ', ' + row.latitude
     },
+    handleDateSelect(value) {
+      if (value === null) {
+        this.deviceHistoryListQuery.start = undefined
+        this.deviceHistoryListQuery.end = undefined
+      } else {
+        const [start, end] = value
+        this.deviceHistoryListQuery.start = start
+        this.deviceHistoryListQuery.end = end
+      }
+    },
+    handleFilter() {
+      this.deviceHistoryListQuery.page = 1
+      this.getDeviceLogsHistory(this.deviceHistoryListQuery)
+    },
     handleCurrentChange(page) {
       this.listLoading = true
-      const device_id = this.$store.getters.deviceID
+      this.deviceHistoryListQuery.device_id = this.device_id
-      this.getDeviceLogsTableHistory({ device_id, page, limit: 20 })
+      this.deviceHistoryListQuery.page = page
+      // this.getDeviceLogsTableHistory(this.deviceHistoryListQuery)
+      this.getDeviceLogsHistory(this.deviceHistoryListQuery)
     },
-    handleSizeChange(page) {
+    handleSizeChange(val) {
       this.listLoading = true
-      const device_id = this.$store.getters.deviceID
+      this.deviceHistoryListQuery.device_id = this.device_id
-      this.getDeviceLogsTableHistory({ device_id, page, limit: 20 })
+      this.deviceHistoryListQuery.limit = val
+      // this.getDeviceLogsTableHistory(this.deviceHistoryListQuery)
+      this.getDeviceLogsHistory(this.deviceHistoryListQuery)
     },
     handleTempCurrentChange(page) {
       this.tempLoading = true
       this.deviceTempListQuery.page = page
-      this.deviceTempListQuery.device_id = device_id
+      this.deviceTempListQuery.device_id = this.device_id
-      const device_id = this.$store.getters.deviceID
       this.getDeviceTempTableLog(this.deviceTempListQuery)
     },
     handleTempSizeChange(page) {
@@ -266,16 +316,54 @@ export default {
     }
   },
   created() {
-    const device_id = this.$store.getters.deviceID
+    this.device_id = this.$store.getters.deviceID
-    this.deviceTempListQuery.device_id = device_id
+    this.deviceHistoryListQuery.device_id = this.device_id
-    this.getDevices({ device_id })
+    this.deviceTempListQuery.device_id = this.device_id
-    this.getDeviceLogsTableHistory({ device_id, limit: 20 })
+    this.getDevices({ device_id: this.device_id })
-    this.getDeviceTempLog({ device_id, last_day: 1, limit: 30 })
+    this.getDeviceLogsTableHistory({ device_id: this.device_id, limit: 20 })
+    this.getDeviceTempLog({ device_id: this.device_id, last_day: 1, limit: 30 })
     this.getDeviceTempTableLog(this.deviceTempListQuery)
   }
 }
 </script>
 
+<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>
+
 <style lang="scss">
     .v-enter, .v-leave-to {
       opacity: 0;