feat: complete device detail

support device online status refresh, show sensor data acquisition time and make some style adjustments

src/views/dashboard/index.vue

@@ -318,7 +318,7 @@ export default {
 
 .c-devices {
   display: grid;
-  grid-template-columns: repeat(3, minmax(100px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
   grid-row-gap: $spacing;
   grid-column-gap: $spacing;
   align-items: start;

src/views/device/detail/components/DeviceAlarm.vue

@@ -127,10 +127,10 @@ export default {
       return {
         picUrl: pic && picUrl ? getThumbnailUrl(picUrl) : null,
         keyName: picUrl,
-        type: ['疑似黑屏'][type],
-        handle: ['应用重启', '设备重启', '恢复出厂'][handle],
-        status: ['primary', 'success', 'danger'][status],
-        statusTip: ['处理中', '成功', '失败'][status],
+        type: ['疑似黑屏', '设备离线'][type],
+        handle: ['应用重启', '设备重启', '恢复出厂', '未干预'][handle],
+        status: ['primary', 'success', 'danger', 'primary'][status],
+        statusTip: ['处理中', '成功', '失败', '无'][status],
         note, email, happenTime
       }
     },

src/views/device/detail/components/DeviceStatus.vue

@@ -12,7 +12,10 @@
       </div>
     </div>
     <div class="l-flex__fill u-overflow-y--auto">
-      <div class="c-status-grid">
+      <div
+        class="c-status-grid"
+        :class="{ less: active === 'sensor' }"
+      >
         <template v-if="active === 'box'">
           <screen-shot class="c-status-grid__item" />
           <download class="c-status-grid__item" />
@@ -96,11 +99,15 @@ export default {
 
 .c-status-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
   grid-row-gap: $spacing;
   grid-column-gap: $spacing;
   align-items: start;
 
+  &.less {
+    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
+  }
+
   &__item {
     height: 180px;
     border: 1px solid #d5d9e4;

src/views/device/detail/components/Sensor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="l-flex--col o-status o-senser has-padding">
+  <div class="l-flex--col o-status o-senser">
     <div class="l-flex--row l-flex__none">
       <i
         class="l-flex__none o-status__icon"
@@ -26,7 +26,8 @@
       :key="item.key"
       class="l-flex__none l-flex--row o-senser__more"
     >
-      <div class="l-flex__none">传感器{{ item.key }}</div>
+      <div class="l-flex__none">{{ item.time }}</div>
+      <div class="l-flex__none o-senser__name">传感器{{ item.key }}</div>
       <div class="l-flex__fill o-senser__value">{{ item.value }}</div>
     </div>
   </div>
@@ -66,7 +67,11 @@ export default {
       return this.list.length ? this.list[0].value : '未知'
     },
     sensor () {
-      return this.list.length > 1 ? `传感器${this.list[0].key}` : null
+      return this.list.length
+        ? this.list.length === 1
+          ? this.list[0].time
+          : `${this.list[0].time} 传感器${this.list[0].key}`
+        : null
     },
     more () {
       return this.list.length > 1 ? this.list.slice(1, 3) : []
@@ -88,19 +93,26 @@ export default {
 
 <style lang="scss" scoped>
 .o-senser {
+  padding: 12px 16px 16px;
   line-height: 1;
 
   &__current {
     margin-top: 6px;
+    color: #d5d9e4;
     font-size: 12px;
   }
 
   &__more {
     padding: 8px 0;
     color: #8e929c;
+    font-size: 14px;
     border-bottom: 1px solid #edf0f6;
   }
 
+  &__name {
+    margin: 0 16px 0 24px;
+  }
+
   &__value {
     text-align: right;
   }

src/views/device/detail/index.vue

@@ -70,7 +70,8 @@
 import { getDevice } from '@/api/device'
 import {
   start,
-  stop
+  stop,
+  addListener
 } from './monitor'
 import DeviceInfo from './components/DeviceInfo'
 import DeviceStatus from './components/DeviceStatus'
@@ -87,21 +88,15 @@ export default {
     return {
       loading: true,
       device: null,
-      active: 'info',
-      showProgress: false,
-      downloadCount: 0
+      isActivated: false,
+      isOnline: false,
+      active: 'info'
     }
   },
   computed: {
     deviceId () {
       return this.$route.params.id
     },
-    isActivated () {
-      return this.device?.activate === 2
-    },
-    isOnline () {
-      return this.device?.onlineStatus === 1
-    },
     statusType () {
       return this.isActivated
         ? this.isOnline
@@ -138,11 +133,10 @@ export default {
   },
   watch: {
     deviceId () {
+      console.log(this.deviceId)
       stop()
       this.active = 'info'
       this.device = null
-      this.showProgress = false
-      this.downloadCount = 0
       this.getDevice()
     }
   },
@@ -157,9 +151,12 @@ export default {
       this.loading = true
       const id = this.deviceId
       getDevice(id).then(({ data }) => {
-        this.device = data
         if (this.deviceId === id) {
+          this.device = data
+          this.isActivated = data.activate === 2
+          this.isOnline = data.onlineStatus === 1
           start(this.device)
+          addListener('online', this.onUpdate)
         }
       }).finally(() => {
         if (this.deviceId === id) {
@@ -167,17 +164,9 @@ export default {
         }
       })
     },
-    onUpdate (count) {
-      this.downloadCount = count
-    },
-    onInvoke (invoke) {
-      switch (invoke) {
-        case 'progress':
-          this.showProgress = true
-          break
-        default:
-          break
-      }
+    onUpdate (online) {
+      this.isActivated = true
+      this.isOnline = online
     }
   }
 }

src/views/device/detail/monitor.js

@@ -4,11 +4,15 @@ import {
   subscribe,
   unsubscribe
 } from '@/utils/mqtt'
-import { parseByte } from '@/utils'
+import {
+  parseTime,
+  parseByte
+} from '@/utils'
 
 let productId = null
 let deviceId = null
 let cbs = null
+
 let download = null
 let screenshotPic = null
 let sensor = null
@@ -22,6 +26,8 @@ export function start (device) {
   productId = device.productId
   deviceId = device.id
   subscribe([
+    `${productId}/${deviceId}/online`,
+    `${productId}/${deviceId}/offline`,
     `${productId}/${deviceId}/resource/progress`,
     `${productId}/${deviceId}/screenshot/reply`
   ], onMessage)
@@ -33,6 +39,8 @@ export function start (device) {
 export function stop () {
   if (productId) {
     unsubscribe([
+      `${productId}/${deviceId}/online`,
+      `${productId}/${deviceId}/offline`,
       `${productId}/${deviceId}/resource/progress`,
       `${productId}/${deviceId}/screenshot/reply`
     ], onMessage)
@@ -87,9 +95,13 @@ function invoke (type, cb) {
   }
 }
 
-function emit (type) {
+function emit (type, val) {
   if (cbs && cbs[type]) {
-    cbs && cbs[type].forEach(cb => invoke(type, cb))
+    if (val == null) {
+      cbs[type].forEach(cb => invoke(type, cb))
+    } else {
+      cbs[type].forEach(cb => cb(val))
+    }
   }
 }
 
@@ -104,6 +116,12 @@ function onMessage (topic, message) {
 
 function onUpdate (invoke, message) {
   switch (invoke) {
+    case 'online':
+      emit('online', true)
+      break
+    case 'offline':
+      emit('online', false)
+      break
     case 'resource/progress':
       onUpdateFile(message)
       break
@@ -164,10 +182,11 @@ function transformValue (type, value, unit) {
 }
 
 function transform (type, arr) {
-  return arr.sort((a, b) => b.sensorValue - a.sensorValue).map(({ sensorAddr, sensorValue, sensorValueUnit }) => {
+  return arr.sort((a, b) => b.sensorValue - a.sensorValue).map(({ sensorAddr, sensorValue, sensorValueUnit, logDate }) => {
     return {
       key: sensorAddr,
-      value: transformValue(type, sensorValue, sensorValueUnit)
+      value: transformValue(type, sensorValue, sensorValueUnit),
+      time: parseTime(logDate * 1000, '{y}.{m}.{d} {h}:{i}:{s}')
     }
   })
 }

vue.config.js

@@ -15,7 +15,7 @@ const features = {
   // 可删除已提交审核的数据
   __DELETABLE_FOR_ADMIN__: true,
   // 传感器
-  __SENSOR__: !isProd || false,
+  __SENSOR__: !isProd || true,
   __SENSOR_ELK__: false
 }