feat: 地图放大缩小逻辑

罗广辉

2025-04-17 d17c4a4cc64dcf38c8373170761ee0da39a71a4a

feat: 地图放大缩小逻辑

 src/assets/images/taskManagement/taskIntermediateContent/amplifyImg.png

 src/components/CurrentTaskDetails/ControlPanel/ControlPanel.vue

@@ -308,6 +308,7 @@
    }
}

// useManualControl里面用的参数
const paramsRef = computed(()=>({
    droneSn:droneSn.value,
    speed:speed.value,
@@ -368,7 +369,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);
@@ -381,7 +382,7 @@
    pointer-events: all;

    .direction {
        width: 476px;
        width: 400px;
        height: 188px;
        background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
        border-radius: 40px 40px 40px 40px;
@@ -396,7 +397,7 @@

            .btnGroupT,
            .btnGroupB {
                width: 238px;
                width: 180px;
                height: 73px;
            }
        }
@@ -433,7 +434,7 @@
    }

    .ptzControlBox {
        width: 406px;
        width: 386px;
        height: 188px;
        background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
        border-radius: 40px 40px 40px 40px;
@@ -546,7 +547,7 @@
            display: flex;
            flex-direction: column;
            gap: 7px 0;
            width: 70px;
            width: 60px;

            .infoName {
                height: 25px;
@@ -584,8 +585,7 @@
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        gap: 0 45px;
        justify-content: space-evenly;

        .btnItem {
            .btnIcon {

 src/components/CurrentTaskDetails/CurrentTaskDetails.vue

@@ -10,20 +10,20 @@
    >
        <div class="content-container" v-if="isShow">
            <!-- 视频直播 -->
            <div class="video-container">
            <div :class="`${isMaxMap ? 'minBox' : 'maxBox'}`">
                <LiveVideo :videoUrl="currentLiveUrl" :controls="false" />
            </div>
            <!-- 展示地图 -->
            <RealTimeMap class="realTimeMap" />
            <RealTimeMap :class="`${isMaxMap ? 'maxBox' : 'minBox'}`" />
            <TaskDetailsRight v-if="isAutoControl" />
            <template v-else>
                <TaskDetailsHead />
                <TaskDetailsLeft />
            </template>


            <!--    控制面板，里面有方法需要立即执行，不可用v-if        -->
            <ControlPanel v-show="!isAutoControl" />
            <img alt="" :src="amplifyImg" class="amplify" @click="amplify" />
        </div>
    </el-dialog>
</template>
@@ -42,6 +42,7 @@
import TaskDetailsHead from '@/components/CurrentTaskDetails/TaskDetailsHead.vue'
import TaskDetailsLeft from '@/components/CurrentTaskDetails/TaskDetailsLeft.vue'
import TaskDetailsRight from '@/components/CurrentTaskDetails/TaskDetailsRight.vue'
import amplifyImg from '@/assets/images/taskManagement/taskIntermediateContent/amplifyImg.png'
import { ElMessage } from 'element-plus'
import EventBus from '@/event-bus'

@@ -53,8 +54,6 @@
const isShow = defineModel('show')
const props = defineProps(['id'])
const currentLiveUrl = ref('')
const machineNestUrl = ref('')
const droneLiveUrl = ref('')
let taskDetails = ref({})
const deviceOsdInfo = ref({})
provide('taskDetails', taskDetails)
@@ -62,45 +61,37 @@

const dockSn = computed(() => taskDetails?.value?.device_sns?.[0])
const droneSn = computed(() => deviceOsdInfo?.value?.data?.sn)

provide('dockSn', dockSn)
provide('droneSn', droneSn)

const isMaxMap = ref(false)
const amplify = () => {
    isMaxMap.value = !isMaxMap.value
}

// 机巢直播
const getDeviceLiveUrl = async () => {
    if (machineNestUrl.value) return machineNestUrl.value
    const res = await liveStart(taskDetails.value.device_sns[0], 2)
    machineNestUrl.value = res.data.data.rtcs_url
    return machineNestUrl.value
}

// 无人机直播
const getDroneLiveUrl = async droneSn => {
    if (droneLiveUrl.value) return droneLiveUrl.value
    const res = await liveStart(droneSn, lineQuality.value)
    droneLiveUrl.value = res.data.data.rtcs_url
    return droneLiveUrl.value
    const res = await liveStart(dockSn.value, 2)
    currentLiveUrl.value = res.data.data.rtcs_url
}

// 无人机直播画质切换
const changeLineQuality = async () => {
    if (droneLiveUrl.value) return droneLiveUrl.value
    const res = await liveStart(droneSn, lineQuality.value)
    droneLiveUrl.value = res.data.data.rtcs_url
    return droneLiveUrl.value
    const res = await liveStart(droneSn.value, lineQuality.value)
    currentLiveUrl.value = res.data.data.rtcs_url
}

const isTakeOff = ref(false)

// 设置当前直播地址
const setCurrentLiveUrl = async () => {
    const data = deviceOsdInfo.value?.data
    const deviceInfo = data?.host
    const drone = data?.sn
    if ([14, 0].includes(deviceInfo.mode_code)) {
        currentLiveUrl.value = await getDeviceLiveUrl()
    } else {
        currentLiveUrl.value = await getDroneLiveUrl(drone)
    }
    const currentIsTakeOff = ![14, 0].includes(deviceInfo.mode_code)
    // 如果还是之前的状态，不切换
    if (isTakeOff.value === currentIsTakeOff) return
    isTakeOff.value = currentIsTakeOff
    isTakeOff.value ? await changeLineQuality() : await getDeviceLiveUrl()
}

// 获取任务详情获取航线文件
@@ -108,20 +99,20 @@
    if (!props.id) ElMessage.warning('请检查是否传入id')
    getJobDetails({ wayLineJobInfoId: props.id }).then(async res => {
        taskDetails.value = res.data.data
        currentLiveUrl.value = await getDeviceLiveUrl()
        await getDeviceLiveUrl()
        taskDetails.value.workspace_id = taskDetails.value.way_lines[0]?.workspace_id
        createWsConnect()
    })
}

// websocket 的消息
// websocket 的消息回调
const messageHandler = result => {
    let payload = JSON.parse(result) // 为了兼容聊天消息
    let payload = JSON.parse(result)
    switch (payload.biz_code) {
        case EBizCode.DeviceOsd: {
            deviceOsdInfo.value = payload
            console.log(deviceOsdInfo.value,'device_osd信息')
            setCurrentLiveUrl()
            console.log(deviceOsdInfo.value, 'device_osd信息')
            break
        }
        default:
@@ -129,23 +120,15 @@
    }
}

let droneWebSocket
// 创建ws连接
let connectWs
const createWsConnect = () => {
    const workspaceId = taskDetails.value.workspace_id
    if (!workspaceId) return
    let webSocketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId
    // 监听ws 消息
    connectWs = useConnectWebSocket(messageHandler, webSocketUrl)
    droneWebSocket = useConnectWebSocket(messageHandler, webSocketUrl)
}

watch(
    () => taskDetails.value.workspace_id,
    () => {
        createWsConnect()
    }
)


onMounted(() => {
    getTaskDetails()
@@ -153,9 +136,9 @@
})

onBeforeUnmount(() => {
    connectWs?.close()
    droneWebSocket?.close()
    deviceOsdInfo.value = {}
    connectWs = null
    droneWebSocket = null
    EventBus.off('CurrentTaskDetails-timeStop', changeLineQuality)
})
</script>
@@ -204,20 +187,27 @@
    border-radius: 4rem;
    overflow: hidden;

    .video-container {
    .maxBox {
        width: 100%;
        height: 100%;
    }

    .realTimeMap {
    .minBox {
        position: absolute;
        left: -1px;
        bottom: -1px;
        width: 218px;
        height: 217px;
        width: 376px;
        height: 212px;
        left: 0;
        bottom: 0;
        border-radius: 0px 20px 0px 40px;
        border: 1px solid #62a1ff;
        overflow: hidden;
    }

    .amplify {
        cursor: pointer;
        position: absolute;
        left: 340px;
        bottom: 183px;
    }
}
</style>

 src/websocket/index.js

@@ -40,15 +40,15 @@
    }

    _onOpen() {
        console.log('连接成功')
        console.log('ws连接成功')
    }

    _onClose() {
        console.log('连接已断开')
        console.log('ws连接已断开')
    }

    _onError() {
        console.log('连接 error')
        console.log('ws连接 error')
    }

    registerMessageHandler(messageHandler) {
@@ -67,8 +67,8 @@
    }

    close() {
        console.log('socket关闭')
        this._socket?.close()
        this._messageHandler = null
        this._socket = null
    }
}