From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示
---
src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue | 234 +++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 166 insertions(+), 68 deletions(-)
diff --git a/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue b/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
index f4ba147..cf4331e 100644
--- a/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
+++ b/src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue
@@ -34,7 +34,7 @@
</div>
<div class="speed">
- <el-icon class="btnIcon" @click="speed = speed + 1">
+ <el-icon class="btnIcon" @click="speed = speed === 15 ? 15 : speed + 1">
<Plus />
</el-icon>
<div>
@@ -42,7 +42,7 @@
<br />
m/s
</div>
- <el-icon class="btnIcon" @click="speed = speed - 1">
+ <el-icon class="btnIcon" @click="speed = speed === 0 ? 0 : speed - 1">
<Minus />
</el-icon>
</div>
@@ -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,9 +66,9 @@
</div>
</div>
</div>
-
+ <!-- 指南针-->
<div class="compass">
- <ControlComPass />
+ <ControlComPass :options="compassOptions" />
</div>
<div class="ptzControlBox">
@@ -83,11 +83,17 @@
</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 ptzBtns"
+ :style="item.style"
+ class="ptzControlItem"
+ @mousedown="onMouseDown(item.key)"
+ @mouseup="onMouseUp"
+ ></div>
<div
class="ptzControlItemIcon"
- v-for="(item, index) in list5"
+ v-for="(item, index) in ptzBtns"
:style="{ transform: `rotate(${index * 90}deg)` }"
>
<el-icon>
@@ -110,19 +116,19 @@
</div>
<div class="divider"></div>
- <div v-for="arr in list4" class="info">
+ <div v-for="arr in baseInfoList" class="info">
<div v-for="item in arr" class="infoItem">
<div class="infoName">{{ item.name }}</div>
- <div class="infoValue">{{ item.value }}</div>
+ <div class="infoValue">{{ item.value + (item.unit || '') }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
-import ControlComPass from '../ControlComPass/ControlComPass.vue'
+import ControlComPass from '@/components/CurrentTaskDetails/ControlPanel/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,33 +139,50 @@
ArrowUp,
Bottom,
CaretRight,
- CaretTop,
Minus,
Plus,
RefreshLeft,
RefreshRight,
} from '@element-plus/icons-vue'
-
-import controlCenterImg from '@/assets/images/taskManagement/taskIntermediateContent/controlCenter.png'
+import _ from 'lodash'
import BaseControl from '@/components/CurrentTaskDetails/ControlPanel/BaseControl.vue'
import EventBus from '@/event-bus'
-import dayjs from 'dayjs'
+import { getPayloadControlApi } from '@/api/payload'
+import { directionMap } from '@/const/drc'
-const deviceOsdInfo = inject('deviceOsdInfo')
+const wsInfo = inject('wsInfo')
+const device_osd_host = computed(() => wsInfo?.value?.device_osd?.data?.host || {})
+const dock_osd_host = computed(() => wsInfo?.value?.dock_osd?.data?.host || {})
const taskDetails = inject('taskDetails')
const dockSn = inject('dockSn')
const droneSn = inject('droneSn')
+const trueAltitude = inject('trueAltitude')
+const client_id = inject('client_id')
+const isBackDock = inject('isBackDock')
+const deviceTopicInfo = ref({
+ pubTopic: '',
+ subTopic: '',
+})
+const flightController = ref(false)
+// 控制对象
+let manualControl = {}
+const isAutoControl = inject('isAutoControl')
-const store = useStore()
+const compassOptions = computed(() => {
+ return {
+ pitchAngle: pitchAngle.value.angle,
+ trueAltitude: trueAltitude.value,
+ yawAngle: yawAngle.value.angle,
+ }
+})
+
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 workspace_id = inject('workspace_id')
const list1 = [
{ key: KeyCode.KEY_Q, text: 'Q', icon: RefreshLeft },
{ key: KeyCode.KEY_W, text: 'W', icon: ArrowUp },
@@ -172,38 +195,101 @@
]
const speed = ref(5)
-provide('speed',speed)
+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%' } },
+const ptzBtns = [
+ { 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 = [
+const baseInfoList = ref([
[
- { name: '焦距倍数', value: '0' },
- { name: '俯仰角度', value: '0.0°' },
- { name: '横向角度', value: '0.0°' },
+ { name: '焦距倍数', value: 0 },
+ { name: '俯仰角度', value: 0, unit: '°' },
+ { name: '横向角度', value: 0, unit: '°' },
],
[
- { name: '储存', value: '64.5G' },
- { name: '方向', value: '正北' },
- { name: '方向', value: '正北' },
+ { name: '储存', value: 0, unit: 'G' },
+ { name: '方向', value: 0 },
+ { name: '方向', value: 0 },
],
-]
+])
-
-
-const deviceTopicInfo = ref({
- pubTopic: '',
- subTopic: '',
+const pitchAngle = computed(() => {
+ const { payloads } = device_osd_host?.value || {}
+ const gimbal_pitch = payloads?.[0]?.gimbal_pitch || 0
+ let direction = ''
+ if (gimbal_pitch > -2 && gimbal_pitch < 2) {
+ direction = '正前'
+ } else if (gimbal_pitch >= 2 && gimbal_pitch < 90) {
+ direction = '斜上'
+ } else if (gimbal_pitch === 90) {
+ direction = '正上'
+ } else if (gimbal_pitch <= -2 && gimbal_pitch > -90) {
+ direction = '斜下'
+ } else if (gimbal_pitch === -90 || gimbal_pitch < -90) {
+ direction = '正下'
+ }
+ return {
+ angle: _.round(gimbal_pitch || 0, 1),
+ direction,
+ }
})
-const flightController = ref(false)
-// 控制对象
-let manualControl = {}
-const isAutoControl = inject('isAutoControl')
+const yawAngle = computed(() => {
+ let { payloads, attitude_head } = device_osd_host?.value || {}
+ const gimbal_yaw = payloads?.[0]?.gimbal_yaw || 0
+ attitude_head = attitude_head || 0
+ let yaw = ''
+ if (gimbal_yaw > 180) {
+ yaw = gimbal_yaw
+ } else {
+ yaw = gimbal_yaw - attitude_head
+ }
+ let result = 0
+ if (yaw < 0) {
+ result = yaw + 360
+ }
+ if (yaw > 0) {
+ result = yaw
+ }
+ if ((yaw > -2 && yaw < 2) || parseInt(attitude_head) === parseInt(gimbal_yaw)) {
+ result = attitude_head < 0 ? 180 + (180 + attitude_head) : attitude_head
+ }
+ const roundResult = Math.round(result)
+ let direction = ''
+ for (const item of directionMap) {
+ if (roundResult >= item.min && roundResult <= item.max) {
+ direction = item.value
+ break
+ }
+ }
+ return {
+ angle: _.round(result, 1),
+ direction,
+ }
+})
+
+const baseInfoChange = () => {
+ const newUsedStorage = dock_osd_host.value?.storage?.used
+ const zoom_factor = device_osd_host.value?.cameras?.[0]?.zoom_factor || 0
+ const usedStorageGB = _.round(newUsedStorage / 1024 / 1024, 2)
+ baseInfoList.value[0][0].value = _.round(zoom_factor, 0)
+ baseInfoList.value[0][1].value = pitchAngle.value.angle
+ baseInfoList.value[0][2].value = yawAngle.value.angle
+ if (newUsedStorage !== undefined) baseInfoList.value[1][0].value = usedStorageGB
+ baseInfoList.value[1][1].value = pitchAngle.value.direction
+ baseInfoList.value[1][2].value = yawAngle.value.direction
+}
+
+watch(
+ wsInfo,
+ () => {
+ baseInfoChange()
+ },
+ { immediate: true, deep: true }
+)
const timeStart = () => {
stop() // 避免重复启动
@@ -239,12 +325,20 @@
function cancelControl() {
exitController({ client_id: client_id.value, dock_sn: dockSn.value })
.then(res => {
- flightController.value = false
deviceTopicInfo.value.subTopic = ''
deviceTopicInfo.value.pubTopic = ''
+ flightController.value = false
+ isAutoControl.value = true
ElMessage.success('退出飞行控制成功')
})
.catch(e => {})
+}
+
+// 获得有效载荷控制
+function getPayloadControl() {
+ getPayloadControlApi({ sn: dockSn.value }).then(res => {
+ ElMessage.success('成功获得有效载荷控制')
+ })
}
// 手动控制
@@ -261,22 +355,27 @@
deviceTopicInfo.value.pubTopic = data.pub[0]
}
ElMessage.success('控制成功')
+ getPayloadControl()
isAutoControl.value = false
})
}
+
+
// 返航
-function onBackDock() {
- returnHome(dockSn?.value).then(res => {
- ElMessage.success('返航操作成功')
- })
+async function onBackDock() {
+ await returnHome(dockSn?.value)
+ ElMessage.success('返航操作成功')
+ isBackDock.value = true
+ isAutoControl.value = true
}
// 取消返航
-function cancelBackDock() {
- returnHomeCancel(dockSn?.value).then(res => {
- ElMessage.success('取消返航成功')
- })
+async function cancelBackDock() {
+ await returnHomeCancel({ dock_sn: dockSn?.value, client_id: client_id.value })
+ ElMessage.success('取消返航成功')
+ isBackDock.value = false
+ isAutoControl.value = false
}
// 创建mqtt连接
@@ -301,26 +400,22 @@
// 返航或取消返航
const returnOrCancelReturn = () => {
- if (deviceOsdInfo.value?.data?.host?.mode_code === 9) {
- cancelBackDock()
- } else {
- onBackDock()
- }
+ isBackDock.value ? cancelBackDock() : onBackDock()
}
// useManualControl里面用的参数
-const paramsRef = computed(()=>({
- droneSn:droneSn.value,
- speed:speed.value,
+const paramsRef = computed(() => ({
+ droneSn: droneSn.value,
+ dockSn: dockSn.value,
+ speed: speed.value,
}))
-watch(
- () => workspace_id.value,
+watch(workspace_id,
async () => {
- if (workspace_id.value) {
+ if (workspace_id.value && mqttState === null && client_id.value === '') {
await createConnect()
// 使用控制
- manualControl = useManualControl(mqttState, deviceTopicInfo.value, flightController,paramsRef)
+ manualControl = useManualControl(mqttState, deviceTopicInfo.value, flightController, paramsRef)
}
}
)
@@ -332,6 +427,7 @@
EventBus.on('controlPanel-onMouseDown', onMouseDown)
EventBus.on('controlPanel-timeStart', timeStart)
EventBus.on('controlPanel-timeStop', timeStop)
+ EventBus.on('controlPanel-getPayloadControl', getPayloadControl)
})
onBeforeUnmount(() => {
@@ -341,6 +437,7 @@
EventBus.off('controlPanel-onMouseDown', onMouseDown)
EventBus.off('controlPanel-timeStart', timeStart)
EventBus.off('controlPanel-timeStop', timeStop)
+ EventBus.off('controlPanel-getPayloadControl', getPayloadControl)
destroyConnect()
})
</script>
@@ -371,7 +468,7 @@
right: 0;
width: 1400px;
height: 217px;
- background: linear-gradient(196deg, rgba(23, 23, 23, 0.11) 0%, rgba(6, 6, 6, 0.11) 100%);
+ background: rgba(31, 31, 31, 0.15);
backdrop-filter: blur(5px);
border-radius: 40px 0px 40px 40px;
display: flex;
@@ -425,10 +522,11 @@
box-shadow: 2px 4px 6px 0px rgba(0, 13, 26, 0.42);
border-radius: 8px 8px 8px 8px;
text-align: center;
- padding: 5px 0;
+ padding: 10px 0;
.btnIcon {
font-size: 20px;
+ cursor: pointer;
}
}
}
@@ -537,7 +635,7 @@
.divider {
position: absolute;
- transform: translateX(90px);
+ transform: translateX(95px);
width: 0;
height: 137px;
border: 1px solid rgba(255, 255, 255, 0.07);
--
Gitblit v1.9.3