From 30bc03a262383044b99cdc1c26ad82d67d3722fc Mon Sep 17 00:00:00 2001 From: lingniu Date: Sun, 5 Jul 2026 19:43:20 +0800 Subject: [PATCH] feat(platform): prioritize customer vehicle command center --- .../apps/web/src/pages/Dashboard.tsx | 78 +++++++++++++ .../apps/web/src/styles/global.css | 109 ++++++++++++++++++ .../apps/web/src/test/App.test.tsx | 92 +++++++++++++++ 3 files changed, 279 insertions(+) diff --git a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx index 7d668791..3c67051b 100644 --- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx @@ -1738,11 +1738,89 @@ export function Dashboard({ onClick: () => onOpenQuality(highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {}) } ]; + const customerServiceCommandItems = [ + { + 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: `${dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo)}，按车辆复盘路线、速度和里程断点。`, + action: '回放轨迹', + color: 'blue' as const, + onClick: openTimeMonitorHistory + }, + { + label: '统计查询', + value: `${formatCount(serviceSummary?.totalVehicles)} 车辆`, + detail: '按车辆口径核对区间里程、日统计和异常来源。', + 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 (
+
+
+
+ + 客户车辆服务总控台 + {amapConfigured ? '地图可用' : '坐标预览'} + 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警 + + 把接入来源收敛成一套车辆服务。 + + 三个接入来源统一沉到证据层，首页只回答客户怎么监控车辆、回放轨迹、核对里程、导出数据和处理告警。 + +
+
+ 来源证据：GB32960 / JT808 / YUTONG_MQTT + {vehicleServiceOnlineText(serviceSummary, summary)} + {dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo)} +
+
+
+ {customerServiceCommandItems.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 5a1e8de1..47c2341b 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -1195,6 +1195,113 @@ body { grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr); } +.vp-customer-service-command { + margin-bottom: 16px; + border: 1px solid rgba(22, 100, 255, 0.16); + border-radius: var(--vp-radius); + background: #ffffff; + overflow: hidden; +} + +.vp-customer-service-command-main { + padding: 18px; + border-bottom: 1px solid var(--vp-border); + background: #f8fbff; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); + gap: 16px; + align-items: stretch; +} + +.vp-customer-service-command-copy { + display: grid; + gap: 10px; + align-content: center; +} + +.vp-customer-service-command-copy .semi-typography { + line-height: 26px; +} + +.vp-customer-service-command-evidence { + padding: 14px; + border: 1px solid rgba(22, 100, 255, 0.14); + border-radius: 8px; + background: #ffffff; + display: grid; + gap: 6px; + align-content: center; +} + +.vp-customer-service-command-evidence span, +.vp-customer-service-command-evidence small { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; +} + +.vp-customer-service-command-evidence strong { + color: var(--vp-text); + font-size: 20px; + line-height: 26px; + font-weight: 700; +} + +.vp-customer-service-command-grid { + padding: 14px; + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 10px; +} + +.vp-customer-service-command-item { + min-height: 132px; + padding: 12px; + border: 1px solid var(--vp-border); + border-radius: 8px; + background: #fbfcff; + color: inherit; + cursor: pointer; + font: inherit; + text-align: left; + display: grid; + gap: 8px; + align-content: start; + transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; +} + +.vp-customer-service-command-item:hover, +.vp-customer-service-command-item:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #f5f9ff; + box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.08); + outline: none; +} + +.vp-customer-service-command-item strong { + color: var(--vp-text); + font-size: 18px; + line-height: 24px; + font-weight: 700; + word-break: break-word; +} + +.vp-customer-service-command-item span { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; + word-break: break-word; +} + +.vp-customer-service-command-item em { + align-self: end; + color: var(--vp-primary); + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; +} + .vp-customer-cockpit-summary { padding: 18px; border-right: 1px solid var(--vp-border); @@ -9002,6 +9109,8 @@ button.vp-realtime-command-item:focus-visible { .vp-map-ops-board, .vp-map-ops-readiness, .vp-map-ops-work, + .vp-customer-service-command-main, + .vp-customer-service-command-grid, .vp-customer-cockpit, .vp-customer-cockpit-actions, .vp-customer-vehicle-monitor, 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 03b2c627..03d1922e 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -620,6 +620,98 @@ test('dashboard presents one vehicle service operating posture', async () => { expect(screen.getByText('7 告警事件')).toBeInTheDocument(); }); +test('dashboard prioritizes customer vehicle service command over data sources', async () => { + window.history.replaceState(null, '', '/#/dashboard'); + vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => { + const path = String(input); + if (path.includes('/api/ops/health')) { + return { + ok: true, + json: async () => ({ + data: { + linkHealth: [], + kafkaLag: 0, + activeConnections: 0, + capacityFindings: [], + redisOnlineKeys: 0, + tdengineWritable: true, + mysqlWritable: true, + runtime: { + requestTimeoutMs: 5000, + amapWebJsConfigured: true, + amapApiConfigured: true, + amapSecurityProxyEnabled: true, + amapSecurityCodeExposed: false, + amapSecurityServiceHost: '/_AMapService' + } + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/dashboard/summary')) { + return { + ok: true, + json: async () => ({ + data: { + onlineVehicles: 3, + activeToday: 4, + frameToday: 1286320, + issueVehicles: 7, + kafkaLag: 0, + protocols: [], + serviceStatuses: [], + linkHealth: [] + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/vehicle-service/summary')) { + return { + ok: true, + json: async () => ({ + data: { + totalVehicles: 1033, + boundVehicles: 1024, + onlineVehicles: 208, + singleSourceVehicles: 391, + multiSourceVehicles: 181, + noDataVehicles: 461, + identityRequiredVehicles: 9, + serviceStatuses: [], + protocols: [], + missingSources: [] + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + return { + ok: true, + json: async () => ({ + data: { items: [], total: 0, limit: 8, offset: 0 }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + }); + + render(); + + expect(await screen.findByText('客户车辆服务总控台')).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,033 车辆 查统计' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车辆服务总控台 数据导出 1,286,320 今日数据 查询导出' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车辆服务总控台 告警通知 7 告警 闭环告警' })).toBeInTheDocument(); + expect(screen.getByText('来源证据：GB32960 / JT808 / YUTONG_MQTT')).toBeInTheDocument(); +}); + test('dashboard exposes vehicle data center capability matrix', async () => { window.history.replaceState(null, '', '/#/dashboard'); const writeText = vi.fn(() => Promise.resolve());