|
|
@@ -11,7 +11,7 @@
|
|
|
<div class="content-osd">
|
|
|
<div class="content-osd-head">
|
|
|
<div class="content-osd-head-icon">
|
|
|
- <a-image style="width: 80%;" :src="M30" :preview="false" />
|
|
|
+ <a-image style="width: 80%;" :src="M30Src" :preview="false" />
|
|
|
<div class="content-osd-head-icon-text">
|
|
|
{{ osdInfo.model }}
|
|
|
</div>
|
|
|
@@ -64,73 +64,115 @@
|
|
|
</div>
|
|
|
<LivePlayer :text="state.playerText" :url="state.playerUrl" v-if="state.deviceLiveStatus" />
|
|
|
<div class="content-osd-info">
|
|
|
- <a-row>
|
|
|
+ <a-row style="margin-bottom: 5px;">
|
|
|
<a-col span="6">
|
|
|
- <a-tooltip title="GPS卫星数">
|
|
|
- <span>
|
|
|
- GPS
|
|
|
- <WifiOutlined />
|
|
|
- </span>
|
|
|
- <span class="ml10">{{ deviceInfo.device.position_state.gps_number }}</span>
|
|
|
- </a-tooltip>
|
|
|
+ <div class="content-osd-info-item">
|
|
|
+ <a-tooltip title="遥控器信号">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <img style="margin-right: 5px;" :src="controllerSrc">
|
|
|
+ <div>
|
|
|
+ <img :src="signalThreeSrc" v-if="controllerSignal <= 3">
|
|
|
+ <img :src="signalFourSrc" v-else-if="controllerSignal === 4">
|
|
|
+ <img :src="signalFiveSrc" v-else-if="controllerSignal === 5">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip title="飞行器信号">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <img style="margin-right: 5px;" :src="networkSrc">
|
|
|
+ <div>
|
|
|
+ <img :src="signalThreeSrc" v-if="aircraftSignal <= 3">
|
|
|
+ <img :src="signalFourSrc" v-else-if="aircraftSignal === 4">
|
|
|
+ <img :src="signalFiveSrc" v-else-if="aircraftSignal === 5">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
</a-col>
|
|
|
<a-col span="6">
|
|
|
<a-tooltip title="RTK">
|
|
|
- <span>
|
|
|
- RTK
|
|
|
- </span>
|
|
|
- <span class="ml10">{{ deviceInfo.device.position_state.rtk_number }}</span>
|
|
|
+ <div class="content-osd-info-item">
|
|
|
+ <div style="margin-right: 5px;">
|
|
|
+ RTK
|
|
|
+ </div>
|
|
|
+ <img style="margin-right: 5px;" :src="gpsSrc">
|
|
|
+ <div>
|
|
|
+ {{ RTK }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-tooltip>
|
|
|
</a-col>
|
|
|
<a-col span="6">
|
|
|
<a-tooltip title="电量">
|
|
|
- <span>电量</span>
|
|
|
- <span class="ml10">
|
|
|
- {{ deviceInfo.device.battery.capacity_percent + '%' }}
|
|
|
- </span>
|
|
|
+ <div class="content-osd-info-item">
|
|
|
+ <div style="margin-right: 5px;">
|
|
|
+ <img :src="batteryOneSrc" v-if="capacity >= 75 && capacity < 100">
|
|
|
+ <img :src="batteryTwoSrc" v-else-if="capacity >= 50 && capacity < 75">
|
|
|
+ <img :src="batteryThreeSrc" v-else-if="capacity >= 25 && capacity < 50">
|
|
|
+ <img :src="batteryFourSrc" v-else-if="capacity < 25">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ capacity + '%' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-tooltip>
|
|
|
</a-col>
|
|
|
<a-col span="6">
|
|
|
<a-tooltip title="风向速度">
|
|
|
- <span>W.S</span>
|
|
|
- <span class="ml10">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed /
|
|
|
- 10).toFixed(2) + ' m/s' }}</span>
|
|
|
+ <div class="content-osd-info-item">
|
|
|
+ <img style="margin-right: 5px;" :src="windSrc">
|
|
|
+ <div>
|
|
|
+ {{ windSpeed }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-tooltip>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row>
|
|
|
<a-col span="6">
|
|
|
<a-tooltip title="海拔高度">
|
|
|
- <span>ASL</span>
|
|
|
- <span class="ml10">
|
|
|
- {{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + ' m' }}
|
|
|
- </span>
|
|
|
+ <div class="content-osd-info-item">
|
|
|
+ <div style="margin-right: 5px;">
|
|
|
+ ASL
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ ASL }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-tooltip>
|
|
|
</a-col>
|
|
|
<a-col span="6">
|
|
|
<a-tooltip title="离地高度">
|
|
|
- <span>ALT</span>
|
|
|
- <span class="ml10">
|
|
|
- {{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + ' m' }}
|
|
|
- </span>
|
|
|
+ <div class="content-osd-info-item">
|
|
|
+ <div style="margin-right: 5px;">
|
|
|
+ AGL
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ AGL }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-tooltip>
|
|
|
</a-col>
|
|
|
<a-col span="6">
|
|
|
<a-tooltip title="水平速度">
|
|
|
- <span>H.S</span>
|
|
|
- <span class="ml10">
|
|
|
- {{ deviceInfo.device.horizontal_speed === str ? str :
|
|
|
- deviceInfo.device.horizontal_speed.toFixed(2) + ' m/s' }}
|
|
|
- </span>
|
|
|
+ <div class="content-osd-info-item">
|
|
|
+ <div style="margin-right: 5px;">
|
|
|
+ H.S
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ HS }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-tooltip>
|
|
|
</a-col>
|
|
|
<a-col span="6">
|
|
|
<a-tooltip title="当前高度">
|
|
|
- <span>H</span>
|
|
|
- <span class="ml10">
|
|
|
- {{ deviceInfo.device.home_distance === str ? str : deviceInfo.device.home_distance.toFixed(2) + ' m'
|
|
|
- }}
|
|
|
- </span>
|
|
|
+ <div class="content-osd-info-item">
|
|
|
+ <img style="margin-right: 5px;" :src="homeSrc">
|
|
|
+ <div>
|
|
|
+ {{ homeDistance }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-tooltip>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
@@ -140,11 +182,23 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { h, reactive, onMounted } from 'vue';
|
|
|
+import { h, computed, reactive, onMounted } from 'vue';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
import { CloseOutlined, PlaySquareOutlined, PoweroffOutlined } from '@ant-design/icons-vue'
|
|
|
import LivePlayer from '/@/components/livePlayer/index.vue';
|
|
|
-import M30 from '/@/assets/icons/m30.png'
|
|
|
+import M30Src from '/@/assets/icons/m30.png';
|
|
|
+import controllerSrc from '../icons/info/controller.svg';
|
|
|
+import networkSrc from '../icons/info/network.svg';
|
|
|
+import signalThreeSrc from '../icons/info/signalThree.svg';
|
|
|
+import signalFourSrc from '../icons/info/signalFour.svg';
|
|
|
+import signalFiveSrc from '../icons/info/signalFive.svg';
|
|
|
+import gpsSrc from '../icons/info/gps.svg';
|
|
|
+import batteryOneSrc from '../icons/batteryOne.svg';
|
|
|
+import batteryTwoSrc from '../icons/batteryTwo.svg';
|
|
|
+import batteryThreeSrc from '../icons/batteryThree.svg';
|
|
|
+import batteryFourSrc from '../icons/batteryFour.svg';
|
|
|
+import windSrc from '../icons/info/wind.svg';
|
|
|
+import homeSrc from '../icons/info/home.svg';
|
|
|
import { CURRENT_CONFIG as config } from '/@/api/http/config';
|
|
|
import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage';
|
|
|
import { getTextByModeCode } from '/@/utils/index'
|
|
|
@@ -159,7 +213,85 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
|
|
|
});
|
|
|
|
|
|
-const str: string = '--';
|
|
|
+// 遥控器信号
|
|
|
+const controllerSignal = computed(() => {
|
|
|
+ const info = props.deviceInfo.gateway;
|
|
|
+ if (info && info.wireless_link) {
|
|
|
+ return info.wireless_link['4g_gnd_quality'];
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 飞机信号
|
|
|
+const aircraftSignal = computed(() => {
|
|
|
+ const info = props.deviceInfo.gateway;
|
|
|
+ if (info && info.wireless_link) {
|
|
|
+ return info.wireless_link['4g_uav_quality'];
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const RTK = computed(() => {
|
|
|
+ const info = props.deviceInfo.device;
|
|
|
+ return info.position_state.rtk_number;
|
|
|
+});
|
|
|
+
|
|
|
+// 电池容量
|
|
|
+const capacity = computed(() => {
|
|
|
+ const info = props.deviceInfo.device;
|
|
|
+ if (info) {
|
|
|
+ return info.battery.capacity_percent;
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const windSpeed = computed(() => {
|
|
|
+ const info = props.deviceInfo.device;
|
|
|
+ if (info.wind_speed === '--') {
|
|
|
+ return info.wind_speed;
|
|
|
+ } else {
|
|
|
+ return (info.wind_speed / 10).toFixed(2) + ' m/s';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const ASL = computed(() => {
|
|
|
+ const info = props.deviceInfo.device;
|
|
|
+ if (info.height === '--') {
|
|
|
+ return info.height;
|
|
|
+ } else {
|
|
|
+ return info.height.toFixed(2) + ' m';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const AGL = computed(() => {
|
|
|
+ const info = props.deviceInfo.device;
|
|
|
+ if (info.elevation === '--') {
|
|
|
+ return info.elevation;
|
|
|
+ } else {
|
|
|
+ return info.elevation.toFixed(2) + ' m';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const HS = computed(() => {
|
|
|
+ const info = props.deviceInfo.device;
|
|
|
+ if (info.horizontal_speed === '--') {
|
|
|
+ return info.horizontal_speed;
|
|
|
+ } else {
|
|
|
+ return info.horizontal_speed.toFixed(2) + ' m/s';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const homeDistance = computed(() => {
|
|
|
+ const info = props.deviceInfo.device;
|
|
|
+ if (info.home_distance === '--') {
|
|
|
+ return info.home_distance;
|
|
|
+ } else {
|
|
|
+ return info.home_distance.toFixed(2) + ' m';
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
interface SelectOption {
|
|
|
value: any,
|
|
|
@@ -402,6 +534,16 @@ const onStop = async () => {
|
|
|
|
|
|
&-info {
|
|
|
padding: 5px;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
李富豪
