shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(platform): prioritize fleet monitoring dashboard

Browse Source
This commit is contained in:
lingniu
2026-07-05 13:42:25 +08:00
parent 43d6a0438e
commit 46a1b8c3a8
3 changed files with 287 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
View File

@@ -1408,28 +1408,28 @@ export function Dashboard({
<div className="vp-page">
<PageHeader title="车辆服务工作台" description="面向客户的车辆地图、实时监控、轨迹回放、里程统计、自定义时间监控、历史查询、告警通知和数据导出" />
<Spin spinning={loading}>
<Card bordered className="vp-customer-cockpit" bodyStyle={{ padding: 0 }}>
<div className="vp-customer-cockpit-main">
<div className="vp-customer-cockpit-copy">
<Card bordered className="vp-fleet-monitor" bodyStyle={{ padding: 0 }}>
<div className="vp-fleet-monitor-map">
<div className="vp-fleet-monitor-copy">
<Space wrap>
<Tag color="blue">客户车辆监控中心</Tag>
<Tag color="green">按车服务</Tag>
<Tag color="blue">车辆监控中心</Tag>
<Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
<Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警车辆</Tag>
</Space>
<Typography.Title heading={3} style={{ margin: 0 }}>客户只需要回答：车在哪、跑了多少、发生了什么</Typography.Title>
<Typography.Title heading={3} style={{ margin: 0 }}>先看车在哪里，再处理轨迹、里程、告警和导出</Typography.Title>
<Typography.Text type="secondary">
32960、808、宇通 MQTT 都只是车辆数据来源。产品主线围绕车辆本身提供实时地图、轨迹回放、里程统计、时间窗监控、历史查询、告警通知和数据导出。
32960、808、宇通 MQTT 只是数据证据。客户主流程围绕车辆本身：地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。
</Typography.Text>
<Space wrap>
<Button theme="solid" type="primary" onClick={() => onOpenMap({ online: 'online' })}>打开车辆地图</Button>
<Button theme="light" type="primary" onClick={openTimeMonitorHistory}>时间窗复盘</Button>
<Button theme="light" type="primary" onClick={openTimeMonitorRaw}>导出历史数据</Button>
<Button theme="light" onClick={copyCustomerServiceGuide}>复制客户说明</Button>
</Space>
</div>
<div className="vp-customer-cockpit-metrics">
<VehicleMap
points={commandMapPoints}
maxFallbackPoints={120}
heightClassName="vp-fleet-monitor-map-canvas"
fallbackLabel="显示车辆实时坐标预览"
/>
<div className="vp-fleet-monitor-stats">
{customerCockpitMetrics.map((item) => (
<button key={item.label} type="button" className="vp-customer-cockpit-metric" onClick={item.onClick} aria-label={`客户车辆监控 ${item.label} ${item.value}`}>
<button key={item.label} type="button" className="vp-fleet-monitor-stat" onClick={item.onClick} aria-label={`车辆监控指标 ${item.label} ${item.value}`}>
<Tag color={item.color}>{item.label}</Tag>
<strong>{item.value}</strong>
<span>{item.detail}</span>
@@ -1437,10 +1437,14 @@ export function Dashboard({
))}
</div>
</div>
<div className="vp-customer-cockpit-rail">
<div className="vp-customer-cockpit-workflows">
<div className="vp-fleet-monitor-panel">
<div className="vp-fleet-monitor-panel-head">
<Typography.Text strong>客户工作流</Typography.Text>
<Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制说明</Button>
</div>
<div className="vp-fleet-monitor-actions">
{customerCockpitWorkflows.map((item) => (
<button key={item.title} type="button" className="vp-customer-cockpit-workflow" onClick={item.onClick} aria-label={`客户车辆工作流 ${item.title} ${item.action}`}>
<button key={item.title} type="button" className="vp-fleet-monitor-action" onClick={item.onClick} aria-label={`客户车辆工作流 ${item.title} ${item.action}`}>
<span>{item.title}</span>
<strong>{item.action}</strong>
<small>{item.description}</small>
@@ -1448,9 +1452,22 @@ export function Dashboard({
</button>
))}
</div>
<div className="vp-customer-cockpit-trust">
<div className="vp-fleet-monitor-time">
<Space wrap>
<Tag color="blue">自定义时间窗</Tag>
<Tag color={timeMonitorScope().keyword ? 'green' : 'grey'}>{timeMonitorScope().keyword ? '单车' : '全域'}</Tag>
</Space>
<strong>{timeMonitorSummary}</strong>
<span>同一时间窗会同步用于轨迹回放、区间里程、历史查询和告警复盘。</span>
<Space wrap>
<Button size="small" theme="solid" type="primary" onClick={openTimeMonitorHistory}>轨迹回放</Button>
<Button size="small" theme="light" type="primary" onClick={openTimeMonitorMileage}>里程统计</Button>
<Button size="small" theme="light" type="primary" onClick={openTimeMonitorRaw}>数据导出</Button>
</Space>
</div>
<div className="vp-fleet-monitor-trust">
{customerTrustSignals.map((item) => (
<div key={item.label} className="vp-customer-cockpit-trust-item">
<div key={item.label} className="vp-fleet-monitor-trust-item">
<span>{item.label}</span>
<strong>{item.value}</strong>
<small>{item.detail}</small>
@@ -1459,65 +1476,6 @@ export function Dashboard({
</div>
</div>
</Card>
<Card bordered className="vp-customer-hero" bodyStyle={{ padding: 0 }}>
<div className="vp-customer-hero-map">
<div className="vp-customer-hero-copy">
<Space wrap>
<Tag color="blue">客户工作台</Tag>
<Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '地图可用' : '地图待配置'}</Tag>
<Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警车辆</Tag>
</Space>
<Typography.Title heading={3} style={{ margin: 0 }}>先看车在哪里，再看车发生了什么</Typography.Title>
<Typography.Text type="secondary">
平台已把多路接入数据归并为同一套车辆服务。客户每天要直接完成车辆地图监控、轨迹回放、里程统计、时间窗复盘、告警闭环和数据导出。
</Typography.Text>
<Space wrap>
<Button theme="solid" type="primary" onClick={() => onOpenMap({ online: 'online' })}>打开实时地图</Button>
<Button theme="light" type="primary" onClick={() => onOpenHistory()}>轨迹回放</Button>
<Button theme="light" type="primary" onClick={() => onOpenMileage({})}>里程统计</Button>
<Button theme="light" type="primary" onClick={openTimeMonitorRaw}>历史数据</Button>
<Button theme="light" onClick={copyCustomerServiceGuide}>复制客户说明</Button>
</Space>
</div>
<VehicleMap
points={commandMapPoints}
maxFallbackPoints={80}
heightClassName="vp-customer-hero-map-canvas"
fallbackLabel="显示车辆实时坐标预览"
/>
</div>
<div className="vp-customer-hero-side">
<div className="vp-customer-hero-side-head">
<Typography.Text strong>车辆服务路径</Typography.Text>
<Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制说明</Button>
</div>
<div className="vp-customer-journey">
{customerJourneySteps.map((item) => (
<button
key={item.step}
type="button"
className="vp-customer-journey-item"
onClick={item.onClick}
aria-label={`车辆服务路径 ${item.title} ${item.action}`}
>
<span>{item.step}</span>
<strong>{item.title}</strong>
<em>{item.action}</em>
<small>{item.detail}</small>
</button>
))}
</div>
<div className="vp-customer-health-grid">
{customerHealthItems.map((item) => (
<button key={item.label} type="button" className="vp-customer-health-item" 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>
</Card>
<Card bordered title="车辆服务指挥台" style={{ marginBottom: 16 }}>
<div className="vp-command-center-grid">
{commandCenterItems.map((item) => (

242
vehicle-data-platform/apps/web/src/styles/global.css
View File

@@ -350,6 +350,221 @@ body {
margin-top: 12px;
}
.vp-fleet-monitor {
margin-bottom: 16px;
overflow: hidden;
border-color: rgba(22, 100, 255, 0.18);
}
.vp-fleet-monitor .semi-card-body {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.68fr);
min-height: 560px;
background: #ffffff;
}
.vp-fleet-monitor-map {
position: relative;
min-width: 0;
min-height: 560px;
background: #eef5ff;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
}
.vp-fleet-monitor-copy {
position: absolute;
z-index: 2;
left: 22px;
top: 22px;
max-width: 610px;
padding: 16px;
border: 1px solid rgba(22, 100, 255, 0.16);
border-radius: 8px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
display: grid;
gap: 11px;
}
.vp-fleet-monitor-copy .semi-typography {
font-size: 14px;
line-height: 22px;
}
.vp-fleet-monitor-map-canvas {
min-height: 430px;
height: 430px;
}
.vp-fleet-monitor-stats {
min-height: 130px;
padding: 14px;
border-top: 1px solid rgba(22, 100, 255, 0.14);
background: #ffffff;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.vp-fleet-monitor-stat {
min-height: 102px;
padding: 12px;
border: 1px solid var(--vp-border);
border-radius: var(--vp-radius);
background: #fbfcff;
text-align: left;
cursor: pointer;
font: inherit;
display: grid;
gap: 8px;
align-content: start;
}
.vp-fleet-monitor-stat:hover,
.vp-fleet-monitor-stat:focus-visible,
.vp-fleet-monitor-action:hover,
.vp-fleet-monitor-action:focus-visible {
border-color: rgba(22, 100, 255, 0.42);
background: #f5f9ff;
outline: none;
}
.vp-fleet-monitor-stat strong {
color: var(--vp-text);
font-size: 22px;
line-height: 28px;
font-weight: 700;
}
.vp-fleet-monitor-stat span {
color: var(--vp-text-muted);
font-size: 12px;
line-height: 18px;
}
.vp-fleet-monitor-panel {
min-width: 0;
padding: 18px;
border-left: 1px solid var(--vp-border);
background: #f8fbff;
display: grid;
gap: 14px;
align-content: start;
}
.vp-fleet-monitor-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.vp-fleet-monitor-actions {
display: grid;
gap: 8px;
}
.vp-fleet-monitor-action {
min-height: 70px;
padding: 11px 12px;
border: 1px solid rgba(22, 100, 255, 0.14);
border-radius: var(--vp-radius);
background: #ffffff;
text-align: left;
cursor: pointer;
font: inherit;
display: grid;
grid-template-columns: 72px 78px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.vp-fleet-monitor-action span {
color: var(--vp-text-muted);
font-size: 12px;
font-weight: 700;
line-height: 18px;
}
.vp-fleet-monitor-action strong {
color: var(--vp-primary);
font-size: 14px;
line-height: 20px;
}
.vp-fleet-monitor-action small {
color: var(--vp-text-muted);
font-size: 12px;
line-height: 18px;
}
.vp-fleet-monitor-action em {
grid-column: 1 / -1;
color: var(--vp-text);
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 18px;
}
.vp-fleet-monitor-time {
padding: 12px;
border: 1px solid rgba(0, 164, 184, 0.22);
border-radius: var(--vp-radius);
background: #f3fbfc;
display: grid;
gap: 9px;
}
.vp-fleet-monitor-time strong {
color: var(--vp-text);
font-size: 15px;
line-height: 22px;
word-break: break-word;
}
.vp-fleet-monitor-time span {
color: var(--vp-text-muted);
font-size: 12px;
line-height: 18px;
}
.vp-fleet-monitor-trust {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.vp-fleet-monitor-trust-item {
min-height: 92px;
padding: 10px;
border: 1px solid var(--vp-border);
border-radius: var(--vp-radius);
background: #ffffff;
display: grid;
gap: 5px;
align-content: start;
}
.vp-fleet-monitor-trust-item span {
color: var(--vp-text-muted);
font-size: 12px;
line-height: 18px;
}
.vp-fleet-monitor-trust-item strong {
color: var(--vp-text);
font-size: 14px;
line-height: 20px;
}
.vp-fleet-monitor-trust-item small {
color: var(--vp-text-muted);
font-size: 12px;
line-height: 17px;
}
.vp-customer-cockpit {
margin-bottom: 16px;
overflow: hidden;
@@ -5394,6 +5609,9 @@ button.vp-realtime-command-item:focus-visible {
@media (max-width: 900px) {
.vp-evidence-grid,
.vp-action-grid,
.vp-fleet-monitor .semi-card-body,
.vp-fleet-monitor-stats,
.vp-fleet-monitor-trust,
.vp-vehicle-live-view .semi-card-body,
.vp-vehicle-live-main,
.vp-vehicle-live-facts,
@@ -5540,6 +5758,30 @@ button.vp-realtime-command-item:focus-visible {
height: 460px;
}
.vp-fleet-monitor-map {
min-height: 0;
}
.vp-fleet-monitor-copy {
position: static;
max-width: none;
margin: 14px;
}
.vp-fleet-monitor-map-canvas {
min-height: 320px;
height: 320px;
}
.vp-fleet-monitor-panel {
border-left: 0;
border-top: 1px solid var(--vp-border);
}
.vp-fleet-monitor-action {
grid-template-columns: 1fr;
}
.vp-stat-closure-action {
align-items: flex-start;
flex-direction: column;

20
vehicle-data-platform/apps/web/src/test/App.test.tsx
View File

@@ -797,16 +797,18 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
await renderDashboard();
expect(screen.getByText('车辆服务工作台')).toBeInTheDocument();
expect(screen.getByText('客户车辆监控中心')).toBeInTheDocument();
expect(screen.getByText('客户只需要回答：车在哪、跑了多少、发生了什么')).toBeInTheDocument();
expect(screen.getByText('32960、808、宇通 MQTT 都只是车辆数据来源。产品主线围绕车辆本身提供实时地图、轨迹回放、里程统计、时间窗监控、历史查询、告警通知和数据导出。')).toBeInTheDocument();
expect(screen.getByText('车辆监控中心')).toBeInTheDocument();
expect(screen.getByText('先看车在哪里，再处理轨迹、里程、告警和导出')).toBeInTheDocument();
expect(screen.getByText('32960、808、宇通 MQTT 只是数据证据。客户主流程围绕车辆本身：地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '车辆监控指标 车辆总数 1,033' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '车辆监控指标 在线车辆 208' })).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.getByText('来源只作为可信度证据，不作为客户主导航。')).toBeInTheDocument();
expect(screen.getByText('先看车在哪里，再看车发生了什么')).toBeInTheDocument();
expect(screen.getByText('同一时间窗会同步用于轨迹回放、区间里程、历史查询和告警复盘。')).toBeInTheDocument();
expect(screen.getByText('车辆服务指挥台')).toBeInTheDocument();
expect(screen.getByText('全域车辆监控')).toBeInTheDocument();
expect(screen.getByText('异常车辆闭环')).toBeInTheDocument();
@@ -819,12 +821,6 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
expect(screen.getByText('客户常用服务')).toBeInTheDocument();
expect(screen.getAllByText('车辆地图').length).toBeGreaterThanOrEqual(1);
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.getByRole('button', { name: '车辆服务路径 查询导出 历史数据' })).toBeInTheDocument();
expect(screen.getByText('今日车辆服务任务板')).toBeInTheDocument();
expect(screen.getByText('先看全域在线')).toBeInTheDocument();
expect(screen.getByText('再看重点车辆')).toBeInTheDocument();
@@ -843,7 +839,7 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
expect(screen.getByText('闭环异常')).toBeInTheDocument();
expect(screen.getByRole('button', { name: '车辆服务入口 找车 车辆中心' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '车辆服务入口 看位置 实时地图' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '复制客户服务说明' })).toBeInTheDocument();
expect(screen.getAllByRole('button', { name: '复制客户服务说明' }).length).toBeGreaterThanOrEqual(1);
expect(screen.getByText('自定义时间监控')).toBeInTheDocument();
expect(screen.getByText('应用时间窗')).toBeInTheDocument();
expect(screen.getByText('重置最近一天')).toBeInTheDocument();
@@ -1293,7 +1289,7 @@ test('dashboard shows vehicle service action queue', async () => {
test.each([
{ buttonName: '查看在线车辆', expectedHash: '#/vehicles?online=online' },
{ buttonName: '打开实时地图', expectedHash: '#/map?online=online' },
{ buttonName: '客户车辆工作流 实时看车 实时地图', expectedHash: '#/map?online=online' },
{ buttonName: '顶部告警事件', expectedHash: '#/alert-events' }
])('dashboard posture opens %s', async ({ buttonName, expectedHash }) => {
window.history.replaceState(null, '', '/#/dashboard');