From 16dd9feb1ccbc84ab4f46829cdc87ae7373ce4ec Mon Sep 17 00:00:00 2001 From: lingniu Date: Sat, 4 Jul 2026 09:24:46 +0800 Subject: [PATCH] feat(platform): recommend vehicle detail actions --- .../apps/web/src/pages/VehicleDetail.tsx | 74 +++++++++++++ .../apps/web/src/styles/global.css | 22 ++++ .../apps/web/src/test/App.test.tsx | 102 ++++++++++++++++++ 3 files changed, 198 insertions(+) diff --git a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx index 015e3269..5dd900c1 100644 --- a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx +++ b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx @@ -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({ ); }; + const serviceActions = useMemo(() => { + 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 = ( ) : null} + +
+ {serviceActions.map((item) => ( +
+
+ {item.label} + {item.description} +
+ +
+ ))} +
+ +
div { + min-width: 0; +} + .vp-source-toolbar { margin-bottom: 12px; } diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx index 9ff17956..94e6b10e 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -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(); + + 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'); +});