样式调整

src/views/home/Home.vue

@@ -199,7 +199,7 @@ const panelData = reactive({
 	violationSummary: [
 		{ label: '偏航预警', count: 1 },
 		{ label: '碰撞预警', count: 2 },
-		{ label: '空域闯入', count: 2 },
+		{ label: '闯入禁飞区', count: 2 },
 		{ label: '天气预警', count: 1 },
 		{ label: '电量预警', count: 3 },
 	],

src/views/home/cpns/FloatPanelTsjs.vue

@@ -63,7 +63,7 @@ const uavInfoShow = ref(false)
 
 const listData = ref([
 	{ label: '偏航预警', value: 'Yaw', pic: 'ph' },
-	{ label: '空域闯入', value: 'BreakInto', pic: 'ky' },
+	{ label: '闯入禁飞区', value: 'BreakInto', pic: 'ky' },
 	{ label: '天气预警', value: 'Weather', pic: 'tq' },
 	{ label: '碰撞预警', value: 'Near', pic: 'pz' },
 	{ label: '电量预警', value: 'Electricity', pic: 'dl' },

src/views/home/cpns/PanelSjwg.vue

@@ -2,68 +2,79 @@
 	<div class="panel-sjwg flex flex-col aside-left-inner">
 		<div class="title-main shrink-0">低空数字地图</div>
 
-		<div class="title-sub my-4 shrink-0">
-			底板数据
-			<i @click="toggleContentShow('b1')" class="drop-down" :class="{ reverse: contentShow.b1 }"></i>
-		</div>
+		<div class="flex-1 overflow-y-auto my-2 pr-1">
+			<el-collapse v-model="generalActive">
+				<el-collapse-item name="底板数据">
+					<template #title>
+						<div class="title-sub shrink-0">
+							底板数据
+							<i class="drop-down" :class="{ reverse: generalActive.includes('底板数据') }"></i>
+						</div>
+					</template>
 
-		<Transition>
-			<div v-if="contentShow.b1" v-collapse="'scroll'" class="pr-1" style="flex: 1">
-				<template v-for="item in basicList">
-					<div class="title-shade">
-						<span>{{ item.label }}</span>
-						<i
-							v-if="'active' in item"
-							class="btn-selectall"
-							:class="{ active: item.active }"
-							@click="basicCheckAll(item)"></i>
-						<i class="drop-down" @click="toggleB1Show(item)" :class="{ reverse: item.show }"></i>
-					</div>
-					<Transition>
-						<ul v-if="item.show" v-collapse>
-							<li v-for="child in item.children" class="list-item" :class="{ disabled: child.disabled }">
-								<img :src="getAssetsFile(`resources/${child.icon}.png`)" alt="" />
-								<span>{{ child.label }}</span>
-								<i title="查看" @click="handleBaseClick(child)" :class="{ active: child.active }"></i>
-							</li>
-						</ul>
-					</Transition>
-				</template>
-			</div>
-		</Transition>
+					<el-collapse v-model="baseActive" accordion>
+						<el-collapse-item :name="item.label" v-for="item in basicList">
+							<template #title>
+								<div class="title-shade">
+									<span>{{ item.label }}</span>
+									<i
+										v-if="'active' in item"
+										class="btn-selectall"
+										:class="{ active: item.active }"
+										@click.stop="basicCheckAll(item)"></i>
+									<i class="drop-down" :class="{ reverse: baseActive.includes(item.label) }"></i>
+								</div>
+							</template>
+							<ul>
+								<li v-for="child in item.children" class="list-item" :class="{ disabled: child.disabled }">
+									<img :src="getAssetsFile(`resources/${child.icon}.png`)" alt="" />
+									<span>{{ child.label }}</span>
+									<i title="查看" @click="handleBaseClick(child)" :class="{ active: child.active }"></i>
+								</li>
+							</ul>
+						</el-collapse-item>
+					</el-collapse>
+				</el-collapse-item>
+			</el-collapse>
+
+			<el-collapse v-model="generalActive">
+				<el-collapse-item name="低空要素数据">
+					<template #title>
+						<div class="title-sub shrink-0">
+							低空要素数据
+							<i class="drop-down" :class="{ reverse: generalActive.includes('低空要素数据') }"></i>
+						</div>
+					</template>
 
-		<div class="title-sub my-4 shrink-0">
-			低空要素数据<i @click="toggleContentShow('b2')" class="drop-down" :class="{ reverse: contentShow.b2 }"></i>
+					<el-collapse v-model="featureActive" accordion>
+						<el-collapse-item :name="item.label" v-for="item in featureLists">
+							<template #title>
+								<div class="title-shade">
+									<span @click.stop="handleCheckShiFei(item.label)">{{ item.label }}</span>
+									<i class="btn-selectall" :class="{ active: item.check }" @click.stop="handleCheckAll(item)"></i>
+									<i class="drop-down" :class="{ reverse: featureActive.includes(item.label) }"></i>
+								</div>
+							</template>
+							<ul>
+								<li v-for="child in item.children" class="list-item">
+									<img :src="getAssetsFile(`resources/${item.icon}.png`)" alt="" />
+									<span>{{ child.name }}</span>
+									<i title="查看" @click="handleCheck(child, item.type)" :class="{ active: child.check }"></i>
+									<i title="网格" @click="handleMesh(child, item.type)" :class="{ active: child.mesh }"></i>
+									<el-popconfirm title="确定删除?" @confirm="handleDelete(child, item.type)">
+										<template #reference>
+											<i title="删除"></i>
+										</template>
+									</el-popconfirm>
+								</li>
+								<li v-if="!item.children.length" class="no-data">无数据</li>
+							</ul>
+						</el-collapse-item>
+					</el-collapse>
+				</el-collapse-item>
+			</el-collapse>
 		</div>
 
-		<Transition>
-			<div v-if="contentShow.b2" v-collapse="'scroll'" class="pr-1" style="flex: 1">
-				<template v-for="item in featureLists">
-					<div class="title-shade">
-						<span @click="handleCheckShiFei(item.label)">{{ item.label }}</span>
-						<i class="btn-selectall" :class="{ active: item.check }" @click="handleCheckAll(item)"></i>
-						<i class="drop-down" @click="toggleB2Show(item)" :class="{ reverse: item.show }"></i>
-					</div>
-					<Transition>
-						<ul v-if="item.show" v-collapse>
-							<li v-for="child in item.children" class="list-item">
-								<img :src="getAssetsFile(`resources/${item.icon}.png`)" alt="" />
-								<span>{{ child.name }}</span>
-								<i title="查看" @click="handleCheck(child, item.type)" :class="{ active: child.check }"></i>
-								<i title="网格" @click="handleMesh(child, item.type)" :class="{ active: child.mesh }"></i>
-								<el-popconfirm title="确定删除?" @confirm="handleDelete(child, item.type)">
-									<template #reference>
-										<i title="删除"></i>
-									</template>
-								</el-popconfirm>
-							</li>
-							<li v-if="!item.children.length" class="no-data">无数据</li>
-						</ul>
-					</Transition>
-				</template>
-			</div>
-		</Transition>
-
 		<Transition name="emerge-left">
 			<div class="feature-legend" v-if="layoutStore.floatPanels.layers_legend">
 				<div class="title-sub">图例</div>
@@ -102,7 +113,7 @@ import { airSpaceTypes } from '@/utils/options'
 import { getAssetsFile, getData } from '@/utils/require'
 import { hexToRgb } from '@/utils/tools'
 import { renderShapes } from '@/utils/ueActions'
-import { onBeforeMount, onBeforeUnmount, reactive, ref, watch } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 import FloatPanelAirSpace from './FloatPanelAirSpace.vue'
 
 const panelStore = usePanelStore()
@@ -114,9 +125,10 @@ onBeforeMount(() => {
 	getLists()
 	addAreaColors()
 	if (layoutStore.sceneType === 'ue') {
-		contentShow.b1 = false
+		generalActive.value = ['低空要素数据']
 	}
 	toggleFeaturesClickEvent(true)
+	handleRestoreCollapse()
 })
 
 function addAreaColors() {
@@ -149,7 +161,7 @@ function getLists() {
 				featureLists.value[1].children = resList.filter((r) => r.spaceType === '2')
 				featureLists.value[2].children = resList.filter((r) => r.spaceType === '3')
 				featureLists.value[3].children = resList.filter((r) => r.spaceType === '6')
-				featureLists.value[0].show = true
+				featureActive.value = ['禁飞区']
 			})
 			.catch(() => {
 				showWarning('空域列表查询失败')
@@ -198,10 +210,15 @@ function basicCheckAll(item) {
 	})
 }
 
+const generalActive = ref(['底板数据', '低空要素数据'])
+
+const baseActive = ref(['地形'])
+
+const featureActive = ref([])
+
 const basicList = ref([
 	{
 		label: '地形',
-		show: true,
 		children: [
 			{ label: '影像', alias: '影像底图', icon: 'dxing', active: false },
 			{ label: '政务底图', alias: '政务底图', icon: 'dxing', active: false },
@@ -210,7 +227,6 @@ const basicList = ref([
 	},
 	{
 		label: '低空障碍物',
-		show: false,
 		active: false,
 		children: [
 			{ label: '全市建筑物', alias: '全市白模', icon: 'qsjzwu', active: false },
@@ -219,7 +235,6 @@ const basicList = ref([
 	},
 	{
 		label: '电磁干扰场域',
-		show: false,
 		active: false,
 		children: [
 			{ label: '无线通信基站', active: false, icon: 'wxtxjzhan', disabled: true },
@@ -228,7 +243,6 @@ const basicList = ref([
 	},
 	{
 		label: '城市基础设施信息',
-		show: false,
 		active: false,
 		children: [
 			{ label: '道路', alias: ['快速路', '高速公路', '地面道路'], icon: 'dlu', active: false },
@@ -245,13 +259,12 @@ const basicList = ref([
 ])
 
 const featureLists = ref([
-	{ label: '禁飞区', type: 'area', show: false, check: false, icon: 'jfqu', children: [] },
-	{ label: '净空区', type: 'area', show: false, check: false, icon: 'jkqu', children: [] },
-	{ label: '适飞区', type: 'area', show: false, check: false, icon: 'sfqu', children: [] },
+	{ label: '禁飞区', type: 'area', check: false, icon: 'jfqu', children: [] },
+	{ label: '净空区', type: 'area', check: false, icon: 'jkqu', children: [] },
+	{ label: '适飞区', type: 'area', check: false, icon: 'sfqu', children: [] },
 	{
 		label: '已批复空域',
 		type: 'area',
-		show: false,
 		check: false,
 		icon: 'ypfkyu',
 		children: [],
@@ -260,7 +273,6 @@ const featureLists = ref([
 	{
 		label: '航线',
 		type: 'route',
-		show: false,
 		check: false,
 		icon: 'hxian',
 		children: [],
@@ -306,26 +318,6 @@ async function handleBaseClick(layer) {
 	}
 }
 
-function toggleB1Show(item) {
-	const target = basicList.value.find((i) => i.label === item.label)
-	target.show = !target.show
-	basicList.value.forEach((i) => {
-		if (i.show && i.label !== item.label) {
-			i.show = false
-		}
-	})
-}
-
-function toggleB2Show(item) {
-	const target = featureLists.value.find((i) => i.label === item.label)
-	target.show = !target.show
-	featureLists.value.forEach((i) => {
-		if (i.show && i.label !== item.label) {
-			i.show = false
-		}
-	})
-}
-
 function handleCheck(item, type) {
 	// console.log(item)
 	item.check = !item.check
@@ -475,15 +467,6 @@ function handleMesh(item, type) {
 	})
 }
 
-const contentShow = reactive({
-	b1: true,
-	b2: true,
-})
-
-function toggleContentShow(id) {
-	contentShow[id] = !contentShow[id]
-}
-
 function handleCheckAll(item) {
 	item.check = !item.check
 	item.children.forEach((c) => {
@@ -497,10 +480,12 @@ function handleCheckAll(item) {
 
 function handleStoreChecked() {
 	panelStore.setSjwg({
+		baseActive: baseActive.value,
+		generalActive: generalActive.value,
+		featureActive: featureActive.value,
 		basicList: basicList.value,
 		featureLists: featureLists.value.map((t) => ({
 			label: t.label,
-			show: t.show,
 			check: t.check,
 			children: t.children.map((c) => ({
 				id: c.id,
@@ -518,7 +503,6 @@ function handleRestoreChecked() {
 	featureLists.value.forEach((row) => {
 		const tar_row = temp.featureLists.find((t) => t.label === row.label)
 		row.check = tar_row.check
-		row.show = tar_row.show
 		row.children.forEach((c) => {
 			const tar_c = tar_row.children.find((tc) => tc.id === c.id)
 			c.check = tar_c.check
@@ -527,6 +511,14 @@ function handleRestoreChecked() {
 	})
 }
 
+function handleRestoreCollapse() {
+	if (!Object.keys(panelStore.sjwg).length) return
+	const temp = panelStore.sjwg
+	baseActive.value = temp.baseActive
+	generalActive.value = temp.generalActive
+	featureActive.value = temp.featureActive
+}
+
 onBeforeUnmount(() => {
 	handleStoreChecked()
 	layoutStore.toggleFloatPanel('layers_legend', false)
@@ -534,21 +526,6 @@ onBeforeUnmount(() => {
 	toggleFeaturesClickEvent(false)
 })
 
-const vCollapse = {
-	beforeMount(el, binding) {
-		el.style.height = '0'
-		el.style.overflow = binding.value === 'scroll' ? 'auto' : 'hidden'
-		el.style.transition = 'height 0.5s ease'
-	},
-	mounted(el) {
-		const naturalHeight = el.scrollHeight
-		el.style.height = `${naturalHeight}px`
-	},
-	beforeUnmount(el) {
-		el.style.height = '0'
-	},
-}
-
 watch(
 	() => mapStore.cubeResult,
 	(val) => {
@@ -607,7 +584,7 @@ watch(
 	display: flex;
 	align-items: center;
 	padding: 0 16px;
-	margin-bottom: 10px;
+	flex: 1;
 
 	&::before {
 		content: '';
@@ -622,6 +599,8 @@ watch(
 	span {
 		text-shadow: 0px 4px 4px rgba(21, 41, 91, 0.45);
 		margin-right: 10px;
+		font-size: 16px;
+		color: #fff !important;
 	}
 
 	.btn-selectall {
@@ -681,6 +660,7 @@ watch(
 
 	span {
 		flex: 1;
+		font-size: 16px;
 	}
 
 	i {
@@ -719,6 +699,7 @@ watch(
 	text-align: center;
 	margin: 5px 0 10px;
 	color: #999;
+	font-size: 16px;
 }
 
 .feature-legend {
@@ -767,4 +748,26 @@ watch(
 		}
 	}
 }
+
+.el-collapse {
+	border: none;
+	:deep(.el-collapse-item) {
+		border: none;
+		.el-collapse-item__header {
+			border-bottom: none !important;
+			.title-sub {
+				color: #fff !important;
+			}
+			.el-collapse-item__arrow {
+				display: none;
+			}
+		}
+		.el-collapse-item__wrap {
+			border-bottom: none;
+		}
+		.el-collapse-item__content {
+			padding-bottom: 0;
+		}
+	}
+}
 </style>

src/views/layout/cpns/Header.vue

@@ -17,7 +17,7 @@
 				alt=""
 				:title="currentWeather.label"
 				@click="switchWeather" />
-			<div class="user-panel">Admin</div>
+			<div class="user-panel" @click="toNav">Admin</div>
 		</div>
 	</div>
 </template>
@@ -29,6 +29,9 @@ import usePanelStore from '@/store/panel'
 import { getAssetsFile } from '@/utils/require'
 import useLayoutStore from '@/store/layout'
 import { resetCamera } from '@/utils/ueActions'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const panelStore = usePanelStore()
 const layoutStore = useLayoutStore()
@@ -63,6 +66,10 @@ function handleReset() {
 		resetCamera()
 	}
 }
+
+function toNav() {
+	router.push('/navigation')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -115,6 +122,7 @@ function handleReset() {
 			line-height: 45px;
 			font-size: 18px;
 			color: #aecaf5;
+			cursor: pointer;
 		}
 	}
 

src/views/nav/Index.vue

@@ -8,7 +8,9 @@
 
 			<Transition name="emerge-right">
 				<ul class="sub-nav sub-scene" v-if="showSceneSub">
-					<li v-for="item in sceneSubList" @click.stop="handleClickSubNav(item)">{{ item.label }}</li>
+					<li v-for="item in sceneSubList" @click.stop="handleClickSubNav(item)" :class="{ disabled: item.disabled }">
+						{{ item.label }}
+					</li>
 				</ul>
 			</Transition>
 		</div>
@@ -98,11 +100,11 @@ const sceneSubList = ref([
 	// { label: '复杂商圈城市配送', value: '' },
 	// { label: '无人机表演', value: '' },
 
-	{ label: '个人消费飞行', value: '' },
-	{ label: '低空城市配送', value: '' },
-	{ label: '无人机编队表演', value: '' },
-	{ label: '低空物流运输', value: '' },
-	{ label: '低空城市巡检', value: '' },
+	{ label: '个人消费飞行', value: '', disabled: true },
+	{ label: '低空城市配送', value: '', disabled: true },
+	{ label: '无人机编队表演', value: '', disabled: true },
+	{ label: '低空物流运输', value: '', disabled: true },
+	{ label: '低空城市巡检', value: '', disabled: true },
 ])
 
 function handleClickNav(item) {
@@ -281,5 +283,10 @@ function handleClickBlank() {
 	top: 0;
 	right: 110px;
 	height: fit-content;
+
+	.disabled {
+		opacity: 0.6;
+		cursor: default;
+	}
 }
 </style>