feat(platform): summarize realtime in vehicle detail

vehicle-data-platform/apps/web/src/api/types.ts

@@ -54,6 +54,7 @@ export interface VehicleCoverageRow {
 export interface VehicleDetail {
   vin: string;
   identity?: VehicleRow;
+  realtimeSummary?: VehicleRealtimeRow;
   sources: string[];
   sourceStatus: VehicleSourceStatus[];
   realtime: RealtimeLocationRow[];

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

@@ -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}

vehicle-data-platform/apps/web/src/styles/global.css

@@ -167,6 +167,36 @@ body {
   align-items: center;
 }
 
+.vp-realtime-strip {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.vp-realtime-strip-item {
+  min-height: 72px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+}
+
+.vp-realtime-strip-label {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-realtime-strip-value {
+  margin-top: 6px;
+  color: var(--vp-text);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22px;
+  word-break: break-all;
+}
+
 .semi-navigation-item-text {
   font-size: 14px;
 }