|
@@ -1,30 +1,30 @@
|
|
|
<template>
|
|
|
<Transition name="fade">
|
|
|
- <div class="f-panel-left panel-uav" :class="{ collapse: layoutStore.leftCollapse, spread: hasAlert }">
|
|
|
+ <div class="panel-uav" :class="{ collapse: layoutStore.leftCollapse, spread: hasAlert }">
|
|
|
<i @click="handleClose" class="absolute right-4 top-4 text-white size-6 cursor-pointer hover:scale-110">
|
|
|
<img src="@/assets/images/svg/close.svg" alt="" />
|
|
|
</i>
|
|
|
|
|
|
- <h2 class="u-title">{{ data.name }}</h2>
|
|
|
+ <h2 class="u-title">{{ base.name }}</h2>
|
|
|
|
|
|
<ul class="des-list mt-3">
|
|
|
<li>
|
|
|
- <span>序列号:</span><span class="value">{{ data.seriesCode }}</span>
|
|
|
+ <span>序列号:</span><span class="value">{{ base.seriesCode }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>实名登记号:</span><span class="value">{{ data.regCode }}</span>
|
|
|
+ <span>实名登记号:</span><span class="value">{{ base.regCode }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>厂商:</span><span class="value">{{ data.manufacturer }}</span>
|
|
|
+ <span>厂商:</span><span class="value">{{ base.manufacturer }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>大小:</span><span class="value">{{ data.size }}</span>
|
|
|
+ <span>大小:</span><span class="value">{{ base.size }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>类型:</span><span class="value">{{ data.type }}</span>
|
|
|
+ <span>类型:</span><span class="value">{{ base.type }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>型号:</span><span class="value">{{ data.model }}</span>
|
|
|
+ <span>型号:</span><span class="value">{{ base.model }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
@@ -32,45 +32,45 @@
|
|
|
<ul class="des-list">
|
|
|
<li>
|
|
|
<div class="flex-1 flex">
|
|
|
- <span>航空器状态:</span><span class="value">{{ data.status }}</span>
|
|
|
+ <span>航空器状态:</span><span class="value">{{ base.status }}</span>
|
|
|
</div>
|
|
|
<div class="flex-1 flex">
|
|
|
- <span>电量:</span><span class="value">{{ data.battery }}</span>
|
|
|
+ <span>电量:</span><span class="value">{{ base.battery }}</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="flex-1 flex">
|
|
|
- <span>高度:</span><span class="value">{{ data.height }}</span>
|
|
|
+ <span>高度:</span><span class="value">{{ base.height }}</span>
|
|
|
</div>
|
|
|
<div class="flex-1 flex">
|
|
|
- <span>速度:</span><span class="value">{{ data.velocity }}</span>
|
|
|
+ <span>速度:</span><span class="value">{{ base.velocity }}</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>任务性质:</span><span class="value">{{ data.taskType }}</span>
|
|
|
+ <span>任务性质:</span><span class="value">{{ base.taskType }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>更新时间:</span><span class="value">{{ data.updateTime }}</span>
|
|
|
+ <span>更新时间:</span><span class="value">{{ base.updateTime }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<div class="title-sub my-2">运营人信息</div>
|
|
|
<ul class="des-list">
|
|
|
<li>
|
|
|
- <span>飞行单位:</span><span class="value">{{ data.unit }}</span>
|
|
|
+ <span>飞行单位:</span><span class="value">{{ base.unit }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>飞行计划负责人:</span><span class="value">{{ data.manager }}</span>
|
|
|
+ <span>飞行计划负责人:</span><span class="value">{{ base.manager }}</span>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <span>负责人电话:</span><span class="value">{{ data.tel }}</span>
|
|
|
+ <span>负责人电话:</span><span class="value">{{ base.tel }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
<ul class="alerts flex justify-center mt-5 mb-1">
|
|
|
<template v-for="item in alertTypes">
|
|
|
<li
|
|
|
- v-if="Object.keys(data.alertInfo).includes(item.id)"
|
|
|
+ v-if="Object.keys(alert).includes(item.id)"
|
|
|
:class="{ active: currentActive === item.id }"
|
|
|
@click="handlePickAlert(item)">
|
|
|
<img
|
|
@@ -83,12 +83,10 @@
|
|
|
</ul>
|
|
|
<div class="alert-detail flex-1 flex flex-col justify-center items-center">
|
|
|
<div v-if="currentActive === 'collision'">
|
|
|
- <span class="text-lg" v-if="data.alertInfo.collision.distance === 0">
|
|
|
- 警告:无人机发生碰撞,预警提示请关注
|
|
|
- </span>
|
|
|
+ <span class="text-lg" v-if="alert.collision.distance === 0"> 警告:无人机发生碰撞,预警提示请关注 </span>
|
|
|
<p v-else class="text-lg whitespace-pre-wrap">
|
|
|
半径
|
|
|
- <span class="text-red-500 text-2xl">{{ data.alertInfo.collision.distance }}m</span>
|
|
|
+ <span class="text-red-500 text-2xl">{{ alert.collision.distance }}m</span>
|
|
|
有无人机飞行,<br />请注意安全飞行!
|
|
|
</p>
|
|
|
</div>
|
|
@@ -96,37 +94,33 @@
|
|
|
<div v-if="currentActive === 'offCourse'">
|
|
|
<div class="flex justify-center items-end text-lg">
|
|
|
<span class="text-xl">偏离距离</span>
|
|
|
- <span class="key-num">{{ data.alertInfo.offCourse.distance }}</span>
|
|
|
+ <span class="key-num">{{ alert.offCourse.distance }}</span>
|
|
|
<span class="text-xs mb-1">米</span>
|
|
|
</div>
|
|
|
- <span class="block text-red-500 text-lg my-3 text-center"
|
|
|
- >飞行航线偏移{{ data.alertInfo.offCourse.lineCode }}</span
|
|
|
- >
|
|
|
+ <span class="block text-red-500 text-lg my-3 text-center">飞行航线偏移{{ alert.offCourse.lineCode }}</span>
|
|
|
<p class="text-sm text-gray-200">无人机正在偏离计划航线飞行,预警提示请关注。</p>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="currentActive === 'area'">
|
|
|
- <span class="block text-red-500 text-lg mb-5">{{
|
|
|
- data.alertInfo.area.type + ': ' + data.alertInfo.area.name
|
|
|
- }}</span>
|
|
|
- <p class="text-sm text-gray-200">无人机闯入{{ data.alertInfo.area.type }} ,预警提示请关注。</p>
|
|
|
+ <span class="block text-red-500 text-lg mb-5">{{ alert.area.type + ': ' + alert.area.name }}</span>
|
|
|
+ <p class="text-sm text-gray-200">无人机闯入{{ alert.area.type }} ,预警提示请关注。</p>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="currentActive === 'weather'" class="ad-weather flex items-center">
|
|
|
- <img v-if="data.alertInfo.weather.type === '雨'" src="@/assets/images/weather/alert-rain.png" alt="" />
|
|
|
- <img v-if="data.alertInfo.weather.type === '大风'" src="@/assets/images/weather/alert-wind.png" alt="" />
|
|
|
- <img v-if="data.alertInfo.weather.type === '雾霾'" src="@/assets/images/weather/alert-haze.png" alt="" />
|
|
|
- <p class="whitespace-pre-wrap">{{ genWeatherDes(data.alertInfo.weather.type) }}</p>
|
|
|
+ <img v-if="alert.weather.type === '大雨'" src="@/assets/images/weather/alert-rain.png" alt="" />
|
|
|
+ <img v-if="alert.weather.type === '大风'" src="@/assets/images/weather/alert-wind.png" alt="" />
|
|
|
+ <img v-if="alert.weather.type === '雾霾'" src="@/assets/images/weather/alert-haze.png" alt="" />
|
|
|
+ <p class="whitespace-pre-wrap">{{ genWeatherDes(alert.weather.type) }}</p>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="currentActive === 'power'">
|
|
|
<span>低电量警告</span>
|
|
|
<div class="flex mt-2 items-center">
|
|
|
<ul class="battery flex-1">
|
|
|
- <li v-for="item in Math.floor((data.alertInfo.power.battery * 15) / 100)"></li>
|
|
|
+ <li v-for="item in Math.floor((alert.power.battery * 15) / 100)"></li>
|
|
|
</ul>
|
|
|
<div class="num-zh">
|
|
|
- {{ data.alertInfo.power.battery }}
|
|
|
+ {{ alert.power.battery }}
|
|
|
<span class="text-sm">%</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -135,7 +129,7 @@
|
|
|
<img src="@/assets/images/page/icon-flag.png" alt="" />
|
|
|
<div>
|
|
|
<div>
|
|
|
- {{ data.alertInfo.power.distance }}
|
|
|
+ {{ alert.power.distance }}
|
|
|
<span class="text-sm">m</span>
|
|
|
</div>
|
|
|
<span>距离目的地</span>
|
|
@@ -146,7 +140,7 @@
|
|
|
<div>
|
|
|
<div>
|
|
|
约
|
|
|
- {{ data.alertInfo.power.estimation }}
|
|
|
+ {{ alert.power.estimation }}
|
|
|
<span class="text-sm">m</span>
|
|
|
</div>
|
|
|
<span>剩余电量飞行距离</span>
|
|
@@ -167,7 +161,7 @@ import { ref, watch } from 'vue'
|
|
|
const layoutStore = useLayoutStore()
|
|
|
|
|
|
const props = defineProps({
|
|
|
- data: {
|
|
|
+ base: {
|
|
|
type: Object,
|
|
|
default: {
|
|
|
name: '美团001',
|
|
@@ -188,29 +182,31 @@ const props = defineProps({
|
|
|
unit: '深圳市大疆创新科技有限公司',
|
|
|
manager: '深圳市大疆创新科技有限公司',
|
|
|
tel: '18000000000',
|
|
|
-
|
|
|
- alertInfo: {
|
|
|
- collision: {
|
|
|
- distance: 20,
|
|
|
- },
|
|
|
- offCourse: {
|
|
|
- distance: 20,
|
|
|
- lineCode: 'MG22100WRJ',
|
|
|
- },
|
|
|
- power: {
|
|
|
- battery: 27,
|
|
|
- distance: 310,
|
|
|
- estimation: 720,
|
|
|
- },
|
|
|
- area: {
|
|
|
- type: '禁飞区',
|
|
|
- name: '禁飞区11',
|
|
|
- },
|
|
|
- weather: {
|
|
|
- // type: '大风',
|
|
|
- // type: '雨',
|
|
|
- type: '雾霾',
|
|
|
- },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ alert: {
|
|
|
+ type: Object,
|
|
|
+ default: {
|
|
|
+ collision: {
|
|
|
+ distance: 20,
|
|
|
+ },
|
|
|
+ offCourse: {
|
|
|
+ distance: 20,
|
|
|
+ lineCode: 'MG22100WRJ',
|
|
|
+ },
|
|
|
+ power: {
|
|
|
+ battery: 27,
|
|
|
+ distance: 310,
|
|
|
+ estimation: 720,
|
|
|
+ },
|
|
|
+ area: {
|
|
|
+ type: '禁飞区',
|
|
|
+ name: '禁飞区11',
|
|
|
+ },
|
|
|
+ weather: {
|
|
|
+ // type: '大风',
|
|
|
+ // type: '大雨',
|
|
|
+ type: '雾霾',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
@@ -237,19 +233,21 @@ function genWeatherDes(type) {
|
|
|
case '大风':
|
|
|
case '雾霾':
|
|
|
return `当前${type}天气,\n 预警提示请关注!`
|
|
|
- case '雨':
|
|
|
+ case '大雨':
|
|
|
return '当前天气有雨,\n 预警提示请关注!'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+const emit = defineEmits(['close'])
|
|
|
+
|
|
|
function handleClose() {
|
|
|
- layoutStore.toggleFloatPanel('uav', false)
|
|
|
+ emit('close')
|
|
|
}
|
|
|
|
|
|
watch(
|
|
|
- () => props.data,
|
|
|
- () => {
|
|
|
- const alertKeys = Object.keys(props.data.alertInfo)
|
|
|
+ () => props.alert,
|
|
|
+ (val) => {
|
|
|
+ const alertKeys = Object.keys(val)
|
|
|
hasAlert.value = alertKeys.length > 0
|
|
|
currentActive.value = alertTypes.value.find((i) => alertKeys.includes(i.id)).id
|
|
|
},
|