feat(platform): export vehicle service dossier
This commit is contained in:
@@ -1,11 +1,12 @@
|
|||||||
import { Banner, Button, Card, Descriptions, Form, Select, Space, Table, Tabs, Tag, Toast, Typography } from '@douyinfe/semi-ui';
|
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 { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { api } from '../api/client';
|
import { api } from '../api/client';
|
||||||
import type { QualityIssueRow, RealtimeLocationRow, VehicleDetail as VehicleDetailData, VehicleSourceStatus } from '../api/types';
|
import type { QualityIssueRow, RealtimeLocationRow, VehicleDetail as VehicleDetailData, VehicleSourceStatus } from '../api/types';
|
||||||
import { PageHeader } from '../components/PageHeader';
|
import { PageHeader } from '../components/PageHeader';
|
||||||
import { SourceStatusTags } from '../components/SourceStatusTags';
|
import { SourceStatusTags } from '../components/SourceStatusTags';
|
||||||
import { StatusTag } from '../components/StatusTag';
|
import { StatusTag } from '../components/StatusTag';
|
||||||
|
import { buildCsv, downloadCsv, type CsvColumn } from '../domain/csvExport';
|
||||||
import { isLikelyVIN } from '../domain/vehicleLookup';
|
import { isLikelyVIN } from '../domain/vehicleLookup';
|
||||||
import { summarizeVehicleService } from '../domain/vehicleService';
|
import { summarizeVehicleService } from '../domain/vehicleService';
|
||||||
|
|
||||||
@@ -70,6 +71,28 @@ type VehicleServiceAction = {
|
|||||||
onClick: () => void;
|
onClick: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type VehicleReportRow = {
|
||||||
|
section: string;
|
||||||
|
item: string;
|
||||||
|
value: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const vehicleReportColumns: CsvColumn<VehicleReportRow>[] = [
|
||||||
|
{ 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() {
|
async function copyVehicleServiceURL() {
|
||||||
try {
|
try {
|
||||||
await navigator.clipboard.writeText(`${window.location.origin}${window.location.pathname}${window.location.hash}`);
|
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 (
|
return (
|
||||||
<div className="vp-page">
|
<div className="vp-page">
|
||||||
@@ -344,6 +404,7 @@ export function VehicleDetail({
|
|||||||
<Button icon={<IconSearch />} htmlType="submit" theme="solid" type="primary">查询车辆</Button>
|
<Button icon={<IconSearch />} htmlType="submit" theme="solid" type="primary">查询车辆</Button>
|
||||||
<Button icon={<IconRefresh />} onClick={() => load(query)} loading={loading}>刷新</Button>
|
<Button icon={<IconRefresh />} onClick={() => load(query)} loading={loading}>刷新</Button>
|
||||||
<Button icon={<IconCopy />} onClick={copyVehicleServiceURL}>复制服务链接</Button>
|
<Button icon={<IconCopy />} onClick={copyVehicleServiceURL}>复制服务链接</Button>
|
||||||
|
<Button disabled={!detail} icon={<IconDownload />} onClick={exportVehicleReport}>导出档案 CSV</Button>
|
||||||
<Button disabled={!hasResolvedVIN} onClick={() => onOpenRealtime(resolvedVIN, activeProtocol)}>查看实时</Button>
|
<Button disabled={!hasResolvedVIN} onClick={() => onOpenRealtime(resolvedVIN, activeProtocol)}>查看实时</Button>
|
||||||
<Button disabled={!hasResolvedVIN} onClick={() => onOpenHistory(resolvedVIN, activeProtocol)}>查看历史</Button>
|
<Button disabled={!hasResolvedVIN} onClick={() => onOpenHistory(resolvedVIN, activeProtocol)}>查看历史</Button>
|
||||||
<Button disabled={!hasResolvedVIN} onClick={() => onOpenRaw(resolvedVIN, activeProtocol)}>查看 RAW</Button>
|
<Button disabled={!hasResolvedVIN} onClick={() => onOpenRaw(resolvedVIN, activeProtocol)}>查看 RAW</Button>
|
||||||
|
|||||||
@@ -5271,6 +5271,101 @@ test('copies shareable vehicle service detail link', async () => {
|
|||||||
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('/#/detail?keyword=VIN001&protocol=JT808'));
|
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(<App />);
|
||||||
|
|
||||||
|
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 () => {
|
test('opens history with the currently selected vehicle detail source', async () => {
|
||||||
window.history.replaceState(null, '', '/#/detail?keyword=VIN001');
|
window.history.replaceState(null, '', '/#/detail?keyword=VIN001');
|
||||||
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user