feat: 完善告警记录

罗广辉

2026-01-12 6c415c477fa47d1dafccfd8a6a24364fc0d50b25

 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>