feat: 下拉选择框样式修改

张含笑

2025-04-18 c3d5259af7dfe695175b6c1e3e95291b5ba77cb9

 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,9 @@
         </div>
      </div>
      <div class="controlBtn">
         <el-icon class="refresh"><Refresh /></el-icon>
         <el-icon class="refresh" @click="ElMessage.warning('加急开发中...')">
            <Refresh />
         </el-icon>
         <div class="switchBtn" @click="switchBtn">
            <div :class="{ open: open }">NO</div>
            <div :class="{ open: !open }">OFF</div>
@@ -19,26 +21,107 @@

<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 { networkQuality } from '@/const/drc'
import { ElMessage } from 'element-plus'

const taskDetailsViewer = inject('taskDetailsViewer')
const wsInfo = inject('wsInfo')
const dockSn = inject('dockSn')
const taskDetails = inject('taskDetails')
const open = ref(true)
const singleTotal = ref({})

// 不要随意更换顺序，有联动
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
}
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 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 ? infoList.value[0].value : _.round(height - res?.height, 1) + 'm'
   })
}

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(
   wsInfo,
   () => {
      getHeadInfoThrottle()
   },
   { immediate: true, deep: true }
)

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

<style scoped lang="scss">
@@ -48,7 +131,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;
@@ -67,6 +150,10 @@
      color: #ededed;
      text-align: center;
      line-height: 42px;
      white-space:nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 10px;
   }

   .infoListBox {
@@ -74,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;
         }
      }
   }

@@ -98,7 +189,7 @@
      align-items: center;
      justify-content: space-between;

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