feat(platform): add vehicle service delivery package

2026-07-05 14:36:04 +08:00
parent ee257b4aa1
commit 96a419f5d4
3 changed files with 245 additions and 1 deletions
--- a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx
@@ -310,6 +310,55 @@ function vehicleCustomerLookupText({
  return lines.join('\n');
 }

+function vehicleCustomerServicePackageText({
+  filters,
+  rows,
+  total,
+  summary
+}: {
+  filters: Record<string, string>;
+  rows: VehicleCoverageRow[];
+  total: number;
+  summary: VehicleCoverageSummary | null;
+}) {
+  const scope = filters.keyword?.trim() ? `单车 ${filters.keyword.trim()}` : '当前车辆池';
+  const singleVehicleFilters = filters.keyword?.trim()
+    ? { keyword: filters.keyword.trim(), ...(filters.protocol ? { protocol: filters.protocol } : {}) }
+    : {};
+  const mapFilters = { ...filters, online: filters.online || 'online' };
+  const pageVerdicts = currentPageVerdictStats(rows).map((item) => `${item.status} ${item.count.toLocaleString()}`).join('；') || '-';
+  const pageActions = currentPageActionStats(rows).map((item) => `${item.label} ${item.count.toLocaleString()}`).join('；') || '-';
+  const missingSources = (summary?.missingSources ?? [])
+    .filter((item) => item.count > 0)
+    .map((item) => `${item.protocol} ${item.count.toLocaleString()}`)
+    .join('；') || '-';
+  return [
+    '【客户车辆服务交付包】',
+    `服务范围：${scope}`,
+    `当前筛选：${vehicleFilterSummary(filters).join('；') || '全部车辆'}`,
+    `车辆规模：当前页 ${rows.length.toLocaleString()} 辆 / 当前筛选 ${total.toLocaleString()} 辆`,
+    `服务概览：在线 ${(summary?.onlineVehicles ?? 0).toLocaleString()}；单源 ${(summary?.singleSourceVehicles ?? 0).toLocaleString()}；多源 ${(summary?.multiSourceVehicles ?? 0).toLocaleString()}；暂无来源 ${(summary?.noDataVehicles ?? 0).toLocaleString()}`,
+    `档案状态：待绑定 ${(summary?.unboundVehicles ?? 0).toLocaleString()}；档案不完整 ${(summary?.archiveIncompleteVehicles ?? 0).toLocaleString()}`,
+    `当前页判读：${pageVerdicts}`,
+    `建议动作：${pageActions}`,
+    `缺失来源：${missingSources}`,
+    '',
+    '客户入口：',
+    `车辆地图：${appURL(buildAppHash({ page: 'map', keyword: filters.keyword, protocol: filters.protocol, filters: mapFilters }))}`,
+    `实时监控：${appURL(buildAppHash({ page: 'realtime', ...singleVehicleFilters, filters: filters.keyword?.trim() ? undefined : { ...filters, online: filters.online || 'online' } }))}`,
+    `轨迹回放：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'location' } }))}`,
+    `里程统计：${appURL(buildAppHash({ page: 'mileage', ...singleVehicleFilters }))}`,
+    `告警通知：${appURL(buildAppHash({ page: 'alert-events', ...singleVehicleFilters, filters }))}`,
+    `历史数据导出：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'raw', includeFields: 'true' } }))}`,
+    '',
+    '交付口径：',
+    '1. 客户先看地图与实时状态，判断车辆是否在线和位置是否可信',
+    '2. 单车问题进入轨迹回放和里程统计，确认时间窗内发生了什么',
+    '3. 异常车辆进入告警通知，带上原始记录和历史数据作为证据',
+    '4. 对外交付时优先使用车辆口径，协议来源只作为证据说明'
+  ].join('\n');
+}
+
 type VehicleActionRecommendation = {
  label: string;
  color: 'green' | 'orange' | 'red';
@@ -597,6 +646,9 @@ export function Vehicles({
  const copyCustomerLookupPath = () => {
    copyText(vehicleCustomerLookupText({ filters, rows, total: pagination.total, summary }), '客户查车路径');
  };
+  const copyCustomerServicePackage = () => {
+    copyText(vehicleCustomerServicePackageText({ filters, rows, total: pagination.total, summary }), '客户车辆服务交付包');
+  };
  const customerLookupSteps = [
    {
      label: '车辆身份',
@@ -708,6 +760,53 @@ export function Vehicles({
      disabled: rows.length === 0
    }
  ];
+  const servicePackageItems = [
+    {
+      label: '车辆地图',
+      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`,
+      detail: '先看当前筛选车辆的位置分布和在线状态。',
+      color: 'blue' as const,
+      action: '打开地图',
+      disabled: !onOpenMap,
+      onClick: () => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })
+    },
+    {
+      label: '轨迹回放',
+      value: filters.keyword?.trim() ? '单车时间线' : '先选车辆',
+      detail: filters.keyword?.trim() ? '按当前车辆回放定位轨迹和断点。' : '客户追问某车时，从车辆列表进入单车回放。',
+      color: filters.keyword?.trim() ? 'green' as const : 'grey' as const,
+      action: '回放轨迹',
+      disabled: !onOpenHistory || !filters.keyword?.trim(),
+      onClick: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' })
+    },
+    {
+      label: '里程统计',
+      value: filters.keyword?.trim() ? '区间复核' : '单车后可用',
+      detail: '核对时间窗里程、日里程和累计口径，支撑 BI 与客户问询。',
+      color: filters.keyword?.trim() ? 'orange' as const : 'grey' as const,
+      action: '查看里程',
+      disabled: !onOpenMileage || !filters.keyword?.trim(),
+      onClick: () => onOpenMileage?.(serviceScopeFilters)
+    },
+    {
+      label: '告警通知',
+      value: `${(summary?.noDataVehicles ?? 0).toLocaleString()} 无来源`,
+      detail: '异常车辆进入告警闭环，确认责任方、通知渠道和证据。',
+      color: (summary?.noDataVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
+      action: '查看告警',
+      disabled: !onOpenQuality,
+      onClick: () => onOpenQuality?.(serviceScopeFilters)
+    },
+    {
+      label: '历史导出',
+      value: `${rows.length.toLocaleString()} 当前页`,
+      detail: '对外交付车辆清单、轨迹、RAW 和字段证据。',
+      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
+      action: '导出清单',
+      disabled: rows.length === 0,
+      onClick: exportVehicles
+    }
+  ];

  useEffect(() => {
    setFilters(initialFilters);
@@ -914,6 +1013,42 @@ export function Vehicles({
          ))}
        </div>
      </Card>
+      <Card bordered title="客户车辆服务交付包" style={{ marginTop: 16 }}>
+        <div className="vp-vehicle-package-board">
+          <div className="vp-vehicle-package-summary">
+            <Space wrap>
+              <Tag color="blue">客户交付</Tag>
+              <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车包' : '车辆池包'}</Tag>
+            </Space>
+            <strong>{filters.keyword?.trim() || `${(summary?.totalVehicles ?? pagination.total).toLocaleString()} 辆车`}</strong>
+            <span>
+              把车辆地图、实时监控、轨迹回放、里程统计、告警通知和历史导出放在同一份服务包里，客户不用理解 GB32960、808 或 MQTT 的差异。
+            </span>
+            <Space wrap>
+              <Button size="small" theme="solid" type="primary" icon={<IconCopy />} onClick={copyCustomerServicePackage}>复制交付包</Button>
+              <Button size="small" disabled={!onOpenMap} onClick={() => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })}>查看地图</Button>
+              <Button size="small" disabled={!onOpenQuality} onClick={() => onOpenQuality?.(serviceScopeFilters)}>告警通知</Button>
+            </Space>
+          </div>
+          <div className="vp-vehicle-package-grid">
+            {servicePackageItems.map((item) => (
+              <button
+                key={item.label}
+                type="button"
+                className="vp-vehicle-package-item"
+                disabled={item.disabled}
+                aria-label={`客户车辆服务交付 ${item.label} ${item.action}`}
+                onClick={item.onClick}
+              >
+                <Tag color={item.color}>{item.label}</Tag>
+                <strong>{item.value}</strong>
+                <span>{item.detail}</span>
+                <em>{item.action}</em>
+              </button>
+            ))}
+          </div>
+        </div>
+      </Card>
      <Card bordered>
        <Form key={JSON.stringify(filters)} initValues={filters} layout="horizontal" onSubmit={(values) => {
          const nextFilters = values as Record<string, string>;
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -2006,6 +2006,90 @@ button.vp-realtime-command-item:focus-visible {
  line-height: 20px;
 }

+.vp-vehicle-package-board {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr);
+  gap: 16px;
+}
+
+.vp-vehicle-package-summary {
+  min-height: 172px;
+  padding: 14px;
+  border: 1px solid rgba(22, 100, 255, 0.24);
+  border-radius: var(--vp-radius);
+  background: #f6f9ff;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+
+.vp-vehicle-package-summary strong {
+  color: var(--vp-text);
+  font-size: 20px;
+  line-height: 26px;
+  word-break: break-word;
+}
+
+.vp-vehicle-package-summary span {
+  color: var(--vp-text-muted);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.vp-vehicle-package-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-vehicle-package-item {
+  min-height: 172px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: 8px;
+  background: #fbfcff;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  gap: 9px;
+  align-content: start;
+}
+
+.vp-vehicle-package-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.vp-vehicle-package-item:not(:disabled):hover,
+.vp-vehicle-package-item:not(:disabled):focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  outline: none;
+}
+
+.vp-vehicle-package-item strong {
+  color: var(--vp-text);
+  font-size: 19px;
+  line-height: 24px;
+  word-break: break-word;
+}
+
+.vp-vehicle-package-item span {
+  color: var(--vp-text-muted);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.vp-vehicle-package-item em {
+  color: #1664ff;
+  font-size: 12px;
+  line-height: 18px;
+  font-style: normal;
+  font-weight: 600;
+  align-self: end;
+}
+
 .vp-result-summary-item {
  min-height: 72px;
  padding: 12px;
@@ -6195,6 +6279,8 @@ button.vp-realtime-command-item:focus-visible {
  .vp-vehicle-lookup-head,
  .vp-vehicle-lookup-grid,
  .vp-vehicle-decision-grid,
+  .vp-vehicle-package-board,
+  .vp-vehicle-package-grid,
  .vp-time-review-package,
  .vp-time-review-grid,
  .vp-time-audit-strip,
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -1936,6 +1936,11 @@ test('opens vehicle list filtered by service summary KPI', async () => {

 test('shows vehicle service result summary on vehicle list filters', async () => {
  window.history.replaceState(null, '', '/#/vehicles?coverage=multi');
+  const writeText = vi.fn(() => Promise.resolve());
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: { writeText }
+  });
  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
    const path = String(input);
    if (path.includes('/api/ops/health')) {
@@ -2050,12 +2055,21 @@ test('shows vehicle service result summary on vehicle list filters', async () =>
  expect(screen.getByRole('button', { name: /复制客户查车路径/ })).toBeInTheDocument();
  expect(screen.getByText('车辆服务决策板')).toBeInTheDocument();
  expect(screen.getAllByText('异常车辆').length).toBeGreaterThan(0);
-  expect(screen.getByText('4 无来源')).toBeInTheDocument();
+  expect(screen.getAllByText('4 无来源').length).toBeGreaterThanOrEqual(1);
  expect(screen.getByText('单车服务')).toBeInTheDocument();
  expect(screen.getByText('输入车辆')).toBeInTheDocument();
  expect(screen.getByRole('button', { name: '车辆服务决策 在线车辆 实时监控' })).toBeInTheDocument();
  expect(screen.getByRole('button', { name: '车辆服务决策 异常车辆 维护身份绑定' })).toBeInTheDocument();
  expect(screen.getByRole('button', { name: '车辆服务决策 数据交付 导出清单' })).toBeInTheDocument();
+  expect(screen.getByText('客户车辆服务交付包')).toBeInTheDocument();
+  expect(screen.getByText('客户交付')).toBeInTheDocument();
+  expect(screen.getByText('车辆池包')).toBeInTheDocument();
+  expect(screen.getByText('把车辆地图、实时监控、轨迹回放、里程统计、告警通知和历史导出放在同一份服务包里，客户不用理解 GB32960、808 或 MQTT 的差异。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户车辆服务交付 车辆地图 打开地图' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户车辆服务交付 轨迹回放 回放轨迹' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户车辆服务交付 里程统计 查看里程' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户车辆服务交付 告警通知 查看告警' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户车辆服务交付 历史导出 导出清单' })).toBeInTheDocument();
  expect(screen.getAllByText('车辆地图').length).toBeGreaterThanOrEqual(1);
  expect(screen.getAllByText('里程统计').length).toBeGreaterThanOrEqual(1);
  expect(screen.getAllByText('数据导出').length).toBeGreaterThanOrEqual(1);
@@ -2098,6 +2112,15 @@ test('shows vehicle service result summary on vehicle list filters', async () =>
  expect(screen.getByText('1/2 来源在线，缺 YUTONG_MQTT')).toBeInTheDocument();
  expect(screen.getByText('建议动作')).toBeInTheDocument();
  expect(screen.getByText('补齐 YUTONG_MQTT 来源')).toBeInTheDocument();
+
+  fireEvent.click(screen.getByRole('button', { name: /复制交付包/ }));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【客户车辆服务交付包】'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('服务范围：当前车辆池'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('车辆地图：http://localhost:3000/#/map?'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('轨迹回放：http://localhost:3000/#/history?tab=location'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('里程统计：http://localhost:3000/#/mileage'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('告警通知：http://localhost:3000/#/alert-events?coverage=multi'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('历史数据导出：http://localhost:3000/#/history?tab=raw&includeFields=true'));
 });

 test('exports current vehicle coverage page as csv', async () => {