websocket 连接IP修改

src/pages/shells/index.vue

@@ -53,6 +53,7 @@
       :wsConnected="isConnected" 
       :vehicleConnected="vehicleConnected" 
       :rcsConnected="rcsConnected"
+      @configModalHandle="configModalHandle"
     />
   </div>
 </template>
@@ -208,8 +209,22 @@ export default {
         clearTimeout(this.reconnectTimer)
         this.reconnectTimer = null
       }
+
+      this.isInitializing = false
+      this.isConnecting = true
+      this.isConnected = false
+      this.vehicleConnected = false
+      this.rcsConnected = false
+
+      this.topInfo = {}
+      this.taskSeq = []
+      this.currentStep = null
+
       this.closeWebSocket()
-      this.initWebSocket()
+
+      setTimeout(() => {
+        this.initWebSocket()
+      }, 300)
     },
     // 滚动区域
     checkTextOverflow () {
@@ -247,10 +262,15 @@ export default {
       this.isInitializing = true
       this.isConnecting = true
 
-      if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
+      if (this.reconnectTimer) {
+        clearTimeout(this.reconnectTimer)
+        this.reconnectTimer = null
+      }
+
       const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
       const lang = this.$i18n.locale.slice(0, 2)
       const wsUrl = `ws://${wsHost}/webSocket/VehicleInfo/${this.userRole}?lang=${lang}`
+
       this.closeWebSocket()
 
       try {
@@ -319,8 +339,12 @@ export default {
     },
     closeWebSocket () {
       if (this.websocket) {
-        this.websocket.onclose = null
+        try {
-        this.websocket.close(1000, '正常关闭')
+          this.websocket.onclose = null
+          this.websocket.close(1000, 'Switching connection')
+        } catch (e) {
+          console.log(e)
+        }
         this.websocket = null
       }
     },

src/pages/shells/websocket-status.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="show_modal">
+    <el-row type="flex" class="header-container" justify="end" align="middle">
+      <i class="el-icon-s-tools icon-tools" @click="configModal"></i>
+    </el-row>
     <div class="connection-content">
       <!-- 水平直线：左半部分 + 右半部分 -->
       <div class="line-wrapper" :class="{ 'animated': isConnecting && !wsConnected, 'full-bright': wsConnected }"></div>
@@ -189,6 +192,9 @@ export default {
           }
         })
       }, 100)
+    },
+    configModal () {
+      this.$emit('configModalHandle')
     }
   }
 }
@@ -391,4 +397,16 @@ export default {
   color: #fff;
   background-color: #00d0fc;
 }
+.header-container {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: .48rem;
+  padding: 0 2%;
+}
+.icon-tools {
+  font-size: .24rem;
+  color: #fff;
+  cursor: pointer;
+}
 </style>