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> = {
|
const pages: Record<PageKey, JSX.Element> = {
|
||||||
dashboard: <Dashboard onOpenVehicle={openVehicle} onOpenQuality={openQuality} onOpenRealtime={openRealtime} onOpenVehicles={openVehicles} />,
|
dashboard: <Dashboard onOpenVehicle={openVehicle} onOpenQuality={openQuality} onOpenRealtime={openRealtime} onOpenVehicles={openVehicles} />,
|
||||||
vehicles: <Vehicles onOpenVehicle={openVehicle} onFiltersChange={updateVehicleFilters} initialFilters={vehicleFilters} />,
|
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} />,
|
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} />,
|
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} />,
|
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;
|
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> = {
|
const onlineLabel: Record<string, string> = {
|
||||||
online: '在线',
|
online: '在线',
|
||||||
offline: '离线'
|
offline: '离线'
|
||||||
@@ -61,10 +66,12 @@ const serviceStatusLabel: Record<string, string> = {
|
|||||||
|
|
||||||
export function Realtime({
|
export function Realtime({
|
||||||
onOpenVehicle,
|
onOpenVehicle,
|
||||||
|
onOpenHistory,
|
||||||
onFiltersChange,
|
onFiltersChange,
|
||||||
initialFilters = {}
|
initialFilters = {}
|
||||||
}: {
|
}: {
|
||||||
onOpenVehicle: (vin: string, protocol?: string) => void;
|
onOpenVehicle: (vin: string, protocol?: string) => void;
|
||||||
|
onOpenHistory?: (vin: string, protocol?: string) => void;
|
||||||
onFiltersChange?: (filters: Record<string, string>) => void;
|
onFiltersChange?: (filters: Record<string, string>) => void;
|
||||||
initialFilters?: Record<string, string>;
|
initialFilters?: Record<string, string>;
|
||||||
}) {
|
}) {
|
||||||
@@ -222,7 +229,11 @@ export function Realtime({
|
|||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
<div className="vp-map-service-item-footer">
|
<div className="vp-map-service-item-footer">
|
||||||
<Typography.Text type="tertiary" size="small">{row.lastSeen || '-'}</Typography.Text>
|
<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>
|
||||||
</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 () => {
|
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');
|
window.history.replaceState(null, '', '/#/realtime?keyword=%E7%B2%A4ART002&protocol=JT808&online=online&serviceStatus=degraded');
|
||||||
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user