feat: 抽出ws消息

罗广辉

2025-04-19 bd152b06ef36dce4e31d621cbd28fd1c17a34dba

feat: 抽出ws消息

 src/components/CurrentTaskDetails/CurrentTaskDetails.vue

@@ -36,9 +36,6 @@
import { getJobDetails } from '@/api/home/task'

import RealTimeMap from '@/components/CurrentTaskDetails/RealTimeMap.vue'
import { getWebsocketUrl } from '@/websocket/util/config'
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
import { EBizCode } from '@/utils/staticData/enums'
import ControlPanel from '@/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue'
import TaskDetailsHead from '@/components/CurrentTaskDetails/TaskDetailsHead.vue'
import TaskDetailsLeft from '@/components/CurrentTaskDetails/TaskDetailsLeft.vue'
@@ -49,7 +46,7 @@
import { updateDroneQualityApi } from '@/api/drc'
import { getLiveAiLinkApi } from '@/api/payload'
import { CURRENT_CONFIG } from '@/utils/http/config'
import { useDroneWS } from '@/components/CurrentTaskDetails/useDroneWS'
import { useDroneWS } from '@/hooks/useDroneWS'

const isAutoControl = ref(true) //是否自动控制
const lineQuality = ref(1) //1流畅，2标清
@@ -61,12 +58,21 @@
const trueAltitude = ref('') // 真实高度
const isAiLive = ref(false) // 是ai直播
const video_id = ref('') // 直播视频id
const workspace_id = ref('')

const isShow = defineModel('show') // 是否显示当前任务详情
const props = defineProps(['id'])
const currentLiveUrl = ref('') // 当前直播地址
const isTakeOff = ref(false) // 是在飞行中
const isMaxMap = ref(false) //是大地图

const workspace_id = ref('')
let wsInfo = useDroneWS(workspace_id) //ws信息，是一个ref对象
watch(wsInfo, () => {
    // wsInfo 变化触发
    setCurrentLiveUrl()
}, { deep: true })
provide('wsInfo', wsInfo)


provide('isAutoControl', isAutoControl)
provide('lineQuality', lineQuality)
@@ -80,11 +86,7 @@
provide('isAiLive', isAiLive)
provide('video_id', video_id)

let wsInfo = useDroneWS(workspace_id)
watch(wsInfo, () => {
    setCurrentLiveUrl()
}, { deep: true })
provide('wsInfo', wsInfo)


// 获取机巢直播
const getDeviceLiveUrl = async () => {
@@ -119,7 +121,8 @@
// 设置当前直播地址
const setCurrentLiveUrl = async () => {
    const deviceInfo = deviceOsdInfo.value?.data?.host
    const currentIsTakeOff = ![14, 0].includes(deviceInfo.mode_code)
  if (!deviceInfo) return
    const currentIsTakeOff = ![14, 0].includes(deviceInfo?.mode_code)
    // 如果还是之前的状态，不切换
    if (isTakeOff.value === currentIsTakeOff) return
    isTakeOff.value = currentIsTakeOff

 src/hooks/useDroneWS.js

File was renamed from src/components/CurrentTaskDetails/useDroneWS.js
@@ -10,6 +10,8 @@
export const useDroneWS = workspaceIdRef => {
    const wsInfo = ref({})
    let droneWebSocket = null

    // ws消息钩子 todo后面加节流参数处理
    const messageHandler = result => {
        let payload = JSON.parse(result)
        if (payload.biz_code) {
@@ -24,20 +26,21 @@
    }

    watch(workspaceIdRef, (newValue, oldValue) => {
        removeEvent()
        removeWS()
        if (workspaceIdRef.value) {
            init()
        }
    })

    function removeEvent() {
    // 移除ws 事件
    function removeWS() {
        droneWebSocket?.close()
        droneWebSocket = null
        wsInfo.value = {}
    }

    onBeforeUnmount(() => {
        removeEvent()
        removeWS()
    })

    return wsInfo