+
![link]()
+ 
@@ -42,7 +46,7 @@
@@ -13,6 +16,7 @@
-
@@ -68,10 +72,11 @@
@@ -117,12 +122,15 @@ export default {
reconnectTimer: null, // 添加重连定时器引用
isComponentUnmounted: false, // 添加组件卸载标志
isInitialized: false, // 添加初始化标志
+ contenttext: "",
+ _mousePressed: false, // 添加鼠标/触摸按下标志
+ contentptz: "",
}
},
created() {
- // 初始化 GamepadController，禁用调试模式
+ // 初始化 GamepadController，启用调试模式
this.gamepadController = new GamepadController({
- debug: false, // 将 debug 设置为 false
+ debug: false, // 启用调试
deadZone: 0.1,
updateInterval: 50
});
@@ -131,24 +139,39 @@ export default {
window.addEventListener("gamepadconnected", this.handleGamepadConnected);
window.addEventListener("gamepaddisconnected", this.handleGamepadDisconnected);
- this.isComponentUnmounted = false; // 添加组件卸载标志
+ this.isComponentUnmounted = false;
this.initWebSocket();
// 启动连接状态检查
this.connectionCheckInterval = setInterval(() => {
this.checkConnectionStatus();
- }, 3000); // 每3秒检查一次
+ }, 3000);
// 启动定时发送数据
this.sendInterval = setInterval(() => {
this.sendControlData();
- }, 400); // 每100ms发送一次
+ }, 400);
// 初始化音频处理器
this.audioHandler = {
...audioTransmitter.data(),
...audioTransmitter.methods
};
+
+ // 初始化音频 WebSocket 连接
+ this.audioHandler.audioWs = new WebSocket('ws://192.168.4.103/ws');
+
+ this.audioHandler.audioWs.onopen = () => {
+ console.log('音频 WebSocket 已连接');
+ };
+
+ this.audioHandler.audioWs.onerror = (error) => {
+ console.error('音频 WebSocket 错误:', error);
+ };
+
+ this.audioHandler.audioWs.onclose = () => {
+ console.log('音频 WebSocket 已关闭');
+ };
},
beforeDestroy() {
this.isComponentUnmounted = true; // 标记组件已卸载
@@ -159,19 +182,7 @@ export default {
this.reconnectTimer = null;
}
- // 组件销毁前清理资源
- if (this.gamepadController) {
- this.gamepadController.destroy();
- }
- // 移除全局事件监听
- window.removeEventListener("gamepadconnected", this.handleGamepadConnected);
- window.removeEventListener("gamepaddisconnected", this.handleGamepadDisconnected);
-
- if (this.ws) {
- this.ws.close();
- this.ws = null;
- }
-
+ // 清除定时器
if (this.connectionCheckInterval) {
clearInterval(this.connectionCheckInterval);
}
@@ -180,10 +191,34 @@ export default {
clearInterval(this.sendInterval);
}
+ // 移除全局事件监听
+ window.removeEventListener("gamepadconnected", this.handleGamepadConnected);
+ window.removeEventListener("gamepaddisconnected", this.handleGamepadDisconnected);
+
+ // 销毁手柄控制器
+ if (this.gamepadController) {
+ this.gamepadController.destroy();
+ }
+
// 确保停止音频传输
if (this.audioHandler && this.audioHandler.isRecording) {
this.audioHandler.stopRecording();
}
+
+ // 关闭音频 WebSocket 连接
+ if (this.audioHandler && this.audioHandler.audioWs) {
+ console.log('关闭音频 WebSocket 连接');
+ this.audioHandler.audioWs.close();
+ this.audioHandler.audioWs = null;
+ }
+
+ // 关闭控制 WebSocket 连接
+ if (this.ws) {
+ console.log('关闭控制 WebSocket 连接');
+ this.ws.close();
+ this.ws = null;
+ this.wsConnected = false;
+ }
},
methods: {
goto(path) {
@@ -207,17 +242,19 @@ export default {
}
},
handleControlPress() {
+ console.log('按钮被按下，设置 isControlPressed = true');
+ this._mousePressed = true;
this.isControlPressed = true;
// 开始音频传输
- console.log('开始音频传输...');
if (this.audioHandler) {
this.audioHandler.startRecording();
}
},
handleControlRelease() {
+ console.log('按钮被释放，设置 isControlPressed = false');
+ this._mousePressed = false;
this.isControlPressed = false;
// 停止音频传输
- console.log('停止音频传输...');
if (this.audioHandler) {
this.audioHandler.stopRecording();
}
@@ -289,7 +326,7 @@ export default {
// 根据角度计算方向值（0-4）
let direction = 0; // 默认停止
- if (speed > 10) { // 添加速度阈值，避免小幅度移动
+ if (speed > 10) {
if (angle >= 315 || angle < 45) {
direction = 4; // 右转
} else if (angle >= 45 && angle < 135) {
@@ -301,27 +338,29 @@ export default {
}
}
- // 更新控制按钮状态
- const wasPressed = this.isControlPressed;
- this.isControlPressed = this.gamepadController.rightJoystickPressed;
+ // 检测手柄右摇杆按钮状态，但不覆盖鼠标/触摸按下的状态
+ const gamepadButtonPressed = this.gamepadController.rightJoystickPressed;
- // 检测按钮状态变化并处理音频传输
- if (!wasPressed && this.isControlPressed) {
- // 按钮刚被按下
- console.log('手柄按钮按下，开始音频传输...');
+ // 如果手柄按钮被按下且当前状态为未按下，则开始录音
+ if (gamepadButtonPressed && !this.isControlPressed) {
+ console.log('手柄按钮被按下，开始录音');
+ this.isControlPressed = true;
if (this.audioHandler) {
this.audioHandler.startRecording();
}
- } else if (wasPressed && !this.isControlPressed) {
- // 按钮刚被释放
- console.log('手柄按钮释放，停止音频传输...');
+ }
+ // 如果手柄按钮被释放且当前状态为按下，则停止录音
+ else if (!gamepadButtonPressed && this.isControlPressed && !this._mousePressed) {
+ console.log('手柄按钮被释放，停止录音');
+ this.isControlPressed = false;
if (this.audioHandler) {
this.audioHandler.stopRecording();
}
}
- // 更新手柄相关状态
- this.lastDirection = direction;
+ // 更新状态
+ this.contenttext = direction;
+ this.lastDirection = angle;
if (directionAxis9 !== undefined) this.platform_fun = directionAxis9;
if (speed !== undefined) this.lastSpeed = speed;
}
@@ -357,15 +396,16 @@ export default {
top: data.attribute.obstacle_sta === 1,
bottom: data.attribute.obstacle_sta === 2
};
-
+
// 只在初始化时更新开关状态
- if (!this.isInitialized) {
- this.screenStatus = data.attribute.screen_en === 1;
- this.warningLightStatus = data.attribute.warn_light_en === 1;
- this.followStatus = data.attribute.follow_en === 1;
- this.obstacleAvoidEnabled = data.attribute.obstacle_avoid_en === 1;
- this.isInitialized = true;
- }
+ // if (!this.isInitialized) {
+ this.screenStatus = data.attribute.screen_en === 1;
+ this.warningLightStatus = data.attribute.warn_light_en === 1;
+ this.followStatus = data.attribute.follow_en === 1;
+ this.obstacleAvoidEnabled = data.attribute.obstacle_avoid_en === 1;
+ this.contentptz = data.attribute.platform;
+ // this.isInitialized = true;
+ // }
}
// 更新方向状态
@@ -431,6 +471,64 @@ export default {
}
},
+ handleBack() {
+ // 先标记组件已卸载，防止重连
+ this.isComponentUnmounted = true;
+
+ // 立即清除所有定时器
+ if (this.connectionCheckInterval) {
+ clearInterval(this.connectionCheckInterval);
+ this.connectionCheckInterval = null;
+ }
+ if (this.sendInterval) {
+ clearInterval(this.sendInterval);
+ this.sendInterval = null;
+ }
+ if (this.reconnectTimer) {
+ clearTimeout(this.reconnectTimer);
+ this.reconnectTimer = null;
+ }
+
+ // 停止音频传输
+ if (this.audioHandler && this.audioHandler.isRecording) {
+ this.audioHandler.stopRecording();
+ }
+
+ // 移除全局事件监听
+ window.removeEventListener("gamepadconnected", this.handleGamepadConnected);
+ window.removeEventListener("gamepaddisconnected", this.handleGamepadDisconnected);
+
+ // 销毁手柄控制器
+ if (this.gamepadController) {
+ this.gamepadController.destroy();
+ this.gamepadController = null;
+ }
+
+ // 断开所有 WebSocket 连接
+ const closePromises = [];
+
+ if (this.ws) {
+ console.log('断开控制 WebSocket 连接');
+ this.ws.onclose = null; // 移除重连监听
+ this.ws.close();
+ this.ws = null;
+ this.wsConnected = false;
+ }
+
+ if (this.audioHandler && this.audioHandler.audioWs) {
+ console.log('断开音频 WebSocket 连接');
+ this.audioHandler.audioWs.onclose = null; // 移除重连监听
+ this.audioHandler.audioWs.close();
+ this.audioHandler.audioWs = null;
+ }
+
+ // 确保所有清理工作完成后再跳转
+ setTimeout(() => {
+ // 返回主页
+ this.$router.push('/');
+ }, 100);
+ },
+
},
computed: {
// 注释掉电池图片计算属性
@@ -450,7 +548,7 @@ export default {
},
getDirectionText() {
// 根据 direction 值显示对应状态
- switch (this.lastDirection) {
+ switch (this.contenttext) {
case 0:
return '遥控车已停止';
case 1:
@@ -464,6 +562,18 @@ export default {
default:
return '遥控车当前状态';
}
+ },
+ getptz() {
+ switch (this.contentptz) {
+ case 0:
+ return '云台静止';
+ case 1:
+ return '云台上升';
+ case 2:
+ return '云台下降';
+ default:
+ return '云台静止';
+ }
}
},
setup() {
@@ -526,7 +636,8 @@ export default {
display: flex;
align-items: center;
justify-content: center;
- min-width: 180px; /* 确保文本变化时盒子大小稳定 */
+ min-width: 180px;
+ /* 确保文本变化时盒子大小稳定 */
}
.main-content {
@@ -675,6 +786,12 @@ export default {
align-items: center;
transition: border-color 0.3s ease;
cursor: pointer;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.circle-border.pressed {
@@ -701,4 +818,23 @@ export default {
:deep(.van-nav-bar) {
z-index: 999;
}
+
+.back-button {
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ font-size: 24px;
+ /* 调整箭头大小 */
+ color: #00ffff;
+ /* 使用青色，与其他元素保持一致 */
+}
+
+.back-button:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+}
云台状态
+ {{ getptz }}
@@ -68,10 +72,11 @@
+ @mouseup="handleControlRelease" @mouseleave="handleControlRelease" @touchstart.prevent="handleControlPress"
+ @touchend.prevent="handleControlRelease" @touchcancel.prevent="handleControlRelease" @contextmenu.prevent
+ @copy.prevent @selectstart.prevent style="user-select: none;">
+ style="width: 80px; height: 80px; pointer-events: none;" draggable="false">
+ style="width: 80px; height: 80px; pointer-events: none;" draggable="false">