From c3d5259af7dfe695175b6c1e3e95291b5ba77cb9 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 18 Apr 2025 14:54:32 +0800
Subject: [PATCH] feat: 下拉选择框样式修改
---
src/components/CurrentTaskDetails/TaskDetailsHead.vue | 151 ++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 121 insertions(+), 30 deletions(-)
diff --git a/src/components/CurrentTaskDetails/TaskDetailsHead.vue b/src/components/CurrentTaskDetails/TaskDetailsHead.vue
index 91ed227..a27d1c1 100644
--- a/src/components/CurrentTaskDetails/TaskDetailsHead.vue
+++ b/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;
--
Gitblit v1.9.3