feat(platform): add vehicle command center

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