功能修改

src/views/home/Home.vue

@@ -94,21 +94,20 @@
 				<video autoplay muted loop id="bg-wgzb">
 					<source src="@/assets/images/motion/bg-uav.webm" type="video/webm" />
 				</video>
-				<ul>
-					<li v-for="item in panelData.violationSummary">
-						<span>{{ item.label }}</span>
+
+				<div class="wgzb-item" v-for="item in panelData.violationSummary">
+					<span>{{ item.label }}</span>
+					<div>
+						<!-- <span>{{ item.count }}</span> -->
+						<NumberScroll :value="item.count" />
 						<div>
-							<!-- <span>{{ item.count }}</span> -->
-							<NumberScroll :value="item.count" />
-							<div>
-								<span>{{
-									Math.round((item.count / panelData.violationSummary.reduce((pre, item) => pre + item.count, 0)) * 100)
-								}}</span>
-								<span>%</span>
-							</div>
+							<span>{{
+								Math.round((item.count / panelData.violationSummary.reduce((pre, item) => pre + item.count, 0)) * 100)
+							}}</span>
+							<span>%</span>
 						</div>
-					</li>
-				</ul>
+					</div>
+				</div>
 			</div>
 		</div>
 
@@ -178,7 +177,7 @@ const layoutStore = useLayoutStore()
 const panelData = reactive({
 	flightSummary: [
 		{ label: '飞行计划总数', count: 37, unit: '次', icon: getAssetsFile('page/bg-fxjhzs.png') },
-		{ label: '告警总数', count: 7, unit: '个', icon: getAssetsFile('page/bg-gjzs.png') },
+		{ label: '告警总数', count: 9, unit: '个', icon: getAssetsFile('page/bg-gjzs.png') },
 	],
 	flightActivity: [
 		{ uavCode: 'BM11344738556', unit: '美团无人机', routeName: '合生汇-黄兴公园', status: '飞行中' },
@@ -198,10 +197,11 @@ const panelData = reactive({
 		{ time: '10:08:08', uavCode: 'BM11344738560', unit: '美团无人机5', type: '电量低' },
 	],
 	violationSummary: [
-		{ label: '无人机碰撞', count: 2 },
-		{ label: '电量低', count: 3 },
-		{ label: '偏离航线', count: 1 },
+		{ label: '偏航预警', count: 1 },
+		{ label: '碰撞预警', count: 2 },
+		{ label: '空域闯入', count: 2 },
 		{ label: '天气预警', count: 1 },
+		{ label: '电量预警', count: 3 },
 	],
 })
 
@@ -338,82 +338,97 @@ onMounted(() => {})
 		#bg-wgzb {
 			position: absolute;
 			left: 0;
-			top: -80px;
+			top: -120px;
+			z-index: 1;
 		}
 
-		ul {
+		.wgzb-item {
+			position: absolute;
+			z-index: 2;
+			height: fit-content;
 			display: flex;
-			flex-wrap: wrap;
-			align-content: space-between;
-			height: 100%;
-			padding: 15px;
-
-			li {
-				width: 50%;
-				height: fit-content;
+			flex-direction: column;
+
+			& > span {
+				display: block;
+				width: 104px;
+				height: 28px;
+				margin-left: 16px;
+				background: url('../../assets/images/page/bg-label.png');
+				background-size: cover !important;
+				line-height: 28px;
+				font-size: 16px;
+				text-align: center;
+			}
+
+			& > div {
+				width: 130px;
+				height: 36px;
+				padding-left: 20px;
 				display: flex;
-				flex-direction: column;
+				align-items: center;
+				background: url('../../assets/images/page/bg-text-line.png');
+				background-size: cover !important;
 
 				& > span {
-					display: block;
-					width: 104px;
-					height: 28px;
-					margin-left: 20px;
-					background: url('../../assets/images/page/bg-label.png');
-					background-size: cover !important;
-					line-height: 28px;
-					font-size: 16px;
-					text-align: center;
+					font-size: 20px;
+					margin-right: 13px;
 				}
 
 				& > div {
-					width: 163px;
-					height: 45px;
-					padding-left: 20px;
-					display: flex;
-					align-items: center;
-					background: url('../../assets/images/page/bg-text-line.png');
-					background-size: cover !important;
-
-					& > span {
-						font-size: 20px;
-						margin-right: 13px;
-					}
+					width: 47px;
+					height: 20px;
+					background: linear-gradient(0deg, rgba(78, 113, 183, 0.7), rgba(158, 183, 234, 0.1));
+					border-radius: 10px;
+					border: 1px solid;
+					// border-image: linear-gradient(0deg, #2C53A1, #97B1E4) 1 1;
+					color: #97b4ed;
+					font-size: 18px;
+					line-height: 18px;
+					text-align: center;
 
-					& > div {
-						width: 47px;
-						height: 20px;
-						background: linear-gradient(0deg, rgba(78, 113, 183, 0.7), rgba(158, 183, 234, 0.1));
-						border-radius: 10px;
-						border: 1px solid;
-						// border-image: linear-gradient(0deg, #2C53A1, #97B1E4) 1 1;
-						color: #97b4ed;
-						font-size: 18px;
-						line-height: 18px;
-						text-align: center;
-
-						& > span:last-child {
-							font-size: 14px;
-							margin-left: 1px;
-						}
+					& > span:last-child {
+						font-size: 14px;
+						margin-left: 1px;
 					}
 				}
+			}
 
-				&:nth-child(2n) {
-					align-items: end;
+			&:nth-child(n + 5) {
+				align-items: end;
 
-					& > span {
-						margin-right: 20px;
-						background: url('../../assets/images/page/bg-label2.png');
-					}
+				& > span {
+					margin-right: 20px;
+					background: url('../../assets/images/page/bg-label2.png');
+				}
 
-					& > div {
-						padding-right: 20px;
-						justify-content: end;
-						background: url('../../assets/images/page/bg-text-line2.png');
-					}
+				& > div {
+					padding-right: 20px;
+					justify-content: end;
+					background: url('../../assets/images/page/bg-text-line2.png');
 				}
 			}
+
+			&:nth-child(2) {
+				left: 0;
+				top: 5px;
+			}
+			&:nth-child(3) {
+				left: 25px;
+				top: 85px;
+			}
+			&:nth-child(4) {
+				left: 160px;
+				bottom: 0;
+			}
+			&:nth-child(5) {
+				right: 25px;
+				top: 85px;
+			}
+			&:nth-child(6) {
+				right: 0;
+				top: 5px;
+			}
 		}
 	}
 }

src/views/home/cpns/FloatPanelKysg.vue

@@ -360,9 +360,9 @@ function getMesh(status) {
 let lastMeshHeights
 
 function handleSlide(val) {
+	if (form.value.meshRange !== '自适应') return
 	console.log('lastMeshHeights:', lastMeshHeights)
 	console.log('handleSlide:', val)
-	// form.value.meshHeights[1] = Math.min(val[0] + 30, 120)
 
 	let minHeight
 	let maxHeight
@@ -375,17 +375,20 @@ function handleSlide(val) {
 		maxHeight = Math.min(120, minHeight + 30)
 	} else if (val[0] === lastMeshHeights[1]) {
 		minHeight = Math.min(120, val[1])
-		if (minHeight + 30 > 120) {
-			maxHeight = minHeight
-			minHeight = minHeight - 30
-		} else {
-			maxHeight = Math.min(120, minHeight + 30)
-		}
+		maxHeight = Math.min(120, minHeight + 30)
 	} else if (val[1] === lastMeshHeights[0]) {
 		maxHeight = Math.min(120, val[0])
 		minHeight = Math.max(0, maxHeight - 30)
 	}
 
+	if (minHeight === 0) maxHeight = 30
+	if (maxHeight === 120) minHeight = 90
+
+	setKysgHeight({
+		minZ: minHeight,
+		maxZ: maxHeight,
+	})
+
 	form.value.meshHeights = [minHeight, maxHeight]
 	lastMeshHeights = [minHeight, maxHeight]
 }

src/views/home/cpns/FloatPanelTsjs.vue

@@ -12,8 +12,12 @@
 			<Switcher
 				:modelValue="options.airLine"
 				@update:modelValue="(val) => toggleOption('airLine', val)"
-				left-text="航线" />
-			<Switcher :modelValue="options.track" @update:modelValue="(val) => toggleOption('track', val)" left-text="轨迹" />
+				left-text="&emsp;&emsp;航线" />
+			<Switcher
+				:modelValue="options.track"
+				@update:modelValue="(val) => toggleOption('track', val)"
+				left-text="&emsp;&emsp;轨迹" />
+			<Switcher :modelValue="options.uav" @update:modelValue="(val) => toggleOption('uav', val)" left-text="全域态势" />
 		</div>
 
 		<Transition name="emerge-left">
@@ -83,6 +87,7 @@ async function handleDemo(item) {
 const options = reactive({
 	airLine: false,
 	track: false,
+	uav: ueStore.globalUav,
 })
 
 function toggleOption(target, val) {
@@ -106,8 +111,10 @@ function toggleOption(target, val) {
 		} else {
 			clearAllShapes()
 		}
-	} else {
+	} else if (target === 'track') {
 		toggleTrackLine(options.track)
+	} else if (target === 'uav') {
+		toggleGlobalUav(options.uav)
 	}
 }
 
@@ -127,19 +134,6 @@ function getData() {
 		})
 }
 
-watch(
-	() => ueStore.sceneReady,
-	(val) => {
-		if (val) {
-			toggleGlobalUav(false)
-			setTimeout(() => {
-				ueStore.toggleGlobalUav(true)
-			}, 500)
-		}
-	},
-	{ immediate: true }
-)
-
 const baseInfo = ref({
 	name: '美团001',
 	seriesCode: '1581F5FHD23CT00D9F73',
@@ -180,7 +174,6 @@ const alertInfo = ref({
 })
 
 function handleCloseInfo() {
-	ueStore.toggleGlobalUav(true)
 	uavInfoShow.value = false
 	initSceneDemo()
 	panelStore.setWeather('Clear Skies')