feat(platform): add dispatch operations home
This commit is contained in:
@@ -1950,6 +1950,58 @@ export function Dashboard({
|
||||
onClick: openTimeMonitorRaw
|
||||
}
|
||||
];
|
||||
const dispatchOperationsHighlights = [
|
||||
{
|
||||
label: '实时地图',
|
||||
value: `${commandLocatedCount.toLocaleString()} 有定位`,
|
||||
detail: '先看车辆空间分布、在线态势和最新位置。',
|
||||
action: '打开地图',
|
||||
color: commandLocatedCount > 0 ? 'blue' as const : 'orange' as const,
|
||||
onClick: () => onOpenMap({ online: 'online' })
|
||||
},
|
||||
{
|
||||
label: '今日重点',
|
||||
value: `${formatCount(summary?.issueVehicles)} 告警`,
|
||||
detail: highPriorityIssue ? `${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` : '没有高优先级告警,保持巡检。',
|
||||
action: '处理告警',
|
||||
color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
|
||||
onClick: () => onOpenQuality(highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {})
|
||||
}
|
||||
];
|
||||
const dispatchOperationsTasks = [
|
||||
{
|
||||
title: '看全域位置',
|
||||
value: `${formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles)} 在线`,
|
||||
detail: '打开实时地图,确认在线车辆、有效坐标和重点区域。',
|
||||
action: '实时地图',
|
||||
color: 'green' as const,
|
||||
onClick: () => onOpenMap({ online: 'online' })
|
||||
},
|
||||
{
|
||||
title: '回放重点轨迹',
|
||||
value: `${formatCount(summary?.activeToday)} 活跃`,
|
||||
detail: '按车辆和时间窗回放路线,核对停驶、偏航和里程断点。',
|
||||
action: '轨迹回放',
|
||||
color: 'blue' as const,
|
||||
onClick: openTimeMonitorHistory
|
||||
},
|
||||
{
|
||||
title: '核对时间窗里程',
|
||||
value: `${formatCount(serviceSummary?.totalVehicles)} 车辆`,
|
||||
detail: '按同一时间范围核对区间里程、每日统计和 BI 口径。',
|
||||
action: '统计查询',
|
||||
color: 'blue' as const,
|
||||
onClick: openTimeMonitorMileage
|
||||
},
|
||||
{
|
||||
title: '导出客户证据',
|
||||
value: `${formatCount(summary?.frameToday)} 帧`,
|
||||
detail: '导出历史位置、原始记录、解析字段和告警说明。',
|
||||
action: '历史导出',
|
||||
color: 'blue' as const,
|
||||
onClick: openTimeMonitorRaw
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="vp-page">
|
||||
@@ -1980,6 +2032,65 @@ export function Dashboard({
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="vp-dispatch-operations-home" aria-label="客户调度运营首页">
|
||||
<div className="vp-dispatch-operations-map">
|
||||
<div className="vp-dispatch-operations-copy">
|
||||
<Space wrap>
|
||||
<Tag color="blue">客户调度运营首页</Tag>
|
||||
<Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '地图可用' : '坐标预览'}</Tag>
|
||||
<Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警</Tag>
|
||||
</Space>
|
||||
<Typography.Title heading={4} style={{ margin: 0 }}>值班人员进来先看地图态势和异常队列,再进入轨迹回放、时间窗统计、历史导出和告警通知。</Typography.Title>
|
||||
<Typography.Text type="secondary">
|
||||
首页把车辆监控组织成一个调度工作台:地图负责看车,任务队列负责处理今天要交付和要解释的问题。
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<VehicleMap
|
||||
points={commandMapPoints}
|
||||
maxFallbackPoints={120}
|
||||
heightClassName="vp-dispatch-operations-map-canvas"
|
||||
fallbackLabel="显示车辆调度坐标预览"
|
||||
/>
|
||||
<div className="vp-dispatch-operations-highlights">
|
||||
{dispatchOperationsHighlights.map((item) => (
|
||||
<button
|
||||
key={item.label}
|
||||
type="button"
|
||||
className="vp-dispatch-operations-highlight"
|
||||
onClick={item.onClick}
|
||||
aria-label={`客户调度运营首页 ${item.label} ${item.value} ${item.action}`}
|
||||
>
|
||||
<Tag color={item.color}>{item.label}</Tag>
|
||||
<strong>{item.value}</strong>
|
||||
<span>{item.detail}</span>
|
||||
<em>{item.action}</em>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="vp-dispatch-operations-panel">
|
||||
<div className="vp-dispatch-operations-panel-head">
|
||||
<Typography.Text strong>今日车辆任务</Typography.Text>
|
||||
<Typography.Text type="secondary">按客户最常用动作排序,不按协议来源排序。</Typography.Text>
|
||||
</div>
|
||||
<div className="vp-dispatch-operations-task-grid">
|
||||
{dispatchOperationsTasks.map((item) => (
|
||||
<button
|
||||
key={item.title}
|
||||
type="button"
|
||||
className="vp-dispatch-operations-task"
|
||||
onClick={item.onClick}
|
||||
aria-label={`调度运营任务 ${item.title} ${item.value} ${item.action}`}
|
||||
>
|
||||
<Tag color={item.color}>{item.title}</Tag>
|
||||
<strong>{item.value}</strong>
|
||||
<span>{item.detail}</span>
|
||||
<em>{item.action}</em>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="vp-customer-map-situation" aria-label="车辆地图态势">
|
||||
<div className="vp-customer-map-situation-map">
|
||||
<VehicleMap
|
||||
|
||||
Reference in New Issue
Block a user