From 7d0d0cbc81de9087173dbee4e366c15f347d38b9 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 17 Apr 2025 20:45:19 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue | 91 ++++++++++++++++++++++++++++-----------------
1 files changed, 56 insertions(+), 35 deletions(-)
diff --git a/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue b/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
index d882049..546ab80 100644
--- a/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
+++ b/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
@@ -53,12 +53,12 @@
<el-icon class="btnIcon">
<Top />
</el-icon>
- <div class="btn" @mousedown="onMouseDown(KeyCode.ARROW_UP)" @mouseup="onMouseUp">C</div>
+ <div class="btn" @mousedown="onMouseDown(KeyCode.KEY_C)" @mouseup="onMouseUp">C</div>
</div>
</div>
<div class="btnGroupT">
<div class="btnItem">
- <div class="btn" @mousedown="onMouseDown(KeyCode.ARROW_DOWN)" @mouseup="onMouseUp">Z</div>
+ <div class="btn" @mousedown="onMouseDown(KeyCode.KEY_Z)" @mouseup="onMouseUp">Z</div>
<el-icon class="btnIcon">
<Bottom />
</el-icon>
@@ -66,7 +66,7 @@
</div>
</div>
</div>
-
+ <!-- 指南针-->
<div class="compass">
<ControlComPass />
</div>
@@ -83,7 +83,13 @@
</div>
<div class="ptzControlBtnBox">
<div class="ptzControlBtn b-r">
- <div v-for="(item, index) in list5" :style="item.style" class="ptzControlItem"></div>
+ <div
+ v-for="(item, index) in list5"
+ :style="item.style"
+ class="ptzControlItem"
+ @mousedown="onMouseDown(item.key)"
+ @mouseup="onMouseUp"
+ ></div>
<div
class="ptzControlItemIcon"
@@ -122,7 +128,7 @@
<script setup>
import ControlComPass from '../ControlComPass/ControlComPass.vue'
import { KeyCode, useManualControl } from '@/hooks/controlDrone/useManualControl'
-import { droneController, exitController, postDrc, postDrcExit, returnHome, returnHomeCancel } from '@/api/drc'
+import { droneController, exitController, postDrc, returnHome, returnHomeCancel } from '@/api/drc'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { UranusMqtt } from '@/mqtt'
@@ -133,23 +139,29 @@
ArrowUp,
Bottom,
CaretRight,
- CaretTop,
Minus,
Plus,
RefreshLeft,
RefreshRight,
} from '@element-plus/icons-vue'
-import controlCenterImg from '@/assets/images/taskManagement/taskIntermediateContent/controlCenter.png'
import BaseControl from '@/components/CurrentTaskDetails/ControlPanel/BaseControl.vue'
import EventBus from '@/event-bus'
-import dayjs from 'dayjs'
+import { getPayloadControlApi, ptzControlApi } from '@/api/payload'
const deviceOsdInfo = inject('deviceOsdInfo')
const taskDetails = inject('taskDetails')
+const dockSn = inject('dockSn')
+const droneSn = inject('droneSn')
+
const store = useStore()
+let mqttState = null
+const client_id = ref('')
+const valueTime = ref('00:00:00')
+let timer = null
+let totalSeconds = 0
+
const workspace_id = computed(() => taskDetails?.value?.workspace_id)
-const dock_sn = computed(() => taskDetails.value.device_sns[0])
const list1 = [
{ key: KeyCode.KEY_Q, text: 'Q', icon: RefreshLeft },
{ key: KeyCode.KEY_W, text: 'W', icon: ArrowUp },
@@ -162,12 +174,13 @@
]
const speed = ref(5)
+provide('speed', speed)
const list5 = [
- { name: '上', style: { top: '-70%' }, imgStyle: { top: '20%', left: '50%' } },
- { name: '右', style: { left: '70%' }, imgStyle: { right: '0', top: '50%' } },
- { name: '下', style: { top: '70%' }, imgStyle: { bottom: '0', left: '50%' } },
- { name: '左', style: { left: '-70%' }, imgStyle: { left: '20%', top: '50%' } },
+ { name: '上', key: KeyCode.ARROW_UP, operate: 'up', style: { top: '-70%' } },
+ { name: '右', key: KeyCode.ARROW_RIGHT, operate: 'right', style: { left: '70%' } },
+ { name: '下', key: KeyCode.ARROW_DOWN, operate: 'down', style: { top: '70%' } },
+ { name: '左', key: KeyCode.ARROW_LEFT, operate: 'left', style: { left: '-70%' } },
]
const list4 = [
@@ -183,21 +196,13 @@
],
]
-let mqttState = null
-const client_id = ref('')
-const valueTime = ref('00:00:00')
-let timer = null
-let totalSeconds = 0
-
const deviceTopicInfo = ref({
- sn: deviceOsdInfo.value?.data?.sn,
pubTopic: '',
subTopic: '',
})
const flightController = ref(false)
// 控制对象
let manualControl = {}
-const sn = computed(() => deviceOsdInfo?.value?.data?.sn)
const isAutoControl = inject('isAutoControl')
const timeStart = () => {
@@ -222,7 +227,7 @@
// 按下操作
function onMouseDown(type) {
- manualControl?.handleKeyup(type, { sn: sn.value, speed: speed.value })
+ manualControl?.handleKeyup(type)
}
// 弹起操作
@@ -232,7 +237,7 @@
// 取消手动控制
function cancelControl() {
- exitController({ client_id: client_id.value, dock_sn: dock_sn.value })
+ exitController({ client_id: client_id.value, dock_sn: dockSn.value })
.then(res => {
flightController.value = false
deviceTopicInfo.value.subTopic = ''
@@ -242,11 +247,18 @@
.catch(e => {})
}
+// 获得有效载荷控制
+function getPayloadControl() {
+ getPayloadControlApi({ sn: dockSn.value }).then(res => {
+ ElMessage.success('成功获得有效载荷控制')
+ })
+}
+
// 手动控制
function control() {
if (!client_id.value) return ElMessage.error('无人机不在空中，不能进入指挥飞行模式。')
- if (!dock_sn.value) return ElMessage.error('系统错误，未获取到dock_sn')
- droneController({ client_id: client_id.value, dock_sn: dock_sn.value }).then(res => {
+ if (!dockSn.value) return ElMessage.error('系统错误，未获取到dock_sn')
+ droneController({ client_id: client_id.value, dock_sn: dockSn.value }).then(res => {
flightController.value = true
const { data } = res.data
if (data.sub && data.sub?.length > 0) {
@@ -256,20 +268,21 @@
deviceTopicInfo.value.pubTopic = data.pub[0]
}
ElMessage.success('控制成功')
+ getPayloadControl()
isAutoControl.value = false
})
}
// 返航
function onBackDock() {
- returnHome(dock_sn.value).then(res => {
+ returnHome(dockSn?.value).then(res => {
ElMessage.success('返航操作成功')
})
}
// 取消返航
function cancelBackDock() {
- returnHomeCancel({ client_id: this.clientId, dock_sn: this.sn }).then(res => {
+ returnHomeCancel(dockSn?.value).then(res => {
ElMessage.success('取消返航成功')
})
}
@@ -303,13 +316,20 @@
}
}
+// useManualControl里面用的参数
+const paramsRef = computed(() => ({
+ droneSn: droneSn.value,
+ dockSn: dockSn.value,
+ speed: speed.value,
+}))
+
watch(
() => workspace_id.value,
async () => {
if (workspace_id.value) {
await createConnect()
// 使用控制
- manualControl = useManualControl(mqttState, deviceTopicInfo.value, flightController)
+ manualControl = useManualControl(mqttState, deviceTopicInfo.value, flightController, paramsRef)
}
}
)
@@ -321,6 +341,7 @@
EventBus.on('controlPanel-onMouseDown', onMouseDown)
EventBus.on('controlPanel-timeStart', timeStart)
EventBus.on('controlPanel-timeStop', timeStop)
+ EventBus.on('controlPanel-getPayloadControl', getPayloadControl)
})
onBeforeUnmount(() => {
@@ -330,6 +351,7 @@
EventBus.off('controlPanel-onMouseDown', onMouseDown)
EventBus.off('controlPanel-timeStart', timeStart)
EventBus.off('controlPanel-timeStop', timeStop)
+ EventBus.off('controlPanel-getPayloadControl', getPayloadControl)
destroyConnect()
})
</script>
@@ -358,7 +380,7 @@
position: absolute;
bottom: 0;
right: 0;
- width: 1540px;
+ width: 1400px;
height: 217px;
background: linear-gradient(196deg, rgba(23, 23, 23, 0.11) 0%, rgba(6, 6, 6, 0.11) 100%);
backdrop-filter: blur(5px);
@@ -371,7 +393,7 @@
pointer-events: all;
.direction {
- width: 476px;
+ width: 400px;
height: 188px;
background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
border-radius: 40px 40px 40px 40px;
@@ -386,7 +408,7 @@
.btnGroupT,
.btnGroupB {
- width: 238px;
+ width: 180px;
height: 73px;
}
}
@@ -423,7 +445,7 @@
}
.ptzControlBox {
- width: 406px;
+ width: 386px;
height: 188px;
background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
border-radius: 40px 40px 40px 40px;
@@ -536,7 +558,7 @@
display: flex;
flex-direction: column;
gap: 7px 0;
- width: 70px;
+ width: 60px;
.infoName {
height: 25px;
@@ -574,8 +596,7 @@
display: flex;
align-items: center;
text-align: center;
- justify-content: center;
- gap: 0 45px;
+ justify-content: space-evenly;
.btnItem {
.btnIcon {
--
Gitblit v1.9.3