bonus
/
on-site-robots-screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

录音删除接口以及机器人操作按钮优化

This commit is contained in:
BianLzhaoMin 2025-07-19 14:07:59 +08:00
parent 50dd58254e
commit 269b734638
3 changed files with 88 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/home.js
View File

@ -80,6 +80,11 @@ export const uploadAudioApi = (data) => {
return service.post('/robot-screen-api/robot/instruct/addVideoFile', data)
}
// 操作面板内删除音频文件接口
export const deleteAudioApi = (data) => {
return service.post('/robot-screen-api/robot/instruct/delVideo', data)
}
// 操作面板内获取音频文件信息
export const getAudioInfoApi = (data) => {
return service.post('/robot-screen-api/robot/instruct/getVideoList', data)

70
src/views/home/components/control-deck.vue
View File

@ -75,32 +75,36 @@
<!-- 上下左右控制按钮 -->
<img
class="arrow-top hand-direction"
@click="handleChangeCamera('up')"
@mousedown="handleChangeCamera('up')"
@mouseup="handleChangeCamera('stop')"
@mouseleave="handleChangeCamera('stop')"
src="@/assets/home-imgs/control-2-arrow.png"
/>
<img
class="arrow-right hand-direction"
@click="handleChangeCamera('right')"
@mousedown="handleChangeCamera('right')"
@mouseup="handleChangeCamera('stop')"
@mouseleave="handleChangeCamera('stop')"
src="@/assets/home-imgs/control-2-arrow.png"
/>
<img
class="arrow-bottom hand-direction"
@click="handleChangeCamera('down')"
@mousedown="handleChangeCamera('down')"
@mouseup="handleChangeCamera('stop')"
@mouseleave="handleChangeCamera('stop')"
src="@/assets/home-imgs/control-2-arrow.png"
/>
<img
class="arrow-left hand-direction"
@click="handleChangeCamera('left')"
@mousedown="handleChangeCamera('left')"
@mouseup="handleChangeCamera('stop')"
@mouseleave="handleChangeCamera('stop')"
src="@/assets/home-imgs/control-2-arrow.png"
/>
<!-- 中间的按钮 -->
<div class="row-3-item-1-center">
<img
class="center-icon"
:src="isStopLeft ? stopImg : startImg"
@click="handleChangeCamera('stop')"
/>
<img class="center-icon" :src="isStopLeft ? stopImg : startImg" />
</div>
<!-- 描述文字 -->
@ -140,31 +144,41 @@
<!-- 上下左右控制按钮 -->
<img
class="arrow-top"
@click="handleChangeRobot('5')"
@mousedown="handleChangeRobot('5')"
@mouseup="handleChangeRobot(9)"
@mouseleave="handleChangeRobot(9)"
src="@/assets/home-imgs/control-2-arrow.png"
/>
<img
class="arrow-right"
@click="handleChangeRobot('8')"
@mousedown="handleChangeRobot('8')"
@mouseup="handleChangeRobot(9)"
@mouseleave="handleChangeRobot(9)"
src="@/assets/home-imgs/control-2-arrow.png"
/>
<img
class="arrow-bottom"
@click="handleChangeRobot('6')"
@mousedown="handleChangeRobot('6')"
@mouseup="handleChangeRobot(9)"
@mouseleave="handleChangeRobot(9)"
src="@/assets/home-imgs/control-2-arrow.png"
/>
<img
class="arrow-left"
@click="handleChangeRobot('7')"
@mousedown="handleChangeRobot('7')"
@mouseup="handleChangeRobot(9)"
@mouseleave="handleChangeRobot(9)"
src="@/assets/home-imgs/control-2-arrow.png"
/>
<!-- 描述文字 -->
<div class="text-top description-text">前进</div>
<div class="text-bottom description-text">后退</div>
<div class="text-left description-text">左转</div>
<div class="text-right description-text">右转</div>
<div class="row-3-item-1-center">
<img
class="center-icon"
:src="isStopRight ? startImg : stopImg"
@click="handleChangeRobot('9')"
/>
<img class="center-icon" :src="isStopRight ? startImg : stopImg" />
</div>
</div>
</n-grid-item>
@ -369,7 +383,7 @@ import {
changeDeviceCameraZoomInApi,
changeDeviceCameraZoomOutApi,
} from '@/utils/initLogin'
import { handleRobotActionApi, uploadAudioApi, getAudioInfoApi } from '@/api/home'
import { handleRobotActionApi, uploadAudioApi, getAudioInfoApi, deleteAudioApi } from '@/api/home'
import { useRobotDataStore } from '@/store/robot'
import { getRobotTokenFn, getRobotDeviceListFn } from '@/utils/getRobotInfo.js'
import {
@ -479,6 +493,16 @@ const handleChangeAudio = async (e) => {
selectPlayType.value = true
} else if (e === '删除') {
const { data: res } = await deleteAudioApi({
puId: robotData.robotInfo?.puId,
id: audioInfo.value?.id,
})
if (res.code == 200) {
message.success('删除音频成功')
} else {
message.error('删除音频失败')
}
} else {
const { data: res } = await handleRobotActionApi({
puId: robotData.robotInfo?.puId,
@ -891,9 +915,9 @@ onMounted(async () => {
}
.row-3-item-3 {
width: 120px;
height: 120px;
margin: 32px auto 0 !important;
width: 100px;
height: 100px;
margin: 42px auto 0 !important;
> img {
width: 24px;
@ -925,7 +949,7 @@ onMounted(async () => {
}
}
.row-4 {
margin: 24px 0;
margin: 34px 0;
.row-4-item {
text-align: center;
}

63
src/views/home/components/modal-content/control-deck.vue
View File

@ -10,35 +10,38 @@
class="arrow-top hand-direction"
src="@/assets/home-imgs/control-2-arrow.png"
alt=""
@click="handleChangeCamera('up')"
@mousedown="handleChangeCamera('up')"
@mouseup="handleChangeCamera('stop')"
@mouseleave="handleChangeCamera('stop')"
/>
<img
class="arrow-right hand-direction"
src="@/assets/home-imgs/control-2-arrow.png"
alt=""
@click="handleChangeCamera('right')"
@mousedown="handleChangeCamera('right')"
@mouseup="handleChangeCamera('stop')"
@mouseleave="handleChangeCamera('stop')"
/>
<img
class="arrow-bottom hand-direction"
src="@/assets/home-imgs/control-2-arrow.png"
alt=""
@click="handleChangeCamera('down')"
@mousedown="handleChangeCamera('down')"
@mouseup="handleChangeCamera('stop')"
@mouseleave="handleChangeCamera('stop')"
/>
<img
class="arrow-left hand-direction"
src="@/assets/home-imgs/control-2-arrow.png"
alt=""
@click="handleChangeCamera('left')"
@mousedown="handleChangeCamera('left')"
@mouseup="handleChangeCamera('stop')"
@mouseleave="handleChangeCamera('stop')"
/>
<!-- 中间的按钮 -->
<div class="row-3-item-1-center" @click="handleStopCamera">
<img
alt=""
class="center-icon"
:src="!isStopLeft ? startImg : stopImg"
@click="handleChangeCamera('stop')"
/>
<img alt="" class="center-icon" :src="!isStopLeft ? startImg : stopImg" />
</div>
<!-- 描述文字 -->
@ -68,36 +71,46 @@
<div class="row-3-item-3">
<!-- 上下左右控制按钮 -->
<img
@click="handleChangeRobot('5')"
@mousedown="handleChangeRobot('5')"
@mouseup="handleChangeRobot(9)"
@mouseleave="handleChangeRobot(9)"
class="arrow-top"
src="@/assets/home-imgs/control-2-arrow.png"
alt=""
/>
<img
@click="handleChangeRobot('8')"
@mousedown="handleChangeRobot('8')"
@mouseup="handleChangeRobot(9)"
@mouseleave="handleChangeRobot(9)"
class="arrow-right"
src="@/assets/home-imgs/control-2-arrow.png"
alt=""
/>
<img
@click="handleChangeRobot('6')"
@mousedown="handleChangeRobot('6')"
@mouseup="handleChangeRobot(9)"
@mouseleave="handleChangeRobot(9)"
class="arrow-bottom"
src="@/assets/home-imgs/control-2-arrow.png"
alt=""
/>
<img
@click="handleChangeRobot('7')"
@mousedown="handleChangeRobot('7')"
@mouseup="handleChangeRobot(9)"
@mouseleave="handleChangeRobot(9)"
class="arrow-left"
src="@/assets/home-imgs/control-2-arrow.png"
alt=""
/>
<!-- 描述文字 -->
<div class="text-top description-text">前进</div>
<div class="text-bottom description-text">后退</div>
<div class="text-left description-text">左转</div>
<div class="text-right description-text">右转</div>
<div class="row-3-item-1-center">
<img
class="center-icon"
:src="isStopRight ? startImg : stopImg"
@click="handleChangeRobot('9')"
/>
<img class="center-icon" :src="isStopRight ? startImg : stopImg" />
</div>
</div>
</n-grid-item>
@ -231,13 +244,13 @@ onMounted(async () => {})
}
.row-3-item-1 {
margin-right: 20px !important;
// margin-right: 20px !important;
}
.row-3-item-1,
.row-3-item-3 {
width: 120px;
height: 120px;
margin: 40px auto 0;
width: 100px;
height: 100px;
margin: 42px auto 0;
position: relative;
background: url('@/assets/home-imgs/control-2-round.png') no-repeat center center;
background-size: 100% 100%;
@ -374,10 +387,6 @@ onMounted(async () => {})
}
.row-3-item-3 {
width: 130px;
height: 130px;
margin: 38px auto 0 !important;
> img {
width: 24px;
height: 26px;