feat(platform): add realtime map actions

This commit is contained in:
lingniu
2026-07-04 11:37:01 +08:00
parent 442ca3a275
commit 8327eeb2f5
3 changed files with 86 additions and 2 deletions

View File

@@ -347,7 +347,7 @@ export default function App() {
const pages: Record<PageKey, JSX.Element> = {
dashboard: <Dashboard onOpenVehicle={openVehicle} onOpenQuality={openQuality} onOpenRealtime={openRealtime} onOpenVehicles={openVehicles} />,
vehicles: <Vehicles onOpenVehicle={openVehicle} onFiltersChange={updateVehicleFilters} initialFilters={vehicleFilters} />,
realtime: <Realtime onOpenVehicle={openVehicle} onFiltersChange={updateRealtimeFilters} initialFilters={realtimeFilters} />,
realtime: <Realtime onOpenVehicle={openVehicle} onOpenHistory={openHistoryForVehicle} onFiltersChange={updateRealtimeFilters} initialFilters={realtimeFilters} />,
detail: <VehicleDetail vin={activeVin} protocol={activeProtocol} onOpenRealtime={openRealtimeForVehicle} onOpenHistory={openHistoryForVehicle} onOpenRaw={openRawForVehicle} onOpenMileage={openMileageForVehicle} onOpenVehicles={openVehicles} onOpenQuality={openQuality} onQueryChange={updateVehicleDetailQuery} />,
history: <History initialVin={analysisVin} initialProtocol={activeProtocol} initialTab={historyTab} initialFilters={historyFilters} onFiltersChange={updateHistoryFilters} onOpenVehicle={openVehicle} />,
mileage: <Mileage initialVin={analysisVin} initialProtocol={activeProtocol} initialFilters={mileageFilters} onFiltersChange={updateMileageFilters} onOpenVehicle={openVehicle} />,

View File

@@ -47,6 +47,11 @@ function isValidCoordinate(row: VehicleRealtimeRow) {
return Number.isFinite(row.longitude) && Number.isFinite(row.latitude) && row.longitude !== 0 && row.latitude !== 0;
}
function amapMarkerURL(row: VehicleRealtimeRow) {
const name = encodeURIComponent(row.plate || row.vin || '车辆位置');
return `https://uri.amap.com/marker?position=${row.longitude},${row.latitude}&name=${name}&src=lingniu-vehicle-platform`;
}
const onlineLabel: Record<string, string> = {
online: '在线',
offline: '离线'
@@ -61,10 +66,12 @@ const serviceStatusLabel: Record<string, string> = {
export function Realtime({
onOpenVehicle,
onOpenHistory,
onFiltersChange,
initialFilters = {}
}: {
onOpenVehicle: (vin: string, protocol?: string) => void;
onOpenHistory?: (vin: string, protocol?: string) => void;
onFiltersChange?: (filters: Record<string, string>) => void;
initialFilters?: Record<string, string>;
}) {
@@ -222,7 +229,11 @@ export function Realtime({
</Typography.Text>
<div className="vp-map-service-item-footer">
<Typography.Text type="tertiary" size="small">{row.lastSeen || '-'}</Typography.Text>
<Button size="small" onClick={() => onOpenVehicle(row.vin, filters.protocol || row.primaryProtocol)}></Button>
<Space spacing={4} wrap>
<Button size="small" onClick={() => window.open(amapMarkerURL(row), '_blank', 'noopener,noreferrer')}></Button>
<Button size="small" onClick={() => onOpenHistory?.(row.vin, filters.protocol || row.primaryProtocol)}></Button>
<Button size="small" onClick={() => onOpenVehicle(row.vin, filters.protocol || row.primaryProtocol)}></Button>
</Space>
</div>
</div>
);

View File

@@ -4678,6 +4678,79 @@ test('opens vehicle service from realtime map service queue', async () => {
});
});
test('opens amap coordinate and trajectory playback from realtime map service queue', async () => {
window.history.replaceState(null, '', '/#/realtime');
const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
const path = String(input);
if (path.includes('/api/realtime/vehicles')) {
return {
ok: true,
json: async () => ({
data: {
items: [{
vin: 'VIN-MAP-LINK',
plate: '粤AMAP02',
phone: '',
oem: 'G7s',
protocols: ['GB32960', 'JT808'],
sourceStatus: [
{ protocol: 'GB32960', online: true, lastSeen: '2026-07-03 20:12:10', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true },
{ protocol: 'JT808', online: true, lastSeen: '2026-07-03 20:11:10', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true }
],
sourceCount: 2,
onlineSourceCount: 2,
online: true,
primaryProtocol: 'GB32960',
longitude: 113.24567,
latitude: 23.12345,
speedKmh: 30,
socPercent: 78,
totalMileageKm: 119925,
lastSeen: '2026-07-03 20:12:10',
bindingStatus: 'bound',
serviceStatus: {
status: 'healthy',
severity: 'ok',
title: '服务正常',
detail: '2/2 来源在线',
sourceCount: 2,
onlineSourceCount: 2
}
}],
total: 1,
limit: 50,
offset: 0
},
traceId: 'trace-test',
timestamp: 1783094400000
})
} as Response;
}
return {
ok: true,
json: async () => ({
data: { items: [], total: 0, limit: 10, offset: 0 },
traceId: 'trace-test',
timestamp: 1783094400000
})
} as Response;
});
render(<App />);
expect(await screen.findByText('地图车辆服务队列')).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: '高德坐标' }));
expect(openSpy).toHaveBeenCalledWith(
expect.stringContaining('https://uri.amap.com/marker?position=113.24567,23.12345'),
'_blank',
'noopener,noreferrer'
);
fireEvent.click(screen.getByRole('button', { name: '轨迹回放' }));
expect(window.location.hash).toBe('#/history?keyword=VIN-MAP-LINK&protocol=GB32960');
});
test('loads realtime vehicles from shareable source filter hash', async () => {
window.history.replaceState(null, '', '/#/realtime?keyword=%E7%B2%A4ART002&protocol=JT808&online=online&serviceStatus=degraded');
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {