diff --git a/src/pages/movement-supervision.vue b/src/pages/movement-supervision.vue index 41424c7..7fd3c02 100644 --- a/src/pages/movement-supervision.vue +++ b/src/pages/movement-supervision.vue @@ -165,7 +165,12 @@ const monitorScene = async () => { } // 3. 更新状态覆盖图标 (此API调用如果不能合并,则保留在循环内) - editor.value?.updateRobotStatusOverlay?.(id, false); + // 使用刚刚为机器人计算出的新位置来更新覆盖物,以确保同步 + const newPositionForOverlay = + penUpdatePayload.x !== undefined && penUpdatePayload.y !== undefined + ? { x: penUpdatePayload.x, y: penUpdatePayload.y, rotate: penUpdatePayload.rotate } + : undefined; + editor.value?.updateRobotStatusOverlay?.(id, false, newPositionForOverlay); }); // 4. 使用Meta2D的批量更新方法一次性提交所有更改 @@ -259,7 +264,7 @@ const monitorScene = async () => { //#region 服务初始化 onMounted(() => { - editor.value = new EditorService(container.value!); + editor.value = new EditorService(container.value!, props.sid); // 将 editor 存储到 store 中 editorStore.setEditor(editor as ShallowRef); diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts index 35297d6..b9227a7 100644 --- a/src/services/editor.service.ts +++ b/src/services/editor.service.ts @@ -662,8 +662,10 @@ export class EditorService extends Meta2d { /** 保存从后台传来的所有额外字段(除了已处理的robotGroups、robots、points、routes、areas之外的字段) */ #originalSceneData?: Partial; + #sceneId: string; + public getSceneId(): string | undefined { - return (this.#originalSceneData as any)?.id; + return this.#sceneId; } /** 坐标转换方法 - 将左上角原点的坐标转换为中心点原点的坐标 */ @@ -1250,8 +1252,13 @@ export class EditorService extends Meta2d { * 更新单个机器人的状态覆盖图标位置/尺寸/显隐 * @param id 机器人ID * @param render 是否立即渲染 + * @param newPosition 可选,提供新的位置和角度信息,用于解决异步更新时的延迟问题 */ - public updateRobotStatusOverlay(id: string, render = false): void { + public updateRobotStatusOverlay( + id: string, + render = false, + newPosition?: { x: number; y: number; rotate: number }, + ): void { const pen = this.getPenById(id); if (!pen) return; @@ -1266,15 +1273,15 @@ export class EditorService extends Meta2d { // 以机器人中心为基准,做一个轻微向下的偏移,并随机器人一起旋转 const rect = this.getPenRect(pen); - const wr: any = (pen as any).calculative?.worldRect; - const deg: number = (wr?.rotate ?? 0) as number; + const deg: number = newPosition?.rotate ?? pen.rotate ?? 0; const theta = (deg * Math.PI) / 180; - const cx = rect.x + rect.width / 2; - const cy = rect.y + rect.height / 2; + // 如果有新位置,使用新位置的 x,y + 容器宽高的一半;否则用旧方法 + const cx = (newPosition?.x ?? rect.x) + rect.width / 2; + const cy = (newPosition?.y ?? rect.y) + rect.height / 2; const iconTop = (pen as any).iconTop ?? 0; // 在本地坐标中的偏移(以机器人中心为原点,y向下为正) const localDx = 0; - const localDy = iconTop +16; + const localDy = iconTop + 16; // 旋转后的偏移 const rotDx = localDx * Math.cos(theta) - localDy * Math.sin(theta); const rotDy = localDx * Math.sin(theta) + localDy * Math.cos(theta); @@ -1743,8 +1750,9 @@ export class EditorService extends Meta2d { * 构造函数 - 初始化场景编辑器 * @param container 编辑器容器DOM元素 */ - constructor(container: HTMLDivElement) { + constructor(container: HTMLDivElement, sceneId: string) { super(container, EDITOR_CONFIG); + this.#sceneId = sceneId; // 初始化图层管理服务 this.layerManager = new LayerManagerService(this);