shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(platform): refine history query customer workflow

Browse Source
This commit is contained in:
lingniu
2026-07-05 12:26:46 +08:00
parent a7e10f0983
commit 993b1adb00
2 changed files with 144 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
vehicle-data-platform/apps/web/src/pages/History.tsx
View File

@@ -212,7 +212,7 @@ function mergeInitialFilters(initialVin: string, initialProtocol?: string, initi
const locationExportColumns: CsvColumn<HistoryLocationRow>[] = [
{ title: 'VIN', value: (row) => row.vin },
{ title: '车牌', value: (row) => row.plate },
{ title: '证据来源', value: (row) => row.protocol },
{ title: '数据通道', value: (row) => row.protocol },
{ title: '经度', value: (row) => row.longitude },
{ title: '纬度', value: (row) => row.latitude },
{ title: '速度km/h', value: (row) => row.speedKmh },
@@ -225,7 +225,7 @@ const rawExportColumns: CsvColumn<RawFrameRow>[] = [
{ title: 'ID', value: (row) => row.id },
{ title: 'VIN', value: (row) => row.vin },
{ title: '车牌', value: (row) => row.plate },
{ title: '证据来源', value: (row) => row.protocol },
{ title: '数据通道', value: (row) => row.protocol },
{ title: '帧类型', value: (row) => row.frameType },
{ title: '大小B', value: (row) => row.rawSizeBytes },
{ title: '设备时间', value: (row) => row.deviceTime },
@@ -234,10 +234,10 @@ const rawExportColumns: CsvColumn<RawFrameRow>[] = [
];
const rawFieldExportColumns: CsvColumn<RawFieldRow>[] = [
{ title: '原始记录ID', value: (row) => row.rawId },
{ title: '历史明细ID', value: (row) => row.rawId },
{ title: 'VIN', value: (row) => row.vin },
{ title: '车牌', value: (row) => row.plate },
{ title: '证据来源', value: (row) => row.protocol },
{ title: '数据通道', value: (row) => row.protocol },
{ title: '帧类型', value: (row) => row.frameType },
{ title: '字段', value: (row) => row.fieldPath },
{ title: '值', value: (row) => formatFieldValue(row.fieldValue) },
@@ -293,7 +293,7 @@ function trajectorySummaryText({
lastLocation?: HistoryLocationRow;
}) {
const vehicle = filters.keyword?.trim() || '全部车辆';
const protocol = filters.protocol?.trim() || '全部来源';
const protocol = filters.protocol?.trim() || '全部数据通道';
const dateFrom = filters.dateFrom?.trim();
const dateTo = filters.dateTo?.trim();
const range = dateFrom || dateTo ? `${dateFrom || '-'} 至 ${dateTo || '-'}` : '全部时间';
@@ -302,7 +302,7 @@ function trajectorySummaryText({
return [
'【轨迹回放摘要】',
`车辆：${vehicle}`,
`证据来源：${protocol}`,
`数据通道：${protocol}`,
`查询范围：${range}`,
`轨迹点：${totalPoints.toLocaleString()}，有效定位：${validPointCount.toLocaleString()}`,
`区间里程：${formatNumber(mileageDelta, ' km')}`,
@@ -349,17 +349,17 @@ function historyEvidencePackageText({
return [
'【数据复核包】',
`车辆：${vehicle || '全部车辆'}`,
`证据来源：${protocol || '全部来源'}`,
`数据通道：${protocol || '全部数据通道'}`,
`查询范围：${filters.dateFrom?.trim() || '-'} 至 ${filters.dateTo?.trim() || '-'}`,
`位置记录：${locationCount.toLocaleString()}，有效定位：${validPointCount.toLocaleString()}`,
`原始记录：${rawCount.toLocaleString()}，字段明细：${fieldCount.toLocaleString()}`,
`历史明细：${rawCount.toLocaleString()}，字段明细：${fieldCount.toLocaleString()}`,
`区间里程：${formatNumber(mileageDelta, ' km')}，最高速度：${formatNumber(maxSpeed, ' km/h')}`,
`起点：${firstLocation?.deviceTime || firstLocation?.serverTime || '-'}`,
`终点：${lastLocation?.deviceTime || lastLocation?.serverTime || '-'}`,
`异常：断点 ${anomalySummary.gapCount.toLocaleString()} / 里程回退 ${anomalySummary.mileageRollbackCount.toLocaleString()} / 超速 ${anomalySummary.overspeedCount.toLocaleString()}`,
`轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: vehicle, protocol, filters: evidenceFilters }))}`,
`历史位置：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'location' } }))}`,
`原始记录：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`历史明细：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`字段明细：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'fields', includeFields: 'true', ...(filters.fields?.trim() ? { fields: filters.fields.trim() } : {}) } }))}`,
`里程复核：${appURL(buildAppHash({ page: 'mileage', keyword: vehicle, protocol, filters: evidenceFilters }))}`,
`车辆服务：${appURL(buildAppHash({ page: 'detail', keyword: vehicle, protocol }))}`
@@ -396,20 +396,20 @@ function deliveryPackageText({
? anomalyTotal > 0 || (coverageRate ?? 100) < 80 ? '可交付，建议附带复核说明' : '可交付'
: '待查询数据';
return [
'【客户数据交付包】',
'【客户查询导出包】',
`交付状态：${deliveryState}`,
'交付物：位置历史 / 轨迹回放 / 里程复核 / 原始证据 / 字段明细 / 质量提示',
'交付物：位置历史 / 轨迹回放 / 里程复核 / 历史明细 / 字段明细 / 质量提示',
`车辆范围：${vehicle || '全部车辆'}`,
`证据来源：${protocol || '全部来源'}`,
`数据通道：${protocol || '全部数据通道'}`,
`时间范围：${filters.dateFrom?.trim() || '-'} 至 ${filters.dateTo?.trim() || '-'}`,
`位置历史：${locationCount.toLocaleString()} 条，有效定位 ${validPointCount.toLocaleString()}，覆盖率 ${formatPercent(coverageRate)}`,
`原始证据：${rawCount.toLocaleString()} 帧`,
`历史明细：${rawCount.toLocaleString()} 帧`,
`字段明细：${fieldCount.toLocaleString()} 个字段`,
`区间里程：${formatNumber(mileageDelta, ' km')}`,
`质量提示：断点 ${anomalySummary.gapCount.toLocaleString()} / 里程回退 ${anomalySummary.mileageRollbackCount.toLocaleString()} / 超速 ${anomalySummary.overspeedCount.toLocaleString()}`,
`位置导出：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'location' } }))}`,
`原始导出：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`字段导出：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'fields', includeFields: 'true', ...(filters.fields?.trim() ? { fields: filters.fields.trim() } : {}) } }))}`,
`导出明细：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`导出字段：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'fields', includeFields: 'true', ...(filters.fields?.trim() ? { fields: filters.fields.trim() } : {}) } }))}`,
`轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: vehicle, protocol, filters: evidenceFilters }))}`,
`里程复核：${appURL(buildAppHash({ page: 'mileage', keyword: vehicle, protocol, filters: evidenceFilters }))}`,
`车辆服务：${appURL(buildAppHash({ page: 'detail', keyword: vehicle, protocol }))}`
@@ -460,14 +460,14 @@ function trajectoryReviewPackageText({
...(filters.dateTo?.trim() ? { dateTo: filters.dateTo.trim() } : {})
};
const anomalyAction = anomalySummary.gapCount > 0 || anomalySummary.mileageRollbackCount > 0 || anomalySummary.overspeedCount > 0
? '建议核对原始记录、字段明细、当日里程统计，并确认平台是否存在断链或补发。'
: '当前页未发现明显断点、里程回退或速度异常，可作为轨迹证据使用。';
? '建议核对历史明细、字段明细、当日里程统计，并确认平台是否存在断链或补发。'
: '当前页未发现明显断点、里程回退或速度异常，可作为轨迹复盘依据使用。';
return [
'【轨迹复盘交接包】',
`车辆：${vehicle || '全部车辆'}`,
`证据来源：${protocol || '全部来源'}`,
`数据通道：${protocol || '全部数据通道'}`,
`查询范围：${filters.dateFrom?.trim() || '-'} 至 ${filters.dateTo?.trim() || '-'}`,
`轨迹规模：位置 ${locationCount.toLocaleString()} / 有效定位 ${validPointCount.toLocaleString()} / 原始记录 ${rawCount.toLocaleString()} / 字段明细 ${fieldCount.toLocaleString()}`,
`轨迹规模：位置 ${locationCount.toLocaleString()} / 有效定位 ${validPointCount.toLocaleString()} / 历史明细 ${rawCount.toLocaleString()} / 字段明细 ${fieldCount.toLocaleString()}`,
`轨迹质量：定位覆盖率 ${formatPercent(coverageRate)} / 回放跨度 ${formatDurationMinutes(playbackSpanMinutes)} / 采样间隔 ${formatDurationMinutes(playbackIntervalMinutes, '/点')}`,
`里程速度：区间里程 ${formatNumber(mileageDelta, ' km')} / 最高速度 ${formatNumber(maxSpeed, ' km/h')}`,
`起点：${firstLocation?.deviceTime || firstLocation?.serverTime || '-'}`,
@@ -481,7 +481,7 @@ function trajectoryReviewPackageText({
`下一步：${anomalyAction}`,
`轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: vehicle, protocol, filters: evidenceFilters }))}`,
`历史位置：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'location' } }))}`,
`原始记录：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`历史明细：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`字段明细：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'fields', includeFields: 'true', ...(filters.fields?.trim() ? { fields: filters.fields.trim() } : {}) } }))}`,
`里程复核：${appURL(buildAppHash({ page: 'mileage', keyword: vehicle, protocol, filters: evidenceFilters }))}`,
`车辆服务：${appURL(buildAppHash({ page: 'detail', keyword: vehicle, protocol }))}`
@@ -526,18 +526,18 @@ function trajectoryImpactPackageText({
return [
'【轨迹运营影响】',
`车辆：${vehicle || '全部车辆'}`,
`证据来源：${protocol || '全部来源'}`,
`数据通道：${protocol || '全部数据通道'}`,
`查询范围：${filters.dateFrom?.trim() || '-'} 至 ${filters.dateTo?.trim() || '-'}`,
`业务状态：${operationState}`,
`轨迹范围：位置 ${locationCount.toLocaleString()} / 有效定位 ${validPointCount.toLocaleString()} / 原始记录 ${rawCount.toLocaleString()} / 字段明细 ${fieldCount.toLocaleString()}`,
`轨迹范围：位置 ${locationCount.toLocaleString()} / 有效定位 ${validPointCount.toLocaleString()} / 历史明细 ${rawCount.toLocaleString()} / 字段明细 ${fieldCount.toLocaleString()}`,
`定位覆盖率：${formatPercent(coverageRate)}`,
`回放跨度：${formatDurationMinutes(playbackSpanMinutes)}，采样间隔：${formatDurationMinutes(playbackIntervalMinutes, '/点')}`,
`里程速度：${formatNumber(mileageDelta, ' km')} / ${formatNumber(maxSpeed, ' km/h')}`,
`异常影响：断点 ${anomalySummary.gapCount.toLocaleString()} / 里程回退 ${anomalySummary.mileageRollbackCount.toLocaleString()} / 超速 ${anomalySummary.overspeedCount.toLocaleString()}`,
`地图能力：${amapConfigured ? '高德 JS API 已配置' : '高德 JS API 待配置'}`,
`轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: vehicle, protocol, filters: evidenceFilters }))}`,
`数据导出：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'location' } }))}`,
`原始记录：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`历史查询导出：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'location' } }))}`,
`历史明细：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`车辆服务：${appURL(buildAppHash({ page: 'detail', keyword: vehicle, protocol }))}`
].join('\n');
}
@@ -590,9 +590,9 @@ function trajectoryCustomerDecisionText({
`决策结论：${decision}`,
`交付状态：${deliveryState}`,
`车辆范围：${vehicle || '全部车辆'}`,
`证据来源：${protocol || '全部来源'}`,
`数据通道：${protocol || '全部数据通道'}`,
`时间范围：${filters.dateFrom?.trim() || '-'} 至 ${filters.dateTo?.trim() || '-'}`,
`轨迹规模：位置 ${locationCount.toLocaleString()} / 有效定位 ${validPointCount.toLocaleString()} / 原始记录 ${rawCount.toLocaleString()} / 字段明细 ${fieldCount.toLocaleString()}`,
`轨迹规模：位置 ${locationCount.toLocaleString()} / 有效定位 ${validPointCount.toLocaleString()} / 历史明细 ${rawCount.toLocaleString()} / 字段明细 ${fieldCount.toLocaleString()}`,
`定位覆盖：${formatPercent(coverageRate)}`,
`回放跨度：${formatDurationMinutes(playbackSpanMinutes)}，采样间隔：${formatDurationMinutes(playbackIntervalMinutes, '/点')}`,
`区间里程：${formatNumber(mileageDelta, ' km')}，最高速度：${formatNumber(maxSpeed, ' km/h')}`,
@@ -605,10 +605,10 @@ function trajectoryCustomerDecisionText({
'1. 先看轨迹覆盖：确认是否有足够有效坐标。',
'2. 再看时间断点：断点会影响定位连续性和客户解释。',
'3. 再看里程速度：区间里程、速度和轨迹方向需要能互相解释。',
'4. 最后回到证据：异常点必须打开原始记录、字段明细和里程统计复核。',
'4. 最后回到依据：异常点必须打开历史明细、字段明细和里程统计复核。',
`轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: vehicle, protocol, filters: evidenceFilters }))}`,
`数据导出：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'location' } }))}`,
`原始记录：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`历史查询导出：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'location' } }))}`,
`历史明细：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'raw', includeFields: 'true' } }))}`,
`字段明细：${appURL(buildAppHash({ page: 'history-query', keyword: vehicle, protocol, filters: { ...evidenceFilters, tab: 'fields', includeFields: 'true', ...(filters.fields?.trim() ? { fields: filters.fields.trim() } : {}) } }))}`,
`里程复核：${appURL(buildAppHash({ page: 'mileage', keyword: vehicle, protocol, filters: evidenceFilters }))}`,
`车辆服务：${appURL(buildAppHash({ page: 'detail', keyword: vehicle, protocol }))}`
@@ -823,13 +823,13 @@ export function History({
const hasTrajectoryAnomaly = trajectoryAnomalies.gapCount > 0 || trajectoryAnomalies.mileageRollbackCount > 0 || trajectoryAnomalies.overspeedCount > 0;
const currentVehicleKeyword = filters.keyword?.trim() ?? '';
const currentProtocol = filters.protocol?.trim() ?? '';
const pageTitle = mode === 'query' ? '数据导出' : '轨迹回放';
const pageTitle = mode === 'query' ? '历史查询导出' : '轨迹回放';
const pageDescription = mode === 'query'
? '按车辆、时间和数据通道导出位置记录、原始记录和字段明细，支持分页、字段裁剪和 CSV 导出'
: '按车辆查询历史位置和轨迹回放，原始记录只作为复核证据，证据来源仅用于过滤';
? '按车辆、时间和数据通道导出位置记录、历史明细和字段明细，支持分页、字段裁剪和 CSV 导出'
: '按车辆查询历史位置和轨迹回放，历史明细只作为复核依据，数据通道仅用于过滤';
const scopeDescription = mode === 'query'
? '位置记录、原始记录和字段明细按当前车辆与时间范围分页查询。'
: '历史位置和原始记录按当前车辆与时间范围查询。';
? '位置记录、历史明细和字段明细按当前车辆与时间范围分页查询。'
: '历史位置和历史明细按当前车辆与时间范围查询。';
const amapConfigured = isAMapConfigured();
const selectedFieldCount = splitFields(filters.fields).length;
const playbackRows = validLocations.length > 0 ? validLocations : locationItems;
@@ -848,7 +848,7 @@ export function History({
}));
const filterSummary = [
currentVehicleKeyword ? `车辆：${currentVehicleKeyword}` : '',
currentProtocol ? `证据来源：${currentProtocol}` : '',
currentProtocol ? `数据通道：${currentProtocol}` : '',
filters.dateFrom?.trim() ? `开始时间：${filters.dateFrom.trim()}` : '',
filters.dateTo?.trim() ? `结束时间：${filters.dateTo.trim()}` : '',
isIncludeFieldsEnabled(filters.includeFields) ? '返回字段明细' : '',
@@ -863,12 +863,12 @@ export function History({
? anomalyTotal > 0 || (trajectoryCoverageRate ?? 100) < 80 ? '可复盘，需说明' : '可直接复盘'
: '待查询数据';
const trajectoryDecisionColor = trajectoryDecisionState === '可直接复盘' ? 'green' as const : trajectoryDecisionState === '待查询数据' ? 'grey' as const : 'orange' as const;
const deliveryScopeText = `${currentVehicleKeyword || '全部车辆'} / ${currentProtocol || '全部来源'}`;
const deliveryScopeText = `${currentVehicleKeyword || '全部车辆'} / ${currentProtocol || '全部数据通道'}`;
const trajectoryDecisionItems = [
{
label: '复盘结论',
value: trajectoryDecisionState,
detail: trajectoryDecisionState === '可直接复盘' ? '轨迹连续性和证据覆盖可用于客户复盘。' : trajectoryDecisionState === '待查询数据' ? '先输入车辆和时间范围查询轨迹。' : '轨迹可用，但需要附带断点或异常说明。',
detail: trajectoryDecisionState === '可直接复盘' ? '轨迹连续性和明细覆盖可用于客户复盘。' : trajectoryDecisionState === '待查询数据' ? '先输入车辆和时间范围查询轨迹。' : '轨迹可用，但需要附带断点或异常说明。',
color: trajectoryDecisionColor,
action: '复制决策',
disabled: false,
@@ -902,11 +902,11 @@ export function History({
onClick: () => onOpenMileage?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) })
},
{
label: '证据交付',
label: '明细复核',
value: `${(rawFrames.total ?? 0).toLocaleString()} 帧`,
detail: rawFieldRows.length > 0 ? `${rawFieldRows.length.toLocaleString()} 个字段明细可导出。` : '异常点需要回到原始记录和字段明细。',
detail: rawFieldRows.length > 0 ? `${rawFieldRows.length.toLocaleString()} 个字段明细可导出。` : '异常点需要回到历史明细和字段明细。',
color: (rawFrames.total ?? 0) > 0 ? 'blue' as const : 'grey' as const,
action: '原始证据',
action: '历史明细',
disabled: false,
onClick: () => openQueryTab('raw')
}
@@ -940,11 +940,11 @@ export function History({
onClick: () => onOpenMileage?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) })
},
{
title: '原始证据',
title: '历史明细',
value: `${(rawFrames.total ?? 0).toLocaleString()} 帧`,
detail: '保留接入证据，用于解释字段值来源。',
detail: '保留接入明细，用于解释字段值来源。',
color: (rawFrames.total ?? 0) > 0 ? 'blue' as const : 'grey' as const,
action: '导出原始',
action: '导出明细',
disabled: rawFrames.items.length === 0,
onClick: () => exportRawFrames()
},
@@ -980,11 +980,11 @@ export function History({
};
const exportRawFrames = () => {
if (rawFrames.items.length === 0) {
Toast.warning('当前没有可导出的原始记录');
Toast.warning('当前没有可导出的历史明细');
return;
}
downloadCsv(exportFileName('raw-frames', filters), buildCsv(rawExportColumns, rawFrames.items));
Toast.success(`已导出 ${rawFrames.items.length} 条原始记录`);
Toast.success(`已导出 ${rawFrames.items.length} 条历史明细`);
};
const exportRawFields = () => {
if (rawFieldRows.length === 0) {
@@ -1037,7 +1037,7 @@ export function History({
mileageDelta,
anomalySummary: trajectoryAnomalies
}),
'客户数据交付包'
'客户查询导出包'
);
};
const copyTrajectoryReviewPackage = () => {
@@ -1235,26 +1235,26 @@ export function History({
/>
<div className="vp-scope-bar">
<span className="vp-scope-label">当前车辆：{currentVehicleKeyword || '-'}</span>
<Tag color={currentProtocol ? 'blue' : 'green'}>当前来源：{currentProtocol || '全部来源'}</Tag>
<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="blue">客户历史查询导出</Tag>
<Tag color={deliveryStateColor}>{deliveryState}</Tag>
<Tag color={activeTab === 'location' ? 'green' : activeTab === 'raw' ? 'blue' : 'orange'}>
{activeTab === 'location' ? '位置历史' : activeTab === 'raw' ? '原始记录' : '字段明细'}
{activeTab === 'location' ? '位置历史' : activeTab === 'raw' ? '历史明细' : '字段明细'}
</Tag>
</Space>
<Typography.Title heading={5} style={{ margin: 0 }}>先锁定车辆和时间窗，再选择交付物并导出</Typography.Title>
<Typography.Text type="secondary">
面向客户的数据导出以车辆服务为中心：同一个筛选范围可以交付位置历史、原始证据、字段明细、轨迹复盘和里程复核。
面向客户的历史查询导出以车辆服务为中心：同一个筛选范围可以交付位置历史、历史明细、字段明细、轨迹复盘和里程复核。
</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')}>查询原始</Button>
<Button size="small" theme="light" type="primary" onClick={() => openQueryTab('raw')}>查询明细</Button>
<Button size="small" theme="light" type="primary" onClick={() => openQueryTab('fields')}>字段明细</Button>
<Button size="small" theme="light" onClick={copyDeliveryPackage}>复制交付包</Button>
</Space>
@@ -1265,7 +1265,7 @@ export function History({
step: '01',
title: '选择范围',
value: currentVehicleKeyword || '全部车辆',
detail: `${currentProtocol || '全部来源'} / ${filters.dateFrom || '-'} 至 ${filters.dateTo || '-'}`,
detail: `${currentProtocol || '全部数据通道'} / ${filters.dateFrom || '-'} 至 ${filters.dateTo || '-'}`,
action: '调整筛选',
color: currentVehicleKeyword ? 'green' as const : 'blue' as const,
disabled: false,
@@ -1283,10 +1283,10 @@ export function History({
},
{
step: '03',
title: '原始证据',
title: '历史明细',
value: `${(rawFrames.total ?? 0).toLocaleString()} 帧`,
detail: '保留原始接入记录，用于解释位置、里程和字段来源。',
action: '导出原始',
detail: '保留接入明细，用于解释位置、里程和字段来源。',
action: '导出明细',
color: (rawFrames.total ?? 0) > 0 ? 'blue' as const : 'grey' as const,
disabled: rawFrames.items.length === 0,
onClick: exportRawFrames
@@ -1318,7 +1318,7 @@ export function History({
className="vp-history-customer-export-step"
disabled={item.disabled}
onClick={item.onClick}
aria-label={`客户数据导出 ${item.title} ${item.action}`}
aria-label={`客户历史查询导出 ${item.title} ${item.action}`}
>
<span>{item.step}</span>
<Tag color={item.color}>{item.title}</Tag>
@@ -1342,14 +1342,14 @@ export function History({
<Tag color={deliveryStateColor}>{deliveryState}</Tag>
<Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
</Space>
<Typography.Title heading={5} style={{ margin: 0 }}>先判断轨迹能否复盘，再进入原始、字段和里程证据</Typography.Title>
<Typography.Title heading={5} style={{ margin: 0 }}>先判断轨迹能否复盘，再进入明细、字段和里程复核</Typography.Title>
<Typography.Text type="secondary">
客户问某辆车某段时间发生了什么时，先看定位覆盖、时间断点、里程速度和原始证据，避免把协议排查过程当成客户主流程。
客户问某辆车某段时间发生了什么时，先看定位覆盖、时间断点、里程速度和历史明细，避免把内部排查过程当成客户主流程。
</Typography.Text>
<Space wrap>
<Button size="small" theme="solid" type="primary" icon={<IconCopy />} onClick={copyTrajectoryDecision}>复制决策说明</Button>
<Button size="small" disabled={validLocations.length === 0} onClick={() => openQueryTab('location')}>播放轨迹</Button>
<Button size="small" disabled={(rawFrames.total ?? 0) === 0} onClick={() => openQueryTab('raw')}>原始证据</Button>
<Button size="small" disabled={(rawFrames.total ?? 0) === 0} onClick={() => openQueryTab('raw')}>历史明细</Button>
<Button size="small" disabled={!onOpenMileage} onClick={() => onOpenMileage?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) })}>里程复核</Button>
</Space>
</div>
@@ -1379,19 +1379,19 @@ export function History({
<Space wrap>
<Tag color="blue">客户查询</Tag>
<Tag color={activeTab === 'location' ? 'green' : 'blue'}>
{activeTab === 'location' ? '位置历史' : activeTab === 'raw' ? '原始记录' : '字段明细'}
{activeTab === 'location' ? '位置历史' : activeTab === 'raw' ? '历史明细' : '字段明细'}
</Tag>
</Space>
<Typography.Text strong>{currentVehicleKeyword || '全部车辆'}</Typography.Text>
<Typography.Text type="secondary">
面向车辆服务的历史数据检索入口。先按车辆和时间缩小范围，再导出位置、原始记录或字段明细，用于客户问询、BI 核对和问题追溯。
面向车辆服务的历史数据检索入口。先按车辆和时间缩小范围，再导出位置、历史明细或字段明细，用于客户问询、BI 核对和问题追溯。
</Typography.Text>
<Typography.Text type="tertiary">
默认查询最近一天，不预置任何车辆；输入 VIN、车牌或手机号后进入单车证据交付。
默认查询最近一天，不预置任何车辆；输入 VIN、车牌或手机号后进入单车查询导出。
</Typography.Text>
<Space wrap>
<Button size="small" theme="solid" type="primary" onClick={() => openQueryTab('location')}>查询位置历史</Button>
<Button size="small" onClick={() => openQueryTab('raw')}>查询原始记录</Button>
<Button size="small" onClick={() => openQueryTab('raw')}>查询历史明细</Button>
<Button size="small" onClick={() => openQueryTab('fields')}>查询字段明细</Button>
</Space>
</div>
@@ -1406,10 +1406,10 @@ export function History({
onClick: exportLocations
},
{
label: '原始记录',
label: '历史明细',
value: `${(rawFrames.total ?? 0).toLocaleString()} 帧`,
detail: '保存协议接入后的原始证据，可按车辆和时间追溯。',
action: '导出原始',
detail: '保存协议接入后的历史明细，可按车辆和时间追溯。',
action: '导出明细',
color: 'blue' as const,
onClick: exportRawFrames
},
@@ -1442,16 +1442,16 @@ export function History({
</Card>
) : null}
{mode === 'query' ? (
<Card bordered title="客户数据交付包" style={{ marginTop: 16 }}>
<Card bordered title="客户查询导出包" style={{ marginTop: 16 }}>
<div className="vp-history-package-board">
<div className="vp-history-package-summary">
<Space wrap>
<Tag color={deliveryStateColor}>{deliveryState}</Tag>
<Tag color={currentProtocol ? 'blue' : 'green'}>{currentProtocol || '全部来源'}</Tag>
<Tag color={currentProtocol ? 'blue' : 'green'}>{currentProtocol || '全部数据通道'}</Tag>
</Space>
<Typography.Text strong>{deliveryScopeText}</Typography.Text>
<Typography.Text type="secondary">
面向客户交付时，先确认车辆、时间、交付物和质量提示，再导出位置、原始记录或字段明细，避免把内部排查过程直接暴露给客户。
面向客户交付时，先确认车辆、时间、交付物和质量提示，再导出位置、历史明细或字段明细，避免把内部排查过程直接暴露给客户。
</Typography.Text>
<Space wrap>
<Button size="small" theme="solid" type="primary" icon={<IconCopy />} onClick={copyDeliveryPackage}>
@@ -1477,11 +1477,11 @@ export function History({
onClick: exportLocations
},
{
label: '原始证据',
label: '历史明细',
value: `${(rawFrames.total ?? 0).toLocaleString()} 帧`,
detail: '用于证明数据来自接入协议解析后的真实记录。',
detail: '用于追溯数据来自接入协议解析后的真实明细。',
color: (rawFrames.total ?? 0) > 0 ? 'blue' as const : 'grey' as const,
action: '导出原始',
action: '导出明细',
disabled: rawFrames.items.length === 0,
onClick: exportRawFrames
},
@@ -1511,7 +1511,7 @@ export function History({
type="button"
className="vp-history-package-item"
disabled={item.disabled}
aria-label={`客户数据交付 ${item.label} ${item.action}`}
aria-label={`客户查询导出 ${item.label} ${item.action}`}
onClick={item.onClick}
>
<span>
@@ -1554,7 +1554,7 @@ export function History({
<Card bordered>
<Form key={JSON.stringify(filters)} initValues={filters} layout="horizontal" onSubmit={(values) => submit(values)}>
<Form.Input field="keyword" label="车辆关键词" placeholder="VIN / 车牌 / 手机号" style={{ width: 260 }} />
<Form.Select field="protocol" label="证据来源" placeholder="全部来源" style={{ width: 190 }}>
<Form.Select field="protocol" label="数据通道" placeholder="全部数据通道" style={{ width: 190 }}>
<Select.Option value="GB32960">GB32960</Select.Option>
<Select.Option value="JT808">JT808</Select.Option>
<Select.Option value="YUTONG_MQTT">YUTONG_MQTT</Select.Option>
@@ -1587,7 +1587,7 @@ export function History({
</Space>
</Card>
) : null}
<Card bordered title="历史数据交付任务板" style={{ marginTop: 16 }}>
<Card bordered title="历史查询导出任务板" style={{ marginTop: 16 }}>
<div className="vp-history-delivery-grid">
{[
{
@@ -1618,13 +1618,13 @@ export function History({
onSecondary: () => currentVehicleKeyword && onOpenVehicle(currentVehicleKeyword, currentProtocol)
},
{
title: '原始证据',
tag: (rawFrames.total ?? 0) > 0 ? '有证据' : '待加载',
title: '历史明细',
tag: (rawFrames.total ?? 0) > 0 ? '有明细' : '待加载',
tagColor: (rawFrames.total ?? 0) > 0 ? 'blue' as const : 'orange' as const,
value: `${(rawFrames.total ?? 0).toLocaleString()} 帧`,
detail: '保留接入侧原始记录，用于解释位置、里程和字段值的来源。',
primaryText: '看原始',
secondaryText: '导出原始',
detail: '保留接入侧历史明细，用于解释位置、里程和字段值的来源。',
primaryText: '看明细',
secondaryText: '导出明细',
disabled: false,
secondaryDisabled: rawFrames.items.length === 0,
onPrimary: () => openQueryTab('raw'),
@@ -1676,7 +1676,7 @@ export function History({
</Space>
<Typography.Text strong>{currentVehicleKeyword || '全部车辆'}</Typography.Text>
<Typography.Text type="secondary">
轨迹、数据导出、原始记录和里程复核按同一车辆范围联动，用于调度复盘、客户问询和断链定位。
轨迹、历史查询导出、历史明细和里程复核按同一车辆范围联动，用于调度复盘、客户问询和断链定位。
</Typography.Text>
<Space wrap>
<Button size="small" icon={<IconCopy />} onClick={copyTrajectoryImpactPackage}>复制轨迹影响</Button>
@@ -1705,9 +1705,9 @@ export function History({
color: hasTrajectoryAnomaly ? 'orange' as const : 'green' as const
},
{
label: '原始记录',
label: '历史明细',
value: `${(rawFrames.total ?? 0).toLocaleString()} 帧`,
detail: rawFieldRows.length > 0 ? `${rawFieldRows.length.toLocaleString()} 个字段明细可直接导出。` : '可切换原始记录并请求字段明细。',
detail: rawFieldRows.length > 0 ? `${rawFieldRows.length.toLocaleString()} 个字段明细可直接导出。` : '可切换历史明细并请求字段明细。',
color: (rawFrames.total ?? 0) > 0 ? 'blue' as const : 'grey' as const
},
{
@@ -1730,7 +1730,7 @@ export function History({
bordered
title={(
<Space>
<span>{mode === 'query' ? '轨迹预览与证据' : '轨迹回放作业台'}</span>
<span>{mode === 'query' ? '轨迹预览与复核' : '轨迹回放作业台'}</span>
<Button size="small" theme="light" icon={<IconCopy />} onClick={copyTrajectorySummary}>复制轨迹摘要</Button>
<Button size="small" theme="light" icon={<IconCopy />} onClick={copyHistoryEvidencePackage}>复制数据复核包</Button>
<Button size="small" theme="light" icon={<IconCopy />} onClick={copyTrajectoryReviewPackage}>复制轨迹复盘包</Button>
@@ -1744,7 +1744,7 @@ export function History({
<div className="vp-monitor-map-header">
<Space wrap>
<Tag color="blue">{validLocations.length.toLocaleString()} 个有效轨迹点</Tag>
<Tag color={currentProtocol ? 'blue' : 'green'}>{currentProtocol || '全部来源'}</Tag>
<Tag color={currentProtocol ? 'blue' : 'green'}>{currentProtocol || '全部数据通道'}</Tag>
<Tag color="green">{formatNumber(mileageDelta, ' km')}</Tag>
<Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图配置就绪' : '高德地图待配置'}</Tag>
</Space>
@@ -1852,10 +1852,10 @@ export function History({
</button>
))}
{locationItems.length === 0 ? (
<Typography.Text type="secondary">当前筛选范围暂无轨迹点，请调整车辆、来源或时间范围。</Typography.Text>
<Typography.Text type="secondary">当前筛选范围暂无轨迹点，请调整车辆、数据通道或时间范围。</Typography.Text>
) : null}
</div>
<Card bordered title="轨迹证据质量" style={{ marginTop: 12 }}>
<Card bordered title="轨迹复盘质量" style={{ marginTop: 12 }}>
<div className="vp-stat-insight-grid">
{[
{
@@ -1915,7 +1915,7 @@ export function History({
))}
</div>
<div className="vp-trajectory-anomaly-action">
<Tag color={hasTrajectoryAnomaly ? 'orange' : 'green'}>{hasTrajectoryAnomaly ? '建议核对原始记录和当日里程统计' : '轨迹质量可用'}</Tag>
<Tag color={hasTrajectoryAnomaly ? 'orange' : 'green'}>{hasTrajectoryAnomaly ? '建议核对历史明细和当日里程统计' : '轨迹质量可用'}</Tag>
<Typography.Text type="secondary">
{hasTrajectoryAnomaly ? '异常点会影响轨迹回放、定位复盘和区间里程判断，请结合字段明细与里程统计交叉确认。' : '当前页轨迹未发现明显断点、里程回退或速度异常。'}
</Typography.Text>
@@ -1950,7 +1950,7 @@ export function History({
}}
columns={[
{ title: 'VIN', dataIndex: 'vin', width: 190 },
{ title: '证据来源', dataIndex: 'protocol', width: 120 },
{ title: '数据通道', dataIndex: 'protocol', width: 120 },
{ title: '经度', dataIndex: 'longitude', width: 120 },
{ title: '纬度', dataIndex: 'latitude', width: 120 },
{ title: '速度 km/h', dataIndex: 'speedKmh', width: 120 },
@@ -1964,21 +1964,21 @@ export function History({
<Space wrap>
<Button disabled={!canOpenVehicle(row.vin)} onClick={() => onOpenVehicle(row.vin, row.protocol)}>车辆服务</Button>
<Button disabled={!canOpenVehicle(row.vin) || !onOpenMileage} onClick={() => openLocationMileage(row)}>核对里程</Button>
<Button disabled={!canOpenVehicle(row.vin) || !onOpenRaw} onClick={() => openLocationRaw(row)}>核对原始记录</Button>
<Button disabled={!canOpenVehicle(row.vin) || !onOpenRaw} onClick={() => openLocationRaw(row)}>核对历史明细</Button>
</Space>
)
}
]}
/>
</Tabs.TabPane>
<Tabs.TabPane tab="原始记录" itemKey="raw">
<Tabs.TabPane tab="历史明细" itemKey="raw">
<div className="vp-table-toolbar">
<Space wrap>
<Tag color="blue">当前页 {rawFrames.items.length.toLocaleString()} 条</Tag>
<Tag color={isIncludeFieldsEnabled(filters.includeFields) || splitFields(filters.fields).length > 0 ? 'green' : 'orange'}>
{isIncludeFieldsEnabled(filters.includeFields) || splitFields(filters.fields).length > 0 ? '包含字段明细' : '未请求字段明细'}
</Tag>
<Button size="small" onClick={exportRawFrames}>导出原始记录当前页 CSV</Button>
<Button size="small" onClick={exportRawFrames}>导出历史明细当前页 CSV</Button>
</Space>
</div>
<Table
@@ -1997,7 +1997,7 @@ export function History({
{ title: 'ID', dataIndex: 'id', width: 260 },
{ title: 'VIN', dataIndex: 'vin', width: 190 },
{ title: '车牌', dataIndex: 'plate', width: 120 },
{ title: '证据来源', dataIndex: 'protocol', width: 120 },
{ title: '数据通道', dataIndex: 'protocol', width: 120 },
{ title: '帧类型', dataIndex: 'frameType', width: 190 },
{ title: '大小 B', dataIndex: 'rawSizeBytes', width: 100 },
{ title: '设备时间', dataIndex: 'deviceTime', width: 190 },
@@ -2020,7 +2020,7 @@ export function History({
<div className="vp-table-toolbar">
<Space wrap>
<Tag color="green">当前页 {rawFieldRows.length.toLocaleString()} 个字段</Tag>
<Tag color="blue">{rawFrames.items.length.toLocaleString()} 条原始记录</Tag>
<Tag color="blue">{rawFrames.items.length.toLocaleString()} 条历史明细</Tag>
{selectedFieldCount > 0 ? <Tag color="blue">字段裁剪 {selectedFieldCount.toLocaleString()} 个</Tag> : <Tag color="grey">全量字段明细</Tag>}
<Button size="small" onClick={exportRawFields}>导出字段明细当前页 CSV</Button>
</Space>
@@ -2041,10 +2041,10 @@ export function History({
},
{ title: 'VIN', dataIndex: 'vin', width: 190 },
{ title: '车牌', dataIndex: 'plate', width: 120 },
{ title: '证据来源', dataIndex: 'protocol', width: 120 },
{ title: '数据通道', dataIndex: 'protocol', width: 120 },
{ title: '帧类型', dataIndex: 'frameType', width: 190 },
{ title: '设备时间', dataIndex: 'deviceTime', width: 190 },
{ title: '原始记录ID', dataIndex: 'rawId', width: 260 },
{ title: '历史明细ID', dataIndex: 'rawId', width: 260 },
{
title: '操作',
width: 170,
@@ -2057,13 +2057,13 @@ export function History({
]}
/>
<Space wrap style={{ marginTop: 12 }}>
<Tag color="grey">分页沿用原始记录分页</Tag>
<Tag color="grey">分页沿用历史明细分页</Tag>
<Tag color="grey">字段来自 parsedFields，保留协议字段映射后的路径</Tag>
</Space>
</Tabs.TabPane>
</Tabs>
</Card>
<SideSheet title="原始记录字段明细" visible={Boolean(selectedRaw)} onCancel={() => setSelectedRaw(null)} width={720}>
<SideSheet title="历史明细字段明细" visible={Boolean(selectedRaw)} onCancel={() => setSelectedRaw(null)} width={720}>
<Space vertical align="start" spacing={12} style={{ width: '100%' }}>
<Typography.Text type="tertiary">
{selectedRaw?.protocol ?? '-'} / {selectedRaw?.plate || selectedRaw?.vin || '-'} / {rawFieldCount} 个字段