low-altitude-web/src/views/home/cpns/PanelSjwg.vue

<template>
	<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>

		<Transition>
			<div v-if="contentShow.b1" v-collapse="'scroll'" class="pr-1" style="flex: 2">
				<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>

		<div class="title-sub my-4 shrink-0">
			低空要素数据<i @click="toggleContentShow('b2')" class="drop-down" :class="{ reverse: contentShow.b2 }"></i>
		</div>

		<Transition>
			<div v-if="contentShow.b2" v-collapse="'scroll'" class="pr-1" style="flex: 3">
				<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>
				<ul>
					<template v-for="item in featureLists">
						<li>
							<i v-if="item.color" :style="{ background: item.color }"></i>
							<span :class="{ bold: item.colors }">{{ item.label }}</span>
						</li>
						<template v-if="item.colors">
							<div v-for="(childColor, childLabel) in item.colors">
								<i :style="{ background: childColor }"></i>
								<span>{{ childLabel }}</span>
							</div>
						</template>
					</template>
				</ul>
			</div>
		</Transition>

		<!-- 空域点查询 -->
		<Transition name="emerge-left">
			<FloatPanelAirSpace v-if="layoutStore.floatPanels.air_space" />
		</Transition>
	</div>
</template>

<script setup>
import shifei from '@/data/shifei.json'
import { DeleteArea, DeletePlot, DeleteRoute, GetAreaList, GetPlotList, GetRouteList } from '@/service/http'
import useLayoutStore from '@/store/layout'
import { useMapStore } from '@/store/map.js'
import usePanelStore from '@/store/panel'
import { AddSingleLayer, heatMap, InspectCube, showShapes, toggleFeaturesClickEvent } from '@/utils/map/addLayer'
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 FloatPanelAirSpace from './FloatPanelAirSpace.vue'

const panelStore = usePanelStore()
const layoutStore = useLayoutStore()
const mapStore = useMapStore()
let shifeiStatus = false

onBeforeMount(() => {
	getLists()
	addAreaColors()
	if (layoutStore.sceneType === 'ue') {
		contentShow.b1 = false
	}
	toggleFeaturesClickEvent(true)
})

function addAreaColors() {
	featureLists.value.forEach((i) => {
		if (!i.color && !i.colors) {
			i.color = airSpaceTypes.find((t) => t.label === i.label).color
		}
	})
	layoutStore.toggleFloatPanel('layers_legend', true)
}

function showWarning(message) {
	ElMessage({ offset: 90, type: 'warning', message })
}

function getLists() {
	Promise.all([
		GetAreaList()
			.then((res) => {
				if (!Array.isArray(res.data.data)) {
					showWarning('空域列表查询失败')
					return
				}
				const resList = res.data.data.map((row) => ({
					...row,
					check: false,
					mesh: false,
				}))
				featureLists.value[0].children = resList.filter((r) => r.spaceType === '1')
				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
			})
			.catch(() => {
				showWarning('空域列表查询失败')
			}),
		GetPlotList()
			.then((res) => {
				if (!Array.isArray(res.data.data)) {
					showWarning('起降场列表查询失败')
					return
				}
				featureLists.value[5].children = res.data.data.map((row) => ({
					...row,
					check: false,
					mesh: false,
				}))
			})
			.catch(() => {
				showWarning('起降场列表查询失败')
			}),
		GetRouteList()
			.then((res) => {
				if (!Array.isArray(res.data.data)) {
					showWarning('航线列表查询失败')
					return
				}
				featureLists.value[4].children = res.data.data.map((row) => ({
					...row,
					check: false,
					mesh: false,
				}))
			})
			.catch(() => {
				showWarning('航线列表查询失败')
			}),
	]).finally(() => {
		// 恢复选中状态
		handleRestoreChecked()
	})
}

function basicCheckAll(item) {
	item.active = !item.active
	item.children.forEach((c) => {
		c.active = !item.active
		handleBaseClick(c)
	})
}

