From 6a15503c7b058e31d3cdca911788c6c79ca0accf Mon Sep 17 00:00:00 2001 From: lingniu Date: Mon, 6 Jul 2026 03:19:40 +0800 Subject: [PATCH] feat(platform): add live map decision strip --- .../apps/web/src/pages/Realtime.tsx | 116 +++++++++++++++++ .../apps/web/src/styles/global.css | 118 ++++++++++++++++++ .../apps/web/src/test/App.test.tsx | 10 ++ 3 files changed, 244 insertions(+) diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx index 93ec46a7..89280ef3 100644 --- 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({ +
+
+ + Live Map 决策条 + {amapConfigured ? '高德可用' : '坐标预览'} + 0 ? 'orange' : 'green'}> + {mapAttentionRows.length > 0 ? `${mapAttentionRows.length.toLocaleString()} 关注` : '态势稳定'} + + + + 客户进来先判断四件事：哪些车在线、哪些车能定位、哪辆车要先处理、选中车辆下一步做什么。 + + + 这条决策条把地图、在线、轨迹、统计、导出和告警放到同一条服务路径里，协议来源只保留为证据。 + +
+
+ {liveMapDecisionItems.map((item) => ( + + ))} +
+
+ {liveMapDecisionActions.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 720fee60..77d3f3f8 100644 --- 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); 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 3bd240ec..d385dac8 100644 --- 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();