feat(platform): add dedicated time monitor workspace

2026-07-06 04:09:35 +08:00
parent 4ce466895a
commit 6b9f269b89
6 changed files with 255 additions and 5 deletions
--- a/vehicle-data-platform/apps/web/src/App.tsx
+++ b/vehicle-data-platform/apps/web/src/App.tsx
@@ -131,6 +131,9 @@ export default function App() {
        if (route.page === 'history' || route.page === 'history-query' || route.page === 'mileage') {
          setAnalysisVin(route.keyword);
        }
+        if (route.page === 'time-monitor') {
+          setAnalysisVin(route.keyword);
+        }
      }
      if (route.page === 'vehicles') {
        setVehicleFilters(vehicleFiltersFromRoute(route));
@@ -185,6 +188,12 @@ export default function App() {
      replaceMileageHash(mileageFilters);
      return;
    }
+    if (page === 'time-monitor') {
+      const keyword = (activeVin || analysisVin).trim();
+      const protocol = activeProtocol.trim();
+      replaceHash('time-monitor', keyword, protocol, customerTimeWindow);
+      return;
+    }
    if (page === 'quality' || page === 'alert-events') {
      replaceQualityHash(qualityFilters);
      return;
@@ -498,6 +507,11 @@ export default function App() {
      openMileageWithFilters(scopedFilters);
      return;
    }
+    if (page === 'time-monitor') {
+      setActivePage('time-monitor');
+      replaceHash('time-monitor', keyword, protocol, timeWindow);
+      return;
+    }
    if (page === 'alert-events' || page === 'quality') {
      openQuality(scopedFilters);
      return;
@@ -601,6 +615,11 @@ export default function App() {

  const pages: Record<PageKey, JSX.Element> = {
    dashboard: <Dashboard onOpenVehicle={openVehicle} onOpenQuality={openQuality} onOpenMap={openMap} onOpenRealtime={openRealtime} onOpenVehicles={openVehicles} onOpenHistory={openHistoryWithFilters} onOpenMileage={openMileageWithFilters} customerTimeWindow={customerTimeWindow} />,
+    'time-monitor': <Dashboard focusMode="time-window" onOpenVehicle={openVehicle} onOpenQuality={openQuality} onOpenMap={openMap} onOpenRealtime={openRealtime} onOpenVehicles={openVehicles} onOpenHistory={openHistoryWithFilters} onOpenMileage={openMileageWithFilters} customerTimeWindow={customerTimeWindow} initialTimeMonitorFilters={{
+      ...(activeVin || analysisVin ? { keyword: activeVin || analysisVin } : {}),
+      ...(activeProtocol ? { protocol: activeProtocol } : {}),
+      ...customerTimeWindow
+    }} />,
    vehicles: <Vehicles onOpenVehicle={openVehicle} onOpenQuality={openQuality} onOpenMap={openMap} onOpenRealtime={openRealtime} onOpenHistory={openHistoryWithFilters} onOpenMileage={openMileageWithFilters} onFiltersChange={updateVehicleFilters} initialFilters={vehicleFilters} />,
    map: <Realtime mode="map" title="车辆实时地图" description="以车辆为中心查看位置分布、在线状态、关注车辆和轨迹入口" onOpenVehicle={openVehicle} onOpenHistory={openHistoryForVehicle} onOpenQuality={openQuality} onFiltersChange={updateMapFilters} initialFilters={realtimeFilters} />,
    realtime: <Realtime onOpenVehicle={openVehicle} onOpenHistory={openHistoryForVehicle} onOpenQuality={openQuality} onFiltersChange={updateRealtimeFilters} initialFilters={realtimeFilters} />,
--- a/vehicle-data-platform/apps/web/src/domain/appRoute.ts
+++ b/vehicle-data-platform/apps/web/src/domain/appRoute.ts
@@ -1,6 +1,6 @@
 import type { PageKey } from '../layout/AppShell';

-const pageKeys = new Set<PageKey>(['dashboard', 'vehicles', 'map', 'realtime', 'detail', 'history', 'history-query', 'mileage', 'alert-events', 'quality', 'notification-rules', 'ops-quality']);
+const pageKeys = new Set<PageKey>(['dashboard', 'vehicles', 'map', 'realtime', 'detail', 'history', 'history-query', 'mileage', 'time-monitor', 'alert-events', 'quality', 'notification-rules', 'ops-quality']);

 export type AppRoute = {
  page?: PageKey;
--- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
+++ b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
@@ -16,7 +16,7 @@ import { useState } from 'react';
 import type { VehicleSourceConsistency, VehicleServiceStatus } from '../api/types';
 import { isAMapConfigured } from '../config/appConfig';

-export type PageKey = 'dashboard' | 'vehicles' | 'map' | 'realtime' | 'detail' | 'history' | 'history-query' | 'mileage' | 'alert-events' | 'quality' | 'notification-rules' | 'ops-quality';
+export type PageKey = 'dashboard' | 'vehicles' | 'map' | 'realtime' | 'detail' | 'history' | 'history-query' | 'mileage' | 'time-monitor' | 'alert-events' | 'quality' | 'notification-rules' | 'ops-quality';

 export type CustomerView = {
  id: string;
@@ -54,6 +54,7 @@ const navGroups = [
    items: [
      { itemKey: 'history', text: '轨迹回放', icon: <IconMapPin /> },
      { itemKey: 'mileage', text: '统计查询', icon: <IconBarChartHStroked /> },
+      { itemKey: 'time-monitor', text: '时间窗监控', icon: <IconPulse /> },
      { itemKey: 'history-query', text: '数据导出', icon: <IconHistogram /> }
    ]
  },
@@ -82,6 +83,7 @@ const customerPrimaryPath = [
  { label: '车辆地图', page: 'map' as const },
  { label: '轨迹回放', page: 'history' as const },
  { label: '统计查询', page: 'mileage' as const },
+  { label: '时间窗监控', page: 'time-monitor' as const },
  { label: '数据导出', page: 'history-query' as const },
  { label: '告警通知', page: 'alert-events' as const }
 ];
@@ -90,6 +92,7 @@ const customerTaskPath = [
  { label: '地图看车', question: '车辆在哪里', page: 'map' as const },
  { label: '轨迹回放', question: '这段时间怎么跑', page: 'history' as const },
  { label: '统计查询', question: '里程怎么算', page: 'mileage' as const },
+  { label: '时间窗监控', question: '这段时间发生什么', page: 'time-monitor' as const },
  { label: '数据导出', question: '证据怎么给客户', page: 'history-query' as const },
  { label: '告警通知', question: '异常谁处理', page: 'alert-events' as const }
 ];
@@ -216,6 +219,7 @@ export function AppShell({
    { label: '监控', ariaLabel: '顶部实时监控', page: 'realtime' as const },
    { label: '轨迹', ariaLabel: '顶部轨迹回放', page: 'history' as const },
    { label: '统计', ariaLabel: '顶部统计查询', page: 'mileage' as const },
+    { label: '时间窗', ariaLabel: '顶部时间窗监控', page: 'time-monitor' as const },
    { label: '导出', ariaLabel: '顶部数据导出', page: 'history-query' as const },
    { label: '告警', ariaLabel: '顶部告警事件', page: 'alert-events' as const }
  ];
--- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
@@ -287,7 +287,9 @@ export function Dashboard({
  onOpenVehicles,
  onOpenHistory,
  onOpenMileage,
-  customerTimeWindow
+  customerTimeWindow,
+  focusMode = 'overview',
+  initialTimeMonitorFilters
 }: {
  onOpenVehicle: (vin: string, protocol?: string) => void;
  onOpenQuality: (filters?: Record<string, string>) => void;
@@ -297,6 +299,8 @@ export function Dashboard({
  onOpenHistory: (filters?: Record<string, string>) => void;
  onOpenMileage: (filters?: Record<string, string>) => void;
  customerTimeWindow?: Record<string, string>;
+  focusMode?: 'overview' | 'time-window';
+  initialTimeMonitorFilters?: Record<string, string>;
 }) {
  const [summary, setSummary] = useState<DashboardSummary | null>(null);
  const [serviceSummary, setServiceSummary] = useState<VehicleServiceSummary | null>(null);
@@ -304,7 +308,10 @@ export function Dashboard({
  const [locations, setLocations] = useState<VehicleRealtimeRow[]>([]);
  const [qualityIssues, setQualityIssues] = useState<QualityIssueRow[]>([]);
  const [opsHealth, setOpsHealth] = useState<OpsHealth | null>(null);
-  const [timeMonitorFilters, setTimeMonitorFilters] = useState<Record<string, string>>(defaultTimeMonitorFilters);
+  const [timeMonitorFilters, setTimeMonitorFilters] = useState<Record<string, string>>({
+    ...defaultTimeMonitorFilters(),
+    ...(initialTimeMonitorFilters ?? {})
+  });
  const [loading, setLoading] = useState(true);
  const [coverageLoading, setCoverageLoading] = useState(false);
  const [coverageServiceStatusTitle, setCoverageServiceStatusTitle] = useState('');
@@ -1174,6 +1181,36 @@ export function Dashboard({
      onClick: () => copyTimeMonitorReviewPackage()
    }
  ];
+  const dedicatedTimeMonitorActions = [
+    {
+      label: '轨迹回放',
+      value: timeMonitorWindowLabel,
+      detail: '按同一辆车和时间窗回放位置、速度、停留和里程断点。',
+      color: timeMonitorHasTrajectory ? 'blue' as const : 'orange' as const,
+      onClick: openTimeMonitorHistory
+    },
+    {
+      label: '统计查询',
+      value: timeMonitorWindowLabel,
+      detail: '用同一时间窗核对区间里程、日报闭合和异常点。',
+      color: 'green' as const,
+      onClick: openTimeMonitorMileage
+    },
+    {
+      label: '历史导出',
+      value: `${formatCount(summary?.frameToday)} 帧`,
+      detail: '导出历史位置、原始记录和字段证据，形成客户可复核数据包。',
+      color: timeMonitorHasHistory ? 'blue' as const : 'orange' as const,
+      onClick: openTimeMonitorRaw
+    },
+    {
+      label: '告警复盘',
+      value: `${formatCount(summary?.issueVehicles)} 告警`,
+      detail: '用同一时间窗解释异常车辆、通知策略和恢复验收。',
+      color: timeMonitorHasAlerts ? 'orange' as const : 'green' as const,
+      onClick: openTimeMonitorAlerts
+    }
+  ];
  const dataFlowStages = [
    {
      stage: '01',
@@ -2600,8 +2637,45 @@ export function Dashboard({

  return (
    <div className="vp-page">
-      <PageHeader title="车辆服务工作台" description="面向客户的车辆地图、实时监控、轨迹回放、统计查询、自定义时间窗复盘、历史查询、告警通知和数据导出" />
+      <PageHeader
+        title={focusMode === 'time-window' ? '自定义时间监控' : '车辆服务工作台'}
+        description={focusMode === 'time-window'
+          ? '把客户选择的一辆车和一个时间窗固定下来，同时进入实时地图、轨迹回放、里程统计、历史导出和告警复盘。'
+          : '面向客户的车辆地图、实时监控、轨迹回放、统计查询、自定义时间窗复盘、历史查询、告警通知和数据导出'}
+      />
      <Spin spinning={loading}>
+        {focusMode === 'time-window' ? (
+          <section className="vp-time-monitor-dedicated" aria-label="时间窗监控">
+            <div className="vp-time-monitor-dedicated-copy">
+              <Space wrap>
+                <Tag color="blue">时间窗监控</Tag>
+                <Tag color={timeMonitorHasRange ? 'green' : 'orange'}>{timeMonitorWindowLabel}</Tag>
+                <Tag color={timeMonitorDeliveryStatus.color}>{timeMonitorDeliveryStatus.label}</Tag>
+              </Space>
+              <Typography.Title heading={4} style={{ margin: 0 }}>
+                当前监控范围：{timeMonitorScopeValue.keyword || '全部车辆'} / {timeMonitorScopeValue.protocol || '全部数据通道'} / {timeMonitorScopeValue.dateFrom || '-'} 至 {timeMonitorScopeValue.dateTo || '-'}
+              </Typography.Title>
+              <Typography.Text type="secondary">
+                用同一组筛选条件贯穿地图定位、轨迹复盘、里程对账、历史证据导出和告警说明，避免客户跨页面重复输入。
+              </Typography.Text>
+            </div>
+            <div className="vp-time-monitor-dedicated-grid">
+              {dedicatedTimeMonitorActions.map((item) => (
+                <button
+                  key={item.label}
+                  type="button"
+                  className="vp-time-monitor-dedicated-item"
+                  onClick={item.onClick}
+                  aria-label={`时间窗监控入口 ${item.label} ${item.value}`}
+                >
+                  <Tag color={item.color}>{item.label}</Tag>
+                  <strong>{item.value}</strong>
+                  <span>{item.detail}</span>
+                </button>
+              ))}
+            </div>
+          </section>
+        ) : null}
        <section className="vp-vehicle-command-center" aria-label="车辆服务指挥台">
          <div className="vp-vehicle-command-map">
            <VehicleMap
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -3983,6 +3983,71 @@ body {
  line-height: 20px;
 }

+.vp-time-monitor-dedicated {
+  margin-bottom: 16px;
+  border: 1px solid rgba(22, 100, 255, 0.18);
+  border-radius: var(--vp-radius);
+  background: #fff;
+  display: grid;
+  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
+  overflow: hidden;
+  box-shadow: var(--vp-shadow-sm);
+}
+
+.vp-time-monitor-dedicated-copy {
+  padding: 18px;
+  border-right: 1px solid var(--vp-border);
+  background: #f7fbff;
+  display: grid;
+  align-content: start;
+  gap: 10px;
+}
+
+.vp-time-monitor-dedicated-grid {
+  padding: 16px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-time-monitor-dedicated-item {
+  min-height: 140px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: 8px;
+  background: #fbfcff;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.vp-time-monitor-dedicated-item:hover,
+.vp-time-monitor-dedicated-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.45);
+  background: #f5f9ff;
+  outline: none;
+  box-shadow: var(--vp-shadow-sm);
+}
+
+.vp-time-monitor-dedicated-item strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.vp-time-monitor-dedicated-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
 .vp-time-delivery-strip {
  margin-top: 14px;
  display: grid;
@@ -14465,6 +14530,8 @@ button.vp-realtime-command-item:focus-visible {
  .vp-workbench-grid,
  .vp-time-monitor-workbench,
  .vp-time-monitor-work-grid,
+  .vp-time-monitor-dedicated,
+  .vp-time-monitor-dedicated-grid,
  .vp-focus-service,
  .vp-focus-service-evidence,
  .vp-scenario-grid,
@@ -14699,6 +14766,7 @@ button.vp-realtime-command-item:focus-visible {
  .vp-history-export-acceptance-actions,
  .vp-time-next-action-copy,
  .vp-time-next-action-actions,
+  .vp-time-monitor-dedicated-copy,
  .vp-map-layer-control-copy,
  .vp-map-layer-control-actions,
  .vp-notification-orchestration-copy,
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -1226,6 +1226,91 @@ test('dashboard guides customer custom time window service path', async () => {
  expect(screen.getByRole('button', { name: '时间窗下一步动作 复制复盘 交付包' })).toBeInTheDocument();
 });

+test('time monitor route exposes a dedicated customer time window workspace', async () => {
+  window.history.replaceState(null, '', '/#/time-monitor?keyword=%E7%B2%A4A%E6%97%B6%E9%97%B4%E7%AA%97&protocol=JT808&dateFrom=2026-07-01&dateTo=2026-07-03');
+  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,
+            activeConnections: 0,
+            capacityFindings: [],
+            redisOnlineKeys: 0,
+            tdengineWritable: true,
+            mysqlWritable: true,
+            runtime: { requestTimeoutMs: 5000, amapWebJsConfigured: true, amapSecurityProxyEnabled: true, amapSecurityCodeExposed: false }
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/dashboard/summary')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            onlineVehicles: 6,
+            activeToday: 8,
+            frameToday: 9988,
+            issueVehicles: 2,
+            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: 12,
+            boundVehicles: 12,
+            onlineVehicles: 6,
+            singleSourceVehicles: 3,
+            multiSourceVehicles: 4,
+            noDataVehicles: 2,
+            identityRequiredVehicles: 0,
+            serviceStatuses: [],
+            protocols: [],
+            missingSources: []
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 8, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByRole('heading', { name: '自定义时间监控' })).toBeInTheDocument();
+  expect(screen.getByText('把客户选择的一辆车和一个时间窗固定下来，同时进入实时地图、轨迹回放、里程统计、历史导出和告警复盘。')).toBeInTheDocument();
+  expect(screen.getAllByText('时间窗监控').length).toBeGreaterThanOrEqual(1);
+  expect(screen.getByText('当前监控范围：粤A时间窗 / JT808 / 2026-07-01 至 2026-07-03')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '时间窗监控入口 轨迹回放 3 天窗口' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '时间窗监控入口 统计查询 3 天窗口' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '时间窗监控入口 历史导出 9,988 帧' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '时间窗监控入口 告警复盘 2 告警' })).toBeInTheDocument();
+});
+
 test('dashboard exposes vehicle data center capability matrix', async () => {
  window.history.replaceState(null, '', '/#/dashboard');
  const writeText = vi.fn(() => Promise.resolve());