feat(platform): add map monitoring task strip

2026-07-05 02:14:00 +08:00
parent 13ef1779ac
commit 5d9576c5c7
3 changed files with 143 additions and 2 deletions
--- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
@@ -730,6 +730,69 @@ export function Realtime({
    { label: '有效定位', value: locatedCount.toLocaleString(), color: locatedCount > 0 ? 'green' as const : 'orange' as const, helper: `定位率 ${formatPercent(locatedRate)}` },
    { label: '需关注', value: mapAttentionRows.length.toLocaleString(), color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const, helper: `${staleCount.toLocaleString()} 辆更新超时` }
  ];
+  const selectedVehicleProtocol = selectedMapRow ? filters.protocol || selectedMapRow.primaryProtocol || '' : '';
+  const openSelectedVehicleRaw = () => {
+    if (!selectedMapRow || !canOpenVehicle(selectedMapRow.vin)) {
+      Toast.warning('请先选择可查询的车辆');
+      return;
+    }
+    window.location.hash = buildAppHash({
+      page: 'history-query',
+      keyword: selectedMapRow.vin,
+      protocol: selectedVehicleProtocol,
+      filters: { tab: 'raw', includeFields: 'true' }
+    });
+  };
+  const mapCustomerTasks = [
+    {
+      title: '实时盯车',
+      value: `${onlineCount.toLocaleString()} 在线`,
+      detail: '先看在线车辆和有效定位，确认客户当前能看到车在哪里。',
+      color: 'green' as const,
+      primaryAction: '只看在线',
+      secondaryAction: '刷新地图',
+      onPrimary: () => applyFilters({ ...filters, online: 'online' }),
+      onSecondary: () => load(filters, pagination.currentPage, pagination.pageSize),
+      disabled: false,
+      secondaryDisabled: false
+    },
+    {
+      title: '异常优先',
+      value: `${mapAttentionRows.length.toLocaleString()} 辆关注`,
+      detail: mapAttentionRows[0] ? `${mapAttentionRows[0].plate || mapAttentionRows[0].vin}：${realtimeIssueLabels(mapAttentionRows[0]).join('；')}` : '当前筛选下暂无需要关注的车辆。',
+      color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const,
+      primaryAction: '关注车辆',
+      secondaryAction: '告警事件',
+      onPrimary: () => applyFilters({ ...filters, serviceStatus: 'degraded' }),
+      onSecondary: () => onOpenQuality?.({ serviceStatus: 'degraded' }),
+      disabled: !onOpenQuality && mapAttentionRows.length === 0,
+      secondaryDisabled: !onOpenQuality
+    },
+    {
+      title: '轨迹复盘',
+      value: selectedMapRow?.plate || selectedMapRow?.vin || '未选车辆',
+      detail: selectedMapRow ? `围绕 ${selectedMapRow.plate || selectedMapRow.vin} 回放位置、速度和里程变化。` : '从地图或车辆队列选择一辆车后回放轨迹。',
+      color: selectedMapRow ? 'blue' as const : 'grey' as const,
+      primaryAction: '轨迹回放',
+      secondaryAction: '车辆档案',
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onPrimary: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol),
+      onSecondary: () => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol),
+      secondaryDisabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin)
+    },
+    {
+      title: '数据交付',
+      value: `${rows.length.toLocaleString()} 辆当前页`,
+      detail: '导出当前车辆清单，或进入选中车辆的原始记录证据。',
+      color: 'blue' as const,
+      primaryAction: '导出当前页',
+      secondaryAction: '原始记录',
+      onPrimary: exportRealtime,
+      onSecondary: openSelectedVehicleRaw,
+      disabled: false,
+      secondaryDisabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin)
+    }
+  ];

  if (mode === 'map') {
    return (
@@ -780,6 +843,40 @@ export function Realtime({
          ))}
        </div>

+        <div className="vp-map-task-strip">
+          {mapCustomerTasks.map((item) => (
+            <div key={item.title} className="vp-map-task-item">
+              <div className="vp-map-task-head">
+                <Tag color={item.color}>{item.title}</Tag>
+                <strong>{item.value}</strong>
+              </div>
+              <Typography.Text type="secondary">{item.detail}</Typography.Text>
+              <Space wrap>
+                <Button
+                  size="small"
+                  theme="solid"
+                  type="primary"
+                  disabled={item.disabled}
+                  aria-label={`地图监控任务 ${item.title} ${item.primaryAction}`}
+                  onClick={item.onPrimary}
+                >
+                  {item.primaryAction}
+                </Button>
+                <Button
+                  size="small"
+                  theme="light"
+                  type="primary"
+                  disabled={item.disabled || item.secondaryDisabled}
+                  aria-label={`地图监控任务 ${item.title} ${item.secondaryAction}`}
+                  onClick={item.onSecondary}
+                >
+                  {item.secondaryAction}
+                </Button>
+              </Space>
+            </div>
+          ))}
+        </div>
+
        <div className="vp-map-workspace">
          <section className="vp-map-canvas-panel">
            <div className="vp-map-canvas-toolbar">
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -985,6 +985,41 @@ button.vp-realtime-command-item:focus-visible {
  line-height: 18px;
 }

+.vp-map-task-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-map-task-item {
+  min-height: 158px;
+  padding: 14px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: var(--vp-surface);
+  display: grid;
+  align-content: space-between;
+  gap: 12px;
+}
+
+.vp-map-task-head {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.vp-map-task-head strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  word-break: break-word;
+}
+
+.vp-map-task-item .semi-typography {
+  font-size: 13px;
+  line-height: 20px;
+}
+
 .vp-map-workspace {
  min-height: 680px;
  display: grid;
@@ -3223,6 +3258,7 @@ button.vp-realtime-command-item:focus-visible {
  .vp-realtime-impact-grid,
  .vp-source-coverage-grid,
  .vp-map-kpi-strip,
+  .vp-map-task-strip,
  .vp-map-workspace,
  .vp-runbook-grid,
  .vp-workbench-grid,
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -192,7 +192,7 @@ test('exposes AMap operations shortcuts when map key is configured', async () =>
  fireEvent.click(screen.getByRole('button', { name: '顶部地图态势' }));
  expect(window.location.hash).toBe('#/map');
  expect(await screen.findByRole('heading', { name: '车辆实时地图' })).toBeInTheDocument();
-  expect(screen.getByText('关注车辆')).toBeInTheDocument();
+  expect(screen.getAllByText('关注车辆').length).toBeGreaterThanOrEqual(1);
  expect(screen.getByText('车辆列表')).toBeInTheDocument();
  fireEvent.click(screen.getByRole('button', { name: '顶部实时监控' }));
  expect(window.location.hash).toBe('#/realtime');
@@ -9016,7 +9016,15 @@ test('shows realtime freshness status for recently updated and stale vehicles',
  expect(await screen.findByRole('heading', { name: '车辆实时地图' })).toBeInTheDocument();
  expect(screen.getAllByText('数据新鲜').length).toBeGreaterThan(0);
  expect(screen.getAllByText('更新超时').length).toBeGreaterThan(0);
-  expect(screen.getByText('关注车辆')).toBeInTheDocument();
+  expect(screen.getByText('实时盯车')).toBeInTheDocument();
+  expect(screen.getByText('异常优先')).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.getAllByText('关注车辆').length).toBeGreaterThanOrEqual(1);
  expect(screen.getByText('选中车辆')).toBeInTheDocument();
  expect(screen.getByText('车辆列表')).toBeInTheDocument();
  expect(screen.getByText('1 辆更新超时')).toBeInTheDocument();