feat(platform): add trip review summary
This commit is contained in:
lingniu
@@ -1864,6 +1864,92 @@ export function History({
|
||||
onClick: copyDeliveryPackage
|
||||
}
|
||||
];
|
||||
const tripReviewSummaryItems = [
|
||||
{
|
||||
label: '起点',
|
||||
value: firstLocation?.deviceTime || firstLocation?.serverTime || '-',
|
||||
detail: firstLocation ? `${formatNumber(firstLocation.longitude)}, ${formatNumber(firstLocation.latitude)}` : '暂无起点',
|
||||
color: firstLocation ? 'green' as const : 'grey' as const,
|
||||
disabled: !firstLocation,
|
||||
onClick: () => openQueryTab('location')
|
||||
},
|
||||
{
|
||||
label: '终点',
|
||||
value: lastLocation?.deviceTime || lastLocation?.serverTime || '-',
|
||||
detail: lastLocation ? `${formatNumber(lastLocation.longitude)}, ${formatNumber(lastLocation.latitude)}` : '暂无终点',
|
||||
color: lastLocation ? 'green' as const : 'grey' as const,
|
||||
disabled: !lastLocation,
|
||||
onClick: () => openQueryTab('location')
|
||||
},
|
||||
{
|
||||
label: '行程里程',
|
||||
value: formatNumber(mileageDelta, ' km'),
|
||||
detail: `回放跨度 ${formatDurationMinutes(playbackSpanMinutes)}，用于解释区间里程。`,
|
||||
color: isFiniteNumber(mileageDelta) ? 'blue' as const : 'grey' as const,
|
||||
disabled: !isFiniteNumber(mileageDelta),
|
||||
onClick: () => onOpenMileage?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) })
|
||||
},
|
||||
{
|
||||
label: '最高速度',
|
||||
value: formatNumber(maxSpeed, ' km/h'),
|
||||
detail: '用于复核超速、异常驾驶或位置跳点。',
|
||||
color: isFiniteNumber(maxSpeed) ? 'blue' as const : 'grey' as const,
|
||||
disabled: !isFiniteNumber(maxSpeed),
|
||||
onClick: () => openQueryTab('location')
|
||||
},
|
||||
{
|
||||
label: '异常提示',
|
||||
value: anomalyTotal > 0 ? `${anomalyTotal.toLocaleString()} 项` : '无明显异常',
|
||||
detail: `断点 ${trajectoryAnomalies.gapCount.toLocaleString()} / 回退 ${trajectoryAnomalies.mileageRollbackCount.toLocaleString()} / 超速 ${trajectoryAnomalies.overspeedCount.toLocaleString()}`,
|
||||
color: anomalyTotal > 0 ? 'orange' as const : 'green' as const,
|
||||
disabled: false,
|
||||
onClick: copyTrajectoryReviewPackage
|
||||
}
|
||||
];
|
||||
const tripReviewActionItems = [
|
||||
{
|
||||
label: '轨迹回放',
|
||||
action: '播放轨迹',
|
||||
detail: `${validLocations.length.toLocaleString()} 个有效定位点`,
|
||||
color: validLocations.length > 0 ? 'green' as const : 'grey' as const,
|
||||
disabled: validLocations.length === 0,
|
||||
onClick: () => openQueryTab('location')
|
||||
},
|
||||
{
|
||||
label: '统计核对',
|
||||
action: '统计查询',
|
||||
detail: `区间里程 ${formatNumber(mileageDelta, ' km')}`,
|
||||
color: isFiniteNumber(mileageDelta) ? 'blue' as const : 'grey' as const,
|
||||
disabled: !onOpenMileage || !currentVehicleKeyword,
|
||||
onClick: () => onOpenMileage?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) })
|
||||
},
|
||||
{
|
||||
label: '导出证据',
|
||||
action: '复制交付',
|
||||
detail: `位置 ${locations.total.toLocaleString()} / 明细 ${(rawFrames.total ?? 0).toLocaleString()}`,
|
||||
color: deliveryStateColor,
|
||||
disabled: false,
|
||||
onClick: copyDeliveryPackage
|
||||
},
|
||||
{
|
||||
label: '告警复盘',
|
||||
action: '告警事件',
|
||||
detail: anomalyTotal > 0 ? `${anomalyTotal.toLocaleString()} 项异常待说明` : '同一时间窗查看告警闭环',
|
||||
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 } : {})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="vp-page">
|
||||
@@ -1916,6 +2002,55 @@ export function History({
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
{mode === 'trajectory' ? (
|
||||
<section className="vp-trip-review-summary" aria-label="行程复盘摘要">
|
||||
<div className="vp-trip-review-summary-copy">
|
||||
<Space wrap>
|
||||
<Tag color="blue">行程复盘摘要</Tag>
|
||||
<Tag color={trajectoryDecisionColor}>{trajectoryDecisionState}</Tag>
|
||||
<Tag color={deliveryStateColor}>{deliveryState}</Tag>
|
||||
</Space>
|
||||
<Typography.Title heading={5} style={{ margin: 0 }}>
|
||||
把客户最关心的起止时间、路线跨度、里程差、最高速度和异常提示放在轨迹前面。
|
||||
</Typography.Title>
|
||||
<Typography.Text type="secondary">
|
||||
这层摘要对应 Trip History 的客户读法：先给结论，再让客户选择回放、统计、导出或告警复盘。
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<div className="vp-trip-review-summary-grid">
|
||||
{tripReviewSummaryItems.map((item) => (
|
||||
<button
|
||||
key={item.label}
|
||||
type="button"
|
||||
className="vp-trip-review-summary-item"
|
||||
disabled={item.disabled}
|
||||
onClick={item.onClick}
|
||||
aria-label={`行程复盘摘要 ${item.label} ${item.value}`}
|
||||
>
|
||||
<Tag color={item.color}>{item.label}</Tag>
|
||||
<strong>{item.value}</strong>
|
||||
<span>{item.detail}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="vp-trip-review-action-grid">
|
||||
{tripReviewActionItems.map((item) => (
|
||||
<button
|
||||
key={item.label}
|
||||
type="button"
|
||||
className="vp-trip-review-action"
|
||||
disabled={item.disabled}
|
||||
onClick={item.onClick}
|
||||
aria-label={`行程复盘动作 ${item.label} ${item.action}`}
|
||||
>
|
||||
<Tag color={item.color}>{item.label}</Tag>
|
||||
<strong>{item.action}</strong>
|
||||
<span>{item.detail}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
{mode === 'query' ? (
|
||||
<section className="vp-history-evidence-package-overview" aria-label="客户证据包交付总览">
|
||||
<div className="vp-history-evidence-package-summary">
|
||||
|
||||
Reference in New Issue
Block a user