From 2c2bc8614c8ea0ce386369eb4924da1e6aa052d1 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Wed, 27 Sep 2023 09:35:57 +0800
Subject: [PATCH] 添加环境配置区分
---
src/components/g-map/DroneControlPanel.vue | 152 ++++++++++++++++++++++++++++++--------------------
1 files changed, 90 insertions(+), 62 deletions(-)
diff --git a/src/components/g-map/DroneControlPanel.vue b/src/components/g-map/DroneControlPanel.vue
index af2311f..bd5764f 100644
--- a/src/components/g-map/DroneControlPanel.vue
+++ b/src/components/g-map/DroneControlPanel.vue
@@ -1,10 +1,15 @@
<template>
- <div class="drone-control-wrapper">
- <div class="drone-control-header">Drone Flight Control</div>
+ <div class="drone-control-wrapper" v-if="modelValue">
+ <div class="drone-control-header width-100 flex-display flex-align-center flex-justify-between">
+ <span>无人机飞行控制</span>
+ <span @click="closeDrone">
+ <CloseOutlined />
+ </span>
+ </div>
<div class="drone-control-box">
<div class="box">
<div class="row">
- <div class="drone-control"><Button :ghost="!flightController" size="small" @click="onClickFightControl">{{ flightController ? 'Exit Remote Control' : 'Enter Remote Control'}}</Button></div>
+ <div class="drone-control"><Button :ghost="!flightController" size="small" @click="onClickFightControl">{{ flightController ? '退出控制' : '进入控制'}}</Button></div>
</div>
<div class="row">
<div class="drone-control-direction">
@@ -35,7 +40,7 @@
</Button>
</div>
<Button type="primary" size="small" danger ghost @click="handleEmergencyStop" >
- <template #icon><PauseCircleOutlined/></template><span>Break</span>
+ <template #icon><PauseCircleOutlined/></template><span>结束</span>
</Button>
</div>
<div class="row">
@@ -48,25 +53,25 @@
<template #formContent>
<div class="form-content">
<div>
- <span class="form-label">latitude:</span>
+ <span class="form-label">纬度:</span>
<a-input-number v-model:value="flyToPointPopoverData.latitude"/>
</div>
<div>
- <span class="form-label">longitude:</span>
+ <span class="form-label">经度:</span>
<a-input-number v-model:value="flyToPointPopoverData.longitude"/>
</div>
<div>
- <span class="form-label">height(m):</span>
+ <span class="form-label">高度(m):</span>
<a-input-number v-model:value="flyToPointPopoverData.height"/>
</div>
</div>
</template>
<Button size="small" ghost @click="onShowFlyToPopover" >
- <span>Fly to</span>
+ <span>起飞</span>
</Button>
</DroneControlPopover>
<Button size="small" ghost @click="onStopFlyToPoint" >
- <span>Stop Fly to</span>
+ <span>停止起飞</span>
</Button>
<DroneControlPopover
:visible="takeoffToPointPopoverData.visible"
@@ -77,27 +82,27 @@
<template #formContent>
<div class="form-content">
<div>
- <span class="form-label">latitude:</span>
+ <span class="form-label">纬度:</span>
<a-input-number v-model:value="takeoffToPointPopoverData.latitude"/>
</div>
<div>
- <span class="form-label">longitude:</span>
+ <span class="form-label">经度:</span>
<a-input-number v-model:value="takeoffToPointPopoverData.longitude"/>
</div>
<div>
- <span class="form-label">height(m):</span>
+ <span class="form-label">高度(m):</span>
<a-input-number v-model:value="takeoffToPointPopoverData.height"/>
</div>
<div>
- <span class="form-label">Safe Takeoff Altitude(m):</span>
+ <span class="form-label">安全起飞高度(m):</span>
<a-input-number v-model:value="takeoffToPointPopoverData.securityTakeoffHeight"/>
</div>
<div>
- <span class="form-label">Return-to-Home Altitude(m):</span>
+ <span class="form-label">返回原点高度(m):</span>
<a-input-number v-model:value="takeoffToPointPopoverData.rthAltitude"/>
</div>
<div>
- <span class="form-label">Lost Action:</span>
+ <span class="form-label">失控操作:</span>
<a-select
v-model:value="takeoffToPointPopoverData.rcLostAction"
style="width: 120px"
@@ -105,7 +110,7 @@
></a-select>
</div>
<div>
- <span class="form-label">Wayline Lost Action:</span>
+ <span class="form-label">线路丢失操作:</span>
<a-select
v-model:value="takeoffToPointPopoverData.exitWaylineWhenRcLost"
style="width: 120px"
@@ -115,10 +120,10 @@
</div>
</template>
<Button size="small" ghost @click="onShowTakeoffToPointPopover" >
- <span>Take off</span>
+ <span>一键起飞</span>
</Button>
</DroneControlPopover>
- <Button :loading="cmdItem.loading" size="small" ghost @click="sendControlCmd(cmdItem, index)">
+ <Button :loading="cmdItem.loading" size="small" ghost @click="sendControlCmd(cmdItem, 0)">
{{ cmdItem.operateText }}
</Button>
</div>
@@ -127,7 +132,7 @@
<div class="row">
<Select v-model:value="payloadSelectInfo.value" style="width: 110px; marginRight: 5px" :options="payloadSelectInfo.options" @change="handlePayloadChange"/>
<div class="drone-control">
- <Button type="primary" size="small" @click="onAuthPayload">Payload Control</Button>
+ <Button type="primary" size="small" @click="onAuthPayload">负载控制</Button>
</div>
</div>
<div class="row">
@@ -140,7 +145,7 @@
<template #formContent>
<div class="form-content">
<div>
- <span class="form-label">reset mode:</span>
+ <span class="form-label">重置模式:</span>
<a-select
v-model:value="gimbalResetPopoverData.resetMode"
style="width: 180px"
@@ -150,24 +155,24 @@
</div>
</template>
<Button size="small" ghost @click="onShowGimbalResetPopover">
- <span>Gimbal Reset</span>
+ <span>复位</span>
</Button>
</DroneControlPopover>
<Button size="small" ghost @click="onSwitchCameraMode">
- <span>Camera Mode Switch</span>
+ <span>相机模式开关</span>
</Button>
</div>
<div class="row">
<Button size="small" ghost @click="onStartCameraRecording">
- <span>Start Recording</span>
+ <span>开始录制</span>
</Button>
<Button size="small" ghost @click="onStopCameraRecording">
- <span>Stop Recording</span>
+ <span>停止录制</span>
</Button>
</div>
<div class="row">
<Button size="small" ghost @click="onTakeCameraPhoto">
- <span>Take Photo</span>
+ <span>拍照</span>
</Button>
<DroneControlPopover
:visible="zoomFactorPopoverData.visible"
@@ -178,7 +183,7 @@
<template #formContent>
<div class="form-content">
<div>
- <span class="form-label">camera type:</span>
+ <span class="form-label">相机类型:</span>
<a-select
v-model:value="zoomFactorPopoverData.cameraType"
style="width: 120px"
@@ -186,13 +191,13 @@
></a-select>
</div>
<div>
- <span class="form-label">zoom factor:</span>
+ <span class="form-label">缩放:</span>
<a-input-number v-model:value="zoomFactorPopoverData.zoomFactor" :min="2" :max="200" />
</div>
</div>
</template>
<Button size="small" ghost @click="($event) => onShowZoomFactorPopover()">
- <span class="word" @click=";">Zoom</span>
+ <span class="word" @click=";">聚焦</span>
</Button>
</DroneControlPopover>
<DroneControlPopover
@@ -204,7 +209,7 @@
<template #formContent>
<div class="form-content">
<div>
- <span class="form-label">camera type:</span>
+ <span class="form-label">相机类型:</span>
<a-select
v-model:value="cameraAimPopoverData.cameraType"
style="width: 120px"
@@ -212,7 +217,7 @@
></a-select>
</div>
<div>
- <span class="form-label">locked:</span>
+ <span class="form-label">锁定:</span>
<a-switch v-model:checked="cameraAimPopoverData.locked"/>
</div>
<div>
@@ -226,25 +231,25 @@
</div>
</template>
<Button size="small" ghost @click="($event) => onShowCameraAimPopover()">
- <span class="word" @click=";">AIM</span>
+ <span class="word" @click=";">目标</span>
</Button>
</DroneControlPopover>
</div>
</div>
</div>
<!-- 信息提示 -->
- <DroneControlInfoPanel :message="drcInfo"></DroneControlInfoPanel>
+ <!-- <DroneControlInfoPanel :message="drcInfo"></DroneControlInfoPanel> -->
</div>
</template>
<script setup lang="ts">
-import { defineProps, reactive, ref, watch, computed, onMounted, watchEffect } from 'vue'
+import { defineProps, reactive, ref, watch, computed, onMounted, watchEffect, defineEmits } from 'vue'
import { Select, message, Button } from 'ant-design-vue'
import { PayloadInfo, DeviceInfoType, ControlSource, DeviceOsdCamera, DrcStateEnum } from '/@/types/device'
import { useMyStore } from '/@/store'
import { postDrcEnter, postDrcExit } from '/@/api/drc'
import { useMqtt, DeviceTopicInfo } from './use-mqtt'
-import { DownOutlined, UpOutlined, LeftOutlined, RightOutlined, PauseCircleOutlined, UndoOutlined, RedoOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue'
+import { DownOutlined, UpOutlined, LeftOutlined, RightOutlined, PauseCircleOutlined, UndoOutlined, RedoOutlined, ArrowUpOutlined, ArrowDownOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { useManualControl, KeyCode } from './use-manual-control'
import { usePayloadControl } from './use-payload-control'
import { CameraMode, CameraType, CameraTypeOptions, ZoomCameraTypeOptions, CameraListItem } from '/@/types/live-stream'
@@ -261,7 +266,8 @@
const props = defineProps<{
sn: string,
deviceInfo: DeviceInfoType,
- payloads: null | PayloadInfo[]
+ payloads: null | PayloadInfo[],
+ modelValue: Boolean,
}>()
const store = useMyStore()
@@ -269,7 +275,7 @@
return store.state.clientId
})
-const initCmdList = baseCmdList.find(item => item.cmdKey === DeviceCmd.ReturnHome)
+const initCmdList = baseCmdList.find(item => item.cmdKey === DeviceCmd.ReturnHome) as DeviceCmdItem
const cmdItem = ref(initCmdList)
const {
@@ -284,11 +290,18 @@
action: cmdItem.action
}, false)
if (result && flightController.value) {
+ message.success('返航成功')
exitFlightCOntrol()
+ } else {
+ message.warn('请先进入控制！')
}
cmdItem.loading = false
}
-
+const emits = defineEmits(['update:modelValue'])
+// 关闭弹窗
+const closeDrone = () => {
+ emits('update:modelValue', false)
+}
const { flyToPoint, stopFlyToPoint, takeoffToPoint } = useDroneControl()
const MAX_SPEED = 14
@@ -312,7 +325,7 @@
async function onFlyToConfirm (confirm: boolean) {
if (confirm) {
if (!flyToPointPopoverData.height || !flyToPointPopoverData.latitude || !flyToPointPopoverData.longitude) {
- message.error('Input error')
+ message.error('输入错误')
return
}
try {
@@ -339,25 +352,25 @@
const takeoffToPointPopoverData = reactive({
visible: false,
loading: false,
- latitude: null as null | number,
- longitude: null as null | number,
- height: null as null | number,
- securityTakeoffHeight: null as null | number,
+ latitude: 28.62426114 as null | number,
+ longitude: 115.85657177 as null | number,
+ height: 120 as null | number,
+ securityTakeoffHeight: 100 as null | number,
maxSpeed: MAX_SPEED,
- rthAltitude: null as null | number,
+ rthAltitude: 100 as null | number,
rcLostAction: LostControlActionInCommandFLight.RETURN_HOME,
- exitWaylineWhenRcLost: WaylineLostControlActionInCommandFlight.RETURN_HOME
+ exitWaylineWhenRcLost: WaylineLostControlActionInCommandFlight.EXEC_LOST_ACTION
})
function onShowTakeoffToPointPopover () {
takeoffToPointPopoverData.visible = !takeoffToPointPopoverData.visible
takeoffToPointPopoverData.loading = false
- takeoffToPointPopoverData.latitude = null
- takeoffToPointPopoverData.longitude = null
- takeoffToPointPopoverData.securityTakeoffHeight = null
- takeoffToPointPopoverData.rthAltitude = null
+ takeoffToPointPopoverData.latitude = 28.62426114
+ takeoffToPointPopoverData.longitude = 115.85657177
+ takeoffToPointPopoverData.securityTakeoffHeight = 100
+ takeoffToPointPopoverData.rthAltitude = 100
takeoffToPointPopoverData.rcLostAction = LostControlActionInCommandFLight.RETURN_HOME
- takeoffToPointPopoverData.exitWaylineWhenRcLost = WaylineLostControlActionInCommandFlight.RETURN_HOME
+ takeoffToPointPopoverData.exitWaylineWhenRcLost = WaylineLostControlActionInCommandFlight.EXEC_LOST_ACTION
}
async function onTakeoffToPointConfirm (confirm: boolean) {
@@ -367,7 +380,7 @@
!takeoffToPointPopoverData.longitude ||
!takeoffToPointPopoverData.securityTakeoffHeight ||
!takeoffToPointPopoverData.rthAltitude) {
- message.error('Input error')
+ message.error('输入错误')
return
}
try {
@@ -396,10 +409,10 @@
useMqtt(deviceTopicInfo)
// 飞行控制
-const drcState = computed(() => {
- return store.state.deviceState?.dockInfo[props.sn]?.link_osd?.drc_state === DrcStateEnum.CONNECTED
-})
-const flightController = ref(drcState.value)
+// const drcState = computed(() => {
+// return store.state.deviceState?.dockInfo[props.sn]?.link_osd?.drc_state === DrcStateEnum.CONNECTED
+// })
+const flightController = ref(false)
async function onClickFightControl () {
if (flightController.value) {
@@ -408,7 +421,6 @@
}
enterFlightControl()
}
-
// 进入飞行控制
async function enterFlightControl () {
try {
@@ -428,7 +440,7 @@
if (droneControlSource.value !== ControlSource.A) {
await postFlightAuth(props.sn)
}
- message.success('Get flight control successfully')
+ message.success('获取飞行控制成功')
}
} catch (error: any) {
}
@@ -445,14 +457,14 @@
flightController.value = false
deviceTopicInfo.subTopic = ''
deviceTopicInfo.pubTopic = ''
- message.success('Exit flight control')
+ message.success('退出飞行控制成功')
}
} catch (error: any) {
}
}
// drc mqtt message
-const { drcInfo } = useDroneControlMqttEvent(props.sn)
+const { drcInfo, errorInfo } = useDroneControlMqttEvent(props.sn)
const {
handleKeyup,
@@ -571,7 +583,7 @@
async function onGimbalResetConfirm (confirm: boolean) {
if (confirm) {
if (gimbalResetPopoverData.resetMode === null) {
- message.error('Please select reset mode')
+ message.error('请选择重置模式')
return
}
gimbalResetPopoverData.loading = true
@@ -635,7 +647,7 @@
async function onZoomFactorConfirm (confirm: boolean) {
if (confirm) {
if (!zoomFactorPopoverData.zoomFactor || zoomFactorPopoverData.cameraType === null) {
- message.error('Please input Zoom Factor')
+ message.error('请输入缩放程度')
return
}
zoomFactorPopoverData.loading = true
@@ -672,7 +684,7 @@
async function onCameraAimConfirm (confirm: boolean) {
if (confirm) {
if (cameraAimPopoverData.cameraType === null || cameraAimPopoverData.x === null || cameraAimPopoverData.y === null) {
- message.error('Input error')
+ message.error('输入错误')
return
}
try {
@@ -688,11 +700,27 @@
}
cameraAimPopoverData.visible = false
}
+
+watch(() => errorInfo, (errorInfo) => {
+ if (errorInfo.value) {
+ message.error(errorInfo.value)
+ console.error(errorInfo.value)
+ errorInfo.value = ''
+ }
+}, {
+ immediate: true,
+ deep: true
+})
</script>
<style lang='scss' scoped>
.drone-control-wrapper{
- // border-bottom: 1px solid #515151;
+ position: absolute;
+ background: #000;
+ color: #fff;
+ left: calc( 100% + 10px);
+ width: 480px;
+ top: 0;
.drone-control-header{
font-size: 14px;
--
Gitblit v1.9.3