吉安感知网项目-前端
shuishen
2026-01-30 787efaca57a4de18af0eb931d4cd987d67ede79c
feat:首页去除防区相关逻辑处理
2 files modified
130 ■■■■■ changed files
applications/drone-command/src/components/map-container/device-map-container.vue 122 ●●●●● patch | view | raw | blame | history
applications/drone-command/src/views/dataCockpit/components/LegendBar.vue 8 ●●●●● patch | view | raw | blame | history
applications/drone-command/src/components/map-container/device-map-container.vue
@@ -47,10 +47,8 @@
<script setup>
import * as Cesium from 'cesium'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
import { geomAnalysis } from '@ztzf/utils'
import { buildEllipsePositions } from '@/utils/cesium/shapeTools'
import { AREA_TYPE_STYLE_MAP, BUFFER_LEVEL_STYLES, DEFAULT_AREA_STYLE } from '@ztzf/constants'
import { fwDefenseZonePageApi } from '@/views/areaManage/defenseZone/defenseZoneApi'
import { fwAreaDivideListApi } from '@/views/areaManage/partition/partitionApi'
import { fwDefenseSceneListApi } from '@/views/areaManage/sceneConfig/sceneConfigApi'
import { cockpitAggregationApi } from '@/api/dataCockpit'
@@ -101,7 +99,6 @@
})
const emit = defineEmits(['droneSignal', 'droneCounter', 'droneFavorite'])
const DEFAULT_ZONE_PAGE_SIZE = 999
const mapRef = ref(null)
let viewer = null
@@ -112,8 +109,6 @@
let deviceBillboardCollection = null
let deviceRingOutlinePrimitives = []
let deviceRingFillPrimitives = []
let defenseZonePrimitive = null
let defenseZoneOutlinePrimitive = null
let partitionFillPrimitives = []
let partitionOutlinePrimitives = []
let aggregationSource = null
@@ -284,8 +279,6 @@
    if (!viewer) return
    ensureCockpitPrimitiveLayer()
    cockpitPrimitiveLayer.removeAll(false)
    if (defenseZonePrimitive) cockpitPrimitiveLayer.add(defenseZonePrimitive)
    if (defenseZoneOutlinePrimitive) cockpitPrimitiveLayer.add(defenseZoneOutlinePrimitive)
    if (partitionFillPrimitives.length) {
        partitionFillPrimitives.forEach(primitive => cockpitPrimitiveLayer.add(primitive))
    }
