feat: 控制台显示一些信息

罗广辉

2025-04-18 61e6956be147e1e84e7104f16dd47e9f87f20dfd

 src/components/CurrentTaskDetails/TaskDetailsHead.vue

@@ -8,7 +8,9 @@
         </div>
      </div>
      <div class="controlBtn">
         <el-icon class="refresh"><Refresh /></el-icon>
         <el-icon class="refresh">
            <Refresh />
         </el-icon>
         <div class="switchBtn" @click="switchBtn">
            <div :class="{ open: open }">NO</div>
            <div :class="{ open: !open }">OFF</div>
@@ -19,26 +21,74 @@

<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'

const taskDetailsViewer = inject('taskDetailsViewer')
const deviceOsdInfo = inject('deviceOsdInfo')
const dockSn = inject('dockSn')
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 switchBtn = () => {
   open.value = !open.value
}
const infoList = [
   { 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' },
]

function getFlightStatisticsFun() {
   if (!dockSn.value) return
   getFlightStatistics(dockSn.value).then(res => {
      singleTotal.value = res.data.data
   })
}

function getRealTimeReallyHigh() {
   if (!taskDetailsViewer?.value) return
   const { latitude, longitude, height } = host?.value || {}
   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 getRealTimeReallyHighThrottle = throttle(getRealTimeReallyHigh, 500, { leading: true, trailing: true })
watch(
   deviceOsdInfo,
   () => {
      getRealTimeReallyHighThrottle()
   },
   { immediate: true }
)

watch(
   dockSn,
   () => {
      getFlightStatisticsFun()
   },
   { immediate: true }
)
</script>

<style scoped lang="scss">
@@ -48,7 +98,7 @@
   z-index: 5;
   width: 100%;
   height: 68px;
   background: rgb(0,0,0,.4); /* 半透明背景 */
   background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
   backdrop-filter: blur(5px);
   padding: 0 31px;
   display: flex;
@@ -98,7 +148,7 @@
      align-items: center;
      justify-content: space-between;

      .refresh{
      .refresh {
         color: white;
         font-size: 30px;
         cursor: pointer;