diff --git a/vehicle-data-platform/apps/web/src/App.tsx b/vehicle-data-platform/apps/web/src/App.tsx index 33f9653d..74f1d546 100644 --- a/vehicle-data-platform/apps/web/src/App.tsx +++ b/vehicle-data-platform/apps/web/src/App.tsx @@ -37,6 +37,7 @@ export default function App() { const [qualityFilters, setQualityFilters] = useState>( initialRoute.page === 'quality' || initialRoute.page === 'alert-events' ? qualityFiltersFromRoute(initialRoute) : {} ); + const [customerTimeWindow, setCustomerTimeWindow] = useState>(timeWindowFiltersFromRoute(initialRoute)); const [linkIssueCount, setLinkIssueCount] = useState(null); const [activeAlertRuleCount, setActiveAlertRuleCount] = useState(null); const [p0AlertRuleCount, setP0AlertRuleCount] = useState(null); @@ -143,6 +144,10 @@ export default function App() { if (route.page === 'quality' || route.page === 'alert-events') { setQualityFilters(qualityFiltersFromRoute(route)); } + const routeTimeWindow = timeWindowFiltersFromRoute(route); + if (routeTimeWindow.dateFrom || routeTimeWindow.dateTo) { + setCustomerTimeWindow(routeTimeWindow); + } setActiveProtocol(route.protocol ?? ''); setHistoryTab(route.filters?.tab ?? (route.page === 'history-query' ? 'raw' : 'location')); }; @@ -446,6 +451,14 @@ export default function App() { }; const currentCustomerTaskTimeWindow = () => { + const globalDateFrom = customerTimeWindow.dateFrom?.trim(); + const globalDateTo = customerTimeWindow.dateTo?.trim(); + if (globalDateFrom || globalDateTo) { + return { + ...(globalDateFrom ? { dateFrom: globalDateFrom } : {}), + ...(globalDateTo ? { dateTo: globalDateTo } : {}) + }; + } const candidates = activePage === 'mileage' ? [mileageFilters, historyFilters, qualityFilters] : activePage === 'history' || activePage === 'history-query' @@ -535,12 +548,19 @@ export default function App() { }; return ( - + {pages[activePage]} ); } +function timeWindowFiltersFromRoute(route: ReturnType): Record { + return { + ...(route.filters?.dateFrom ? { dateFrom: route.filters.dateFrom } : {}), + ...(route.filters?.dateTo ? { dateTo: route.filters.dateTo } : {}) + }; +} + function qualityFiltersFromRoute(route: ReturnType): Record { return { ...(route.keyword ? { keyword: route.keyword } : {}), diff --git a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx index a680b74e..2e24cf45 100644 --- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx +++ b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx @@ -130,6 +130,8 @@ export function AppShell({ currentVehicleStatus, currentVehicleLabel, currentVehicleConsistency, + customerTimeWindow, + onCustomerTimeWindowChange, onChange, onCustomerTask, onVehicleSearch, @@ -143,6 +145,8 @@ export function AppShell({ currentVehicleStatus?: VehicleServiceStatus; currentVehicleLabel?: string; currentVehicleConsistency?: VehicleSourceConsistency; + customerTimeWindow?: Record; + onCustomerTimeWindowChange?: (filters: Record) => void; onChange: (page: PageKey) => void; onCustomerTask?: (page: PageKey) => void; onVehicleSearch: (keyword: string) => void | Promise; @@ -154,6 +158,8 @@ export function AppShell({ const alertLabel = alertButtonLabel(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount); const alertClassName = alertButtonClassName(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount); const selectedPage = activePage === 'quality' ? 'alert-events' : activePage; + const dateFrom = customerTimeWindow?.dateFrom ?? ''; + const dateTo = customerTimeWindow?.dateTo ?? ''; const search = () => { const value = keyword.trim(); @@ -258,6 +264,26 @@ export function AppShell({
+
+ + +
{currentVehicleLabel ? {currentVehicleLabel} : null} {currentVehicleStatus ? ( diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index 7d356fcd..3bedb584 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -266,6 +266,42 @@ body { white-space: nowrap; } +.vp-topbar-time-window { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px; + border: 1px solid var(--vp-border); + border-radius: 8px; + background: #f8fafc; +} + +.vp-topbar-time-window label { + display: inline-flex; + align-items: center; + gap: 4px; + height: 28px; + padding: 0 6px; + color: var(--vp-text-muted); + font-size: 12px; + font-weight: 600; +} + +.vp-topbar-time-window input { + width: 118px; + height: 24px; + border: 0; + border-radius: 6px; + background: #ffffff; + color: var(--vp-text); + font-size: 12px; + outline: none; +} + +.vp-topbar-time-window input:focus { + box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.16); +} + .vp-topbar-quick-actions { height: 32px; display: inline-flex; 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 dbf037a7..bb95033c 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -6534,6 +6534,71 @@ test('applies protocol from shareable history hash to API requests', async () => expect(window.location.hash).toBe('#/alert-events?keyword=%E7%B2%A4AG18312&protocol=JT808&dateFrom=2026-07-01&dateTo=2026-07-03'); }); +test('topbar customer time window scopes vehicle service tasks', async () => { + window.history.replaceState(null, '', '/#/dashboard'); + vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => { + const path = String(input); + if (path.includes('/api/vehicle-service/overview')) { + return { + ok: true, + json: async () => ({ + data: { + vin: 'VIN-TOPBAR-WINDOW', + plate: '粤A时间窗', + primaryProtocol: 'JT808', + protocols: ['JT808'], + coverageStatus: 'online', + sourceCount: 1, + onlineSourceCount: 1, + realtimeCount: 1, + historyCount: 8, + rawCount: 20, + mileageCount: 3, + qualityIssueCount: 0 + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + 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; + } + return { + ok: true, + json: async () => ({ + data: { items: [], total: 0, limit: 10, offset: 0 }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + }); + + render(); + + fireEvent.change(screen.getByPlaceholderText('搜索 VIN / 车牌 / 手机号'), { target: { value: '粤A时间窗' } }); + fireEvent.change(screen.getByLabelText('顶部时间窗开始'), { target: { value: '2026-07-01' } }); + fireEvent.change(screen.getByLabelText('顶部时间窗结束'), { target: { value: '2026-07-03' } }); + fireEvent.click(screen.getByRole('button', { name: '查询车辆' })); + expect(await screen.findByText('粤A时间窗 / VIN-TOPBAR-WINDOW')).toBeInTheDocument(); + + fireEvent.click(screen.getByRole('button', { name: '顶部统计查询' })); + expect(window.location.hash).toBe('#/mileage?keyword=VIN-TOPBAR-WINDOW&protocol=JT808&dateFrom=2026-07-01&dateTo=2026-07-03'); + + fireEvent.click(screen.getByRole('button', { name: '顶部数据导出' })); + expect(window.location.hash).toBe('#/history-query?keyword=VIN-TOPBAR-WINDOW&protocol=JT808&tab=raw&dateFrom=2026-07-01&dateTo=2026-07-03'); + + fireEvent.click(await screen.findByRole('button', { name: '顶部告警事件正常' })); + expect(window.location.hash).toBe('#/alert-events?keyword=VIN-TOPBAR-WINDOW&protocol=JT808&dateFrom=2026-07-01&dateTo=2026-07-03'); +}); + test('shows and clears current history filters while keeping vehicle scope', async () => { window.history.replaceState(null, '', '/#/history-query?keyword=VIN-HISTORY-001&protocol=JT808&dateFrom=2026-07-01+00%3A00%3A00&dateTo=2026-07-01+23%3A59%3A59&includeFields=true&fields=jt808.location.longitude%2Cjt808.location.latitude&tab=raw'); const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input, init) => {