feat(platform): add customer map command center

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

@@ -513,6 +513,45 @@ function mapCustomerPackageText({
   ].filter(Boolean).join('\n');
 }
 
+function mapExecutiveControlPackageText({
+  filters,
+  rows,
+  total,
+  onlineCount,
+  locatedCount,
+  attentionCount,
+  selectedRow,
+  selectedProtocol,
+  amapConfigured
+}: {
+  filters: Record<string, string>;
+  rows: VehicleRealtimeRow[];
+  total: number;
+  onlineCount: number;
+  locatedCount: number;
+  attentionCount: number;
+  selectedRow?: VehicleRealtimeRow;
+  selectedProtocol?: string;
+  amapConfigured: boolean;
+}) {
+  const selectedVIN = selectedRow?.vin || '';
+  return [
+    '【客户车辆地图总控包】',
+    `当前筛选：${realtimeFilterSummary(filters).join('；') || '全部车辆'}`,
+    `地图总控：当前页 ${rows.length.toLocaleString()} / 总计 ${total.toLocaleString()}`,
+    `服务链路：实时找车 -> 轨迹回放 -> 围栏告警 -> 报表导出`,
+    `在线定位：${onlineCount.toLocaleString()} 在线；${locatedCount.toLocaleString()} 辆有坐标；${attentionCount.toLocaleString()} 辆关注`,
+    `地图能力：${amapConfigured ? '高德地图可用' : '坐标预览'}`,
+    `选中车辆：${selectedRow ? `${selectedRow.plate || '-'} / ${selectedVIN} / ${selectedProtocol || selectedRow.primaryProtocol || '-'}` : '未选择'}`,
+    selectedRow ? `选中车辆状态：${vehicleServiceStatus(selectedRow).label}；${dataFreshness(selectedRow).detail}` : '',
+    `实时地图：${appURL(buildAppHash({ page: 'map', protocol: filters.protocol, filters: { ...filters, online: filters.online || 'online' } }))}`,
+    selectedVIN ? `轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: selectedVIN, protocol: selectedProtocol }))}` : '',
+    `围栏告警：${appURL(buildAppHash({ page: 'alert-events', filters: { serviceStatus: 'degraded', ...(filters.protocol ? { protocol: filters.protocol } : {}) } }))}`,
+    selectedVIN ? `统计查询：${appURL(buildAppHash({ page: 'mileage', keyword: selectedVIN, protocol: selectedProtocol }))}` : '',
+    selectedVIN ? `历史导出：${appURL(buildAppHash({ page: 'history-query', keyword: selectedVIN, protocol: selectedProtocol, filters: { tab: 'raw', includeFields: 'true' } }))}` : ''
+  ].filter(Boolean).join('\n');
+}
+
 function selectedMapVehicleHandoffText(row: VehicleRealtimeRow, protocol: string) {
   const vin = row.vin || '';
   const vehicle = `${row.plate || '-'} / ${vin || '-'} / ${protocol || row.primaryProtocol || '-'}`;
@@ -1790,6 +1829,17 @@ export function Realtime({
     selectedProtocol: selectedVehicleProtocol,
     amapConfigured
   }), '客户地图监控包');
