吉安感知网项目-前端
罗广辉
2026-01-12 6c415c477fa47d1dafccfd8a6a24364fc0d50b25
feat: 完善告警记录
2 files modified
89 ■■■■ changed files
applications/drone-command/src/utils/cesium/publicCesium.js 4 ●●●● patch | view | raw | blame | history
applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue 85 ●●●● patch | view | raw | blame | history
applications/drone-command/src/utils/cesium/publicCesium.js
@@ -159,7 +159,7 @@
                        terrainLoadCallback?.()
                    })
                } else {
                    // 正则:第一位非0,第二位任意数字,后10位都是0
                    /*// 正则:第一位非0,第二位任意数字,后10位都是0
                    const re = /^[1-9]\d0{10}$/
                    let result = null
@@ -186,7 +186,7 @@
                    }).then(terrainProvider => {
                        this.viewer.terrainProvider = terrainProvider
                        terrainLoadCallback?.()
                    })
                    })*/
                }
            } catch (error) {
                console.error('地形加载失败:', error)
applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue
@@ -1,19 +1,24 @@
<template>
    <el-dialog v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close>
        <div>
            <div>无人机名称:{{ formData.droneName }}</div>
            <div>序列号: {{ formData.serialNo }}</div>
            <div>告警时间: {{ formData.alarmTime }}</div>
            <div>触发原因: {{ formData.triggerType }}</div>
            <div>停留时长: {{ formData.stayDuration }}</div>
        <div class="bodyBox">
            <div class="leftMap ztzf-cesium" id="leftMapContainer"></div>
            <div class="rightInfo">
                <div>
                    <div>无人机名称:{{ formData.droneName }}</div>
                    <div>序列号: {{ formData.serialNo }}</div>
                    <div>告警时间: {{ formData.alarmTime }}</div>
                    <div>触发原因: {{ formData.triggerType }}</div>
                    <div>停留时长: {{ formData.stayDuration }}</div>
                </div>
                <el-table :data="list">
                    <el-table-column type="index" width="60" label="序号" />
                    <el-table-column label="经纬度">
                        <template #default="{ row }">{{ row.longitude }},{{ row.latitude }}</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="时间" />
                </el-table>
            </div>
        </div>
        <el-table :data="list">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="areaCode" label="areaCode" />
            <el-table-column prop="createTime" label="createTime" />
            <el-table-column prop="latitude" label="latitude" />
            <el-table-column prop="longitude" label="longitude" />
        </el-table>
        <template #footer>
            <el-button @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
        </template>
@@ -24,6 +29,9 @@
import { computed, ref } from 'vue'
import { fwDroneFlightRecordDetailApi } from '@/views/recordManage/historyTracks/fwDroneFlightRecord'
import { fwDroneFlightRecordDetailPageApi } from '@/views/recordManage/historyTracks/flyTrajectory'
import { PublicCesium } from '@/utils/cesium/publicCesium'
import * as Cesium from 'cesium'
import { flyVisual } from '@/utils/cesium/mapUtil'
const initForm = () => ({
    droneName: '',
@@ -59,7 +67,28 @@
    const res = await fwDroneFlightRecordDetailApi({ id: formData.value.id })
    const res1 = await fwDroneFlightRecordDetailPageApi({ flightRecordId: formData.value.id })
    list.value = res1.data.data.records ?? []
    drawFlightPath()
    formData.value = res?.data?.data ?? {}
}
// 角度转c3
function degreesToC3({ longitude, latitude, height = 0 }) {
    return Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
}
// 渲染航线
function drawFlightPath() {
    const positions = list.value.map(p => degreesToC3(p))
    droneLineEntity && geometricSource.entities.remove(droneLineEntity)
    const color = Cesium.Color.fromCssColorString('#00D690')
    droneLineEntity = geometricSource.entities.add({
        polyline: {
            positions: positions,
            width: 3,
            material: new Cesium.PolylineOutlineMaterialProperty({ color }),
            clampToGround: false,
        },
    })
    viewer.flyTo(droneLineEntity)
}
// 关闭后重置
@@ -67,10 +96,27 @@
    formData.value = initForm()
}
let viewer, geometricSource, droneLineEntity
function initMap() {
    const publicCesiumInstance = new PublicCesium({
        dom: 'leftMapContainer',
        flatMode: false,
        terrain: true,
        layerMode: 4,
        boundary: false,
    })
    viewer = publicCesiumInstance.getViewer()
    geometricSource = new Cesium.CustomDataSource('geometricSource')
    viewer.dataSources.add(geometricSource)
}
// 打开弹框
async function open({ mode, row } = {}) {
    dialogMode.value = mode || 'add'
    visible.value = true
    await nextTick(() => {
        initMap()
    })
    if (dialogMode.value === 'add') {
        formData.value = initForm()
    } else {
@@ -81,3 +127,16 @@
defineExpose({ open })
</script>
<style scoped lang="scss">
.bodyBox {
    display: flex;
    .rightInfo {
        width: 50%;
        height: 500px;
    }
    .leftMap {
        width: 50%;
        height: 500px;
    }
}
</style>