feat(platform-web): show source consistency
This commit is contained in:
@@ -26,6 +26,26 @@ const coverageStatusText: Record<string, string> = {
|
|||||||
no_data: '暂无来源'
|
no_data: '暂无来源'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function isFiniteNumber(value: unknown): value is number {
|
||||||
|
return typeof value === 'number' && Number.isFinite(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatCompactNumber(value?: number, suffix = '') {
|
||||||
|
if (!isFiniteNumber(value)) return '-';
|
||||||
|
return `${value.toLocaleString(undefined, { maximumFractionDigits: 1 })}${suffix}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseTimeMs(value?: string) {
|
||||||
|
if (!value) return undefined;
|
||||||
|
const ms = Date.parse(value);
|
||||||
|
return Number.isFinite(ms) ? ms : undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatSeconds(value?: number) {
|
||||||
|
if (!isFiniteNumber(value)) return '-';
|
||||||
|
return `${Math.round(value)} 秒`;
|
||||||
|
}
|
||||||
|
|
||||||
export function VehicleDetail({
|
export function VehicleDetail({
|
||||||
vin,
|
vin,
|
||||||
protocol,
|
protocol,
|
||||||
@@ -96,6 +116,20 @@ export function VehicleDetail({
|
|||||||
const online = resolution?.online || summary?.online || identity?.online || false;
|
const online = resolution?.online || summary?.online || identity?.online || false;
|
||||||
const lastSeen = resolution?.lastSeen || summary?.lastSeen || latest?.lastSeen || '-';
|
const lastSeen = resolution?.lastSeen || summary?.lastSeen || latest?.lastSeen || '-';
|
||||||
const serviceStatus = detail?.serviceStatus;
|
const serviceStatus = detail?.serviceStatus;
|
||||||
|
const realtimeRows = detail?.realtime ?? [];
|
||||||
|
const realtimeSources = new Set(realtimeRows.map((row) => row.protocol).filter(Boolean));
|
||||||
|
const sourceCount = Math.max(detail?.sourceStatus?.length ?? 0, realtimeSources.size, summary?.sourceCount ?? 0, protocols.length);
|
||||||
|
const onlineSourceCount = detail?.sourceStatus?.length
|
||||||
|
? detail.sourceStatus.filter((source) => source.online).length
|
||||||
|
: summary?.onlineSourceCount ?? 0;
|
||||||
|
const locatedSourceCount = realtimeRows.filter((row) => isFiniteNumber(row.longitude) && isFiniteNumber(row.latitude)).length;
|
||||||
|
const mileageValues = realtimeRows.map((row) => row.totalMileageKm).filter(isFiniteNumber);
|
||||||
|
const mileageDelta = mileageValues.length > 1 ? Math.max(...mileageValues) - Math.min(...mileageValues) : undefined;
|
||||||
|
const timeValues = [
|
||||||
|
...realtimeRows.map((row) => parseTimeMs(row.lastSeen)),
|
||||||
|
...(detail?.sourceStatus ?? []).map((source) => parseTimeMs(source.lastSeen))
|
||||||
|
].filter(isFiniteNumber);
|
||||||
|
const sourceTimeDeltaSeconds = timeValues.length > 1 ? (Math.max(...timeValues) - Math.min(...timeValues)) / 1000 : undefined;
|
||||||
const activeProtocol = query.protocol?.trim() ?? '';
|
const activeProtocol = query.protocol?.trim() ?? '';
|
||||||
const scopeText = activeProtocol ? `单一来源:${activeProtocol}` : '全部来源聚合';
|
const scopeText = activeProtocol ? `单一来源:${activeProtocol}` : '全部来源聚合';
|
||||||
const formKey = `${query.keyword}-${query.protocol ?? ''}`;
|
const formKey = `${query.keyword}-${query.protocol ?? ''}`;
|
||||||
@@ -284,6 +318,20 @@ export function VehicleDetail({
|
|||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
<Card bordered title="跨来源一致性" style={{ marginTop: 16 }}>
|
||||||
|
<Descriptions
|
||||||
|
row
|
||||||
|
data={[
|
||||||
|
{ key: '来源覆盖', value: sourceCount > 0 ? `${sourceCount} 个来源` : '-' },
|
||||||
|
{ key: '在线来源', value: sourceCount > 0 ? `${onlineSourceCount}/${sourceCount} 在线` : '-' },
|
||||||
|
{ key: '位置覆盖', value: locatedSourceCount > 0 ? `${locatedSourceCount} 个来源有位置` : '暂无位置' },
|
||||||
|
{ key: '里程差异', value: formatCompactNumber(mileageDelta, ' km') },
|
||||||
|
{ key: '来源时间差', value: formatSeconds(sourceTimeDeltaSeconds) },
|
||||||
|
{ key: '车辆服务视角', value: activeProtocol ? `当前只看 ${activeProtocol}` : '三类来源合并为同一车辆服务' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card bordered title="来源诊断明细" style={{ marginTop: 16 }}>
|
<Card bordered title="来源诊断明细" style={{ marginTop: 16 }}>
|
||||||
<Table
|
<Table
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
|||||||
@@ -1720,3 +1720,87 @@ test('shows selected source scope on vehicle detail', async () => {
|
|||||||
expect(screen.getByText('部分来源离线')).toBeInTheDocument();
|
expect(screen.getByText('部分来源离线')).toBeInTheDocument();
|
||||||
expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/vehicle-service?keyword=VIN001&protocol=JT808'), undefined);
|
expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/vehicle-service?keyword=VIN001&protocol=JT808'), undefined);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('shows cross-source consistency for one vehicle service', async () => {
|
||||||
|
window.history.replaceState(null, '', '/#/detail?keyword=VIN-CONSISTENCY-001');
|
||||||
|
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-CONSISTENCY-001',
|
||||||
|
lookupKey: 'VIN-CONSISTENCY-001',
|
||||||
|
lookupResolved: true,
|
||||||
|
resolution: {
|
||||||
|
lookupKey: 'VIN-CONSISTENCY-001',
|
||||||
|
resolved: true,
|
||||||
|
vin: 'VIN-CONSISTENCY-001',
|
||||||
|
plate: '粤A一致1',
|
||||||
|
phone: '13307795425',
|
||||||
|
oem: 'G7s',
|
||||||
|
protocols: ['GB32960', 'JT808', 'YUTONG_MQTT'],
|
||||||
|
online: true,
|
||||||
|
lastSeen: '2026-07-03 20:12:10'
|
||||||
|
},
|
||||||
|
realtimeSummary: {
|
||||||
|
vin: 'VIN-CONSISTENCY-001',
|
||||||
|
plate: '粤A一致1',
|
||||||
|
phone: '13307795425',
|
||||||
|
oem: 'G7s',
|
||||||
|
protocols: ['GB32960', 'JT808', 'YUTONG_MQTT'],
|
||||||
|
sourceCount: 3,
|
||||||
|
onlineSourceCount: 2,
|
||||||
|
online: true,
|
||||||
|
bindingStatus: 'bound',
|
||||||
|
primaryProtocol: 'GB32960',
|
||||||
|
longitude: 113.2,
|
||||||
|
latitude: 23.1,
|
||||||
|
speedKmh: 32,
|
||||||
|
socPercent: 78,
|
||||||
|
totalMileageKm: 1000.5,
|
||||||
|
lastSeen: '2026-07-03T20:12:10+08:00'
|
||||||
|
},
|
||||||
|
sources: ['GB32960', 'JT808', 'YUTONG_MQTT'],
|
||||||
|
sourceStatus: [
|
||||||
|
{ protocol: 'GB32960', online: true, lastSeen: '2026-07-03T20:12:10+08:00', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true },
|
||||||
|
{ protocol: 'JT808', online: true, lastSeen: '2026-07-03T20:12:05+08:00', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true },
|
||||||
|
{ protocol: 'YUTONG_MQTT', online: false, lastSeen: '2026-07-03T20:11:40+08:00', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true }
|
||||||
|
],
|
||||||
|
realtime: [
|
||||||
|
{ vin: 'VIN-CONSISTENCY-001', plate: '粤A一致1', protocol: 'GB32960', longitude: 113.2, latitude: 23.1, speedKmh: 32, socPercent: 78, totalMileageKm: 1000.5, lastSeen: '2026-07-03T20:12:10+08:00' },
|
||||||
|
{ vin: 'VIN-CONSISTENCY-001', plate: '粤A一致1', protocol: 'JT808', longitude: 113.201, latitude: 23.101, speedKmh: 30, socPercent: 0, totalMileageKm: 1000.8, lastSeen: '2026-07-03T20:12:05+08:00' },
|
||||||
|
{ vin: 'VIN-CONSISTENCY-001', plate: '粤A一致1', protocol: 'YUTONG_MQTT', longitude: 113.2, latitude: 23.1, speedKmh: 31, socPercent: 77, totalMileageKm: 1000.7, lastSeen: '2026-07-03T20:11:40+08:00' }
|
||||||
|
],
|
||||||
|
history: { items: [], total: 0, limit: 20, offset: 0 },
|
||||||
|
raw: { items: [], total: 0, limit: 10, offset: 0 },
|
||||||
|
mileage: { items: [], total: 0, limit: 20, offset: 0 },
|
||||||
|
quality: { items: [], total: 0, 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();
|
||||||
|
expect(screen.getByText('3 个来源')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('2/3 在线')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('3 个来源有位置')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('0.3 km')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('30 秒')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user