@@ -331,17 +324,6 @@
    }
}
const clearDefenseZoneEntities = () => {
    if (!viewer) return
    if (defenseZonePrimitive) {
        removeCockpitPrimitive(defenseZonePrimitive)
        defenseZonePrimitive = null
    }
    if (defenseZoneOutlinePrimitive) {
        removeCockpitPrimitive(defenseZoneOutlinePrimitive)
        defenseZoneOutlinePrimitive = null
    }
}
const clearPartitionEntities = () => {
    if (!viewer) return
@@ -386,8 +368,6 @@
const setDetailVisibility = visible => {
    detailVisible.value = visible
    if (defenseZonePrimitive) defenseZonePrimitive.show = visible
    if (defenseZoneOutlinePrimitive) defenseZoneOutlinePrimitive.show = visible
    if (partitionFillPrimitives.length) {
        partitionFillPrimitives.forEach(primitive => {
            primitive.show = visible
@@ -795,18 +775,6 @@
    reorderCockpitPrimitives()
}
const getDefenseZonePositions = geom => {
    const points = geomAnalysis(geom)
    if (points.length < 3) return []
    const first = points[0]
    const last = points[points.length - 1]
    const list =
        first && last && first.longitude === last.longitude && first.latitude === last.latitude
            ? points.slice(0, -1)
            : points
    return list.map(item => Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude))
}
const elevatePositions = async (positions, height = POLYGON_HEIGHT_M) => {
    if (!Array.isArray(positions) || !positions.length) return []
    if (!viewer) return positions
@@ -827,73 +795,6 @@
const getAreaTypeStyle = areaType => {
    return AREA_TYPE_STYLE_MAP?.[String(areaType)] || DEFAULT_AREA_STYLE
}
const buildZonePrimitives = async (zones, lineColor, fillColor1, fillColor2) => {
    if (!viewer) return { primitive: null, outlinePrimitive: null }
    const polygonInstances = []
    const lineInstances = []
    const positionGroups = []
    const texturedVertexFormat = getTexturedVertexFormat()
        ; (zones || []).forEach(zone => {
            if (!zone?.geom) return
            const positions = getDefenseZonePositions(zone.geom)
            if (!positions.length) return
            positionGroups.push(positions)
        })
    if (!positionGroups.length) return { primitive: null, outlinePrimitive: null }
    const elevatedGroups = await Promise.all(positionGroups.map(group => elevatePositions(group)))
    elevatedGroups.forEach(elevatedPositions => {
        if (!elevatedPositions.length) return
        const polygon = new Cesium.PolygonGeometry({
            polygonHierarchy: new Cesium.PolygonHierarchy(elevatedPositions),
            perPositionHeight: true,
            vertexFormat: texturedVertexFormat,
        })
        polygonInstances.push(
            new Cesium.GeometryInstance({
                geometry: polygon,
            })
        )
        const linePositions =
            elevatedPositions.length > 1 ? [...elevatedPositions, elevatedPositions[0]] : elevatedPositions
        lineInstances.push(
            new Cesium.GeometryInstance({
                geometry: new Cesium.PolylineGeometry({
                    positions: linePositions,
                    width: 2,
                }),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                        Cesium.Color.fromCssColorString(lineColor)
                    ),
                },
            })
        )
    })
    let primitive = null
    if (polygonInstances.length) {
        const baseColor1 = Cesium.Color.fromCssColorString(fillColor1)
        const baseColor2 = Cesium.Color.fromCssColorString(fillColor2)
        const material = createRadialGradientMaterial(baseColor1.withAlpha(0.64), baseColor2.withAlpha(0.64))
        primitive = new Cesium.Primitive({
            geometryInstances: polygonInstances,
            appearance: new Cesium.MaterialAppearance({
                material,
                translucent: true,
            }),
        })
        addCockpitPrimitive(primitive)
    }
    let outlinePrimitive = null
    if (lineInstances.length) {
        outlinePrimitive = new Cesium.Primitive({
            geometryInstances: lineInstances,
            appearance: new Cesium.PolylineColorAppearance(),
        })
        addCockpitPrimitive(outlinePrimitive)
    }
    return { primitive, outlinePrimitive }
}
const buildPartitionPrimitives = async shapes => {
@@ -1062,17 +963,6 @@
    return shapes
}
const renderDefenseZones = async zones => {
    if (!viewer) return
    clearDefenseZoneEntities()
    const result = await buildZonePrimitives(zones, '#72F3FF', '#72F3FF', '#0A7C88')
    defenseZonePrimitive = result.primitive
    defenseZoneOutlinePrimitive = result.outlinePrimitive
    if (defenseZonePrimitive) defenseZonePrimitive.show = detailVisible.value
    if (defenseZoneOutlinePrimitive) defenseZoneOutlinePrimitive.show = detailVisible.value
    reorderCockpitPrimitives()
}
const renderPartitions = async zones => {
    if (!viewer) return
    clearPartitionEntities()
@@ -1091,16 +981,6 @@
        })
    }
    reorderCockpitPrimitives()
}
const loadDefenseZones = async () => {
    if (!viewer) return
    try {
        const res = await fwDefenseZonePageApi({ current: 1, size: DEFAULT_ZONE_PAGE_SIZE })
        await renderDefenseZones(res?.data?.data?.records ?? [])
    } catch (error) {
        await renderDefenseZones([])
    }
}
const loadPartitions = async () => {
@@ -1347,7 +1227,6 @@
    const stage = getStageByHeight(height)
    updateStageDisplay(stage)
    renderDeviceEntities(props.onlineDevices)
    loadDefenseZones()
    loadPartitions()
    loadAggregation()
    loadCommandPosts()
@@ -1375,7 +1254,6 @@
onBeforeUnmount(() => {
    document.removeEventListener('click', handleClickOutside)
    clearDeviceEntities()
    clearDefenseZoneEntities()
    clearPartitionEntities()
    clearAggregationEntities()
    clearCommandPostEntities()
applications/drone-command/src/views/dataCockpit/components/LegendBar.vue
@@ -12,10 +12,6 @@
    <div class="legend-bar">
        <div class="legend-title" data-text="图例">图例</div>
        <div class="legend-item">
            <span class="legend-color defense"></span>
            <span class="legend-text" data-text="防区">防区</span>
        </div>
        <div class="legend-item">
            <span class="legend-color partition"></span>
            <span class="legend-text" data-text="区域">区域</span>
        </div>
@@ -84,10 +80,6 @@
    border-radius: 0;
}
.legend-color.defense {
    background: radial-gradient(50% 50% at 50% 50%, rgba(114, 243, 255, 0.45) 0%, rgba(10, 124, 136, 0.55) 100%);
    border: 1px solid rgba(114, 243, 255, 0.85);
}
.legend-color.partition {
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 215, 114, 0.5) 0%, rgba(168, 107, 0, 0.6) 100%);