feat(platform): copy vehicle governance summary
This commit is contained in:
@@ -115,6 +115,62 @@ function exportFileName(filters: Record<string, string>) {
|
|||||||
return `vehicle-coverage-${keyword}-${protocol}.csv`;
|
return `vehicle-coverage-${keyword}-${protocol}.csv`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type VehicleActionQueueItem = {
|
||||||
|
label: string;
|
||||||
|
count: number;
|
||||||
|
filters: Record<string, string>;
|
||||||
|
color: 'orange' | 'red';
|
||||||
|
priority: 'P0' | 'P1';
|
||||||
|
detail: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function vehicleFilterSummary(filters: Record<string, string>) {
|
||||||
|
return [
|
||||||
|
filters.keyword ? `关键词:${filters.keyword}` : '',
|
||||||
|
filters.protocol ? `数据来源:${filters.protocol}` : '',
|
||||||
|
filters.coverage ? `来源覆盖:${coverageLabel[filters.coverage] ?? filters.coverage}` : '',
|
||||||
|
filters.missingProtocol ? `缺失来源:${filters.missingProtocol}` : '',
|
||||||
|
filters.serviceStatus ? `服务状态:${serviceStatusLabel[filters.serviceStatus] ?? filters.serviceStatus}` : '',
|
||||||
|
filters.online ? `在线:${onlineLabel[filters.online] ?? filters.online}` : '',
|
||||||
|
filters.bindingStatus ? `绑定:${bindingStatusLabel[filters.bindingStatus] ?? filters.bindingStatus}` : '',
|
||||||
|
filters.archiveStatus ? `档案:${archiveStatusLabel[filters.archiveStatus] ?? filters.archiveStatus}` : '',
|
||||||
|
filters.archiveMissing ? `档案缺项:${archiveMissingLabel[filters.archiveMissing] ?? filters.archiveMissing}` : ''
|
||||||
|
].filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
function vehicleGovernanceSummaryText({
|
||||||
|
filters,
|
||||||
|
summary,
|
||||||
|
actionQueue
|
||||||
|
}: {
|
||||||
|
filters: Record<string, string>;
|
||||||
|
summary: VehicleCoverageSummary | null;
|
||||||
|
actionQueue: VehicleActionQueueItem[];
|
||||||
|
}) {
|
||||||
|
const archiveMissing = (summary?.archiveMissingFields ?? [])
|
||||||
|
.filter((item) => item.count > 0)
|
||||||
|
.map((item) => `${item.title} ${item.count.toLocaleString()}`)
|
||||||
|
.join('、') || '-';
|
||||||
|
const missingSources = (summary?.missingSources ?? [])
|
||||||
|
.filter((item) => item.count > 0)
|
||||||
|
.map((item) => `${item.protocol} ${item.count.toLocaleString()}`)
|
||||||
|
.join('、') || '-';
|
||||||
|
const actions = actionQueue.length > 0
|
||||||
|
? actionQueue.map((item) => `[${item.priority}] ${item.label} ${item.count.toLocaleString()}:${item.detail}`).join('\n')
|
||||||
|
: '暂无处置项';
|
||||||
|
return [
|
||||||
|
'【车辆治理摘要】',
|
||||||
|
`当前筛选:${vehicleFilterSummary(filters).join(';') || '全部车辆'}`,
|
||||||
|
`车辆总数:${(summary?.totalVehicles ?? 0).toLocaleString()},在线:${(summary?.onlineVehicles ?? 0).toLocaleString()}`,
|
||||||
|
`单源:${(summary?.singleSourceVehicles ?? 0).toLocaleString()},多源:${(summary?.multiSourceVehicles ?? 0).toLocaleString()},暂无来源:${(summary?.noDataVehicles ?? 0).toLocaleString()}`,
|
||||||
|
`待绑定:${(summary?.unboundVehicles ?? 0).toLocaleString()},档案不完整:${(summary?.archiveIncompleteVehicles ?? 0).toLocaleString()}`,
|
||||||
|
`档案缺项:${archiveMissing}`,
|
||||||
|
`缺失来源:${missingSources}`,
|
||||||
|
'处置队列:',
|
||||||
|
actions
|
||||||
|
].join('\n');
|
||||||
|
}
|
||||||
|
|
||||||
type VehicleActionRecommendation = {
|
type VehicleActionRecommendation = {
|
||||||
label: string;
|
label: string;
|
||||||
color: 'green' | 'orange' | 'red';
|
color: 'green' | 'orange' | 'red';
|
||||||
@@ -166,15 +222,19 @@ function sourceConsistencyAction(row: VehicleCoverageRow, onFilter: (filters: Re
|
|||||||
return <Tag color={color}>{label}</Tag>;
|
return <Tag color={color}>{label}</Tag>;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function copyVehicleShareURL() {
|
async function copyText(value: string, label: string) {
|
||||||
try {
|
try {
|
||||||
await navigator.clipboard.writeText(`${window.location.origin}${window.location.pathname}${window.location.hash}`);
|
await navigator.clipboard.writeText(value);
|
||||||
Toast.success('已复制筛选链接');
|
Toast.success(`已复制${label}`);
|
||||||
} catch {
|
} catch {
|
||||||
Toast.error('复制筛选链接失败');
|
Toast.error(`复制${label}失败`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function copyVehicleShareURL() {
|
||||||
|
await copyText(`${window.location.origin}${window.location.pathname}${window.location.hash}`, '筛选链接');
|
||||||
|
}
|
||||||
|
|
||||||
export function Vehicles({
|
export function Vehicles({
|
||||||
onOpenVehicle,
|
onOpenVehicle,
|
||||||
onOpenQuality,
|
onOpenQuality,
|
||||||
@@ -219,8 +279,8 @@ export function Vehicles({
|
|||||||
}
|
}
|
||||||
return items;
|
return items;
|
||||||
}, [pagination.total, summary]);
|
}, [pagination.total, summary]);
|
||||||
const actionQueue = useMemo<Array<{ label: string; count: number; filters: Record<string, string>; color: 'orange' | 'red'; priority: 'P0' | 'P1'; detail: string }>>(() => {
|
const actionQueue = useMemo<VehicleActionQueueItem[]>(() => {
|
||||||
const items: Array<{ label: string; count: number; filters: Record<string, string>; color: 'orange' | 'red'; priority: 'P0' | 'P1'; detail: string }> = [];
|
const items: VehicleActionQueueItem[] = [];
|
||||||
const unboundCount = summary?.unboundVehicles ?? 0;
|
const unboundCount = summary?.unboundVehicles ?? 0;
|
||||||
if (unboundCount > 0) {
|
if (unboundCount > 0) {
|
||||||
items.push({
|
items.push({
|
||||||
@@ -278,17 +338,7 @@ export function Vehicles({
|
|||||||
}
|
}
|
||||||
return items;
|
return items;
|
||||||
}, [summary]);
|
}, [summary]);
|
||||||
const filterSummary = [
|
const filterSummary = vehicleFilterSummary(filters);
|
||||||
filters.keyword ? `关键词:${filters.keyword}` : '',
|
|
||||||
filters.protocol ? `数据来源:${filters.protocol}` : '',
|
|
||||||
filters.coverage ? `来源覆盖:${coverageLabel[filters.coverage] ?? filters.coverage}` : '',
|
|
||||||
filters.missingProtocol ? `缺失来源:${filters.missingProtocol}` : '',
|
|
||||||
filters.serviceStatus ? `服务状态:${serviceStatusLabel[filters.serviceStatus] ?? filters.serviceStatus}` : '',
|
|
||||||
filters.online ? `在线:${onlineLabel[filters.online] ?? filters.online}` : '',
|
|
||||||
filters.bindingStatus ? `绑定:${bindingStatusLabel[filters.bindingStatus] ?? filters.bindingStatus}` : '',
|
|
||||||
filters.archiveStatus ? `档案:${archiveStatusLabel[filters.archiveStatus] ?? filters.archiveStatus}` : '',
|
|
||||||
filters.archiveMissing ? `档案缺项:${archiveMissingLabel[filters.archiveMissing] ?? filters.archiveMissing}` : ''
|
|
||||||
].filter(Boolean);
|
|
||||||
|
|
||||||
const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
|
const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
@@ -328,6 +378,9 @@ export function Vehicles({
|
|||||||
downloadCsv(exportFileName(filters), buildCsv(vehicleExportColumns, rows));
|
downloadCsv(exportFileName(filters), buildCsv(vehicleExportColumns, rows));
|
||||||
Toast.success(`已导出 ${rows.length} 条车辆结果`);
|
Toast.success(`已导出 ${rows.length} 条车辆结果`);
|
||||||
};
|
};
|
||||||
|
const copyGovernanceSummary = () => {
|
||||||
|
copyText(vehicleGovernanceSummaryText({ filters, summary, actionQueue }), '治理摘要');
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setFilters(initialFilters);
|
setFilters(initialFilters);
|
||||||
@@ -497,7 +550,16 @@ export function Vehicles({
|
|||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
) : null}
|
) : null}
|
||||||
<Card bordered title="当前车辆结果" style={{ marginTop: 16 }}>
|
<Card
|
||||||
|
bordered
|
||||||
|
title={(
|
||||||
|
<Space>
|
||||||
|
<span>当前车辆结果</span>
|
||||||
|
<Button size="small" theme="light" onClick={copyGovernanceSummary}>复制治理摘要</Button>
|
||||||
|
</Space>
|
||||||
|
)}
|
||||||
|
style={{ marginTop: 16 }}
|
||||||
|
>
|
||||||
<div className="vp-result-summary-grid">
|
<div className="vp-result-summary-grid">
|
||||||
{resultSummary.map((item) => (
|
{resultSummary.map((item) => (
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -972,6 +972,102 @@ test('exports current vehicle coverage page as csv', async () => {
|
|||||||
expect(revokeObjectURL).toHaveBeenCalledWith('blob:vehicle-coverage');
|
expect(revokeObjectURL).toHaveBeenCalledWith('blob:vehicle-coverage');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('copies vehicle governance summary from vehicle center', async () => {
|
||||||
|
window.history.replaceState(null, '', '/#/vehicles?missingProtocol=YUTONG_MQTT');
|
||||||
|
const writeText = vi.fn(() => Promise.resolve());
|
||||||
|
Object.defineProperty(navigator, 'clipboard', {
|
||||||
|
configurable: true,
|
||||||
|
value: { writeText }
|
||||||
|
});
|
||||||
|
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: 12,
|
||||||
|
onlineVehicles: 5,
|
||||||
|
singleSourceVehicles: 7,
|
||||||
|
multiSourceVehicles: 2,
|
||||||
|
noDataVehicles: 3,
|
||||||
|
unboundVehicles: 4,
|
||||||
|
archiveIncompleteVehicles: 6,
|
||||||
|
archiveMissingFields: [{ field: 'phone', title: '缺手机号', count: 3 }],
|
||||||
|
missingSources: [{ protocol: 'YUTONG_MQTT', count: 8 }]
|
||||||
|
},
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
if (path.includes('/api/vehicles/coverage')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: {
|
||||||
|
items: [{
|
||||||
|
vin: 'VIN-GOV-001',
|
||||||
|
plate: '粤A治理1',
|
||||||
|
phone: '',
|
||||||
|
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: 12,
|
||||||
|
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-GOV-001')).toBeInTheDocument();
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: '复制治理摘要' }));
|
||||||
|
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【车辆治理摘要】'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('当前筛选:缺失来源:YUTONG_MQTT'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('车辆总数:12,在线:5'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('单源:7,多源:2,暂无来源:3'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('待绑定:4,档案不完整:6'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('档案缺项:缺手机号 3'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('缺失来源:YUTONG_MQTT 8'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('处置队列:'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('[P0] 维护身份绑定 4'));
|
||||||
|
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('[P1] 补齐 YUTONG_MQTT 来源 8'));
|
||||||
|
});
|
||||||
|
|
||||||
test('filters vehicle list from recommended action', async () => {
|
test('filters vehicle list from recommended action', async () => {
|
||||||
window.history.replaceState(null, '', '/#/vehicles');
|
window.history.replaceState(null, '', '/#/vehicles');
|
||||||
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user