feat(platform): show active realtime filters
This commit is contained in:
@@ -32,6 +32,18 @@ function sourceEvidenceText(row: VehicleRealtimeRow) {
|
|||||||
return `${row.onlineSourceCount}/${row.sourceCount} 来源在线`;
|
return `${row.onlineSourceCount}/${row.sourceCount} 来源在线`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onlineLabel: Record<string, string> = {
|
||||||
|
online: '在线',
|
||||||
|
offline: '离线'
|
||||||
|
};
|
||||||
|
|
||||||
|
const serviceStatusLabel: Record<string, string> = {
|
||||||
|
healthy: '服务正常',
|
||||||
|
degraded: '来源不完整',
|
||||||
|
offline: '车辆离线',
|
||||||
|
identity_required: '身份未绑定'
|
||||||
|
};
|
||||||
|
|
||||||
export function Realtime({
|
export function Realtime({
|
||||||
onOpenVehicle,
|
onOpenVehicle,
|
||||||
onFiltersChange,
|
onFiltersChange,
|
||||||
@@ -72,6 +84,12 @@ export function Realtime({
|
|||||||
onFiltersChange?.(nextFilters);
|
onFiltersChange?.(nextFilters);
|
||||||
load(nextFilters, 1, pagination.pageSize);
|
load(nextFilters, 1, pagination.pageSize);
|
||||||
};
|
};
|
||||||
|
const filterSummary = [
|
||||||
|
filters.keyword ? `关键词:${filters.keyword}` : '',
|
||||||
|
filters.protocol ? `数据来源:${filters.protocol}` : '',
|
||||||
|
filters.online ? `在线:${onlineLabel[filters.online] ?? filters.online}` : '',
|
||||||
|
filters.serviceStatus ? `服务状态:${serviceStatusLabel[filters.serviceStatus] ?? filters.serviceStatus}` : ''
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="vp-page">
|
<div className="vp-page">
|
||||||
@@ -104,6 +122,16 @@ export function Realtime({
|
|||||||
}}>重置</Button>
|
}}>重置</Button>
|
||||||
</Space>
|
</Space>
|
||||||
</Form>
|
</Form>
|
||||||
|
{filterSummary.length > 0 ? (
|
||||||
|
<Card bordered title="当前实时筛选" style={{ marginBottom: 12 }}>
|
||||||
|
<Space wrap>
|
||||||
|
{filterSummary.map((item) => (
|
||||||
|
<Tag key={item} color="blue">{item}</Tag>
|
||||||
|
))}
|
||||||
|
<Button size="small" onClick={() => applyFilters({})}>清空筛选</Button>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
) : null}
|
||||||
<Tabs type="line">
|
<Tabs type="line">
|
||||||
<Tabs.TabPane tab="表格视图" itemKey="table">
|
<Tabs.TabPane tab="表格视图" itemKey="table">
|
||||||
{rows.length === 0 && !loading ? (
|
{rows.length === 0 && !loading ? (
|
||||||
|
|||||||
@@ -3196,6 +3196,45 @@ test('loads realtime vehicles from shareable source filter hash', async () => {
|
|||||||
expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/realtime/vehicles?limit=50&offset=0&keyword=%E7%B2%A4ART002&protocol=JT808&online=online&serviceStatus=degraded'), undefined);
|
expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/realtime/vehicles?limit=50&offset=0&keyword=%E7%B2%A4ART002&protocol=JT808&online=online&serviceStatus=degraded'), undefined);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('shows and clears current realtime service filters', async () => {
|
||||||
|
window.history.replaceState(null, '', '/#/realtime?keyword=%E7%B2%A4ART002&protocol=JT808&online=online&serviceStatus=degraded');
|
||||||
|
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
|
const path = String(input);
|
||||||
|
if (path.includes('/api/realtime/vehicles')) {
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: { items: [], total: 1, limit: 50, offset: 0 },
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
ok: true,
|
||||||
|
json: async () => ({
|
||||||
|
data: { items: [], total: 0, limit: 10, offset: 0 },
|
||||||
|
traceId: 'trace-test',
|
||||||
|
timestamp: 1783094400000
|
||||||
|
})
|
||||||
|
} as Response;
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<App />);
|
||||||
|
|
||||||
|
expect(await screen.findByText('当前实时筛选')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('关键词:粤ART002')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('数据来源:JT808')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('在线:在线')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('服务状态:来源不完整')).toBeInTheDocument();
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: '清空筛选' }));
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/realtime/vehicles?limit=50&offset=0'), undefined);
|
||||||
|
});
|
||||||
|
expect(window.location.hash).toBe('#/realtime');
|
||||||
|
});
|
||||||
|
|
||||||
test('updates realtime hash when source filters are submitted', async () => {
|
test('updates realtime hash when source filters are submitted', async () => {
|
||||||
window.history.replaceState(null, '', '/#/realtime');
|
window.history.replaceState(null, '', '/#/realtime');
|
||||||
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user