# add device table

src/api/counter.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function fetchDeviceList(query) {
+  return request({
+    url: '/api/counter/device/',
+    method: 'get',
+    params: query
+  })
+}

src/lang/en.js

@@ -3,6 +3,10 @@ export default {
     dashboard: 'Dashboard',
     introduction: 'Introduction',
     documentation: 'Documentation',
+    counter: 'Counter',
+    statistic: 'Statistic',
+    device: 'Device',
+    count: 'Count',
     guide: 'Guide',
     permission: 'Permission',
     pagePermission: 'Page Permission',

src/lang/zh.js

@@ -3,6 +3,10 @@ export default {
     dashboard: '首页',
     introduction: '简述',
     documentation: '文档',
+    counter: '灭蚊器',
+    statistic: '统计',
+    device: '设备',
+    count: '计数',
     guide: '引导页',
     permission: '权限测试页',
     pagePermission: '页面权限',

src/router/index.js

@@ -54,6 +54,7 @@ export const constantRouterMap = [
   {
     path: '/counter',
     component: Layout,
+    name: 'counter',
     redirect: '/counter/index',
     meta: {
       title: 'counter',

src/views/counter/device.vue

@@ -3,12 +3,65 @@
     <p class="warn-content">
       无线智能设备信息表
     </p>
+    <el-table
+      v-loading="listLoading"
+      :data="deviceList"
+      style="width: 100%">
+      <el-table-column
+        prop="device_id"
+        label="设备ID"
+        min-width="180">
+      </el-table-column>
+      <el-table-column
+        prop="device_name"
+        label="设备名称"
+        min-width="100">
+      </el-table-column>
+      <el-table-column
+        prop="chip_type"
+        label="芯片类型"
+        min-width="100">
+      </el-table-column>
+      <el-table-column
+        prop="chip_id"
+        label="芯片ID"
+        min-width="180">
+      </el-table-column>
+      <el-table-column
+        prop="last_connect"
+        label="上次连接时间"
+        min-width="180">
+      </el-table-column>
+      <el-table-column
+        prop="last_offline_time"
+        label="上次离线时间"
+        min-width="180">
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
 <script>
+import { fetchDeviceList } from '@/api/counter'
 export default {
-  name: 'device'
+  name: 'device',
+  data() {
+    return {
+      deviceList: [],
+      listLoading: true
+    }
+  },
+  methods: {
+    getDevices() {
+      fetchDeviceList().then(response => {
+        this.deviceList = response.data.results
+        this.listLoading = false
+      })
+    }
+  },
+  created() {
+    this.getDevices()
+  }
 }
 </script>