const basicList = ref([
	{
		label: '地形',
		show: true,
		children: [
			{ label: '影像', alias: '影像底图', icon: 'dxing', active: false },
			{ label: '政务底图', alias: '政务底图', icon: 'dxing', active: false },
			{ label: '暗色底图', alias: '暗色底图', icon: 'dxing', active: false },
		],
	},
	{
		label: '低空障碍物',
		show: false,
		active: false,
		children: [
			{ label: '全市建筑物', alias: '全市白模', icon: 'qsjzwu', active: false },
			{ label: '高精度模型', alias: '五角场精模', icon: 'gjdmxing', active: false },
		],
	},
	{
		label: '电磁干扰场域',
		show: false,
		active: false,
		children: [
			{ label: '无线通信基站', active: false, icon: 'wxtxjzhan', disabled: true },
			{ label: '电磁干扰', active: false, icon: 'dcgrao', disabled: true },
		],
	},
	{
		label: '其它社会信息',
		show: false,
		active: false,
		children: [
			{ label: '道路', alias: ['快速路', '高速公路', '地面道路'], icon: 'dlu', active: false },
			{ label: '河流', alias: '全市河流', icon: 'hliu', active: false },
			{ label: '轨道交通', icon: 'gdjtong', active: false },
			{ label: '铁路', icon: 'tlu', active: false },
			{ label: '绿化', alias: '公园绿地', icon: 'lhua', active: false },
			{ label: '学校', icon: 'xxiao', active: false },
			{ label: '医院', alias: '医院', icon: 'yyuan', active: false },
			{ label: '人口', alias: '人口', icon: 'rkou', active: false },
			{ label: '政府部门', icon: 'zfbmen', active: false },
		],
	},
])

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',
		show: false,
		check: false,
		icon: 'ypfkyu',
		children: [],
		colors: { '120米以下': '#ccff66', '300米以下': '#ffcc66', '600米以下': '#feb2b2' },
	},
	{ label: '航线', type: 'route', show: false, check: false, icon: 'hxian', children: [], color: '#ffff00' },
	{ label: '起降场', type: 'plot', show: false, check: false, icon: 'qjchang', children: [], color: '#45dcb5' },
])

let resources

async function handleBaseClick(layer) {
	layer.active = !layer.active
	if (layer.alias) {
		const aliasArr = Array.isArray(layer.alias) ? layer.alias : [layer.alias]
		if (!resources) {
			resources = await getData('resources.json')
		}
		const targetServices = resources.filter((r) => aliasArr.some((i) => i === r.title))
		if (targetServices.length === 0) return
		targetServices.forEach((service) => {
			if (service.type == 'feature') {
				heatMap({
					...service,
					visible: layer.active,
				})
			} else {
				AddSingleLayer({
					...service,
					visible: layer.active,
					opacity: 1,
				})
			}
		})
	}
}

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
	let color
	const shapeObj = JSON.parse(item.shape)
	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,
					name: item.name,
					height: shapeObj.height,
				},
			}
			break
		case 'plot':
			color = hexToRgb(featureLists.value.find((i) => i.type === 'plot').color, 0.7)
			const { height, coneHeight, cylinderHeight } = shapeObj
			additional = {
				attributes: {
					id: item.id,
					name: item.name,
					height: height || coneHeight + cylinderHeight,
				},
			}
			break
		case 'route':
			color = hexToRgb(featureLists.value.find((i) => i.type === 'route').color, 0.5)
	}
	const data = [
		{
			...additional,
			type: type === 'route' ? item.type : item.geoType,
			shape: {
				...shapeObj,
				color,
			},
		},
	]
	if (layoutStore.sceneType === 'gis') {
		showShapes({
			id: item.id,
			data: item.check ? data : null,
		})
	} else {
		renderShapes({
			id: item.id,
			data: item.check ? data[0] : null,
		})
	}
}

function handleCheckShiFei(label) {
	if (label !== '适飞区') return
	shifeiStatus = !shifeiStatus
	if (shifeiStatus) {
		shifei.forEach((item) => {
			showShapes({
				id: item.attributes.FID,
				data: [
					{
						type: 'polygon',
						shape: {
							color: [0, 255, 0, 0.5],
							height: 120,
							rings: item.geometry.rings,
						},
					},
				],
			})
		})
	} else {
		shifei.forEach((item) => {
			showShapes({
				id: item.attributes.FID,
			})
		})
	}
}

function handleDelete(item, type) {
	switch (type) {
		case 'area':
			DeleteArea(item.id).then((res) => {
				if (res.data.code === 200) {
					ElMessage.success('删除成功')
					getLists()
				}
			})
			break
		case 'plot':
			DeletePlot(item.id).then((res) => {
				if (res.data.code === 200) {
					ElMessage.success('删除成功')
					getLists()
				}
			})
			break
		case 'route':
			DeleteRoute(item.id).then((res) => {
				if (res.data.code === 200) {
					ElMessage.success('删除成功')
					getLists()
				}
			})
	}
}

function handleMesh(item, type) {
	item.mesh = !item.mesh
	if (item.mesh) {
		layoutStore.toggleGlobalLoading(true)
	}
	InspectCube({
		id: item.id,
		show: item.mesh,
		type: item.geoType || item.type,
		shape: JSON.parse(item.shape),
	})
}

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) => {
		if (item.check && !c.check) {
			handleCheck(c, item.type)
		} else if (!item.check && c.check) {
			handleCheck(c, item.type)
		}
	})
}

