# 完善screen

src/views/counter/components/screen.vue

@@ -24,7 +24,24 @@
       </table>
     </div>
     <div class="device-status">
-      
+      <ul>
+        <li>状态： 
+          <span
+            :class="status ? 'text-success' : 'text-danger'"
+            v-if="status == 0"
+          >
+            离线
+          </span>
+          <span
+            :class="status ? 'text-success' : 'text-danger'"
+            v-if="status == 1"
+          >
+            在线
+          </span>
+        </li>
+        <li class="signal">信号： <span>{{lastItem.signal}}</span></li>
+        <li>电量： <span>{{lastItem.energy}}</span></li>
+      </ul>
     </div>
   </div>
 </template>
@@ -34,12 +51,16 @@ export default {
   name: 'screen',
   props: {
     deviceID: String,
-    lastItem: Object
+    lastItem: Object,
+    status: Number
   },
   data() {
     return {
     }
   },
+  methods: {
+    //
+  },
   computed: {
     lastTime() {
       return this.lastItem.calc_time.substr(0, 16).split('')
@@ -51,14 +72,19 @@ export default {
     }
   },
   mounted() {
-    console.log()
   }
 }
 </script>
 
 <style lang="scss">
+  .text-success {
+    color: #67C23A
+  }
+  .text-danger {
+    color: #F56C6C
+  }
   .screen-wrapper {
-    background: #eee;
+    background: #F2F6FC;
     overflow: auto;
     .device-base {
       display: flex;
@@ -96,6 +122,22 @@ export default {
         }
       }
     }
+    .device-status {
+      display: flex;
+      justify-content: center;
+      margin: -2rem 0 1rem 0;
+      ul {
+        padding: 0;
+        li {
+          font-size: .85rem;
+          list-style-type: none;
+          display: inline-block;
+        }
+        .signal {
+          margin: 0 2rem 0 2rem
+        }
+      }
+    }
     @media only screen and (max-width: 768px) {
       .device-screen {
         table {
@@ -105,6 +147,13 @@ export default {
           }
         }
       }
+      .device-status {
+        margin: -1rem 0 1.5rem 0;
+        font-size: 1rem;
+      }
+      .signal {
+        margin: 0 1rem 0 1rem
+      }
     }
   }
 </style>

src/views/counter/detail.vue

@@ -5,6 +5,7 @@
         <screen 
           :deviceID="this.$store.getters.deviceID"
           :lastItem="lastItem"
+          :status="status"
           v-if="flag"
         ></screen>
       </el-tab-pane>
@@ -62,7 +63,7 @@
 </template>
 
 <script>
-import { fetchDeviceLogs } from '@/api/counter'
+import { fetchDeviceList, fetchDeviceLogs } from '@/api/counter'
 import Screen from './components/screen'
 export default {
   name: 'deviceDetail',
@@ -76,6 +77,7 @@ export default {
       activeName: 'screen',
       total: 0,
       lastItem: {},
+      status: 0,
       flag: false
     }
   },
@@ -89,6 +91,12 @@ export default {
         this.flag = true
       })
     },
+    getDevices(params) {
+      fetchDeviceList(params).then(response => {
+        this.deviceList = response.data.results
+        this.status = this.deviceList[0].status
+      })
+    },
     coordinate(row, column) {
       return row.longitude + ', ' + row.latitude
     },
@@ -109,6 +117,7 @@ export default {
   created() {
     const device_id = this.$store.getters.deviceID
     this.getDeviceLogs({ device_id })
+    this.getDevices({ device_id })
   }
 }
 </script>