feat: 新增实时监控真实场景接口，并根据路由动态选择监控模式

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;
+  }
+}

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>

src/services/router.ts

@@ -22,8 +22,14 @@ export const ROUTES = Object.freeze<RouteRecordRaw[]>([
   },
 
   {
-    name: '运行监控',
+    name: '场景仿真',
-    path: '/movement-supervision/:sid/:id?',
+    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'),
   },