diff --git a/vehicle-data-platform/apps/web/src/App.tsx b/vehicle-data-platform/apps/web/src/App.tsx index 605a33e6..6b197465 100644 --- a/vehicle-data-platform/apps/web/src/App.tsx +++ b/vehicle-data-platform/apps/web/src/App.tsx @@ -215,7 +215,8 @@ export default function App() { setAnalysisVin(nextFilters.keyword); } setActiveProtocol(nextFilters.protocol ?? ''); - replaceMileageHash(nextFilters); + const { keyword, protocol, ...restFilters } = nextFilters; + replaceHash('mileage', keyword ?? analysisVin, protocol, restFilters); }; const replaceMileageHash = (filters: Record = {}) => { diff --git a/vehicle-data-platform/apps/web/src/pages/Mileage.tsx b/vehicle-data-platform/apps/web/src/pages/Mileage.tsx index 83e6c88e..18f26458 100644 --- a/vehicle-data-platform/apps/web/src/pages/Mileage.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Mileage.tsx @@ -61,6 +61,12 @@ export function Mileage({ const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 }); const currentVehicleKeyword = filters.keyword?.trim() ?? ''; const currentProtocol = filters.protocol?.trim() ?? ''; + const filterSummary = [ + currentVehicleKeyword ? `车辆:${currentVehicleKeyword}` : '', + currentProtocol ? `数据来源:${currentProtocol}` : '', + filters.dateFrom?.trim() ? `开始日期:${filters.dateFrom.trim()}` : '', + filters.dateTo?.trim() ? `结束日期:${filters.dateTo.trim()}` : '' + ].filter(Boolean); const loadSummary = (values: Record = filters) => { setSummaryLoading(true); @@ -81,6 +87,17 @@ export function Mileage({ .finally(() => setLoading(false)); }; + const applyFilters = (nextFilters: Record) => { + setFilters(nextFilters); + onFiltersChange?.(nextFilters); + loadSummary(nextFilters); + load(nextFilters, 1, pagination.pageSize); + }; + + const clearRangeFilters = () => { + applyFilters(currentVehicleKeyword ? { keyword: currentVehicleKeyword } : {}); + }; + useEffect(() => { const nextFilters = mergeInitialFilters(initialVin, initialProtocol, initialFilters); setFilters(nextFilters); @@ -107,10 +124,7 @@ export function Mileage({
{ const nextFilters = values as Record; - setFilters(nextFilters); - onFiltersChange?.(nextFilters); - loadSummary(nextFilters); - load(nextFilters, 1, pagination.pageSize); + applyFilters(nextFilters); }}> @@ -124,14 +138,21 @@ export function Mileage({
+ {filterSummary.length > 0 ? ( + + + {filterSummary.map((item) => ( + {item} + ))} + + + + ) : null}
{[ { label: '车辆数', value: summary.vehicleCount.toLocaleString() }, diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx index 1a752160..f0a080d9 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -2424,6 +2424,55 @@ test('applies mileage date range from shareable hash to API requests', async () expect(screen.getByText('当前来源:JT808')).toBeInTheDocument(); }); +test('shows and clears current mileage filters while keeping vehicle scope', async () => { + window.history.replaceState(null, '', '/#/mileage?keyword=VIN-MILEAGE-002&protocol=JT808&dateFrom=2026-07-01&dateTo=2026-07-03'); + const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => { + const path = String(input); + if (path.includes('/api/ops/health')) { + return { + ok: true, + json: async () => ({ + data: { linkHealth: [], kafkaLag: 0, redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/mileage/summary')) { + return { + ok: true, + json: async () => ({ + data: { vehicleCount: 1, recordCount: 2, sourceCount: 1, totalMileageKm: 12.3, averageMileagePerVin: 12.3 }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + return { + ok: true, + json: async () => ({ + data: { items: [], total: 0, limit: 20, offset: 0 }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + }); + + render(); + + expect(await screen.findByText('当前里程筛选')).toBeInTheDocument(); + expect(screen.getByText('车辆:VIN-MILEAGE-002')).toBeInTheDocument(); + expect(screen.getByText('数据来源:JT808')).toBeInTheDocument(); + expect(screen.getByText('开始日期:2026-07-01')).toBeInTheDocument(); + expect(screen.getByText('结束日期:2026-07-03')).toBeInTheDocument(); + fireEvent.click(screen.getByRole('button', { name: '清空筛选' })); + + await waitFor(() => { + expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/mileage/summary?keyword=VIN-MILEAGE-002'), undefined); + }); + expect(window.location.hash).toBe('#/mileage?keyword=VIN-MILEAGE-002'); +}); + test('updates mileage hash when mileage filters are submitted', async () => { window.history.replaceState(null, '', '/#/mileage'); const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {