From 82faa046b7f765c0d63a3ad316df53cdbf66a6c6 Mon Sep 17 00:00:00 2001 From: lingniu Date: Sun, 5 Jul 2026 21:14:19 +0800 Subject: [PATCH] feat(platform): add customer history evidence chain --- .../apps/web/src/pages/History.tsx | 89 +++++++++++++++++++ .../apps/web/src/styles/global.css | 86 ++++++++++++++++++ .../apps/web/src/test/App.test.tsx | 7 ++ 3 files changed, 182 insertions(+) diff --git a/vehicle-data-platform/apps/web/src/pages/History.tsx b/vehicle-data-platform/apps/web/src/pages/History.tsx index 078b5703..b177a14d 100644 --- a/vehicle-data-platform/apps/web/src/pages/History.tsx +++ b/vehicle-data-platform/apps/web/src/pages/History.tsx @@ -1655,6 +1655,63 @@ export function History({ } loadRawFrames(nextFilters, 1, rawPagination.pageSize, tab === 'fields'); }; + const customerTimeWindowEvidenceItems = [ + { + title: '轨迹复盘', + value: validLocations.length > 0 ? `${validLocations.length.toLocaleString()} 点` : '待查询', + detail: '先用车辆地图和轨迹回放解释这段时间车辆在哪里、怎么走。', + action: '查看轨迹', + color: validLocations.length > 0 ? 'green' as const : 'orange' as const, + disabled: false, + onClick: () => openQueryTab('location') + }, + { + title: '里程核对', + value: formatNumber(mileageDelta, ' km'), + detail: '把同一车辆和时间窗带到统计页，核对区间差值与日报闭合。', + action: '统计查询', + color: isFiniteNumber(mileageDelta) ? 'green' as const : 'grey' as const, + disabled: !onOpenMileage || !currentVehicleKeyword, + onClick: () => onOpenMileage?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) }) + }, + { + title: '历史导出', + value: `${(rawFrames.total ?? 0).toLocaleString()} 帧`, + detail: '下钻到历史明细和位置记录，保留客户问责时可复核的证据。', + action: '明细证据', + color: (rawFrames.total ?? 0) > 0 ? 'blue' as const : 'grey' as const, + disabled: false, + onClick: () => openQueryTab('raw') + }, + { + title: '字段裁剪', + value: rawFieldRows.length > 0 ? `${rawFieldRows.length.toLocaleString()} 字段` : `${selectedFieldCount.toLocaleString()} 字段`, + detail: '按客户只需要的字段生成交付视图，避免暴露完整 RAW 结构。', + action: '字段导出', + color: rawFieldRows.length > 0 || selectedFieldCount > 0 ? 'green' as const : 'orange' as const, + disabled: false, + onClick: () => openQueryTab('fields') + }, + { + title: '告警复盘', + value: anomalyTotal > 0 ? `${anomalyTotal.toLocaleString()} 项` : '可说明', + detail: '同一时间窗查看断链、离线、定位异常和通知闭环。', + action: '告警事件', + color: anomalyTotal > 0 ? 'orange' as const : 'blue' as const, + disabled: false, + onClick: () => { + window.location.hash = buildAppHash({ + page: 'alert-events', + keyword: currentVehicleKeyword, + protocol: currentProtocol, + filters: { + ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), + ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) + } + }); + } + } + ]; const customerReplayNavigation = [ { title: '选车和时间', @@ -1713,6 +1770,38 @@ export function History({ 数据通道：{currentProtocol || '全部数据通道'} {scopeDescription} +
+
+ + 客户时间窗证据链 + {deliveryState} + {currentVehicleKeyword || '待选择车辆'} + + + 同一辆车和同一时间窗，串起实时轨迹、里程核对、历史导出、字段裁剪和告警复盘。 + + + GB32960、JT808、MQTT 只是证据来源；客户页面只回答车辆在哪里、跑了多少、能否导出、异常谁处理。 + +
+
+ {customerTimeWindowEvidenceItems.map((item) => ( + + ))} +
+
{mode === 'query' ? (
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index 97365b46..83b4389a 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -7687,6 +7687,90 @@ button.vp-realtime-command-item:focus-visible { line-height: 18px; } +.vp-history-evidence-chain { + 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(300px, 0.58fr) minmax(0, 1.42fr); + overflow: hidden; + box-shadow: var(--vp-shadow-sm); +} + +.vp-history-evidence-chain-summary { + padding: 18px; + border-right: 1px solid var(--vp-border); + background: #f7fbff; + display: grid; + gap: 12px; + align-content: start; +} + +.vp-history-evidence-chain-summary .semi-typography-secondary { + font-size: 13px; + line-height: 20px; +} + +.vp-history-evidence-chain-grid { + min-width: 0; + padding: 16px; + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 10px; +} + +.vp-history-evidence-chain-item { + min-height: 150px; + 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-history-evidence-chain-item:hover, +.vp-history-evidence-chain-item:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #f5f9ff; + box-shadow: var(--vp-shadow-sm); + outline: none; +} + +.vp-history-evidence-chain-item:disabled { + cursor: not-allowed; + opacity: 0.62; +} + +.vp-history-evidence-chain-item strong { + color: var(--vp-text); + font-size: 18px; + line-height: 24px; + font-weight: 700; + word-break: break-word; +} + +.vp-history-evidence-chain-item span { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; + word-break: break-word; +} + +.vp-history-evidence-chain-item em { + color: var(--vp-primary); + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; +} + .vp-history-service-desk { margin-top: 16px; border: 1px solid rgba(22, 100, 255, 0.18); @@ -10188,6 +10272,8 @@ button.vp-realtime-command-item:focus-visible { .vp-trajectory-anomaly-grid, .vp-trajectory-impact-board, .vp-trajectory-impact-grid, + .vp-history-evidence-chain, + .vp-history-evidence-chain-grid, .vp-history-service-desk, .vp-history-service-desk-grid, .vp-history-time-window-board, 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 8d894fee..8b3be0d5 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -5749,6 +5749,13 @@ test('copies trajectory playback summary from history page', async () => { 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.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.getByText('按车辆和时间窗复盘每一段行程')).toBeInTheDocument(); expect(screen.getByText('客户需要看到路线、起止时间、里程变化、速度异常和可导出的证据。明细证据和字段裁剪只作为轨迹复盘的依据。')).toBeInTheDocument(); expect(screen.getByRole('button', { name: '轨迹回放指标 轨迹点 2' })).toBeInTheDocument();