From cd221722240cdd227395d64002da3d01a44aa0d2 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Wed, 2 Jul 2025 11:39:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=AE=9E=E6=97=B6?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E7=9C=9F=E5=AE=9E=E5=9C=BA=E6=99=AF=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=8C=E5=B9=B6=E6=A0=B9=E6=8D=AE=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E9=80=89=E6=8B=A9=E7=9B=91=E6=8E=A7=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/scene/api.ts              | 12 ++++++++++++
 src/pages/movement-supervision.vue | 12 +++++++++---
 src/services/router.ts             | 10 ++++++++--
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/apis/scene/api.ts b/src/apis/scene/api.ts
index 33d0213..c434190 100644
--- a/src/apis/scene/api.ts
+++ b/src/apis/scene/api.ts
@@ -13,6 +13,7 @@ const enum API {
   保存组场景 = '/scene/saveByGroupId',
 
   实时监控场景 = '/scene/monitor/:id',
+  实时监控真实场景 = '/scene/monitor/real/:id',
 }
 
 export async function getSceneById(id: SceneInfo['id']): Promise<SceneDetail | null> {
@@ -98,3 +99,14 @@ export async function monitorSceneById(id: SceneInfo['id']): Promise<WebSocket |
     return null;
   }
 }
+
+export async function monitorRealSceneById(id: SceneInfo['id']): Promise<WebSocket | null> {
+  if (!id) return null;
+  try {
+    const socket = await ws.create(API.实时监控真实场景.replace(':id', id));
+    return socket;
+  } catch (error) {
+    console.debug(error);
+    return null;
+  }
+}
diff --git a/src/pages/movement-supervision.vue b/src/pages/movement-supervision.vue
index 6fbb7a5..449767e 100644
--- a/src/pages/movement-supervision.vue
+++ b/src/pages/movement-supervision.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { RobotRealtimeInfo } from '@api/robot';
-import { getSceneByGroupId, getSceneById, monitorSceneById } from '@api/scene';
+import { getSceneByGroupId, getSceneById, monitorRealSceneById, monitorSceneById } from '@api/scene';
 import { EditorService } from '@core/editor.service';
 import { useViewState } from '@core/useViewState';
 import { message } from 'ant-design-vue';
 import { isNil } from 'lodash-es';
 import { computed, onMounted, onUnmounted, provide, ref, shallowRef, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
 const EDITOR_KEY = Symbol('editor-key');
 
@@ -15,6 +16,10 @@ type Props = {
 };
 const props = defineProps<Props>();
 
+// 获取路由信息以判断当前模式
+const route = useRoute();
+const isMonitorMode = computed(() => route.path.includes('/monitor'));
+
 //#region 接口
 const readScene = async () => {
   const res = props.id ? await getSceneByGroupId(props.id, props.sid) : await getSceneById(props.sid);
@@ -24,7 +29,8 @@ const readScene = async () => {
 
 const monitorScene = async () => {
   client.value?.close();
-  const ws = await monitorSceneById(props.sid);
+  // 根据路由路径是否是真实场景监控决定使用哪个监控接口
+  const ws = isMonitorMode.value ? await monitorRealSceneById(props.sid) : await monitorSceneById(props.sid);
   if (isNil(ws)) return;
   ws.onmessage = (e) => {
     const { id, x, y, active, angle, path, ...rest } = <RobotRealtimeInfo>JSON.parse(e.data || '{}');
@@ -112,7 +118,7 @@ const handleAutoSaveAndRestoreViewState = async () => {
   <a-layout class="full">
     <a-layout-header class="p-16" style="height: 64px">
       <a-flex justify="space-between" align="center">
-        <a-typography-text class="title">{{ title }}--场景仿真</a-typography-text>
+        <a-typography-text class="title">{{ title }}--{{ isMonitorMode ? '场景监控' : '场景仿真' }}</a-typography-text>
         <a-button type="primary" :loading="isSaving" @click="handleSaveViewState"> 保存比例 </a-button>
       </a-flex>
     </a-layout-header>
diff --git a/src/services/router.ts b/src/services/router.ts
index e6cde31..7cf9b10 100644
--- a/src/services/router.ts
+++ b/src/services/router.ts
@@ -22,8 +22,14 @@ export const ROUTES = Object.freeze<RouteRecordRaw[]>([
   },
 
   {
-    name: '运行监控',
-    path: '/movement-supervision/:sid/:id?',
+    name: '场景仿真',
+    path: '/movement-supervision/:sid/simulation/:id?',
+    props: true,
+    component: () => import('@/movement-supervision.vue'),
+  },
+  {
+    name: '场景监控',
+    path: '/movement-supervision/:sid/monitor/:id?',
     props: true,
     component: () => import('@/movement-supervision.vue'),
   },