feat(platform): add time window service path

2026-07-05 21:44:10 +08:00
parent a26fd71bfa
commit 52a73cba2d
3 changed files with 265 additions and 1 deletions
--- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
@@ -980,6 +980,53 @@ export function Dashboard({
      onClick: openTimeMonitorAlerts
    }
  ];
+  const timeWindowServicePathItems = [
+    {
+      step: '1',
+      label: '锁定范围',
+      value: dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo),
+      detail: timeMonitorScopeValue.keyword ? `单车 ${timeMonitorScopeValue.keyword}` : '先确认车辆或车辆池，再应用同一时间窗。',
+      action: '应用时间窗',
+      color: timeMonitorHasRange ? 'green' as const : 'orange' as const,
+      onClick: () => setTimeMonitorFilters(timeMonitorScopeValue)
+    },
+    {
+      step: '2',
+      label: '回放轨迹',
+      value: `${formatCount(summary?.activeToday)} 活跃`,
+      detail: '查看时间窗内位置、速度、停驶和里程断点。',
+      action: '轨迹回放',
+      color: timeMonitorHasTrajectory ? 'blue' as const : 'orange' as const,
+      onClick: openTimeMonitorHistory
+    },
+    {
+      step: '3',
+      label: '核对里程',
+      value: `${formatCount(serviceSummary?.totalVehicles)} 车辆`,
+      detail: '用同一范围核对区间里程、日统计和 BI 口径。',
+      action: '统计查询',
+      color: 'green' as const,
+      onClick: openTimeMonitorMileage
+    },
+    {
+      step: '4',
+      label: '导出证据',
+      value: `${formatCount(summary?.frameToday)} 帧`,
+      detail: '导出轨迹、原始记录和解析字段，形成客户证据包。',
+      action: '数据导出',
+      color: timeMonitorHasHistory ? 'blue' as const : 'orange' as const,
+      onClick: openTimeMonitorRaw
+    },
+    {
+      step: '5',
+      label: '告警说明',
+      value: `${formatCount(summary?.issueVehicles)} 告警`,
+      detail: highPriorityIssue ? `${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` : '没有高优先级告警时，交付时说明当前无异常。',
+      action: '告警通知',
+      color: timeMonitorHasAlerts ? 'orange' as const : 'green' as const,
+      onClick: openTimeMonitorAlerts
+    }
+  ];
  const dataFlowStages = [
    {
      stage: '01',
@@ -2392,6 +2439,37 @@ export function Dashboard({
              ))}
            </div>
          </div>
+          <div className="vp-time-service-path">
+            <div className="vp-time-service-path-copy">
+              <Space wrap>
+                <Tag color="blue">时间窗服务路径</Tag>
+                <Tag color={timeMonitorDeliveryStatus.color}>{timeMonitorDeliveryStatus.label}</Tag>
+              </Space>
+              <Typography.Text strong>锁定同一辆车和同一时间范围后，按轨迹、里程、历史证据和告警说明形成客户可复盘的交付路径。</Typography.Text>
+              <Typography.Text type="secondary">
+                这条路径把自定义时间窗从查询条件变成客户交付流程：先确定范围，再按同一范围打开轨迹、统计、导出和告警。
+              </Typography.Text>
+            </div>
+            <div className="vp-time-service-path-grid">
+              {timeWindowServicePathItems.map((item) => (
+                <button
+                  key={item.label}
+                  type="button"
+                  className="vp-time-service-path-item"
+                  onClick={item.onClick}
+                  aria-label={`时间窗服务路径 ${item.step} ${item.label} ${item.value} ${item.action}`}
+                >
+                  <span>{item.step}</span>
+                  <div>
+                    <Tag color={item.color}>{item.label}</Tag>
+                    <strong>{item.value}</strong>
+                    <small>{item.detail}</small>
+                    <em>{item.action}</em>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
          <div className="vp-time-delivery-strip">
            <div className="vp-time-delivery-summary">
              <Space wrap>
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -2392,6 +2392,100 @@ body {
  line-height: 20px;
 }

+.vp-time-service-path {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1.42fr);
+  gap: 12px;
+}
+
+.vp-time-service-path-copy {
+  min-height: 174px;
+  padding: 14px;
+  border: 1px solid rgba(22, 100, 255, 0.24);
+  border-radius: 8px;
+  background: #f6f9ff;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+
+.vp-time-service-path-copy .semi-typography {
+  line-height: 21px;
+}
+
+.vp-time-service-path-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-time-service-path-item {
+  min-height: 174px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: 8px;
+  background: #fff;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr);
+  gap: 10px;
+  align-content: start;
+}
+
+.vp-time-service-path-item:hover,
+.vp-time-service-path-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f7fbff;
+  box-shadow: var(--vp-shadow-sm);
+  outline: none;
+}
+
+.vp-time-service-path-item > span {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: #eef4ff;
+  color: var(--vp-primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.vp-time-service-path-item div {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.vp-time-service-path-item strong {
+  color: var(--vp-text);
+  font-size: 17px;
+  line-height: 22px;
+  word-break: break-word;
+}
+
+.vp-time-service-path-item small {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
+.vp-time-service-path-item em {
+  color: var(--vp-primary);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+}
+
 .vp-time-audit-strip {
  margin-top: 14px;
  padding: 14px;
@@ -10643,6 +10737,8 @@ button.vp-realtime-command-item:focus-visible {
  .vp-mileage-kpi-grid,
  .vp-mileage-task-grid,
  .vp-mileage-mini-charts,
+  .vp-time-service-path,
+  .vp-time-service-path-grid,
  .vp-playback-layout,
  .vp-playback-timeline {
    grid-template-columns: 1fr;
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -734,6 +734,96 @@ test('dashboard prioritizes customer vehicle service command over data sources',
  expect(screen.getByRole('button', { name: '客户车队分组工作台 报表交付组 1,286,320 今日数据 历史导出' })).toBeInTheDocument();
 });

+test('dashboard guides customer custom time window service path', async () => {
+  window.history.replaceState(null, '', '/#/dashboard');
+  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,
+              amapApiConfigured: 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: 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: [],
+            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.findByText('时间窗服务路径')).toBeInTheDocument();
+  expect(screen.getByText('锁定同一辆车和同一时间范围后，按轨迹、里程、历史证据和告警说明形成客户可复盘的交付路径。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '时间窗服务路径 1 锁定范围 1 天窗口 应用时间窗' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '时间窗服务路径 2 回放轨迹 4 活跃 轨迹回放' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '时间窗服务路径 3 核对里程 1,033 车辆 统计查询' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '时间窗服务路径 4 导出证据 1,286,320 帧 数据导出' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '时间窗服务路径 5 告警说明 7 告警 告警通知' })).toBeInTheDocument();
+});
+
 test('dashboard exposes vehicle data center capability matrix', async () => {
  window.history.replaceState(null, '', '/#/dashboard');
  const writeText = vi.fn(() => Promise.resolve());
@@ -1020,7 +1110,7 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
  expect(screen.getByRole('button', { name: '车辆服务入口 看位置 实时地图' })).toBeInTheDocument();
  expect(screen.getAllByRole('button', { name: '复制客户服务说明' }).length).toBeGreaterThanOrEqual(1);
  expect(screen.getByText('自定义时间窗复盘')).toBeInTheDocument();
-  expect(screen.getByText('应用时间窗')).toBeInTheDocument();
+  expect(screen.getAllByText('应用时间窗').length).toBeGreaterThan(0);
  expect(screen.getByText('重置最近一天')).toBeInTheDocument();
  expect(screen.getByText('当前时间窗')).toBeInTheDocument();
  expect(screen.getByText('客户时间窗复盘包')).toBeInTheDocument();