From 5d9576c5c7e9e2d94ed129dd31d876d4c9230aa5 Mon Sep 17 00:00:00 2001 From: lingniu Date: Sun, 5 Jul 2026 02:14:00 +0800 Subject: [PATCH] feat(platform): add map monitoring task strip --- .../apps/web/src/pages/Realtime.tsx | 97 +++++++++++++++++++ .../apps/web/src/styles/global.css | 36 +++++++ .../apps/web/src/test/App.test.tsx | 12 ++- 3 files changed, 143 insertions(+), 2 deletions(-) diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx index 03300f6f..dbe0026f 100644 --- 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({ ))} +
+ {mapCustomerTasks.map((item) => ( +
+
+ {item.title} + {item.value} +
+ {item.detail} + + + + +
+ ))} +
+
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index 1181c4fd..3a8e06a2 100644 --- 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, 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 b730f0c6..f9a4a7ab 100644 --- 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();