feat(platform): surface customer next actions
This commit is contained in:
@@ -1386,6 +1386,34 @@ export function Dashboard({
|
|||||||
onClick: () => onOpenQuality()
|
onClick: () => onOpenQuality()
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
const customerNextActions = [
|
||||||
|
{
|
||||||
|
level: (summary?.issueVehicles ?? 0) > 0 ? '优先' : '巡检',
|
||||||
|
title: (summary?.issueVehicles ?? 0) > 0 ? '先处理告警车辆' : '先查看在线车辆地图',
|
||||||
|
detail: (summary?.issueVehicles ?? 0) > 0
|
||||||
|
? (highPriorityIssue ? `${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` : '存在告警车辆,建议先进入告警事件。')
|
||||||
|
: `${formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles)} 辆在线,${commandLocatedCount.toLocaleString()} 辆有定位。`,
|
||||||
|
action: (summary?.issueVehicles ?? 0) > 0 ? '进入告警' : '打开地图',
|
||||||
|
color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
|
||||||
|
onClick: () => (summary?.issueVehicles ?? 0) > 0 ? onOpenQuality(highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {}) : onOpenMap({ online: 'online' })
|
||||||
|
},
|
||||||
|
{
|
||||||
|
level: focusVehicle ? '单车' : '范围',
|
||||||
|
title: focusVehicle ? '复盘重点车辆' : '选择一辆车复盘',
|
||||||
|
detail: focusVehicle ? `${focusVehicle.label},${focusVehicle.reason}` : '从车辆中心或地图选择车辆后,进入轨迹、里程和历史证据。',
|
||||||
|
action: focusVehicle ? '车辆服务' : '车辆中心',
|
||||||
|
color: focusVehicle?.statusColor ?? 'blue' as const,
|
||||||
|
onClick: () => focusVehicle?.lookupKey ? onOpenVehicle(focusVehicle.lookupKey, focusVehicle.protocol) : onOpenVehicles({})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
level: '时间窗',
|
||||||
|
title: '按同一范围交付数据',
|
||||||
|
detail: `${dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo)},同步轨迹、里程、历史和告警。`,
|
||||||
|
action: '复制复盘包',
|
||||||
|
color: 'blue' as const,
|
||||||
|
onClick: copyTimeMonitorReviewPackage
|
||||||
|
}
|
||||||
|
];
|
||||||
const customerTrustSignals = [
|
const customerTrustSignals = [
|
||||||
{
|
{
|
||||||
label: '数据来源',
|
label: '数据来源',
|
||||||
@@ -1418,7 +1446,7 @@ export function Dashboard({
|
|||||||
</Space>
|
</Space>
|
||||||
<Typography.Title heading={3} style={{ margin: 0 }}>先看车在哪里,再处理轨迹、里程、告警和导出</Typography.Title>
|
<Typography.Title heading={3} style={{ margin: 0 }}>先看车在哪里,再处理轨迹、里程、告警和导出</Typography.Title>
|
||||||
<Typography.Text type="secondary">
|
<Typography.Text type="secondary">
|
||||||
32960、808、宇通 MQTT 只是数据证据。客户主流程围绕车辆本身:地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。
|
客户主流程围绕车辆本身:地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。接入来源只作为追溯证据。
|
||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
</div>
|
</div>
|
||||||
<VehicleMap
|
<VehicleMap
|
||||||
@@ -1439,9 +1467,26 @@ export function Dashboard({
|
|||||||
</div>
|
</div>
|
||||||
<div className="vp-fleet-monitor-panel">
|
<div className="vp-fleet-monitor-panel">
|
||||||
<div className="vp-fleet-monitor-panel-head">
|
<div className="vp-fleet-monitor-panel-head">
|
||||||
<Typography.Text strong>客户工作流</Typography.Text>
|
<Typography.Text strong>下一步建议</Typography.Text>
|
||||||
<Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制说明</Button>
|
<Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制说明</Button>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="vp-fleet-next-actions">
|
||||||
|
{customerNextActions.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.title}
|
||||||
|
type="button"
|
||||||
|
className="vp-fleet-next-action"
|
||||||
|
onClick={item.onClick}
|
||||||
|
aria-label={`车辆运营建议 ${item.title} ${item.action}`}
|
||||||
|
>
|
||||||
|
<Tag color={item.color}>{item.level}</Tag>
|
||||||
|
<strong>{item.title}</strong>
|
||||||
|
<span>{item.detail}</span>
|
||||||
|
<em>{item.action}</em>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Typography.Text strong>客户工作流</Typography.Text>
|
||||||
<div className="vp-fleet-monitor-actions">
|
<div className="vp-fleet-monitor-actions">
|
||||||
{customerCockpitWorkflows.map((item) => (
|
{customerCockpitWorkflows.map((item) => (
|
||||||
<button key={item.title} type="button" className="vp-fleet-monitor-action" onClick={item.onClick} aria-label={`客户车辆工作流 ${item.title} ${item.action}`}>
|
<button key={item.title} type="button" className="vp-fleet-monitor-action" onClick={item.onClick} aria-label={`客户车辆工作流 ${item.title} ${item.action}`}>
|
||||||
|
|||||||
@@ -460,6 +460,57 @@ body {
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vp-fleet-next-actions {
|
||||||
|
display: grid;
|
||||||
|
gap: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-fleet-next-action {
|
||||||
|
min-height: 98px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid rgba(22, 100, 255, 0.18);
|
||||||
|
border-radius: var(--vp-radius);
|
||||||
|
background: #ffffff;
|
||||||
|
color: inherit;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
font: inherit;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 70px minmax(0, 1fr);
|
||||||
|
gap: 7px 10px;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-fleet-next-action:hover,
|
||||||
|
.vp-fleet-next-action:focus-visible {
|
||||||
|
border-color: rgba(22, 100, 255, 0.42);
|
||||||
|
background: #f5f9ff;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-fleet-next-action strong {
|
||||||
|
color: var(--vp-text);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-fleet-next-action span {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
color: var(--vp-text-muted);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-fleet-next-action em {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
color: var(--vp-primary);
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
.vp-fleet-monitor-actions {
|
.vp-fleet-monitor-actions {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|||||||
@@ -799,9 +799,13 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
|
|||||||
expect(screen.getByText('车辆服务工作台')).toBeInTheDocument();
|
expect(screen.getByText('车辆服务工作台')).toBeInTheDocument();
|
||||||
expect(screen.getByText('车辆监控中心')).toBeInTheDocument();
|
expect(screen.getByText('车辆监控中心')).toBeInTheDocument();
|
||||||
expect(screen.getByText('先看车在哪里,再处理轨迹、里程、告警和导出')).toBeInTheDocument();
|
expect(screen.getByText('先看车在哪里,再处理轨迹、里程、告警和导出')).toBeInTheDocument();
|
||||||
expect(screen.getByText('32960、808、宇通 MQTT 只是数据证据。客户主流程围绕车辆本身:地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。')).toBeInTheDocument();
|
expect(screen.getByText('客户主流程围绕车辆本身:地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。接入来源只作为追溯证据。')).toBeInTheDocument();
|
||||||
expect(screen.getByRole('button', { name: '车辆监控指标 车辆总数 1,033' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '车辆监控指标 车辆总数 1,033' })).toBeInTheDocument();
|
||||||
expect(screen.getByRole('button', { name: '车辆监控指标 在线车辆 208' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '车辆监控指标 在线车辆 208' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('下一步建议')).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: '车辆运营建议 先处理告警车辆 进入告警' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: '车辆运营建议 选择一辆车复盘 车辆中心' })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: '车辆运营建议 按同一范围交付数据 复制复盘包' })).toBeInTheDocument();
|
||||||
expect(screen.getByRole('button', { name: '客户车辆工作流 实时看车 实时地图' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '客户车辆工作流 实时看车 实时地图' })).toBeInTheDocument();
|
||||||
expect(screen.getByRole('button', { name: '客户车辆工作流 轨迹复盘 轨迹回放' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '客户车辆工作流 轨迹复盘 轨迹回放' })).toBeInTheDocument();
|
||||||
expect(screen.getByRole('button', { name: '客户车辆工作流 里程核对 里程统计' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '客户车辆工作流 里程核对 里程统计' })).toBeInTheDocument();
|
||||||
|
|||||||
Reference in New Issue
Block a user