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>

vehicle-data-platform/apps/web/src/styles/global.css

@@ -3708,6 +3708,76 @@ button.vp-realtime-command-item:focus-visible {
   font-weight: 700;
 }
 
+.vp-map-area-monitor {
+  padding: 14px;
+  border: 1px solid rgba(11, 159, 119, 0.2);
+  border-radius: var(--vp-radius);
+  background: #f5fbf9;
+  display: grid;
+  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
+  gap: 12px;
+}
+
+.vp-map-area-monitor-summary {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+
+.vp-map-area-monitor-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-map-area-monitor-item {
+  min-height: 156px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfefc;
+  color: inherit;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.vp-map-area-monitor-item:hover,
+.vp-map-area-monitor-item:focus-visible {
+  border-color: rgba(11, 159, 119, 0.42);
+  box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08);
+  outline: none;
+}
+
+.vp-map-area-monitor-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.vp-map-area-monitor-item strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.vp-map-area-monitor-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-map-area-monitor-item em {
+  color: #0b9f77;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+}
+
 .vp-map-dispatch-actions {
   padding: 14px;
   border: 1px solid rgba(255, 127, 0, 0.2);
@@ -8752,6 +8822,8 @@ button.vp-realtime-command-item:focus-visible {
   .vp-map-decision-grid,
   .vp-map-dispatch-actions,
   .vp-map-dispatch-actions-grid,
+  .vp-map-area-monitor,
+  .vp-map-area-monitor-grid,
   .vp-map-kpi-strip,
   .vp-map-selected-service-strip,
   .vp-map-selected-service-actions,

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

@@ -9584,6 +9584,12 @@ test('shows realtime freshness status for recently updated and stale vehicles',
   expect(screen.getByRole('button', { name: '地图现场指挥 关注车辆 定位关注车' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '地图现场指挥 轨迹复盘 打开轨迹' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '地图现场指挥 通知证据 告警事件' })).toBeInTheDocument();
+  expect(screen.getByText('区域围栏监控')).toBeInTheDocument();
+  expect(screen.getByText('把地图从“看车在哪里”升级成区域运营工具：围栏、停留、越界和通知都从车辆位置态势进入。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '区域围栏监控 电子围栏 关注车辆' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '区域围栏监控 停留超时 轨迹复盘' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '区域围栏监控 越界通知 告警事件' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '区域围栏监控 区域报表 复制说明' })).toBeInTheDocument();
   expect(screen.getByText('地图调度处置栏')).toBeInTheDocument();
   expect(screen.getByText('把地图上的车辆直接转成调度动作：先处理关注车辆，再复盘选中车辆，最后导出交接证据。')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '地图调度处置栏 关注车辆 1 辆 告警事件' })).toBeInTheDocument();
@@ -9631,6 +9637,12 @@ test('shows realtime freshness status for recently updated and stale vehicles',
     expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【地图客户决策说明】'));
   });
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('定位判断：2 辆有有效坐标 / 0 辆无坐标'));
+  fireEvent.click(screen.getByRole('button', { name: '区域围栏监控 区域报表 复制说明' }));
+  await waitFor(() => {
+    expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【区域围栏监控说明】'));
+  });
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('区域态势：2 辆可定位 / 1 辆关注 / 坐标预览'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('告警通知：http://localhost:3000/#/alert-events?serviceStatus=degraded'));
   expect(screen.getByText('自定义时间窗复盘')).toBeInTheDocument();
   expect(screen.getByText('按车辆和时间窗复盘发生了什么')).toBeInTheDocument();
   fireEvent.click(screen.getByRole('button', { name: /复制时间窗包/ }));