From 61405cf3241130da6bc83142938171cb31d43917 Mon Sep 17 00:00:00 2001
From: xianfuxing <xianfuixng@16.com>
Date: Fri, 29 May 2020 17:04:37 +0800
Subject: [PATCH] =?UTF-8?q?#=20=E6=B7=BB=E5=8A=A0=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/en.js             |  5 ++-
 src/lang/zh.js             |  5 ++-
 src/views/counter/logs.vue | 74 ++++++++++++++++++++++++++++++++++----
 3 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index ba58309..46f6ab4 100644
--- a/src/lang/en.js
+++ b/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'
   }
 }
diff --git a/src/lang/zh.js b/src/lang/zh.js
index cea2dba..c5071f7 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -181,6 +181,9 @@ export default {
     humitureChart: '温湿度',
     temperature: '温度',
     humidity: '湿度',
-    logSeachContent: '设备名称/ID'
+    to: '至',
+    logSeachContent: '设备名称/ID',
+    start_date: '开始日期',
+    end_date: '结束日期'
   }
 }
diff --git a/src/views/counter/logs.vue b/src/views/counter/logs.vue
index ceeada7..a4c5367 100644
--- a/src/views/counter/logs.vue
+++ b/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>