feat: 抽出ws消息

罗广辉

2025-04-19 bd152b06ef36dce4e31d621cbd28fd1c17a34dba

 src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue

@@ -68,7 +68,7 @@
      </div>
      <!--     指南针-->
      <div class="compass">
         <ControlComPass />
         <ControlComPass :options="compassOptions" />
      </div>

      <div class="ptzControlBox">
@@ -88,6 +88,7 @@
                  :style="item.style"
                  class="ptzControlItem"
                  @mousedown="onMouseDown(item.key)"
                  @mouseup="onMouseUp"
               ></div>

               <div
@@ -115,17 +116,17 @@
         </div>

         <div class="divider"></div>
         <div v-for="arr in list4" class="info">
         <div v-for="arr in baseInfo" 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, returnHome, returnHomeCancel } from '@/api/drc'
import { ElMessage } from 'element-plus'
@@ -143,17 +144,29 @@
   RefreshLeft,
   RefreshRight,
} from '@element-plus/icons-vue'

import _ from 'lodash'
import BaseControl from '@/components/CurrentTaskDetails/ControlPanel/BaseControl.vue'
import EventBus from '@/event-bus'
import { getPayloadControlApi, ptzControlApi } from '@/api/payload'
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 store = useStore()
const trueAltitude = inject('trueAltitude')

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')
@@ -182,18 +195,78 @@
   { name: '左', key: KeyCode.ARROW_LEFT, operate: 'left', style: { left: '-70%' } },
]

const list4 = [
   [
      { name: '焦距倍数', value: '0' },
      { name: '俯仰角度', value: '0.0°' },
      { name: '横向角度', value: '0.0°' },
   ],
   [
      { name: '储存', value: '64.5G' },
      { name: '方向', value: '正北' },
      { name: '方向', value: '正北' },
   ],
]
const baseInfo = computed(() => {
   const usedStorage = dock_osd_host.value?.storage?.used || 0
   const zoom_factor = device_osd_host.value?.cameras?.[0]?.zoom_factor || 0
   const usedStorageGB = _.round(usedStorage / 1024 / 1024, 2)
   return [
      [
         { name: '焦距倍数', value: zoom_factor },
         { name: '俯仰角度', value: pitchAngle.value.angle, unit: '°' },
         { name: '横向角度', value: yawAngle.value.angle, unit: '°' },
      ],
      [
         { name: '储存', value: usedStorageGB, unit: 'G' },
         { name: '方向', value: pitchAngle.value.direction },
         { name: '方向', value: yawAngle.value.direction },
      ],
   ]
})

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 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 deviceTopicInfo = ref({
   pubTopic: '',
@@ -308,7 +381,7 @@

// 返航或取消返航
const returnOrCancelReturn = () => {
   if (deviceOsdInfo.value?.data?.host?.mode_code === 9) {
   if (device_osd_host?.value?.mode_code === 9) {
      cancelBackDock()
   } else {
      onBackDock()
@@ -325,7 +398,7 @@
watch(
   () => workspace_id.value,
   async () => {
      if (workspace_id.value) {
      if (workspace_id.value && mqttState === null && client_id.value === '') {
         await createConnect()
         // 使用控制
         manualControl = useManualControl(mqttState, deviceTopicInfo.value, flightController, paramsRef)