1248 lines
38 KiB
Vue
1248 lines
38 KiB
Vue
<template>
|
||
<!-- 机器人操控面板 -->
|
||
<div class="control-deck child-container">
|
||
<!-- 第一行 -->
|
||
<n-grid :cols="24">
|
||
<n-grid-item :span="9">
|
||
<div class="row-1-item">摄像头</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="6">
|
||
<!-- <div class="row-1-item">升降杆</div> -->
|
||
<div
|
||
class="row-1-item"
|
||
style="display: flex; align-items: center; justify-content: center"
|
||
>
|
||
<n-icon size="26">
|
||
<!-- 绿色 -->
|
||
<BatteryFullSharp
|
||
color="#16E607"
|
||
v-if="robotBaseInfo.dl >= 80 && robotBaseInfo.type != '充电中'"
|
||
/>
|
||
<BatteryHalfSharp
|
||
color="#E69807"
|
||
v-else-if="robotBaseInfo.dl >= 50 && robotBaseInfo.type != '充电中'"
|
||
/>
|
||
<BatteryDeadSharp
|
||
color="#F90303"
|
||
v-else-if="robotBaseInfo.type != '充电中'"
|
||
/>
|
||
<BatteryChargingSharp
|
||
color="#16E607"
|
||
v-if="robotBaseInfo.type == '充电中'"
|
||
/>
|
||
</n-icon>
|
||
<span style="margin-left: 4px; font-size: 13px"> {{ robotBaseInfo.dl }}%</span>
|
||
</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="9">
|
||
<div class="row-1-item">底盘</div>
|
||
</n-grid-item>
|
||
</n-grid>
|
||
<!-- 第二行 -->
|
||
<n-grid :cols="24">
|
||
<n-grid-item :span="9">
|
||
<div class="row-2-item">
|
||
<!-- <div>速度</div>
|
||
<div>30</div> -->
|
||
|
||
<!-- <n-button
|
||
type="primary"
|
||
size="small"
|
||
@click="handleStopAndOverRouter('15')"
|
||
v-if="robotBaseInfo.type.includes('巡航')"
|
||
>
|
||
暂停巡航
|
||
</n-button> -->
|
||
</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="6">
|
||
<div class="row-2-item">
|
||
<!-- <div>高度</div>
|
||
<div>
|
||
{{ currentHeight }}
|
||
</div> -->
|
||
</div>
|
||
|
||
<div class="row-2-item">
|
||
<div></div>
|
||
<div style="width: 70px">
|
||
{{ robotBaseInfo.type }}
|
||
</div>
|
||
</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="9">
|
||
<div class="row-2-item">
|
||
<!-- <div>速度</div>
|
||
<div>30</div> -->
|
||
<!-- <n-button
|
||
type="primary"
|
||
size="small"
|
||
@click="handleStopAndOverRouter('14')"
|
||
v-if="robotBaseInfo.value.type.includes('巡航')"
|
||
>
|
||
结束巡航
|
||
</n-button> -->
|
||
</div>
|
||
</n-grid-item>
|
||
</n-grid>
|
||
<!-- 第三行 -->
|
||
<n-grid :cols="10">
|
||
<n-grid-item :span="5">
|
||
<div class="row-3-item-1">
|
||
<!-- 上下左右控制按钮 -->
|
||
<img
|
||
class="arrow-top hand-direction"
|
||
@mousedown="handleChangeCamera('up')"
|
||
@mouseup="handleChangeCamera('stop')"
|
||
src="@/assets/home-imgs/control-2-arrow.png"
|
||
/>
|
||
<img
|
||
class="arrow-right hand-direction"
|
||
@mousedown="handleChangeCamera('right')"
|
||
@mouseup="handleChangeCamera('stop')"
|
||
src="@/assets/home-imgs/control-2-arrow.png"
|
||
/>
|
||
<img
|
||
class="arrow-bottom hand-direction"
|
||
@mousedown="handleChangeCamera('down')"
|
||
@mouseup="handleChangeCamera('stop')"
|
||
src="@/assets/home-imgs/control-2-arrow.png"
|
||
/>
|
||
<img
|
||
class="arrow-left hand-direction"
|
||
@mousedown="handleChangeCamera('left')"
|
||
@mouseup="handleChangeCamera('stop')"
|
||
src="@/assets/home-imgs/control-2-arrow.png"
|
||
/>
|
||
|
||
<!-- 中间的按钮 -->
|
||
<div class="row-3-item-1-center">
|
||
<img
|
||
class="center-icon"
|
||
@click="handleChangeCamera('stop')"
|
||
:src="isStopLeft ? stopImg : startImg"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 描述文字 -->
|
||
<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="add-reduce-btn">
|
||
<span>缩放</span>
|
||
<img
|
||
style="margin-bottom: 2px"
|
||
@mousedown="handleChangeZoomCamera('ZoomIn')"
|
||
@mouseup="handleStopDeviceCameraZoom()"
|
||
src="@/assets/home-imgs/control-2-add.png"
|
||
/>
|
||
<img
|
||
@mousedown="handleChangeZoomCamera('ZoomOut')"
|
||
@mouseup="handleStopDeviceCameraZoom()"
|
||
src="@/assets/home-imgs/control-2-reduce.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="3" v-if="false">
|
||
<div class="row-3-item-2" ref="container">
|
||
<!-- 上下滑动调节 -->
|
||
<span
|
||
ref="draggable"
|
||
class="up-down-box"
|
||
@mousedown="startDrag"
|
||
:style="{ top: currentTop + 'px' }"
|
||
/>
|
||
</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="5">
|
||
<div class="row-3-item-3">
|
||
<!-- 上下左右控制按钮 -->
|
||
<img
|
||
class="arrow-top"
|
||
@mousedown="handleChangeRobot('5')"
|
||
@mouseup="handleChangeRobot(9)"
|
||
src="@/assets/home-imgs/control-2-arrow.png"
|
||
/>
|
||
<img
|
||
class="arrow-right"
|
||
@mousedown="handleChangeRobot('8')"
|
||
@mouseup="handleChangeRobot(9)"
|
||
src="@/assets/home-imgs/control-2-arrow.png"
|
||
/>
|
||
<img
|
||
class="arrow-bottom"
|
||
@mousedown="handleChangeRobot('6')"
|
||
@mouseup="handleChangeRobot(9)"
|
||
src="@/assets/home-imgs/control-2-arrow.png"
|
||
/>
|
||
<img
|
||
class="arrow-left"
|
||
@mousedown="handleChangeRobot('7')"
|
||
@mouseup="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"
|
||
@click="handleChangeRobot(9)"
|
||
:src="isStopRight ? startImg : stopImg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</n-grid-item>
|
||
</n-grid>
|
||
<!-- 第四行 -->
|
||
<n-grid :cols="12" class="row-4">
|
||
<n-grid-item :span="3">
|
||
<div>警灯</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="3">
|
||
<div>
|
||
<n-radio
|
||
value="关闭"
|
||
name="basic-demo"
|
||
@change="handleChange1"
|
||
:checked="checkedValue === '关闭'"
|
||
>
|
||
关闭
|
||
</n-radio>
|
||
</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="3">
|
||
<div>
|
||
<n-radio
|
||
value="开启"
|
||
name="basic-demo"
|
||
@change="handleChange2"
|
||
:checked="checkedValue === '开启'"
|
||
>
|
||
开启
|
||
</n-radio>
|
||
</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="3">
|
||
<div class="row-4-item">
|
||
<n-radio
|
||
value="自动"
|
||
name="basic-demo"
|
||
@change="handleChange3"
|
||
:checked="checkedValue === '自动'"
|
||
>
|
||
自动
|
||
</n-radio>
|
||
</div>
|
||
</n-grid-item>
|
||
</n-grid>
|
||
<!-- 第五行 -->
|
||
<n-grid :cols="12" class="row-5">
|
||
<n-grid-item :span="3">
|
||
<div>录音播放</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="3">
|
||
<div>
|
||
<div>
|
||
<!-- <n-select
|
||
size="tiny"
|
||
v-model:value="selectValue"
|
||
:options="selectOptions"
|
||
/> -->
|
||
|
||
<!-- <n-select
|
||
size="small"
|
||
v-model:value="selectValue"
|
||
:options="selectOptions"
|
||
/> -->
|
||
|
||
<!-- <n-select
|
||
:options="selectOptions"
|
||
size="small"
|
||
:dropdown-style="{
|
||
borderRadius: '4px',
|
||
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
||
color: '#fff',
|
||
}"
|
||
/> -->
|
||
|
||
<!-- <n-button type="info" size="small">请上传</n-button> -->
|
||
|
||
<n-upload
|
||
:accept="audioMimeTypes"
|
||
:show-file-list="false"
|
||
:default-upload="false"
|
||
@before-upload="beforeUpload"
|
||
@change="handleChangeUpload"
|
||
v-if="!audioInfo"
|
||
>
|
||
<n-button type="info" size="small">请上传</n-button>
|
||
</n-upload>
|
||
|
||
<n-popselect
|
||
trigger="click"
|
||
v-model:value="audioValue"
|
||
:options="audioOptions"
|
||
@update:value="handleChangeAudio"
|
||
v-else
|
||
>
|
||
<n-button type="info" size="small">
|
||
{{ audioInfo?.fileName }}
|
||
</n-button>
|
||
</n-popselect>
|
||
</div>
|
||
<!-- <div style="margin-top: 16px">
|
||
<n-radio
|
||
:checked="checkedValue === '循环播放'"
|
||
value="循环播放"
|
||
name="basic-demo"
|
||
@change="handleChange4"
|
||
>
|
||
循环播放
|
||
</n-radio>
|
||
</div> -->
|
||
</div>
|
||
</n-grid-item>
|
||
<n-grid-item :span="6">
|
||
<div class="row-5-item">
|
||
<div class="row-5-item-1">
|
||
<img src="@/assets/home-imgs/control-3-voice.png" alt="" />
|
||
<div style="width: 60%">
|
||
<n-slider
|
||
:step="10"
|
||
:default-value="50"
|
||
:format-tooltip="formatTooltip"
|
||
@update:value="handleChangeVolume"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="row-5-item-1" style="margin-top: 16px">
|
||
<img src="@/assets/home-imgs/control-3-video.png" alt="" />
|
||
<div style="width: 60%">
|
||
<n-slider
|
||
:default-value="50"
|
||
:step="10"
|
||
:format-tooltip="formatTooltip"
|
||
/>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</n-grid-item>
|
||
</n-grid>
|
||
|
||
<!-- 第六行 -->
|
||
<n-grid :cols="10" class="row-6">
|
||
<n-grid-item :span="4">
|
||
<div class="row-6-item" @click="handleChangeRobot(10)">回桩充电</div>
|
||
</n-grid-item>
|
||
<!-- <n-grid-item :span="3">
|
||
<div class="row-6-item-1">
|
||
|
||
<img
|
||
alt=""
|
||
v-if="!isOpenMK"
|
||
@click="onHandleOpenOrCloseMK(1)"
|
||
src="@/assets/home-imgs/control-3-mk.png"
|
||
/>
|
||
|
||
|
||
<span v-else style="cursor: pointer" @click="onHandleOpenOrCloseMK(2)"
|
||
>结束喊话</span
|
||
>
|
||
</div>
|
||
</n-grid-item> -->
|
||
</n-grid>
|
||
</div>
|
||
|
||
<n-modal v-model:show="selectPlayType">
|
||
<n-card
|
||
size="huge"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
:bordered="false"
|
||
class="modal-container"
|
||
>
|
||
<n-form
|
||
ref="formRef"
|
||
size="small"
|
||
label-placement="left"
|
||
style="margin-top: 10px"
|
||
:model="playParams"
|
||
>
|
||
<n-form-item label="播放类型：">
|
||
<n-radio-group v-model:value="playParams.playType" name="radiogroup">
|
||
<n-space>
|
||
<n-radio :value="1"> 次数播放 </n-radio>
|
||
<n-radio :value="0"> 循环播放 </n-radio>
|
||
</n-space>
|
||
</n-radio-group>
|
||
</n-form-item>
|
||
|
||
<n-form-item label="播放次数：" v-if="playParams.playType === 1">
|
||
<n-input-number
|
||
v-model:value="playParams.playCount"
|
||
placeholder="输入播放次数"
|
||
:show-button="false"
|
||
/>
|
||
</n-form-item>
|
||
|
||
<n-button type="info" @click="handlePlayAudio"> 确定</n-button>
|
||
<n-button color="#6E90A9" style="margin-left: 8px" @click="selectPlayType = false">
|
||
取消
|
||
</n-button>
|
||
</n-form>
|
||
</n-card>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, h } from 'vue'
|
||
|
||
import {
|
||
stopDeviceCameraApi,
|
||
changeDeviceCameraApi,
|
||
stopDeviceCameraZoomApi,
|
||
changeDeviceCameraZoomInApi,
|
||
changeDeviceCameraZoomOutApi,
|
||
} from '@/utils/initLogin'
|
||
import { handleRobotActionApi, uploadAudioApi, getAudioInfoApi, deleteAudioApi } from '@/api/home'
|
||
import { useRobotDataStore } from '@/store/robot'
|
||
import { getRobotTokenFn, getRobotDeviceListFn } from '@/utils/getRobotInfo.js'
|
||
import {
|
||
BatteryHalfSharp,
|
||
BatteryDeadSharp,
|
||
BatteryFullSharp,
|
||
BatteryChargingSharp,
|
||
} from '@vicons/ionicons5'
|
||
import { openDeviceMKApi, stopDeviceMKApi } from '@/utils/initLogin'
|
||
import { useMessage, useDialog, NRadio, NRadioGroup, NInputNumber, NSpace } from 'naive-ui'
|
||
import { debounce } from 'lodash'
|
||
|
||
import stopImg from '@/assets/home-imgs/control-2-stop.png'
|
||
import startImg from '@/assets/home-imgs/control-2-start.png'
|
||
|
||
const dialog = useDialog()
|
||
const message = useMessage()
|
||
const robotData = useRobotDataStore()
|
||
const isStopLeft = ref(true)
|
||
const isStopRight = ref(false)
|
||
const upDownHeight = ref(30)
|
||
const container = ref(null)
|
||
const draggable = ref(null)
|
||
const isDragging = ref(false)
|
||
const currentTop = ref(0)
|
||
const startY = ref(0)
|
||
const startTop = ref(0)
|
||
const checkedValue = ref('关闭')
|
||
const selectValue = ref('')
|
||
const deviceToken = ref('')
|
||
const deviceInfo = ref({})
|
||
const isZoom = ref(false)
|
||
const robotBaseInfo = ref({})
|
||
const selectPlayType = ref(false)
|
||
|
||
const audioValue = ref('')
|
||
const audioInfo = ref(null)
|
||
|
||
const playParams = ref({
|
||
playType: 1,
|
||
playCount: 1,
|
||
})
|
||
|
||
const audioMimeTypes = ref(
|
||
'.pcm,.wav,.aac,audio/wav,audio/x-wav,audio/x-aiff,audio/aac,audio/x-aac',
|
||
)
|
||
|
||
// 音频操作选项
|
||
const audioOptions = ref([
|
||
{
|
||
label: '播放',
|
||
value: '播放',
|
||
},
|
||
{
|
||
label: '删除',
|
||
value: '删除',
|
||
},
|
||
{
|
||
label: '暂停',
|
||
value: '暂停',
|
||
},
|
||
])
|
||
|
||
const beforeUpload = ({ file }) => {
|
||
const allowedExtensions = ['.pcm', '.wav', '.aac']
|
||
const fileName = file.name.toLowerCase()
|
||
const isValid = allowedExtensions.some((ext) => fileName.endsWith(ext))
|
||
|
||
if (!isValid) {
|
||
message.error('只能上传 PCM、WAV、AAC 格式的音频文件')
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
|
||
// 暂停和停止巡航
|
||
const handleStopAndOverRouter = async (type) => {
|
||
return new Promise((resolve) => {
|
||
dialog.warning({
|
||
title: '提示',
|
||
content: `当前机器人正在巡检中，确定${type == 15 ? '暂停' : '结束'}巡检吗？`,
|
||
positiveText: '确定',
|
||
negativeText: '取消',
|
||
onPositiveClick: async () => {
|
||
try {
|
||
const { data: res } = await handleRobotActionApi({
|
||
puId: robotData.robotInfo?.puId,
|
||
type: type,
|
||
})
|
||
if (res.code == 200) {
|
||
message.success(`已${type == 15 ? '暂停' : '结束'}巡检`)
|
||
getRobotBaseInfo()
|
||
resolve(false) // 已暂停巡检，返回false表示不处于巡检状态
|
||
} else {
|
||
message.error(`${type == 15 ? '暂停' : '结束'}巡检失败` + res.message)
|
||
resolve(true) // 暂停失败，仍然处于巡检状态
|
||
}
|
||
} catch (error) {
|
||
message.error(`${type == 15 ? '暂停' : '结束'}巡检出错`)
|
||
resolve(true) // 出错时，假设仍然处于巡检状态
|
||
}
|
||
},
|
||
onNegativeClick: () => {
|
||
resolve(true) // 用户取消，仍然处于巡检状态
|
||
},
|
||
})
|
||
})
|
||
}
|
||
|
||
// 判断当前机器人是否在 巡检中 如果在巡检中 则不可进行任何操作 可弹框提示客户暂停巡检 然后重新获取机器人状态再进行操作
|
||
const handleInspection = async () => {
|
||
if (robotBaseInfo.value.type.includes('巡航')) {
|
||
return new Promise((resolve) => {
|
||
dialog.warning({
|
||
title: '提示',
|
||
content: '当前机器人正在巡检中，可停止巡检后再进行操作',
|
||
positiveText: '停止巡检',
|
||
negativeText: '取消',
|
||
onPositiveClick: async () => {
|
||
try {
|
||
const { data: res } = await handleRobotActionApi({
|
||
puId: robotData.robotInfo?.puId,
|
||
type: '14',
|
||
})
|
||
if (res.code == 200) {
|
||
message.success('已停止巡检')
|
||
getRobotBaseInfo()
|
||
resolve(false) // 已暂停巡检，返回false表示不处于巡检状态
|
||
} else {
|
||
message.error('停止巡检失败' + res.message)
|
||
resolve(true) // 暂停失败，仍然处于巡检状态
|
||
}
|
||
} catch (error) {
|
||
message.error('停止巡检出错')
|
||
resolve(true) // 出错时，假设仍然处于巡检状态
|
||
}
|
||
},
|
||
onNegativeClick: () => {
|
||
resolve(true) // 用户取消，仍然处于巡检状态
|
||
},
|
||
})
|
||
})
|
||
}
|
||
return false // 不包含"巡检"，返回false表示不处于巡检状态
|
||
}
|
||
|
||
// 上传音频
|
||
const handleChangeUpload = async (e) => {
|
||
const file = e.file
|
||
const formData = new FormData()
|
||
formData.append('file', file.file)
|
||
formData.append('puid', deviceInfo.value?.puId)
|
||
|
||
const { data: res } = await uploadAudioApi(formData)
|
||
|
||
if (res.code == 200) {
|
||
message.success('上传音频文件成功')
|
||
|
||
getAudioInfo()
|
||
} else {
|
||
message.error('上传音频文件失败')
|
||
}
|
||
}
|
||
|
||
// 获取音频信息
|
||
const getAudioInfo = async () => {
|
||
const { data: res } = await getAudioInfoApi({
|
||
puid: deviceInfo.value?.puId,
|
||
})
|
||
|
||
if (res.code == 200) {
|
||
audioInfo.value = res?.data
|
||
}
|
||
}
|
||
|
||
const handleChangeAudio = async (e) => {
|
||
// console.log(e, '选择音频操作')
|
||
if (e === '播放') {
|
||
// showPlayTypeDialog()
|
||
|
||
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('删除音频成功')
|
||
getAudioInfo()
|
||
} else {
|
||
message.error('删除音频失败')
|
||
}
|
||
} else {
|
||
const { data: res } = await handleRobotActionApi({
|
||
puId: robotData.robotInfo?.puId,
|
||
type: '17',
|
||
enable: '0',
|
||
videoId: audioInfo.value?.id,
|
||
})
|
||
|
||
if (res.code == 200) {
|
||
message.success('已暂停')
|
||
} else {
|
||
message.error('暂停音频失败')
|
||
}
|
||
}
|
||
}
|
||
|
||
// 计算当前高度百分比(0-100)
|
||
const currentHeight = computed(() => {
|
||
if (!container.value) return 0
|
||
const containerHeight = container.value.offsetHeight
|
||
const draggableHeight = draggable.value?.offsetHeight || 0
|
||
const maxTop = containerHeight - draggableHeight - 20 // 20是底部初始偏移
|
||
|
||
// 计算百分比 (0-100)
|
||
return Math.round(100 - (currentTop.value / maxTop) * 100)
|
||
})
|
||
|
||
const startDrag = (e) => {
|
||
isDragging.value = true
|
||
startY.value = e.clientY
|
||
startTop.value = currentTop.value
|
||
|
||
document.addEventListener('mousemove', onDrag)
|
||
document.addEventListener('mouseup', stopDrag)
|
||
}
|
||
|
||
const onDrag = (e) => {
|
||
if (!isDragging.value) return
|
||
|
||
const deltaY = e.clientY - startY.value
|
||
let newTop = startTop.value + deltaY
|
||
|
||
const containerHeight = container.value.offsetHeight
|
||
const draggableHeight = draggable.value.offsetHeight
|
||
const maxTop = containerHeight - draggableHeight - 20
|
||
|
||
newTop = Math.max(0, Math.min(newTop, maxTop))
|
||
currentTop.value = newTop
|
||
}
|
||
|
||
const stopDrag = () => {
|
||
isDragging.value = false
|
||
document.removeEventListener('mousemove', onDrag)
|
||
document.removeEventListener('mouseup', stopDrag)
|
||
|
||
// 拖动结束时可以在这里使用currentHeight.value
|
||
console.log('当前高度:', currentHeight.value)
|
||
}
|
||
|
||
onMounted(() => {
|
||
// const containerHeight = container.value.offsetHeight
|
||
// const draggableHeight = draggable.value.offsetHeight
|
||
// const maxTop = containerHeight - draggableHeight - 20
|
||
// currentTop.value = maxTop * (1 - upDownHeight.value / 100)
|
||
})
|
||
|
||
const handleChange1 = (e) => {
|
||
checkedValue.value = e.target.value
|
||
handleChangeLight(checkedValue.value)
|
||
}
|
||
const handleChange2 = (e) => {
|
||
checkedValue.value = e.target.value
|
||
handleChangeLight(checkedValue.value)
|
||
}
|
||
const handleChange3 = (e) => {
|
||
checkedValue.value = e.target.value
|
||
handleChangeLight(checkedValue.value)
|
||
}
|
||
|
||
// 警灯闪烁
|
||
|
||
const handleChangeLight = async (value) => {
|
||
const lightMap = {
|
||
关闭: 'OFF',
|
||
开启: 'ON',
|
||
自动: 'AUTO',
|
||
}
|
||
|
||
const { data: res } = await handleRobotActionApi({
|
||
puId: robotData.robotInfo?.puId,
|
||
type: '19',
|
||
value: lightMap[value],
|
||
})
|
||
|
||
if (res.code == 200) {
|
||
message.success('操作成功')
|
||
} else {
|
||
message.error('操作失败')
|
||
checkedValue.value = '关闭'
|
||
}
|
||
}
|
||
|
||
const handleChange4 = (e) => {
|
||
checkedValue.value = e.target.value
|
||
}
|
||
|
||
const formatTooltip = (value) => {
|
||
return `${value}%`
|
||
}
|
||
|
||
// 停止缩放
|
||
const handleStopDeviceCameraZoom = async () => {
|
||
isZoom.value = false
|
||
const res = await stopDeviceCameraZoomApi({
|
||
idx: 0,
|
||
token: deviceToken.value,
|
||
puid: deviceInfo.value?.puId,
|
||
})
|
||
|
||
isStopLeft.value = true
|
||
console.log(res, '停止缩放')
|
||
}
|
||
|
||
// 操控机器人上方的摄像头
|
||
const handleChangeCamera = debounce(async (motion) => {
|
||
const isInspection = await handleInspection()
|
||
if (isInspection) {
|
||
return
|
||
}
|
||
if (motion === 'stop' && isZoom.value) {
|
||
isStopLeft.value = true
|
||
handleStopDeviceCameraZoom()
|
||
return
|
||
}
|
||
if (motion === 'stop') {
|
||
isStopLeft.value = true
|
||
} else {
|
||
isStopLeft.value = false
|
||
}
|
||
if (!deviceInfo.value?.puId) {
|
||
message.error('当前机器人未连接', {
|
||
duration: 1000,
|
||
})
|
||
return
|
||
}
|
||
const res = await changeDeviceCameraApi({
|
||
token: deviceToken.value,
|
||
puid: deviceInfo.value?.puId,
|
||
idx: 0,
|
||
motion,
|
||
})
|
||
}, 0)
|
||
|
||
// 球机缩放
|
||
const handleChangeZoomCamera = async (motion) => {
|
||
const isInspection = await handleInspection()
|
||
if (isInspection) {
|
||
return
|
||
}
|
||
isStopLeft.value = false
|
||
isZoom.value = true
|
||
if (motion === 'ZoomIn') {
|
||
const res = await changeDeviceCameraZoomInApi({
|
||
token: deviceToken.value,
|
||
puid: deviceInfo.value?.puId,
|
||
idx: 0,
|
||
})
|
||
} else {
|
||
const res = await changeDeviceCameraZoomOutApi({
|
||
token: deviceToken.value,
|
||
puid: deviceInfo.value?.puId,
|
||
idx: 0,
|
||
})
|
||
}
|
||
}
|
||
|
||
// 操控机器人
|
||
const handleChangeRobot = debounce(async (type) => {
|
||
const isInspection = await handleInspection()
|
||
if (isInspection) {
|
||
return
|
||
}
|
||
// type 5 前进 6 后退 7 左转 8 右转
|
||
const typeMap = {
|
||
5: '前进', // 前进
|
||
6: '后退', // 后退
|
||
7: '左转', // 左转
|
||
8: '右转', // 右转
|
||
9: '停止', // 停止
|
||
}
|
||
if (!robotData.robotInfo?.puId) {
|
||
message.error('当前机器人未连接', {
|
||
duration: 1000,
|
||
})
|
||
return
|
||
}
|
||
|
||
const params = {
|
||
puId: robotData.robotInfo?.puId,
|
||
type,
|
||
}
|
||
|
||
console.log(params, '机器人操控参数' + typeMap[type])
|
||
|
||
const { data: res } = await handleRobotActionApi(params)
|
||
console.log(res, '机器人操控结果')
|
||
if (res.code == 200 && type != 9) {
|
||
isStopRight.value = true
|
||
}
|
||
if (res.code == 200 && type == 9) {
|
||
isStopRight.value = false
|
||
}
|
||
}, 0)
|
||
|
||
// 停止机器人
|
||
const handleStopRobot = async () => {
|
||
console.log('停止机器人')
|
||
}
|
||
|
||
// 获取机器人的基础信息
|
||
const getRobotBaseInfo = async () => {
|
||
const { data: res } = await handleRobotActionApi({
|
||
puId: deviceInfo.value?.puId,
|
||
type: '1',
|
||
})
|
||
|
||
robotBaseInfo.value = res.data
|
||
}
|
||
|
||
// 确认播放
|
||
const handlePlayAudio = async () => {
|
||
const loop = playParams.value.playType === 0 ? 0 : playParams.value.playCount
|
||
const { data: res } = await handleRobotActionApi({
|
||
puId: robotData.robotInfo?.puId,
|
||
type: '17',
|
||
loop,
|
||
enable: '1',
|
||
videoId: audioInfo.value?.id,
|
||
})
|
||
|
||
if (res.code == 200) {
|
||
message.success('播放音频成功')
|
||
selectPlayType.value = false
|
||
} else {
|
||
message.error('播放音频失败')
|
||
}
|
||
}
|
||
|
||
// 音量选择
|
||
|
||
const handleChangeVolume = debounce(async (value) => {
|
||
const { data: res } = await handleRobotActionApi({
|
||
puId: robotData.robotInfo?.puId,
|
||
type: '18',
|
||
sound: value,
|
||
videoId: audioInfo.value?.id,
|
||
})
|
||
if (res.code == 200) {
|
||
message.success('音量调整成功')
|
||
} else {
|
||
message.error('音量调整失败')
|
||
}
|
||
}, 0)
|
||
|
||
const isOpenMK = ref(false)
|
||
const onHandleOpenOrCloseMK = async (type) => {
|
||
if (type === 1) {
|
||
// 先判断当前设备有没有开启MK
|
||
try {
|
||
// 请求麦克风权限并检查状态
|
||
// const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||
|
||
// // 检查麦克风是否真的在接收声音（可选）
|
||
// const audioTracks = stream.getAudioTracks()
|
||
// if (audioTracks.length > 0) {
|
||
// audioTracks.forEach((track) => track.stop())
|
||
|
||
// // 调用麦克风开启接口
|
||
// const { data: res } = await openDeviceMKApi({
|
||
// token: deviceToken.value,
|
||
// puId: robotData.robotInfo?.puId,
|
||
// idx: 0,
|
||
// })
|
||
|
||
// if (res.code == 200) {
|
||
// message.success('麦克风开启成功')
|
||
// isOpenMK.value = true
|
||
// } else {
|
||
// message.error('麦克风开启失败')
|
||
// }
|
||
// } else {
|
||
// message.error('未检测到音频输入设备')
|
||
// }
|
||
|
||
// 调用麦克风开启接口
|
||
const { data: res } = await openDeviceMKApi({
|
||
token: deviceToken.value,
|
||
puid: robotData.robotInfo?.puId,
|
||
idx: 0,
|
||
})
|
||
|
||
if (res.code == 200) {
|
||
message.success('麦克风开启成功')
|
||
isOpenMK.value = true
|
||
} else {
|
||
message.error('麦克风开启失败')
|
||
}
|
||
} catch (error) {
|
||
message.error('麦克风访问被拒绝或不可用,请检查麦克风权限')
|
||
}
|
||
} else {
|
||
// 调用麦克风开启接口
|
||
const { data: res } = await stopDeviceMKApi({
|
||
token: deviceToken.value,
|
||
puid: deviceInfo.value?.puId,
|
||
idx: 0,
|
||
})
|
||
|
||
if (res.code == 200) {
|
||
message.success('麦克风已关闭')
|
||
isOpenMK.value = false
|
||
} else {
|
||
message.error('麦克风关闭失败')
|
||
}
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
const token = await getRobotTokenFn() // 获取设备token
|
||
const device = await getRobotDeviceListFn() // 获取设备信息
|
||
deviceToken.value = token
|
||
deviceInfo.value = device
|
||
getRobotBaseInfo()
|
||
getAudioInfo()
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.control-deck {
|
||
justify-content: space-between;
|
||
}
|
||
.row-1-item,
|
||
.row-2-item {
|
||
width: 90px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.row-1-item {
|
||
height: 24px;
|
||
background: url('@/assets/home-imgs/control-1-bg.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.row-2-item {
|
||
// margin-top: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
& div:last-child {
|
||
// width: 32px;
|
||
height: 16px;
|
||
background-color: #005899;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
line-height: 16px;
|
||
padding: 2px 10px;
|
||
}
|
||
}
|
||
|
||
.row-3-item-1,
|
||
.row-3-item-3 {
|
||
width: 68px;
|
||
height: 68px;
|
||
margin: 20px auto 0;
|
||
position: relative;
|
||
background: url('@/assets/home-imgs/control-2-round.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
|
||
> img {
|
||
width: 16px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
object-fit: contain;
|
||
}
|
||
|
||
// // 增加一个移入时的放大平滑动画效果
|
||
// .hand-direction:hover {
|
||
// transform: scale(1.1);
|
||
// transition: transform 0.3s ease-in-out;
|
||
// }
|
||
|
||
.arrow-top {
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 50%;
|
||
transform: translateX(-50%) rotate(-90deg);
|
||
}
|
||
.arrow-right {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 1px;
|
||
transform: translateY(-50%);
|
||
}
|
||
.arrow-bottom {
|
||
position: absolute;
|
||
bottom: 1px;
|
||
left: 50%;
|
||
transform: translateX(-50%) rotate(90deg);
|
||
}
|
||
.arrow-left {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 1px;
|
||
transform: translateY(-50%) rotate(-180deg);
|
||
}
|
||
|
||
.row-3-item-1-center {
|
||
width: 16px;
|
||
height: 16px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transform: translate(-50%, -50%) rotate(45deg);
|
||
border: 2px solid #7fc0ff;
|
||
border-radius: 4px;
|
||
background-color: #2f78bf;
|
||
cursor: pointer;
|
||
|
||
> img {
|
||
width: 9px;
|
||
height: 9px;
|
||
object-fit: contain;
|
||
transform: rotate(-45deg);
|
||
}
|
||
}
|
||
|
||
// 描述文字
|
||
.description-text {
|
||
position: absolute;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.text-top {
|
||
left: 50%;
|
||
top: -28px;
|
||
transform: translateX(-50%);
|
||
}
|
||
.text-bottom {
|
||
left: 50%;
|
||
bottom: -28px;
|
||
transform: translateX(-50%);
|
||
}
|
||
.text-top,
|
||
.text-bottom {
|
||
width: 36px;
|
||
height: 22px;
|
||
border: 1px solid #7fc0ff;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
line-height: 22px;
|
||
}
|
||
|
||
.text-left {
|
||
left: -28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.text-right {
|
||
right: -28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.text-left,
|
||
.text-right {
|
||
height: 36px;
|
||
width: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #7fc0ff;
|
||
border-radius: 4px;
|
||
// 使文字竖向展示 并垂直居中
|
||
writing-mode: vertical-rl;
|
||
text-orientation: upright;
|
||
}
|
||
|
||
.add-reduce-btn {
|
||
position: absolute;
|
||
right: -58px;
|
||
top: -16px;
|
||
// height: 100px;
|
||
width: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
span {
|
||
font-size: 13px;
|
||
width: 30px;
|
||
text-align: center;
|
||
color: #7fc0ff;
|
||
}
|
||
|
||
img {
|
||
width: 20px;
|
||
height: 50px;
|
||
object-fit: contain;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.row-3-item-3 {
|
||
width: 68px;
|
||
height: 68px;
|
||
margin: 20px auto 0 !important;
|
||
|
||
> img {
|
||
width: 16px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.row-3-item-2 {
|
||
width: 60px;
|
||
height: 120px;
|
||
margin: 32px auto 0 !important;
|
||
background: url('@/assets/home-imgs/control-2-up-down.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
user-select: none;
|
||
|
||
.up-down-box {
|
||
position: absolute;
|
||
left: 50%;
|
||
width: 30px;
|
||
height: 10px;
|
||
background: url('@/assets/home-imgs/control-2-up-down-hand.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
transform: translateX(-50%);
|
||
cursor: pointer;
|
||
touch-action: none;
|
||
}
|
||
}
|
||
.row-4 {
|
||
margin-top: 10px;
|
||
.row-4-item {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.row-5-item-1 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
> img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.row-6 {
|
||
// margin-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.row-6-item {
|
||
padding: 2px 8px;
|
||
display: inline-block;
|
||
background-color: #005db6;
|
||
border: 1px solid #7fc0ff;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.row-6-item-1 {
|
||
text-align: center;
|
||
img {
|
||
width: 28px;
|
||
height: 40px;
|
||
object-fit: contain;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
:deep(.n-radio__label) {
|
||
color: #fff !important;
|
||
}
|
||
|
||
:deep(.n-radio__dot) {
|
||
background: transparent;
|
||
border: 1px solid #7fc0ff;
|
||
box-shadow: none;
|
||
}
|
||
|
||
:deep(.n-radio__dot::before) {
|
||
background: #7fc0ff;
|
||
}
|
||
|
||
// :deep(.n-base-selection .n-base-selection-label) {
|
||
// background-color: #054a92;
|
||
// color: #fff;
|
||
// }
|
||
|
||
:deep(.n-slider .n-slider-rail .n-slider-rail__fill) {
|
||
background-color: #7fc0ff;
|
||
}
|
||
:deep(.n-slider .n-slider-handles .n-slider-handle-wrapper .n-slider-handle) {
|
||
background-color: #7fc0ff;
|
||
}
|
||
|
||
:deep(.n-slider .n-slider-rail) {
|
||
background-color: #2d6098;
|
||
}
|
||
|
||
.modal-container {
|
||
height: 40vh;
|
||
width: 30%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
</style>
|