feat: app视频封面图

罗广辉

2026-08-13 1d552a3bad95caae4af15322df28e6240b797693

 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">
@@ -194,7 +195,7 @@
// 停止轨迹播放
function stopTrackPlay() {
   if (playTimer) {
      clearInterval(playTimer)
      clearTimeout(playTimer)
      playTimer = null
   }
   isPlaying.value = false
@@ -202,13 +203,23 @@

// 播放下一个轨迹点
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)
   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)
}

// 切换轨迹播放状态
@@ -218,10 +229,11 @@
      return
   }
   if (!list.value.length) return
   playIndex = selectedPointIndex.value || 0
   mapRef.value?.clickWeekTime?.(list.value[0], 0)
   if (list.value.length === 1) return
   playIndex = 1
   isPlaying.value = true
   playNextPoint()
   playTimer = setInterval(playNextPoint, PLAY_INTERVAL)
}

// 地图上点击轨迹点后，同步高亮表格对应行，并滚动到该行
@@ -279,6 +291,18 @@
</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;

@@ -298,7 +322,7 @@
}

.track-play-btn {
   margin-left: 6px;
   color: #ffffff;
   cursor: pointer;
}
</style>