feat(platform): add realtime map service queue

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

@@ -34,6 +34,15 @@ function sourceEvidenceText(row: VehicleRealtimeRow) {
   return `${row.onlineSourceCount}/${row.sourceCount} 来源在线`;
 }
 
+function serviceStatusWeight(row: VehicleRealtimeRow) {
+  const severity = row.serviceStatus?.severity;
+  if (severity === 'error') return 4;
+  if (severity === 'warning') return 3;
+  if (row.onlineSourceCount <= 0) return 4;
+  if (row.onlineSourceCount < row.sourceCount) return 3;
+  return 1;
+}
+
 function isValidCoordinate(row: VehicleRealtimeRow) {
   return Number.isFinite(row.longitude) && Number.isFinite(row.latitude) && row.longitude !== 0 && row.latitude !== 0;
 }
@@ -101,13 +110,21 @@ export function Realtime({
   const locatedCount = rows.filter(isValidCoordinate).length;
   const degradedCount = rows.filter((row) => row.onlineSourceCount < row.sourceCount).length;
   const primaryProtocols = new Set(rows.map((row) => row.primaryProtocol).filter(Boolean));
+  const mapServiceRows = rows
+    .filter((row) => isValidCoordinate(row) && canOpenVehicle(row.vin))
+    .sort((a, b) => {
+      const statusDelta = serviceStatusWeight(b) - serviceStatusWeight(a);
+      if (statusDelta !== 0) return statusDelta;
+      return String(b.lastSeen ?? '').localeCompare(String(a.lastSeen ?? ''));
+    })
+    .slice(0, 5);
   const mapPoints: VehicleMapPoint[] = rows.map((row, index) => ({
     id: row.vin || `${row.primaryProtocol}-${index}`,
     label: row.plate || row.vin || 'unknown',
     longitude: row.longitude,
     latitude: row.latitude,
     online: row.online,
-    title: `${row.plate || row.vin || '-'} ${row.primaryProtocol || ''} ${row.lastSeen || ''}`
+    title: `${row.plate || row.vin || '-'} ${vehicleServiceStatus(row).label} ${row.primaryProtocol || ''} ${row.lastSeen || ''}`
   }));
 
   return (
@@ -184,6 +201,34 @@ export function Realtime({
             <Typography.Text type="secondary">
               高德 Web JS Key 和安全密钥通过运行环境配置，前端只读取公开 Key；安全密钥后续走服务端代理，避免明文下发。
             </Typography.Text>
+            <div className="vp-map-service-queue">
+              <div className="vp-map-service-queue-title">地图车辆服务队列</div>
+              {mapServiceRows.length === 0 ? (
+                <Typography.Text type="tertiary">暂无可定位车辆</Typography.Text>
+              ) : (
+                mapServiceRows.map((row) => {
+                  const status = vehicleServiceStatus(row);
+                  return (
+                    <div key={`${row.vin}-${row.primaryProtocol}`} className="vp-map-service-item">
+                      <div className="vp-map-service-item-main">
+                        <div>
+                          <Typography.Text strong>{row.plate || row.vin}</Typography.Text>
+                          <Typography.Text type="tertiary" size="small">{row.vin}</Typography.Text>
+                        </div>
+                        <Tag color={status.color}>{status.label}</Tag>
+                      </div>
+                      <Typography.Text type="secondary" size="small">
+                        {row.serviceStatus?.detail || sourceEvidenceText(row)}
+                      </Typography.Text>
+                      <div className="vp-map-service-item-footer">
+                        <Typography.Text type="tertiary" size="small">{row.lastSeen || '-'}</Typography.Text>
+                        <Button size="small" onClick={() => onOpenVehicle(row.vin, filters.protocol || row.primaryProtocol)}>地图车辆服务</Button>
+                      </div>
+                    </div>
+                  );
+                })
+              )}
+            </div>
           </div>
         </div>
         <Tabs type="line">