feat(platform): export vehicle coverage results
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user