web-map/docs/机器人运动监控组件详细分析.md

633 lines
19 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 机器人运动监控组件详细分析
## 1. 组件架构概述
### 1.1 核心组件结构
`movement-supervision.vue` 是机器人运动监控的主要组件,负责实时显示机器人在场景中的位置和状态。
```typescript
// 组件核心属性
type Props = {
sid: string; // 场景ID
id?: string; // 机器人组ID可选
};
```
### 1.2 依赖服务架构
- **EditorService**: 基于Meta2D的场景编辑器服务
- **WebSocket服务**: 提供实时数据通信
- **场景API服务**: 处理场景数据的增删改查
## 2. 组件生命周期详解
### 2.1 组件初始化流程
```typescript
onMounted(async () => {
await readScene(); // 步骤1: 加载场景数据
await editor.value?.initRobots(); // 步骤2: 初始化机器人
await monitorScene(); // 步骤3: 建立WebSocket监控
});
```
#### 步骤1: readScene() - 场景数据加载
```typescript
const readScene = async () => {
const res = props.id ? await getSceneByGroupId(props.id, props.sid) : await getSceneById(props.sid);
title.value = res?.label ?? '';
editor.value?.load(res?.json);
};
```
**关键问题点**: 每个页面实例都独立调用API获取场景数据可能导致
- 不同时间点获取的数据版本不一致
- 网络延迟造成的数据获取时差
- 场景数据在获取期间被其他页面修改
#### 步骤2: initRobots() - 机器人初始化
```typescript
public async initRobots(): Promise<void> {
await Promise.all(
this.robots.map(async ({ id, label, type }) => {
const pen: MapPen = {
...this.#mapRobotImage(type, true),
id,
name: 'robot',
tags: ['robot'],
x: 0, // 关键: 初始位置固定为(0,0)
y: 0, // 关键: 初始位置固定为(0,0)
width: 74,
height: 74,
lineWidth: 1,
robot: { type },
visible: false, // 关键: 初始状态为不可见
text: label,
textTop: -24,
whiteSpace: 'nowrap',
ellipsis: false,
locked: LockState.Disable,
};
await this.addPen(pen, false, true, true);
}),
);
}
```
**问题分析**:
- 所有机器人初始位置都设为`(0,0)`
- 初始状态为`visible: false`需要WebSocket数据才能显示
- 如果WebSocket连接延迟不同页面的机器人可能长时间处于不可见状态
#### 步骤3: monitorScene() - WebSocket监控建立
```typescript
const monitorScene = async () => {
client.value?.close(); // 关闭之前的连接
const ws = await monitorSceneById(props.sid); // 创建新连接
if (isNil(ws)) return;
ws.onmessage = (e) => {
const { id, x, y, active, angle, path, ...rest } = <RobotRealtimeInfo>JSON.parse(e.data || '{}');
if (!editor.value?.checkRobotById(id)) return; // 验证机器人存在
editor.value?.updateRobot(id, rest); // 更新机器人基本信息
if (isNil(x) || isNil(y)) {
// 关键逻辑: 无位置信息时隐藏机器人
editor.value.updatePen(id, { visible: false });
} else {
// 关键逻辑: 有位置信息时更新位置并显示
editor.value.refreshRobot(id, { x, y, active, angle, path });
}
};
client.value = ws;
};
```
## 3. 机器人实时移动机制深度分析
### 3.1 WebSocket消息处理流程
每当接收到WebSocket消息时会执行以下处理逻辑
1. **消息解析**: 将JSON字符串解析为`RobotRealtimeInfo`对象
2. **机器人验证**: 调用`checkRobotById(id)`验证机器人是否存在
3. **基本信息更新**: 调用`updateRobot(id, rest)`更新电量、状态等信息
4. **位置处理**: 根据坐标是否存在进行不同处理
### 3.2 位置更新核心逻辑: refreshRobot()
```typescript
public refreshRobot(id: RobotInfo['id'], info: Partial<RobotRealtimeInfo>): void {
const pen = this.getPenById(id);
const { rotate: or, robot } = pen ?? {};
if (!robot?.type) return;
// 获取当前机器人位置
const { x: ox, y: oy } = this.getPenRect(pen!);
// 解析新的位置信息默认值为37,37是机器人中心点
const { x: cx = 37, y: cy = 37, active, angle, path: points } = info;
// 关键坐标转换: 从中心点坐标转换为左上角坐标
const x = cx - 37; // 机器人宽度74中心偏移37
const y = cy - 37; // 机器人高度74中心偏移37
const rotate = angle ?? or; // 角度更新
// 路径坐标转换
const path =
points?.map((p) => ({ x: p.x - cx, y: p.y - cy })) ?? // 新路径相对于机器人中心
robot.path?.map((p) => ({ x: p.x + ox! - x, y: p.y + oy! - y })); // 旧路径坐标调整
const o = { ...robot, ...omitBy({ active, path }, isNil) };
if (isNil(active)) {
// active为null时只更新位置不改变图标
this.setValue(
{ id, x, y, rotate, robot: o, visible: true },
{ render: true, history: false, doEvent: false }
);
} else {
// active有值时同时更新图标状态运行/停止状态图标不同)
this.setValue(
{ id, ...this.#mapRobotImage(robot.type, active), x, y, rotate, robot: o, visible: true },
{ render: true, history: false, doEvent: false }
);
}
}
```
### 3.3 机器人图标映射逻辑
```typescript
#mapRobotImage(
type: RobotType,
active?: boolean,
): Required<Pick<MapPen, 'image' | 'iconWidth' | 'iconHeight' | 'iconTop'>> {
const theme = this.data().theme;
const image = import.meta.env.BASE_URL +
(active ? `/robot/${type}-active-${theme}.png` : `/robot/${type}-${theme}.png`);
return {
image,
iconWidth: 34,
iconHeight: 54,
iconTop: -5
};
}
```
### 3.4 机器人绘制函数
```typescript
function drawRobot(ctx: CanvasRenderingContext2D, pen: MapPen): void {
const theme = sTheme.editor;
const { lineWidth: s = 1 } = pen.calculative ?? {};
const { x = 0, y = 0, width: w = 0, height: h = 0, rotate: deg = 0 } = pen.calculative?.worldRect ?? {};
const { active, path } = pen.robot ?? {};
if (!active) return; // 关键: 非活跃状态不绘制路径
const ox = x + w / 2; // 机器人中心X坐标
const oy = y + h / 2; // 机器人中心Y坐标
ctx.save();
// 绘制机器人本体(椭圆)
ctx.ellipse(ox, oy, w / 2, h / 2, 0, 0, Math.PI * 2);
ctx.fillStyle = get(theme, 'robot.fill') ?? '';
ctx.fill();
ctx.strokeStyle = get(theme, 'robot.stroke') ?? '';
ctx.stroke();
// 绘制运动路径
if (path?.length) {
ctx.strokeStyle = get(theme, 'robot.line') ?? '';
ctx.lineCap = 'round';
ctx.lineWidth = s * 4;
ctx.setLineDash([s * 5, s * 10]); // 虚线样式
ctx.translate(ox, oy);
ctx.rotate((-deg * Math.PI) / 180); // 根据机器人角度旋转
// 绘制路径线条
ctx.beginPath();
ctx.moveTo(0, 0);
path.forEach((d) => ctx.lineTo(d.x * s, d.y * s));
ctx.stroke();
// 绘制路径终点箭头
const { x: ex1 = 0, y: ey1 = 0 } = nth(path, -1) ?? {};
const { x: ex2 = 0, y: ey2 = 0 } = nth(path, -2) ?? {};
const r = Math.atan2(ey1 - ey2, ex1 - ex2) + Math.PI;
ctx.setLineDash([0]);
ctx.translate(ex1 * s, ey1 * s);
ctx.beginPath();
ctx.moveTo(Math.cos(r + Math.PI / 4) * s * 10, Math.sin(r + Math.PI / 4) * s * 10);
ctx.lineTo(0, 0);
ctx.lineTo(Math.cos(r - Math.PI / 4) * s * 10, Math.sin(r - Math.PI / 4) * s * 10);
ctx.stroke();
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
ctx.restore();
}
```
## 4. 多页面位置不一致问题深度分析
### 4.1 根本原因:缺乏全局状态同步机制
每个页面实例都是完全独立的,具体表现为:
1. **独立的EditorService实例**
- 每个页面创建独立的`new EditorService(container.value!)`
- 各自维护独立的机器人状态映射`#robotMap`
- 无法共享机器人位置信息
2. **独立的WebSocket连接**
- 每个页面调用`monitorSceneById(props.sid)`创建独立连接
- 服务器可能向不同连接推送不同时间点的数据
- 网络延迟导致消息到达时间不同
### 4.2 具体问题场景分析
#### 场景1: 初始化时间差异
```typescript
// 页面A在时间T1执行
onMounted(async () => {
await readScene(); // T1时刻的场景数据
await initRobots(); // 创建机器人,位置(0,0)visible:false
await monitorScene(); // T1+100ms建立WebSocket
});
// 页面B在时间T2执行T2 > T1
onMounted(async () => {
await readScene(); // T2时刻的场景数据可能已更新
await initRobots(); // 创建机器人,位置(0,0)visible:false
await monitorScene(); // T2+80ms建立WebSocket
});
```
**结果**: 两个页面获取的初始场景数据可能不同,机器人列表或配置存在差异。
#### 场景2: WebSocket消息时序差异
```typescript
// WebSocket消息处理逻辑
ws.onmessage = (e) => {
const { id, x, y, active, angle, path, ...rest } = JSON.parse(e.data || '{}');
if (isNil(x) || isNil(y)) {
// 关键问题: 无坐标消息会隐藏机器人
editor.value.updatePen(id, { visible: false });
} else {
editor.value.refreshRobot(id, { x, y, active, angle, path });
}
};
```
**问题分析**:
- 页面A先收到有坐标的消息机器人显示在位置(100, 200)
- 页面B后收到无坐标的消息机器人被隐藏
- 页面C收到旧的坐标消息机器人显示在位置(80, 150)
#### 场景3: 坐标转换精度问题
```typescript
// refreshRobot中的坐标转换
const { x: cx = 37, y: cy = 37, active, angle, path: points } = info;
const x = cx - 37; // 默认值37导致的问题
const y = cy - 37;
// 当服务器发送的坐标为null/undefined时
// cx和cy都会使用默认值37导致机器人位置为(0,0)
```
**问题**: 不同页面接收到的消息中坐标字段可能为`null``undefined`或有效数值,默认值处理导致位置计算不一致。
#### 场景4: 机器人状态检查差异
```typescript
if (!editor.value?.checkRobotById(id)) return;
// checkRobotById实现
public checkRobotById(id: RobotInfo['id']): boolean {
return this.#robotMap.has(id);
}
```
**问题**: 不同页面的`#robotMap`内容可能不同,导致某些页面忽略特定机器人的更新消息。
### 4.3 路径绘制不一致问题
```typescript
// 路径坐标转换逻辑
const path =
points?.map((p) => ({ x: p.x - cx, y: p.y - cy })) ?? // 新路径处理
robot.path?.map((p) => ({ x: p.x + ox! - x, y: p.y + oy! - y })); // 旧路径处理
```
**问题分析**:
1. 新路径使用`p.x - cx, p.y - cy`进行坐标转换
2. 旧路径使用`p.x + ox! - x, p.y + oy! - y`进行坐标转换
3. 两种转换方式在特定情况下可能产生不同结果
4. 不同页面可能处于新旧路径的不同阶段
### 4.4 渲染状态不同步
```typescript
// setValue方法的渲染参数
this.setValue(
{ id, x, y, rotate, robot: o, visible: true },
{ render: true, history: false, doEvent: false }, // 立即渲染,不记录历史
);
```
**问题**:
- `render: true`表示立即重新渲染
- 不同页面的渲染时机不同步
- 可能出现某个页面正在渲染时收到新消息的情况
## 5. 解决方案详细设计
### 5.1 方案一: 全局状态管理器
```typescript
/**
* 全局机器人状态管理器
* 单例模式,确保所有页面共享同一份状态
*/
class GlobalRobotStateManager {
private static instance: GlobalRobotStateManager;
// 存储所有机器人的最新状态
private robotStates = new Map<string, RobotRealtimeInfo>();
// 订阅者列表,用于通知状态变化
private subscribers = new Set<(robotId: string, info: RobotRealtimeInfo) => void>();
// 连接管理,避免重复连接
private connections = new Map<string, WebSocket>();
static getInstance(): GlobalRobotStateManager {
if (!this.instance) {
this.instance = new GlobalRobotStateManager();
}
return this.instance;
}
/**
* 订阅机器人状态变化
*/
subscribe(callback: (robotId: string, info: RobotRealtimeInfo) => void): () => void {
this.subscribers.add(callback);
// 立即推送当前所有机器人状态
this.robotStates.forEach((info, robotId) => {
callback(robotId, info);
});
// 返回取消订阅函数
return () => this.subscribers.delete(callback);
}
/**
* 更新机器人状态并通知所有订阅者
*/
updateRobotState(robotId: string, info: RobotRealtimeInfo): void {
// 合并状态更新
const currentState = this.robotStates.get(robotId) || ({} as RobotRealtimeInfo);
const newState = { ...currentState, ...info };
this.robotStates.set(robotId, newState);
// 通知所有订阅者
this.subscribers.forEach((callback) => {
try {
callback(robotId, newState);
} catch (error) {
console.error('机器人状态更新回调执行失败:', error);
}
});
}
/**
* 获取或创建WebSocket连接复用连接
*/
async getOrCreateConnection(sceneId: string): Promise<WebSocket | null> {
// 检查现有连接
const existingConnection = this.connections.get(sceneId);
if (existingConnection && existingConnection.readyState === WebSocket.OPEN) {
return existingConnection;
}
try {
const ws = await monitorSceneById(sceneId);
if (!ws) return null;
// 设置消息处理
ws.onmessage = (e) => {
try {
const robotInfo = JSON.parse(e.data || '{}') as RobotRealtimeInfo;
this.updateRobotState(robotInfo.id, robotInfo);
} catch (error) {
console.error('WebSocket消息解析失败:', error);
}
};
// 设置连接关闭处理
ws.onclose = () => {
this.connections.delete(sceneId);
};
// 存储连接
this.connections.set(sceneId, ws);
return ws;
} catch (error) {
console.error('创建WebSocket连接失败:', error);
return null;
}
}
}
```
### 5.2 方案二: 改进的组件实现
```typescript
// 改进后的movement-supervision.vue核心逻辑
<script setup lang="ts">
import { GlobalRobotStateManager } from '@/services/global-robot-state';
const props = defineProps<Props>();
const globalStateManager = GlobalRobotStateManager.getInstance();
// 移除原有的monitorScene函数改用全局状态管理
const initializeMonitoring = async () => {
// 确保WebSocket连接存在
await globalStateManager.getOrCreateConnection(props.sid);
// 订阅机器人状态变化
const unsubscribe = globalStateManager.subscribe((robotId, robotInfo) => {
if (!editor.value?.checkRobotById(robotId)) return;
// 更新机器人基本信息
const { id, x, y, active, angle, path, ...rest } = robotInfo;
editor.value.updateRobot(id, rest);
// 处理位置更新
if (isNil(x) || isNil(y)) {
editor.value.updatePen(id, { visible: false });
} else {
editor.value.refreshRobot(id, { x, y, active, angle, path });
}
});
// 组件卸载时取消订阅
onUnmounted(() => {
unsubscribe();
});
};
onMounted(async () => {
await readScene();
await editor.value?.initRobots();
await initializeMonitoring(); // 使用改进的初始化方法
});
</script>
```
### 5.3 方案三: EditorService增强
```typescript
// 为EditorService添加状态缓存和同步机制
export class EditorService extends Meta2d {
// 添加状态缓存
private robotStateCache = new Map<string, RobotRealtimeInfo>();
/**
* 改进的坐标转换方法
*/
private normalizeCoordinates(info: Partial<RobotRealtimeInfo>): { x: number; y: number } | null {
const { x: cx, y: cy } = info;
// 严格的坐标验证
if (typeof cx !== 'number' || typeof cy !== 'number' || isNaN(cx) || isNaN(cy) || cx < 0 || cy < 0) {
return null; // 返回null表示无效坐标
}
// 坐标转换:从中心点转换为左上角
return {
x: cx - 37, // 机器人宽度74中心偏移37
y: cy - 37, // 机器人高度74中心偏移37
};
}
/**
* 改进的refreshRobot方法
*/
public refreshRobot(id: RobotInfo['id'], info: Partial<RobotRealtimeInfo>): void {
const pen = this.getPenById(id);
const { rotate: or, robot } = pen ?? {};
if (!robot?.type) return;
// 使用改进的坐标转换
const coords = this.normalizeCoordinates(info);
// 无效坐标处理
if (!coords) {
this.setValue({ id, visible: false }, { render: true, history: false, doEvent: false });
return;
}
const { x, y } = coords;
const { active, angle, path: points } = info;
const rotate = angle ?? or;
// 路径处理优化
let path: Point[] | undefined;
if (points && Array.isArray(points)) {
// 新路径:相对于机器人中心的坐标
path = points.map((p) => ({
x: (p.x || 0) - (info.x || 37),
y: (p.y || 0) - (info.y || 37),
}));
} else if (robot.path) {
// 保持原有路径,但需要调整坐标
const { x: ox, y: oy } = this.getPenRect(pen!);
path = robot.path.map((p) => ({
x: p.x + ox - x,
y: p.y + oy - y,
}));
}
const robotState = { ...robot, ...omitBy({ active, path }, isNil) };
// 根据active状态决定渲染方式
if (typeof active === 'boolean') {
// 有明确的活跃状态,更新图标
this.setValue(
{
id,
...this.#mapRobotImage(robot.type, active),
x,
y,
rotate,
robot: robotState,
visible: true,
},
{ render: true, history: false, doEvent: false },
);
} else {
// 无活跃状态信息,只更新位置
this.setValue(
{ id, x, y, rotate, robot: robotState, visible: true },
{ render: true, history: false, doEvent: false },
);
}
}
}
```
## 6. 性能优化建议
### 6.1 渲染优化
- 使用`requestAnimationFrame`批量处理渲染更新
- 实现视口裁剪,只渲染可见区域的机器人
- 添加机器人状态变化的diff检测避免无效渲染
### 6.2 内存管理
- 定期清理过期的机器人状态缓存
- 使用WeakMap存储临时状态避免内存泄漏
- 在组件卸载时正确清理WebSocket连接和事件监听器
### 6.3 网络优化
- 实现WebSocket连接池复用连接
- 添加消息压缩,减少网络传输量
- 使用心跳机制检测连接状态
## 7. 总结
机器人运动监控组件的多页面位置不一致问题主要源于:
1. **架构设计缺陷**: 缺乏全局状态管理,每个页面独立维护状态
2. **WebSocket连接独立性**: 多个连接可能接收到不同时间点的数据
3. **初始化时序问题**: 不同页面的初始化时间不同,导致状态基线不一致
4. **坐标转换逻辑**: 默认值处理和坐标转换在边界情况下存在问题
5. **状态验证不足**: 缺乏对接收数据的有效性验证
通过实施全局状态管理、WebSocket连接复用、状态缓存机制和坐标转换优化等解决方案可以有效解决这些问题确保多页面间机器人位置的一致性。