diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
index dbe0026f..b1ebde19 100644
--- 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({
))}
+
+
+
+ 地图车辆作业台
+
+ 当前车辆:{selectedVehicleLabel}
+
+
+
+ {selectedMapRow ? (
+ <>
+ {vehicleServiceStatus(selectedMapRow).label}
+ {dataFreshness(selectedMapRow).detail}
+ {selectedVehicleProtocol || '未知来源'}
+ >
+ ) : (
+ 先选车辆
+ )}
+
+
+
+ {mapVehicleWorkItems.map((item) => (
+
+ ))}
+
+
+
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index 0b246ec6..a50c70c2 100644
--- 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,
diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx
index cc9774cb..22e95d82 100644
--- 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();