feat: 对接一些基本信息

罗广辉

2025-04-18 3d7cad9835678e41a450ed2074b4019cb27aadfb

feat: 对接一些基本信息

 src/components/CurrentTaskDetails/CurrentTaskDetails.vue

@@ -56,8 +56,8 @@
provide('taskDetailsViewer', taskDetailsViewer)

let taskDetails = ref({})
const deviceOsdInfo = ref({})
provide('taskDetails', taskDetails)
const deviceOsdInfo = ref({})
provide('deviceOsdInfo', deviceOsdInfo)

const dockSn = computed(() => taskDetails?.value?.device_sns?.[0])
@@ -115,22 +115,41 @@
    })
}

const dockOsdInfo = ref({})
provide('dockOsdInfo', dockOsdInfo)

const wsInfo = ref({})
provide('wsInfo', wsInfo)
// websocket 的消息回调
const messageHandler = result => {
    let payload = JSON.parse(result)
    wsInfo.value[payload.biz_code] = payload
    switch (payload.biz_code) {
        // 无人机
        case EBizCode.DeviceOsd: {
            deviceOsdInfo.value = payload
            setCurrentLiveUrl()
            console.log(payload, 'DeviceOsd--信息')
            break
        }
        // 遥控器
        case EBizCode.GatewayOsd: {
            console.log(payload, 'GatewayOsd--信息')
            break
        }
        // 机巢
        case EBizCode.DockOsd: {
            console.log(payload, 'GatewayOsd--信息')
            console.log(payload, 'DockOsd--信息')
            break
        }
        // PsdkWidgetValues
        case EBizCode.PsdkWidgetValues: {
            console.log(payload, 'PsdkWidgetValues--信息')
            break
        }
        // VideoSurveillance
        case EBizCode.VideoSurveillance: {
            console.log(payload, 'VideoSurveillance--信息')
            break
        }
        default:

 src/components/CurrentTaskDetails/TaskDetailsHead.vue

@@ -1,6 +1,6 @@
<template>
    <div class="detailsHead">
        <div class="droneName">小蓝工业园</div>
        <div class="droneName" :title="taskDetails.name">{{taskDetails.name}}</div>
        <div class="infoListBox">
            <div v-for="item in infoList">
                <div class="infoValue">{{ item.value }}</div>
@@ -8,7 +8,7 @@
            </div>
        </div>
        <div class="controlBtn">
            <el-icon class="refresh">
            <el-icon class="refresh" @click="ElMessage.warning('加急开发中...')">
                <Refresh />
            </el-icon>
            <div class="switchBtn" @click="switchBtn">
@@ -22,37 +22,38 @@
<script setup>
import { Refresh } from '@element-plus/icons-vue'
import { getFlightStatistics } from '@/api/home/machineNest'
import { throttle } from 'lodash'
import { getLnglatAltitude } from '@/utils/cesium/mapUtil'
import _ from 'lodash'
import _, { throttle } from 'lodash'
import { getLnglatAltitude, getLnglatDist } from '@/utils/cesium/mapUtil'
import { networkQuality } from '@/const/drc'
import { ElMessage } from 'element-plus'

const taskDetailsViewer = inject('taskDetailsViewer')
const deviceOsdInfo = inject('deviceOsdInfo')
const wsInfo = inject('wsInfo')
const dockSn = inject('dockSn')
const taskDetails = inject('taskDetails')
const open = ref(true)
const singleTotal = ref({})
const host = computed(() => deviceOsdInfo?.value?.data?.host || {})

const infoList = computed(() => {
    const { longitude, latitude, height, payloads } = host?.value || {}
    return [
        { title: '实时真高', value: '0' },
        { title: '绝对高度', value: _.round(height || 0, 1) + 'm' },
        { title: '水平速度', value: '0' },
        { title: '垂直速度', value: '0' },
        { title: '经度', value: _.round(longitude || 0, 2) },
        { title: '纬度', value: _.round(latitude || 0, 2) },
        { title: '4G信号', value: '0' },
        { title: 'SDR信号', value: '0' },
        { title: 'GPS搜星数', value: '0' },
        { title: 'RTK搜星数', value: '0' },
        { title: '距离机场', value: '0' },
        { title: '飞行时长', value: (singleTotal.value?.hour_count || 0) + '小时' },
        { title: '电池电量', value: (host?.value?.battery?.capacity_percent || 0) + '%' },
    ]
})
// 不要随意更换顺序，有联动
const infoList = ref([
    { title: '实时真高', value: 0 },
    { title: '绝对高度', value: 0 },
    { title: '水平速度', value: 0 },
    { title: '垂直速度', value: 0 },
    { title: '经度', value: 0 },
    { title: '纬度', value: 0 },
    { title: '风速', value: 0 },
    { title: '4G信号', value: 0 },
    { title: 'SDR信号', value: 0 },
    { title: 'GPS搜星数', value: 0 },
    { title: 'RTK搜星数', value: 0 },
    { title: '距离机场', value: 0 },
    { title: '飞行时长', value: 0 },
    { title: '电池电量', value: 0 },
])

const switchBtn = () => {
    ElMessage.warning('加急开发中...')
    open.value = !open.value
}

@@ -65,21 +66,53 @@

function getRealTimeReallyHigh() {
    if (!taskDetailsViewer?.value) return
    const { latitude, longitude, height } = host?.value || {}
    const device_osd_host = wsInfo?.value?.device_osd?.data?.host || {}
    const { latitude, longitude, height } = device_osd_host
    if (!latitude) return
    getLnglatAltitude(longitude, latitude, taskDetailsViewer.value).then(res => {
        const findIndex = infoList.value.findIndex(item => item.title === '实时真高')
        infoList.value[findIndex].value = _.round(height - res?.height, 1) + 'm'
        const last =  height - res?.height
        infoList.value[0].value = last ? infoList.value[0].value : _.round(height - res?.height, 1) + 'm'
    })
}

const getRealTimeReallyHighThrottle = throttle(getRealTimeReallyHigh, 500, { leading: true, trailing: true })
function getHeadInfo() {
    const device_osd_host = wsInfo?.value?.device_osd?.data?.host || {}
    const dock_osd_host = wsInfo?.value?.dock_osd?.data?.host || {}
    const { longitude, latitude, height, horizontal_speed, vertical_speed, wind_speed, battery } = device_osd_host
    const { longitude: dockLon, latitude: dockLat } = dock_osd_host
    let dist = infoList.value[11].value
    if (longitude && latitude && dockLon && dockLat) {
        dist = _.round(getLnglatDist(longitude, latitude, dockLon, dockLat), 0) + 'M'
    }
    const GPSNum = dock_osd_host?.position_state?.gps_number || infoList.value[9].value
    const RTKNum = dock_osd_host?.position_state?.rtk_number || infoList.value[10].value
    infoList.value = [
        { title: '实时真高', value: '0' },
        { title: '绝对高度', value: _.round(height || 0, 1) + 'M' },
        { title: '水平速度', value: _.round(horizontal_speed || 0, 0) + 'M/s' },
        { title: '垂直速度', value: _.round(vertical_speed || 0, 0) + 'M/s' },
        { title: '经度', value: _.round(longitude || 0, 2) },
        { title: '纬度', value: _.round(latitude || 0, 2) },
        { title: '风速', value: _.round(wind_speed || 0, 0) + 'M/s' },
        { title: '4G信号', value: networkQuality?.[dock_osd_host?.quality] || '-' },
        { title: 'SDR信号', value: '0' },
        { title: 'GPS搜星数', value: GPSNum },
        { title: 'RTK搜星数', value: RTKNum },
        { title: '距离机场', value: dist },
        { title: '飞行时长', value: _.round((singleTotal.value?.hour_count || 0),1) + '小时' },
        { title: '电池电量', value: (battery?.capacity_percent || 0) + '%' },
    ]
    getRealTimeReallyHigh()
}

const getHeadInfoThrottle = throttle(getHeadInfo, 1000, { leading: true, trailing: true })

watch(
    deviceOsdInfo,
    wsInfo,
    () => {
        getRealTimeReallyHighThrottle()
        getHeadInfoThrottle()
    },
    { immediate: true }
    { immediate: true, deep: true }
)

watch(
@@ -117,6 +150,10 @@
        color: #ededed;
        text-align: center;
        line-height: 42px;
        white-space:nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 10px;
    }

    .infoListBox {
@@ -124,21 +161,25 @@
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-around;
        justify-content: space-evenly;
        font-family: Segoe UI, Segoe UI;
        font-weight: 400;
        margin-left: 15px;

        .infoValue {
            font-size: 20px;
            color: #ffffff;
            line-height: 15px;
            margin-bottom: 10px;
        }
        >div{
            width: 90px;
            .infoValue {
                font-size: 20px;
                color: #ffffff;
                line-height: 15px;
                margin-bottom: 10px;
            }

        .infoTitle {
            font-size: 12px;
            color: #d2e8fa;
            line-height: 15px;
            .infoTitle {
                font-size: 12px;
                color: #d2e8fa;
                line-height: 15px;
            }
        }
    }


 src/const/drc.js

@@ -7,3 +7,5 @@
    HSI_INFO_PUSH: 'hsi_info_push', // 避障信息上报
    DELAY_TIME_INFO_PUSH: 'delay_info_push', // 图传链路延时信息上报
}

export const networkQuality = { 0: '无信号', 1: '差', 2: '较差', 3: '一般', 4: '较好', 5: '好' }