shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(platform): add realtime operations shortcuts

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

49
vehicle-data-platform/apps/web/src/pages/Realtime.tsx
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">

50
vehicle-data-platform/apps/web/src/styles/global.css
View File

@@ -296,6 +296,54 @@ body {
gap: 8px;
}
.vp-realtime-command-board {
margin-bottom: 16px;
padding: 14px;
border: 1px solid var(--vp-border);
border-radius: var(--vp-radius);
background: #fbfcff;
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 16px;
}
.vp-realtime-command-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}
.vp-realtime-command-item {
min-height: 74px;
padding: 12px;
border: 1px solid var(--vp-border);
border-radius: var(--vp-radius);
background: var(--vp-surface);
display: grid;
align-content: space-between;
gap: 8px;
text-align: left;
font: inherit;
}
button.vp-realtime-command-item {
cursor: pointer;
}
button.vp-realtime-command-item:hover,
button.vp-realtime-command-item:focus-visible {
border-color: rgba(22, 100, 255, 0.42);
background: #f5f9ff;
outline: none;
}
.vp-realtime-command-item span:last-child {
color: var(--vp-text);
font-size: 22px;
font-weight: 700;
line-height: 28px;
}
.vp-result-summary-item {
min-height: 72px;
padding: 12px;
@@ -1128,6 +1176,8 @@ body {
.vp-action-grid,
.vp-current-service-board,
.vp-current-service-grid,
.vp-realtime-command-board,
.vp-realtime-command-grid,
.vp-operation-flow,
.vp-service-model-grid,
.vp-capability-grid,

10
vehicle-data-platform/apps/web/src/test/App.test.tsx
View File

@@ -7817,7 +7817,7 @@ test('frames realtime page as one vehicle service with source evidence', async (
expect(await screen.findByRole('heading', { name: '实时监控' })).toBeInTheDocument();
expect(screen.getByText('高德地图待配置')).toBeInTheDocument();
expect(screen.getByText('定位有效')).toBeInTheDocument();
expect(screen.getAllByText('定位有效').length).toBeGreaterThan(0);
expect(screen.getByText('车辆核心数据')).toBeInTheDocument();
expect(screen.getByText('来源证据')).toBeInTheDocument();
expect(screen.getByText('GB32960 在线')).toBeInTheDocument();
@@ -8168,6 +8168,12 @@ test('copies realtime operations summary from realtime page', async () => {
render(<App />);
expect((await screen.findAllByText('VIN-RT-SUMMARY-001')).length).toBeGreaterThan(0);
expect(screen.getByText('实时作业入口')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '实时筛选 在线车辆 2' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '实时筛选 离线车辆 1' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '实时筛选 降级服务 2' })).toBeInTheDocument();
expect(screen.getByText('建议处置')).toBeInTheDocument();
expect(screen.getByText('排查降级服务 2')).toBeInTheDocument();
expect(screen.getByText('实时覆盖判读')).toBeInTheDocument();
expect(screen.getByText('在线率')).toBeInTheDocument();
expect(screen.getAllByText('66.7%').length).toBeGreaterThanOrEqual(3);
@@ -8186,6 +8192,8 @@ test('copies realtime operations summary from realtime page', async () => {
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('重点车辆：'));
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('粤A摘要3 / YUTONG_MQTT / 车辆离线'));
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('实时页面：http://localhost:3000/#/realtime?protocol=JT808&online=online'));
fireEvent.click(screen.getByRole('button', { name: '实时筛选 降级服务 2' }));
expect(window.location.hash).toBe('#/realtime?protocol=JT808&serviceStatus=degraded&online=online');
});
test('shows production AMap integration status on realtime page', async () => {