feat(platform): add map vehicle workbench

2026-07-05 02:42:00 +08:00
parent 7bef3c7e33
commit 7ec2bcf3f9
3 changed files with 182 additions and 1 deletions
--- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
@@ -731,6 +731,7 @@ export function Realtime({
    { label: '需关注', value: mapAttentionRows.length.toLocaleString(), color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const, helper: `${staleCount.toLocaleString()} 辆更新超时` }
  ];
  const selectedVehicleProtocol = selectedMapRow ? filters.protocol || selectedMapRow.primaryProtocol || '' : '';
+  const selectedVehicleLabel = selectedMapRow?.plate || selectedMapRow?.vin || '未选择车辆';
  const openSelectedVehicleRaw = () => {
    if (!selectedMapRow || !canOpenVehicle(selectedMapRow.vin)) {
      Toast.warning('请先选择可查询的车辆');
@@ -743,6 +744,54 @@ export function Realtime({
      filters: { tab: 'raw', includeFields: 'true' }
    });
  };
+  const mapVehicleWorkItems = [
+    {
+      title: '车辆服务',
+      value: selectedVehicleLabel,
+      detail: selectedMapRow ? '查看车辆画像、来源状态和最新实时字段。' : '先从地图或车辆列表选择一辆车。',
+      action: '车辆档案',
+      color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      title: '轨迹复盘',
+      value: selectedMapRow ? dataFreshness(selectedMapRow).detail : '等待选择',
+      detail: '复核位置、速度、里程和断点，支撑客户问询。',
+      action: '打开轨迹',
+      color: selectedMapRow ? dataFreshness(selectedMapRow).color : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      title: '里程核对',
+      value: selectedMapRow?.totalMileageKm != null ? `${selectedMapRow.totalMileageKm} km` : '无里程',
+      detail: '进入单车里程统计，核对日里程和区间差值。',
+      action: '查看里程',
+      color: selectedMapRow?.totalMileageKm != null ? 'blue' as const : 'orange' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => {
+        if (!selectedMapRow) return;
+        window.location.hash = buildAppHash({
+          page: 'mileage',
+          keyword: selectedMapRow.vin,
+          protocol: selectedVehicleProtocol
+        });
+      }
+    },
+    {
+      title: '告警处置',
+      value: selectedMapRow ? realtimeIssueLabels(selectedMapRow)[0] : '等待选择',
+      detail: '围绕选中车辆查看断链、离线、定位异常等事件。',
+      action: '查看告警',
+      color: selectedMapRow && hasSourceIssue(selectedMapRow) ? 'orange' as const : selectedMapRow ? 'green' as const : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin) || !onOpenQuality,
+      onClick: () => selectedMapRow && onOpenQuality?.({
+        keyword: selectedMapRow.vin,
+        protocol: selectedVehicleProtocol
+      })
+    }
+  ];
  const mapCustomerTasks = [
    {
      title: '实时盯车',
@@ -877,6 +926,47 @@ export function Realtime({
          ))}
        </div>

+        <div className="vp-map-vehicle-workbench">
+          <div className="vp-map-vehicle-workbench-head">
+            <div>
+              <Typography.Text strong>地图车辆作业台</Typography.Text>
+              <Typography.Text type="tertiary" size="small">
+                当前车辆：{selectedVehicleLabel}
+              </Typography.Text>
+            </div>
+            <Space wrap>
+              {selectedMapRow ? (
+                <>
+                  <Tag color={vehicleServiceStatus(selectedMapRow).color}>{vehicleServiceStatus(selectedMapRow).label}</Tag>
+                  <Tag color={dataFreshness(selectedMapRow).color}>{dataFreshness(selectedMapRow).detail}</Tag>
+                  <Tag color="blue">{selectedVehicleProtocol || '未知来源'}</Tag>
+                </>
+              ) : (
+                <Tag color="grey">先选车辆</Tag>
+              )}
+            </Space>
+          </div>
+          <div className="vp-map-vehicle-work-grid">
+            {mapVehicleWorkItems.map((item) => (
+              <button
+                key={item.title}
+                type="button"
+                className="vp-map-vehicle-work-item"
+                disabled={item.disabled}
+                aria-label={`地图车辆作业 ${item.title} ${item.action}`}
+                onClick={item.onClick}
+              >
+                <span className="vp-map-vehicle-work-title">
+                  <Tag color={item.color}>{item.title}</Tag>
+                  <strong>{item.value}</strong>
+                </span>
+                <span>{item.detail}</span>
+                <em>{item.action}</em>
+              </button>
+            ))}
+          </div>
+        </div>
+
        <div className="vp-map-workspace">
          <section className="vp-map-canvas-panel">
            <div className="vp-map-canvas-toolbar">
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -1132,6 +1132,90 @@ button.vp-realtime-command-item:focus-visible {
  line-height: 20px;
 }

+.vp-map-vehicle-workbench {
+  padding: 14px;
+  border: 1px solid rgba(22, 100, 255, 0.18);
+  border-radius: var(--vp-radius);
+  background: #f8fbff;
+  display: grid;
+  gap: 12px;
+}
+
+.vp-map-vehicle-workbench-head {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.vp-map-vehicle-workbench-head > div {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.vp-map-vehicle-work-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-map-vehicle-work-item {
+  min-width: 0;
+  min-height: 132px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: var(--vp-surface);
+  color: inherit;
+  text-align: left;
+  display: grid;
+  gap: 8px;
+  align-content: space-between;
+  cursor: pointer;
+}
+
+.vp-map-vehicle-work-item:hover,
+.vp-map-vehicle-work-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08);
+  outline: none;
+}
+
+.vp-map-vehicle-work-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+  box-shadow: none;
+}
+
+.vp-map-vehicle-work-title {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.vp-map-vehicle-work-title strong {
+  color: var(--vp-text);
+  font-size: 16px;
+  line-height: 22px;
+  word-break: break-word;
+}
+
+.vp-map-vehicle-work-item > span:not(.vp-map-vehicle-work-title) {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-map-vehicle-work-item em {
+  color: var(--vp-primary);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+}
+
 .vp-map-workspace {
  min-height: 680px;
  display: grid;
@@ -3501,6 +3585,7 @@ button.vp-realtime-command-item:focus-visible {
  .vp-source-coverage-grid,
  .vp-map-kpi-strip,
  .vp-map-task-strip,
+  .vp-map-vehicle-work-grid,
  .vp-map-workspace,
  .vp-runbook-grid,
  .vp-workbench-grid,
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -9056,12 +9056,18 @@ test('shows realtime freshness status for recently updated and stale vehicles',
  expect(screen.getAllByText('更新超时').length).toBeGreaterThan(0);
  expect(screen.getByText('实时盯车')).toBeInTheDocument();
  expect(screen.getByText('异常优先')).toBeInTheDocument();
-  expect(screen.getByText('轨迹复盘')).toBeInTheDocument();
+  expect(screen.getAllByText('轨迹复盘').length).toBeGreaterThanOrEqual(1);
  expect(screen.getByText('数据交付')).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.getByText('地图车辆作业台')).toBeInTheDocument();
+  expect(screen.getAllByText('粤A新鲜1').length).toBeGreaterThanOrEqual(1);
+  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.getByText('选中车辆')).toBeInTheDocument();
  expect(screen.getByText('车辆列表')).toBeInTheDocument();