feat: version comparison for topology map

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

@@ -50,7 +50,7 @@ export default {
       return this.info?.manufacturer
     },
     topology () {
-      return this.info ? this.info.topology ? '已上传' : '未上传' : ''
+      return this.info?.topology?.version ?? '未上传'
     },
     screen () {
       return this.info?.screen

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

@@ -32,7 +32,7 @@
             drag
           >
             <div class="u-color--black">
-              {{ defaults.topology ? '已上传' : '未上传' }}
+              {{ defaults.topology }}
             </div>
           </el-upload>
         </div>
@@ -253,7 +253,7 @@ export default {
           temperature: this.info.temperature,
           voltage: this.info.voltage,
           async: this.info.async,
-          topology: !!this.info.topology
+          topology: this.info.topology?.version ?? '未上传'
         }
         if (!this.manufacturers.loaded) {
           this.manufacturers.list = [{ value: this.info.manufacturerId, label: this.info.manufacturer }]
@@ -338,8 +338,6 @@ export default {
       }).finally(() => {
         this.progress = 100
         this.showProgress = false
-      }).then(() => {
-        this.defaults.topology = true
       })
     },
     onChangeProp (key) {

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

@@ -1,8 +1,9 @@
 <template>
   <div
     class="l-card-grid"
-    :class="{ empty: !cards }"
+    :class="{ empty: !cards, mismatched: message }"
     :style="style"
+    :message="message"
   >
     <div
       v-for="card in cards"
@@ -42,13 +43,22 @@ export default {
   data () {
     return {
       style: null,
-      cards: null
+      cards: null,
+      message: ''
+    }
+  },
+  computed: {
+    topology () {
+      return this.info?.topology
+    },
+    version () {
+      return this.topology?.version
     }
   },
   watch: {
     info: {
       handler () {
-        this.setDefaults(this.info?.topology.rxcList)
+        this.setDefaults(this.topology?.rxcList)
       },
       immediate: true
     }
@@ -69,7 +79,7 @@ export default {
             return a.sub - b.sub
           }
           return a.port - b.port
-        }).map(({ row_index, col_index, port, sub }, index) => {
+        }).map(({ version, port, sub, row_index, col_index }, index) => {
           maxRow = Math.max(maxRow, row_index)
           maxCol = Math.max(maxCol, col_index)
           let dirc = ''
@@ -98,12 +108,13 @@ export default {
             },
             status: 'unknown',
             text: '未知',
-            tip, dirc, port, sub
+            version, tip, dirc
           }
         })
       } else {
         this.cards = null
       }
+      this.message = null
       this.$runtime = false
       this.style = {
         gridTemplateRows: `repeat(${maxRow}, 96px)`,
@@ -112,19 +123,30 @@ export default {
       this.check()
     },
     check () {
-      if (!this._inactive && this.cards) {
+      if (!this._inactive && this.cards?.length) {
         addListener('topology', this.onUpdate)
       }
     },
     onUpdate (data) {
-      if (data?.rxcList) {
-        const map = {}
-        data.rxcList.forEach(({ port, sub }) => {
-          map[`${port}-${sub}`] = 1
-        })
-        this.cards.forEach(card => {
-          this.setStatus(card, map[card.key] ?? 0)
-        })
+      if (data) {
+        const { version, rxcList } = data
+        if (version === this.version) {
+          this.message = null
+          if (rxcList) {
+            const map = {}
+            rxcList.forEach(({ port, sub, version }) => {
+              map[`${port}-${sub}`] = version
+            })
+            this.cards.forEach(card => {
+              this.setStatus(card, card.version === map[card.key] ? 1 : map[card.key] ? 3 : 2)
+            })
+          }
+        } else {
+          this.message = `${this.version} -> ${version}`
+          this.cards.forEach(card => {
+            this.setStatus(card, 0)
+          })
+        }
       } else if (!this.$runtime) {
         this.getRuntime()
       }
@@ -132,12 +154,14 @@ export default {
     getRuntime () {
       getReceivingCardTopology(this.$route.params.id, { custom: true }).then(({ data }) => {
         this.$runtime = true
-        this.onUpdate(data)
+        if (data?.version === this.version) {
+          this.onUpdate(data)
+        }
       })
     },
     setStatus (card, status) {
-      card.status = ['error', 'normal'][status]
-      card.text = ['异常', '正常'][status]
+      card.status = ['unknown', 'normal', 'error', 'error'][status]
+      card.text = ['未知', '正常', '异常', '版本不匹配'][status]
     }
   }
 }
@@ -146,10 +170,10 @@ export default {
 <style lang="scss" scoped>
 .l-card-grid {
   display: grid;
+  position: relative;
   overflow: auto;
 
   &.empty {
-    position: relative;
     background: url("~@/assets/screen.png") 0 0 / 96px 96px repeat;
 
     &::after {
@@ -169,6 +193,18 @@ export default {
       transform: translate(-50%, -50%);
     }
   }
+
+  &.mismatched::before {
+    content: attr(message);
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 4px 6px;
+    color: #fff;
+    font-size: 18px;
+    background-color: rgba($info--dark, 0.8);
+    z-index: 99;
+  }
 }
 
 .o-receiving-card {
@@ -189,8 +225,8 @@ export default {
     position: absolute;
     top: 0;
     right: 0;
-    width: 40px;
-    padding: 4px 0;
+    min-width: 40px;
+    padding: 4px 6px;
     color: #fff;
     font-size: 12px;
     line-height: 1;