fix(upgrade): unexpected removal of mqtt listener

src/constant.js

@@ -374,7 +374,7 @@ export const Quality = {
     videoWidth: 640,
     videoHeight: 360,
     videoBitRate: 36 * 1024,
-    frameRate: 1
+    frameRate: 10
   },
   ff: {
     videoWidth: 1280,

src/views/platform/upgrade/deploy/components/UpgradeProgress.vue

@@ -10,13 +10,9 @@
 </template>
 
 <script>
-import {
-  subscribe,
-  unsubscribe
-} from '@/utils/mqtt'
-
 export default {
   name: 'UpgradeProgress',
+  inject: ['monitor'],
   props: {
     deviceId: {
       type: String,
@@ -49,26 +45,27 @@ export default {
     this.$timer = -1
   },
   mounted () {
-    this.status === 1 && subscribe([`+/${this.deviceId}/apk/upgrade/progress`], this.onMessage)
+    this.status === 1 && this.monitor.addListener(this.deviceId, this)
   },
   beforeDestroy () {
     clearTimeout(this.$timer)
-    this.status === 1 && unsubscribe([`+/${this.deviceId}/apk/upgrade/progress`], this.onMessage)
+    this.status === 1 && this.monitor.removeListener(this.deviceId, this)
   },
   methods: {
-    onMessage (topic, message) {
-      const result = /^\d+\/(\d+)\/apk\/upgrade\/progress$/.exec(topic)
-      if (!result) {
+    onMessage (progress, timestamp) {
+      if (!progress) {
         return
       }
-      const deviceId = result[1]
-      if (deviceId === this.deviceId) {
-        clearTimeout(this.$timer)
+      clearTimeout(this.$timer)
+      this.percentage = progress
+      const delay = timestamp ? 5000 - (Date.now() - timestamp) : 5000
+      if (delay > 0) {
         this.hasInfo = true
-        this.percentage = JSON.parse(message).progress
         this.$timer = setTimeout(() => {
           this.hasInfo = false
-        }, 5000)
+        }, delay)
+      } else {
+        this.hasInfo = false
       }
     }
   }

src/views/platform/upgrade/deploy/index.vue

@@ -85,6 +85,10 @@
 </template>
 
 <script>
+import {
+  subscribe,
+  unsubscribe
+} from '@/utils/mqtt'
 import { getDevicesByTenant } from '@/api/device'
 import {
   getApks,
@@ -100,6 +104,11 @@ export default {
   components: {
     DeviceTypeTree
   },
+  provide () {
+    return {
+      monitor: this
+    }
+  },
   data () {
     return {
       version: {},
@@ -166,7 +175,54 @@ export default {
       tenant: null
     }
   },
+  created () {
+    this.$timer = -1
+  },
+  mounted () {
+    this.$map = new Map()
+    subscribe(['+/+/apk/upgrade/progress'], this.onMessage)
+  },
+  beforeDestroy () {
+    this.$map.clear()
+    unsubscribe(['+/+/apk/upgrade/progress'], this.onMessage)
+  },
   methods: {
+    addListener (deviceId, component) {
+      let data = this.$map.get(deviceId)
+      if (data) {
+        component.onMessage(data.progress, data.timestamp)
+      } else {
+        this.$map.set(deviceId, data = {
+          progress: 0,
+          timestamp: Date.now(),
+          listeners: new Set()
+        })
+      }
+      data.listeners.add(component)
+    },
+    removeListener (deviceId, component) {
+      const data = this.$map.get(deviceId)
+      if (data) {
+        data.listeners.delete(component)
+      }
+    },
+    onMessage (topic, message) {
+      const result = /^\d+\/(\d+)\/apk\/upgrade\/progress$/.exec(topic)
+      if (!result) {
+        return
+      }
+      const deviceId = result[1]
+      const data = this.$map.get(deviceId)
+      if (data) {
+        const progress = JSON.parse(message).progress
+        const timestamp = Date.now()
+        data.progress = progress
+        data.timestamp = timestamp
+        data.listeners.forEach(component => {
+          component.onMessage(progress)
+        })
+      }
+    },
     onAdd () {
       this.version = {
         name: '',