feat(platform): add customer history export board

This commit is contained in:
lingniu
2026-07-05 04:50:35 +08:00
parent b5f98bb6d8
commit d762403677
3 changed files with 187 additions and 0 deletions

View File

@@ -1238,6 +1238,98 @@ export function History({
<Tag color={currentProtocol ? 'blue' : 'green'}>{currentProtocol || '全部来源'}</Tag>
<Typography.Text type="tertiary">{scopeDescription}</Typography.Text>
</div>
{mode === 'query' ? (
<Card bordered className="vp-history-customer-export-board" bodyStyle={{ padding: 0 }}>
<div className="vp-history-customer-export-summary">
<Space wrap>
<Tag color="blue"></Tag>
<Tag color={deliveryStateColor}>{deliveryState}</Tag>
<Tag color={activeTab === 'location' ? 'green' : activeTab === 'raw' ? 'blue' : 'orange'}>
{activeTab === 'location' ? '位置历史' : activeTab === 'raw' ? '原始记录' : '字段明细'}
</Tag>
</Space>
<Typography.Title heading={5} style={{ margin: 0 }}></Typography.Title>
<Typography.Text type="secondary">
RAW证据
</Typography.Text>
<Space wrap>
<Button size="small" theme="solid" type="primary" onClick={() => openQueryTab('location')}></Button>
<Button size="small" theme="light" type="primary" onClick={() => openQueryTab('raw')}>RAW</Button>
<Button size="small" theme="light" type="primary" onClick={() => openQueryTab('fields')}></Button>
<Button size="small" theme="light" onClick={copyDeliveryPackage}></Button>
</Space>
</div>
<div className="vp-history-customer-export-steps">
{[
{
step: '01',
title: '选择范围',
value: currentVehicleKeyword || '全部车辆',
detail: `${currentProtocol || '全部来源'} / ${filters.dateFrom || '-'}${filters.dateTo || '-'}`,
action: '调整筛选',
color: currentVehicleKeyword ? 'green' as const : 'blue' as const,
disabled: false,
onClick: () => document.querySelector<HTMLInputElement>('input[name="keyword"]')?.focus()
},
{
step: '02',
title: '位置历史',
value: `${locations.total.toLocaleString()}`,
detail: `${validLocations.length.toLocaleString()} 个有效坐标,可用于定位复盘和轨迹回放。`,
action: '导出位置',
color: locations.total > 0 ? 'green' as const : 'grey' as const,
disabled: locations.items.length === 0,
onClick: exportLocations
},
{
step: '03',
title: 'RAW证据',
value: `${(rawFrames.total ?? 0).toLocaleString()}`,
detail: '保留原始接入记录,用于解释位置、里程和字段来源。',
action: '导出RAW',
color: (rawFrames.total ?? 0) > 0 ? 'blue' as const : 'grey' as const,
disabled: rawFrames.items.length === 0,
onClick: exportRawFrames
},
{
step: '04',
title: '字段明细',
value: `${rawFieldRows.length.toLocaleString()}`,
detail: selectedFieldCount > 0 ? `已裁剪 ${selectedFieldCount.toLocaleString()} 个字段。` : '需要字段级交付时切换字段明细或填写字段裁剪。',
action: '字段明细',
color: rawFieldRows.length > 0 ? 'green' as const : 'orange' as const,
disabled: false,
onClick: () => openQueryTab('fields')
},
{
step: '05',
title: '交付说明',
value: deliveryState,
detail: anomalyTotal > 0 ? `存在 ${anomalyTotal.toLocaleString()} 项质量提示,交付时需说明。` : '当前范围未发现明显轨迹质量提示。',
action: '复制交付',
color: deliveryStateColor,
disabled: false,
onClick: copyDeliveryPackage
}
].map((item) => (
<button
key={item.step}
type="button"
className="vp-history-customer-export-step"
disabled={item.disabled}
onClick={item.onClick}
aria-label={`客户数据导出 ${item.title} ${item.action}`}
>
<span>{item.step}</span>
<Tag color={item.color}>{item.title}</Tag>
<strong>{item.value}</strong>
<small>{item.detail}</small>
<em>{item.action}</em>
</button>
))}
</div>
</Card>
) : null}
<Card
bordered
title={<Space><span></span><Button size="small" icon={<IconCopy />} onClick={copyTrajectoryDecision}></Button></Space>}