feat(platform): add map area monitoring workspace

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

@@ -554,6 +554,39 @@ function mapCustomerDecisionText({
   ].filter(Boolean).join('\n');
 }
 
+function mapAreaMonitorText({
+  filters,
+  rows,
+  locatedCount,
+  attentionCount,
+  selectedRow,
+  selectedProtocol,
+  amapConfigured
+}: {
+  filters: Record<string, string>;
+  rows: VehicleRealtimeRow[];
+  locatedCount: number;
+  attentionCount: number;
+  selectedRow?: VehicleRealtimeRow;
+  selectedProtocol?: string;
+  amapConfigured: boolean;
+}) {
+  const selectedVIN = selectedRow?.vin || '';
+  return [
+    '【区域围栏监控说明】',
+    `当前筛选：${realtimeFilterSummary(filters).join('；') || '全部车辆'}`,
+    `区域态势：${locatedCount.toLocaleString()} 辆可定位 / ${attentionCount.toLocaleString()} 辆关注 / ${amapConfigured ? '高德地图可用' : '坐标预览'}`,
+    `车辆范围：当前页 ${rows.length.toLocaleString()} 辆`,
+    `围栏建议：先用有效定位车辆作为区域覆盖基础，再对离线、超时、越界和长时间停留车辆触发告警通知。`,
+    selectedRow ? `选中车辆：${selectedRow.plate || '-'} / ${selectedVIN} / ${selectedProtocol || selectedRow.primaryProtocol || '-'}` : '选中车辆：未选择',
+    selectedRow ? `选中车辆位置：${isValidCoordinate(selectedRow) ? `${selectedRow.longitude},${selectedRow.latitude}` : '无有效坐标'}` : '',
+    `实时地图：${appURL(buildAppHash({ page: 'map', protocol: filters.protocol, filters }))}`,
+    `关注车辆：${appURL(buildAppHash({ page: 'map', protocol: filters.protocol, filters: { ...filters, serviceStatus: 'degraded' } }))}`,
+    selectedVIN ? `轨迹复盘：${appURL(buildAppHash({ page: 'history', keyword: selectedVIN, protocol: selectedProtocol }))}` : '',
+    `告警通知：${appURL(buildAppHash({ page: 'alert-events', filters: { serviceStatus: 'degraded' } }))}`
+  ].filter(Boolean).join('\n');
+}
+
 function buildRealtimeSourceCoverage(rows: VehicleRealtimeRow[]) {
   const sourceMap = new Map<string, RealtimeSourceCoverage>();
   rows.forEach((row) => {
@@ -1164,6 +1197,53 @@ export function Realtime({
       onClick: () => mapAttentionRows.length > 0 && onOpenQuality ? onOpenQuality({ serviceStatus: 'degraded' }) : copyMapCustomerPackage()
     }
   ];
+  const copyMapAreaMonitor = () => copyText(mapAreaMonitorText({
+    filters,
+    rows,
+    locatedCount,
+    attentionCount: mapAttentionRows.length,
+    selectedRow: selectedMapRow,
+    selectedProtocol: selectedVehicleProtocol,
+    amapConfigured
+  }), '区域围栏监控说明');
+  const mapAreaMonitorItems = [
+    {
+      title: '电子围栏',
+      value: `${locatedCount.toLocaleString()} 辆可定位`,
+      detail: '先把有效定位车辆作为围栏覆盖基础，后续按区域配置越界和进出围栏规则。',
+      color: locatedCount > 0 ? 'blue' as const : 'orange' as const,
+      action: '关注车辆',
+      disabled: false,
+      onClick: () => applyFilters({ ...filters, serviceStatus: 'degraded' })
+    },
+    {
+      title: '停留超时',
+      value: selectedVehicleLabel,
+      detail: selectedMapRow ? '围绕选中车辆回放轨迹，识别停留、低速和异常时间窗。' : '先选择车辆，再进入轨迹复盘判断停留时长。',
+      color: selectedMapRow ? 'blue' as const : 'grey' as const,
+      action: '轨迹复盘',
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      title: '越界通知',
+      value: mapAttentionRows.length > 0 ? `${mapAttentionRows.length.toLocaleString()} 辆关注` : '暂无越界',
+      detail: mapAttentionRows.length > 0 ? '将离线、超时、坐标异常车辆交给告警事件形成通知闭环。' : '当前区域态势稳定，可继续巡检。',
+      color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const,
+      action: '告警事件',
+      disabled: !onOpenQuality,
+      onClick: () => onOpenQuality?.({ serviceStatus: 'degraded' })
+    },
+    {
+      title: '区域报表',
+      value: `${rows.length.toLocaleString()} 辆当前页`,
+      detail: '复制区域监控说明，交付当前围栏态势、关注车辆和后续通知链接。',
+      color: 'blue' as const,
+      action: '复制说明',
+      disabled: false,
+      onClick: copyMapAreaMonitor
+    }
+  ];
   const mapDispatchActionItems = [
     {
       title: '关注车辆',
@@ -1713,6 +1793,37 @@ export function Realtime({
             </div>
           </div>
 
+          <div className="vp-map-area-monitor">
+            <div className="vp-map-area-monitor-summary">
+              <Space wrap>
+                <Tag color="blue">区域围栏监控</Tag>
+                <Tag color={locatedCount > 0 ? 'green' : 'orange'}>{locatedCount.toLocaleString()} 辆可定位</Tag>
+                <Tag color={mapAttentionRows.length > 0 ? 'orange' : 'green'}>{mapAttentionRows.length.toLocaleString()} 辆关注</Tag>
+              </Space>
+              <Typography.Title heading={5} style={{ margin: 0 }}>把地图从“看车在哪里”升级成区域运营工具：围栏、停留、越界和通知都从车辆位置态势进入。</Typography.Title>
+              <Typography.Text type="secondary">
+                电子围栏先依赖实时定位和关注车辆，后续可接入客户区域配置、进出围栏事件和周期区域报表。
+              </Typography.Text>
+            </div>
+            <div className="vp-map-area-monitor-grid">
+              {mapAreaMonitorItems.map((item) => (
+                <button
+                  key={item.title}
+                  type="button"
+                  className="vp-map-area-monitor-item"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                  aria-label={`区域围栏监控 ${item.title} ${item.action}`}
+                >
+                  <Tag color={item.color}>{item.title}</Tag>
+                  <strong>{item.value}</strong>
+                  <span>{item.detail}</span>
+                  <em>{item.action}</em>
+                </button>
+              ))}
+            </div>
+          </div>
+
           <div className="vp-map-dispatch-actions">
             <div className="vp-map-dispatch-actions-summary">
               <Space wrap>