diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx index 55b50ef4..362e3cb2 100644 --- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx @@ -8,6 +8,7 @@ import { SourceStatusTags } from '../components/SourceStatusTags'; import { StatusTag } from '../components/StatusTag'; import { VehicleMap, type VehicleMapPoint } from '../components/VehicleMap'; import { isAMapConfigured } from '../config/appConfig'; +import { buildCsv, downloadCsv, type CsvColumn } from '../domain/csvExport'; function canOpenVehicle(vin?: string) { const value = vin?.trim(); @@ -78,6 +79,32 @@ const serviceStatusLabel: Record = { identity_required: '身份未绑定' }; +const realtimeExportColumns: 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.primaryProtocol }, + { title: '来源列表', value: (row) => row.protocols?.join('|') }, + { title: '在线', value: (row) => row.online ? '在线' : '离线' }, + { title: '车辆服务状态', value: (row) => vehicleServiceStatus(row).label }, + { title: '来源在线', value: (row) => sourceEvidenceText(row) }, + { title: '经度', value: (row) => row.longitude }, + { title: '纬度', value: (row) => row.latitude }, + { title: '速度km/h', value: (row) => row.speedKmh }, + { title: 'SOC%', value: (row) => row.socPercent }, + { title: '总里程km', value: (row) => row.totalMileageKm }, + { title: '最后时间', value: (row) => row.lastSeen }, + { title: '绑定状态', value: (row) => row.bindingStatus } +]; + +function realtimeExportFileName(filters: Record) { + const keyword = filters.keyword?.trim() || 'all'; + const protocol = filters.protocol?.trim() || 'all-source'; + const online = filters.online?.trim() || 'all-online'; + return `realtime-vehicles-${keyword}-${protocol}-${online}.csv`; +} + export function Realtime({ onOpenVehicle, onOpenHistory, @@ -130,6 +157,14 @@ export function Realtime({ protocol: filters.protocol || row.primaryProtocol || '' }); }; + const exportRealtime = () => { + if (rows.length === 0) { + Toast.warning('当前没有可导出的实时车辆'); + return; + } + downloadCsv(realtimeExportFileName(filters), buildCsv(realtimeExportColumns, rows)); + Toast.success(`已导出 ${rows.length} 条实时车辆`); + }; const filterSummary = [ filters.keyword ? `关键词:${filters.keyword}` : '', filters.protocol ? `数据来源:${filters.protocol}` : '', @@ -313,6 +348,12 @@ export function Realtime({ +
+ + 当前页 {rows.length.toLocaleString()} 条 + + +
{rows.length === 0 && !loading ? ( ) : ( 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 3dd1dcb2..b4b51282 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -5801,6 +5801,82 @@ test('frames realtime page as one vehicle service with source evidence', async ( expect(screen.getAllByText('2/2 来源在线').length).toBeGreaterThan(0); }); +test('exports current realtime vehicles as CSV', async () => { + window.history.replaceState(null, '', '/#/realtime?protocol=JT808'); + const createObjectURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:realtime-export'); + const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').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, redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/realtime/vehicles')) { + return { + ok: true, + json: async () => ({ + data: { + items: [{ + vin: 'VIN-RT-EXPORT', + plate: '粤A实时导', + phone: '13300000001', + oem: 'G7s', + protocols: ['JT808'], + 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, + bindingStatus: 'bound', + primaryProtocol: 'JT808', + longitude: 113.2, + latitude: 23.1, + speedKmh: 32, + socPercent: 76, + totalMileageKm: 1200.5, + lastSeen: '2026-07-03 20:12:10', + serviceStatus: { + status: 'healthy', + severity: 'ok', + title: '服务正常', + detail: '1/1 来源在线', + sourceCount: 1, + onlineSourceCount: 1 + } + }], + total: 1, + limit: 50, + offset: 0 + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + return { + ok: true, + json: async () => ({ + data: { items: [], total: 0, limit: 50, offset: 0 }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + }); + + render(); + + expect(await screen.findByRole('button', { name: '导出实时当前页 CSV' })).toBeInTheDocument(); + fireEvent.click(screen.getByRole('button', { name: '导出实时当前页 CSV' })); + + expect(createObjectURL).toHaveBeenCalled(); + expect(revokeObjectURL).toHaveBeenCalledWith('blob:realtime-export'); +}); + test('opens vehicle service from realtime map service queue', async () => { window.history.replaceState(null, '', '/#/realtime'); vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {