feat(platform): export vehicle coverage results

This commit is contained in:
lingniu
2026-07-04 11:02:33 +08:00
parent cd9d160f3e
commit 8dc64bd294
2 changed files with 143 additions and 14 deletions

View File

@@ -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<VehicleCoverageRow>[] = [
{ 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<string, string>) {
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 ? (
<DataEmpty />
) : (
<Table
loading={loading}
rowKey="vin"
dataSource={rows}
columns={columns}
pagination={{
currentPage: pagination.currentPage,
pageSize: pagination.pageSize,
total: pagination.total,
showSizeChanger: true,
onPageChange: (page) => load(filters, page, pagination.pageSize),
onPageSizeChange: (pageSize) => load(filters, 1, pageSize)
}}
/>
<>
<div className="vp-table-toolbar">
<Space wrap>
<Tag color="blue"> {rows.length.toLocaleString()} </Tag>
<Tag color="grey"> {pagination.total.toLocaleString()} </Tag>
<Button size="small" onClick={exportVehicles}> CSV</Button>
</Space>
</div>
<Table
loading={loading}
rowKey="vin"
dataSource={rows}
columns={columns}
pagination={{
currentPage: pagination.currentPage,
pageSize: pagination.pageSize,
total: pagination.total,
showSizeChanger: true,
onPageChange: (page) => load(filters, page, pagination.pageSize),
onPageSizeChange: (pageSize) => load(filters, 1, pageSize)
}}
/>
</>
)}
</Card>
</div>

View File

@@ -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(<App />);
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) => {