功能修改

src/assets/styles/index.scss

@@ -179,7 +179,7 @@
 	text-align: center;
 	background: url('../images/buttons/btn-main.png') !important;
 	background-size: 100%;
-	border: none;
+	border: none !important;
 	.is-disabled {
 		opacity: 0.4;
 	}
@@ -192,7 +192,7 @@
 	padding: 0 15px 4px;
 	background: url('../images/buttons/btn-secondary.png') no-repeat !important;
 	background-size: 100% 100% !important;
-	border: none;
+	border: none !important;
 	.is-disabled {
 		opacity: 0.4;
 	}

src/components/MapView.vue

@@ -25,7 +25,7 @@ export default {
 			}, 2500)
 			myBridge.bridgeContent = bridge = new CityGis.Bridge({
 				id: 'i_map',
-				//url: 'http://localhost:5173/map-tool-widget/',
+				// url: 'http://localhost:5173/map-tool-widget/',
 				// url: 'https://cimweb.zjw.sh.cegn.cn:2007/map-tool-widget/#/',
 				url: 'http://172.16.8.44:9250/map-tool-widget/#/jk_map',
 				onReady: function () {

src/views/home/cpns/FloatPanelAirSpace.vue

@@ -8,11 +8,13 @@
 			<h2 class="c-title">要素信息</h2>
 
 			<ul class="des-list">
-				<li v-for="item in list">
-					<div class="flex-1 flex">
-						<span>{{ item.label }}：</span><span class="value">{{ item.value }}</span>
-					</div>
-				</li>
+				<template v-for="item in list" :key="item.id">
+					<li v-if="item.value">
+						<div class="flex-1 flex">
+							<span>{{ item.label }}：</span><span class="value">{{ item.value }}</span>
+						</div>
+					</li>
+				</template>
 			</ul>
 		</div>
 	</Transition>
@@ -29,7 +31,12 @@ const layoutStore = useLayoutStore()
 const list = ref([
 	{ label: 'ID', value: '', id: 'id', unit: '' },
 	{ label: '名称', value: '', id: 'name', unit: '' },
-	{ label: '高度', value: '', id: 'height', unit: '米' },
+	{ label: '真高', value: '', id: 'height', unit: '米' },
+	// 已批复空域添补字段
+	{ label: '类别', value: '', id: 'lb', unit: '' },
+	{ label: '任务性质', value: '', id: 'rwxz', unit: '' },
+	{ label: '所属单位', value: '', id: 'ssdw', unit: '' },
+	{ label: '机型驾数', value: '', id: 'jxjs', unit: '个' },
 ])
 
 function handleClose() {
@@ -41,7 +48,7 @@ watch(
 	(val) => {
 		if (val && val.id && val.name && val.height) {
 			list.value.forEach((row) => {
-				row.value = val[row.id] + row.unit
+				row.value = val[row.id] ? val[row.id] + row.unit : ''
 			})
 		}
 	},

src/views/home/cpns/FloatPanelKysg.vue

@@ -59,9 +59,7 @@
 			:max="600"
 			range
 			:marks="marks"
-			tooltip-class="range-tooltip"
-			placement="bottom"
-			:format-tooltip="(val) => val + 'm'" />
+			:show-tooltip="false" />
 	</div>
 </template>
 
@@ -182,12 +180,9 @@ watch(
 	(val) => {
 		if (val) {
 			form.value.meshLevel = val
-			const maxHeight = Number(DenseData.find((d) => d.level == val).des.slice(1, -2))
-			form.value.meshHeights = [0, Math.min(600, maxHeight)]
-			// const toolsTips = document.getElementsByClassName('range-tooltip')
-			// for (let i = 0; i < toolsTips.length; i++) {
-			// 	toolsTips[i].style.visibility = 'visible'
-			// }
+			const maxHeight =
+				Number(val) > 20 ? 30 : Math.min(600, Number(DenseData.find((d) => d.level == val).des.slice(1, -2)))
+			form.value.meshHeights = [0, maxHeight]
 		}
 	}
 )
@@ -246,21 +241,32 @@ const DenseData = reactive([
 	// { label: '2′网格', level: 14, size: { x: 2984.4, y: 2984.4, z: 2984.4 }, des: '(2984.4m)'},
 ])
 
+watch(
+	() => form.value.meshHeights,
+	(val) => {
+		nextTick(() => {
+			const sliderBtns = document.querySelectorAll('.el-slider__button-wrapper')
+			sliderBtns.forEach((ele, index) => {
+				// 删除旧的tooltip
+				const tooltips_old = ele.querySelectorAll('.tooltip')
+				tooltips_old.forEach((t) => ele.removeChild(t))
+				if (!val.every((v) => v === 0)) {
+					// 创建tooltip元素
+					let tooltip_ele = document.createElement('div')
+					tooltip_ele.className = 'tooltip'
+					tooltip_ele.innerText = val[index] + 'm'
+					// 添加新的
+					ele.appendChild(tooltip_ele)
+				}
+			})
+		})
+	},
+	{ deep: true, immediate: true }
+)
+
 function clearPoints() {
 	form.value.meshLevel = ''
 	form.value.meshHeights = [0, 0]
-	nextTick(() => {
-		const toolsTips = document.getElementsByClassName('range-tooltip')
-		for (let i = 0; i < toolsTips.length; i++) {
-			toolsTips[i].style.visibility = 'hidden'
-		}
-		const sliderBtns = document.getElementsByClassName('el-slider__button-wrapper')
-		for (let i = 0; i < toolsTips.length; i++) {
-			sliderBtns[i].addEventListener('mousedown', () => {
-				toolsTips[i].style.visibility = 'visible'
-			})
-		}
-	})
 }
 
 // 单点选择逻辑
@@ -512,6 +518,14 @@ onBeforeUnmount(() => {
 				border-color: #fffcf5;
 				border-width: 2px;
 			}
+
+			.tooltip {
+				position: absolute;
+				bottom: -20px;
+				left: -13px;
+				width: 60px;
+				font-size: 15px;
+			}
 		}
 
 		.el-slider__marks .el-slider__marks-text {
@@ -532,22 +546,3 @@ onBeforeUnmount(() => {
 	}
 }
 </style>
-
-<style lang="scss">
-.range-tooltip {
-	display: block !important;
-	background: none !important;
-	border: none !important;
-	margin-top: -7px;
-	visibility: hidden;
-
-	span {
-		color: #ddd;
-		font-size: 16px;
-	}
-
-	.el-popper__arrow {
-		display: none;
-	}
-}
-</style>

src/views/home/cpns/FloatPanelTsjs.vue

@@ -47,6 +47,7 @@ import {
 import { getCurrentInstance, onBeforeMount, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import FloatPanelUav from './FloatPanelUav.vue'
 import Switcher from '@/components/Switcher.vue'
+import { useDateFormat } from '@vueuse/core'
 
 const { proxy } = getCurrentInstance()
 
@@ -225,6 +226,7 @@ onBeforeMount(() => {
 				baseInfo.value.battery = msg.Data.electricity
 				baseInfo.value.height = msg.Data.height.toFixed(2) + 'm'
 				baseInfo.value.velocity = msg.Data.speed.toFixed(2) + 'm/s'
+				baseInfo.value.updateTime = useDateFormat(Number(msg.Data.dataTime + '000'), 'YYYY-MM-DD HH:mm:ss')
 				currentLineId = msg.Data.travelId
 
 				const { electricityWarning, weatherWarning, collision, noFlyZone, clearZone, nearstAircraft, routeDeviate } =

src/views/home/cpns/PanelSjwg.vue

@@ -317,13 +317,6 @@ function handleCheck(item, type) {
 	let additional = {}
 	switch (type) {
 		case 'area':
-			if (item.spaceType !== '6') {
-				color = hexToRgb(airSpaceTypes.find((i) => i.value === item.spaceType).color, 0.5)
-			} else {
-				const colorArr = Object.values(featureLists.value.find((i) => i.label === '已批复空域').colors)
-				color = +shapeObj.height < 120 ? colorArr[0] : +shapeObj.height < 300 ? colorArr[1] : colorArr[2]
-				color = hexToRgb(color, 0.5)
-			}
 			additional = {
 				attributes: {
 					id: item.id,
@@ -331,6 +324,17 @@ function handleCheck(item, type) {
 					height: shapeObj.height,
 				},
 			}
+			if (item.spaceType !== '6') {
+				color = hexToRgb(airSpaceTypes.find((i) => i.value === item.spaceType).color, 0.5)
+			} else {
+				const colorArr = Object.values(featureLists.value.find((i) => i.label === '已批复空域').colors)
+				color = +shapeObj.height < 120 ? colorArr[0] : +shapeObj.height < 300 ? colorArr[1] : colorArr[2]
+				color = hexToRgb(color, 0.5)
+				// 已批复空域添加属性
+				additional.attributes = {
+					...additional.attributes,
+				}
+			}
 			break
 		case 'plot':
 			color = hexToRgb(featureLists.value.find((i) => i.type === 'plot').color, 0.7)