feat(platform): add customer map monitoring package

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

@@ -436,6 +436,50 @@ function realtimeImpactReportText({
   ].join('\n');
 }
 
+function mapCustomerPackageText({
+  filters,
+  rows,
+  total,
+  onlineCount,
+  locatedCount,
+  attentionCount,
+  staleCount,
+  selectedRow,
+  selectedProtocol,
+  amapConfigured
+}: {
+  filters: Record<string, string>;
+  rows: VehicleRealtimeRow[];
+  total: number;
+  onlineCount: number;
+  locatedCount: number;
+  attentionCount: number;
+  staleCount: number;
+  selectedRow?: VehicleRealtimeRow;
+  selectedProtocol?: string;
+  amapConfigured: boolean;
+}) {
+  const selectedVIN = selectedRow?.vin || '';
+  return [
+    '【客户地图监控包】',
+    `当前筛选：${realtimeFilterSummary(filters).join('；') || '全部车辆'}`,
+    `车辆范围：当前页 ${rows.length.toLocaleString()} / 总计 ${total.toLocaleString()}`,
+    `在线态势：${onlineCount.toLocaleString()} 在线 / ${(rows.length - onlineCount).toLocaleString()} 离线`,
+    `定位态势：${locatedCount.toLocaleString()} 辆有有效坐标`,
+    `关注车辆：${attentionCount.toLocaleString()} 辆；更新超时 ${staleCount.toLocaleString()} 辆`,
+    `地图能力：${amapConfigured ? '高德地图可用' : '坐标预览'}`,
+    `选中车辆：${selectedRow ? `${selectedRow.plate || '-'} / ${selectedVIN} / ${selectedProtocol || selectedRow.primaryProtocol || '-'}` : '未选择'}`,
+    selectedRow ? `选中车辆状态：${vehicleServiceStatus(selectedRow).label}；${dataFreshness(selectedRow).detail}；${realtimeIssueLabels(selectedRow).join('；')}` : '',
+    selectedRow ? `选中车辆位置：${isValidCoordinate(selectedRow) ? `${selectedRow.longitude},${selectedRow.latitude}` : '无有效坐标'}` : '',
+    `实时地图：${appURL(buildAppHash({ page: 'map', protocol: filters.protocol, filters }))}`,
+    selectedVIN ? `车辆服务：${appURL(buildAppHash({ page: 'detail', keyword: selectedVIN, protocol: selectedProtocol }))}` : '',
+    selectedVIN ? `轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: selectedVIN, protocol: selectedProtocol }))}` : '',
+    selectedVIN ? `里程统计：${appURL(buildAppHash({ page: 'mileage', keyword: selectedVIN, protocol: selectedProtocol }))}` : '',
+    selectedVIN ? `历史数据：${appURL(buildAppHash({ page: 'history-query', keyword: selectedVIN, protocol: selectedProtocol, filters: { tab: 'raw', includeFields: 'true' } }))}` : '',
+    selectedVIN ? `告警通知：${appURL(buildAppHash({ page: 'alert-events', keyword: selectedVIN, protocol: selectedProtocol }))}` : ''
+  ].filter(Boolean).join('\n');
+}
+
 function buildRealtimeSourceCoverage(rows: VehicleRealtimeRow[]) {
   const sourceMap = new Map<string, RealtimeSourceCoverage>();
   rows.forEach((row) => {
@@ -842,6 +886,50 @@ export function Realtime({
       secondaryDisabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin)
     }
   ];
+  const mapCustomerPackageItems = [
+    {
+      label: '车辆范围',
+      value: `${rows.length.toLocaleString()} / ${pagination.total.toLocaleString()}`,
+      detail: `当前筛选覆盖 ${formatPercent(pageCoverageRate)}`,
+      color: pageCoverageRate >= 100 ? 'green' as const : 'blue' as const
+    },
+    {
+      label: '在线态势',
+      value: `${onlineCount.toLocaleString()} 在线`,
+      detail: `${(rows.length - onlineCount).toLocaleString()} 辆离线`,
+      color: rows.length - onlineCount > 0 ? 'orange' as const : 'green' as const
+    },
+    {
+      label: '定位态势',
+      value: `${locatedCount.toLocaleString()} 有坐标`,
+      detail: `定位率 ${formatPercent(locatedRate)}`,
+      color: locatedCount > 0 ? 'green' as const : 'orange' as const
+    },
+    {
+      label: '关注车辆',
+      value: `${mapAttentionRows.length.toLocaleString()} 辆`,
+      detail: `${staleCount.toLocaleString()} 辆更新超时`,
+      color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const
+    },
+    {
+      label: '选中车辆',
+      value: selectedVehicleLabel,
+      detail: selectedMapRow ? `${vehicleServiceStatus(selectedMapRow).label} / ${dataFreshness(selectedMapRow).detail}` : '从地图或车辆列表选择',
+      color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const
+    }
+  ];
+  const copyMapCustomerPackage = () => copyText(mapCustomerPackageText({
+    filters,
+    rows,
+    total: pagination.total,
+    onlineCount,
+    locatedCount,
+    attentionCount: mapAttentionRows.length,
+    staleCount,
+    selectedRow: selectedMapRow,
+    selectedProtocol: selectedVehicleProtocol,
+    amapConfigured
+  }), '客户地图监控包');
 
   if (mode === 'map') {
     return (
@@ -926,6 +1014,37 @@ export function Realtime({
           ))}
         </div>
 
+        <div className="vp-map-customer-package">
+          <div className="vp-map-customer-package-summary">
+            <Typography.Text strong>客户地图监控包</Typography.Text>
+            <Space wrap>
+              <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
+              <Tag color={mapAttentionRows.length > 0 ? 'orange' : 'green'}>
+                {mapAttentionRows.length > 0 ? '存在关注车辆' : '地图态势稳定'}
+              </Tag>
+            </Space>
+            <Typography.Text strong>{selectedVehicleLabel}</Typography.Text>
+            <Typography.Text type="secondary">
+              面向客户看图时，先确认车辆范围、在线态势、定位态势和选中车辆，再进入轨迹、里程、历史数据或告警通知。
+            </Typography.Text>
+            <Space wrap>
+              <Button size="small" theme="solid" type="primary" icon={<IconCopy />} onClick={copyMapCustomerPackage}>复制地图监控包</Button>
+              <Button size="small" disabled={!selectedMapRow || !canOpenVehicle(selectedMapRow.vin)} onClick={() => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)}>轨迹回放</Button>
+              <Button size="small" disabled={!selectedMapRow || !canOpenVehicle(selectedMapRow.vin)} onClick={() => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol)}>车辆服务</Button>
+              <Button size="small" disabled={!selectedMapRow || !canOpenVehicle(selectedMapRow.vin)} onClick={openSelectedVehicleRaw}>历史数据</Button>
+            </Space>
+          </div>
+          <div className="vp-map-customer-package-grid">
+            {mapCustomerPackageItems.map((item) => (
+              <div key={item.label} className="vp-map-customer-package-item">
+                <Tag color={item.color}>{item.label}</Tag>
+                <strong>{item.value}</strong>
+                <span>{item.detail}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
         <div className="vp-map-vehicle-workbench">
           <div className="vp-map-vehicle-workbench-head">
             <div>