feat(platform): add vehicle command center

2026-07-04 11:15:56 +08:00
parent 688cf0a155
commit e94d0e348f
3 changed files with 228 additions and 4 deletions
--- a/vehicle-data-platform/apps/web/src/App.tsx
+++ b/vehicle-data-platform/apps/web/src/App.tsx
@@ -250,6 +250,12 @@ export default function App() {
    replaceQualityHash(filters);
  };

+  const openRealtime = (filters: Record<string, string> = {}) => {
+    setRealtimeFilters(filters);
+    setActivePage('realtime');
+    replaceRealtimeHash(filters);
+  };
+
  const openVehicle = async (keyword: string, protocol?: string) => {
    const lookupKey = keyword.trim();
    const nextProtocol = protocol?.trim() ?? '';
@@ -339,7 +345,7 @@ export default function App() {
  };

  const pages: Record<PageKey, JSX.Element> = {
-    dashboard: <Dashboard onOpenVehicle={openVehicle} onOpenQuality={() => openQuality(qualityFilters)} onOpenVehicles={openVehicles} />,
+    dashboard: <Dashboard onOpenVehicle={openVehicle} onOpenQuality={openQuality} onOpenRealtime={openRealtime} onOpenVehicles={openVehicles} />,
    vehicles: <Vehicles onOpenVehicle={openVehicle} onFiltersChange={updateVehicleFilters} initialFilters={vehicleFilters} />,
    realtime: <Realtime onOpenVehicle={openVehicle} onFiltersChange={updateRealtimeFilters} initialFilters={realtimeFilters} />,
    detail: <VehicleDetail vin={activeVin} protocol={activeProtocol} onOpenRealtime={openRealtimeForVehicle} onOpenHistory={openHistoryForVehicle} onOpenRaw={openRawForVehicle} onOpenMileage={openMileageForVehicle} onOpenVehicles={openVehicles} onOpenQuality={openQuality} onQueryChange={updateVehicleDetailQuery} />,
--- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
@@ -6,6 +6,8 @@ import type { DashboardSummary, LinkHealth, ProtocolStat, QualityIssueRow, Servi
 import { PageHeader } from '../components/PageHeader';
 import { SourceStatusTags } from '../components/SourceStatusTags';
 import { StatusTag } from '../components/StatusTag';
+import { VehicleMap, type VehicleMapPoint } from '../components/VehicleMap';
+import { isAMapConfigured } from '../config/appConfig';
 import { qualityIssueVehicleLookup } from '../domain/vehicleLookup';

 const statusColor: Record<string, 'green' | 'orange' | 'red' | 'grey'> = {
@@ -80,6 +82,10 @@ function sourceEvidenceText(row: { onlineSourceCount: number; sourceCount: numbe
  return `${row.onlineSourceCount}/${row.sourceCount} 来源在线`;
 }

+function hasValidCoordinate(row: VehicleRealtimeRow) {
+  return Number.isFinite(row.longitude) && Number.isFinite(row.latitude) && row.longitude !== 0 && row.latitude !== 0;
+}
+
 function sourceConsistencyAction(row: VehicleCoverageRow, onFilter: (filters: Record<string, string>) => void) {
  const consistency = row.sourceConsistency;
  if (!consistency) {
@@ -102,7 +108,17 @@ function sourceConsistencyAction(row: VehicleCoverageRow, onFilter: (filters: Re
  return <Tag color={color}>{label}</Tag>;
 }

-export function Dashboard({ onOpenVehicle, onOpenQuality, onOpenVehicles }: { onOpenVehicle: (vin: string, protocol?: string) => void; onOpenQuality: () => void; onOpenVehicles: (filters?: Record<string, string>) => void }) {
+export function Dashboard({
+  onOpenVehicle,
+  onOpenQuality,
+  onOpenRealtime,
+  onOpenVehicles
+}: {
+  onOpenVehicle: (vin: string, protocol?: string) => void;
+  onOpenQuality: (filters?: Record<string, string>) => void;
+  onOpenRealtime: (filters?: Record<string, string>) => void;
+  onOpenVehicles: (filters?: Record<string, string>) => void;
+}) {
  const [summary, setSummary] = useState<DashboardSummary | null>(null);
  const [serviceSummary, setServiceSummary] = useState<VehicleServiceSummary | null>(null);
  const [coverage, setCoverage] = useState<VehicleCoverageRow[]>([]);
@@ -112,6 +128,7 @@ export function Dashboard({ onOpenVehicle, onOpenQuality, onOpenVehicles }: { on
  const [coverageLoading, setCoverageLoading] = useState(false);
  const [coverageServiceStatusTitle, setCoverageServiceStatusTitle] = useState('');
  const [coverageFilters, setCoverageFilters] = useState<Record<string, string>>({});
+  const amapConfigured = isAMapConfigured();

  const loadCoverage = (values?: Record<string, string>) => {
    const nextValues = values ?? {};
@@ -210,6 +227,18 @@ export function Dashboard({ onOpenVehicle, onOpenQuality, onOpenVehicles }: { on
    }
    return items;
  }, [serviceSummary]);
+  const commandOnlineCount = locations.filter((row) => row.online).length;
+  const commandLocatedCount = locations.filter(hasValidCoordinate).length;
+  const commandDegradedCount = locations.filter((row) => row.onlineSourceCount <= 0 || row.onlineSourceCount < row.sourceCount).length;
+  const highPriorityIssue = qualityIssues.find((item) => item.severity === 'error') ?? qualityIssues[0];
+  const commandMapPoints: VehicleMapPoint[] = locations.map((row, index) => ({
+    id: row.vin || `${row.primaryProtocol || 'source'}-${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 || ''}`
+  }));

  return (
    <div className="vp-page">
@@ -234,10 +263,59 @@ export function Dashboard({ onOpenVehicle, onOpenQuality, onOpenVehicles }: { on
            <Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>
              {formatCount(summary?.issueVehicles)} 质量关注
            </Tag>
-            <Button size="small" theme="light" type={(summary?.issueVehicles ?? 0) > 0 ? 'warning' : 'tertiary'} onClick={onOpenQuality}>查看质量关注</Button>
+            <Button size="small" theme="light" type={(summary?.issueVehicles ?? 0) > 0 ? 'warning' : 'tertiary'} onClick={() => onOpenQuality()}>查看质量关注</Button>
            <Tag color={(summary?.kafkaLag ?? 0) > 0 ? 'orange' : 'green'}>Kafka Lag {formatLag(summary?.kafkaLag)}</Tag>
          </Space>
        </Card>
+        <Card
+          bordered
+          title="车辆态势指挥台"
+          style={{ marginBottom: 16 }}
+        >
+          <div className="vp-monitor-layout">
+            <div className="vp-monitor-map">
+              <div className="vp-monitor-map-header">
+                <Space wrap>
+                  <Tag color={amapConfigured ? 'green' : 'orange'}>
+                    {amapConfigured ? '高德地图配置就绪' : '高德地图待配置'}
+                  </Tag>
+                  <Tag color="green">在线 {commandOnlineCount.toLocaleString()} / {locations.length.toLocaleString()}</Tag>
+                  <Tag color="blue">有效定位 {commandLocatedCount.toLocaleString()}</Tag>
+                  <Tag color={commandDegradedCount > 0 ? 'orange' : 'green'}>降级/离线 {commandDegradedCount.toLocaleString()}</Tag>
+                </Space>
+              </div>
+              <VehicleMap
+                points={commandMapPoints}
+                maxFallbackPoints={80}
+                fallbackLabel="高德地图未配置，显示车辆态势坐标预览"
+              />
+            </div>
+            <div className="vp-monitor-side">
+              <div className="vp-monitor-metric">
+                <Tag color="green">实时作业</Tag>
+                <div className="vp-monitor-metric-value">{commandOnlineCount.toLocaleString()}</div>
+                <Typography.Text type="secondary">当前预览车辆在线数，进入实时监控可按车辆、来源和服务状态筛选。</Typography.Text>
+              </div>
+              <div className="vp-monitor-metric">
+                <Tag color={commandDegradedCount > 0 ? 'orange' : 'green'}>处置优先级</Tag>
+                <div className="vp-monitor-metric-value">{commandDegradedCount.toLocaleString()}</div>
+                <Typography.Text type="secondary">优先处理离线、无来源、身份未绑定和来源不完整车辆。</Typography.Text>
+              </div>
+              <Space vertical align="start">
+                <Button theme="solid" type="primary" onClick={() => onOpenRealtime({ online: 'online' })}>查看实时态势</Button>
+                <Button
+                  disabled={!highPriorityIssue?.issueType}
+                  theme="light"
+                  type="warning"
+                  onClick={() => onOpenQuality(highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {})}
+                >
+                  处理高优先级告警
+                </Button>
+                <Button theme="light" onClick={() => onOpenVehicles({ serviceStatus: 'degraded' })}>查看降级车辆</Button>
+              </Space>
+            </div>
+          </div>
+        </Card>
        {serviceActionQueue.length > 0 ? (
          <Card bordered title="车辆服务处置队列" style={{ marginBottom: 16 }}>
            <div className="vp-action-grid">
@@ -339,7 +417,7 @@ export function Dashboard({ onOpenVehicle, onOpenQuality, onOpenVehicles }: { on
          <Typography.Text>Kafka 当前消费积压：{formatLag(summary?.kafkaLag)}</Typography.Text>
        </Card>
        <Card
-          title={<Space><span>质量问题预览</span><Button size="small" onClick={onOpenQuality}>查看全部</Button></Space>}
+          title={<Space><span>质量问题预览</span><Button size="small" onClick={() => onOpenQuality()}>查看全部</Button></Space>}
          bordered
          style={{ marginTop: 16 }}
        >
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -211,6 +211,146 @@ test('dashboard presents one vehicle service operating posture', async () => {
  expect(screen.getByText('7 质量关注')).toBeInTheDocument();
 });

+test('dashboard exposes vehicle command center map actions', async () => {
+  window.history.replaceState(null, '', '/#/dashboard');
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/ops/health')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: { linkHealth: [], kafkaLag: 0, activeConnections: 0, capacityFindings: [], redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/dashboard/summary')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            onlineVehicles: 3,
+            activeToday: 4,
+            frameToday: 1286320,
+            issueVehicles: 7,
+            kafkaLag: 0,
+            protocols: [],
+            serviceStatuses: [],
+            linkHealth: []
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/vehicle-service/summary')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            totalVehicles: 1033,
+            boundVehicles: 1024,
+            onlineVehicles: 208,
+            singleSourceVehicles: 391,
+            multiSourceVehicles: 181,
+            noDataVehicles: 461,
+            identityRequiredVehicles: 9,
+            serviceStatuses: [],
+            protocols: [],
+            missingSources: []
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/realtime/vehicles')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            items: [
+              {
+                vin: 'VIN-COMMAND-001',
+                plate: '粤A指挥1',
+                protocols: ['GB32960', 'JT808', 'YUTONG_MQTT'],
+                primaryProtocol: 'GB32960',
+                sourceCount: 3,
+                onlineSourceCount: 2,
+                online: true,
+                longitude: 113.2,
+                latitude: 23.1,
+                speedKmh: 31,
+                socPercent: 78,
+                totalMileageKm: 100.5,
+                lastSeen: '2026-07-03 20:12:10'
+              },
+              {
+                vin: 'VIN-COMMAND-002',
+                plate: '粤A指挥2',
+                protocols: ['JT808'],
+                primaryProtocol: 'JT808',
+                sourceCount: 3,
+                onlineSourceCount: 0,
+                online: false,
+                longitude: 0,
+                latitude: 0,
+                lastSeen: '2026-07-03 19:55:10'
+              }
+            ],
+            total: 2,
+            limit: 8,
+            offset: 0
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/quality/issues')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            items: [{ vin: 'VIN-COMMAND-002', plate: '粤A指挥2', protocol: 'VEHICLE_SERVICE', issueType: 'NO_SOURCE', severity: 'error', detail: '无来源', lastSeen: '2026-07-03 19:55:10' }],
+            total: 1,
+            limit: 5,
+            offset: 0
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 8, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByText('车辆态势指挥台')).toBeInTheDocument();
+  expect(screen.getByText('在线 1 / 2')).toBeInTheDocument();
+  expect(screen.getByText('有效定位 1')).toBeInTheDocument();
+  expect(screen.getByText('降级/离线 2')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: '处理高优先级告警' }));
+  expect(window.location.hash).toBe('#/quality?issueType=NO_SOURCE');
+
+  cleanup();
+  window.history.replaceState(null, '', '/#/dashboard');
+  render(<App />);
+
+  expect(await screen.findByText('车辆态势指挥台')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: '查看实时态势' }));
+  expect(window.location.hash).toBe('#/realtime?online=online');
+});
+
 test('dashboard shows vehicle service action queue', async () => {
  window.history.replaceState(null, '', '/#/dashboard');
  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {