From e847e1c7e83e69378c844f5d27a4ce0dbc839975 Mon Sep 17 00:00:00 2001 From: lingniu Date: Mon, 6 Jul 2026 06:10:06 +0800 Subject: [PATCH] feat(platform): add customer fleet command center --- .../apps/web/src/pages/Dashboard.tsx | 98 +++++++++++++++++++ .../apps/web/src/styles/global.css | 80 +++++++++++++++ .../apps/web/src/test/App.test.tsx | 12 +++ 3 files changed, 190 insertions(+) diff --git a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx index 5d77cf10..a2c12fab 100644 --- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx @@ -2761,6 +2761,28 @@ export function Dashboard({ ]; copyText(lines.join('\n'), '今日服务简报'); }; + const copyFleetOperationsCommand = () => { + const rawFilters = { tab: 'raw', includeFields: 'true' }; + const lines = [ + '【客户车队运营总控包】', + '首屏能力：实时地图 / 轨迹回放 / 里程统计 / 数据导出 / 告警通知', + '协议来源：仅作为证据层，不作为客户主入口', + `车辆规模：${formatCount(serviceSummary?.totalVehicles)}，在线：${formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles)}，有效定位：${commandLocatedCount.toLocaleString()}`, + `时间窗：${timeMonitorWindowLabel}（${dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo)}）`, + `今日活跃：${formatCount(summary?.activeToday)}，今日数据：${formatCount(summary?.frameToday)}`, + `告警车辆：${formatCount(summary?.issueVehicles)}`, + highPriorityIssue + ? `最高告警：${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` + : '最高告警：暂无高优先级告警', + '', + `实时地图：${appURL(buildAppHash({ page: 'map', filters: { online: 'online' } }))}`, + `轨迹回放：${appURL(buildAppHash({ page: 'history', filters: timeMonitorScopeValue }))}`, + `里程统计：${appURL(buildAppHash({ page: 'mileage', filters: timeMonitorScopeValue }))}`, + `数据导出：${appURL(buildAppHash({ page: 'history-query', filters: rawFilters }))}`, + `告警通知：${appURL(buildAppHash({ page: 'alert-events', filters: highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {} }))}` + ]; + copyText(lines.join('\n'), '运营总控包'); + }; const todayOperationsItems = [ { label: '车辆在线', @@ -2803,6 +2825,48 @@ export function Dashboard({ onClick: () => onOpenQuality(highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {}) } ]; + const fleetOperationsCommandItems = [ + { + label: '实时地图', + value: `${formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles)} 在线`, + detail: `${commandLocatedCount.toLocaleString()} 辆有有效定位，先回答车辆在哪里。`, + action: '打开地图', + color: 'green' as const, + onClick: () => onOpenMap({ online: 'online' }) + }, + { + label: '轨迹回放', + value: `${formatCount(summary?.activeToday)} 活跃`, + detail: '按客户选择的车辆和时间窗回放路线、速度、停留和里程断点。', + action: '回放轨迹', + color: 'blue' as const, + onClick: openTimeMonitorHistory + }, + { + label: '里程统计', + value: timeMonitorWindowLabel, + detail: '核对区间里程、每日闭合、异常点和 BI 报表口径。', + action: '核对里程', + color: 'blue' as const, + onClick: openTimeMonitorMileage + }, + { + label: '数据导出', + value: `${formatCount(summary?.frameToday)} 今日数据`, + detail: '按车辆、时间和字段裁剪位置历史、原始记录和解析字段。', + action: '导出报表', + color: 'blue' as const, + onClick: openTimeMonitorRaw + }, + { + label: '告警通知', + value: `${formatCount(summary?.issueVehicles)} 告警`, + detail: highPriorityIssue ? `${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` : '暂无高优先级告警，保持日常巡检。', + action: '闭环处理', + color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const, + onClick: () => onOpenQuality(highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {}) + } + ]; return (
@@ -2949,6 +3013,40 @@ export function Dashboard({ ))}
+
+
+ + 运营总控 + {amapConfigured ? '地图可用' : '坐标预览'} + 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警 + + + 客户车队运营总控 + + + 客户首屏只保留车辆地图、在线状态、轨迹回放、里程统计、数据导出和告警通知，协议来源退到证据层。 + + +
+
+ {fleetOperationsCommandItems.map((item) => ( + + ))} +
+
) : null} {focusMode === 'time-window' ? ( diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index 1abcc374..ab9aa81c 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -1969,6 +1969,84 @@ body { align-items: stretch; } +.vp-fleet-operations-command { + margin-top: 16px; + border: 1px solid rgba(22, 100, 255, 0.18); + border-radius: 8px; + background: #ffffff; + display: grid; + grid-template-columns: minmax(320px, 0.46fr) minmax(0, 1.54fr); + overflow: hidden; + box-shadow: var(--vp-shadow-sm); +} + +.vp-fleet-operations-command-copy { + padding: 18px; + border-right: 1px solid var(--vp-border); + background: #f8fbff; + display: grid; + gap: 10px; + align-content: center; +} + +.vp-fleet-operations-command-copy .semi-typography { + line-height: 22px; +} + +.vp-fleet-operations-command-grid { + padding: 14px; + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 10px; +} + +.vp-fleet-operations-command-item { + min-height: 138px; + padding: 12px; + border: 1px solid rgba(22, 100, 255, 0.14); + border-radius: 8px; + background: #fbfcff; + color: inherit; + cursor: pointer; + font: inherit; + text-align: left; + display: grid; + gap: 8px; + align-content: start; +} + +.vp-fleet-operations-command-item:hover, +.vp-fleet-operations-command-item:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #eef5ff; + box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.08); + outline: none; +} + +.vp-fleet-operations-command-item strong { + color: var(--vp-text); + font-size: 17px; + line-height: 24px; + font-weight: 800; + word-break: break-word; +} + +.vp-fleet-operations-command-item span { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; + word-break: break-word; +} + +.vp-fleet-operations-command-item em { + align-self: end; + color: var(--vp-primary); + font-size: 12px; + font-style: normal; + font-weight: 800; + line-height: 18px; +} + .vp-dispatch-operations-map { min-width: 0; border: 1px solid var(--vp-border); @@ -15090,6 +15168,8 @@ button.vp-realtime-command-item:focus-visible { .vp-vehicle-task-grid, .vp-service-delivery-strip, .vp-dispatch-operations-home, + .vp-fleet-operations-command, + .vp-fleet-operations-command-grid, .vp-dispatch-operations-highlights, .vp-customer-delivery-workbench, .vp-customer-delivery-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 9d4fa515..051c68d0 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -1228,6 +1228,18 @@ test('dashboard prioritizes customer vehicle service command over data sources', expect(writeText).toHaveBeenCalledWith(expect.stringContaining('车辆地图：http://localhost:3000/#/map?online=online')); expect(writeText).toHaveBeenCalledWith(expect.stringContaining('里程报表：http://localhost:3000/#/mileage')); expect(writeText).toHaveBeenCalledWith(expect.stringContaining('历史导出：http://localhost:3000/#/history-query?tab=raw&includeFields=true')); + expect(screen.getByText('客户车队运营总控')).toBeInTheDocument(); + expect(screen.getByText('客户首屏只保留车辆地图、在线状态、轨迹回放、里程统计、数据导出和告警通知，协议来源退到证据层。')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车队运营总控 实时地图 208 在线 打开地图' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车队运营总控 轨迹回放 4 活跃 回放轨迹' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车队运营总控 里程统计 1 天窗口 核对里程' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车队运营总控 数据导出 1,286,320 今日数据 导出报表' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车队运营总控 告警通知 7 告警 闭环处理' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /复制运营总控包/ })).toBeInTheDocument(); + fireEvent.click(screen.getByRole('button', { name: /复制运营总控包/ })); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【客户车队运营总控包】')); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('首屏能力：实时地图 / 轨迹回放 / 里程统计 / 数据导出 / 告警通知')); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('协议来源：仅作为证据层，不作为客户主入口')); expect(screen.getByRole('button', { name: '车辆服务指挥台优先队列 告警待处理 7 辆 告警事件' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: '车辆服务指挥台优先队列 无有效定位 208 辆 打开地图' })).toBeInTheDocument(); expect(screen.getAllByText('车辆服务指挥台')[0].compareDocumentPosition(screen.getByText('车辆地图态势')) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();