# detail page

src/store/getters.js

@@ -13,6 +13,7 @@ const getters = {
   setting: state => state.user.setting,
   permission_routers: state => state.permission.routers,
   addRouters: state => state.permission.addRouters,
-  errorLogs: state => state.errorLog.logs
+  errorLogs: state => state.errorLog.logs,
+  deviceID: state => state.counter.deviceID
 }
 export default getters

src/store/index.js

@@ -5,6 +5,7 @@ import errorLog from './modules/errorLog'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
 import user from './modules/user'
+import counter from './modules/counter'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -15,7 +16,8 @@ const store = new Vuex.Store({
     errorLog,
     permission,
     tagsView,
-    user
+    user,
+    counter
   },
   getters
 })

src/store/modules/counter.js

@@ -0,0 +1,17 @@
+const counter = {
+  state: {
+    deviceID: '868575028779793'
+  },
+  mutations: {
+    CHANGE_DEVICE_ID: (state, deviceID) => {
+      state.deviceID = deviceID
+    }
+  },
+  actions: {
+    chnageDeviceID({ commit }, deviceID) {
+      commit('CHANGE_DEVICE_ID', deviceID)
+    }
+  }
+}
+
+export default counter

src/views/counter/detail.vue

@@ -3,12 +3,96 @@
     <p class="warn-content">
       设备日志详情。
     </p>
+    <el-table
+      v-loading="listLoading"
+      :data="deviceLogs"
+      style="width: 100%">
+      <el-table-column
+        type="index"
+        label="序号">
+      </el-table-column>
+      <el-table-column
+        prop="device_id"
+        label="设备ID"
+        min-width="150">
+      </el-table-column>
+      <el-table-column
+        prop="mosq_count"
+        label="计数"
+        min-width="80">
+      </el-table-column>
+      <el-table-column
+        prop="signal"
+        label="信号"
+        min-width="50">
+      </el-table-column>
+      <el-table-column
+        prop="energy"
+        label="电量"
+        min-width="80">
+      </el-table-column>
+      <el-table-column
+        prop="time"
+        label="坐标"
+        min-width="120"
+        :formatter="coordinate">
+      </el-table-column>
+      <el-table-column
+        prop="calc_time"
+        label="时间"
+        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>
 </template>
 
 <script>
+import { fetchDeviceLogs } from '@/api/counter'
 export default {
-  name: 'detail'
+  name: 'detail',
+  data() {
+    return {
+      listLoading: true,
+      deviceLogs: [],
+      total: 0,
+      deviceId: 868575028779264
+    }
+  },
+  methods: {
+    getDeviceLogs(params) {
+      fetchDeviceLogs(params).then(response => {
+        this.deviceLogs = response.data.results
+        this.total = response.data.count
+        this.listLoading = false
+      })
+    },
+    coordinate(row, column) {
+      return row.longitude + ', ' + row.latitude
+    },
+    handleCurrentChange(page) {
+      this.listLoading = true
+      const device_id = this.deviceId
+      this.getDeviceLogs({ device_id, page })
+    },
+    handleSizeChange(page) {
+      this.listLoading = true
+      const device_id = this.deviceId
+      this.getDeviceLogs({ device_id, page })
+    }
+  },
+  created() {
+    const device_id = this.deviceId
+    this.getDeviceLogs({ device_id })
+    console.log(this.$store.getters.deviceID)
+  }
 }
 </script>
 

src/views/counter/device.vue

@@ -79,7 +79,9 @@
         label="操作"
         min-width="100">
         <template slot-scope="scope">
-          <el-button type="text" size="small">详情</el-button>
+          <el-button type="text"
+            @click="handleDeviceClick(scope.row.device_id)" size="small">详情
+          </el-button>
           <el-button type="text" size="small">地图</el-button>
         </template>
       </el-table-column>
@@ -114,7 +116,6 @@ export default {
     getDevices(params) {
       fetchDeviceList(params).then(response => {
         this.deviceList = response.data.results
-        console.log(this.deviceList)
         this.total = response.data.count
         this.listLoading = false
       })
@@ -136,6 +137,14 @@ export default {
     handleSizeChange(page) {
       this.listLoading = true
       this.getDevices({ page })
+    },
+    handleDeviceClick(deviceID) {
+      // console.log(deviceID)
+      this.$store.dispatch('chnageDeviceID', deviceID).then(() => {
+        // this.$router.push('/counter/detail')
+      }).catch(() => {
+        console.log('Err: get device_id failed in device page')
+      })
     }
   },
   created() {