shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(platform): add trajectory autoplay controls

Browse Source
This commit is contained in:
lingniu
2026-07-04 16:40:10 +08:00
parent 318beccaaf
commit bdb2ebc723
4 changed files with 106 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
vehicle-data-platform/apps/web/src/pages/History.tsx
View File

@@ -247,6 +247,8 @@ export function History({
const [locationPagination, setLocationPagination] = useState({ currentPage: 1, pageSize: 10 });
const [rawPagination, setRawPagination] = useState({ currentPage: 1, pageSize: 10 });
const [playbackIndex, setPlaybackIndex] = useState(0);
const [playbackPlaying, setPlaybackPlaying] = useState(false);
const [playbackSpeedMs, setPlaybackSpeedMs] = useState(1200);
const buildParams = (nextFilters: HistoryFilters, limit: number, offset: number, raw: boolean) => {
const params = new URLSearchParams({ limit: String(limit), offset: String(offset) });
@@ -278,6 +280,7 @@ export function History({
setLocations(nextPage);
setLocationPagination({ currentPage: page, pageSize });
setPlaybackIndex(0);
setPlaybackPlaying(false);
})
.catch((error: Error) => Toast.error(error.message))
.finally(() => setLoadingLocations(false));
@@ -361,6 +364,7 @@ export function History({
const playbackRows = validLocations.length > 0 ? validLocations : locationItems;
const currentPlaybackIndex = playbackRows.length === 0 ? -1 : Math.min(playbackIndex, playbackRows.length - 1);
const currentPlayback = currentPlaybackIndex >= 0 ? playbackRows[currentPlaybackIndex] : undefined;
const playbackAtEnd = playbackRows.length > 0 && currentPlaybackIndex >= playbackRows.length - 1;
const playbackPoints: VehicleMapPoint[] = validLocations.map((row, index) => ({
id: `${row.vin}-${row.deviceTime || row.serverTime || index}`,
label: row.plate || row.vin || `点 ${index + 1}`,
@@ -418,8 +422,33 @@ export function History({
}
window.open(url, '_blank', 'noopener,noreferrer');
};
useEffect(() => {
if (!playbackPlaying || playbackRows.length <= 1) return undefined;
const timer = window.setInterval(() => {
setPlaybackIndex((current) => {
if (current >= playbackRows.length - 1) {
setPlaybackPlaying(false);
return current;
}
const next = current + 1;
if (next >= playbackRows.length - 1) setPlaybackPlaying(false);
return next;
});
}, playbackSpeedMs);
return () => window.clearInterval(timer);
}, [playbackPlaying, playbackRows.length, playbackSpeedMs]);
const togglePlayback = () => {
if (playbackPlaying) {
setPlaybackPlaying(false);
return;
}
if (playbackRows.length <= 1) return;
if (playbackAtEnd) setPlaybackIndex(0);
setPlaybackPlaying(true);
};
const movePlayback = (delta: number) => {
if (playbackRows.length === 0) return;
setPlaybackPlaying(false);
setPlaybackIndex((current) => Math.min(Math.max(current + delta, 0), playbackRows.length - 1));
};
const openPlaybackVehicle = () => {
@@ -560,6 +589,27 @@ export function History({
<Tag color="green">{formatNumber(currentPlayback.speedKmh, ' km/h')}</Tag>
<Tag color="blue">{formatNumber(currentPlayback.totalMileageKm, ' km')}</Tag>
</Space>
<Space wrap>
<Button
size="small"
aria-label={playbackPlaying ? '暂停轨迹' : '播放轨迹'}
disabled={playbackRows.length <= 1}
onClick={togglePlayback}
>
{playbackPlaying ? '暂停' : playbackAtEnd ? '重播' : '播放'}
</Button>
<Typography.Text type="secondary" size="small">播放速度</Typography.Text>
<Select
size="small"
value={String(playbackSpeedMs)}
style={{ width: 108 }}
onChange={(value) => setPlaybackSpeedMs(Number(value))}
>
<Select.Option value="1800">慢速</Select.Option>
<Select.Option value="1200">标准</Select.Option>
<Select.Option value="600">快速</Select.Option>
</Select>
</Space>
<Space wrap>
<Button size="small" disabled={currentPlaybackIndex <= 0} onClick={() => movePlayback(-1)}>上一点</Button>
<Button size="small" disabled={currentPlaybackIndex >= playbackRows.length - 1} onClick={() => movePlayback(1)}>下一点</Button>