From 7ec2bcf3f9fa7bfac1956d975c403beb1a1eebbd Mon Sep 17 00:00:00 2001 From: lingniu Date: Sun, 5 Jul 2026 02:42:00 +0800 Subject: [PATCH] feat(platform): add map vehicle workbench --- .../apps/web/src/pages/Realtime.tsx | 90 +++++++++++++++++++ .../apps/web/src/styles/global.css | 85 ++++++++++++++++++ .../apps/web/src/test/App.test.tsx | 8 +- 3 files changed, 182 insertions(+), 1 deletion(-) diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx index dbe0026f..b1ebde19 100644 --- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx @@ -731,6 +731,7 @@ export function Realtime({ { 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 selectedVehicleLabel = selectedMapRow?.plate || selectedMapRow?.vin || '未选择车辆'; const openSelectedVehicleRaw = () => { if (!selectedMapRow || !canOpenVehicle(selectedMapRow.vin)) { Toast.warning('请先选择可查询的车辆'); @@ -743,6 +744,54 @@ export function Realtime({ filters: { tab: 'raw', includeFields: 'true' } }); }; + const mapVehicleWorkItems = [ + { + title: '车辆服务', + value: selectedVehicleLabel, + detail: selectedMapRow ? '查看车辆画像、来源状态和最新实时字段。' : '先从地图或车辆列表选择一辆车。', + action: '车辆档案', + color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol) + }, + { + title: '轨迹复盘', + value: selectedMapRow ? dataFreshness(selectedMapRow).detail : '等待选择', + detail: '复核位置、速度、里程和断点，支撑客户问询。', + action: '打开轨迹', + color: selectedMapRow ? dataFreshness(selectedMapRow).color : 'grey' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol) + }, + { + title: '里程核对', + value: selectedMapRow?.totalMileageKm != null ? `${selectedMapRow.totalMileageKm} km` : '无里程', + detail: '进入单车里程统计，核对日里程和区间差值。', + action: '查看里程', + color: selectedMapRow?.totalMileageKm != null ? 'blue' as const : 'orange' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => { + if (!selectedMapRow) return; + window.location.hash = buildAppHash({ + page: 'mileage', + keyword: selectedMapRow.vin, + protocol: selectedVehicleProtocol + }); + } + }, + { + title: '告警处置', + value: selectedMapRow ? realtimeIssueLabels(selectedMapRow)[0] : '等待选择', + detail: '围绕选中车辆查看断链、离线、定位异常等事件。', + action: '查看告警', + 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 + }) + } + ]; const mapCustomerTasks = [ { title: '实时盯车', @@ -877,6 +926,47 @@ export function Realtime({ ))} +
+
+
+ 地图车辆作业台 + + 当前车辆：{selectedVehicleLabel} + +
+ + {selectedMapRow ? ( + <> + {vehicleServiceStatus(selectedMapRow).label} + {dataFreshness(selectedMapRow).detail} + {selectedVehicleProtocol || '未知来源'} + + ) : ( + 先选车辆 + )} + +
+
+ {mapVehicleWorkItems.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 0b246ec6..a50c70c2 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -1132,6 +1132,90 @@ button.vp-realtime-command-item:focus-visible { line-height: 20px; } +.vp-map-vehicle-workbench { + padding: 14px; + border: 1px solid rgba(22, 100, 255, 0.18); + border-radius: var(--vp-radius); + background: #f8fbff; + display: grid; + gap: 12px; +} + +.vp-map-vehicle-workbench-head { + min-width: 0; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} + +.vp-map-vehicle-workbench-head > div { + min-width: 0; + display: grid; + gap: 4px; +} + +.vp-map-vehicle-work-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 10px; +} + +.vp-map-vehicle-work-item { + min-width: 0; + min-height: 132px; + padding: 12px; + border: 1px solid var(--vp-border); + border-radius: var(--vp-radius); + background: var(--vp-surface); + color: inherit; + text-align: left; + display: grid; + gap: 8px; + align-content: space-between; + cursor: pointer; +} + +.vp-map-vehicle-work-item:hover, +.vp-map-vehicle-work-item:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08); + outline: none; +} + +.vp-map-vehicle-work-item:disabled { + cursor: not-allowed; + opacity: 0.62; + box-shadow: none; +} + +.vp-map-vehicle-work-title { + min-width: 0; + display: grid; + gap: 8px; +} + +.vp-map-vehicle-work-title strong { + color: var(--vp-text); + font-size: 16px; + line-height: 22px; + word-break: break-word; +} + +.vp-map-vehicle-work-item > span:not(.vp-map-vehicle-work-title) { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; +} + +.vp-map-vehicle-work-item em { + color: var(--vp-primary); + font-size: 12px; + font-style: normal; + font-weight: 700; +} + .vp-map-workspace { min-height: 680px; display: grid; @@ -3501,6 +3585,7 @@ button.vp-realtime-command-item:focus-visible { .vp-source-coverage-grid, .vp-map-kpi-strip, .vp-map-task-strip, + .vp-map-vehicle-work-grid, .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 cc9774cb..22e95d82 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -9056,12 +9056,18 @@ 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('轨迹复盘')).toBeInTheDocument(); + expect(screen.getAllByText('轨迹复盘').length).toBeGreaterThanOrEqual(1); 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.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.getAllByText('关注车辆').length).toBeGreaterThanOrEqual(1); expect(screen.getByText('选中车辆')).toBeInTheDocument(); expect(screen.getByText('车辆列表')).toBeInTheDocument();