3.5

src/router/index.js

@@ -62,6 +62,11 @@ const routes = [
     name: 'TEST',
     component: () => import('../views/TEST.vue'),
   },
+  {
+    path: '/gateway-setting',
+    name: 'GatewaySetting',
+    component: () => import('../views/gateway/GatewaySetting.vue')
+  },
 ];
 
 const router = createRouter({

src/views/CarControl.vue

@@ -12,7 +12,8 @@
       </div>
       <div class="top-right-icons">
         <img :src="connectionImage" alt="link" class="top-icon">
-        <img :src="batteryImage" alt="battery" class="top-icon">
+        <!-- 注释掉电池图标 -->
+        <!-- <img :src="batteryImage" alt="battery" class="top-icon"> -->
       </div>
     </div>
 
@@ -101,7 +102,7 @@ export default {
       isControlPressed: false,
       ws: null,
       wsConnected: false,
-      batteryLevel: 0,
+      // batteryLevel: 0,  // 注释掉电池电量
       lastResponseTime: 0,
       connectionCheckInterval: null,
       sendInterval: null,
@@ -111,7 +112,9 @@ export default {
       button: "",
       audioConfig: audioTransmitter.data(),
       isRecording: false,
-      audioHandler: null
+      audioHandler: null,
+      reconnectTimer: null,  // 添加重连定时器引用
+      isComponentUnmounted: false  // 添加组件卸载标志
     }
   },
   created() {
@@ -126,11 +129,8 @@ export default {
     window.addEventListener("gamepadconnected", this.handleGamepadConnected);
     window.addEventListener("gamepaddisconnected", this.handleGamepadDisconnected);
 
+    this.isComponentUnmounted = false;  // 添加组件卸载标志
     this.initWebSocket();
-    // 进入页面时发送数据
-    this.$nextTick(() => {
-      this.sendCarInfo();
-    });
 
     // 启动连接状态检查
     this.connectionCheckInterval = setInterval(() => {
@@ -149,6 +149,14 @@ export default {
     };
   },
   beforeDestroy() {
+    this.isComponentUnmounted = true;  // 标记组件已卸载
+    
+    // 清除重连定时器
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+
     // 组件销毁前清理资源
     if (this.gamepadController) {
       this.gamepadController.destroy();
@@ -159,6 +167,7 @@ export default {
 
     if (this.ws) {
       this.ws.close();
+      this.ws = null;
     }
 
     if (this.connectionCheckInterval) {
@@ -238,14 +247,14 @@ export default {
           }
         };
 
-        this.ws.onclose = (event) => {
-          console.log('WebSocket 已断开, code:', event.code, 'reason:', event.reason);
-          this.wsConnected = false;
-          // 尝试重新连接
-          setTimeout(() => {
-            console.log('尝试重新连接...');
-            this.initWebSocket();
-          }, 3000);
+        this.ws.onclose = () => {
+          console.log('WebSocket连接关闭');
+          // 只有在组件没有被卸载的情况下才重连
+          if (!this.isComponentUnmounted) {
+            this.reconnectTimer = setTimeout(() => {
+              this.initWebSocket();
+            }, 3000);
+          }
         };
 
         this.ws.onerror = (error) => {
@@ -325,9 +334,8 @@ export default {
 
     updateCarStatus(data) {
       if (data.attribute) {
-        // 更新电池状态
-        this.batteryLevel = data.attribute.bat_quantity;
-        
+        // 注释掉电池状态更新
+        // this.batteryLevel = data.attribute.bat_quantity;
         // 更新障碍物显示状态
         this.obstacleStatus = {
           top: data.attribute.obstacle_sta === 0,
@@ -382,19 +390,33 @@ export default {
 
   },
   computed: {
+    // 注释掉电池图片计算属性
+    /*
     batteryImage() {
-      // 使用 require 来正确引用图片
       if (this.batteryLevel >= 80) return require('../assets/img/bat_full.png');
       if (this.batteryLevel >= 60) return require('../assets/img/bat_high.png');
       if (this.batteryLevel >= 40) return require('../assets/img/bat_medium.png');
       if (this.batteryLevel >= 20) return require('../assets/img/bat_low.png');
       return require('../assets/img/bat_empty.png');
     },
+    */
     connectionImage() {
       return this.wsConnected ?
         require('../assets/img/connect.png') :
         require('../assets/img/no_connect.png');
     }
+  },
+  setup() {
+    const router = useRouter();
+
+    // 添加返回按钮处理函数
+    const onClickLeft = () => {
+      router.back();
+    };
+
+    return {
+      onClickLeft,
+    };
   }
 }
 </script>
@@ -610,4 +632,9 @@ export default {
 .voice-icon-img.show-voice {
   opacity: 1;
 }
+
+/* 确保标题栏在最上层 */
+:deep(.van-nav-bar) {
+  z-index: 999;
+}
 </style>

src/views/home/home.vue

@@ -17,8 +17,9 @@
             <van-cell size="large" class="custom-cell" title="预警设置" icon="warning-o" is-link value="预警" @click="goto('warning')" />
             <van-cell size="large" class="custom-cell" title="远程喊话" icon="bullhorn-o" is-link value="喊话" @click="navigateTo('web/voice_copy.html')" />
             <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('CarControl')" />
-            <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('TEST')" />
-            <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('AudioPlay')" />
+            <!-- <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('TEST')" /> -->
+            <!-- <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('AudioPlay')" /> -->
+            <van-cell size="large" class="custom-cell" title="网关设置" icon="car" is-link value="控制" @click="goto('GatewaySetting')" />
           </van-cell-group>
         </div>
       </div>