feat:优化历史轨迹

chenyao

3 days ago 4b752da779a99914b3d79a360a698d55d2f90a49

feat:优化历史轨迹

 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;
            }

 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>