feat(platform): add live map decision strip

2026-07-06 03:19:40 +08:00
parent 89214a6b7f
commit 6a15503c7b
3 changed files with 244 additions and 0 deletions
--- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
@@ -1650,6 +1650,73 @@ export function Realtime({
      color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const
    }
  ];
+  const liveMapDecisionItems = [
+    {
+      label: '在线覆盖',
+      value: `${onlineCount.toLocaleString()} / ${rows.length.toLocaleString()}`,
+      detail: `${(rows.length - onlineCount).toLocaleString()} 辆离线，在线率 ${formatPercent(onlineRate)}。`,
+      color: onlineCount > 0 ? 'green' as const : 'orange' as const,
+      onClick: () => applyFilters({ ...filters, online: 'online' })
+    },
+    {
+      label: '定位覆盖',
+      value: `${locatedCount.toLocaleString()} / ${rows.length.toLocaleString()}`,
+      detail: `${missingCoordinateCount.toLocaleString()} 辆无坐标，定位率 ${formatPercent(locatedRate)}。`,
+      color: locatedCount > 0 ? 'blue' as const : 'orange' as const,
+      onClick: () => load(filters, pagination.currentPage, pagination.pageSize)
+    },
+    {
+      label: '优先处理',
+      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,
+      onClick: () => {
+        if (mapAttentionRows[0]) {
+          selectRealtimeRow(mapAttentionRows[0]);
+          return;
+        }
+        applyFilters({ ...filters, serviceStatus: 'degraded' });
+      }
+    },
+    {
+      label: '当前选车',
+      value: selectedVehicleLabel,
+      detail: selectedMapRow ? `${vehicleServiceStatus(selectedMapRow).label} / ${dataFreshness(selectedMapRow).detail}` : '从地图或车辆列表选择车辆。',
+      color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol)
+    }
+  ];
+  const liveMapDecisionActions = [
+    {
+      label: '只看在线',
+      action: '在线',
+      color: 'green' as const,
+      disabled: false,
+      onClick: () => applyFilters({ ...filters, online: 'online' })
+    },
+    {
+      label: '定位关注',
+      action: '关注车',
+      color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const,
+      disabled: mapAttentionRows.length === 0,
+      onClick: () => mapAttentionRows[0] && selectRealtimeRow(mapAttentionRows[0])
+    },
+    {
+      label: '轨迹复盘',
+      action: '轨迹',
+      color: selectedMapRow ? 'blue' as const : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      label: '导出地图',
+      action: 'CSV',
+      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
+      disabled: rows.length === 0,
+      onClick: exportRealtime
+    }
+  ];
  const copyMapCustomerPackage = () => copyText(mapCustomerPackageText({
    filters,
    rows,
@@ -2196,6 +2263,55 @@ export function Realtime({
            </aside>
          </section>

+          <section className="vp-live-map-decision-strip" aria-label="Live Map 决策条">
+            <div className="vp-live-map-decision-copy">
+              <Space wrap>
+                <Tag color="blue">Live Map 决策条</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">
+                这条决策条把地图、在线、轨迹、统计、导出和告警放到同一条服务路径里，协议来源只保留为证据。
+              </Typography.Text>
+            </div>
+            <div className="vp-live-map-decision-grid">
+              {liveMapDecisionItems.map((item) => (
+                <button
+                  key={item.label}
+                  type="button"
+                  className="vp-live-map-decision-item"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                  aria-label={`Live Map 决策条 ${item.label} ${item.value}`}
+                >
+                  <Tag color={item.color}>{item.label}</Tag>
+                  <strong>{item.value}</strong>
+                  <span>{item.detail}</span>
+                </button>
+              ))}
+            </div>
+            <div className="vp-live-map-decision-actions">
+              {liveMapDecisionActions.map((item) => (
+                <button
+                  key={item.label}
+                  type="button"
+                  className="vp-live-map-decision-action"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                  aria-label={`Live Map 决策动作 ${item.label} ${item.action}`}
+                >
+                  <Tag color={item.color}>{item.label}</Tag>
+                  <span>{item.action}</span>
+                </button>
+              ))}
+            </div>
+          </section>
+
          <section className="vp-map-status-filter-strip" aria-label="地图状态筛选条">
            <div className="vp-map-status-filter-copy">
              <Space wrap>
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -4669,6 +4669,115 @@ body {
  overflow: hidden;
 }

+.vp-live-map-decision-strip {
+  margin-bottom: 16px;
+  border: 1px solid rgba(11, 159, 119, 0.18);
+  border-radius: 8px;
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.1fr) minmax(180px, 0.45fr);
+  overflow: hidden;
+}
+
+.vp-live-map-decision-copy {
+  padding: 16px;
+  border-right: 1px solid var(--vp-border);
+  background: #f6fbf9;
+  display: grid;
+  gap: 10px;
+  align-content: center;
+}
+
+.vp-live-map-decision-copy .semi-typography {
+  line-height: 22px;
+}
+
+.vp-live-map-decision-grid {
+  padding: 12px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-live-map-decision-item {
+  min-height: 116px;
+  padding: 12px;
+  border: 1px solid rgba(11, 159, 119, 0.14);
+  border-radius: 8px;
+  background: #fbfefc;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  gap: 7px;
+  align-content: start;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+}
+
+.vp-live-map-decision-item:hover,
+.vp-live-map-decision-item:focus-visible,
+.vp-live-map-decision-action:hover,
+.vp-live-map-decision-action:focus-visible {
+  border-color: rgba(11, 159, 119, 0.4);
+  background: #f5fbf8;
+  box-shadow: var(--vp-shadow-sm);
+  outline: none;
+}
+
+.vp-live-map-decision-item:disabled,
+.vp-live-map-decision-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.vp-live-map-decision-item strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  word-break: break-word;
+}
+
+.vp-live-map-decision-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
+.vp-live-map-decision-actions {
+  padding: 12px;
+  border-left: 1px solid var(--vp-border);
+  background: #fbfefc;
+  display: grid;
+  gap: 8px;
+  align-content: center;
+}
+
+.vp-live-map-decision-action {
+  min-height: 44px;
+  padding: 8px 10px;
+  border: 1px solid rgba(11, 159, 119, 0.14);
+  border-radius: 8px;
+  background: #ffffff;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.vp-live-map-decision-action span {
+  color: var(--vp-success);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
 .vp-map-status-filter-copy {
  padding: 16px;
  border-right: 1px solid var(--vp-border);
@@ -13828,6 +13937,8 @@ button.vp-realtime-command-item:focus-visible {
  .vp-stat-audit-grid,
  .vp-map-field-command,
  .vp-map-field-command-grid,
+  .vp-live-map-decision-strip,
+  .vp-live-map-decision-grid,
  .vp-trip-workbench .semi-card-body,
  .vp-trip-workbench-facts,
  .vp-trajectory-decision-board,
@@ -13897,6 +14008,13 @@ button.vp-realtime-command-item:focus-visible {
    border-bottom: 1px solid var(--vp-border);
  }

+  .vp-live-map-decision-copy,
+  .vp-live-map-decision-actions {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 1px solid var(--vp-border);
+  }
+
  .vp-customer-fleet-groups-copy {
    border-right: 0;
    border-bottom: 1px solid var(--vp-border);
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -10890,6 +10890,16 @@ test('shows realtime freshness status for recently updated and stale vehicles',
  expect(screen.getAllByText('更新超时').length).toBeGreaterThan(0);
  expect(screen.getByText('车辆服务闭环')).toBeInTheDocument();
  expect(screen.getByText('客户从这里完成看车、选车、查轨迹、查历史、查统计、收告警和导出。')).toBeInTheDocument();
+  expect(screen.getByText('Live Map 决策条')).toBeInTheDocument();
+  expect(screen.getByText('客户进来先判断四件事：哪些车在线、哪些车能定位、哪辆车要先处理、选中车辆下一步做什么。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Live Map 决策条 在线覆盖 1 / 2' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Live Map 决策条 定位覆盖 2 / 2' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Live Map 决策条 优先处理 1 关注' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Live Map 决策条 当前选车 粤A超时1' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Live Map 决策动作 只看在线 在线' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Live Map 决策动作 定位关注 关注车' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Live Map 决策动作 轨迹复盘 轨迹' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Live Map 决策动作 导出地图 CSV' })).toBeInTheDocument();
  expect(screen.getByText('客户地图监控包')).toBeInTheDocument();
  expect(screen.getByText('车辆范围')).toBeInTheDocument();
  expect(screen.getByText('在线态势')).toBeInTheDocument();