diff --git a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx index 45f07d26..e15c93b5 100644 --- a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx @@ -7,6 +7,7 @@ import { DataEmpty } from '../components/DataEmpty'; import { PageHeader } from '../components/PageHeader'; import { SourceStatusTags } from '../components/SourceStatusTags'; import { StatusTag } from '../components/StatusTag'; +import { buildCsv, downloadCsv, type CsvColumn } from '../domain/csvExport'; import { summarizeVehicleService } from '../domain/vehicleService'; function vehicleServiceStatus(row: VehicleCoverageRow) { @@ -90,6 +91,30 @@ function sourceDiagnosisText(row: VehicleCoverageRow) { return parts.join('，'); } +const vehicleExportColumns: CsvColumn[] = [ + { title: 'VIN', value: (row) => row.vin }, + { title: '车牌', value: (row) => row.plate }, + { title: '手机号', value: (row) => row.phone }, + { title: 'OEM', value: (row) => row.oem }, + { title: '来源', value: (row) => row.protocols?.join('|') }, + { title: '缺失来源', value: (row) => row.missingProtocols?.join('|') }, + { title: '来源覆盖', value: (row) => sourceEvidenceText(row) }, + { title: '服务状态', value: (row) => vehicleServiceStatus(row).label }, + { title: '诊断摘要', value: (row) => sourceDiagnosisText(row) }, + { title: '档案完整度', value: (row) => vehicleArchiveCompleteness(row).label }, + { title: '档案缺项', value: (row) => vehicleArchiveMissingLabels(row).join('|') }, + { title: '在线', value: (row) => row.online ? '在线' : '离线' }, + { title: '最后在线', value: (row) => row.lastSeen }, + { title: '绑定状态', value: (row) => row.bindingStatus }, + { title: '来源一致性', value: (row) => row.sourceConsistency?.title ?? '' } +]; + +function exportFileName(filters: Record) { + const keyword = filters.keyword?.trim() || 'all'; + const protocol = filters.protocol?.trim() || 'all-source'; + return `vehicle-coverage-${keyword}-${protocol}.csv`; +} + type VehicleActionRecommendation = { label: string; color: 'green' | 'orange' | 'red'; @@ -293,6 +318,14 @@ export function Vehicles({ onFiltersChange?.(nextFilters); load(nextFilters, 1, pagination.pageSize); }; + const exportVehicles = () => { + if (rows.length === 0) { + Toast.warning('当前没有可导出的车辆结果'); + return; + } + downloadCsv(exportFileName(filters), buildCsv(vehicleExportColumns, rows)); + Toast.success(`已导出 ${rows.length} 条车辆结果`); + }; useEffect(() => { setFilters(initialFilters); @@ -493,20 +526,29 @@ export function Vehicles({ {rows.length === 0 && !loading ? ( ) : ( - load(filters, page, pagination.pageSize), - onPageSizeChange: (pageSize) => load(filters, 1, pageSize) - }} - /> + <> +
+ + 当前页 {rows.length.toLocaleString()} 辆 + 总计 {pagination.total.toLocaleString()} 辆 + + +
+
load(filters, page, pagination.pageSize), + onPageSizeChange: (pageSize) => load(filters, 1, pageSize) + }} + /> + )} 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 427d496d..56a732ba 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -711,6 +711,93 @@ test('shows vehicle service result summary on vehicle list filters', async () => expect(screen.getByText('补齐 YUTONG_MQTT 来源')).toBeInTheDocument(); }); +test('exports current vehicle coverage page as csv', async () => { + window.history.replaceState(null, '', '/#/vehicles?missingProtocol=YUTONG_MQTT'); + const createObjectURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:vehicle-coverage'); + const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined); + vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => undefined); + 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: 1, + onlineVehicles: 1, + singleSourceVehicles: 1, + multiSourceVehicles: 0, + noDataVehicles: 0, + unboundVehicles: 0, + archiveIncompleteVehicles: 0, + archiveMissingFields: [], + missingSources: [{ protocol: 'YUTONG_MQTT', count: 1 }] + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/vehicles/coverage')) { + return { + ok: true, + json: async () => ({ + data: { + items: [{ + vin: 'VIN-EXPORT-VEHICLE', + plate: '粤A车辆导出', + phone: '13307795425', + oem: 'G7s', + protocols: ['JT808'], + missingProtocols: ['YUTONG_MQTT'], + sourceStatus: [{ protocol: 'JT808', online: true, lastSeen: '2026-07-03 20:12:10', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true }], + sourceCount: 1, + onlineSourceCount: 1, + online: true, + lastSeen: '2026-07-03 20:12:10', + bindingStatus: 'bound', + serviceStatus: { status: 'degraded', severity: 'warning', title: '来源不完整', detail: '缺少 YUTONG_MQTT', sourceCount: 1, onlineSourceCount: 1 }, + sourceConsistency: { sourceCount: 1, onlineSourceCount: 1, locatedSourceCount: 1, missingProtocols: ['YUTONG_MQTT'], mileageDeltaKm: 0, sourceTimeDeltaSeconds: 0, scope: 'overview', status: 'degraded', severity: 'warning', title: '来源不完整', detail: '缺少 YUTONG_MQTT' } + }], + total: 1, + limit: 20, + offset: 0 + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + return { + ok: true, + json: async () => ({ + data: { items: [], total: 0, limit: 20, offset: 0 }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + }); + + render(); + + expect(await screen.findByText('VIN-EXPORT-VEHICLE')).toBeInTheDocument(); + expect(screen.getByText('当前页 1 辆')).toBeInTheDocument(); + fireEvent.click(screen.getByRole('button', { name: '导出车辆当前页 CSV' })); + + expect(createObjectURL).toHaveBeenCalled(); + expect(revokeObjectURL).toHaveBeenCalledWith('blob:vehicle-coverage'); +}); + test('filters vehicle list from recommended action', async () => { window.history.replaceState(null, '', '/#/vehicles'); const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {