feat(platform): link realtime rows to quality evidence
This commit is contained in:
@@ -375,7 +375,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} onOpenQuality={openQuality} onFiltersChange={updateVehicleFilters} initialFilters={vehicleFilters} />,
|
vehicles: <Vehicles onOpenVehicle={openVehicle} onOpenQuality={openQuality} onFiltersChange={updateVehicleFilters} initialFilters={vehicleFilters} />,
|
||||||
realtime: <Realtime onOpenVehicle={openVehicle} onOpenHistory={openHistoryForVehicle} onFiltersChange={updateRealtimeFilters} initialFilters={realtimeFilters} />,
|
realtime: <Realtime onOpenVehicle={openVehicle} onOpenHistory={openHistoryForVehicle} onOpenQuality={openQuality} 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} onOpenMileage={openMileageWithFilters} />,
|
history: <History initialVin={analysisVin} initialProtocol={activeProtocol} initialTab={historyTab} initialFilters={historyFilters} onFiltersChange={updateHistoryFilters} onOpenVehicle={openVehicle} onOpenMileage={openMileageWithFilters} />,
|
||||||
mileage: <Mileage initialVin={analysisVin} initialProtocol={activeProtocol} initialFilters={mileageFilters} onFiltersChange={updateMileageFilters} onOpenVehicle={openVehicle} onOpenHistory={openHistoryWithFilters} />,
|
mileage: <Mileage initialVin={analysisVin} initialProtocol={activeProtocol} initialFilters={mileageFilters} onFiltersChange={updateMileageFilters} onOpenVehicle={openVehicle} onOpenHistory={openHistoryWithFilters} />,
|
||||||
|
|||||||
@@ -67,11 +67,13 @@ const serviceStatusLabel: Record<string, string> = {
|
|||||||
export function Realtime({
|
export function Realtime({
|
||||||
onOpenVehicle,
|
onOpenVehicle,
|
||||||
onOpenHistory,
|
onOpenHistory,
|
||||||
|
onOpenQuality,
|
||||||
onFiltersChange,
|
onFiltersChange,
|
||||||
initialFilters = {}
|
initialFilters = {}
|
||||||
}: {
|
}: {
|
||||||
onOpenVehicle: (vin: string, protocol?: string) => void;
|
onOpenVehicle: (vin: string, protocol?: string) => void;
|
||||||
onOpenHistory?: (vin: string, protocol?: string) => void;
|
onOpenHistory?: (vin: string, protocol?: string) => void;
|
||||||
|
onOpenQuality?: (filters: Record<string, string>) => void;
|
||||||
onFiltersChange?: (filters: Record<string, string>) => void;
|
onFiltersChange?: (filters: Record<string, string>) => void;
|
||||||
initialFilters?: Record<string, string>;
|
initialFilters?: Record<string, string>;
|
||||||
}) {
|
}) {
|
||||||
@@ -107,6 +109,13 @@ export function Realtime({
|
|||||||
onFiltersChange?.(nextFilters);
|
onFiltersChange?.(nextFilters);
|
||||||
load(nextFilters, 1, pagination.pageSize);
|
load(nextFilters, 1, pagination.pageSize);
|
||||||
};
|
};
|
||||||
|
const openQualityEvidence = (row: VehicleRealtimeRow) => {
|
||||||
|
if (!canOpenVehicle(row.vin)) return;
|
||||||
|
onOpenQuality?.({
|
||||||
|
keyword: row.vin,
|
||||||
|
protocol: filters.protocol || row.primaryProtocol || ''
|
||||||
|
});
|
||||||
|
};
|
||||||
const filterSummary = [
|
const filterSummary = [
|
||||||
filters.keyword ? `关键词:${filters.keyword}` : '',
|
filters.keyword ? `关键词:${filters.keyword}` : '',
|
||||||
filters.protocol ? `数据来源:${filters.protocol}` : '',
|
filters.protocol ? `数据来源:${filters.protocol}` : '',
|
||||||
@@ -232,6 +241,7 @@ export function Realtime({
|
|||||||
<Space spacing={4} wrap>
|
<Space spacing={4} wrap>
|
||||||
<Button size="small" onClick={() => window.open(amapMarkerURL(row), '_blank', 'noopener,noreferrer')}>高德坐标</Button>
|
<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={() => onOpenHistory?.(row.vin, filters.protocol || row.primaryProtocol)}>轨迹回放</Button>
|
||||||
|
<Button size="small" disabled={!onOpenQuality} onClick={() => openQualityEvidence(row)}>质量问题</Button>
|
||||||
<Button size="small" onClick={() => onOpenVehicle(row.vin, filters.protocol || row.primaryProtocol)}>地图车辆服务</Button>
|
<Button size="small" onClick={() => onOpenVehicle(row.vin, filters.protocol || row.primaryProtocol)}>地图车辆服务</Button>
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
@@ -293,9 +303,12 @@ export function Realtime({
|
|||||||
{ title: '最后时间', dataIndex: 'lastSeen', width: 170 },
|
{ title: '最后时间', dataIndex: 'lastSeen', width: 170 },
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
width: 110,
|
width: 190,
|
||||||
render: (_: unknown, row: VehicleRealtimeRow) => (
|
render: (_: unknown, row: VehicleRealtimeRow) => (
|
||||||
<Button disabled={!canOpenVehicle(row.vin)} onClick={() => onOpenVehicle(row.vin, filters.protocol || row.primaryProtocol)}>车辆服务</Button>
|
<Space spacing={4} wrap>
|
||||||
|
<Button disabled={!canOpenVehicle(row.vin)} onClick={() => onOpenVehicle(row.vin, filters.protocol || row.primaryProtocol)}>车辆服务</Button>
|
||||||
|
<Button disabled={!canOpenVehicle(row.vin) || !onOpenQuality} onClick={() => openQualityEvidence(row)}>质量问题</Button>
|
||||||
|
</Space>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
|
|||||||
@@ -5100,6 +5100,137 @@ test('opens amap coordinate and trajectory playback from realtime map service qu
|
|||||||
expect(window.location.hash).toBe('#/history?keyword=VIN-MAP-LINK&protocol=GB32960');
|
expect(window.location.hash).toBe('#/history?keyword=VIN-MAP-LINK&protocol=GB32960');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('opens quality issues from realtime vehicle row with source evidence', async () => {
|
||||||
|
window.history.replaceState(null, '', '/#/realtime?protocol=JT808');
|
||||||
|
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-RT-QUALITY',
|
||||||
|
plate: '粤A质量1',
|
||||||
|
phone: '13307795425',
|
||||||
|
oem: 'G7s',
|
||||||
|
protocols: ['JT808'],
|
||||||
|
sourceStatus: [
|
||||||
|
{ protocol: 'JT808', online: false, lastSeen: '2026-07-03 20:12:10', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: false }
|
||||||
|
],
|
||||||
|
sourceCount: 1,
|
||||||
|
onlineSourceCount: 0,
|
||||||
|
online: false,
|
||||||
|
primaryProtocol: 'JT808',
|
||||||
|
longitude: 113.2,
|
||||||
|
latitude: 23.1,
|
||||||
|
speedKmh: 0,
|
||||||
|
socPercent: 70,
|
||||||
|
totalMileageKm: 100,
|
||||||
|
lastSeen: '2026-07-03 20:12:10',
|
||||||
|
bindingStatus: 'bound',
|
||||||
|
serviceStatus: {
|
||||||
|
status: 'offline',
|
||||||
|
severity: 'error',
|
||||||
|
title: '车辆离线',
|
||||||
|
detail: 'JT808 离线',
|
||||||
|
sourceCount: 1,
|
||||||
|
onlineSourceCount: 0
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
total: 1,
|
||||||
|
limit: 50,
|
||||||
|
offset: 0
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/quality/summary')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
issueVehicleCount: 1,
|
||||||
|
issueRecordCount: 1,
|
||||||
|
errorCount: 1,
|
||||||
|
warningCount: 0,
|
||||||
|
protocols: [{ name: 'JT808', count: 1 }],
|
||||||
|
issueTypes: [{ name: 'LINK_GAP', count: 1 }]
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/quality/issues')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
items: [{
|
||||||
|
vin: 'VIN-RT-QUALITY',
|
||||||
|
plate: '粤A质量1',
|
||||||
|
phone: '13307795425',
|
||||||
|
sourceEndpoint: '115.29.187.205:808',
|
||||||
|
protocol: 'JT808',
|
||||||
|
issueType: 'LINK_GAP',
|
||||||
|
severity: 'error',
|
||||||
|
title: 'JT808 离线',
|
||||||
|
detail: '实时来源不可用',
|
||||||
|
firstSeen: '2026-07-03 20:12:10',
|
||||||
|
lastSeen: '2026-07-03 20:12:10'
|
||||||
|
}],
|
||||||
|
total: 1,
|
||||||
|
limit: 50,
|
||||||
|
offset: 0
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/ops/health')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
linkHealth: [],
|
||||||
|
kafkaLag: 0,
|
||||||
|
activeConnections: 1,
|
||||||
|
capacityFindings: [],
|
||||||
|
redisOnlineKeys: 1,
|
||||||
|
tdengineWritable: true,
|
||||||
|
mysqlWritable: true,
|
||||||
|
runtime: { requestTimeoutMs: 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.findAllByText('VIN-RT-QUALITY')).length).toBeGreaterThan(0);
|
||||||
|
fireEvent.click(screen.getAllByRole('button', { name: '质量问题' })[0]);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(window.location.hash).toBe('#/quality?keyword=VIN-RT-QUALITY&protocol=JT808');
|
||||||
|
});
|
||||||
|
expect(await screen.findByRole('heading', { name: '告警通知' })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
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