无人机面板接入；网格点查

src/assets/styles/index.scss

@@ -50,6 +50,18 @@
 	}
 }
 
+// 右侧浮动面板默认样式
+.float-panel-right {
+	position: absolute;
+	top: var(--panel-gap);
+	right: var(--panel-gap);
+	width: 390px;
+	background: rgba(0, 23, 45, 0.8);
+	border-radius: 6px;
+	padding: 20px;
+	transition: all ease 0.3s;
+}
+
 // 面板标题
 .panel-title {
 	position: relative;

src/components/MapView.vue

@@ -51,10 +51,10 @@ export default {
 						console.log('gridCode', arg.data.grid)
 						let gridCode = arg.data.grid
 						mapStore.gridCode = gridCode
-						// layoutStore.toggleFloatPanel('cube', true)
+						layoutStore.toggleRightFloatPanel('cube', true)
 						break
 					case 'SelectedUAVInfo':
-						mapStore.uavId = arg.data.uavId
+						mapStore.uavInfo = arg.data
 						layoutStore.toggleFloatPanel('uav', true)
 						break
 					case 'DrawComplete':

src/service/map.js

@@ -216,3 +216,11 @@ export function getInspectionData(params, shapeType) {
 		}
 	}
 }
+
+// 无人机查询
+export function getUavInfo(data) {
+	return requestNetPost({
+		url: '/flight/data/info',
+		data,
+	})
+}

src/store/layout.js

@@ -14,6 +14,9 @@ const useLayoutStore = defineStore('layout', {
 			hxgh: false,
 			uav: false,
 		},
+		rightFloatPanels: {
+			cube: false,
+		},
 		toolSpread: '', // 工具栏展开的子级
 		uavDemoCurrent: '', // 当前选中的态势类型
 	}),
@@ -42,6 +45,23 @@ const useLayoutStore = defineStore('layout', {
 				})
 			}
 		},
