From 424df501127a4c3079b3ec18887d5876934db8a4 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Wed, 5 Aug 2026 14:51:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E5=AD=97=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cockpit/components/ManualTakeover.vue     | 641 ------------------
 .../components/ManualTakeover/RoboticArm.vue  |   6 +
 .../components/ManualTakeover/index.vue       |   9 +-
 3 files changed, 13 insertions(+), 643 deletions(-)
 delete mode 100644 src/views/inspection/cockpit/components/ManualTakeover.vue

diff --git a/src/views/inspection/cockpit/components/ManualTakeover.vue b/src/views/inspection/cockpit/components/ManualTakeover.vue
deleted file mode 100644
index 9f78c58..0000000
--- a/src/views/inspection/cockpit/components/ManualTakeover.vue
+++ /dev/null
@@ -1,641 +0,0 @@
-<template>
-    <div class="monitor-container">
-        <div class="left-container">
-            <div class="robot-container">
-                <div class="title">选择机器人</div>
-                <div class="robot-box">
-                    <div v-for="item, index in 4" class="robot" :class="{ active: activeBot === index }"
-                        @click="changeBot(index)">
-                        <div>
-                            <SvgIcon name="bot" :color="colorList[index]" />
-                        </div>
-                        <div>
-                            <div class="bot-name">机器人#01</div>
-                            <div class="bot-local">厂区A-在线</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="split-line"></div>
-            <div class="mode-container">
-                <div class="title">控制模式</div>
-                <div class="mode-box">
-                    <div class="mode-item" :class="{ activeMode: activeMode === 'auto' }" @click="changeMode('auto')">
-                        <SvgIcon name="cpu" :color="activeMode === 'auto' ? '#00FF88' : '#fff'" :size="16" />
-                        <span class="label">自动巡检</span>
-                    </div>
-                    <div class="mode-item" :class="{ activeMode: activeMode === 'artificial' }"
-                        @click="changeMode('artificial')">
-                        <SvgIcon name="gamepad" :color="activeMode === 'artificial' ? '#00FF88' : '#fff'" :size="16" />
-                        <span class="label">人工接管</span>
-                    </div>
-                </div>
-            </div>
-            <div v-if="activeMode === 'artificial'" class="artificial-panel">
-                <el-radio-group v-model="activeController" size="small" @change="handlerController">
-                    <el-radio :value="1">底盘</el-radio>
-                    <el-radio :value="2">机械臂</el-radio>
-                    <el-radio :value="3">相机</el-radio>
-                </el-radio-group>
-                <div class="controller-panel">人工控制面板</div>
-                <div v-if="activeController === 1" class="direction-controller-container">
-                    <div class="title">
-                        <SvgIcon name="navigation" color="00D4FF" :size="16" />
-                        <span class="label">方向控制器</span>
-                    </div>
-                    <div class="direction-box">
-                        <div class="direction-container">
-                            <div class="item"></div>
-                            <div class="item">
-                                <SvgIcon name="chevron-up" :size="24" />
-                            </div>
-                            <div class="item"></div>
-                            <div class="item">
-                                <SvgIcon name="chevron-left" :size="24" />
-                            </div>
-                            <div class="item">
-                                <SvgIcon name="chevron-stop" :size="52" />
-                            </div>
-                            <div class="item">
-                                <SvgIcon name="chevron-right" :size="24" />
-                            </div>
-                            <div class="item"></div>
-                            <div class="item">
-                                <SvgIcon name="chevron-down" :size="24" />
-                            </div>
-                            <div class="item"></div>
-                        </div>
-                    </div>
-                    <div class="speed-box">
-                        <div class="label">移动速度</div>
-                        <div class="speed">{{ speed }}m/s</div>
-                    </div>
-                    <el-slider v-model="speed" :max="2" :step="0.1" size="small" />
-                </div>
-                <div v-if="activeController === 2" class="robotic-arm-controller-container">
-                    <el-radio-group v-model="activeRoboticArm" @change="handlerArm" size="small">
-                        <el-radio :value="1">末端控制</el-radio>
-                        <el-radio :value="2">关节控制</el-radio>
-                        <el-radio :value="3">姿态控制</el-radio>
-                    </el-radio-group>
-
-                      <div class="mode-tabs">
-                        <div class="mode-tab active">左手</div>
-                        <div class="mode-tab">右手</div>
-                    </div>
-
-                    <div class="robotic-arm-box">
-                        <div class="robotic-arm-status">
-                            <div class="coord-display">
-                                <div class="coord-item">
-                                    <div class="coord-key key-x">X</div>
-                                    <div class="coord-val" id="coordX">+124.50</div>
-                                </div>
-                                <div class="coord-item">
-                                    <div class="coord-key key-y">Y</div>
-                                    <div class="coord-val" id="coordY">−38.20</div>
-                                </div>
-                                <div class="coord-item">
-                                    <div class="coord-key key-z">Z</div>
-                                    <div class="coord-val" id="coordZ">+502.00</div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="axis-group">
-                            <!-- X Axis -->
-                            <div class="axis-row x">
-                                <div class="axis-label x">X</div>
-                                <div class="axis-slider-wrap">
-                                    <div class="axis-slider-top">
-                                        <span class="axis-name">前后平移</span>
-                                        <span class="axis-value" id="valX">0.00</span>
-                                    </div>
-                                    <el-slider v-model="speed" :max="2" :step="0.1" size="small" />
-                                </div>
-                            </div>
-
-                            <!-- Y Axis -->
-                            <div class="axis-row y">
-                                <div class="axis-label y">Y</div>
-                                <div class="axis-slider-wrap">
-                                    <div class="axis-slider-top">
-                                        <span class="axis-name">左右平移</span>
-                                        <span class="axis-value" id="valY">0.00</span>
-                                    </div>
-                                    <el-slider v-model="speed" :max="2" :step="0.1" size="small" />
-                                </div>
-                            </div>
-
-                            <!-- Z Axis -->
-                            <div class="axis-row z">
-                                <div class="axis-label z">Z</div>
-                                <div class="axis-slider-wrap">
-                                    <div class="axis-slider-top">
-                                        <span class="axis-name">上下平移</span>
-                                        <span class="axis-value" id="valZ">0.00</span>
-                                    </div>
-                                    <el-slider v-model="speed" :max="2" :step="0.1" size="small" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-        <div class="video-container">
-            <div v-if="activeMode === 'auto' || activeController === 1" class="map-container">地图</div>
-            <div v-if="activeMode === 'artificial' && activeController === 2" class="model-container">
-                <UrdfViewer
-                ref="viewerRef"
-                modelPath="/inspection/elfin10/elfin10.urdf.xacro"
-                />
-            </div>
-            <div v-if="activeMode === 'artificial' && activeController === 3" class="monitor-container">监控</div>
-        </div>
-        <div class="right-container">
-            <div class="container-title">车载监控</div>
-            <div class="monitor-container"></div>
-            <div class="split-line"></div>
-            <div class="container-title">语音对话</div>
-
-        </div>
-    </div>
-</template>
-<script setup>
-import SvgIcon from "@/components/SvgIcon";
-import UrdfViewer from './UrdfView.vue'
-
-const activeBot = ref(0)
-const changeBot = (index) => {
-    activeBot.value = index
-}
-
-const colorList = ['#00D4FF', '#FFB300', '#00FF88', '#fff']
-
-const activeMode = ref('auto')
-const changeMode = (mode) => {
-    activeMode.value = mode
-}
-
-const activeController = ref(1)
-
-const speed = ref(0.8)
-
-const activeRoboticArm = ref(1)
-
-
-const handlerController = (value) => {
-    if (value === 2 && [1, 3].includes(activeRoboticArm.value)) {
-
-    }
-}
-
-const handlerArm = (value) => {
-    if ([1, 3].includes(value)) {
-    }
-}
-
-function onLoaded(robot) {
-  console.log('已加载关节:', Object.keys(robot.joints))
-}
-function onError(err) {
-  console.error('加载失败:', err)
-}
-
-</script>
-
-<style lang="scss" scoped>
-.monitor-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-
-    .left-container {
-        width: 360px;
-        height: 100%;
-        padding: 16px;
-
-        .robot-container {
-
-            .title {
-                color: #8899BB;
-                font-size: 14px;
-                margin-bottom: 16px;
-            }
-
-            .robot-box {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 10px;
-                align-items: center;
-                justify-content: space-between;
-
-                .robot {
-                    flex: 0 0 calc(50% - 10px);
-                    background: #0F1E38;
-                    height: 56px;
-                    border-radius: 8px;
-                    padding: 16px;
-                    display: flex;
-                    align-items: center;
-                    gap: 20px;
-                    margin-bottom: 16px;
-                    cursor: pointer;
-                    border: 1px solid transparent;
-
-                    .bot-name {
-                        color: #fff;
-                        font-size: 13px;
-                    }
-
-                    .bot-local {
-                        color: #00d4ff;
-                        font-size: 11px;
-                        margin-top: 4px;
-                    }
-                }
-
-                .active {
-                    border-color: #00c2ff;
-                    color: #fff;
-                    box-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
-                }
-            }
-        }
-
-        .split-line {
-            width: 100%;
-            height: 1px;
-            margin: 16px 0;
-            background: #1E3A5F;
-        }
-
-        .mode-container {
-            .title {
-                color: #8899BB;
-                font-size: 14px;
-                margin-bottom: 16px;
-            }
-
-            .mode-box {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 10px;
-                align-items: center;
-                justify-content: space-between;
-
-                .mode-item {
-                    height: 36px;
-                    flex: 0 0 calc(50% - 10px);
-                    background: #0F1E38;
-                    border: 1px solid transparent;
-                    border-radius: 8px;
-                    padding: 16px;
-                    margin-bottom: 12px;
-                    display: flex;
-                    align-items: center;
-                    gap: 16px;
-                    cursor: pointer;
-
-                    .label {
-                        color: #8899BB;
-                        font-size: 13px;
-                    }
-                }
-
-                .activeMode {
-                    border-color: #00FF88;
-
-                    .label {
-                        color: #00FF88;
-                    }
-                }
-
-            }
-        }
-
-        .controller-panel {
-            padding: 16px;
-            color: #fff;
-            font-size: 16px;
-        }
-
-        .direction-controller-container {
-            padding: 16px;
-            height: 272px;
-            background: #0F1E38;
-            border-radius: 10px;
-
-            .title {
-                display: flex;
-                align-items: center;
-                gap: 16px;
-                margin-bottom: 16px;
-
-                .label {
-                    color: #fff;
-                    font-size: 14px;
-                }
-            }
-
-            .direction-box {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                .direction-container {
-                    display: flex;
-                    flex-wrap: wrap;
-                    gap: 4px;
-                    width: 164px;
-                    height: 164px;
-
-                    .item {
-                        // flex: 0 0 calc(33.333% - 4px);
-                        width: 52px;
-                        height: 52px;
-                        background: #1E3A5F;
-                        border-radius: 8px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                    }
-                }
-            }
-
-            .speed-box {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin: 8px 0;
-
-                .label {
-                    color: #8899BB;
-                    font-size: 12px;
-                }
-
-                .speed {
-                    color: #00D4FF;
-                    font-size: 12px;
-                }
-            }
-
-            :deep(.el-slider__button) {
-                scale: 0.5;
-            }
-        }
-
-        .robotic-arm-controller-container {
-            :deep(.el-radio-group) {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-            }
-
-            .mode-tabs {
-                display: flex;
-                padding: 12px 20px 0;
-                gap: 6px;
-
-                .mode-tab {
-                    flex: 1;
-                    padding: 8px 0;
-                    text-align: center;
-                    font-size: 12px;
-                    font-weight: 500;
-                    color: #4a5580;
-                    background: transparent;
-                    border: 1px solid transparent;
-                    border-bottom: none;
-                    border-radius: 8px 8px 0 0;
-                    cursor: pointer;
-                    transition: all 0.25s ease;
-                    position: relative;
-                    user-select: none;
-
-                    &:hover {
-                        color: #8b97bf;
-                        background: #3b82f60d;
-                    }
-                }
-
-                .active {
-                    color: #3b82f6;
-                    background: #111a36;
-                    border-color: #1c2a52;
-                    font-weight: 700;
-
-                    &:after {
-                        content: '';
-                            position: absolute;
-                            bottom: 0;
-                            left: 20%;
-                            right: 20%;
-                            height: 2px;
-                            background: var(--accent);
-                            border-radius: 1px;
-                            box-shadow: 0 0 8px var(--accent-glow);
-                    }
-                }
-            }
-
-            .robotic-arm-box {
-                .robotic-arm-status {
-                    .coord-display {
-                        display: flex;
-                        gap: 8px;
-                        padding: 12px;
-                        background: #070b1a;
-                        border: 1px solid #1c2a52;
-                        border-radius: 8px;
-                        margin-bottom: 16px;
-
-                        .coord-item {
-                            flex: 1;
-                            text-align: center;
-                            padding: 6px 0;
-                            border-radius: 6px;
-                            background: rgba(255, 255, 255, 0.02);
-
-                            .coord-key {
-                                font-size: 12px;
-                                font-weight: bold;
-                                margin-bottom: 3px;
-                            }
-
-                            .key-x {
-                                color: #f87171;
-                            }
-
-                            .key-y {
-                                color: #34d399;
-                                ;
-                            }
-
-                            .key-z {
-                                color: #38bdf8;
-                                ;
-                            }
-
-                            .coord-val {
-                                font-size: 14px;
-                                font-weight: bold;
-                                color: #e8edf8;
-                            }
-                        }
-                    }
-                }
-
-                .axis-group {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 12px;
-                    margin-bottom: 16px;
-
-                    .axis-row {
-                        display: flex;
-                        align-items: center;
-                        gap: 10px;
-                        padding: 10px 14px;
-                        background: #0c1228;
-                        border: 1px solid #1c2a52;
-                        border-radius: 10px;
-                        transition: all 0.2s ease;
-
-                        &:hover {
-                            border-color: #2a3f7a;
-                            background: #3b82f608;
-                        }
-
-                        .axis-label {
-                            width: 28px;
-                            height: 28px;
-                            border-radius: 6px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            font-size: 13px;
-                            font-weight: 700;
-                            flex-shrink: 0;
-                        }
-
-                        .x {
-                            background: #f8717126;
-                            color: #f87171;
-                            border: 1px solid #f871714d;
-                        }
-
-                        .y {
-                            background: #34d39926;
-                            color: #34d399;
-                            border: 1px solid #34d3994d;
-                        }
-
-                        .z {
-                            background: #38bdf826;
-                            color: #38bdf8;
-                            border: 1px solid #38bdf84d;
-                        }
-
-
-                        .axis-slider-wrap {
-                            flex: 1;
-                            display: flex;
-                            flex-direction: column;
-                            gap: 4px;
-
-                            .axis-slider-top {
-                                display: flex;
-                                justify-content: space-between;
-                                align-items: center;
-
-                                 .axis-name {
-                                    font-size: 11px;
-                                    color: #8b97bf;
-                                    font-weight: 500;
-                                }
-
-                                .axis-value {
-                                    font-size: 12px;
-                                    font-weight: 500;
-                                    color: #e8edf8;
-                                    min-width: 52px;
-                                    text-align: right;
-                                }
-                            }
-
-                            :deep(.el-slider__button) {
-                                scale: 0.5;
-                            }
-                        }
-                    }
-                }
-            }
-
-        }
-    }
-
-    .video-container {
-        flex: 1;
-        border: 1px solid #1E3A5F;
-        border-top: 0;
-
-        .map-container {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #00c2ff;
-            font-size: 20px;
-        }
-
-        .model-container {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #00c2ff;
-            font-size: 20px;
-        }
-
-        .monitor-container {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #00c2ff;
-            font-size: 20px;
-        }
-    }
-
-    .right-container {
-        width: 360px;
-        height: 100%;
-        padding: 16px;
-
-        .container-title {
-            color: #fff;
-            font-size: 16px;
-            font-weight: bold;
-            margin-bottom: 16px;
-        }
-
-        .split-line {
-            width: 100%;
-            height: 1px;
-            margin: 16px 0;
-            background: #1E3A5F;
-        }
-
-        .monitor-container {
-            width: 100%;
-            height: 360px;
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/inspection/cockpit/components/ManualTakeover/RoboticArm.vue b/src/views/inspection/cockpit/components/ManualTakeover/RoboticArm.vue
index 2ccbe7e..8ba9ba0 100644
--- a/src/views/inspection/cockpit/components/ManualTakeover/RoboticArm.vue
+++ b/src/views/inspection/cockpit/components/ManualTakeover/RoboticArm.vue
@@ -282,6 +282,12 @@ watch(() => props.robot, (newRobot) => {
         }, 100)
     }
 }, { immediate: true })