function handleStoreChecked() {
	panelStore.setSjwg({
		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,
				check: c.check,
				mesh: c.mesh,
			})),
		})),
	})
}

function handleRestoreChecked() {
	if (!Object.keys(panelStore.sjwg).length) return
	const temp = panelStore.sjwg
	basicList.value = temp.basicList
	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
			c.mesh = tar_c.mesh
		})
	})
}

onBeforeUnmount(() => {
	handleStoreChecked()
	layoutStore.toggleFloatPanel('layers_legend', false)
	layoutStore.toggleFloatPanel('air_space', false)
	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) => {
		if (val.data == 'error') {
			ElMessage({ type: 'error', message: '核查结果为空' })
		}
		layoutStore.toggleGlobalLoading(false)
	},
	{ deep: true }
)

watch(
	() => mapStore.clickResult,
	(val) => {
		if (!layoutStore.floatPanels.air_space) {
			layoutStore.toggleFloatPanel('air_space', true)
		}
	},
	{ deep: true }
)
</script>

<style lang="scss" scoped>
.list-base {
	li {
		span {
			width: 75px;
		}

		img {
			width: 75px;
			height: 77px;
		}
	}
}

.drop-down {
	display: block;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background: url('../../../assets/images/buttons/btn-dropdown.png') no-repeat;
	background-size: 10px 7px;
	background-position: center;
	transition: transform 0.3s ease;
	cursor: pointer;

	&.reverse {
		transform: rotateZ(180deg);
	}
}

.title-shade {
	position: relative;
	height: 32px;
	background: linear-gradient(to right, rgba(101, 131, 190, 1) 0%, rgba(101, 131, 190, 0) 100%);
	display: flex;
	align-items: center;
	padding: 0 16px;
	margin-bottom: 10px;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 4px;
		height: 32px;
		background: #c0d5ff;
	}

	span {
		text-shadow: 0px 4px 4px rgba(21, 41, 91, 0.45);
		margin-right: 10px;
	}

	.btn-selectall {
		display: block;
		width: 26px;
		height: 26px;
		background: url('../../../assets/images/buttons/btn-selectall.png');
		background-size: 100%;
		background-position: center 1px;
		cursor: pointer;
		filter: opacity(0.6);

		&.active {
			filter: opacity(1) drop-shadow(0 0 5px #379bff);
			transform: scale(1.1);
		}
	}

	.drop-down {
		margin-left: auto;
	}
}

.list-item {
	position: relative;
	height: 40px;
	padding: 0 15px;
	margin: 9px 0;
	display: flex;
	align-items: center;
	background: #4352704d;

	&.disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 1px;
		height: 40px;
		background: #808dc9;
	}

	&:last-child {
		margin-bottom: 15px;
	}

	img {
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}

	span {
		flex: 1;
	}

	i {
		display: block;
		width: 34px;
		height: 34px;
		margin-left: 5px;
		cursor: pointer;
		filter: grayscale(1);

		&.active {
			filter: grayscale(0);
		}
	}

	i:nth-child(3) {
		background: url('../../../assets/images/buttons/btn-check.png');
		background-size: cover;
	}

	i:nth-child(4) {
		background: url('../../../assets/images/buttons/btn-mesh.png');
		background-size: cover;
	}

	i:nth-child(5) {
		background: url('../../../assets/images/buttons/btn-delete.png');
		background-size: 40px 40px;
		background-position: center;
	}
}

.no-data {
	display: block;
	width: 100%;
	text-align: center;
	margin: 5px 0 10px;
	color: #999;
}

.feature-legend {
	position: absolute;
	bottom: var(--panel-gap);
	left: calc(var(--panel-left) - var(--panel-gap));
	width: 140px;
	padding: 10px 15px 15px;
	background-color: rgba(0, 17, 50, 0.5);
	border: 1px solid #055f8d;
	border-radius: 5px;

	.title-sub {
		margin-left: -7px;
	}

	ul {
		margin-top: 5px;
		li,
		div {
			display: flex;
			align-items: center;

			i {
				display: block;
				width: 10px;
				height: 10px;
				margin-right: 10px;
				opacity: 0.6;
			}
			span {
				font-size: 14px;
				color: #ccc;
			}
		}
		li {
			&:not(:last-child) {
				margin: 5px 0;
			}
			span.bold {
				font-size: 15px;
			}
		}
		div {
			padding-left: 15px;
		}
	}
}
</style>