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

<template>
	<div class="float-panel" :class="{ 'move-tool-spread': layoutStore.toolSpread === 'ky' }">
		<div class="panel-title">空域划设</div>

		<el-form
			ref="formRef"
			class="p-form mt-7"
			:model="form"
			:rules="rules"
			label-position="left"
			size="large"
			hide-required-asterisk>
			<el-form-item label="空域名称" prop="name">
				<el-input v-model="form.name" clearable></el-input>
			</el-form-item>
			<el-form-item label="高度" prop="height">
				<el-input v-model="form.height" type="number">
					<template #suffix>
						<span>米</span>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="绘制">
				<el-button class="btn-secondary" @click="handleDraw">绘制</el-button>
			</el-form-item>
		</el-form>

		<div class="text-center">
			<el-button class="btn-main" :disabled="!hasDraw" @click="handleCalc">开始计算</el-button>
			<el-button class="btn-main" @click="handleClear">清空</el-button>
		</div>
	</div>
</template>

<script setup>
import useLayoutStore from '@/store/layout'
import { useMapStore } from '@/store/map'
import { DrawPolygon, InspectCube, clearDraw, showShapes } from '@/utils/map/addLayer'
import { wait } from '@/utils/tools'
import { ref, watch, onBeforeUnmount } from 'vue'
import { hexToRgb } from '@/utils/tools'

const mapStore = useMapStore()

const layoutStore = ref(useLayoutStore())

const form = ref({
	name: '',
	drawType: 'polygon',
	height: '100',
})

const rules = {
	name: [{ required: true, message: '请输入空域名称', trigger: 'none' }],
}

const hasDraw = ref(false)

let drawGeometry

watch(
	() => mapStore.draw_geometry,
	(val) => {
		console.log('draw_geometry:', val)
		drawGeometry = val
		hasDraw.value = true
	},
	{ deep: true }
)

watch(
	() => mapStore.cubeResult,
	(val) => {
		console.log('cubeResult', val)
		if (val.data == 'error') {
			ElMessage({ type: 'error', message: '核查结果为空' })
		}
		layoutStore.value.toggleGlobalLoading(false)
	},
	{ deep: true }
)

async function handleDraw() {
	handleInspect(false)
	if (hasDraw.value) {
		showShapes({
			id: 'kyhs_drew_non_editable',
			data: null,
		})
		await wait(500)
	}
	// 处理绘制
	DrawPolygon({ hasZ: true })
}

function getShapeInfo() {
	return {
		height: +form.value.height,
		rings: drawGeometry.rings,
		level: '15',
	}
}

function handleInspect(show = true) {
	const shape = show ? getShapeInfo() : {}
	InspectCube({
		type: 'polygon',
		id: 'inspect_kyhs',
		show,
		shape,
	})
}

const formRef = ref(null)

function handleCalc() {
	formRef.value.validate((valid) => {
		if (valid) {
			layoutStore.value.toggleGlobalLoading('正在分析...')
			clearDraw()
			showShapes({
				id: 'kyhs_drew_non_editable',
				data: [
					{
						type: 'polygon',
						shape: {
							...getShapeInfo(),
							color: hexToRgb('#00FF00', 0.5),
						},
					},
				],
			})
			handleInspect(true)
		}
	})
}

function handleClear() {
	clearDraw()
	handleInspect(false)
	showShapes({
		id: 'kyhs_drew_non_editable',
		data: null,
	})
}

onBeforeUnmount(() => {
	handleClear()
})
</script>

<style lang="scss" scoped>
:deep(.p-form) {
	.el-form-item__label {
		width: 100px;
	}
}
</style>