diff --git a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx index 72ae4611..de89de37 100644 --- a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx @@ -69,20 +69,26 @@ function sourceDiagnosisText(row: VehicleCoverageRow) { return parts.join(','); } -function vehicleActionRecommendation(row: VehicleCoverageRow) { +type VehicleActionRecommendation = { + label: string; + color: 'green' | 'orange' | 'red'; + filters: Record | null; +}; + +function vehicleActionRecommendation(row: VehicleCoverageRow): VehicleActionRecommendation { if (row.bindingStatus !== 'bound') { - return { label: '维护身份绑定', color: 'orange' as const }; + return { label: '维护身份绑定', color: 'orange' as const, filters: { bindingStatus: 'unbound' } }; } if ((row.missingProtocols ?? []).length > 0) { - return { label: `补齐 ${row.missingProtocols.join('、')} 来源`, color: 'orange' as const }; + return { label: `补齐 ${row.missingProtocols.join('、')} 来源`, color: 'orange' as const, filters: { missingProtocol: row.missingProtocols[0] } }; } if (row.sourceCount <= 0) { - return { label: '确认平台转发配置', color: 'orange' as const }; + return { label: '确认平台转发配置', color: 'orange' as const, filters: { serviceStatus: 'no_data' } }; } if (row.onlineSourceCount <= 0) { - return { label: '排查离线链路', color: 'red' as const }; + return { label: '排查离线链路', color: 'red' as const, filters: { online: 'offline' } }; } - return { label: '持续观察', color: 'green' as const }; + return { label: '持续观察', color: 'green' as const, filters: null }; } function sourceConsistencyAction(row: VehicleCoverageRow, onFilter: (filters: Record) => void) { @@ -246,6 +252,13 @@ export function Vehicles({ width: 180, render: (_: unknown, row: VehicleCoverageRow) => { const action = vehicleActionRecommendation(row); + if (action.filters) { + return ( + + ); + } return {action.label}; } }, diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx index 3c090dbb..4fc59e8a 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -588,6 +588,86 @@ test('shows vehicle service result summary on vehicle list filters', async () => expect(screen.getByText('补齐 YUTONG_MQTT 来源')).toBeInTheDocument(); }); +test('filters vehicle list from recommended action', async () => { + window.history.replaceState(null, '', '/#/vehicles'); + const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => { + const path = String(input); + if (path.includes('/api/ops/health')) { + return { + ok: true, + json: async () => ({ + data: { linkHealth: [], kafkaLag: 0, activeConnections: 0, capacityFindings: [], redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/vehicles/coverage/summary')) { + return { + ok: true, + json: async () => ({ + data: { + totalVehicles: 181, + onlineVehicles: 73, + singleSourceVehicles: 0, + multiSourceVehicles: 181, + noDataVehicles: 0, + unboundVehicles: 0, + missingSources: [{ protocol: 'YUTONG_MQTT', count: 181 }] + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/vehicles/coverage')) { + return { + ok: true, + json: async () => ({ + data: { + items: [{ + vin: 'VIN-MISSING-MQTT', + plate: '粤A服务2', + phone: '13307795425', + oem: 'G7s', + protocols: ['GB32960', 'JT808'], + missingProtocols: ['YUTONG_MQTT'], + sourceStatus: [], + sourceCount: 2, + onlineSourceCount: 2, + online: true, + lastSeen: '2026-07-03 20:12:10', + bindingStatus: 'bound' + }], + total: 181, + limit: 20, + 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(); + + fireEvent.click(await screen.findByRole('button', { name: '补齐 YUTONG_MQTT 来源' })); + + await waitFor(() => { + expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/vehicles/coverage?limit=20&offset=0&missingProtocol=YUTONG_MQTT'), undefined); + }); + expect(window.location.hash).toBe('#/vehicles?missingProtocol=YUTONG_MQTT'); +}); + test('shows and clears current vehicle service filters', async () => { window.history.replaceState(null, '', '/#/vehicles?keyword=%E7%B2%A4A&protocol=JT808&coverage=multi&missingProtocol=YUTONG_MQTT&serviceStatus=degraded&online=online&bindingStatus=bound'); const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {