diff --git a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx index 83de05d9..d27f92a9 100644 --- a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx +++ b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx @@ -1,11 +1,12 @@ import { Banner, Button, Card, Descriptions, Form, Select, Space, Table, Tabs, Tag, Toast, Typography } from '@douyinfe/semi-ui'; -import { IconCopy, IconRefresh, IconSearch } from '@douyinfe/semi-icons'; +import { IconCopy, IconDownload, IconRefresh, IconSearch } from '@douyinfe/semi-icons'; import { useEffect, useMemo, useRef, useState } from 'react'; import { api } from '../api/client'; import type { QualityIssueRow, RealtimeLocationRow, VehicleDetail as VehicleDetailData, VehicleSourceStatus } from '../api/types'; import { PageHeader } from '../components/PageHeader'; import { SourceStatusTags } from '../components/SourceStatusTags'; import { StatusTag } from '../components/StatusTag'; +import { buildCsv, downloadCsv, type CsvColumn } from '../domain/csvExport'; import { isLikelyVIN } from '../domain/vehicleLookup'; import { summarizeVehicleService } from '../domain/vehicleService'; @@ -70,6 +71,28 @@ type VehicleServiceAction = { onClick: () => void; }; +type VehicleReportRow = { + section: string; + item: string; + value: string; +}; + +const vehicleReportColumns: CsvColumn[] = [ + { title: '模块', value: (row) => row.section }, + { title: '项目', value: (row) => row.item }, + { title: '值', value: (row) => row.value } +]; + +function reportText(value: unknown) { + if (value == null || value === '') return '-'; + if (Array.isArray(value)) return value.length > 0 ? value.join('|') : '-'; + return String(value); +} + +function vehicleReportFileName(vin: string, protocol?: string) { + return `vehicle-service-${vin || 'unknown'}-${protocol || 'all-source'}.csv`; +} + async function copyVehicleServiceURL() { try { await navigator.clipboard.writeText(`${window.location.origin}${window.location.pathname}${window.location.hash}`); @@ -323,6 +346,43 @@ export function VehicleDetail({ ]} /> ); + const exportVehicleReport = () => { + if (!detail) { + Toast.warning('当前没有可导出的车辆档案'); + return; + } + const rows: VehicleReportRow[] = [ + { section: '身份档案', item: '车辆主键', value: reportText(displayVIN) }, + { section: '身份档案', item: '查询关键词', value: reportText(displayLookupKey) }, + { section: '身份档案', item: '车牌', value: reportText(archivePlate) }, + { section: '身份档案', item: '手机号', value: reportText(archivePhone) }, + { section: '身份档案', item: 'OEM', value: reportText(archiveOEM) }, + { section: '身份档案', item: '档案完整度', value: archiveCompleteness }, + { section: '身份档案', item: '档案缺项', value: reportText(archiveMissingLabels) }, + { section: '服务结论', item: '服务判断', value: serviceConclusion.status }, + { section: '服务结论', item: '主要风险', value: serviceConclusion.risk }, + { section: '服务结论', item: '下一步', value: serviceConclusion.nextStep }, + { section: '证据链', item: '来源证据', value: evidenceSourceCount > 0 ? `${evidenceOnlineSourceCount}/${evidenceSourceCount} 来源在线` : '-' }, + { section: '证据链', item: '定位证据', value: evidenceLocatedSourceCount > 0 ? `${evidenceLocatedSourceCount} 个来源有位置` : '暂无位置' }, + { section: '证据链', item: '里程差异', value: formatCompactNumber(evidenceMileageDelta, ' km') }, + { section: '证据链', item: '时间差异', value: formatSeconds(evidenceTimeDeltaSeconds) }, + { section: '证据链', item: '一致性结论', value: consistencyTitle }, + { section: '证据链', item: '一致性说明', value: consistencyDetail }, + { section: '数据规模', item: '历史记录', value: String(overview?.historyCount ?? detail.history.total ?? 0) }, + { section: '数据规模', item: 'RAW记录', value: String(overview?.rawCount ?? detail.raw.total ?? 0) }, + { section: '数据规模', item: '里程记录', value: String(overview?.mileageCount ?? detail.mileage.total ?? 0) }, + { section: '数据规模', item: '质量问题', value: String(qualityCount) } + ]; + for (const source of detail.sourceStatus ?? []) { + rows.push( + { section: `来源 ${source.protocol}`, item: '在线', value: source.online ? '在线' : '离线' }, + { section: `来源 ${source.protocol}`, item: '最后时间', value: reportText(source.lastSeen) }, + { section: `来源 ${source.protocol}`, item: '能力', value: sourceCapabilities.filter((item) => source[item.key]).map((item) => item.label).join('|') || '-' } + ); + } + downloadCsv(vehicleReportFileName(displayVIN, activeProtocol), buildCsv(vehicleReportColumns, rows)); + Toast.success('已导出车辆服务档案'); + }; return (
@@ -344,6 +404,7 @@ export function VehicleDetail({ + 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 56a732ba..e63f4e50 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -5271,6 +5271,101 @@ test('copies shareable vehicle service detail link', async () => { expect(writeText).toHaveBeenCalledWith(expect.stringContaining('/#/detail?keyword=VIN001&protocol=JT808')); }); +test('exports vehicle detail service dossier as csv', async () => { + window.history.replaceState(null, '', '/#/detail?keyword=VIN-REPORT-001&protocol=GB32960'); + const createObjectURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:vehicle-report'); + const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined); + const click = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => undefined); + const appendChild = vi.spyOn(document.body, 'appendChild'); + vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => { + const path = String(input); + if (path.includes('/api/vehicle-service')) { + return { + ok: true, + json: async () => ({ + data: { + vin: 'VIN-REPORT-001', + lookupKey: 'VIN-REPORT-001', + lookupResolved: true, + serviceOverview: { + vin: 'VIN-REPORT-001', + plate: '粤A档案导出', + phone: '13307795425', + oem: 'G7s', + protocols: ['GB32960', 'JT808', 'YUTONG_MQTT'], + primaryProtocol: 'GB32960', + coverageStatus: 'partial', + sourceCount: 3, + onlineSourceCount: 2, + lastSeen: '2026-07-03 20:12:10', + realtimeCount: 3, + historyCount: 12, + rawCount: 34, + mileageCount: 7, + qualityIssueCount: 1 + }, + serviceStatus: { + status: 'degraded', + severity: 'warning', + title: '来源不完整', + detail: '2/3 个来源在线', + sourceCount: 3, + onlineSourceCount: 2 + }, + sourceConsistency: { + sourceCount: 3, + onlineSourceCount: 2, + locatedSourceCount: 2, + missingProtocols: ['YUTONG_MQTT'], + mileageDeltaKm: 1.4, + sourceTimeDeltaSeconds: 125, + scope: 'vehicle', + status: 'degraded', + severity: 'warning', + title: '来源不完整', + detail: 'MQTT 离线,32960 与 808 仍可支撑车辆服务' + }, + sources: ['GB32960', 'JT808', 'YUTONG_MQTT'], + 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:12:08', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true }, + { protocol: 'YUTONG_MQTT', online: false, lastSeen: '2026-07-03 20:10:05', hasRealtime: true, hasHistory: false, hasRaw: true, hasMileage: false } + ], + realtime: [], + history: { items: [], total: 12, limit: 20, offset: 0 }, + raw: { items: [], total: 34, limit: 10, offset: 0 }, + mileage: { items: [], total: 7, limit: 20, offset: 0 }, + quality: { items: [], total: 1, limit: 20, offset: 0 } + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + return { + ok: true, + json: async () => ({ + data: path.includes('/api/ops/health') + ? { linkHealth: [], kafkaLag: 0, redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } } + : { items: [], total: 0, limit: 10, offset: 0 }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + }); + + render(); + + expect(await screen.findByText('车辆服务结论')).toBeInTheDocument(); + fireEvent.click(screen.getByRole('button', { name: /导出档案 CSV/ })); + + expect(createObjectURL).toHaveBeenCalled(); + expect(click).toHaveBeenCalled(); + expect(revokeObjectURL).toHaveBeenCalledWith('blob:vehicle-report'); + const link = appendChild.mock.calls.find(([node]) => node instanceof HTMLAnchorElement)?.[0] as HTMLAnchorElement | undefined; + expect(link?.download).toBe('vehicle-service-VIN-REPORT-001-GB32960.csv'); +}); + test('opens history with the currently selected vehicle detail source', async () => { window.history.replaceState(null, '', '/#/detail?keyword=VIN001'); vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {