diff --git a/vehicle-data-platform/apps/web/src/pages/Mileage.tsx b/vehicle-data-platform/apps/web/src/pages/Mileage.tsx index 62a6ec86..e7b70049 100644 --- a/vehicle-data-platform/apps/web/src/pages/Mileage.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Mileage.tsx @@ -891,6 +891,67 @@ export function Mileage({ onClick: () => copyOnlineOperationsReport() } ]; + const mileageConclusionItems = [ + { + label: '区间累计', + value: `${formatKm(summary.totalMileageKm)} km`, + detail: `${summary.vehicleCount.toLocaleString()} 辆车,${mileageRangeText}`, + color: 'blue' as const, + onClick: () => copyStatisticsSummary() + }, + { + label: '明细合计', + displayLabel: '当前明细', + value: `${formatKm(pageMileageTotal)} km`, + detail: `${rows.length.toLocaleString()} 条当前页明细,覆盖 ${formatPercent(pageCoverageRate)}`, + color: pageCoverageRate >= 100 ? 'green' as const : 'orange' as const, + onClick: () => exportMileage() + }, + { + label: '异常记录', + value: `${anomalyRows.length.toLocaleString()} 条`, + detail: anomalyRows[0] ? `${anomalyRows[0].plate || anomalyRows[0].vin} / ${anomalyRows[0].date}` : '当前页未发现异常', + color: anomalyRows.length > 0 ? 'orange' as const : 'green' as const, + onClick: () => anomalyRows[0] ? copyMileageEvidence(anomalyRows[0]) : copyMileageDecision() + }, + { + label: '在线影响', + value: `${offlineVehicleCount.toLocaleString()} 离线`, + detail: `${onlineVehicleCount.toLocaleString()} 在线,在线率 ${formatPercent(onlineRatePercent)}`, + color: offlineVehicleCount > 0 ? 'orange' as const : 'green' as const, + onClick: () => copyOnlineOperationsReport() + } + ]; + const mileageConclusionActions = [ + { + label: '复制结论', + action: '复制摘要', + color: 'blue' as const, + disabled: false, + onClick: () => copyMileageDeliveryPackage() + }, + { + label: '轨迹复核', + action: '轨迹回放', + color: currentVehicleKeyword ? 'blue' as const : 'grey' as const, + disabled: !currentVehicleKeyword || !onOpenHistory, + onClick: () => onOpenHistory?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, dateFrom: filters.dateFrom ?? '', dateTo: filters.dateTo ?? '' }) + }, + { + label: '导出明细', + action: '导出CSV', + color: rows.length > 0 ? 'blue' as const : 'grey' as const, + disabled: rows.length === 0, + onClick: () => exportMileage() + }, + { + label: '告警通知', + action: '在线态势', + color: offlineVehicleCount > 0 ? 'orange' as const : 'green' as const, + disabled: false, + onClick: () => copyOnlineOperationsReport() + } + ]; const mileageCustomerActions = [ { label: '导出当前明细', @@ -1549,6 +1610,51 @@ export function Mileage({ )} /> +
+
+ + 客户里程结论条 + {mileageDeliveryState} + {closureStatus} + + + 先给客户一个可交付结论,再进入轨迹复核、明细导出和告警通知。 + + + 当前范围:{currentVehicleKeyword || '全部车辆'} / {mileageRangeText},数据源只作为证据,不作为客户操作入口。 + +
+
+ {mileageConclusionItems.map((item) => ( + + ))} +
+
+ {mileageConclusionActions.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 9e77bdd1..bb13541d 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -8657,6 +8657,109 @@ button.vp-realtime-command-item:focus-visible { gap: 16px; } +.vp-mileage-conclusion-strip { + margin-top: 16px; + border: 1px solid rgba(22, 100, 255, 0.18); + border-radius: var(--vp-radius); + background: #fff; + display: grid; + grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.35fr) minmax(190px, 0.55fr); + overflow: hidden; +} + +.vp-mileage-conclusion-copy { + padding: 18px; + border-right: 1px solid var(--vp-border); + background: #f7fbff; + display: grid; + gap: 10px; + align-content: start; +} + +.vp-mileage-conclusion-metrics { + padding: 14px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 10px; +} + +.vp-mileage-conclusion-metric { + min-height: 116px; + padding: 12px; + border: 1px solid rgba(22, 100, 255, 0.13); + border-radius: 8px; + background: #fbfcff; + color: inherit; + cursor: pointer; + font: inherit; + text-align: left; + display: grid; + gap: 8px; + align-content: start; +} + +.vp-mileage-conclusion-metric:hover, +.vp-mileage-conclusion-metric:focus-visible, +.vp-mileage-conclusion-action:hover, +.vp-mileage-conclusion-action:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #f5f9ff; + box-shadow: var(--vp-shadow-sm); + outline: none; +} + +.vp-mileage-conclusion-metric strong { + color: var(--vp-text); + font-size: 19px; + line-height: 24px; + word-break: break-word; +} + +.vp-mileage-conclusion-metric span { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; + word-break: break-word; +} + +.vp-mileage-conclusion-actions { + padding: 14px; + border-left: 1px solid var(--vp-border); + background: #fafcff; + display: grid; + grid-template-columns: 1fr; + gap: 8px; +} + +.vp-mileage-conclusion-action { + min-height: 46px; + padding: 8px 10px; + border: 1px solid rgba(22, 100, 255, 0.13); + border-radius: 8px; + background: #fff; + color: inherit; + cursor: pointer; + font: inherit; + text-align: left; + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.vp-mileage-conclusion-action:disabled { + cursor: not-allowed; + opacity: 0.62; +} + +.vp-mileage-conclusion-action span { + color: var(--vp-primary); + font-size: 12px; + font-weight: 700; + line-height: 18px; + white-space: nowrap; +} + .vp-mileage-customer-workbench { margin-top: 16px; border: 1px solid rgba(22, 100, 255, 0.18); @@ -13315,6 +13418,8 @@ button.vp-realtime-command-item:focus-visible { .vp-online-ops-board, .vp-online-ops-grid, .vp-stat-insight-grid, + .vp-mileage-conclusion-strip, + .vp-mileage-conclusion-metrics, .vp-mileage-customer-workbench, .vp-mileage-customer-workbench-grid, .vp-mileage-reconciliation-conclusion, @@ -13448,6 +13553,13 @@ button.vp-realtime-command-item:focus-visible { border-bottom: 1px solid var(--vp-border); } + .vp-mileage-conclusion-copy, + .vp-mileage-conclusion-actions { + border-left: 0; + border-right: 0; + border-bottom: 1px solid var(--vp-border); + } + .vp-customer-cockpit-workflow { grid-template-columns: 1fr; } 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 abe605ac..ffda5412 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -9284,6 +9284,16 @@ test('shows vehicle-first statistics domains for one vehicle service', async () render(); expect(await screen.findByText('客户统计查询')).toBeInTheDocument(); + expect(screen.getByText('客户里程结论条')).toBeInTheDocument(); + expect(screen.getByText('先给客户一个可交付结论,再进入轨迹复核、明细导出和告警通知。')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户里程结论 区间累计 210 km' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户里程结论 明细合计 170 km' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户里程结论 异常记录 1 条' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户里程结论 在线影响 1 离线' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户里程动作 复制结论 复制摘要' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户里程动作 轨迹复核 轨迹回放' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户里程动作 导出明细 导出CSV' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户里程动作 告警通知 在线态势' })).toBeInTheDocument(); expect(screen.getByText('客户里程统计工作台')).toBeInTheDocument(); expect(screen.getByText('统计页先回答客户这段时间跑了多少、每日是否闭合、异常在哪里、能否导出。')).toBeInTheDocument(); expect(screen.getByText('来源证据只用于统计可信度:JT808')).toBeInTheDocument();