feat(platform): add customer map decision panel

2026-07-05 03:35:58 +08:00
parent 5cb2509457
commit 8052bf4af4
3 changed files with 220 additions and 4 deletions
--- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
@@ -480,6 +480,47 @@ function mapCustomerPackageText({
  ].filter(Boolean).join('\n');
 }

+function mapCustomerDecisionText({
+  filters,
+  rows,
+  total,
+  onlineCount,
+  locatedCount,
+  attentionRows,
+  selectedRow,
+  selectedProtocol,
+  amapConfigured
+}: {
+  filters: Record<string, string>;
+  rows: VehicleRealtimeRow[];
+  total: number;
+  onlineCount: number;
+  locatedCount: number;
+  attentionRows: VehicleRealtimeRow[];
+  selectedRow?: VehicleRealtimeRow;
+  selectedProtocol?: string;
+  amapConfigured: boolean;
+}) {
+  const selectedVIN = selectedRow?.vin || '';
+  const topAttention = attentionRows[0];
+  return [
+    '【地图客户决策说明】',
+    `当前筛选：${realtimeFilterSummary(filters).join('；') || '全部车辆'}`,
+    `车辆范围：当前页 ${rows.length.toLocaleString()} / 总计 ${total.toLocaleString()}`,
+    `在线判断：${onlineCount.toLocaleString()} 在线 / ${(rows.length - onlineCount).toLocaleString()} 离线`,
+    `定位判断：${locatedCount.toLocaleString()} 辆有有效坐标 / ${Math.max(0, rows.length - locatedCount).toLocaleString()} 辆无坐标`,
+    `关注判断：${attentionRows.length.toLocaleString()} 辆需要关注${topAttention ? `；优先车辆 ${topAttention.plate || topAttention.vin}：${realtimeIssueLabels(topAttention).join('；')}` : ''}`,
+    `地图能力：${amapConfigured ? '高德地图可用' : '坐标预览'}`,
+    `选中车辆：${selectedRow ? `${selectedRow.plate || '-'} / ${selectedVIN} / ${selectedProtocol || selectedRow.primaryProtocol || '-'}` : '未选择'}`,
+    selectedRow ? `选中车辆下一步：${vehicleServiceStatus(selectedRow).label}；${dataFreshness(selectedRow).detail}；${realtimeIssueLabels(selectedRow).join('；')}` : '选中车辆下一步：先从地图或车辆列表选择一辆车',
+    `实时地图：${appURL(buildAppHash({ page: 'map', protocol: filters.protocol, filters }))}`,
+    `在线车辆：${appURL(buildAppHash({ page: 'map', protocol: filters.protocol, filters: { ...filters, online: 'online' } }))}`,
+    selectedVIN ? `车辆服务：${appURL(buildAppHash({ page: 'detail', keyword: selectedVIN, protocol: selectedProtocol }))}` : '',
+    selectedVIN ? `轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: selectedVIN, protocol: selectedProtocol }))}` : '',
+    selectedVIN ? `数据导出：${appURL(buildAppHash({ page: 'history-query', keyword: selectedVIN, protocol: selectedProtocol, filters: { tab: 'raw', includeFields: 'true' } }))}` : ''
+  ].filter(Boolean).join('\n');
+}
+
 function buildRealtimeSourceCoverage(rows: VehicleRealtimeRow[]) {
  const sourceMap = new Map<string, RealtimeSourceCoverage>();
  rows.forEach((row) => {
@@ -774,6 +815,7 @@ 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 missingCoordinateCount = Math.max(0, rows.length - locatedCount);
  const selectedVehicleProtocol = selectedMapRow ? filters.protocol || selectedMapRow.primaryProtocol || '' : '';
  const selectedVehicleLabel = selectedMapRow?.plate || selectedMapRow?.vin || '未选择车辆';
  const openSelectedVehicleRaw = () => {
@@ -886,6 +928,41 @@ export function Realtime({
      secondaryDisabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin)
    }
  ];
+  const mapCustomerDecisionItems = [
+    {
+      label: '先看在线',
+      value: `${onlineCount.toLocaleString()} 在线`,
+      detail: `${(rows.length - onlineCount).toLocaleString()} 辆离线，先确认客户能看到哪些车还在上报。`,
+      color: onlineCount > 0 ? 'green' as const : 'orange' as const,
+      action: '只看在线',
+      onClick: () => applyFilters({ ...filters, online: 'online' })
+    },
+    {
+      label: '再看定位',
+      value: `${locatedCount.toLocaleString()} 有坐标`,
+      detail: `${missingCoordinateCount.toLocaleString()} 辆无有效坐标，地图可视范围决定客户能否看车。`,
+      color: locatedCount > 0 ? 'blue' as const : 'orange' as const,
+      action: '地图态势',
+      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,
+      action: '告警事件',
+      onClick: () => onOpenQuality?.({ serviceStatus: 'degraded' })
+    },
+    {
+      label: '选车复盘',
+      value: selectedVehicleLabel,
+      detail: selectedMapRow ? `${vehicleServiceStatus(selectedMapRow).label}，${dataFreshness(selectedMapRow).detail}` : '从地图或车辆列表选择一辆车后进入轨迹、里程和数据导出。',
+      color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const,
+      action: '轨迹回放',
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
+    }
+  ];
  const mapCustomerPackageItems = [
    {
      label: '车辆范围',
@@ -930,6 +1007,17 @@ export function Realtime({
    selectedProtocol: selectedVehicleProtocol,
    amapConfigured
  }), '客户地图监控包');
+  const copyMapCustomerDecision = () => copyText(mapCustomerDecisionText({
+    filters,
+    rows,
+    total: pagination.total,
+    onlineCount,
+    locatedCount,
+    attentionRows: mapAttentionRows,
+    selectedRow: selectedMapRow,
+    selectedProtocol: selectedVehicleProtocol,
+    amapConfigured
+  }), '地图客户决策说明');

  if (mode === 'map') {
    return (
@@ -960,10 +1048,45 @@ export function Realtime({
            <Button size="small" theme="light" loading={loading} onClick={() => load(filters, pagination.currentPage, pagination.pageSize)}>立即刷新</Button>
            <Button size="small" theme="light" onClick={() => setAutoRefresh((value) => !value)}>{autoRefresh ? '暂停刷新' : '开启刷新'}</Button>
          </Space>
-        </div>
-
-        <div className="vp-map-kpi-strip">
-          {mapFleetKpis.map((item) => (
+          </div>
+  
+          <div className="vp-map-decision-board">
+            <div className="vp-map-decision-summary">
+              <Space wrap>
+                <Tag color="blue">地图客户决策</Tag>
+                <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
+                <Tag color={mapAttentionRows.length > 0 ? 'orange' : 'green'}>{mapAttentionRows.length.toLocaleString()} 辆关注</Tag>
+              </Space>
+              <Typography.Text strong>先判断车辆是否在线、是否有位置、是否有异常，再进入单车轨迹和数据交付。</Typography.Text>
+              <Typography.Text type="secondary">
+                地图页面向客户展示车辆服务状态，协议来源只作为定位、在线和异常追溯证据。
+              </Typography.Text>
+              <Space wrap>
+                <Button size="small" theme="solid" type="primary" onClick={() => applyFilters({ ...filters, online: 'online' })}>查看在线车辆</Button>
+                <Button size="small" theme="light" type="primary" icon={<IconCopy />} onClick={copyMapCustomerDecision}>复制地图决策说明</Button>
+              </Space>
+            </div>
+            <div className="vp-map-decision-grid">
+              {mapCustomerDecisionItems.map((item) => (
+                <button
+                  key={item.label}
+                  type="button"
+                  className="vp-map-decision-item"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                  aria-label={`地图客户决策 ${item.label} ${item.action}`}
+                >
+                  <Tag color={item.color}>{item.label}</Tag>
+                  <strong>{item.value}</strong>
+                  <span>{item.detail}</span>
+                  <em>{item.action}</em>
+                </button>
+              ))}
+            </div>
+          </div>
+  
+          <div className="vp-map-kpi-strip">
+            {mapFleetKpis.map((item) => (
            <button
              key={item.label}
              type="button"
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -1317,6 +1317,81 @@ button.vp-realtime-command-item:focus-visible {
  align-items: center;
 }

+.vp-map-decision-board {
+  display: grid;
+  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
+  gap: 12px;
+}
+
+.vp-map-decision-summary {
+  min-height: 170px;
+  padding: 14px;
+  border: 1px solid rgba(22, 100, 255, 0.18);
+  border-radius: var(--vp-radius);
+  background: #f5f9ff;
+  display: grid;
+  align-content: start;
+  gap: 10px;
+}
+
+.vp-map-decision-summary .semi-typography {
+  line-height: 21px;
+}
+
+.vp-map-decision-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-map-decision-item {
+  min-height: 170px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  align-content: start;
+  gap: 10px;
+}
+
+.vp-map-decision-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.vp-map-decision-item:not(:disabled):hover,
+.vp-map-decision-item:not(:disabled):focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  outline: none;
+}
+
+.vp-map-decision-item strong {
+  color: var(--vp-text);
+  font-size: 20px;
+  line-height: 26px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.vp-map-decision-item span {
+  color: var(--vp-text-muted);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.vp-map-decision-item em {
+  align-self: end;
+  color: #1664ff;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+}
+
 .vp-map-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -4180,6 +4255,8 @@ button.vp-realtime-command-item:focus-visible {
  .vp-realtime-impact-board,
  .vp-realtime-impact-grid,
  .vp-source-coverage-grid,
+  .vp-map-decision-board,
+  .vp-map-decision-grid,
  .vp-map-kpi-strip,
  .vp-map-task-strip,
  .vp-map-customer-package,
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -9140,6 +9140,17 @@ 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.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.getAllByText('轨迹复盘').length).toBeGreaterThanOrEqual(1);
@@ -9170,6 +9181,11 @@ test('shows realtime freshness status for recently updated and stale vehicles',
  });
  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('在线态势：1 在线 / 1 离线'));
  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('车辆服务：http://localhost:3000/#/detail?keyword=VIN-STALE-001&protocol=JT808'));
+  fireEvent.click(screen.getByRole('button', { name: /复制地图决策说明/ }));
+  await waitFor(() => {
+    expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【地图客户决策说明】'));
+  });
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('定位判断：2 辆有有效坐标 / 0 辆无坐标'));
 });

 test('exports current realtime vehicles as CSV', async () => {