<template>
|
<div class="detailsHead">
|
<div class="droneName" :title="taskDetails.device_names">{{ taskDetails.device_names }}</div>
|
<div class="infoListBox">
|
<div v-for="item in infoList">
|
<div class="infoValue" :title="item.value">{{ item.value }}{{ item.unit }}</div>
|
<div class="infoTitle">{{ item.title }}</div>
|
</div>
|
</div>
|
<div class="controlBtn">
|
<el-icon class="refresh" @click="refreshLive">
|
<Refresh />
|
</el-icon>
|
<div class="switchBtn" @click="switchBtn">
|
<div :class="{ open: !isAiLive }">OFF</div>
|
<div :class="{ open: isAiLive }">ON</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { Refresh } from '@element-plus/icons-vue'
|
import { getFlightStatistics } from '@/api/home/machineNest'
|
import _, { throttle } from 'lodash'
|
import { getLnglatAltitude, getLnglatDist } from '@/utils/cesium/mapUtil'
|
import { fourGQuality, SDRQuality } from '@/const/drc'
|
import { ElMessage } from 'element-plus'
|
import EventBus from '@/event-bus'
|
|
const taskDetailsViewer = inject('taskDetailsViewer')
|
const wsInfo = inject('wsInfo')
|
const dockSn = inject('dockSn')
|
const taskDetails = inject('taskDetails')
|
const isAiLive = inject('isAiLive')
|
const singleTotal = ref({})
|
|
// 不要随意更换顺序，有联动
|
const infoList = ref([
|
{ index: 0, title: '实时真高', value: 0, unit: 'M' },
|
{ index: 1, title: '绝对高度', value: 0, unit: 'M' },
|
{ index: 2, title: '水平速度', value: 0, unit: 'M/s' },
|
{ index: 3, title: '垂直速度', value: 0, unit: 'M/s' },
|
{ index: 4, title: '经度', value: 0, unit: '°' },
|
{ index: 5, title: '纬度', value: 0, unit: '°' },
|
{ index: 6, title: '风速', value: 0, unit: 'M/s' },
|
{ index: 7, title: '4G信号', value: '-', unit: '' },
|
{ index: 8, title: 'SDR信号', value: '-', unit: '' },
|
{ index: 9, title: 'GPS搜星数', value: 0, unit: '' },
|
{ index: 10, title: 'RTK搜星数', value: 0, unit: '' },
|
{ index: 11, title: '距离机场', value: 0, unit: 'M' },
|
{ index: 12, title: '飞行时长', value: 0, unit: '小时' },
|
{ index: 13, title: '电池电量', value: 0, unit: '%' },
|
])
|
|
const switchBtn = () => {
|
if (isAiLive.value) {
|
EventBus.emit('CurrentTaskDetails-getDroneLiveUrl')
|
} else {
|
EventBus.emit('CurrentTaskDetails-getAiLiveUrl')
|
}
|
}
|
|
function refreshLive() {
|
EventBus.emit('CurrentTaskDetails-getDroneLiveUrl',true)
|
}
|
|
function getFlightStatisticsFun() {
|
if (!dockSn.value) return
|
getFlightStatistics(dockSn.value).then(res => {
|
singleTotal.value = res.data.data
|
})
|
}
|
|
const trueAltitude = inject('trueAltitude')
|
|
// 获取真实高度
|
function getRealTimeReallyHigh() {
|
if (!taskDetailsViewer?.value) return
|
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 last = height - res?.height
|
infoList.value[0].value = last ? _.round(height - res?.height, 1) : infoList.value[0].value
|
trueAltitude.value = infoList.value[0].value
|
})
|
}
|
|
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, wireless_link } = dock_osd_host
|
let dist = infoList.value[11].value
|
if (longitude && latitude && dockLon && dockLat) {
|
dist = _.round(getLnglatDist(longitude, latitude, dockLon, dockLat), 0)
|
}
|
|
const newGPSNum = dock_osd_host?.position_state?.gps_number
|
const newRTKNum = dock_osd_host?.position_state?.rtk_number
|
const newFourG = wireless_link?.['4g_quality']
|
const newSdr = wireless_link?.['sdr_quality']
|
|
infoList.value[1].value = _.round(height || 0, 1)
|
infoList.value[2].value = _.round(horizontal_speed || 0, 0)
|
infoList.value[3].value = _.round(vertical_speed || 0, 0)
|
infoList.value[4].value = _.round(longitude || 0, 2)
|
infoList.value[5].value = _.round(latitude || 0, 2)
|
infoList.value[6].value = _.round(wind_speed || 0, 0)
|
if (newFourG !== undefined) infoList.value[7].value = fourGQuality[newFourG]
|
if (newSdr !== undefined) infoList.value[8].value = SDRQuality[newSdr]
|
if (newGPSNum !== undefined) infoList.value[9].value = newGPSNum
|
if (newRTKNum !== undefined) infoList.value[10].value = newRTKNum
|
infoList.value[11].value = dist
|
infoList.value[12].value = _.round(singleTotal.value?.hour_count || 0, 1)
|
infoList.value[13].value = battery?.capacity_percent || 0
|
getRealTimeReallyHigh()
|
}
|
|
const getHeadInfoThrottle = throttle(getHeadInfo, 1000, { leading: true, trailing: true })
|
|
watch(
|
wsInfo,
|
() => {
|
getHeadInfoThrottle()
|
},
|
{ immediate: true, deep: true }
|
)
|
|
watch(
|
dockSn,
|
() => {
|
getFlightStatisticsFun()
|
},
|
{ immediate: true }
|
)
|
</script>
|
|
<style scoped lang="scss">
|
.detailsHead {
|
position: absolute;
|
top: 0;
|
z-index: 5;
|
width: 100%;
|
height: 68px;
|
background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
|
backdrop-filter: blur(5px);
|
padding: 0 31px;
|
display: flex;
|
align-items: center;
|
|
.droneName {
|
width: 132px;
|
height: 42px;
|
background: rgba(74, 72, 72, 0.54);
|
box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25);
|
border-radius: 8px 8px 8px 8px;
|
border: 1px solid rgba(255, 255, 255, 0.99);
|
font-family: Segoe UI, Segoe UI;
|
font-weight: normal;
|
font-size: 18px;
|
color: #ededed;
|
text-align: center;
|
line-height: 42px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
padding: 0 10px;
|
}
|
|
.infoListBox {
|
width: 0;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
font-family: Segoe UI, Segoe UI;
|
font-weight: 400;
|
margin-left: 15px;
|
|
> div {
|
width: 90px;
|
|
.infoValue {
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 20px;
|
color: #ffffff;
|
line-height: 18px;
|
margin-bottom: 10px;
|
}
|
|
.infoTitle {
|
font-size: 12px;
|
color: #d2e8fa;
|
line-height: 15px;
|
}
|
}
|
}
|
|
.controlBtn {
|
width: 130px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.refresh {
|
color: white;
|
font-size: 30px;
|
cursor: pointer;
|
}
|
|
.switchBtn {
|
width: 70px;
|
height: 30px;
|
box-shadow: 2px 4px 20px 0px rgba(0, 13, 26, 0.23);
|
border-radius: 4px 4px 4px 4px;
|
border: 1px solid #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-family: Segoe UI, Segoe UI;
|
font-weight: bold;
|
font-size: 14px;
|
line-height: 30px;
|
text-align: center;
|
color: #ffffff;
|
cursor: pointer;
|
|
> div {
|
width: 50%;
|
}
|
|
.open {
|
background: #ffffff;
|
color: #242424;
|
}
|
}
|
}
|
}
|
</style>
|
