修改

src/pages/shells/index.vue

@@ -18,7 +18,7 @@
             <div class="absolute elec-qty-border"></div>
             <div class="elec-txt"></div>
           </div>
-          <i class="el-icon-user-solid icon-user" :style="{'color': $store.getters.userInfo === 'true' ? '#00d0fc' : '#737f92'}" @click="loginModalHandle"></i>
+          <i class="el-icon-user-solid icon-user" :style="{'color': userRole === 1 ? '#00d0fc' : '#737f92'}" @click="loginModalHandle"></i>
           <i class="el-icon-s-tools icon-tools" @click="configModalHandle"></i>
         </el-row>
       </el-col>
@@ -47,7 +47,7 @@
 <script>
 import LoginModal from './login-modal.vue'
 import ConfigModal from './config-modal.vue'
-import { sendWebsocket, closeWebsocket } from '@/config/websocket.js'
+import { mapGetters } from 'vuex'
 export default {
   name: 'ShellIndex',
   components: {
@@ -56,7 +56,8 @@ export default {
   },
   data () {
     return {
-      timer: null,
+      websocket: null, // WebSocket实例
+      reconnectTimer: null, // 重连计时器
       topInfo: {},
       // topInfo: {
       //   batteryPower: -1.0,
@@ -85,6 +86,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['serverUrl', 'userRole']),
     exception () {
       let str = ''
       if (JSON.stringify(this.topInfo) !== '{}') {
@@ -94,23 +96,20 @@ export default {
     }
   },
   created () {
-    this._queryHead()
-  },
-  mounted () {
-    this.checkTextOverflow()
-    window.addEventListener('resize', this.checkTextOverflow)
     // this.$store.dispatch('setAgvObj', this.topInfo)
     // this.taskSeq = this.topInfo.task_seq.split('-')
     // const target = this.topInfo.task_point
     // this.currentStep = this.taskSeq.findIndex(item => item === target)
+    this.initWebSocket()
+  },
+  mounted () {
+    this.checkTextOverflow()
+    window.addEventListener('resize', this.checkTextOverflow)
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.checkTextOverflow)
-    clearTimeout(this.timer)
-    closeWebsocket(true)
-  },
-  destroyed () {
-    clearTimeout(this.timer)
+    this.closeWebSocket() // 组件销毁时关闭连接
+    if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
   },
   methods: {
     // 滚动区域
@@ -143,23 +142,52 @@ export default {
         this.$refs.configModal.init()
       })
     },
-    _queryHead () {
-      const wsHost = process.env.VUE_APP_API_BASE_URL.replace(/^https?:\/\//, '')
-      const sid = this.$store.getters.userInfo === 'true' ? 1 : 2
-      sendWebsocket(`ws://${wsHost}/webSocket/VehicleInfo/${sid}`, {}, this.wsMessage, this.wsErr)
+    // 初始化WebSocket连接
+    initWebSocket () {
+      if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
+      const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
+      const wsUrl = `ws://${wsHost}/webSocket/VehicleInfo/${this.userRole}`
+      this.closeWebSocket()
+      this.websocket = new WebSocket(wsUrl)
+      this.websocket.onopen = () => {}
+      this.websocket.onmessage = (event) => {
+        try {
+          const res = JSON.parse(event.data)
+          this.handleWebSocketMessage(res)
+        } catch (error) {
+          console.error('WebSocket消息解析失败:', error)
+        }
+      }
+      this.websocket.onerror = (error) => {
+        this.$message.error('WebSocket连接错误:', error)
+      }
+      this.websocket.onclose = (event) => {
+        console.log(`WebSocket连接关闭: 代码=${event.code}, 原因=${event.reason}`)
+        this.reconnectWebSocket()
+      }
     },
-    wsMessage (res) {
-      clearTimeout(this.timer)
+    handleWebSocketMessage (res) {
+      if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
       this.topInfo = res.data
-      this.taskSeq = this.topInfo.task_seq.split('-')
-      const target = this.topInfo.task_point
-      this.currentStep = this.taskSeq.findIndex(item => item === target)
+      if (this.topInfo.task_seq) {
+        this.taskSeq = this.topInfo.task_seq.split('-')
+        const target = this.topInfo.task_point
+        this.currentStep = this.taskSeq.findIndex(item => item === target)
+      }
       this.$store.dispatch('setAgvObj', this.topInfo)
     },
-    wsErr () {
-      this.timer = setTimeout(() => {
-        this._queryHead()
-      }, 10000)
+    closeWebSocket () {
+      if (this.websocket) {
+        this.websocket.close(1000, '正常关闭')
+        this.websocket = null
+      }
+    },
+    reconnectWebSocket () {
+      if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = setTimeout(() => {
+        this.$message.error('尝试重新连接WebSocket...')
+        this.initWebSocket()
+      }, 5000) // 5秒后重连
     }
   }
 }