feat(platform): add realtime customer question flow
This commit is contained in:
@@ -1287,6 +1287,49 @@ export function Realtime({
|
||||
onClick: exportRealtime
|
||||
}
|
||||
];
|
||||
const realtimeCustomerQuestions = [
|
||||
{
|
||||
question: '这辆车现在在哪里?',
|
||||
answer: selectedMapRow ? selectedMapRow.plate || selectedMapRow.vin : `${locatedCount.toLocaleString()} 辆有定位`,
|
||||
evidence: selectedMapRow && isValidCoordinate(selectedMapRow) ? `${selectedMapRow.longitude}, ${selectedMapRow.latitude}` : `定位有效率 ${formatPercent(locatedRate)}`,
|
||||
action: '地图定位',
|
||||
color: locatedCount > 0 ? 'blue' as const : 'orange' as const,
|
||||
disabled: false,
|
||||
onClick: () => {
|
||||
if (selectedMapRow) {
|
||||
selectRealtimeRow(selectedMapRow);
|
||||
}
|
||||
window.location.hash = buildAppHash({ page: 'map', protocol: filters.protocol, filters });
|
||||
}
|
||||
},
|
||||
{
|
||||
question: '这辆车还在线吗?',
|
||||
answer: selectedMapRow ? selectedMapRow.online ? '在线' : '离线' : `${onlineCount.toLocaleString()} 辆在线`,
|
||||
evidence: selectedMapRow ? dataFreshness(selectedMapRow).detail : `在线率 ${formatPercent(onlineRate)}`,
|
||||
action: '只看在线',
|
||||
color: selectedMapRow ? selectedMapRow.online ? 'green' as const : 'orange' as const : onlineCount > 0 ? 'green' as const : 'orange' as const,
|
||||
disabled: false,
|
||||
onClick: () => applyFilters({ ...filters, online: 'online' })
|
||||
},
|
||||
{
|
||||
question: '为什么状态异常?',
|
||||
answer: selectedMapRow ? realtimeIssueLabels(selectedMapRow)[0] : `${Math.max(degradedCount, sourceIssueRows.length).toLocaleString()} 辆关注`,
|
||||
evidence: selectedMapRow ? vehicleServiceStatus(selectedMapRow).label : `${degradedCount.toLocaleString()} 降级 / ${staleCount.toLocaleString()} 超时`,
|
||||
action: '异常清单',
|
||||
color: degradedCount > 0 || staleCount > 0 || sourceIssueRows.length > 0 ? 'orange' as const : 'green' as const,
|
||||
disabled: false,
|
||||
onClick: () => copyRealtimeIssueChecklist()
|
||||
},
|
||||
{
|
||||
question: '当前状态能交接吗?',
|
||||
answer: realtimeImpactLevel,
|
||||
evidence: `当前页 ${rows.length.toLocaleString()} / 总计 ${pagination.total.toLocaleString()}`,
|
||||
action: '复制交接包',
|
||||
color: realtimeImpactColor,
|
||||
disabled: false,
|
||||
onClick: () => copyRealtimeDutyHandoff()
|
||||
}
|
||||
];
|
||||
const timeWindowMonitorBlock = (
|
||||
<Card bordered className="vp-time-window-monitor">
|
||||
<div className="vp-time-window-summary">
|
||||
@@ -1740,6 +1783,36 @@ export function Realtime({
|
||||
<Button size="small" theme="light" onClick={copyRealtimeSummary}>复制监控摘要</Button>
|
||||
</Space>
|
||||
</div>
|
||||
<div className="vp-realtime-question-board">
|
||||
<div className="vp-realtime-question-summary">
|
||||
<Space wrap>
|
||||
<Tag color="blue">实时客户常问</Tag>
|
||||
<Tag color={realtimeImpactColor}>{realtimeImpactLevel}</Tag>
|
||||
<Tag color={selectedMapRow ? 'green' : 'grey'}>{selectedMapRow ? '已选车辆' : '未选车辆'}</Tag>
|
||||
</Space>
|
||||
<Typography.Title heading={5} style={{ margin: 0 }}>把实时数据翻译成客户能直接理解的车辆状态</Typography.Title>
|
||||
<Typography.Text type="secondary">
|
||||
客户问实时状态时,先回答位置、在线、新鲜度和异常原因,再进入轨迹、告警、历史查询或交接包。
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<div className="vp-realtime-question-grid">
|
||||
{realtimeCustomerQuestions.map((item) => (
|
||||
<button
|
||||
key={item.question}
|
||||
type="button"
|
||||
className="vp-realtime-question-item"
|
||||
disabled={item.disabled}
|
||||
onClick={item.onClick}
|
||||
aria-label={`实时客户常问 ${item.question} ${item.action}`}
|
||||
>
|
||||
<Tag color={item.color}>{item.question}</Tag>
|
||||
<strong>{item.answer}</strong>
|
||||
<span>{item.evidence}</span>
|
||||
<em>{item.action}</em>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="vp-realtime-next-actions">
|
||||
{realtimeNextActions.map((item) => (
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user