feat(platform): add global customer time window

This commit is contained in:
lingniu
2026-07-05 19:21:52 +08:00
parent 4085268971
commit 0bfc47bc1c
4 changed files with 148 additions and 1 deletions

View File

@@ -37,6 +37,7 @@ export default function App() {
const [qualityFilters, setQualityFilters] = useState<Record<string, string>>( const [qualityFilters, setQualityFilters] = useState<Record<string, string>>(
initialRoute.page === 'quality' || initialRoute.page === 'alert-events' ? qualityFiltersFromRoute(initialRoute) : {} initialRoute.page === 'quality' || initialRoute.page === 'alert-events' ? qualityFiltersFromRoute(initialRoute) : {}
); );
const [customerTimeWindow, setCustomerTimeWindow] = useState<Record<string, string>>(timeWindowFiltersFromRoute(initialRoute));
const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null); const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null);
const [activeAlertRuleCount, setActiveAlertRuleCount] = useState<number | null>(null); const [activeAlertRuleCount, setActiveAlertRuleCount] = useState<number | null>(null);
const [p0AlertRuleCount, setP0AlertRuleCount] = useState<number | null>(null); const [p0AlertRuleCount, setP0AlertRuleCount] = useState<number | null>(null);
@@ -143,6 +144,10 @@ export default function App() {
if (route.page === 'quality' || route.page === 'alert-events') { if (route.page === 'quality' || route.page === 'alert-events') {
setQualityFilters(qualityFiltersFromRoute(route)); setQualityFilters(qualityFiltersFromRoute(route));
} }
const routeTimeWindow = timeWindowFiltersFromRoute(route);
if (routeTimeWindow.dateFrom || routeTimeWindow.dateTo) {
setCustomerTimeWindow(routeTimeWindow);
}
setActiveProtocol(route.protocol ?? ''); setActiveProtocol(route.protocol ?? '');
setHistoryTab(route.filters?.tab ?? (route.page === 'history-query' ? 'raw' : 'location')); setHistoryTab(route.filters?.tab ?? (route.page === 'history-query' ? 'raw' : 'location'));
}; };
@@ -446,6 +451,14 @@ export default function App() {
}; };
const currentCustomerTaskTimeWindow = () => { 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' const candidates = activePage === 'mileage'
? [mileageFilters, historyFilters, qualityFilters] ? [mileageFilters, historyFilters, qualityFilters]
: activePage === 'history' || activePage === 'history-query' : activePage === 'history' || activePage === 'history-query'
@@ -535,12 +548,19 @@ export default function App() {
}; };
return ( return (
<AppShell activePage={activePage} linkIssueCount={linkIssueCount} activeAlertRuleCount={activeAlertRuleCount} p0AlertRuleCount={p0AlertRuleCount} platformRelease={platformRelease} currentVehicleStatus={currentVehicleStatus} currentVehicleLabel={currentVehicleLabel} currentVehicleConsistency={currentVehicleConsistency} onChange={navigatePage} onCustomerTask={openCustomerTask} onVehicleSearch={openVehicle}> <AppShell activePage={activePage} linkIssueCount={linkIssueCount} activeAlertRuleCount={activeAlertRuleCount} p0AlertRuleCount={p0AlertRuleCount} platformRelease={platformRelease} currentVehicleStatus={currentVehicleStatus} currentVehicleLabel={currentVehicleLabel} currentVehicleConsistency={currentVehicleConsistency} customerTimeWindow={customerTimeWindow} onCustomerTimeWindowChange={setCustomerTimeWindow} onChange={navigatePage} onCustomerTask={openCustomerTask} onVehicleSearch={openVehicle}>
{pages[activePage]} {pages[activePage]}
</AppShell> </AppShell>
); );
} }
function timeWindowFiltersFromRoute(route: ReturnType<typeof parseAppHash>): Record<string, string> {
return {
...(route.filters?.dateFrom ? { dateFrom: route.filters.dateFrom } : {}),
...(route.filters?.dateTo ? { dateTo: route.filters.dateTo } : {})
};
}
function qualityFiltersFromRoute(route: ReturnType<typeof parseAppHash>): Record<string, string> { function qualityFiltersFromRoute(route: ReturnType<typeof parseAppHash>): Record<string, string> {
return { return {
...(route.keyword ? { keyword: route.keyword } : {}), ...(route.keyword ? { keyword: route.keyword } : {}),

View File

@@ -130,6 +130,8 @@ export function AppShell({
currentVehicleStatus, currentVehicleStatus,
currentVehicleLabel, currentVehicleLabel,
currentVehicleConsistency, currentVehicleConsistency,
customerTimeWindow,
onCustomerTimeWindowChange,
onChange, onChange,
onCustomerTask, onCustomerTask,
onVehicleSearch, onVehicleSearch,
@@ -143,6 +145,8 @@ export function AppShell({
currentVehicleStatus?: VehicleServiceStatus; currentVehicleStatus?: VehicleServiceStatus;
currentVehicleLabel?: string; currentVehicleLabel?: string;
currentVehicleConsistency?: VehicleSourceConsistency; currentVehicleConsistency?: VehicleSourceConsistency;
customerTimeWindow?: Record<string, string>;
onCustomerTimeWindowChange?: (filters: Record<string, string>) => void;
onChange: (page: PageKey) => void; onChange: (page: PageKey) => void;
onCustomerTask?: (page: PageKey) => void; onCustomerTask?: (page: PageKey) => void;
onVehicleSearch: (keyword: string) => void | Promise<void>; onVehicleSearch: (keyword: string) => void | Promise<void>;
@@ -154,6 +158,8 @@ export function AppShell({
const alertLabel = alertButtonLabel(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount); const alertLabel = alertButtonLabel(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount);
const alertClassName = alertButtonClassName(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount); const alertClassName = alertButtonClassName(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount);
const selectedPage = activePage === 'quality' ? 'alert-events' : activePage; const selectedPage = activePage === 'quality' ? 'alert-events' : activePage;
const dateFrom = customerTimeWindow?.dateFrom ?? '';
const dateTo = customerTimeWindow?.dateTo ?? '';
const search = () => { const search = () => {
const value = keyword.trim(); const value = keyword.trim();
@@ -258,6 +264,26 @@ export function AppShell({
<Button theme="solid" type="primary" loading={searching} onClick={search}></Button> <Button theme="solid" type="primary" loading={searching} onClick={search}></Button>
</Space> </Space>
<div className="vp-topbar-context"> <div className="vp-topbar-context">
<div className="vp-topbar-time-window" aria-label="客户时间窗">
<label>
<span></span>
<input
aria-label="顶部时间窗开始"
type="date"
value={dateFrom}
onChange={(event) => onCustomerTimeWindowChange?.({ dateFrom: event.currentTarget.value, dateTo })}
/>
</label>
<label>
<span></span>
<input
aria-label="顶部时间窗结束"
type="date"
value={dateTo}
onChange={(event) => onCustomerTimeWindowChange?.({ dateFrom, dateTo: event.currentTarget.value })}
/>
</label>
</div>
{currentVehicleLabel ? <Tag color="grey">{currentVehicleLabel}</Tag> : null} {currentVehicleLabel ? <Tag color="grey">{currentVehicleLabel}</Tag> : null}
{currentVehicleStatus ? ( {currentVehicleStatus ? (
<Tag color={currentVehicleStatus.severity === 'ok' ? 'green' : currentVehicleStatus.severity === 'error' ? 'red' : 'orange'}> <Tag color={currentVehicleStatus.severity === 'ok' ? 'green' : currentVehicleStatus.severity === 'error' ? 'red' : 'orange'}>

View File

@@ -266,6 +266,42 @@ body {
white-space: nowrap; 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 { .vp-topbar-quick-actions {
height: 32px; height: 32px;
display: inline-flex; display: inline-flex;

View File

@@ -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'); 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(<App />);
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 () => { 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'); 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) => { const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input, init) => {