From 4b752da779a99914b3d79a360a698d55d2f90a49 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Wed, 22 Jul 2026 17:38:56 +0800
Subject: [PATCH] feat:优化历史轨迹
---
applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue | 27 ++++++++++++++-------------
applications/drone-command/src/components/map-container/common-cesium-map.vue | 18 ++++++++++++++++--
2 files changed, 30 insertions(+), 15 deletions(-)
diff --git a/applications/drone-command/src/components/map-container/common-cesium-map.vue b/applications/drone-command/src/components/map-container/common-cesium-map.vue
index 8db62cb..723a663 100644
--- a/applications/drone-command/src/components/map-container/common-cesium-map.vue
+++ b/applications/drone-command/src/components/map-container/common-cesium-map.vue
@@ -2,6 +2,9 @@
<div :id="mapId" class="common-cesium-map" @contextmenu.prevent>
<template v-if="props.list && props.list.length">
<div class="card">
+ <div class="timeline-prefix">
+ <slot name="timeline-prefix"></slot>
+ </div>
<div class="card-content">
<div class="card-item" v-for="(item, index) in props.list" @click="clickWeekTime(item, index)">
<div class="time-point">
@@ -326,6 +329,17 @@
color: #d5d5d5;
font-size: 14px;
+ .timeline-prefix {
+ position: absolute;
+ left: 7.5%;
+ top: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 2;
+ transform: translate(-50%, -50%);
+ }
+
.card-content {
display: flex;
justify-content: center;
@@ -404,10 +418,10 @@
.time-line {
position: absolute;
// top: 35px;
- width: 100%;
+ width: 70%;
// position: fixed;
+ left: 15%;
bottom: 36px;
- width: 100%;
border: 1px solid rgba(237, 237, 237, 0.6);
z-index: 0;
}
diff --git a/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue b/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue
index d682c78..7b169b6 100644
--- a/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue
+++ b/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue
@@ -19,7 +19,14 @@
:boundary="false"
:list="list"
@point-change="handlePointChange"
- />
+ >
+ <template #timeline-prefix>
+ <el-icon class="track-play-btn" :size="30" @click.stop="handlePlayClick">
+ <VideoPause v-if="isPlaying" />
+ <VideoPlay v-else />
+ </el-icon>
+ </template>
+ </CommonCesiumMap>
</div>
<div class="right-container">
<div class="header">
@@ -52,13 +59,7 @@
<div class="val">{{ formData.stayDuration }}</div>
</el-col>
</el-row>
- <div class="detail-title" style="display: flex; align-items: center">
- 轨迹点
- <el-icon class="track-play-btn" :size="26" @click.stop="handlePlayClick">
- <VideoPause v-if="isPlaying" />
- <VideoPlay v-else />
- </el-icon>
- </div>
+ <div class="detail-title">轨迹点</div>
<div class="command-table-container">
<div class="command-table-content">
<el-table ref="pointTableRef" class="command-table" :data="list" :row-class-name="getRowClassName">
@@ -202,13 +203,13 @@
// 播放下一个轨迹点
function playNextPoint() {
- if (!list.value.length) {
+ if (!list.value.length || playIndex >= list.value.length) {
stopTrackPlay()
return
}
- if (playIndex >= list.value.length) playIndex = 0
mapRef.value?.clickWeekTime?.(list.value[playIndex], playIndex)
playIndex += 1
+ if (playIndex >= list.value.length) stopTrackPlay()
}
// 切换轨迹播放状态
@@ -218,10 +219,10 @@
return
}
if (!list.value.length) return
- playIndex = selectedPointIndex.value || 0
+ playIndex = 0
isPlaying.value = true
playNextPoint()
- playTimer = setInterval(playNextPoint, PLAY_INTERVAL)
+ if (isPlaying.value) playTimer = setInterval(playNextPoint, PLAY_INTERVAL)
}
// 地图上点击轨迹点后，同步高亮表格对应行，并滚动到该行
@@ -298,7 +299,7 @@
}
.track-play-btn {
- margin-left: 6px;
+ color: #ffffff;
cursor: pointer;
}
</style>
--
Gitblit v1.9.3