feat: 优化返航按钮

罗广辉

2025-04-19 243e0266d7bd1dad2224fefd9a1d3ef8ced6345e

 src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue

@@ -84,7 +84,7 @@
         <div class="ptzControlBtnBox">
            <div class="ptzControlBtn b-r">
               <div
                  v-for="(item, index) in list5"
                  v-for="(item, index) in ptzBtns"
                  :style="item.style"
                  class="ptzControlItem"
                  @mousedown="onMouseDown(item.key)"
@@ -93,7 +93,7 @@

               <div
                  class="ptzControlItemIcon"
                  v-for="(item, index) in list5"
                  v-for="(item, index) in ptzBtns"
                  :style="{ transform: `rotate(${index * 90}deg)` }"
               >
                  <el-icon>
@@ -116,7 +116,7 @@
         </div>

         <div class="divider"></div>
         <div v-for="arr in baseInfo" 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 + (item.unit || '') }}</div>
@@ -156,8 +156,17 @@
const taskDetails = inject('taskDetails')
const dockSn = inject('dockSn')
const droneSn = inject('droneSn')

const trueAltitude = inject('trueAltitude')
const client_id = inject('client_id')

const deviceTopicInfo = ref({
   pubTopic: '',
   subTopic: '',
})
const flightController = ref(false)
// 控制对象
let manualControl = {}
const isAutoControl = inject('isAutoControl')

const compassOptions = computed(() => {
   return {
@@ -168,7 +177,6 @@
})

let mqttState = null
const client_id = ref('')
const valueTime = ref('00:00:00')
let timer = null
let totalSeconds = 0
@@ -188,31 +196,25 @@
const speed = ref(5)
provide('speed', speed)

const list5 = [
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 baseInfo = computed(() => {
   const usedStorage = dock_osd_host.value?.storage?.used || baseInfo.value?.[1]?.[1]?.value || 0
   const zoom_factor = device_osd_host.value?.cameras?.[0]?.zoom_factor || 0
   const usedStorageGB = _.round(usedStorage / 1024 / 1024, 2)

   return [
const baseInfoList = ref([
      [
         { name: '焦距倍数', value: zoom_factor },
         { name: '俯仰角度', value: pitchAngle.value.angle, unit: '°' },
         { name: '横向角度', value: yawAngle.value.angle, unit: '°' },
      { name: '焦距倍数', value: 0 },
      { name: '俯仰角度', value: 0, unit: '°' },
      { name: '横向角度', value: 0, unit: '°' },
      ],
      [
         { name: '储存', value: usedStorageGB, unit: 'G' },
         { name: '方向', value: pitchAngle.value.direction },
         { name: '方向', value: yawAngle.value.direction },
      { name: '储存', value: 0, unit: 'G' },
      { name: '方向', value: 0 },
      { name: '方向', value: 0 },
      ],
   ]
})
])

const pitchAngle = computed(() => {
   const { payloads } = device_osd_host?.value || {}
@@ -234,7 +236,6 @@
      direction,
   }
})

const yawAngle = computed(() => {
   let { payloads, attitude_head } = device_osd_host?.value || {}
   const gimbal_yaw = payloads?.[0]?.gimbal_yaw || 0
@@ -255,12 +256,12 @@
   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 = '';
   const roundResult = Math.round(result)
   let direction = ''
   for (const item of directionMap) {
      if (roundResult >= item.min && roundResult <= item.max) {
         direction = item.value;
         break;
         direction = item.value
         break
      }
   }
   return {
@@ -269,14 +270,25 @@
   }
})

const deviceTopicInfo = ref({
   pubTopic: '',
   subTopic: '',
})
const flightController = ref(false)
// 控制对象
let manualControl = {}
const isAutoControl = inject('isAutoControl')
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() // 避免重复启动
@@ -346,18 +358,20 @@
   })
}

const isBackDock = ref(false)

// 返航
function onBackDock() {
   returnHome(dockSn?.value).then(res => {
async function onBackDock() {
   await returnHome(dockSn?.value)
      ElMessage.success('返航操作成功')
   })
   isBackDock.value = true
}

// 取消返航
function cancelBackDock() {
   returnHomeCancel(dockSn?.value).then(res => {
async function cancelBackDock() {
   await returnHomeCancel({ dock_sn: dockSn?.value, client_id: client_id.value })
      ElMessage.success('取消返航成功')
   })
   isBackDock.value = false
}

// 创建mqtt连接
@@ -382,11 +396,7 @@

// 返航或取消返航
const returnOrCancelReturn = () => {
   if (device_osd_host?.value?.mode_code === 9) {
      cancelBackDock()
   } else {
      onBackDock()
   }
   isBackDock.value ? cancelBackDock() : onBackDock()
}

// useManualControl里面用的参数