feat(platform): center map page on vehicle service

This commit is contained in:
lingniu
2026-07-06 02:29:02 +08:00
parent 20b8fa425b
commit 13fb0a1a49
3 changed files with 331 additions and 82 deletions

View File

@@ -1248,6 +1248,92 @@ export function Realtime({
}
];
const mapShiftTimeWindowLabel = timeWindowDuration === '1 天窗口' ? '24 小时窗口' : timeWindowDuration;
const mapCommandTaskItems = [
{
label: '实时监控',
value: `${onlineCount.toLocaleString()} 在线`,
detail: `${locatedCount.toLocaleString()} 辆有定位,${staleCount.toLocaleString()} 辆更新超时。`,
color: onlineCount > 0 ? 'green' as const : 'orange' as const,
disabled: false,
onClick: () => applyFilters({ ...filters, online: 'online' })
},
{
label: '轨迹回放',
value: selectedMapRow?.plate || selectedMapRow?.vin || '先选车',
detail: selectedMapRow ? `${dataFreshness(selectedMapRow).detail},回放位置、速度和里程。` : '从地图或车辆列表选择一辆车。',
color: selectedMapRow ? 'blue' as const : 'grey' as const,
disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
},
{
label: '历史查询',
value: selectedVehicleProtocol || '全部来源',
detail: '查看位置、原始帧和解析字段,支撑客户复核。',
color: 'blue' as const,
disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
onClick: openSelectedVehicleRaw
},
{
label: '告警通知',
value: `${mapAttentionRows.length.toLocaleString()} 关注`,
detail: mapAttentionRows[0] ? `${mapAttentionRows[0].plate || mapAttentionRows[0].vin}${realtimeIssueLabels(mapAttentionRows[0]).join('')}` : '当前筛选下暂无关注车辆。',
color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const,
disabled: !onOpenQuality,
onClick: () => onOpenQuality?.(selectedMapRow && canOpenVehicle(selectedMapRow.vin)
? { keyword: selectedMapRow.vin, protocol: selectedVehicleProtocol }
: { serviceStatus: 'degraded' })
},
{
label: '统计导出',
value: `${rows.length.toLocaleString()}`,
detail: '进入里程统计,或导出当前地图车辆清单。',
color: 'blue' as const,
disabled: rows.length === 0,
onClick: exportRealtime
}
];
const mapSelectedServiceItems = [
{
label: '车辆档案',
action: '查看车辆',
detail: selectedVehicleLabel,
color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const,
disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
onClick: () => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol)
},
{
label: '轨迹回放',
action: '回放轨迹',
detail: selectedMapRow ? dataFreshness(selectedMapRow).detail : '等待选择',
color: selectedMapRow ? 'blue' as const : 'grey' as const,
disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
},
{
label: '历史数据',
action: '查询历史',
detail: selectedVehicleProtocol || '全部来源',
color: 'blue' as const,
disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
onClick: openSelectedVehicleRaw
},
{
label: '告警通知',
action: '查看告警',
detail: selectedMapRow ? realtimeIssueLabels(selectedMapRow)[0] : '等待选择',
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 })
},
{
label: '交接卡',
action: '复制交接',
detail: selectedMapRow ? realtimeIssueLabels(selectedMapRow)[0] : '等待选择',
color: 'blue' as const,
disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
onClick: copySelectedMapVehicleHandoff
}
];
const mapShiftConsoleItems = [
{
label: '今日态势',
@@ -1957,6 +2043,89 @@ export function Realtime({
</Space>
</div>
<section className="vp-map-command-center" aria-label="车辆服务地图中枢">
<div className="vp-map-command-main">
<div className="vp-map-command-copy">
<Space wrap>
<Tag color="blue"></Tag>
<Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
<Tag color={mapAttentionRows.length > 0 ? 'orange' : 'green'}>{mapAttentionRows.length.toLocaleString()} </Tag>
</Space>
<Typography.Title heading={4} style={{ margin: 0 }}>
32960808MQTT 线
</Typography.Title>
<Typography.Text type="secondary">
</Typography.Text>
</div>
<div className="vp-map-command-tasks">
{mapCommandTaskItems.map((item) => (
<button
key={item.label}
type="button"
className="vp-map-command-task"
disabled={item.disabled}
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>
</div>
<aside className="vp-map-command-side">
<div className="vp-map-command-side-card">
<Typography.Text strong></Typography.Text>
<div className="vp-map-foundation-facts">
<span>Web JS</span><strong>{amapConfigured ? '已配置' : '未配置'}</strong>
<span></span><strong>{amapSecurityProxyEnabled ? '已启用' : '未启用'}</strong>
<span> Key</span><strong>{runtime?.amapApiConfigured ? '已配置' : '未配置'}</strong>
</div>
</div>
<div className="vp-map-command-side-card">
<Typography.Text strong></Typography.Text>
<Typography.Text type="secondary">
</Typography.Text>
</div>
</aside>
</section>
<section className="vp-map-single-service" aria-label="单车服务台">
<div className="vp-map-single-service-copy">
<Space wrap>
<Tag color="blue"></Tag>
{selectedMapRow ? (
<>
<Tag color={vehicleServiceStatus(selectedMapRow).color}>{vehicleServiceStatus(selectedMapRow).label}</Tag>
<Tag color={dataFreshness(selectedMapRow).color}>{dataFreshness(selectedMapRow).detail}</Tag>
</>
) : (
<Tag color="grey"></Tag>
)}
</Space>
<Typography.Title heading={5} style={{ margin: 0 }}>{selectedVehicleLabel}</Typography.Title>
</div>
<div className="vp-map-single-service-actions">
{mapSelectedServiceItems.map((item) => (
<button
key={item.label}
type="button"
className="vp-map-single-service-action"
disabled={item.disabled}
onClick={item.onClick}
aria-label={`单车服务台 ${item.label} ${item.action}`}
>
<Tag color={item.color}>{item.label}</Tag>
<strong>{item.action}</strong>
<span>{item.detail}</span>
</button>
))}
</div>
</section>
<div className="vp-map-service-rail">
<div className="vp-map-service-rail-summary">
<Space wrap>

View File

@@ -6077,6 +6077,148 @@ button.vp-realtime-command-item:focus-visible {
align-items: center;
}
.vp-map-command-center {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 16px;
}
.vp-map-command-main,
.vp-map-command-side-card,
.vp-map-single-service {
border: 1px solid var(--vp-border);
border-radius: var(--vp-radius);
background: var(--vp-surface);
box-shadow: 0 14px 32px rgba(24, 39, 75, 0.06);
}
.vp-map-command-main {
padding: 18px;
display: grid;
gap: 16px;
}
.vp-map-command-copy {
display: grid;
gap: 10px;
}
.vp-map-command-copy .semi-typography {
max-width: 980px;
}
.vp-map-command-tasks,
.vp-map-single-service-actions {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.vp-map-command-task,
.vp-map-single-service-action {
min-height: 118px;
padding: 12px;
border: 1px solid var(--vp-border);
border-radius: var(--vp-radius);
background: #fbfcff;
color: inherit;
text-align: left;
font: inherit;
cursor: pointer;
display: grid;
align-content: start;
gap: 8px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.vp-map-command-task:hover,
.vp-map-command-task:focus-visible,
.vp-map-single-service-action:hover,
.vp-map-single-service-action:focus-visible {
border-color: rgba(22, 100, 255, 0.42);
box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08);
outline: none;
transform: translateY(-1px);
}
.vp-map-command-task:disabled,
.vp-map-single-service-action:disabled {
cursor: not-allowed;
opacity: 0.62;
box-shadow: none;
transform: none;
}
.vp-map-command-task strong,
.vp-map-single-service-action strong {
color: var(--vp-text);
font-size: 18px;
line-height: 24px;
font-weight: 700;
word-break: break-word;
}
.vp-map-command-task span,
.vp-map-single-service-action span {
color: var(--vp-text-muted);
font-size: 12px;
line-height: 18px;
word-break: break-word;
}
.vp-map-command-side {
display: grid;
gap: 12px;
}
.vp-map-command-side-card {
padding: 16px;
display: grid;
gap: 12px;
}
.vp-map-foundation-facts {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px 12px;
font-size: 13px;
}
.vp-map-foundation-facts span {
color: var(--vp-text-muted);
}
.vp-map-foundation-facts strong {
color: var(--vp-text);
text-align: right;
word-break: break-word;
}
.vp-map-single-service {
padding: 16px;
display: grid;
gap: 14px;
}
.vp-map-single-service-copy {
display: grid;
gap: 8px;
}
.vp-map-page .vp-map-service-rail,
.vp-map-page .vp-map-shift-console,
.vp-map-page .vp-map-decision-board,
.vp-map-page .vp-map-view-mode,
.vp-map-page .vp-map-field-command,
.vp-map-page .vp-map-area-monitor,
.vp-map-page .vp-map-dispatch-actions,
.vp-map-page .vp-map-kpi-strip,
.vp-map-page .vp-map-selected-service-strip,
.vp-map-page .vp-map-task-strip,
.vp-map-page .vp-map-vehicle-workbench {
display: none !important;
}
.vp-map-service-rail {
display: grid;
grid-template-columns: minmax(300px, 0.64fr) minmax(0, 1.36fr);
@@ -13010,6 +13152,9 @@ button.vp-realtime-command-item:focus-visible {
.vp-realtime-impact-board,
.vp-realtime-impact-grid,
.vp-source-coverage-grid,
.vp-map-command-center,
.vp-map-command-tasks,
.vp-map-single-service-actions,
.vp-map-service-rail,
.vp-map-service-rail-actions,
.vp-map-shift-console,

View File

@@ -10812,89 +10812,35 @@ test('shows realtime freshness status for recently updated and stale vehicles',
render(<App />);
expect(await screen.findByRole('heading', { name: '车辆实时地图' })).toBeInTheDocument();
expect(screen.getByText('地图服务行动条')).toBeInTheDocument();
expect(screen.getByText('把 Live Map 当作客户服务入口:先看在线车辆和关注车辆,再进入路线回放、统计查询和证据导出。')).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: '地图服务行动条 证据导出 导出CSV' })).toBeInTheDocument();
expect(screen.getByText('客户地图值班台')).toBeInTheDocument();
expect(screen.getByText('把实时地图收敛成值班员能执行的四件事:交付状态、优先车辆、时间窗复盘和交接说明。')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '客户地图值班台 今日态势 1 在线 / 1 关注 只看在线' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '客户地图值班台 优先车辆 粤A超时1 处理关注' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '客户地图值班台 时间窗复盘 24 小时窗口 打开轨迹' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '客户地图值班台 交接说明 可复制 复制交接' })).toBeInTheDocument();
expect(screen.getByText('车辆服务地图中枢')).toBeInTheDocument();
expect(screen.getByText('把 32960、808、MQTT 收敛成同一张车辆地图:看位置、判在线、选车辆、回放轨迹、处理告警和导出证据。')).toBeInTheDocument();
expect(screen.getByText('高德地图底座')).toBeInTheDocument();
expect(screen.getByText('来源证据仅用于筛选和追溯,不作为客户主路径。')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '车辆服务地图任务 实时监控 1 在线' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '车辆服务地图任务 轨迹回放 粤A超时1' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '车辆服务地图任务 历史查询 JT808' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '车辆服务地图任务 告警通知 1 关注' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '车辆服务地图任务 统计导出 2 辆' })).toBeInTheDocument();
expect(screen.getAllByText('数据新鲜').length).toBeGreaterThan(0);
expect(screen.getAllByText('更新超时').length).toBeGreaterThan(0);
expect(screen.getByText('地图客户决策')).toBeInTheDocument();
expect(screen.getByText('先判断车辆是否在线、是否有位置、是否有异常,再进入单车轨迹和历史查询。')).toBeInTheDocument();
expect(screen.getByText('地图页面向客户展示车辆服务状态,数据通道只作为定位、在线和异常追溯依据。')).toBeInTheDocument();
expect(screen.getByText('地图视图模式')).toBeInTheDocument();
expect(screen.getByText('按客户现场使用场景切换地图重点:运营总览、异常优先、轨迹复盘或交付导出。')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '地图视图模式 运营总览 2 辆 当前页' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '地图视图模式 异常优先 1 辆 关注车辆' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '地图视图模式 轨迹复盘 粤A超时1 选中车辆' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '地图视图模式 交付导出 2 辆 导出证据' })).toBeInTheDocument();
expect(screen.getByText('先看在线')).toBeInTheDocument();
expect(screen.getByText('再看定位')).toBeInTheDocument();
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.getByRole('button', { name: /复制地图决策说明/ })).toBeInTheDocument();
expect(screen.getByText('现场指挥建议')).toBeInTheDocument();
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.getByRole('button', { name: '地图现场指挥 通知证据 告警事件' })).toBeInTheDocument();
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.getByRole('button', { name: '区域围栏监控 区域报表 复制说明' })).toBeInTheDocument();
expect(screen.getByText('地图调度处置栏')).toBeInTheDocument();
expect(screen.getByText('把地图上的车辆直接转成调度动作:先处理关注车辆,再复盘选中车辆,最后导出交接证据。')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '地图调度处置栏 关注车辆 1 辆 告警事件' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '地图调度处置栏 复盘选中 粤A超时1 轨迹回放' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '地图调度处置栏 车辆档案 粤A超时1 车辆服务' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '地图调度处置栏 交接证据 2 辆 导出CSV' })).toBeInTheDocument();
expect(screen.getByText('实时盯车')).toBeInTheDocument();
expect(screen.getAllByText('异常优先').length).toBeGreaterThanOrEqual(1);
expect(screen.getAllByText('轨迹复盘').length).toBeGreaterThanOrEqual(1);
expect(screen.getAllByText('查询导出').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.getByText('车辆服务闭环')).toBeInTheDocument();
expect(screen.getByText('客户从这里完成看车、选车、查轨迹、查历史、查统计、收告警和导出。')).toBeInTheDocument();
expect(screen.getByText('客户地图监控包')).toBeInTheDocument();
expect(screen.getByText('面向客户看图时,先确认车辆范围、在线态势、定位态势和选中车辆,再进入轨迹、统计查询、历史数据或告警通知。')).toBeInTheDocument();
expect(screen.getByText('车辆范围')).toBeInTheDocument();
expect(screen.getByText('在线态势')).toBeInTheDocument();
expect(screen.getByText('定位态势')).toBeInTheDocument();
expect(screen.getByRole('button', { name: /复制地图监控包/ })).toBeInTheDocument();
expect(screen.getByText('地图车辆作业台')).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.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.getByText('车辆列表')).toBeInTheDocument();
expect(screen.getAllByText('1 辆更新超时').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.getByRole('button', { name: '地图选中车辆 数据导出 历史导出' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '地图选中车辆 交接卡 复制交接' })).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: '地图选中车辆 交接卡 复制交接' }));
fireEvent.click(screen.getByRole('button', { name: '单车服务台 交接卡 复制交接' }));
await waitFor(() => {
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【地图选中车辆交接卡】'));
});
@@ -10908,17 +10854,6 @@ test('shows realtime freshness status for recently updated and stale vehicles',
});
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('在线态势1 在线 / 1 离线'));
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('车辆服务http://localhost:3000/#/detail?keyword=VIN-STALE-001&protocol=JT808'));
fireEvent.click(screen.getByRole('button', { name: /复制地图决策说明/ }));
await waitFor(() => {
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【地图客户决策说明】'));
});
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('定位判断2 辆有有效坐标 / 0 辆无坐标'));
fireEvent.click(screen.getByRole('button', { name: '区域围栏监控 区域报表 复制说明' }));
await waitFor(() => {
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【区域围栏监控说明】'));
});
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('区域态势2 辆可定位 / 1 辆关注 / 坐标预览'));
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('告警通知http://localhost:3000/#/alert-events?serviceStatus=degraded'));
expect(screen.getByText('自定义时间窗复盘')).toBeInTheDocument();
expect(screen.getByText('按车辆和时间窗复盘发生了什么')).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: /复制时间窗包/ }));