# up screen

src/views/counter/components/screen.vue

@@ -2,7 +2,7 @@
   <div class="screen-wrapper">
     <div class="device-base">
       <ul>
-        <li>设备: <span>{{this.$store.getters.deviceID}}</span></li>
+        <li>设备: <span>{{deviceID}}</span></li>
         <li class="region">地区: <span>尖沙咀</span></li>
         <li>设备名称: <span>香港大学1号机</span></li>
       </ul>
@@ -11,22 +11,14 @@
       <table cellspacing="0">
         <tbody>
           <tr>
-            <td>2</td>
-            <td>0</td>
-            <td>1</td>
-            <td>8</td>
-            <td>-</td>
-            <td>0</td>
-            <td>8</td>
-            <td>-</td>
-            <td>2</td>
-            <td>2</td>
-            <td> </td>
-            <td>1</td>
-            <td>1</td>
-            <td>:</td>
-            <td>3</td>
-            <td>3</td>
+            <td v-for="(item, index) of lastTime" :key="index">
+              {{item}}
+            </td>
+          </tr>
+          <tr>
+            <td v-for="(item, index) of lastCount" :key="index">
+              {{item}}
+            </td>
           </tr>
         </tbody>
       </table>
@@ -38,13 +30,26 @@
 <script>
 export default {
   name: 'screen',
+  props: {
+    deviceID: String,
+    lastItem: Object
+  },
   data() {
     return {
-      //
     }
   },
-  methods: {
-    //
+  computed: {
+    lastTime() {
+      return this.lastItem.calc_time.split('')
+    },
+    lastCount() {
+      const count = this.lastItem.mosq_count
+      const qty = 'Qty.' + ' '.repeat(13 - count.length) + '00' + count
+      return qty.split('')
+    }
+  },
+  mounted() {
+    console.log()
   }
 }
 </script>
@@ -59,7 +64,7 @@ export default {
       ul {
         padding: 0;
         li {
-          font-size: .9rem;
+          font-size: 1.1rem;
           list-style-type: none;
           display: inline-block;
         }
@@ -75,11 +80,14 @@ export default {
         border: 1px solid #666;
         border-collapse: collapse;
         text-align: center;
+        margin: 2rem 0 2rem 0;
         td {
           border: 1px solid #666;
           width: 1rem;
           height: 1.5rem;
           line-height: 1.5rem;
+          font-weight: 600;
+          padding: .2rem;
         }
       }
     }

src/views/counter/detail.vue

@@ -2,7 +2,11 @@
   <div class="app-container">
     <el-tabs v-model="activeName" @tab-click="handleTabClick">
       <el-tab-pane label="显示屏" name="screen">
-        <screen></screen>
+        <screen 
+          :deviceID="this.$store.getters.deviceID"
+          :lastItem="lastItem"
+          v-if="flag"
+        ></screen>
       </el-tab-pane>
       <el-tab-pane label="趋势图" name="chart">配置管理</el-tab-pane>
     </el-tabs>
@@ -70,7 +74,9 @@ export default {
       listLoading: true,
       deviceLogs: [],
       activeName: 'screen',
-      total: 0
+      total: 0,
+      lastItem: {},
+      flag: false
     }
   },
   methods: {
@@ -79,6 +85,8 @@ export default {
         this.deviceLogs = response.data.results
         this.total = response.data.count
         this.listLoading = false
+        this.lastItem = this.deviceLogs[0]
+        this.flag = true
       })
     },
     coordinate(row, column) {
@@ -101,7 +109,6 @@ export default {
   created() {
     const device_id = this.$store.getters.deviceID
     this.getDeviceLogs({ device_id })
-    console.log(this.$store.getters.deviceID)
   }
 }
 </script>