+		toggleRightFloatPanel(target, value) {
+			if (value) {
+				Object.keys(this.rightFloatPanels).forEach((k) => {
+					if (k !== target && this.rightFloatPanels[k]) {
+						this.rightFloatPanels[k] = 0
+					}
+				})
+				this.rightFloatPanels[target] = true
+			} else {
+				this.rightFloatPanels[target] = false
+				Object.keys(this.rightFloatPanels).forEach((k) => {
+					if (this.rightFloatPanels[k] === 0) {
+						this.rightFloatPanels[k] = true
+					}
+				})
+			}
+		},
 		setUavDemoStore(type, stauts) {
 			this.uavDemoCurrent = stauts ? type : ''
 			setUavDemo(type, stauts)

src/store/map.js

@@ -24,6 +24,7 @@ export const useMapStore = defineStore('map', {
 		queryResult: [], //查询结果
 		cubeResult: {}, //网格查询结果
 		clickResult: null, //模型点击查询结果
+		uavInfo: {}, // 无人机点查询信息
 	}),
 	persist: true,
 	actions: {},

src/views/home/Home.vue

@@ -35,6 +35,11 @@
 		<Transition name="emerge-left">
 			<UavInfo v-if="layoutStore.floatPanels.uav" />
 		</Transition>
+
+		<!-- 网格查询 -->
+		<Transition name="emerge-right">
+			<CubeInfo v-if="layoutStore.rightFloatPanels.cube" />
+		</Transition>
 	</div>
 </template>
 
@@ -49,6 +54,7 @@ import AreaPlan from './cpns/AreaPlan.vue'
 import AreaGrid from './cpns/AreaGrid.vue'
 import AirLinePlan from './cpns/AirLinePlan.vue'
 import UavInfo from './cpns/UavInfo.vue'
+import CubeInfo from './cpns/CubeInfo.vue'
 
 const layoutStore = useLayoutStore()
 

src/views/home/cpns/CubeInfo.vue

@@ -0,0 +1,151 @@
+<template>
+	<div class="float-panel-right" :class="{ 'move-tool-spread': layoutStore.toolSpread === 'ky' }">
+		<i @click="handleClose" class="absolute right-4 top-4 size-5 cursor-pointer hover:scale-110">
+			<img src="@/assets/images/svg/close.svg" alt="" />
+		</i>
+		<div class="panel-title text-ellipsis">{{ mapStore.gridCode }}</div>
+
+		<ul class="des-list mt-2">
+			<li>
+				<span>总分</span><span class="value">{{ base.weightValue }}</span>
+			</li>
+			<li>
+				<span>是否包含建筑</span><span class="value">{{ base.hasBuilding }}</span>
+			</li>
+			<li>
+				<span>气象分</span><span class="value">{{ base.weatherValue }}</span>
+			</li>
+		</ul>
+
+		<div class="sub-list mt-2">
+			<ul class="des-list">
+				<li>
+					<span>气温</span><span class="value">{{ base.temperature }}&nbsp;℃</span>
+				</li>
+				<li>
+					<span>风速</span><span class="value">{{ base.windPower }}&nbsp;m/s</span>
+				</li>
+				<li>
+					<span>气压</span><span class="value">{{ base.pressure }}&nbsp;mPa</span>
+				</li>
+				<li>
+					<span>湿度</span><span class="value">{{ base.humidity }}&nbsp;%</span>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { queryGridByCode } from '@/service/map.js'
+import useLayoutStore from '@/store/layout'
+import { useMapStore } from '@/store/map.js'
+import { onMounted, ref, watch } from 'vue'
+
+const mapStore = useMapStore()
+const layoutStore = useLayoutStore()
+
+const base = ref({
+	weatherValue: '0',
+})
+
+function handleClose() {
+	layoutStore.toggleRightFloatPanel('cube', false)
+}
+
+function getGridData() {
+	queryGridByCode({
+		code: mapStore.gridCode,
+	}).then((res) => {
+		if (res.data.code == '200') {
+			const { data } = res.data
+			const { element } = data
+			base.value.weightValue = data.weightValue
+			base.value.hasBuilding = element.collision || element.collisionBuffer ? '是' : '否'
+			base.value.temperature = element.temperature
+			base.value.windPower = element.windPower
+			base.value.pressure = element.pressure
+			base.value.humidity = element.humidity
+			base.value.weatherValue = data.weatherValue
+		} else {
+			console.log('编码信息查询失败')
+		}
+	})
+}
+
+onMounted(() => {
+	getGridData()
+})
+
+watch(
+	() => mapStore.gridCode,
+	(val) => {
+		getGridData()
+	},
+	{
+		deep: true,
+	}
+)
+</script>
+
+<style lang="scss" scoped>
+.float-panel-right {
+	width: 350px;
+}
+
+.panel-title {
+	width: 90%;
+	padding-right: 10px;
+}
+
+.des-list {
+	li {
+		height: 30px;
+		display: flex;
+		padding: 0 10px;
+		font-size: 14px;
+
+		span {
+			line-height: 30px;
+			text-shadow: 0px 4px 4px rgba(21, 41, 91, 0.45);
+		}
+
+		span:first-child {
+			position: relative;
+			width: 90px;
+			margin-right: 20px;
+			display: block;
+			text-align-last: justify;
+			text-align: justify;
+			text-justify: distribute-all-lines;
+			color: #ffffff;
+
+			&::after {
+				content: '：';
+				position: absolute;
+				display: block;
+				right: -15px;
+				top: 0;
+			}
+		}
+
+		.value {
+			flex: 1;
+			width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			color: #65bfff;
+			text-shadow: 0px 4px 4px rgba(21, 41, 91, 0.45);
+		}
+	}
+}
+
+.sub-list {
+	padding: 5px 8px;
+	background-color: rgba(255, 255, 255, 0.1);
+	.des-list li span:first-child {
+		width: fit-content;
+	}
+}
+</style>

src/views/home/cpns/UavInfo.vue

@@ -11,16 +11,16 @@
 		</div>
 		<ul class="des-list">
 			<li>
-				<span>无人机编号</span><span class="value">{{ base.seriesCode }}</span>
+				<span>无人机编号</span><span class="value">{{ base.flightIdentify }}</span>
 			</li>
 			<li>
-				<span>无人机名称</span><span class="value">{{ base.name }}</span>
+				<span>无人机名称</span><span class="value">{{ base.flightName }}</span>
 			</li>
 			<li>
-				<span>所属单位</span><span class="value">{{ base.unit }}</span>
+				<span>所属单位</span><span class="value">{{ base.flightUnit }}</span>
 			</li>
 			<li>
-				<span>型号</span><span class="value">{{ base.model }}</span>
+				<span>型号</span><span class="value">{{ base.flightType }}</span>
 			</li>
 		</ul>
 
@@ -30,23 +30,23 @@
 		</div>
 		<ul class="des-list">
 			<li>
-				<span>飞手姓名</span><span class="value">{{ base.operatorName }}</span>
+				<span>飞手姓名</span><span class="value">{{ base.flyingHandName }}</span>
 			</li>
 			<li>
-				<span>联系电话</span><span class="value">{{ base.operatorPhone }}</span>
+				<span>联系电话</span><span class="value">{{ base.phoneNumber }}</span>
 			</li>
 		</ul>
 
 		<div class="sub-title my-3">无人机飞行动态</div>
 		<ul class="des-list">
 			<li>
-				<span>速度</span><span class="value">{{ base.speed }}</span>
+				<span>速度</span><span class="value">{{ Number(base.speed).toFixed(2) }}&nbsp;m/s</span>
 			</li>
 			<li>
-				<span>倾斜角</span><span class="value">{{ base.angle }}</span>
+				<span>倾斜角</span><span class="value">{{ Number(base.incline).toFixed(2) }}&nbsp;°</span>
 			</li>
 			<li>
-				<span>海拔</span><span class="value">{{ base.height }}</span>
+				<span>海拔</span><span class="value">{{ Number(base.altitude).toFixed(2) }}&nbsp;m</span>
 			</li>
 		</ul>
 	</div>
@@ -56,29 +56,37 @@
 import useLayoutStore from '@/store/layout'
 import { useMapStore } from '@/store/map'
 import { ref, watch } from 'vue'
+import { getUavInfo } from '@/service/map'
 
 const layoutStore = useLayoutStore()
 const mapStore = useMapStore()
 
 const base = ref({
-	name: '无人机001',
-	seriesCode: '1581F5FHD23CT00D9F73',
-	model: 'M3E',
-
-	height: '110m',
-	speed: '10m/s',
-	angle: '10°',
-
-	unit: '北京三快科技有限公司',
-	operatorName: '张三',
-	operatorPhone: '18000000000',
+	flightName: '',
+	flightIdentify: '',
+	flightType: '',
+	altitude: '',
+	speed: '',
+	incline: '',
+	flightUnit: '',
+	flyingHandName: '',
+	phoneNumber: '',
 })
 
 watch(
-	() => mapStore.uavId,
+	() => mapStore.uavInfo,
 	(val) => {
 		console.log(val)
-	}
+		getUavInfo({ id: val.uavId, time: val.dataTime }).then((res) => {
+			const { data } = res.data
+			console.log('getUavInfo:', data)
+			if (!data) return
+			Object.keys(base.value).forEach((k) => {
+				base.value[k] = data[k] || '-'
+			})
+		})
+	},
+	{ immediate: true }
 )
 
 function handlePositionUav() {