feat: 数字平台加载地图
This commit is contained in:
parent
7c9f813246
commit
424df50112
@ -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>
|
|
||||||
@ -282,6 +282,12 @@ watch(() => props.robot, (newRobot) => {
|
|||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
}, { immediate: true })
|
}, { immediate: true })
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer.value) {
|
||||||
|
clearInterval(timer.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.robotic-arm-box {
|
.robotic-arm-box {
|
||||||
|
|||||||
@ -55,7 +55,7 @@
|
|||||||
|
|
||||||
<RoboticArm :type="activeRoboticArm === 1 ? 'end' : 'posture'" :robot="activeBotData"
|
<RoboticArm :type="activeRoboticArm === 1 ? 'end' : 'posture'" :robot="activeBotData"
|
||||||
:device-id="deviceByKind(2)"
|
: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="control-panel" v-if="activeRoboticArm === 2">
|
||||||
<div class="joint-list">
|
<div class="joint-list">
|
||||||
@ -100,7 +100,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="video-container">
|
<div class="video-container">
|
||||||
<div v-if="activeMode === 'auto' || activeController === 1" class="map-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>
|
||||||
<div v-if="activeMode === 'artificial' && activeController === 2" class="model-container">
|
<div v-if="activeMode === 'artificial' && activeController === 2" class="model-container">
|
||||||
<UrdfViewer ref="urdfViewerRef" modelPath="/inspection/elfin10/elfin10.urdf.xacro" />
|
<UrdfViewer ref="urdfViewerRef" modelPath="/inspection/elfin10/elfin10.urdf.xacro" />
|
||||||
@ -124,6 +124,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { computed, onMounted, nextTick } from "vue";
|
import { computed, onMounted, nextTick } from "vue";
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
import MapCanvas from "../MapCanvas.vue";
|
||||||
import SvgIcon from "@/components/SvgIcon";
|
import SvgIcon from "@/components/SvgIcon";
|
||||||
import UrdfViewer from '../UrdfView.vue'
|
import UrdfViewer from '../UrdfView.vue'
|
||||||
import DirectionControl from './DirectionControl.vue'
|
import DirectionControl from './DirectionControl.vue'
|
||||||
@ -178,6 +179,10 @@ const changeBot = async (index) => {
|
|||||||
await loadRobotDevices(activeBotData.value.robotId)
|
await loadRobotDevices(activeBotData.value.robotId)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const currentRobot = computed(() => {
|
||||||
|
return [robotList.value[activeBot.value]] || []
|
||||||
|
})
|
||||||
|
|
||||||
const colorList = ['#00D4FF', '#FFB300', '#00FF88', '#fff']
|
const colorList = ['#00D4FF', '#FFB300', '#00FF88', '#fff']
|
||||||
|
|
||||||
const activeMode = ref('auto')
|
const activeMode = ref('auto')
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user