feat: 加载地图

src/views/inspection/cockpit/components/ManualTakeover/index.vue

@@ -11,7 +11,7 @@
                         </div>
                         <div>
                             <div class="bot-name">{{ item.robotName }}</div>
-                            <div class="bot-local">{{ agvRuntimeStatusLabel(item.status) }}</div>
+                            <div class="bot-local" :class="agvRuntimeStatusClass(item.status)">{{ agvRuntimeStatusLabel(item.status) }}</div>
                         </div>
                     </div>
                 </div>
@@ -100,7 +100,7 @@
         </div>
         <div class="video-container">
             <div v-if="activeMode === 'auto' || activeController === 1" class="map-container">
-                <MapCanvas v-if="robotList.length > 0" :robotList="currentRobot" ref="mapCanvasRef" />
+                <MapCanvas v-if="robotList.length > 0" :clearMap="true" :robotList="currentRobot" ref="mapCanvasRef" />
             </div>
             <div v-if="activeMode === 'artificial' && activeController === 2" class="model-container">
                 <UrdfViewer ref="urdfViewerRef" modelPath="/inspection/elfin10/elfin10.urdf.xacro" />
@@ -134,7 +134,7 @@ import { getJointStateApi, moveJApi, torqueOnApi, speedJApi, stopMotionApi, clea
 import { Remove, CirclePlus } from '@element-plus/icons-vue'
 import VoiceConversation from "./VoiceConversation.vue";
 import IPlayer from "@/components/IPlayer/index.vue";
-import { agvRuntimeStatusLabel } from '@/utils/agvRuntimeStatus'
+import { agvRuntimeStatusClass, agvRuntimeStatusLabel } from '@/utils/agvRuntimeStatus'
 
 const robotList = ref([])
 const robotDevices = ref([])
@@ -310,7 +310,7 @@ onMounted(() => {
     fetchRobotList()
     robotRefreshTimer = window.setInterval(() => {
         if (!document.hidden) fetchRobotList(false)
-    }, 5000)
+    }, 500)
 })
 
 onUnmounted(() => {
@@ -353,10 +353,10 @@ onUnmounted(() => {
                     background: #0F1E38;
                     height: 56px;
                     border-radius: 8px;
-                    padding: 16px;
+                    padding: 12px;
                     display: flex;
                     align-items: center;
-                    gap: 20px;
+                    gap: 12px;
                     margin-bottom: 16px;
                     cursor: pointer;
                     border: 1px solid transparent;
@@ -367,10 +367,34 @@ onUnmounted(() => {
                     }
 
                     .bot-local {
-                        color: #00d4ff;
                         font-size: 11px;
                         margin-top: 4px;
                     }
+
+                    .online {
+                        color: #0f8;
+                    }
+
+                    .unknown,
+                    .offline,
+                    .stopped {
+                        color: #cbd5e1;
+                    }
+
+                    .manual,
+                    .running {
+                        color: #00d4ff;
+                    }
+
+                    .charging,
+                    .paused {
+                        color: #ffb300;
+                    }
+
+                    .fault,
+                    .emergency {
+                        color: #ff6b6d;
+                    }
                 }
 
                 .active {

src/views/inspection/cockpit/components/MapCanvas.vue

@@ -28,11 +28,16 @@ import {
 import { getMapJson } from '@/api/inspection/robot'
 import { useInspectionStore } from "@/store/modules/inspection";
 import { ElMessage } from 'element-plus';
+import { clear } from 'ace-builds/src-noconflict/ext-code_lens';
 
 const props = defineProps({
     robotList: {
         type: Array,
         default: () => []
+    },
+    clearMap: {
+        type: Boolean,
+        default: false
     }
 })
 
@@ -419,6 +424,11 @@ const colorList = ['#00D4FF', '#FFB300', '#00FF88', '#ff5100', '#fff', '#15ff00'
 watch(() => props.robotList,
     (newVal) => {
         if (newVal.length > 0) {
+            if (props.clearMap) {
+                applicationState.robots = []
+            }
+            loadSourceMap()
+
             const ids = applicationState.robots.map(r => r.id);
             props.robotList.forEach(item => {
                 const position = parseRobotPosition(item.currentPosition)

src/views/inspection/cockpit/components/Monitor.vue

@@ -13,8 +13,8 @@
                             <SvgIcon name="bot" :color="colorList[index]" />
                         </div>
                         <div>
-                            <div class="bot-name">机器人#0{{ index  + 1}}</div>
+                            <div class="bot-name">{{ item.robotName }}</div>
-                            <div class="bot-local">厂区A-在线</div>
+                            <div class="bot-local" :class="agvRuntimeStatusClass(item.status)">{{ agvRuntimeStatusLabel(item.status) }}</div>
                         </div>
                     </div>
                 </div>
@@ -42,6 +42,7 @@
 import SvgIcon from "@/components/SvgIcon";
 import IPlayer from "@/components/IPlayer/index.vue";
 import { getRobotList } from '@/api/inspection/robot'
+import { agvRuntimeStatusClass, agvRuntimeStatusLabel } from '@/utils/agvRuntimeStatus'
 
 const videoUrl = ref('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
 
@@ -112,10 +113,34 @@ onMounted(() => {
                     }
 
                     .bot-local {
-                        color: #00d4ff;
                         font-size: 11px;
                         margin-top: 4px;
                     }
+
+                    .online {
+                        color: #0f8;
+                    }
+
+                    .unknown,
+                    .offline,
+                    .stopped {
+                        color: #cbd5e1;
+                    }
+
+                    .manual,
+                    .running {
+                        color: #00d4ff;
+                    }
+
+                    .charging,
+                    .paused {
+                        color: #ffb300;
+                    }
+
+                    .fault,
+                    .emergency {
+                        color: #ff6b6d;
+                    }
                 }
 
                 .active {