| | |
| | | <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> |
| | |
| | | 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: '', |
| | |
| | | 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) |
| | | } |
| | | |
| | | // 关闭后重置 |
| | |
| | | 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 { |
| | |
| | | |
| | | defineExpose({ open }) |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .bodyBox { |
| | | display: flex; |
| | | .rightInfo { |
| | | width: 50%; |
| | | height: 500px; |
| | | } |
| | | .leftMap { |
| | | width: 50%; |
| | | height: 500px; |
| | | } |
| | | } |
| | | </style> |