# up count view

src/api/counter.js

@@ -7,3 +7,11 @@ export function fetchDeviceList(query) {
     params: query
   })
 }
+
+export function fetchDeviceCount(query) {
+  return request({
+    url: '/api/counter/count/',
+    method: 'get',
+    params: query
+  })
+}

src/views/counter/count.vue

@@ -3,15 +3,99 @@
     <p class="warn-content">
       智能模块消息推送列表
     </p>
+    <el-table
+     v-loading="listLoading"
+    :data="deviceCount"
+    style="width: 100%"
+    :default-sort = "{prop: 'calc_time', order: 'descending'}"
+    >
+    <el-table-column
+      prop="device_id"
+      label="设备ID"
+      sortable
+      min-width="100">
+    </el-table-column>
+    <el-table-column
+      prop="signal"
+      label="信号强度"
+      min-width="100">
+    </el-table-column>
+    <el-table-column
+      sortable
+      prop="mosq_count"
+      label="灭蚊数量"
+      min-width="100">
+    </el-table-column>
+    <el-table-column
+      prop="energy"
+      label="电量"
+      min-width="100">
+    </el-table-column>
+    <el-table-column
+      prop="coordinate"
+      label="坐标"
+      min-width="100"
+      :formatter="formatter">
+    </el-table-column>
+    <el-table-column
+      prop="calc_time"
+      label="时间"
+      min-width="100">
+    </el-table-column>
+  </el-table>
+  <el-pagination
+    class="pagination"
+    background
+    layout="prev, pager, next"
+    @current-change="handleCurrentChange"
+    :total="total">
+  </el-pagination>
   </div>
 </template>
 
 <script>
+import { fetchDeviceCount } from '@/api/counter'
 export default {
-  name: 'count'
+  name: 'count',
+  data() {
+    return {
+      deviceCount: [],
+      listLoading: true,
+      total: 0
+    }
+  },
+  methods: {
+    getDeviceCount(params) {
+      fetchDeviceCount(params).then(response => {
+        this.deviceCount = response.data.results
+        // 页码
+        // this.total = Math.ceil(response.data.count / 8) * 10
+        this.total = response.data.count
+        // console.log(this.total)
+        this.listLoading = false
+      })
+    },
+    formatter(row, column) {
+      return row.longitude + ', ' + row.latitude
+    },
+    handleCurrentChange(page) {
+      // console.log(page)
+      this.listLoading = true
+      this.getDeviceCount({ page })
+    }
+  },
+  created() {
+    this.getDeviceCount()
+  },
+  deactivated() {
+    this.$destroy(true)
+  }
 }
 </script>
 
 <style lang="scss">
-
+  .pagination {
+    float: right;
+    padding: 20px 50px 0 0;
+  }
 </style>

src/views/counter/device.vue

@@ -61,6 +61,9 @@ export default {
   },
   created() {
     this.getDevices()
+  },
+  deactivated() {
+    this.$destroy(true)
   }
 }
 </script>