fix: the processing of offline status in the takeover page

src/views/device/detail/components/DeviceTakeOver/index.vue

@@ -17,11 +17,18 @@
         class="l-flex--col center"
       >
         <button
+          v-if="online"
           class="o-button"
           @click="createClient"
         >
           连接设备
         </button>
+        <div
+          v-else
+          class="u-color--info"
+        >
+          设备未上线
+        </div>
       </div>
       <template v-if="valid">
         <div class="l-flex--row c-sibling-item--v">
@@ -195,17 +202,30 @@ export default {
       }
     }
   },
-  created () {
-    this.createClient()
+  watch: {
+    online: {
+      handler (val) {
+        if (val) {
+          this.createClient()
+        } else {
+          this.destroyClient()
+        }
+      },
+      immediate: true
+    }
   },
   beforeDestroy () {
-    if (this.valid) {
-      this.$clientProxy.close()
-    } else {
-      this.$client?.end(true)
-    }
+    this.destroyClient()
   },
   methods: {
+    destroyClient () {
+      this.loading = false
+      if (this.valid) {
+        this.$clientProxy.close()
+      } else {
+        this.$client?.end(true)
+      }
+    },
     onMessage (topic, payload, requestPayload) {
       switch (topic) {
         case Topic.PRELOAD: