diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx index f3201dbb..2b932efe 100644 --- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx @@ -1248,6 +1248,92 @@ export function Realtime({ } ]; const mapShiftTimeWindowLabel = timeWindowDuration === '1 天窗口' ? '24 小时窗口' : timeWindowDuration; + const mapCommandTaskItems = [ + { + label: '实时监控', + value: `${onlineCount.toLocaleString()} 在线`, + detail: `${locatedCount.toLocaleString()} 辆有定位，${staleCount.toLocaleString()} 辆更新超时。`, + color: onlineCount > 0 ? 'green' as const : 'orange' as const, + disabled: false, + onClick: () => applyFilters({ ...filters, online: 'online' }) + }, + { + label: '轨迹回放', + value: selectedMapRow?.plate || selectedMapRow?.vin || '先选车', + detail: selectedMapRow ? `${dataFreshness(selectedMapRow).detail}，回放位置、速度和里程。` : '从地图或车辆列表选择一辆车。', + color: selectedMapRow ? 'blue' as const : 'grey' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol) + }, + { + label: '历史查询', + value: selectedVehicleProtocol || '全部来源', + detail: '查看位置、原始帧和解析字段，支撑客户复核。', + color: 'blue' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: openSelectedVehicleRaw + }, + { + 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, + disabled: !onOpenQuality, + onClick: () => onOpenQuality?.(selectedMapRow && canOpenVehicle(selectedMapRow.vin) + ? { keyword: selectedMapRow.vin, protocol: selectedVehicleProtocol } + : { serviceStatus: 'degraded' }) + }, + { + label: '统计导出', + value: `${rows.length.toLocaleString()} 辆`, + detail: '进入里程统计，或导出当前地图车辆清单。', + color: 'blue' as const, + disabled: rows.length === 0, + onClick: exportRealtime + } + ]; + const mapSelectedServiceItems = [ + { + label: '车辆档案', + action: '查看车辆', + detail: selectedVehicleLabel, + color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol) + }, + { + label: '轨迹回放', + action: '回放轨迹', + detail: selectedMapRow ? dataFreshness(selectedMapRow).detail : '等待选择', + color: selectedMapRow ? 'blue' as const : 'grey' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol) + }, + { + label: '历史数据', + action: '查询历史', + detail: selectedVehicleProtocol || '全部来源', + color: 'blue' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: openSelectedVehicleRaw + }, + { + label: '告警通知', + action: '查看告警', + detail: selectedMapRow ? realtimeIssueLabels(selectedMapRow)[0] : '等待选择', + color: selectedMapRow && hasSourceIssue(selectedMapRow) ? 'orange' as const : selectedMapRow ? 'green' as const : 'grey' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin) || !onOpenQuality, + onClick: () => selectedMapRow && onOpenQuality?.({ keyword: selectedMapRow.vin, protocol: selectedVehicleProtocol }) + }, + { + label: '交接卡', + action: '复制交接', + detail: selectedMapRow ? realtimeIssueLabels(selectedMapRow)[0] : '等待选择', + color: 'blue' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: copySelectedMapVehicleHandoff + } + ]; const mapShiftConsoleItems = [ { label: '今日态势', @@ -1957,6 +2043,89 @@ export function Realtime({ +
+
+
+ + 车辆服务地图中枢 + {amapConfigured ? '高德地图可用' : '坐标预览'} + 0 ? 'orange' : 'green'}>{mapAttentionRows.length.toLocaleString()} 辆关注 + + + 把 32960、808、MQTT 收敛成同一张车辆地图：看位置、判在线、选车辆、回放轨迹、处理告警和导出证据。 + + + 来源证据仅用于筛选和追溯，不作为客户主路径。 + +
+
+ {mapCommandTaskItems.map((item) => ( + + ))} +
+
+ +
+ +
+
+ + 单车服务台 + {selectedMapRow ? ( + <> + {vehicleServiceStatus(selectedMapRow).label} + {dataFreshness(selectedMapRow).detail} + + ) : ( + 等待选车 + )} + + {selectedVehicleLabel} +
+
+ {mapSelectedServiceItems.map((item) => ( + + ))} +
+
+
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index 220a8ec2..241fb81d 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -6077,6 +6077,148 @@ button.vp-realtime-command-item:focus-visible { align-items: center; } +.vp-map-command-center { + display: grid; + grid-template-columns: minmax(0, 1fr) 320px; + gap: 16px; +} + +.vp-map-command-main, +.vp-map-command-side-card, +.vp-map-single-service { + border: 1px solid var(--vp-border); + border-radius: var(--vp-radius); + background: var(--vp-surface); + box-shadow: 0 14px 32px rgba(24, 39, 75, 0.06); +} + +.vp-map-command-main { + padding: 18px; + display: grid; + gap: 16px; +} + +.vp-map-command-copy { + display: grid; + gap: 10px; +} + +.vp-map-command-copy .semi-typography { + max-width: 980px; +} + +.vp-map-command-tasks, +.vp-map-single-service-actions { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 10px; +} + +.vp-map-command-task, +.vp-map-single-service-action { + min-height: 118px; + padding: 12px; + border: 1px solid var(--vp-border); + border-radius: var(--vp-radius); + background: #fbfcff; + color: inherit; + text-align: left; + font: inherit; + cursor: pointer; + display: grid; + align-content: start; + gap: 8px; + transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; +} + +.vp-map-command-task:hover, +.vp-map-command-task:focus-visible, +.vp-map-single-service-action:hover, +.vp-map-single-service-action:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08); + outline: none; + transform: translateY(-1px); +} + +.vp-map-command-task:disabled, +.vp-map-single-service-action:disabled { + cursor: not-allowed; + opacity: 0.62; + box-shadow: none; + transform: none; +} + +.vp-map-command-task strong, +.vp-map-single-service-action strong { + color: var(--vp-text); + font-size: 18px; + line-height: 24px; + font-weight: 700; + word-break: break-word; +} + +.vp-map-command-task span, +.vp-map-single-service-action span { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; + word-break: break-word; +} + +.vp-map-command-side { + display: grid; + gap: 12px; +} + +.vp-map-command-side-card { + padding: 16px; + display: grid; + gap: 12px; +} + +.vp-map-foundation-facts { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 8px 12px; + font-size: 13px; +} + +.vp-map-foundation-facts span { + color: var(--vp-text-muted); +} + +.vp-map-foundation-facts strong { + color: var(--vp-text); + text-align: right; + word-break: break-word; +} + +.vp-map-single-service { + padding: 16px; + display: grid; + gap: 14px; +} + +.vp-map-single-service-copy { + display: grid; + gap: 8px; +} + +.vp-map-page .vp-map-service-rail, +.vp-map-page .vp-map-shift-console, +.vp-map-page .vp-map-decision-board, +.vp-map-page .vp-map-view-mode, +.vp-map-page .vp-map-field-command, +.vp-map-page .vp-map-area-monitor, +.vp-map-page .vp-map-dispatch-actions, +.vp-map-page .vp-map-kpi-strip, +.vp-map-page .vp-map-selected-service-strip, +.vp-map-page .vp-map-task-strip, +.vp-map-page .vp-map-vehicle-workbench { + display: none !important; +} + .vp-map-service-rail { display: grid; grid-template-columns: minmax(300px, 0.64fr) minmax(0, 1.36fr); @@ -13010,6 +13152,9 @@ button.vp-realtime-command-item:focus-visible { .vp-realtime-impact-board, .vp-realtime-impact-grid, .vp-source-coverage-grid, + .vp-map-command-center, + .vp-map-command-tasks, + .vp-map-single-service-actions, .vp-map-service-rail, .vp-map-service-rail-actions, .vp-map-shift-console, diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx index 4872efa5..97a46458 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -10812,89 +10812,35 @@ test('shows realtime freshness status for recently updated and stale vehicles', render(); expect(await screen.findByRole('heading', { name: '车辆实时地图' })).toBeInTheDocument(); - expect(screen.getByText('地图服务行动条')).toBeInTheDocument(); - expect(screen.getByText('把 Live Map 当作客户服务入口：先看在线车辆和关注车辆，再进入路线回放、统计查询和证据导出。')).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.getByRole('button', { name: '地图服务行动条 证据导出 导出CSV' })).toBeInTheDocument(); - expect(screen.getByText('客户地图值班台')).toBeInTheDocument(); - expect(screen.getByText('把实时地图收敛成值班员能执行的四件事：交付状态、优先车辆、时间窗复盘和交接说明。')).toBeInTheDocument(); - expect(screen.getByRole('button', { name: '客户地图值班台 今日态势 1 在线 / 1 关注 只看在线' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: '客户地图值班台 优先车辆 粤A超时1 处理关注' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: '客户地图值班台 时间窗复盘 24 小时窗口 打开轨迹' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: '客户地图值班台 交接说明 可复制 复制交接' })).toBeInTheDocument(); + expect(screen.getByText('车辆服务地图中枢')).toBeInTheDocument(); + expect(screen.getByText('把 32960、808、MQTT 收敛成同一张车辆地图：看位置、判在线、选车辆、回放轨迹、处理告警和导出证据。')).toBeInTheDocument(); + expect(screen.getByText('高德地图底座')).toBeInTheDocument(); + expect(screen.getByText('来源证据仅用于筛选和追溯，不作为客户主路径。')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '车辆服务地图任务 实时监控 1 在线' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '车辆服务地图任务 轨迹回放 粤A超时1' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '车辆服务地图任务 历史查询 JT808' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '车辆服务地图任务 告警通知 1 关注' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '车辆服务地图任务 统计导出 2 辆' })).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: '地图视图模式 运营总览 2 辆 当前页' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: '地图视图模式 异常优先 1 辆 关注车辆' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: '地图视图模式 轨迹复盘 粤A超时1 选中车辆' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: '地图视图模式 交付导出 2 辆 导出证据' })).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.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: '区域围栏监控 电子围栏 关注车辆' })).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(); - expect(screen.getByRole('button', { name: '地图调度处置栏 复盘选中 粤A超时1 轨迹回放' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: '地图调度处置栏 车辆档案 粤A超时1 车辆服务' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: '地图调度处置栏 交接证据 2 辆 导出CSV' })).toBeInTheDocument(); - expect(screen.getByText('实时盯车')).toBeInTheDocument(); - expect(screen.getAllByText('异常优先').length).toBeGreaterThanOrEqual(1); - expect(screen.getAllByText('轨迹复盘').length).toBeGreaterThanOrEqual(1); - expect(screen.getAllByText('查询导出').length).toBeGreaterThanOrEqual(1); - 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.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.getByText('地图车辆作业台')).toBeInTheDocument(); + expect(screen.getByText('单车服务台')).toBeInTheDocument(); expect(screen.getAllByText('粤A新鲜1').length).toBeGreaterThanOrEqual(1); - 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.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.getAllByText('选中车辆').length).toBeGreaterThanOrEqual(1); expect(screen.getByText('车辆列表')).toBeInTheDocument(); expect(screen.getAllByText('1 辆更新超时').length).toBeGreaterThanOrEqual(1); - 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.getByRole('button', { name: '地图选中车辆 交接卡 复制交接' })).toBeInTheDocument(); - fireEvent.click(screen.getByRole('button', { name: '地图选中车辆 交接卡 复制交接' })); + fireEvent.click(screen.getByRole('button', { name: '单车服务台 交接卡 复制交接' })); await waitFor(() => { expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【地图选中车辆交接卡】')); }); @@ -10908,17 +10854,6 @@ 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 辆无坐标')); - 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: /复制时间窗包/ }));