From 7373f7d2f277caef075a77eab80fef44142d18ae Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Tue, 07 Jul 2026 11:13:38 +0800
Subject: [PATCH] feat:历史轨迹增加日期和地图上显示对应图标
---
applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue | 40 ++++++++++++++++++++++++++++++++++++----
1 files changed, 36 insertions(+), 4 deletions(-)
diff --git a/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue b/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue
index 146f0ab..1ea0cbe 100644
--- a/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue
+++ b/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue
@@ -17,6 +17,8 @@
:terrain="true"
:layer-mode="4"
:boundary="false"
+ :list="list"
+ @point-change="handlePointChange"
/>
</div>
<div class="right-container">
@@ -53,7 +55,7 @@
<div class="detail-title">轨迹点</div>
<div class="command-table-container">
<div class="command-table-content">
- <el-table class="command-table" :data="list" :row-class-name="getRowClassName">
+ <el-table ref="pointTableRef" class="command-table" :data="list" :row-class-name="getRowClassName">
<el-table-column type="index" width="60" label="序号" />
<el-table-column label="经纬度">
<template #default="{ row }">{{ row.longitude }},{{ row.latitude }}</template>
@@ -165,16 +167,36 @@
function handleClosed() {
formData.value = initForm()
list.value = []
+ selectedPointIndex.value = 0
viewer = null
geometricSource = null
droneLineEntity = null
startDroneEntity = null
}
-function getRowClassName({ row }) {
- console.log(row.isAlarm, 11111111111)
+// 当前选中的轨迹点索引（与地图时间轴联动）
+const selectedPointIndex = ref(0)
+const pointTableRef = ref(null)
- return row?.isAlarm === 1 ? 'alarm-row' : ''
+// 地图上点击轨迹点后，同步高亮表格对应行，并滚动到该行
+function handlePointChange({ index } = {}) {
+ if (typeof index !== 'number') return
+ selectedPointIndex.value = index
+ scrollToSelectedRow()
+}
+
+// 表格行较多时自动滚动到选中行
+async function scrollToSelectedRow() {
+ await nextTick()
+ const rowEl = pointTableRef.value?.$el?.querySelector('.selected-row')
+ rowEl?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+}
+
+function getRowClassName({ row, rowIndex }) {
+ const classNames = []
+ if (row?.isAlarm === 1) classNames.push('alarm-row')
+ if (rowIndex === selectedPointIndex.value) classNames.push('selected-row')
+ return classNames.join(' ')
}
let viewer, geometricSource, droneLineEntity, startDroneEntity
@@ -212,4 +234,14 @@
background-color: transparent !important;
}
}
+
+// 与地图时间轴联动的选中行高亮
+:deep(.selected-row) {
+ background: #14335f !important;
+
+ td {
+ background-color: transparent !important;
+ color: #4faaff !important;
+ }
+}
</style>
--
Gitblit v1.9.3