From a2ccc4a498e6ec516a1526785da653931f90897a Mon Sep 17 00:00:00 2001 From: lingniu Date: Sat, 4 Jul 2026 03:32:51 +0800 Subject: [PATCH] feat(platform-web): link summary kpis to vehicle filters --- vehicle-data-platform/apps/web/src/App.tsx | 20 +++++-- .../apps/web/src/domain/appRoute.test.ts | 19 ++++++- .../apps/web/src/domain/appRoute.ts | 18 ++++++- .../apps/web/src/pages/Dashboard.tsx | 16 +++--- .../apps/web/src/pages/Vehicles.tsx | 11 ++-- .../apps/web/src/styles/global.css | 21 ++++++++ .../apps/web/src/test/App.test.tsx | 54 +++++++++++++++++++ 7 files changed, 141 insertions(+), 18 deletions(-) diff --git a/vehicle-data-platform/apps/web/src/App.tsx b/vehicle-data-platform/apps/web/src/App.tsx index 4cd0ac2b..6b5c8a30 100644 --- a/vehicle-data-platform/apps/web/src/App.tsx +++ b/vehicle-data-platform/apps/web/src/App.tsx @@ -19,6 +19,7 @@ export default function App() { const [activeVin, setActiveVin] = useState(initialVehicleKey); const [analysisVin, setAnalysisVin] = useState(initialVehicleKey); const [activeProtocol, setActiveProtocol] = useState(initialRoute.protocol ?? ''); + const [vehicleFilters, setVehicleFilters] = useState>(initialRoute.filters ?? {}); const [linkIssueCount, setLinkIssueCount] = useState(null); const [currentVehicleStatus, setCurrentVehicleStatus] = useState(); const [currentVehicleLabel, setCurrentVehicleLabel] = useState(''); @@ -81,14 +82,17 @@ export default function App() { setAnalysisVin(route.keyword); } } + if (route.page === 'vehicles') { + setVehicleFilters(route.filters ?? {}); + } setActiveProtocol(route.protocol ?? ''); }; window.addEventListener('hashchange', applyHashRoute); return () => window.removeEventListener('hashchange', applyHashRoute); }, []); - const replaceHash = (page: PageKey, keyword?: string, protocol?: string) => { - const nextHash = buildAppHash({ page, keyword, protocol }); + const replaceHash = (page: PageKey, keyword?: string, protocol?: string, filters?: Record) => { + const nextHash = buildAppHash({ page, keyword, protocol, filters }); if (window.location.hash !== nextHash) { window.history.replaceState(null, '', nextHash); } @@ -104,7 +108,13 @@ export default function App() { replaceHash(page, analysisVin, activeProtocol); return; } - replaceHash(page); + replaceHash(page, undefined, undefined, page === 'vehicles' ? vehicleFilters : undefined); + }; + + const openVehicles = (filters: Record = {}) => { + setVehicleFilters(filters); + setActivePage('vehicles'); + replaceHash('vehicles', undefined, undefined, filters); }; const openVehicle = async (keyword: string, protocol?: string) => { @@ -165,8 +175,8 @@ export default function App() { }; const pages: Record = { - dashboard: navigatePage('quality')} />, - vehicles: , + dashboard: navigatePage('quality')} onOpenVehicles={openVehicles} />, + vehicles: , realtime: , detail: , history: , diff --git a/vehicle-data-platform/apps/web/src/domain/appRoute.test.ts b/vehicle-data-platform/apps/web/src/domain/appRoute.test.ts index 5ce41ec4..114a6dde 100644 --- a/vehicle-data-platform/apps/web/src/domain/appRoute.test.ts +++ b/vehicle-data-platform/apps/web/src/domain/appRoute.test.ts @@ -6,7 +6,20 @@ describe('parseAppHash', () => { expect(parseAppHash('#/detail?keyword=%E7%B2%A4AG18312&protocol=JT808')).toEqual({ page: 'detail', keyword: '粤AG18312', - protocol: 'JT808' + protocol: 'JT808', + filters: {} + }); + }); + + test('parses vehicle list filters from hash query', () => { + expect(parseAppHash('#/vehicles?coverage=multi&serviceStatus=degraded&online=online&bindingStatus=bound')).toEqual({ + page: 'vehicles', + filters: { + coverage: 'multi', + serviceStatus: 'degraded', + online: 'online', + bindingStatus: 'bound' + } }); }); @@ -20,6 +33,10 @@ describe('buildAppHash', () => { expect(buildAppHash({ page: 'history', keyword: '粤AG18312', protocol: 'GB32960' })).toBe('#/history?keyword=%E7%B2%A4AG18312&protocol=GB32960'); }); + test('builds shareable vehicle list hash with filters', () => { + expect(buildAppHash({ page: 'vehicles', filters: { coverage: 'multi', serviceStatus: 'degraded' } })).toBe('#/vehicles?coverage=multi&serviceStatus=degraded'); + }); + test('builds page-only hash when keyword is empty', () => { expect(buildAppHash({ page: 'quality', keyword: '' })).toBe('#/quality'); }); diff --git a/vehicle-data-platform/apps/web/src/domain/appRoute.ts b/vehicle-data-platform/apps/web/src/domain/appRoute.ts index ab2060a5..56716c4b 100644 --- a/vehicle-data-platform/apps/web/src/domain/appRoute.ts +++ b/vehicle-data-platform/apps/web/src/domain/appRoute.ts @@ -6,8 +6,11 @@ export type AppRoute = { page?: PageKey; keyword?: string; protocol?: string; + filters?: Record; }; +const filterKeys = ['coverage', 'serviceStatus', 'online', 'bindingStatus'] as const; + export function parseAppHash(hash: string): AppRoute { const normalized = hash.trim().replace(/^#\/?/, ''); if (!normalized) { @@ -20,7 +23,14 @@ export function parseAppHash(hash: string): AppRoute { const params = new URLSearchParams(queryPart); const keyword = params.get('keyword')?.trim() || undefined; const protocol = params.get('protocol')?.trim() || undefined; - return { page: pagePart as PageKey, keyword, protocol }; + const filters: Record = {}; + for (const key of filterKeys) { + const value = params.get(key)?.trim(); + if (value) { + filters[key] = value; + } + } + return { page: pagePart as PageKey, keyword, protocol, filters }; } export function buildAppHash(route: AppRoute): string { @@ -34,6 +44,12 @@ export function buildAppHash(route: AppRoute): string { if (protocol) { params.set('protocol', protocol); } + for (const key of filterKeys) { + const value = route.filters?.[key]?.trim(); + if (value) { + params.set(key, value); + } + } const query = params.toString(); return query ? `#/${page}?${query}` : `#/${page}`; } diff --git a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx index 8cf89c9a..b9f46b18 100644 --- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx @@ -51,7 +51,7 @@ function rowServiceStatus(row: { serviceStatus?: { title: string; severity: stri return { label: '服务正常', color: 'green' as const }; } -export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vin: string) => void; onOpenQuality: () => void }) { +export function Dashboard({ onOpenVehicle, onOpenQuality, onOpenVehicles }: { onOpenVehicle: (vin: string) => void; onOpenQuality: () => void; onOpenVehicles: (filters?: Record) => void }) { const [summary, setSummary] = useState(null); const [serviceSummary, setServiceSummary] = useState(null); const [coverage, setCoverage] = useState([]); @@ -95,11 +95,11 @@ export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vi .finally(() => setLoading(false)); }, []); - const kpis = [ - { label: '总车辆', value: formatCount(serviceSummary?.totalVehicles) }, - { label: '在线车辆', value: formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles) }, - { label: '多源车辆', value: formatCount(serviceSummary?.multiSourceVehicles) }, - { label: '身份未绑定', value: formatCount(serviceSummary?.identityRequiredVehicles) } + const kpis: Array<{ label: string; value: string; filters: Record }> = [ + { label: '总车辆', value: formatCount(serviceSummary?.totalVehicles), filters: {} }, + { label: '在线车辆', value: formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles), filters: { online: 'online' } }, + { label: '多源车辆', value: formatCount(serviceSummary?.multiSourceVehicles), filters: { coverage: 'multi' } }, + { label: '身份未绑定', value: formatCount(serviceSummary?.identityRequiredVehicles), filters: { serviceStatus: 'identity_required' } } ]; return ( @@ -108,9 +108,11 @@ export function Dashboard({ onOpenVehicle, onOpenQuality }: { onOpenVehicle: (vi
{kpis.map((item) => ( - + + ))}
diff --git a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx index b03f60cf..e4a060d2 100644 --- a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx @@ -28,10 +28,10 @@ function vehicleServiceStatus(row: VehicleCoverageRow) { return { label: '服务正常', color: 'green' as const }; } -export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) { +export function Vehicles({ onOpenVehicle, initialFilters = {} }: { onOpenVehicle: (vin: string) => void; initialFilters?: Record }) { const [rows, setRows] = useState([]); const [loading, setLoading] = useState(true); - const [filters, setFilters] = useState>({}); + const [filters, setFilters] = useState>(initialFilters); const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 }); const load = (values: Record = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => { @@ -52,7 +52,10 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo .finally(() => setLoading(false)); }; - useEffect(() => load(), []); + useEffect(() => { + setFilters(initialFilters); + load(initialFilters, 1, pagination.pageSize); + }, [JSON.stringify(initialFilters)]); const columns = useMemo( () => [ @@ -90,7 +93,7 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
-
{ + { const nextFilters = values as Record; setFilters(nextFilters); load(nextFilters, 1, pagination.pageSize); diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index 17d43cbc..375a974b 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -165,6 +165,27 @@ body { margin-bottom: 16px; } +.vp-kpi-card { + overflow: hidden; +} + +.vp-kpi-button { + width: 100%; + min-height: 94px; + padding: 20px 24px; + border: 0; + background: transparent; + text-align: left; + cursor: pointer; + font: inherit; +} + +.vp-kpi-button:hover, +.vp-kpi-button:focus-visible { + background: #f8fbff; + outline: none; +} + .vp-kpi-value { font-size: 28px; font-weight: 700; 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 558de90a..af36a63f 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -123,6 +123,60 @@ test('dashboard renders vehicle service summary metrics', async () => { expect(fetchMock).toHaveBeenCalledWith('/api/vehicle-service/summary', undefined); }); +test('opens vehicle list filtered by service summary KPI', async () => { + window.history.replaceState(null, '', '/#/dashboard'); + const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => { + const path = String(input); + if (path.includes('/api/dashboard/summary')) { + return { + ok: true, + json: async () => ({ + data: { onlineVehicles: 3, activeToday: 4, frameToday: 1286320, issueVehicles: 7, kafkaLag: 0, protocols: [], serviceStatuses: [], linkHealth: [] }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/vehicle-service/summary')) { + return { + ok: true, + json: async () => ({ + data: { + totalVehicles: 1033, + boundVehicles: 1024, + onlineVehicles: 208, + singleSourceVehicles: 391, + multiSourceVehicles: 181, + noDataVehicles: 461, + identityRequiredVehicles: 9, + serviceStatuses: [], + protocols: [] + }, + 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(); + + fireEvent.click(await screen.findByRole('button', { name: /多源车辆/ })); + + await waitFor(() => { + expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/vehicles/coverage?limit=20&offset=0&coverage=multi'), undefined); + }); + expect(window.location.hash).toBe('#/vehicles?coverage=multi'); +}); + test('shows resolved vehicle service status after topbar search', async () => { window.history.replaceState(null, '', '/#/dashboard'); const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {