diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx index 07e3b064..fff84303 100644 --- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx @@ -1428,6 +1428,67 @@ export function Realtime({ disabled: rows.length === 0 } ]; + const realtimeSourceEvidenceText = (() => { + const protocols: string[] = []; + rows.forEach((row) => { + const rowProtocols = row.protocols?.length ? row.protocols : row.primaryProtocol ? [row.primaryProtocol] : []; + rowProtocols.forEach((protocol) => { + if (protocol && !protocols.includes(protocol)) { + protocols.push(protocol); + } + }); + }); + return protocols.length > 0 ? protocols.join(' / ') : '暂无来源证据'; + })(); + const realtimeCustomerCommandItems = [ + { + label: '实时地图', + value: `${locatedCount.toLocaleString()} 有定位`, + detail: '先回答客户车辆在哪里,定位无效车辆进入异常队列。', + action: '打开地图', + color: locatedCount > 0 ? 'blue' as const : 'orange' as const, + disabled: false, + onClick: () => { + window.location.hash = buildAppHash({ page: 'map', protocol: filters.protocol, filters }); + } + }, + { + label: '在线车辆', + value: `${onlineCount.toLocaleString()} 在线`, + detail: `${(rows.length - onlineCount).toLocaleString()} 辆离线,优先确认当前可服务车辆。`, + action: '只看在线', + color: onlineCount > 0 ? 'green' as const : 'orange' as const, + disabled: false, + onClick: () => applyFilters({ ...filters, online: 'online' }) + }, + { + label: '异常车辆', + value: `${mapAttentionRows.length.toLocaleString()} 关注`, + detail: mapAttentionRows[0] ? `${mapAttentionRows[0].plate || mapAttentionRows[0].vin}:${realtimeIssueLabels(mapAttentionRows[0]).join(';')}` : '当前没有明显离线、超时或坐标异常车辆。', + action: '关注异常', + color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const, + disabled: false, + onClick: () => applyFilters({ ...filters, serviceStatus: 'degraded' }) + }, + { + label: '轨迹复盘', + value: selectedMapRow?.plate || selectedMapRow?.vin || '未选车', + detail: selectedMapRow ? '围绕选中车辆回放轨迹、核对里程和异常时间窗。' : '先从地图或表格选择一辆车。', + action: '轨迹回放', + color: selectedMapRow ? 'blue' as const : 'grey' as const, + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol) + }, + { + label: '导出交付', + value: `${rows.length.toLocaleString()} 当前页`, + detail: '导出车辆在线、位置、速度、SOC、里程和状态证据。', + action: '导出CSV', + color: rows.length > 0 ? 'blue' as const : 'grey' as const, + disabled: rows.length === 0, + onClick: exportRealtime + } + ]; const realtimeSingleVehicleItems = [ { label: '车辆服务', @@ -2119,6 +2180,36 @@ export function Realtime({ return (
+
+
+ + 客户实时监控总控台 + {amapConfigured ? '地图可用' : '坐标预览'} + 0 ? 'orange' : 'green'}>{mapAttentionRows.length.toLocaleString()} 关注 + + 实时页先回答客户能不能看到车、车辆在哪里、哪些车辆异常,再进入轨迹、统计、导出和告警。 + + 来源证据仅用于可信度判断:{realtimeSourceEvidenceText} + +
+
+ {realtimeCustomerCommandItems.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 47c2341b..8e069ae6 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -2295,6 +2295,89 @@ body { gap: 8px; } +.vp-realtime-command-center { + margin-bottom: 16px; + border: 1px solid rgba(22, 100, 255, 0.16); + border-radius: var(--vp-radius); + background: #ffffff; + display: grid; + grid-template-columns: minmax(280px, 0.56fr) minmax(0, 1.44fr); + overflow: hidden; +} + +.vp-realtime-command-center-copy { + padding: 18px; + border-right: 1px solid var(--vp-border); + background: #f8fbff; + display: grid; + gap: 10px; + align-content: center; +} + +.vp-realtime-command-center-copy .semi-typography { + line-height: 24px; +} + +.vp-realtime-command-center-grid { + padding: 14px; + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 10px; +} + +.vp-realtime-command-center-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-realtime-command-center-item:hover, +.vp-realtime-command-center-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-realtime-command-center-item:disabled { + cursor: not-allowed; + opacity: 0.58; +} + +.vp-realtime-command-center-item strong { + color: var(--vp-text); + font-size: 18px; + line-height: 24px; + font-weight: 700; + word-break: break-word; +} + +.vp-realtime-command-center-item span { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; + word-break: break-word; +} + +.vp-realtime-command-center-item em { + align-self: end; + color: var(--vp-primary); + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; +} + .vp-realtime-customer-board { margin-bottom: 16px; overflow: hidden; @@ -9145,6 +9228,8 @@ button.vp-realtime-command-item:focus-visible { .vp-time-audit-grid, .vp-time-delivery-strip, .vp-time-delivery-grid, + .vp-realtime-command-center, + .vp-realtime-command-center-grid, .vp-realtime-customer-board .semi-card-body, .vp-realtime-question-board, .vp-realtime-question-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 03d1922e..2c0c0b7e 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -9673,6 +9673,136 @@ test('shows canonical service status in realtime vehicles', async () => { expect(screen.getAllByText('数据通道不完整').length).toBeGreaterThan(0); }); +test('realtime page prioritizes customer vehicle monitoring command center', async () => { + window.history.replaceState(null, '', '/#/realtime'); + vi.setSystemTime(new Date('2026-07-03T20:15:00+08:00')); + 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, + platformRelease: 'platform-realtime-command-test', + amapWebJsConfigured: true, + amapApiConfigured: true, + amapSecurityProxyEnabled: true, + amapSecurityCodeExposed: false, + amapSecurityServiceHost: '/_AMapService' + } + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/realtime/vehicles')) { + return { + ok: true, + json: async () => ({ + data: { + items: [ + { + vin: 'VIN-RT-CUSTOMER-001', + plate: '粤A实时1', + phone: '13300000001', + oem: 'G7s', + protocols: ['JT808', 'GB32960'], + sourceStatus: [ + { protocol: 'JT808', online: true, lastSeen: '2026-07-03 20:14:30', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true }, + { protocol: 'GB32960', online: true, lastSeen: '2026-07-03 20:14:25', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true } + ], + sourceCount: 2, + onlineSourceCount: 2, + online: true, + primaryProtocol: 'JT808', + longitude: 113.2, + latitude: 23.1, + speedKmh: 36, + socPercent: 78, + totalMileageKm: 119925, + lastSeen: '2026-07-03 20:14:30', + bindingStatus: 'bound', + serviceStatus: { + status: 'healthy', + severity: 'ok', + title: '服务正常', + detail: '车辆实时服务正常', + sourceCount: 2, + onlineSourceCount: 2 + } + }, + { + vin: 'VIN-RT-CUSTOMER-002', + plate: '粤A实时2', + phone: '13300000002', + oem: 'G7s', + protocols: ['JT808'], + sourceStatus: [ + { protocol: 'JT808', online: true, lastSeen: '2026-07-03 19:40:00', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true }, + { protocol: 'GB32960', online: false, lastSeen: '', hasRealtime: false, hasHistory: false, hasRaw: false, hasMileage: false } + ], + sourceCount: 2, + onlineSourceCount: 1, + online: true, + primaryProtocol: 'JT808', + longitude: 0, + latitude: 0, + speedKmh: 0, + socPercent: 0, + totalMileageKm: 8899, + lastSeen: '2026-07-03 19:40:00', + bindingStatus: 'bound', + serviceStatus: { + status: 'degraded', + severity: 'warning', + title: '来源不完整', + detail: '缺少 GB32960', + sourceCount: 2, + onlineSourceCount: 1 + } + } + ], + total: 2, + limit: 50, + offset: 0 + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + return { + ok: true, + json: async () => ({ + data: { items: [], total: 0, limit: 10, offset: 0 }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + }); + + render(); + + expect(await screen.findByText('客户实时监控总控台')).toBeInTheDocument(); + expect(screen.getByText('实时页先回答客户能不能看到车、车辆在哪里、哪些车辆异常,再进入轨迹、统计、导出和告警。')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户实时监控总控台 实时地图 1 有定位 打开地图' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户实时监控总控台 在线车辆 2 在线 只看在线' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户实时监控总控台 异常车辆 1 关注 关注异常' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户实时监控总控台 轨迹复盘 粤A实时1 轨迹回放' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户实时监控总控台 导出交付 2 当前页 导出CSV' })).toBeInTheDocument(); + expect(screen.getByText('来源证据仅用于可信度判断:JT808 / GB32960')).toBeInTheDocument(); +}); + test('frames realtime page as one vehicle service with source evidence', async () => { window.history.replaceState(null, '', '/#/realtime'); const writeText = vi.fn(() => Promise.resolve());