feat(platform): add realtime map actions
This commit is contained in:
@@ -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} />,
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user