feat(platform): recommend vehicle detail actions
This commit is contained in:
lingniu
@@ -56,6 +56,14 @@ function sourceServiceRole(source: VehicleSourceStatus, primaryProtocol?: string
|
||||
return { label: '离线证据', color: 'grey' as const };
|
||||
}
|
||||
|
||||
type VehicleServiceAction = {
|
||||
key: string;
|
||||
label: string;
|
||||
description: string;
|
||||
color: 'green' | 'orange' | 'red' | 'blue';
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
async function copyVehicleServiceURL() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(`${window.location.origin}${window.location.pathname}${window.location.hash}`);
|
||||
@@ -214,6 +222,56 @@ export function VehicleDetail({
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
const serviceActions = useMemo<VehicleServiceAction[]>(() => {
|
||||
const actions: VehicleServiceAction[] = [];
|
||||
if (!hasResolvedVIN) {
|
||||
actions.push({
|
||||
key: 'identity',
|
||||
label: '维护身份绑定',
|
||||
description: `关键词 ${displayLookupKey} 暂未解析到 VIN，先补齐绑定后再看跨来源服务。`,
|
||||
color: 'orange',
|
||||
onClick: () => onOpenVehicles?.({ bindingStatus: 'unbound' })
|
||||
});
|
||||
}
|
||||
for (const item of missingProtocols) {
|
||||
actions.push({
|
||||
key: `missing-${item}`,
|
||||
label: `补齐 ${item} 来源`,
|
||||
description: `${item} 当前没有形成有效来源证据，会影响这辆车的统一服务可信度。`,
|
||||
color: 'orange',
|
||||
onClick: () => onOpenVehicles?.({ serviceStatus: 'degraded', missingProtocol: item })
|
||||
});
|
||||
}
|
||||
for (const source of detail?.sourceStatus ?? []) {
|
||||
if (source.online) continue;
|
||||
actions.push({
|
||||
key: `offline-${source.protocol}`,
|
||||
label: `排查 ${source.protocol} 离线`,
|
||||
description: `${source.protocol} 最后上报时间：${source.lastSeen || '无上报'}。`,
|
||||
color: 'orange',
|
||||
onClick: () => switchSource(source.protocol)
|
||||
});
|
||||
}
|
||||
if (qualityCount > 0) {
|
||||
actions.push({
|
||||
key: 'quality',
|
||||
label: `处理质量问题 ${qualityCount} 项`,
|
||||
description: '质量问题会影响车辆服务的定位、里程和实时状态可信度。',
|
||||
color: 'orange',
|
||||
onClick: () => onOpenQuality?.(qualityFiltersForCurrentVehicle())
|
||||
});
|
||||
}
|
||||
if (actions.length === 0 && hasResolvedVIN) {
|
||||
actions.push({
|
||||
key: 'healthy',
|
||||
label: '查看实时服务',
|
||||
description: '当前没有明确处置项，可直接查看该车统一实时状态。',
|
||||
color: 'green',
|
||||
onClick: () => onOpenRealtime(resolvedVIN, activeProtocol)
|
||||
});
|
||||
}
|
||||
return actions;
|
||||
}, [activeProtocol, detail?.sourceStatus, displayLookupKey, hasResolvedVIN, missingProtocols, onOpenQuality, onOpenRealtime, onOpenVehicles, qualityCount, resolvedVIN]);
|
||||
const qualityTable = (
|
||||
<Table
|
||||
loading={loading}
|
||||
@@ -315,6 +373,22 @@ export function VehicleDetail({
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
<Card bordered title="服务处置建议" style={{ marginTop: 16 }}>
|
||||
<div className="vp-action-grid">
|
||||
{serviceActions.map((item) => (
|
||||
<div key={item.key} className="vp-action-item">
|
||||
<div>
|
||||
<Tag color={item.color}>{item.label}</Tag>
|
||||
<Typography.Text type="secondary" style={{ display: 'block', marginTop: 8 }}>{item.description}</Typography.Text>
|
||||
</div>
|
||||
<Button size="small" theme="light" type={item.color === 'red' ? 'danger' : item.color === 'green' ? 'primary' : 'warning'} onClick={item.onClick}>
|
||||
{item.label}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card bordered style={{ marginTop: 16 }}>
|
||||
<div className="vp-vehicle-summary">
|
||||
<Descriptions
|
||||
|
||||
@@ -318,6 +318,28 @@ body {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.vp-action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.vp-action-item {
|
||||
min-height: 92px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--vp-border);
|
||||
border-radius: var(--vp-radius);
|
||||
background: #fbfcff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.vp-action-item > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vp-source-toolbar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -5223,3 +5223,105 @@ test('shows cross-source consistency for one vehicle service', async () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: '查看缺 YUTONG_MQTT 车辆' }));
|
||||
expect(window.location.hash).toBe('#/vehicles?serviceStatus=degraded&missingProtocol=YUTONG_MQTT');
|
||||
});
|
||||
|
||||
test('shows actionable vehicle service recommendations on detail', async () => {
|
||||
window.history.replaceState(null, '', '/#/detail?keyword=VIN-ACTION-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-ACTION-001',
|
||||
lookupKey: 'VIN-ACTION-001',
|
||||
lookupResolved: true,
|
||||
resolution: {
|
||||
lookupKey: 'VIN-ACTION-001',
|
||||
resolved: true,
|
||||
vin: 'VIN-ACTION-001',
|
||||
plate: '粤A处置1',
|
||||
phone: '13307795425',
|
||||
oem: 'G7s',
|
||||
protocols: ['GB32960', 'JT808', 'YUTONG_MQTT'],
|
||||
online: true,
|
||||
lastSeen: '2026-07-03T20:12:10+08:00'
|
||||
},
|
||||
realtimeSummary: {
|
||||
vin: 'VIN-ACTION-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'
|
||||
},
|
||||
serviceStatus: {
|
||||
status: 'degraded',
|
||||
severity: 'warning',
|
||||
title: '来源不完整',
|
||||
detail: '2/3 个来源在线，车辆服务可用但缺少 YUTONG_MQTT 来源。',
|
||||
sourceCount: 3,
|
||||
onlineSourceCount: 2
|
||||
},
|
||||
sourceConsistency: {
|
||||
sourceCount: 3,
|
||||
onlineSourceCount: 2,
|
||||
locatedSourceCount: 2,
|
||||
missingProtocols: ['YUTONG_MQTT'],
|
||||
mileageDeltaKm: 0.4,
|
||||
sourceTimeDeltaSeconds: 35,
|
||||
scope: 'all_sources',
|
||||
status: 'degraded',
|
||||
severity: 'warning',
|
||||
title: '来源不完整',
|
||||
detail: '2/3 个来源在线，车辆服务可用但缺少 YUTONG_MQTT 来源。'
|
||||
},
|
||||
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: false, hasRaw: true, hasMileage: false }
|
||||
],
|
||||
realtime: [],
|
||||
history: { items: [], total: 0, limit: 20, offset: 0 },
|
||||
raw: { items: [], total: 2, limit: 10, offset: 0 },
|
||||
mileage: { items: [], total: 0, limit: 20, offset: 0 },
|
||||
quality: { items: [], total: 3, 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.getByRole('button', { name: '补齐 YUTONG_MQTT 来源' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '处理质量问题 3 项' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '排查 YUTONG_MQTT 离线' })).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '补齐 YUTONG_MQTT 来源' }));
|
||||
expect(window.location.hash).toBe('#/vehicles?serviceStatus=degraded&missingProtocol=YUTONG_MQTT');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user