+  const copyMapExecutiveControlPackage = () => copyText(mapExecutiveControlPackageText({
+    filters,
+    rows,
+    total: pagination.total,
+    onlineCount,
+    locatedCount,
+    attentionCount: mapAttentionRows.length,
+    selectedRow: selectedMapRow,
+    selectedProtocol: selectedVehicleProtocol,
+    amapConfigured
+  }), '客户车辆地图总控包');
   const copyMapCustomerDecision = () => copyText(mapCustomerDecisionText({
     filters,
     rows,
@@ -1801,6 +1851,44 @@ export function Realtime({
     selectedProtocol: selectedVehicleProtocol,
     amapConfigured
   }), '地图客户决策说明');
+  const mapExecutiveControlItems = [
+    {
+      title: '实时找车',
+      value: `${onlineCount.toLocaleString()} 在线`,
+      detail: `${locatedCount.toLocaleString()} 辆有坐标，先确认客户当前能看见哪些车。`,
+      action: '打开地图',
+      color: onlineCount > 0 ? 'green' as const : 'orange' as const,
+      disabled: false,
+      onClick: () => applyFilters({ ...filters, online: 'online' })
+    },
+    {
+      title: '轨迹回放',
+      value: selectedMapRow?.plate || selectedMapRow?.vin || '先选车',
+      detail: selectedMapRow ? '围绕选中车辆回放位置、速度、里程和断点。' : '从地图或列表选择一辆车后进入轨迹回放。',
+      action: '回放轨迹',
+      color: selectedMapRow ? 'blue' as const : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      title: '围栏告警',
+      value: `${mapAttentionRows.length.toLocaleString()} 关注`,
+      detail: mapAttentionRows[0] ? `${mapAttentionRows[0].plate || mapAttentionRows[0].vin}：${realtimeIssueLabels(mapAttentionRows[0]).join('；')}` : '当前没有明显离线、超时或定位异常车辆。',
+      action: '告警通知',
+      color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const,
+      disabled: !onOpenQuality,
+      onClick: () => onOpenQuality?.({ serviceStatus: 'degraded', protocol: filters.protocol })
+    },
+    {
+      title: '报表导出',
+      value: `${rows.length.toLocaleString()} 当前页`,
+      detail: '导出当前地图车辆范围、在线状态、位置和服务状态。',
+      action: '导出报表',
+      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
+      disabled: rows.length === 0,
+      onClick: exportRealtime
+    }
+  ];
   const realtimeCustomerJourneyItems = [
     {
       step: '01',
@@ -2324,6 +2412,44 @@ export function Realtime({
             </aside>
           </section>
 
+          <div className="vp-map-service-rail" aria-label="客户车辆地图总控">
+            <div className="vp-map-service-rail-summary">
+              <Space wrap>
+                <Tag color="blue">客户车辆地图总控</Tag>
+                <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
+                <Tag color={mapAttentionRows.length > 0 ? 'orange' : 'green'}>
+                  {mapAttentionRows.length > 0 ? `${mapAttentionRows.length.toLocaleString()} 辆关注` : '态势稳定'}
+                </Tag>
+              </Space>
+              <Typography.Title heading={5} style={{ margin: 0 }}>把实时找车、轨迹回放、围栏告警和报表导出收敛成一条客户能直接使用的地图服务链路。</Typography.Title>
+              <Typography.Text type="secondary">
+                参考现代车队 Live Map 的使用方式，客户先看车辆是否在线和可定位，再围绕选中车辆完成复盘、通知和交付。
+              </Typography.Text>
+              <Space wrap>
+                <Button size="small" theme="solid" type="primary" icon={<IconCopy />} onClick={copyMapExecutiveControlPackage}>复制地图总控包</Button>
+                <Button size="small" disabled={!selectedMapRow || !canOpenVehicle(selectedMapRow.vin)} onClick={() => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)}>轨迹回放</Button>
+                <Button size="small" disabled={!onOpenQuality} onClick={() => onOpenQuality?.({ serviceStatus: 'degraded', protocol: filters.protocol })}>告警通知</Button>
+              </Space>
+            </div>
+            <div className="vp-map-service-rail-actions">
+              {mapExecutiveControlItems.map((item) => (
+                <button
+                  key={item.title}
+                  type="button"
+                  className="vp-map-service-rail-action"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                  aria-label={`客户车辆地图总控 ${item.title} ${item.value} ${item.action}`}
+                >
+                  <Tag color={item.color}>{item.title}</Tag>
+                  <strong>{item.value}</strong>
+                  <span>{item.detail}</span>
+                  <em>{item.action}</em>
+                </button>
+              ))}
+            </div>
+          </div>
+
           <section className="vp-live-map-decision-strip" aria-label="Live Map 决策条">
             <div className="vp-live-map-decision-copy">
               <Space wrap>

vehicle-data-platform/apps/web/src/test/App.test.tsx

@@ -11446,6 +11446,13 @@ test('shows realtime freshness status for recently updated and stale vehicles',
   expect(screen.getByText('把 32960、808、MQTT 收敛成同一张车辆地图：看位置、判在线、选车辆、回放轨迹、处理告警和导出证据。')).toBeInTheDocument();
   expect(screen.getByText('高德地图底座')).toBeInTheDocument();
   expect(screen.getByText('来源证据仅用于筛选和追溯，不作为客户主路径。')).toBeInTheDocument();
+  expect(screen.getByText('客户车辆地图总控')).toBeInTheDocument();
+  expect(screen.getByText('把实时找车、轨迹回放、围栏告警和报表导出收敛成一条客户能直接使用的地图服务链路。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户车辆地图总控 实时找车 1 在线 打开地图' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户车辆地图总控 轨迹回放 粤A超时1 回放轨迹' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户车辆地图总控 围栏告警 1 关注 告警通知' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户车辆地图总控 报表导出 2 当前页 导出报表' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: /复制地图总控包/ })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '车辆服务地图任务 实时监控 1 在线' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '车辆服务地图任务 轨迹回放 粤A超时1' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '车辆服务地图任务 历史查询 JT808' })).toBeInTheDocument();
@@ -11504,6 +11511,14 @@ test('shows realtime freshness status for recently updated and stale vehicles',
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('问题：'));
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('天未更新；JT808 离线'));
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('车辆服务：http://localhost:3000/#/detail?keyword=VIN-STALE-001&protocol=JT808'));
+  fireEvent.click(screen.getByRole('button', { name: /复制地图总控包/ }));
+  await waitFor(() => {
+    expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【客户车辆地图总控包】'));
+  });
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('地图总控：当前页 2 / 总计 2'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('服务链路：实时找车 -> 轨迹回放 -> 围栏告警 -> 报表导出'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('实时地图：http://localhost:3000/#/map?'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('选中车辆：粤A超时1 / VIN-STALE-001 / JT808'));
   fireEvent.click(screen.getByRole('button', { name: /复制地图监控包/ }));
   await waitFor(() => {
     expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【客户地图监控包】'));