|
|
@@ -26,15 +26,20 @@
|
|
|
手动飞行
|
|
|
</div>
|
|
|
<div class="content-osd-head-right-top-status">
|
|
|
- {{ getTextByModeCode(deviceInfo.device.mode_code) }}
|
|
|
+ <div v-if="deviceInfo.device">
|
|
|
+ {{ getTextByModeCode(deviceInfo.device.mode_code) }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ N/A
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content-osd-head-right-bottom">
|
|
|
<div class="content-osd-head-right-bottom-button">
|
|
|
- <span class="openLiveButton" @click="state.deviceLiveStatus = true" v-if="!state.deviceLiveStatus">
|
|
|
+ <span class="openLiveButton" @click="state.deviceLiveVisible = true" v-if="!state.deviceLiveVisible">
|
|
|
开启直播
|
|
|
</span>
|
|
|
- <span class="openLiveButton" @click="state.deviceLiveStatus = false" v-else>
|
|
|
+ <span class="openLiveButton" @click="state.deviceLiveVisible = false" v-else>
|
|
|
关闭直播
|
|
|
</span>
|
|
|
</div>
|
|
|
@@ -43,7 +48,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content-osd-head-right-select">
|
|
|
- <div v-if="state.deviceLiveStatus">
|
|
|
+ <div v-if="state.deviceLiveVisible">
|
|
|
<a-select style="width: 125px;margin-right: 5px;" placeholder="摄像头" v-model:value="state.cameraValue">
|
|
|
<a-select-option v-for="item in state.cameraList" :key="item.value" :value="item.value"
|
|
|
@click="onCameraSelect(item)">
|
|
|
@@ -56,17 +61,21 @@
|
|
|
{{ item.label }}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
- <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onStart" />
|
|
|
- <a-button :icon="h(PoweroffOutlined)" @click="onStop" />
|
|
|
+ <a-tooltip title="播放">
|
|
|
+ <a-button style="margin-right: 5px;" :icon="h(PlaySquareOutlined)" @click="onStart" />
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip title="停止">
|
|
|
+ <a-button :icon="h(PoweroffOutlined)" @click="onStop" />
|
|
|
+ </a-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="battery-slide">
|
|
|
<div style="background: #535759;" class="width-100"></div>
|
|
|
- <div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%' }"></div>
|
|
|
+ <div class="capacity-percent" :style="{ width: capacity + '%' }"></div>
|
|
|
</div>
|
|
|
- <LivePlayer :text="state.playerText" :url="state.playerUrl" v-if="state.deviceLiveStatus" />
|
|
|
+ <LivePlayer :text="state.playerText" :url="state.playerUrl" v-if="state.deviceLiveVisible" />
|
|
|
<div class="content-osd-info">
|
|
|
<a-row style="margin-bottom: 5px;">
|
|
|
<a-col span="6">
|
|
|
@@ -237,7 +246,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
|
|
|
// 遥控器信号
|
|
|
const controllerSignal = computed(() => {
|
|
|
- const info = props.deviceInfo.gateway;
|
|
|
+ const info = props.deviceInfo?.gateway;
|
|
|
if (info && info.wireless_link) {
|
|
|
return info.wireless_link['4g_gnd_quality'];
|
|
|
} else {
|
|
|
@@ -247,7 +256,7 @@ const controllerSignal = computed(() => {
|
|
|
|
|
|
// 飞机信号
|
|
|
const aircraftSignal = computed(() => {
|
|
|
- const info = props.deviceInfo.gateway;
|
|
|
+ const info = props.deviceInfo?.gateway;
|
|
|
if (info && info.wireless_link) {
|
|
|
return info.wireless_link['4g_uav_quality'];
|
|
|
} else {
|
|
|
@@ -256,18 +265,26 @@ const aircraftSignal = computed(() => {
|
|
|
});
|
|
|
|
|
|
const RTK = computed(() => {
|
|
|
- const info = props.deviceInfo.device;
|
|
|
- return info.position_state.rtk_number;
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ return info.position_state.rtk_number;
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
const GPS = computed(() => {
|
|
|
- const info = props.deviceInfo.device;
|
|
|
- return info.position_state.gps_number;
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ return info.position_state.gps_number;
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
// 电池容量
|
|
|
const capacity = computed(() => {
|
|
|
- const info = props.deviceInfo.device;
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
if (info) {
|
|
|
return info.battery.capacity_percent;
|
|
|
} else {
|
|
|
@@ -276,47 +293,67 @@ const capacity = computed(() => {
|
|
|
});
|
|
|
|
|
|
const windSpeed = computed(() => {
|
|
|
- const info = props.deviceInfo.device;
|
|
|
- if (info.wind_speed === '--') {
|
|
|
- return info.wind_speed;
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.wind_speed === '--') {
|
|
|
+ return info.wind_speed;
|
|
|
+ } else {
|
|
|
+ return (info.wind_speed / 10).toFixed(2) + ' m/s';
|
|
|
+ }
|
|
|
} else {
|
|
|
- return (info.wind_speed / 10).toFixed(2) + ' m/s';
|
|
|
+ return '--';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const ASL = computed(() => {
|
|
|
- const info = props.deviceInfo.device;
|
|
|
- if (info.height === '--') {
|
|
|
- return info.height;
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.height === '--') {
|
|
|
+ return info.height;
|
|
|
+ } else {
|
|
|
+ return info.height.toFixed(2) + ' m';
|
|
|
+ }
|
|
|
} else {
|
|
|
- return info.height.toFixed(2) + ' m';
|
|
|
+ return '--';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const AGL = computed(() => {
|
|
|
- const info = props.deviceInfo.device;
|
|
|
- if (info.elevation === '--') {
|
|
|
- return info.elevation;
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.elevation === '--') {
|
|
|
+ return info.elevation;
|
|
|
+ } else {
|
|
|
+ return info.elevation.toFixed(2) + ' m';
|
|
|
+ }
|
|
|
} else {
|
|
|
- return info.elevation.toFixed(2) + ' m';
|
|
|
+ return '--';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const HS = computed(() => {
|
|
|
- const info = props.deviceInfo.device;
|
|
|
- if (info.horizontal_speed === '--') {
|
|
|
- return info.horizontal_speed;
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.horizontal_speed === '--') {
|
|
|
+ return info.horizontal_speed;
|
|
|
+ } else {
|
|
|
+ return info.horizontal_speed.toFixed(2) + ' m/s';
|
|
|
+ }
|
|
|
} else {
|
|
|
- return info.horizontal_speed.toFixed(2) + ' m/s';
|
|
|
+ return '--';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const homeDistance = computed(() => {
|
|
|
- const info = props.deviceInfo.device;
|
|
|
- if (info.home_distance === '--') {
|
|
|
- return info.home_distance;
|
|
|
+ const info = props.deviceInfo?.device;
|
|
|
+ if (info) {
|
|
|
+ if (info.home_distance === '--') {
|
|
|
+ return info.home_distance;
|
|
|
+ } else {
|
|
|
+ return info.home_distance.toFixed(2) + ' m';
|
|
|
+ }
|
|
|
} else {
|
|
|
- return info.home_distance.toFixed(2) + ' m';
|
|
|
+ return '--';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
@@ -350,7 +387,7 @@ const clarityList: SelectOption[] = [
|
|
|
]
|
|
|
|
|
|
interface State {
|
|
|
- deviceLiveStatus: boolean,
|
|
|
+ deviceLiveVisible: boolean,
|
|
|
cameraList: SelectOption[],
|
|
|
cameraValue?: string,
|
|
|
videoList: SelectOption[],
|
|
|
@@ -362,7 +399,7 @@ interface State {
|
|
|
}
|
|
|
|
|
|
const state: State = reactive({
|
|
|
- deviceLiveStatus: false,// 设备直播状态
|
|
|
+ deviceLiveVisible: false,
|
|
|
cameraList: [],
|
|
|
cameraValue: undefined,
|
|
|
videoList: [],
|
|
|
@@ -509,6 +546,7 @@ const onStop = async () => {
|
|
|
text-align: center;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
+ margin-bottom: 5px
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -532,6 +570,8 @@ const onStop = async () => {
|
|
|
flex: 1;
|
|
|
padding-left: 5px;
|
|
|
background: #4a4d4e;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -578,6 +618,38 @@ const onStop = async () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.battery-slide {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .capacity-percent {
|
|
|
+ background: #00ee8b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .return-home {
|
|
|
+ background: #ff9f0a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .landing {
|
|
|
+ background: #f5222d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .battery {
|
|
|
+ background: white;
|
|
|
+ border-radius: 1px;
|
|
|
+ width: 8px;
|
|
|
+ height: 4px;
|
|
|
+ margin-top: -3px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.battery-slide>div {
|
|
|
+ position: relative;
|
|
|
+ margin-top: -2px;
|
|
|
+ min-height: 2px;
|
|
|
+ border-radius: 2px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
S0025136190
