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

feat(platform): add trajectory playback controls

Browse Source
This commit is contained in:
lingniu
2026-07-04 11:32:14 +08:00
parent e057dc151f
commit 442ca3a275
3 changed files with 121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -124,6 +124,7 @@ export function History({
const [loadingRaw, setLoadingRaw] = useState(false);
const [locationPagination, setLocationPagination] = useState({ currentPage: 1, pageSize: 10 });
const [rawPagination, setRawPagination] = useState({ currentPage: 1, pageSize: 10 });
const [playbackIndex, setPlaybackIndex] = useState(0);
const buildParams = (nextFilters: HistoryFilters, limit: number, offset: number, raw: boolean) => {
const params = new URLSearchParams({ limit: String(limit), offset: String(offset) });
@@ -154,6 +155,7 @@ export function History({
.then((nextPage) => {
setLocations(nextPage);
setLocationPagination({ currentPage: page, pageSize });
setPlaybackIndex(0);
})
.catch((error: Error) => Toast.error(error.message))
.finally(() => setLoadingLocations(false));
@@ -223,6 +225,9 @@ export function History({
const currentProtocol = filters.protocol?.trim() ?? '';
const amapConfigured = isAMapConfigured();
const selectedFieldCount = splitFields(filters.fields).length;
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 playbackPoints: VehicleMapPoint[] = validLocations.map((row, index) => ({
id: `${row.vin}-${row.deviceTime || row.serverTime || index}`,
label: row.plate || row.vin || `点 ${index + 1}`,
@@ -258,6 +263,14 @@ export function History({
downloadCsv(exportFileName('raw-frames', filters), buildCsv(rawExportColumns, rawFrames.items));
Toast.success(`已导出 ${rawFrames.items.length} 条 RAW 帧`);
};
const movePlayback = (delta: number) => {
if (playbackRows.length === 0) return;
setPlaybackIndex((current) => Math.min(Math.max(current + delta, 0), playbackRows.length - 1));
};
const openPlaybackVehicle = () => {
if (!currentPlayback || !canOpenVehicle(currentPlayback.vin)) return;
onOpenVehicle(currentPlayback.vin, currentPlayback.protocol);
};
return (
<div className="vp-page">
@@ -340,6 +353,30 @@ export function History({
<div className="vp-monitor-metric-value">{item.value}</div>
</div>
))}
<div className="vp-playback-current">
<div className="vp-map-service-queue-title">当前回放点</div>
{currentPlayback ? (
<>
<Space wrap>
<Tag color="blue">点 {currentPlaybackIndex + 1} / {playbackRows.length}</Tag>
<Tag color={currentPlayback.protocol ? 'blue' : 'grey'}>{currentPlayback.protocol || '-'}</Tag>
</Space>
<Typography.Text strong>{currentPlayback.plate || currentPlayback.vin}</Typography.Text>
<Typography.Text type="tertiary" size="small">{currentPlayback.deviceTime || currentPlayback.serverTime || '-'}</Typography.Text>
<Space wrap>
<Tag color="green">{formatNumber(currentPlayback.speedKmh, ' km/h')}</Tag>
<Tag color="blue">{formatNumber(currentPlayback.totalMileageKm, ' km')}</Tag>
</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>
<Button size="small" disabled={!canOpenVehicle(currentPlayback.vin)} onClick={openPlaybackVehicle}>回放点车辆服务</Button>
</Space>
</>
) : (
<Typography.Text type="tertiary">暂无可回放位置点</Typography.Text>
)}
</div>
</div>
</div>
<div className="vp-playback-timeline">