feat: receiving card status style

src/utils/adapter/monitor.js

@@ -32,7 +32,7 @@ const injectMap = new Map()
 let client = null
 export function startMonitor () {
   if (client) {
-    return
+    return client
   }
   client = createClient({
     will: {
@@ -128,6 +128,8 @@ export function startMonitor () {
       })
     }
   })
+
+  return client
 }
 
 function emit (id, key, value) {
@@ -282,7 +284,7 @@ function doUnsubscribe () {
           cbMap.delete(id)
           injectMap.delete(id)
         })
-        client.unsubscribe(topics)
+        client?.unsubscribe(topics)
         unsubscribeIds = new Set()
         console.log('monitor unsubscribe', topics)
       }
@@ -463,18 +465,18 @@ export function getReceivingCardStatusFromServer (id) {
       return
     }
     const message = JSON.parse(res.data)
-    const { timestamp } = getCacheById(id)[ThirdPartyDevice.RECEIVING_CARD]
-    console.log(timestamp, message.timestamp, message.timestamp <= timestamp)
-    if (timestamp && message.timestamp <= timestamp) {
+    const currTimestamp = Number(getCacheById(id)[ThirdPartyDevice.RECEIVING_CARD].timestamp)
+    const timestamp = Number(message.timestamp)
+    if (currTimestamp && timestamp <= currTimestamp) {
       return
     }
     const data = getReceivingCardStatusByMessage(message)
     if (data.success) {
       const info = {
-        timestamp: message.timestamp,
+        timestamp,
         ...data.data
       }
-      if (Date.now() - message.timestamp > TIMEOUT_MILLISECOND) {
+      if (Date.now() - timestamp > TIMEOUT_MILLISECOND) {
         info.status = Status.WARNING
       }
       emit(id, ThirdPartyDevice.RECEIVING_CARD, info)

src/utils/adapter/nova.js

@@ -203,7 +203,7 @@ export function getReceivingCardStatus ({ screenMonitorData }) {
             : Status.OK
           : Status.ERROR
       : Status.ERROR,
-    receivers
+    receivers: Object.freeze(receivers)
   }
 }
 

src/views/device/detail/components/DeviceExternal/components/ReceivingCard.vue

@@ -10,9 +10,22 @@
       </div>
     </template>
     <template v-else>
+      <template v-if="messageOptions">
+        <div class="l-flex--row c-sibling-item--v u-font-size--sm u-line-height">
+          <span class="c-sibling-item u-bold">
+            同步时间
+          </span>
+          <span
+            class="c-sibling-item"
+            :class="messageOptions.color"
+          >
+            {{ messageOptions.timestamp }}
+          </span>
+        </div>
+      </template>
       <div
         v-loading="loading"
-        class="l-flex__auto u-overflow--auto"
+        class="l-flex__auto c-sibling-item--v u-overflow--auto"
       >
         <div
           class="c-receiving-card-grid"
@@ -43,12 +56,15 @@
 </template>
 
 <script>
-import { ThirdPartyDevice } from '@/constant'
+import { ThirdPartyDevice } from '@/constant.js'
+import { parseTime } from '@/utils'
 import {
   Status,
   addListener,
   removeListener,
-  getReceivingCardStatusFromServer
+  getReceivingCardStatusFromServer,
+  TIMEOUT_MILLISECOND,
+  EXPIRED_MILLISECOND
 } from '@/utils/adapter'
 import { getThirdPartyDevicesByThirdPartyDevice } from '@/api/mesh'
 import { getReceivingCardTopology } from '@/api/external'
@@ -68,6 +84,7 @@ export default {
       cards: [],
       topology: null,
       receivers: [],
+      messageOptions: null,
       style: ''
     }
   },
@@ -99,12 +116,30 @@ export default {
     onMessage (value, key) {
       if (!key || key === ThirdPartyDevice.RECEIVING_CARD) {
         console.log('monitor topology', value)
-        this.receivers = value[ThirdPartyDevice.RECEIVING_CARD].receivers
-        if (value[ThirdPartyDevice.RECEIVING_CARD].status === Status.LOADING) {
+        const { status, timestamp, receivers } = value[ThirdPartyDevice.RECEIVING_CARD]
+        this.receivers = receivers
+        this.messageOptions = this.transformMessageOptions(status, timestamp)
+        if (status === Status.LOADING) {
           getReceivingCardStatusFromServer(this.device.id)
         }
       }
     },
+    transformMessageOptions (status, timestamp) {
+      if (status <= Status.LOADING) {
+        return null
+      }
+      const diff = Date.now() - timestamp
+      let color = 'u-color--success'
+      if (diff > EXPIRED_MILLISECOND) {
+        color = 'u-color--error'
+      } else if (diff > TIMEOUT_MILLISECOND) {
+        color = 'u-color--warning'
+      }
+      return {
+        color,
+        timestamp: parseTime(timestamp)
+      }
+    },
     getTopology () {
       if (this.$instId) {
         this.getReceivingCardTopology()