feat(platform): add customer history evidence chain

This commit is contained in:
lingniu
2026-07-05 21:14:19 +08:00
parent 3efeeb07ac
commit 82faa046b7
3 changed files with 182 additions and 0 deletions

View File

@@ -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({
<Tag color={currentProtocol ? 'blue' : 'green'}>{currentProtocol || '全部数据通道'}</Tag>
<Typography.Text type="tertiary">{scopeDescription}</Typography.Text>
</div>
<section className="vp-history-evidence-chain" aria-label="客户时间窗证据链">
<div className="vp-history-evidence-chain-summary">
<Space wrap>
<Tag color="blue"></Tag>
<Tag color={deliveryStateColor}>{deliveryState}</Tag>
<Tag color={currentVehicleKeyword ? 'green' : 'orange'}>{currentVehicleKeyword || '待选择车辆'}</Tag>
</Space>
<Typography.Title heading={5} style={{ margin: 0 }}>
</Typography.Title>
<Typography.Text type="secondary">
GB32960JT808MQTT
</Typography.Text>
</div>
<div className="vp-history-evidence-chain-grid">
{customerTimeWindowEvidenceItems.map((item) => (
<button
key={item.title}
type="button"
className="vp-history-evidence-chain-item"
disabled={item.disabled}
onClick={item.onClick}
aria-label={`客户时间窗证据链 ${item.title} ${item.action}`}
>
<Tag color={item.color}>{item.title}</Tag>
<strong>{item.value}</strong>
<span>{item.detail}</span>
<em>{item.action}</em>
</button>
))}
</div>
</section>
{mode === 'query' ? (
<section className="vp-history-service-desk" aria-label="车辆历史服务台">
<div className="vp-history-service-desk-summary">