feat:优化历史轨迹

chenyao

2026-07-22 4b752da779a99914b3d79a360a698d55d2f90a49

 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>