feat(platform): add time window monitoring workbench
This commit is contained in:
@@ -774,6 +774,40 @@ export function Dashboard({
|
|||||||
const range = scope.dateFrom || scope.dateTo ? `${scope.dateFrom || '-'} 至 ${scope.dateTo || '-'}` : '全部时间';
|
const range = scope.dateFrom || scope.dateTo ? `${scope.dateFrom || '-'} 至 ${scope.dateTo || '-'}` : '全部时间';
|
||||||
return `${vehicle} / ${source} / ${range}`;
|
return `${vehicle} / ${source} / ${range}`;
|
||||||
})();
|
})();
|
||||||
|
const timeMonitorWorkbench = [
|
||||||
|
{
|
||||||
|
label: '轨迹回放',
|
||||||
|
value: `${formatCount(summary?.activeToday)} 活跃`,
|
||||||
|
detail: '查看时间窗内车辆位置、速度、里程和断点。',
|
||||||
|
action: '打开轨迹',
|
||||||
|
color: 'blue' as const,
|
||||||
|
onClick: openTimeMonitorHistory
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '里程核对',
|
||||||
|
value: `${formatCount(serviceSummary?.totalVehicles)} 车辆`,
|
||||||
|
detail: '用同一范围核对区间里程和日统计闭合。',
|
||||||
|
action: '核对里程',
|
||||||
|
color: 'green' as const,
|
||||||
|
onClick: openTimeMonitorMileage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '历史证据',
|
||||||
|
value: `${formatCount(summary?.frameToday)} 帧`,
|
||||||
|
detail: '按车辆、时间和字段裁剪导出 RAW 与解析字段。',
|
||||||
|
action: '导出证据',
|
||||||
|
color: 'blue' as const,
|
||||||
|
onClick: openTimeMonitorRaw
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '告警复盘',
|
||||||
|
value: `${formatCount(summary?.issueVehicles)} 告警`,
|
||||||
|
detail: '查看该车辆或来源在当前范围内的风险事件。',
|
||||||
|
action: '查看告警',
|
||||||
|
color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
|
||||||
|
onClick: openTimeMonitorAlerts
|
||||||
|
}
|
||||||
|
];
|
||||||
const dataFlowStages = [
|
const dataFlowStages = [
|
||||||
{
|
{
|
||||||
stage: '01',
|
stage: '01',
|
||||||
@@ -1274,6 +1308,34 @@ export function Dashboard({
|
|||||||
<Typography.Text type="secondary">
|
<Typography.Text type="secondary">
|
||||||
同一时间窗会带入轨迹回放、里程统计和历史数据导出,避免跨页面重复输入。
|
同一时间窗会带入轨迹回放、里程统计和历史数据导出,避免跨页面重复输入。
|
||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
|
<div className="vp-time-monitor-workbench">
|
||||||
|
<div className="vp-time-monitor-scope">
|
||||||
|
<Space wrap>
|
||||||
|
<Tag color="blue">当前时间窗</Tag>
|
||||||
|
<Tag color={timeMonitorScope().keyword ? 'green' : 'grey'}>{timeMonitorScope().keyword ? '单车' : '全域'}</Tag>
|
||||||
|
</Space>
|
||||||
|
<strong>{timeMonitorSummary}</strong>
|
||||||
|
<Typography.Text type="secondary">
|
||||||
|
这个范围会同步带入轨迹、里程、历史证据和告警复盘,适合客户问询、BI 核对和异常解释。
|
||||||
|
</Typography.Text>
|
||||||
|
</div>
|
||||||
|
<div className="vp-time-monitor-work-grid">
|
||||||
|
{timeMonitorWorkbench.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.label}
|
||||||
|
type="button"
|
||||||
|
className="vp-time-monitor-work-item"
|
||||||
|
onClick={item.onClick}
|
||||||
|
aria-label={`时间窗作业 ${item.label} ${item.action}`}
|
||||||
|
>
|
||||||
|
<Tag color={item.color}>{item.label}</Tag>
|
||||||
|
<strong>{item.value}</strong>
|
||||||
|
<span>{item.detail}</span>
|
||||||
|
<em>{item.action}</em>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div className="vp-time-monitor-grid">
|
<div className="vp-time-monitor-grid">
|
||||||
{[
|
{[
|
||||||
{ title: '今天车辆轨迹', detail: '查看当天活跃车辆的轨迹、速度和里程断点。', action: '查今天', onClick: openTimeMonitorHistory },
|
{ title: '今天车辆轨迹', detail: '查看当天活跃车辆的轨迹、速度和里程断点。', action: '查今天', onClick: openTimeMonitorHistory },
|
||||||
|
|||||||
@@ -518,6 +518,81 @@ body {
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vp-time-monitor-workbench {
|
||||||
|
margin-top: 14px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.32fr);
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-time-monitor-scope {
|
||||||
|
min-height: 168px;
|
||||||
|
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-monitor-scope strong {
|
||||||
|
color: var(--vp-text);
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 26px;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-time-monitor-work-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-time-monitor-work-item {
|
||||||
|
min-height: 168px;
|
||||||
|
padding: 14px;
|
||||||
|
border: 1px solid var(--vp-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fbfcff;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
align-content: start;
|
||||||
|
text-align: left;
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-time-monitor-work-item:hover,
|
||||||
|
.vp-time-monitor-work-item:focus-visible {
|
||||||
|
border-color: rgba(22, 100, 255, 0.42);
|
||||||
|
background: #f7fbff;
|
||||||
|
box-shadow: var(--vp-shadow-sm);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-time-monitor-work-item strong {
|
||||||
|
color: var(--vp-text);
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 26px;
|
||||||
|
font-weight: 700;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-time-monitor-work-item span {
|
||||||
|
color: var(--vp-text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-time-monitor-work-item em {
|
||||||
|
color: var(--vp-primary);
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.vp-result-summary-grid {
|
.vp-result-summary-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
@@ -3391,6 +3466,8 @@ button.vp-realtime-command-item:focus-visible {
|
|||||||
.vp-map-workspace,
|
.vp-map-workspace,
|
||||||
.vp-runbook-grid,
|
.vp-runbook-grid,
|
||||||
.vp-workbench-grid,
|
.vp-workbench-grid,
|
||||||
|
.vp-time-monitor-workbench,
|
||||||
|
.vp-time-monitor-work-grid,
|
||||||
.vp-focus-service,
|
.vp-focus-service,
|
||||||
.vp-focus-service-evidence,
|
.vp-focus-service-evidence,
|
||||||
.vp-scenario-grid,
|
.vp-scenario-grid,
|
||||||
|
|||||||
@@ -810,9 +810,17 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
|
|||||||
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.getByText('这个范围会同步带入轨迹、里程、历史证据和告警复盘,适合客户问询、BI 核对和异常解释。')).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.getAllByText('轨迹回放').length).toBeGreaterThanOrEqual(1);
|
||||||
|
expect(screen.getByText('里程核对')).toBeInTheDocument();
|
||||||
|
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.getByText('今天车辆轨迹')).toBeInTheDocument();
|
expect(screen.getByText('今天车辆轨迹')).toBeInTheDocument();
|
||||||
expect(screen.getByText('历史时间窗')).toBeInTheDocument();
|
expect(screen.getByText('历史时间窗')).toBeInTheDocument();
|
||||||
expect(screen.getByText('区间里程')).toBeInTheDocument();
|
expect(screen.getByText('区间里程')).toBeInTheDocument();
|
||||||
|
|||||||
Reference in New Issue
Block a user