feat(platform): add realtime operations shortcuts

This commit is contained in:
lingniu
2026-07-04 19:25:37 +08:00
parent 99261997db
commit 41c5e0b338
3 changed files with 108 additions and 1 deletions

View File

@@ -479,6 +479,55 @@ export function Realtime({
</Space>
</Card>
) : null}
<div className="vp-realtime-command-board">
<div>
<div className="vp-current-service-title"></div>
<div className="vp-realtime-command-grid">
{[
{ label: '在线车辆', value: onlineCount, color: 'green' as const, action: () => applyFilters({ ...filters, online: 'online' }) },
{ label: '离线车辆', value: rows.length - onlineCount, color: rows.length - onlineCount > 0 ? 'orange' as const : 'green' as const, action: () => applyFilters({ ...filters, online: 'offline' }) },
{ label: '定位有效', value: locatedCount, color: locatedCount > 0 ? 'blue' as const : 'orange' as const },
{ label: '降级服务', value: degradedCount, color: degradedCount > 0 ? 'orange' as const : 'green' as const, action: () => applyFilters({ ...filters, serviceStatus: 'degraded' }) },
{ label: '更新超时', value: staleCount, color: staleCount > 0 ? 'red' as const : 'green' as const },
{ label: '来源类型', value: primaryProtocols.size, color: 'blue' as const }
].map((item) => (
item.action ? (
<button
key={item.label}
className="vp-realtime-command-item"
type="button"
aria-label={`实时筛选 ${item.label} ${item.value.toLocaleString()}`}
onClick={item.action}
>
<Tag color={item.color}>{item.label}</Tag>
<span>{item.value.toLocaleString()}</span>
</button>
) : (
<div key={item.label} className="vp-realtime-command-item">
<Tag color={item.color}>{item.label}</Tag>
<span>{item.value.toLocaleString()}</span>
</div>
)
))}
</div>
</div>
<div>
<div className="vp-current-service-title"></div>
<div className="vp-current-action-list">
{degradedCount > 0 ? (
<Button size="small" theme="light" type="warning" onClick={() => applyFilters({ ...filters, serviceStatus: 'degraded' })}>
{degradedCount.toLocaleString()}
</Button>
) : <Tag color="green"></Tag>}
{staleCount > 0 ? <Tag color="red"> {staleCount.toLocaleString()}</Tag> : <Tag color="green"></Tag>}
{sourceIssueRows.length > 0 && onOpenQuality ? (
<Button size="small" theme="light" type="warning" onClick={() => onOpenQuality({ serviceStatus: 'degraded' })}>
{sourceIssueRows.length.toLocaleString()}
</Button>
) : null}
</div>
</div>
</div>
<div className="vp-monitor-layout">
<div className="vp-monitor-map">
<div className="vp-monitor-map-header">