shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(platform): summarize realtime in vehicle detail

Browse Source
This commit is contained in:
lingniu
2026-07-03 23:12:27 +08:00
parent 37f9d7a307
commit 55b069e27d
6 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx
View File

@@ -40,10 +40,13 @@ export function VehicleDetail({ vin }: { vin: string }) {
}, [vin]);
const identity = detail?.identity;
const summary = detail?.realtimeSummary;
const latest = detail?.realtime[0];
const protocols = useMemo(() => detail?.sources ?? [], [detail?.sources]);
const latestRaw = detail?.raw.items[0];
const qualityCount = detail?.quality.total ?? 0;
const online = summary?.online || identity?.online || false;
const lastSeen = summary?.lastSeen || latest?.lastSeen || '-';
return (
<div className="vp-page">
@@ -72,13 +75,17 @@ export function VehicleDetail({ vin }: { vin: string }) {
<Descriptions
row
data={[
{ key: 'VIN', value: identity?.vin ?? latest?.vin ?? query.vin },
{ key: '车牌', value: identity?.plate || latest?.plate || '-' },
{ key: '手机号', value: identity?.phone || '-' },
{ key: 'OEM', value: identity?.oem || '-' },
{ key: '在线', value: <StatusTag status={identity?.online || latest ? 'ok' : 'offline'} /> },
{ key: '来源协议', value: protocols.length > 0 ? <Space>{protocols.map((item) => <Tag key={item} color="blue">{item}</Tag>)}</Space> : '-' },
{ key: '最后位置时间', value: latest?.lastSeen ?? '-' },
{ key: 'VIN', value: summary?.vin ?? identity?.vin ?? latest?.vin ?? query.vin },
{ key: '车牌', value: summary?.plate || identity?.plate || latest?.plate || '-' },
{ key: '手机号', value: summary?.phone || identity?.phone || '-' },
{ key: 'OEM', value: summary?.oem || identity?.oem || '-' },
{ key: '在线', value: <StatusTag status={online ? 'ok' : 'offline'} /> },
{
key: '来源协议',
value: protocols.length > 0 ? <Space>{protocols.map((item) => <Tag key={item} color={item === summary?.primaryProtocol ? 'blue' : 'grey'}>{item}</Tag>)}</Space> : '-'
},
{ key: '在线来源', value: summary ? `${summary.onlineSourceCount}/${summary.sourceCount}` : '-' },
{ key: '最后位置时间', value: lastSeen },
{ key: '最新 RAW 时间', value: latestRaw?.serverTime ?? '-' },
{ key: '质量问题', value: <Tag color={qualityCount > 0 ? 'orange' : 'green'}>{qualityCount > 0 ? `${qualityCount} 项` : '无'}</Tag> }
]}
@@ -107,6 +114,21 @@ export function VehicleDetail({ vin }: { vin: string }) {
<Card bordered style={{ marginTop: 16 }}>
<Tabs>
<Tabs.TabPane tab="实时状态" itemKey="realtime">
<div className="vp-realtime-strip">
{[
{ label: '最新来源', value: summary?.primaryProtocol || '-' },
{ label: '速度 km/h', value: summary ? summary.speedKmh : '-' },
{ label: 'SOC %', value: summary ? summary.socPercent : '-' },
{ label: '总里程 km', value: summary ? summary.totalMileageKm : '-' },
{ label: '经纬度', value: summary ? `${summary.longitude}, ${summary.latitude}` : '-' },
{ label: '最后时间', value: lastSeen }
].map((item) => (
<div key={item.label} className="vp-realtime-strip-item">
<div className="vp-realtime-strip-label">{item.label}</div>
<div className="vp-realtime-strip-value">{item.value}</div>
</div>
))}
</div>
<Table
loading={loading}
pagination={false}