feat(platform): add global customer time window
This commit is contained in:
@@ -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 } : {}),
|
||||||
|
|||||||
@@ -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'}>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user