+
+onUnmounted(() => {
+    if (timer.value) {
+        clearInterval(timer.value)
+    }
+})
 </script>
 <style lang="scss" scoped>
 .robotic-arm-box {
diff --git a/src/views/inspection/cockpit/components/ManualTakeover/index.vue b/src/views/inspection/cockpit/components/ManualTakeover/index.vue
index f358fe0..fa40298 100644
--- a/src/views/inspection/cockpit/components/ManualTakeover/index.vue
+++ b/src/views/inspection/cockpit/components/ManualTakeover/index.vue
@@ -55,7 +55,7 @@
 
                     <RoboticArm :type="activeRoboticArm === 1 ? 'end' : 'posture'" :robot="activeBotData"
                         :device-id="deviceByKind(2)"
-                        v-if="[1, 3].includes(activeRoboticArm)" />
+                        v-if="activeController === 2 && [1, 3].includes(activeRoboticArm)" />
 
                     <div class="control-panel" v-if="activeRoboticArm === 2">
                         <div class="joint-list">
@@ -100,7 +100,7 @@
         </div>
         <div class="video-container">
             <div v-if="activeMode === 'auto' || activeController === 1" class="map-container">
-                <MapCanvas :robotList="robotList" ref="mapCanvasRef" />
+                <MapCanvas v-if="robotList.length > 0" :robotList="currentRobot" ref="mapCanvasRef" />
             </div>
             <div v-if="activeMode === 'artificial' && activeController === 2" class="model-container">
                 <UrdfViewer ref="urdfViewerRef" modelPath="/inspection/elfin10/elfin10.urdf.xacro" />
@@ -124,6 +124,7 @@
 <script setup>
 import { computed, onMounted, nextTick } from "vue";
 import { ElMessage } from 'element-plus'
+import MapCanvas from "../MapCanvas.vue";
 import SvgIcon from "@/components/SvgIcon";
 import UrdfViewer from '../UrdfView.vue'
 import DirectionControl from './DirectionControl.vue'
@@ -178,6 +179,10 @@ const changeBot = async (index) => {
     await loadRobotDevices(activeBotData.value.robotId)
 }
 
+const currentRobot = computed(() => {
+    return [robotList.value[activeBot.value]] || []
+})
+
 const colorList = ['#00D4FF', '#FFB300', '#00FF88', '#fff']
 
 const activeMode = ref('auto')