# 优化表格数据

src/lang/en.js

@@ -178,6 +178,8 @@ export default {
     trendChart: 'Trend chart',
     region: 'Region',
     deviceName: 'Device Name',
-    humitureChart: 'Humiture chart'
+    humitureChart: 'Humiture chart',
+    temperature: 'Temperature',
+    humidity: 'Humidity'
   }
 }

src/lang/zh.js

@@ -178,6 +178,8 @@ export default {
     trendChart: '趋势图',
     region: '地区',
     deviceName: '设备名称',
-    humitureChart: '温湿度'
+    humitureChart: '温湿度',
+    temperature: '温度',
+    humidity: '湿度'
   }
 }

src/views/counter/detail.vue

@@ -32,6 +32,7 @@
     </el-tabs>
     
     <el-table
+      v-show="!showHumiture"
       v-loading="listLoading"
       :data="deviceLogs"
       style="width: 100%">
@@ -55,14 +56,48 @@
         min-width="100">
       </el-table-column>
     </el-table>
-    <el-pagination
-      class="pagination"
-      background
-      layout="total, prev, pager, next, jumper"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-      :total="total">
-    </el-pagination>
+
+    <div v-show="!showHumiture" class="pagination-container">
+      <el-pagination background
+        :current-page="1"
+        :page-sizes="[10,20,30,50]"
+        :page-size="20"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="logsTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+
+    <!-- humiture table -->
+    <el-table
+      v-show="showHumiture"
+      v-loading="tempLoading"
+      :data="deviceTempTableLogs"
+      style="width: 100%">
+      <el-table-column
+        prop="create_time"
+        :label="$t('counter.date')"
+        min-width="100">
+      </el-table-column>
+      <el-table-column
+        prop="temperature"
+        :label="$t('counter.temperature')"
+        min-width="80">
+      </el-table-column>
+      <el-table-column
+        prop="humidity"
+        :label="$t('counter.humidity')"
+        min-width="80">
+      </el-table-column>
+    </el-table>
+
+    <!-- humiture paging -->
+    <div v-show="showHumiture" class="pagination-container">
+      <el-pagination background
+        :current-page="1"
+        :page-sizes="[10,20,30,50]"
+        :page-size="20"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tempTotal" @size-change="handleTempSizeChange" @current-change="handleTempCurrentChange" />
+    </div>
   </div>
 </template>
 
@@ -72,12 +107,6 @@ import Screen from './components/screen'
 import Chart from './components/chart'
 import Humiture from './components/humiture'
 
-// const defaultLastItem = {
-//   count: '0',
-//   status: '0',
-//   signal: '0',
-//   energy: '0'
-// }
 export default {
   name: 'deviceDetail',
   components: {
@@ -105,10 +134,15 @@ export default {
         }
       },
       listLoading: true,
+      tempLoading: true,
       deviceLogs: [],
+      deviceTempLogs: [],
+      deviceTempTableLogs: [],
       activeName: 'screen',
-      total: 0,
+      logsTotal: 0,
+      tempTotal: 0,
       lastItem: {},
+      showScreen: true,
       showChart: false,
       showHumiture: false,
       flag: false
@@ -133,12 +167,18 @@ export default {
           this.lineChartData.total.historyData.push(item.total)
           dateList.push(item.date.substr(5))
         })
-        this.total = response.data.count
         this.lineChartData.total.historyData = this.lineChartData.total.historyData.reverse()
         this.lineChartData.total.xAxis = dateList.reverse()
         this.listLoading = false
       })
     },
+    getDeviceLogsTableHistory(params) {
+      fetchDeviceLogsHistory(params).then(response => {
+        this.deviceLogs = response.data.results
+        this.logsTotal = response.data.count
+        this.listLoading = false
+      })
+    },
     getDeviceTempLog(params) {
       fetchDeviceTempLog(params).then(response => {
         const dateList = []
@@ -151,7 +191,14 @@ export default {
           }
         })
         this.HumitureData.total.xAxis = dateList
-        console.log(this.HumitureData.total)
+        this.tempLoading = false
+      })
+    },
+    getDeviceTempTableLog(params) {
+      fetchDeviceTempLog(params).then(response => {
+        this.deviceTempTableLogs = response.data.results
+        this.tempTotal = response.data.count
+        this.tempLoading = false
       })
     },
     getDevices(params) {
@@ -164,8 +211,7 @@ export default {
           this.$store.dispatch('changeDeviceID', device_id)
           console.log(device_id)
         }
-        // console.log(this.lastItem)
-        this.getDeviceLogsHistory({ device_id })
+        this.getDeviceLogsHistory({ device_id, limit: 20 })
         if (typeof (this.lastItem.count) === 'number') {
           this.lastItem.count = this.lastItem.count.toString()
         }
@@ -178,12 +224,22 @@ export default {
     handleCurrentChange(page) {
       this.listLoading = true
       const device_id = this.$store.getters.deviceID
-      this.getDeviceLogsHistory({ device_id, page })
+      this.getDeviceLogsTableHistory({ device_id, page, limit: 20 })
     },
     handleSizeChange(page) {
       this.listLoading = true
       const device_id = this.$store.getters.deviceID
-      this.getDeviceLogsHistory({ device_id, page })
+      this.getDeviceLogsTableHistory({ device_id, page, limit: 20 })
+    },
+    handleTempCurrentChange(page) {
+      this.tempLoading = true
+      const device_id = this.$store.getters.deviceID
+      this.getDeviceTempTableLog({ device_id, limit: 20, page })
+    },
+    handleTempSizeChange(page) {
+      this.tempLoading = true
+      const device_id = this.$store.getters.deviceID
+      this.getDeviceTempTableLog({ device_id, limit: 20, page })
     },
     handleTabClick(tab, event) {
       // console.log(tab, event)
@@ -194,12 +250,17 @@ export default {
       if (tab.name === 'humiture') {
         this.showChart = false
       }
+      if (tab.name === 'screen') {
+        this.showHumiture = false
+      }
     }
   },
   created() {
     const device_id = this.$store.getters.deviceID
     this.getDevices({ device_id })
+    this.getDeviceLogsTableHistory({ device_id, limit: 20 })
     this.getDeviceTempLog({ device_id, last_day: 1, limit: 30 })
+    this.getDeviceTempTableLog({ device_id, limit: 20 })
   }
 }
 </script>