diff --git a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx index edc8b809..4840c986 100644 --- a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx @@ -310,6 +310,55 @@ function vehicleCustomerLookupText({ return lines.join('\n'); } +function vehicleCustomerServicePackageText({ + filters, + rows, + total, + summary +}: { + filters: Record; + rows: VehicleCoverageRow[]; + total: number; + summary: VehicleCoverageSummary | null; +}) { + const scope = filters.keyword?.trim() ? `单车 ${filters.keyword.trim()}` : '当前车辆池'; + const singleVehicleFilters = filters.keyword?.trim() + ? { keyword: filters.keyword.trim(), ...(filters.protocol ? { protocol: filters.protocol } : {}) } + : {}; + const mapFilters = { ...filters, online: filters.online || 'online' }; + const pageVerdicts = currentPageVerdictStats(rows).map((item) => `${item.status} ${item.count.toLocaleString()}`).join('；') || '-'; + const pageActions = currentPageActionStats(rows).map((item) => `${item.label} ${item.count.toLocaleString()}`).join('；') || '-'; + const missingSources = (summary?.missingSources ?? []) + .filter((item) => item.count > 0) + .map((item) => `${item.protocol} ${item.count.toLocaleString()}`) + .join('；') || '-'; + return [ + '【客户车辆服务交付包】', + `服务范围：${scope}`, + `当前筛选：${vehicleFilterSummary(filters).join('；') || '全部车辆'}`, + `车辆规模：当前页 ${rows.length.toLocaleString()} 辆 / 当前筛选 ${total.toLocaleString()} 辆`, + `服务概览：在线 ${(summary?.onlineVehicles ?? 0).toLocaleString()}；单源 ${(summary?.singleSourceVehicles ?? 0).toLocaleString()}；多源 ${(summary?.multiSourceVehicles ?? 0).toLocaleString()}；暂无来源 ${(summary?.noDataVehicles ?? 0).toLocaleString()}`, + `档案状态：待绑定 ${(summary?.unboundVehicles ?? 0).toLocaleString()}；档案不完整 ${(summary?.archiveIncompleteVehicles ?? 0).toLocaleString()}`, + `当前页判读：${pageVerdicts}`, + `建议动作：${pageActions}`, + `缺失来源：${missingSources}`, + '', + '客户入口：', + `车辆地图：${appURL(buildAppHash({ page: 'map', keyword: filters.keyword, protocol: filters.protocol, filters: mapFilters }))}`, + `实时监控：${appURL(buildAppHash({ page: 'realtime', ...singleVehicleFilters, filters: filters.keyword?.trim() ? undefined : { ...filters, online: filters.online || 'online' } }))}`, + `轨迹回放：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'location' } }))}`, + `里程统计：${appURL(buildAppHash({ page: 'mileage', ...singleVehicleFilters }))}`, + `告警通知：${appURL(buildAppHash({ page: 'alert-events', ...singleVehicleFilters, filters }))}`, + `历史数据导出：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'raw', includeFields: 'true' } }))}`, + '', + '交付口径：', + '1. 客户先看地图与实时状态，判断车辆是否在线和位置是否可信', + '2. 单车问题进入轨迹回放和里程统计，确认时间窗内发生了什么', + '3. 异常车辆进入告警通知，带上原始记录和历史数据作为证据', + '4. 对外交付时优先使用车辆口径，协议来源只作为证据说明' + ].join('\n'); +} + type VehicleActionRecommendation = { label: string; color: 'green' | 'orange' | 'red'; @@ -597,6 +646,9 @@ export function Vehicles({ const copyCustomerLookupPath = () => { copyText(vehicleCustomerLookupText({ filters, rows, total: pagination.total, summary }), '客户查车路径'); }; + const copyCustomerServicePackage = () => { + copyText(vehicleCustomerServicePackageText({ filters, rows, total: pagination.total, summary }), '客户车辆服务交付包'); + }; const customerLookupSteps = [ { label: '车辆身份', @@ -708,6 +760,53 @@ export function Vehicles({ disabled: rows.length === 0 } ]; + const servicePackageItems = [ + { + label: '车辆地图', + value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`, + detail: '先看当前筛选车辆的位置分布和在线状态。', + color: 'blue' as const, + action: '打开地图', + disabled: !onOpenMap, + onClick: () => onOpenMap?.({ ...serviceScopeFilters, online: 'online' }) + }, + { + label: '轨迹回放', + value: filters.keyword?.trim() ? '单车时间线' : '先选车辆', + detail: filters.keyword?.trim() ? '按当前车辆回放定位轨迹和断点。' : '客户追问某车时，从车辆列表进入单车回放。', + color: filters.keyword?.trim() ? 'green' as const : 'grey' as const, + action: '回放轨迹', + disabled: !onOpenHistory || !filters.keyword?.trim(), + onClick: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' }) + }, + { + label: '里程统计', + value: filters.keyword?.trim() ? '区间复核' : '单车后可用', + detail: '核对时间窗里程、日里程和累计口径，支撑 BI 与客户问询。', + color: filters.keyword?.trim() ? 'orange' as const : 'grey' as const, + action: '查看里程', + disabled: !onOpenMileage || !filters.keyword?.trim(), + onClick: () => onOpenMileage?.(serviceScopeFilters) + }, + { + label: '告警通知', + value: `${(summary?.noDataVehicles ?? 0).toLocaleString()} 无来源`, + detail: '异常车辆进入告警闭环，确认责任方、通知渠道和证据。', + color: (summary?.noDataVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const, + action: '查看告警', + disabled: !onOpenQuality, + onClick: () => onOpenQuality?.(serviceScopeFilters) + }, + { + label: '历史导出', + value: `${rows.length.toLocaleString()} 当前页`, + detail: '对外交付车辆清单、轨迹、RAW 和字段证据。', + color: rows.length > 0 ? 'blue' as const : 'grey' as const, + action: '导出清单', + disabled: rows.length === 0, + onClick: exportVehicles + } + ]; useEffect(() => { setFilters(initialFilters); @@ -914,6 +1013,42 @@ export function Vehicles({ ))} + +
+
+ + 客户交付 + {filters.keyword?.trim() ? '单车包' : '车辆池包'} + + {filters.keyword?.trim() || `${(summary?.totalVehicles ?? pagination.total).toLocaleString()} 辆车`} + + 把车辆地图、实时监控、轨迹回放、里程统计、告警通知和历史导出放在同一份服务包里，客户不用理解 GB32960、808 或 MQTT 的差异。 + + + + + + +
+
+ {servicePackageItems.map((item) => ( + + ))} +
+
+
{ const nextFilters = values as Record; diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index c295e591..eda199c8 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -2006,6 +2006,90 @@ button.vp-realtime-command-item:focus-visible { line-height: 20px; } +.vp-vehicle-package-board { + display: grid; + grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr); + gap: 16px; +} + +.vp-vehicle-package-summary { + min-height: 172px; + padding: 14px; + border: 1px solid rgba(22, 100, 255, 0.24); + border-radius: var(--vp-radius); + background: #f6f9ff; + display: grid; + gap: 10px; + align-content: start; +} + +.vp-vehicle-package-summary strong { + color: var(--vp-text); + font-size: 20px; + line-height: 26px; + word-break: break-word; +} + +.vp-vehicle-package-summary span { + color: var(--vp-text-muted); + font-size: 13px; + line-height: 20px; +} + +.vp-vehicle-package-grid { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 12px; +} + +.vp-vehicle-package-item { + min-height: 172px; + padding: 12px; + border: 1px solid var(--vp-border); + border-radius: 8px; + background: #fbfcff; + text-align: left; + cursor: pointer; + font: inherit; + display: grid; + gap: 9px; + align-content: start; +} + +.vp-vehicle-package-item:disabled { + cursor: not-allowed; + opacity: 0.62; +} + +.vp-vehicle-package-item:not(:disabled):hover, +.vp-vehicle-package-item:not(:disabled):focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #f5f9ff; + outline: none; +} + +.vp-vehicle-package-item strong { + color: var(--vp-text); + font-size: 19px; + line-height: 24px; + word-break: break-word; +} + +.vp-vehicle-package-item span { + color: var(--vp-text-muted); + font-size: 13px; + line-height: 20px; +} + +.vp-vehicle-package-item em { + color: #1664ff; + font-size: 12px; + line-height: 18px; + font-style: normal; + font-weight: 600; + align-self: end; +} + .vp-result-summary-item { min-height: 72px; padding: 12px; @@ -6195,6 +6279,8 @@ button.vp-realtime-command-item:focus-visible { .vp-vehicle-lookup-head, .vp-vehicle-lookup-grid, .vp-vehicle-decision-grid, + .vp-vehicle-package-board, + .vp-vehicle-package-grid, .vp-time-review-package, .vp-time-review-grid, .vp-time-audit-strip, 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 c4b1cda9..2ea705ed 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -1936,6 +1936,11 @@ test('opens vehicle list filtered by service summary KPI', async () => { test('shows vehicle service result summary on vehicle list filters', async () => { window.history.replaceState(null, '', '/#/vehicles?coverage=multi'); + const writeText = vi.fn(() => Promise.resolve()); + Object.defineProperty(navigator, 'clipboard', { + configurable: true, + value: { writeText } + }); vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => { const path = String(input); if (path.includes('/api/ops/health')) { @@ -2050,12 +2055,21 @@ test('shows vehicle service result summary on vehicle list filters', async () => expect(screen.getByRole('button', { name: /复制客户查车路径/ })).toBeInTheDocument(); expect(screen.getByText('车辆服务决策板')).toBeInTheDocument(); expect(screen.getAllByText('异常车辆').length).toBeGreaterThan(0); - expect(screen.getByText('4 无来源')).toBeInTheDocument(); + expect(screen.getAllByText('4 无来源').length).toBeGreaterThanOrEqual(1); 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.getByText('客户车辆服务交付包')).toBeInTheDocument(); + expect(screen.getByText('客户交付')).toBeInTheDocument(); + expect(screen.getByText('车辆池包')).toBeInTheDocument(); + expect(screen.getByText('把车辆地图、实时监控、轨迹回放、里程统计、告警通知和历史导出放在同一份服务包里，客户不用理解 GB32960、808 或 MQTT 的差异。')).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.getByRole('button', { name: '客户车辆服务交付 历史导出 导出清单' })).toBeInTheDocument(); expect(screen.getAllByText('车辆地图').length).toBeGreaterThanOrEqual(1); expect(screen.getAllByText('里程统计').length).toBeGreaterThanOrEqual(1); expect(screen.getAllByText('数据导出').length).toBeGreaterThanOrEqual(1); @@ -2098,6 +2112,15 @@ test('shows vehicle service result summary on vehicle list filters', async () => expect(screen.getByText('1/2 来源在线，缺 YUTONG_MQTT')).toBeInTheDocument(); expect(screen.getByText('建议动作')).toBeInTheDocument(); expect(screen.getByText('补齐 YUTONG_MQTT 来源')).toBeInTheDocument(); + + fireEvent.click(screen.getByRole('button', { name: /复制交付包/ })); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【客户车辆服务交付包】')); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('服务范围：当前车辆池')); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('车辆地图：http://localhost:3000/#/map?')); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('轨迹回放：http://localhost:3000/#/history?tab=location')); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('里程统计：http://localhost:3000/#/mileage')); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('告警通知：http://localhost:3000/#/alert-events?coverage=multi')); + expect(writeText).toHaveBeenCalledWith(expect.stringContaining('历史数据导出：http://localhost:3000/#/history?tab=raw&includeFields=true')); }); test('exports current vehicle coverage page as csv', async () => {