| | |
| | | :terrain="true" |
| | | :layer-mode="4" |
| | | :boundary="false" |
| | | :zoom-to-boundary="dialogMode === 'add'" |
| | | /> |
| | | </div> |
| | | <div class="right-container"> |
| | |
| | | <div class="val">{{ formData.sceneName }}</div> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <div class="label">防控负责人</div> |
| | | <div class="label">负责人</div> |
| | | <div class="val">{{ formData.defenseLeader }}</div> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <div class="label">防控负责人电话</div> |
| | | <div class="label">负责人电话</div> |
| | | <div class="val">{{ formData.leaderPhone }}</div> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | |
| | | <el-option v-for="item in sceneConfigList" :key="item.id" :label="item.sceneName" :value="item.id" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="防控负责人" prop="defenseLeader"> |
| | | <el-form-item label="负责人" prop="defenseLeader"> |
| | | <el-input |
| | | class="command-input" |
| | | v-model="formData.defenseLeader" |
| | |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | :disabled-date="disablePastDate" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="指挥点位置" prop="longitude"> |
| | | <div class="val">{{ formatLocation(formData) }}</div> |
| | | <el-input class="command-input" :model-value="commandPointText" disabled placeholder="请选择指挥点位置"> |
| | | <template #suffix> |
| | | <span class="suffix-action">地图选点</span> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="footer"> |
| | |
| | | import commandPost from '@/assets/images/dataCockpit/legend/command-post.png' |
| | | import { saveOperationLog } from '@ztzf/apis' |
| | | import { useRoute } from 'vue-router' |
| | | import { fwAreaDivideDetailApi, fwAreaDivideListApi } from '../partition/partitionApi' |
| | | import { |
| | | addBufferRadiusLabelEntity, |
| | | buildEllipsePositions, |
| | | } from '@/utils/cesium/shapeTools' |
| | | import { cartesian3Convert } from '@/utils/cesium/mapUtil' |
| | | import { AREA_TYPE_STYLE_MAP, BUFFER_LEVEL_STYLES, DEFAULT_AREA_STYLE } from '@ztzf/constants' |
| | | import { MapTooltip } from '@ztzf/utils' |
| | | |
| | | // 初始化表单数据 |
| | | const initForm = () => ({ |
| | |
| | | defenseSceneId: '', // 关联场景配置ID |
| | | }) |
| | | |
| | | const commandPointText = computed(() => { |
| | | // 你也可以改成 `${lng}, ${lat}` |
| | | if (!formData.value.longitude) { |
| | | return '' |
| | | } |
| | | return `${formData.value.longitude}, ${formData.value.latitude}` |
| | | }) |
| | | |
| | | const emit = defineEmits(['success']) |
| | | const formRef = ref(null) // 表单实例 |
| | | const formData = ref(initForm()) // 表单数据 |
| | | const visible = defineModel() // 弹框显隐 |
| | | const dialogMode = ref('add') // 弹框模式 |
| | | const dialogMode = ref() // 弹框模式 |
| | | const submitting = ref(false) // 提交中 |
| | | const readonly = computed(() => dialogMode.value === 'view') |
| | | const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' }) |
| | | const effectiveDateRange = ref([]) // 有效时间范围 |
| | | const sceneConfigList = ref([]) // 场景配置列表 |
| | | const areaList = ref([]) // ???? |
| | | const mapRef = ref(null) |
| | | const route = useRoute() |
| | | let viewer |
| | | let redPointEntity |
| | | let areaDisplaySource |
| | | let leftClickBound = false |
| | | let mouseMoveBound = false |
| | | let mapTooltip |
| | | let publicCesium |
| | | const tooltipEventKey = 'scene-manage-point-tip' |
| | | const disablePastDate = date => { |
| | | if (!date) return false |
| | | const todayStart = new Date() |
| | | todayStart.setHours(0, 0, 0, 0) |
| | | return date.getTime() < todayStart.getTime() |
| | | } |
| | | |
| | | // 表单验证规则 |
| | | const rules = { |
| | |
| | | } |
| | | |
| | | // 获取场景配置列表 |
| | | // ????? |
| | | function ensureAreaDisplaySource() { |
| | | if (!viewer) return null |
| | | if (!areaDisplaySource) { |
| | | areaDisplaySource = new Cesium.CustomDataSource('scene-manage-area-display') |
| | | viewer.dataSources.add(areaDisplaySource) |
| | | } |
| | | return areaDisplaySource |
| | | } |
| | | |
| | | function clearAreaDisplay() { |
| | | if (!areaDisplaySource) return |
| | | areaDisplaySource.entities.removeAll() |
| | | } |
| | | |
| | | function normalizeShapePoint(point) { |
| | | if (!point) return null |
| | | const lng = point?.lng ?? point?.longitude |
| | | const lat = point?.lat ?? point?.latitude |
| | | const height = Number.isFinite(Number(point?.height)) ? Number(point.height) : 0 |
| | | if (!Number.isFinite(Number(lng)) || !Number.isFinite(Number(lat))) return null |
| | | return { lng: Number(lng), lat: Number(lat), height } |
| | | } |
| | | |
| | | function buildShapePositions(points = []) { |
| | | const normalized = points.map(normalizeShapePoint).filter(Boolean) |
| | | return normalized.map(point => Cesium.Cartesian3.fromDegrees(point.lng, point.lat, point.height)) |
| | | } |
| | | |
| | | function resolveLngLatPoint(point) { |
| | | if (!point) return null |
| | | const lng = point?.lng ?? point?.longitude |
| | | const lat = point?.lat ?? point?.latitude |
| | | if (Number.isFinite(Number(lng)) && Number.isFinite(Number(lat))) { |
| | | return { |
| | | lng: Number(lng), |
| | | lat: Number(lat), |
| | | height: Number.isFinite(Number(point?.height)) ? Number(point.height) : 0, |
| | | } |
| | | } |
| | | if (!viewer || !Number.isFinite(point?.x) || !Number.isFinite(point?.y) || !Number.isFinite(point?.z)) { |
| | | return null |
| | | } |
| | | const val = cartesian3Convert(point, viewer) |
| | | return { |
| | | lng: val.longitude, |
| | | lat: val.latitude, |
| | | height: Number.isFinite(val.height) ? val.height : 0, |
| | | } |
| | | } |
| | | |
| | | function getShapeDisplayPoints(shape) { |
| | | if (Array.isArray(shape?.displayPoints) && shape.displayPoints.length) { |
| | | return shape.displayPoints |
| | | } |
| | | return shape?.points || [] |
| | | } |
| | | |
| | | function getAreaTypeStyle(areaType) { |
| | | return AREA_TYPE_STYLE_MAP?.[String(areaType)] || DEFAULT_AREA_STYLE |
| | | } |
| | | |
| | | function parseGeomJson(geomJson) { |
| | | if (!geomJson) return null |
| | | if (typeof geomJson === 'object') return geomJson |
| | | if (typeof geomJson !== 'string') return null |
| | | const trimmed = geomJson.trim() |
| | | if (!trimmed) return null |
| | | try { |
| | | return JSON.parse(trimmed) |
| | | } catch (error) { |
| | | return null |
| | | } |
| | | } |
| | | |
| | | function resolveAreaShapes(area) { |
| | | const extList = Array.isArray(area?.fwAreaDivideExtList) ? area.fwAreaDivideExtList : [] |
| | | if (!extList.length) return [] |
| | | return extList |
| | | .map((item, index) => { |
| | | const isShapePayload = item?.drawType || item?.points |
| | | if (isShapePayload) { |
| | | return { |
| | | id: item?.id || `shape_${Date.now()}_${index}_${Math.random().toString(16).slice(2, 6)}`, |
| | | drawType: item?.drawType ?? 'polygon', |
| | | areaType: item?.areaType ?? item?.areaTypeKey ?? '', |
| | | points: Array.isArray(item?.points) ? item.points : [], |
| | | displayPoints: Array.isArray(item?.displayPoints) ? item.displayPoints : null, |
| | | meta: item?.meta ?? null, |
| | | } |
| | | } |
| | | const parsed = parseGeomJson(item?.geomJson) |
| | | if (!parsed) return null |
| | | return { |
| | | id: parsed?.id || `shape_${Date.now()}_${index}_${Math.random().toString(16).slice(2, 6)}`, |
| | | drawType: parsed?.drawType ?? 'polygon', |
| | | areaType: item?.areaTypeKey ?? parsed?.areaType ?? '', |
| | | points: Array.isArray(parsed?.points) ? parsed.points : [], |
| | | displayPoints: Array.isArray(parsed?.displayPoints) ? parsed.displayPoints : null, |
| | | meta: parsed?.meta ?? null, |
| | | } |
| | | }) |
| | | .filter(Boolean) |
| | | } |
| | | |
| | | function pushRadiusBoundingPoints(positions, center, radius) { |
| | | if (!center || !Number.isFinite(Number(radius)) || radius <= 0) return |
| | | const resolved = resolveLngLatPoint(center) || {} |
| | | const lng = Number(resolved.lng ?? resolved.longitude) |
| | | const lat = Number(resolved.lat ?? resolved.latitude) |
| | | if (!Number.isFinite(lng) || !Number.isFinite(lat)) return |
| | | const baseLat = Cesium.Math.toRadians(lat) |
| | | const earthRadius = Cesium.Ellipsoid.WGS84.maximumRadius |
| | | const deltaLat = radius / earthRadius |
| | | const deltaLng = radius / (earthRadius * Math.max(Math.cos(baseLat), 0.000001)) |
| | | const points = [ |
| | | { lng: Cesium.Math.toDegrees(Cesium.Math.toRadians(lng) + deltaLng), lat }, |
| | | { lng: Cesium.Math.toDegrees(Cesium.Math.toRadians(lng) - deltaLng), lat }, |
| | | { lng, lat: Cesium.Math.toDegrees(baseLat + deltaLat) }, |
| | | { lng, lat: Cesium.Math.toDegrees(baseLat - deltaLat) }, |
| | | ] |
| | | points.forEach(point => { |
| | | positions.push(Cesium.Cartesian3.fromDegrees(point.lng, point.lat, resolved.height || 0)) |
| | | }) |
| | | } |
| | | |
| | | function collectSceneAreaPositions() { |
| | | const positions = [] |
| | | if (!viewer || !areaList.value.length) return positions |
| | | areaList.value.forEach(area => { |
| | | const shapes = resolveAreaShapes(area) |
| | | shapes.forEach(shape => { |
| | | const points = getShapeDisplayPoints(shape) |
| | | if (Array.isArray(points) && points.length) { |
| | | points.forEach(point => { |
| | | const resolved = resolveLngLatPoint(point) |
| | | const normalized = normalizeShapePoint(resolved) |
| | | if (!normalized) return |
| | | positions.push(Cesium.Cartesian3.fromDegrees(normalized.lng, normalized.lat, normalized.height)) |
| | | }) |
| | | } |
| | | if (shape?.drawType === 'buffer' && shape?.meta?.center && Array.isArray(shape?.meta?.bufferRadii)) { |
| | | const maxRadius = Math.max(...shape.meta.bufferRadii.filter(item => Number.isFinite(item))) |
| | | pushRadiusBoundingPoints(positions, shape.meta.center, maxRadius) |
| | | } |
| | | if (shape?.drawType === 'ellipse' && shape?.meta?.center) { |
| | | const major = Number(shape?.meta?.semiMajor) |
| | | const minor = Number(shape?.meta?.semiMinor) |
| | | const radius = Number.isFinite(major) && Number.isFinite(minor) ? Math.max(major, minor) : null |
| | | pushRadiusBoundingPoints(positions, shape.meta.center, radius) |
| | | } |
| | | }) |
| | | }) |
| | | return positions |
| | | } |
| | | |
| | | function fitViewToSceneAreas() { |
| | | if (!viewer || !areaList.value.length) return |
| | | const positions = collectSceneAreaPositions() |
| | | if (positions.length < 2) return |
| | | const boundingSphere = Cesium.BoundingSphere.fromPoints(positions) |
| | | const range = Math.max(boundingSphere.radius * 2.4, 200) |
| | | viewer.camera.flyToBoundingSphere(boundingSphere, { |
| | | duration: 0, |
| | | offset: new Cesium.HeadingPitchRange(viewer.camera.heading, Cesium.Math.toRadians(-90), range), |
| | | }) |
| | | } |
| | | |
| | | function renderSceneAreas() { |
| | | if (!visible.value) { |
| | | clearAreaDisplay() |
| | | return |
| | | } |
| | | if (!viewer) initMap() |
| | | const dataSource = ensureAreaDisplaySource() |
| | | if (!dataSource) return |
| | | dataSource.entities.removeAll() |
| | | areaList.value.forEach(area => { |
| | | const shapes = resolveAreaShapes(area) |
| | | shapes.forEach(shape => { |
| | | if (shape.drawType === 'buffer' && shape.meta?.bufferRadii?.length && shape.meta?.center) { |
| | | const center = shape.meta.center |
| | | const centerCartesian = Cesium.Cartesian3.fromDegrees(center.lng, center.lat, center.height || 0) |
| | | const radii = shape.meta.bufferRadii |
| | | .map(radius => Number(radius)) |
| | | .filter(radius => Number.isFinite(radius) && radius > 0) |
| | | radii.forEach((radius, index) => { |
| | | const style = BUFFER_LEVEL_STYLES[index] || BUFFER_LEVEL_STYLES[BUFFER_LEVEL_STYLES.length - 1] |
| | | dataSource.entities.add({ |
| | | name: 'scene-manage-area-display', |
| | | customData: { drawType: shape.drawType, level: index + 1 }, |
| | | position: centerCartesian, |
| | | ellipse: { |
| | | semiMajorAxis: radius, |
| | | semiMinorAxis: radius, |
| | | material: style.fill, |
| | | outline: false, |
| | | heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, |
| | | }, |
| | | }) |
| | | const positions = buildEllipsePositions(centerCartesian, radius, radius) |
| | | dataSource.entities.add({ |
| | | name: 'scene-manage-area-display', |
| | | customData: { drawType: shape.drawType, level: index + 1, outline: true }, |
| | | polyline: { |
| | | positions: positions.length ? [...positions, positions[0]] : positions, |
| | | clampToGround: true, |
| | | width: 2, |
| | | material: style.outline, |
| | | }, |
| | | }) |
| | | addBufferRadiusLabelEntity(dataSource, centerCartesian, radius, { |
| | | name: 'scene-manage-area-display', |
| | | customData: { drawType: 'buffer', label: 'radius' }, |
| | | }) |
| | | }) |
| | | return |
| | | } |
| | | const positions = buildShapePositions(getShapeDisplayPoints(shape)) |
| | | if (positions.length < 3) return |
| | | const style = getAreaTypeStyle(shape.areaType) |
| | | dataSource.entities.add({ |
| | | name: 'scene-manage-area-display', |
| | | customData: { drawType: shape.drawType }, |
| | | polygon: { |
| | | hierarchy: new Cesium.PolygonHierarchy(positions), |
| | | material: style.fill, |
| | | outline: false, |
| | | heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, |
| | | }, |
| | | polyline: { |
| | | positions: positions.length ? [...positions, positions[0]] : positions, |
| | | clampToGround: true, |
| | | width: 2, |
| | | material: style.outline, |
| | | }, |
| | | }) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | async function ensureAreaExtList(rows) { |
| | | const missingRows = rows.filter(row => row?.id && !Array.isArray(row?.fwAreaDivideExtList)) |
| | | if (!missingRows.length) return rows |
| | | const detailList = await Promise.all( |
| | | missingRows.map(row => |
| | | fwAreaDivideDetailApi({ id: row.id }) |
| | | .then(res => res?.data?.data) |
| | | .catch(() => null) |
| | | ) |
| | | ) |
| | | const detailMap = new Map(detailList.filter(Boolean).map(item => [String(item.id), item])) |
| | | if (!detailMap.size) return rows |
| | | return rows.map(item => { |
| | | const detail = detailMap.get(String(item.id)) |
| | | return detail ? { ...item, ...detail } : item |
| | | }) |
| | | } |
| | | |
| | | // ?????????? |
| | | async function loadAreaList(sceneId) { |
| | | if (!sceneId) { |
| | | areaList.value = [] |
| | | clearAreaDisplay() |
| | | return |
| | | } |
| | | const res = await fwAreaDivideListApi({ sceneId }) |
| | | const list = res?.data?.data ?? [] |
| | | areaList.value = await ensureAreaExtList(list) |
| | | renderSceneAreas() |
| | | await nextTick() |
| | | fitViewToSceneAreas() |
| | | } |
| | | |
| | | async function getSceneConfigList() { |
| | | if (sceneConfigList.value.length) return |
| | | const res = await fwDefenseSceneListApi({unbound: 1}) |
| | | const params = { unbound: 1 } |
| | | if (dialogMode.value !== 'add' && formData.value?.id) { |
| | | params.sceneManageId = formData.value.id |
| | | } |
| | | const res = await fwDefenseSceneListApi(params) |
| | | sceneConfigList.value = res?.data?.data ?? [] |
| | | } |
| | | |
| | |
| | | |
| | | // 初始化地图实例 |
| | | function initMap() { |
| | | if (viewer) return |
| | | const map = mapRef.value?.getMap() |
| | | if (!map?.viewer) return |
| | | viewer = map.viewer |
| | | viewer ||= map.viewer |
| | | publicCesium ||= map.publicCesium |
| | | if (!readonly.value && !leftClickBound) { |
| | | map.publicCesium?.addLeftClickEvent?.(null, LeftClickEvent) |
| | | leftClickBound = true |
| | | } |
| | | if (!readonly.value) ensurePointTooltip() |
| | | } |
| | | |
| | | function ensurePointTooltip() { |
| | | if (!viewer || !publicCesium || mouseMoveBound) return |
| | | mapTooltip ||= new MapTooltip(viewer, { offset: { x: 28, y: 24 } }) |
| | | publicCesium.addMouseHandler?.( |
| | | null, |
| | | movement => { |
| | | if (!visible.value || readonly.value) return |
| | | mapTooltip?.show('点击地图选择指挥点位置', movement.endPosition) |
| | | }, |
| | | tooltipEventKey |
| | | ) |
| | | mouseMoveBound = true |
| | | } |
| | | |
| | | function clearPointTooltip() { |
| | | mapTooltip?.hide() |
| | | if (publicCesium && mouseMoveBound) { |
| | | publicCesium.removeMouseHandler?.(tooltipEventKey) |
| | | mouseMoveBound = false |
| | | } |
| | | } |
| | | |
| | | // 地图左键点击事件 |
| | | function LeftClickEvent(click) { |
| | | async function LeftClickEvent(click) { |
| | | const pos = click.position |
| | | // 优先使用 pickPosition 获取贴地坐标(包含地形高度) |
| | | let cartesian3 = viewer.scene.pickPosition(pos) |
| | |
| | | redPointEntity = null |
| | | await nextTick() |
| | | initMap() |
| | | if (dialogMode.value === 'view') { |
| | | clearPointTooltip() |
| | | } |
| | | await getSceneConfigList() |
| | | if (dialogMode.value !== 'add') { |
| | | if (dialogMode.value === 'add') { |
| | | mapRef.value?.zoomToAdminBoundary?.() |
| | | } else { |
| | | await loadDetail() |
| | | } |
| | | await nextTick() |
| | | setMapPoint(formData.value.longitude, formData.value.latitude) |
| | | await loadAreaList(formData.value.defenseSceneId) |
| | | fitViewToSceneAreas() |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getSceneConfigList() |
| | | }) |
| | | onMounted(() => {}) |
| | | |
| | | watch( |
| | | () => formData.value.defenseSceneId, |
| | | sceneId => { |
| | | if (!visible.value) return |
| | | loadAreaList(sceneId) |
| | | } |
| | | ) |
| | | |
| | | watch( |
| | | () => visible.value, |
| | | val => { |
| | | if (!val) { |
| | | clearAreaDisplay() |
| | | clearPointTooltip() |
| | | } |
| | | } |
| | | ) |
| | | |
| | | defineExpose({ |
| | | open, |