From 1d552a3bad95caae4af15322df28e6240b797693 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 13 Aug 2026 15:32:06 +0800
Subject: [PATCH] feat: app视频封面图
---
applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue | 91 +++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 86 insertions(+), 5 deletions(-)
diff --git a/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue b/applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue
index 1ea0cbe..c9a7ef1 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">
@@ -66,7 +73,9 @@
</div>
</div>
<div class="footer">
- <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
+ <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel">
+ {{ dialogReadonly ? '关闭' : '取消' }}
+ </el-button>
</div>
</div>
</div>
@@ -74,9 +83,9 @@
</template>
<script setup>
-import { Close } from '@element-plus/icons-vue'
+import { Close, VideoPause, VideoPlay } from '@element-plus/icons-vue'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
import { fwDroneFlightRecordDetailApi } from '@/views/recordManage/historyTracks/fwDroneFlightRecord'
import { fwDroneFlightRecordDetailPageApi } from '@/views/recordManage/historyTracks/flyTrajectory'
@@ -165,6 +174,7 @@
// 关闭后重置
function handleClosed() {
+ stopTrackPlay()
formData.value = initForm()
list.value = []
selectedPointIndex.value = 0
@@ -177,6 +187,54 @@
// 当前选中的轨迹点索引（与地图时间轴联动）
const selectedPointIndex = ref(0)
const pointTableRef = ref(null)
+const isPlaying = ref(false)
+const PLAY_INTERVAL = 1000
+let playTimer = null
+let playIndex = 0
+
+// 停止轨迹播放
+function stopTrackPlay() {
+ if (playTimer) {
+ clearTimeout(playTimer)
+ playTimer = null
+ }
+ isPlaying.value = false
+}
+
+// 播放下一个轨迹点
+function playNextPoint() {
+ if (!list.value.length || playIndex >= list.value.length) {
+ stopTrackPlay()
+ return
+ }
+ mapRef.value?.clickWeekTime?.(list.value[playIndex], playIndex, {
+ animate: true,
+ duration: PLAY_INTERVAL,
+ })
+ playIndex += 1
+ playTimer = setTimeout(() => {
+ playTimer = null
+ if (playIndex >= list.value.length) {
+ stopTrackPlay()
+ return
+ }
+ playNextPoint()
+ }, PLAY_INTERVAL)
+}
+
+// 切换轨迹播放状态
+function handlePlayClick() {
+ if (isPlaying.value) {
+ stopTrackPlay()
+ return
+ }
+ if (!list.value.length) return
+ mapRef.value?.clickWeekTime?.(list.value[0], 0)
+ if (list.value.length === 1) return
+ playIndex = 1
+ isPlaying.value = true
+ playNextPoint()
+}
// 地图上点击轨迹点后，同步高亮表格对应行，并滚动到该行
function handlePointChange({ index } = {}) {
@@ -211,6 +269,7 @@
// 打开弹框
async function open({ mode, row } = {}) {
+ stopTrackPlay()
dialogMode.value = mode || 'add'
visible.value = true
await nextTick()
@@ -224,11 +283,28 @@
}
defineExpose({ open })
+
+// 卸载时清理播放定时器
+onBeforeUnmount(() => {
+ stopTrackPlay()
+})
</script>
<style scoped lang="scss">
+.left-container {
+ min-width: 0;
+ overflow: hidden;
+}
+
+.right-container {
+ position: relative;
+ flex-shrink: 0;
+ z-index: 1;
+ background: #1a1a2a;
+}
+
:deep(.alarm-row) {
- background: #2B2B4C !important;
+ background: #2b2b4c !important;
td {
background-color: transparent !important;
@@ -244,4 +320,9 @@
color: #4faaff !important;
}
}
+
+.track-play-btn {
+ color: #ffffff;
+ cursor: pointer;
+}
</style>
--
Gitblit v1.9.3