feat(platform): organize console around vehicle service
This commit is contained in:
@@ -18,18 +18,33 @@ import { isAMapConfigured } from '../config/appConfig';
|
||||
|
||||
export type PageKey = 'dashboard' | 'vehicles' | 'map' | 'realtime' | 'detail' | 'history' | 'history-query' | 'mileage' | 'alert-events' | 'quality' | 'notification-rules' | 'ops-quality';
|
||||
|
||||
const navItems = [
|
||||
{ itemKey: 'dashboard', text: '运营驾驶舱', icon: <IconHome /> },
|
||||
{ itemKey: 'map', text: '实时地图', icon: <IconMapPin /> },
|
||||
{ itemKey: 'vehicles', text: '车辆中心', icon: <IconServer /> },
|
||||
{ itemKey: 'realtime', text: '实时数据', icon: <IconActivity /> },
|
||||
{ itemKey: 'detail', text: '车辆档案', icon: <IconSetting /> },
|
||||
{ itemKey: 'history', text: '轨迹回放', icon: <IconMapPin /> },
|
||||
{ itemKey: 'history-query', text: '历史查询', icon: <IconHistogram /> },
|
||||
{ itemKey: 'mileage', text: '统计查询', icon: <IconBarChartHStroked /> },
|
||||
{ itemKey: 'alert-events', text: '告警事件', icon: <IconHistogram /> },
|
||||
{ itemKey: 'notification-rules', text: '通知规则', icon: <IconBell /> },
|
||||
{ itemKey: 'ops-quality', text: '运维质量', icon: <IconPulse /> }
|
||||
const navGroups = [
|
||||
{
|
||||
title: '车辆工作台',
|
||||
items: [
|
||||
{ itemKey: 'dashboard', text: '运营驾驶舱', icon: <IconHome /> },
|
||||
{ itemKey: 'map', text: '实时地图', icon: <IconMapPin /> },
|
||||
{ itemKey: 'vehicles', text: '车辆中心', icon: <IconServer /> },
|
||||
{ itemKey: 'realtime', text: '实时监控', icon: <IconActivity /> },
|
||||
{ itemKey: 'detail', text: '车辆档案', icon: <IconSetting /> }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '查询分析',
|
||||
items: [
|
||||
{ itemKey: 'history', text: '轨迹回放', icon: <IconMapPin /> },
|
||||
{ itemKey: 'history-query', text: '历史查询', icon: <IconHistogram /> },
|
||||
{ itemKey: 'mileage', text: '统计查询', icon: <IconBarChartHStroked /> }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '告警运维',
|
||||
items: [
|
||||
{ itemKey: 'alert-events', text: '告警事件', icon: <IconHistogram /> },
|
||||
{ itemKey: 'notification-rules', text: '通知规则', icon: <IconBell /> },
|
||||
{ itemKey: 'ops-quality', text: '运维质量', icon: <IconPulse /> }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
function linkHealthClassName(count: number | null) {
|
||||
@@ -113,15 +128,22 @@ export function AppShell({
|
||||
<span className="vp-brand-mark" />
|
||||
<span className="vp-brand-copy">
|
||||
<span>车辆服务中台</span>
|
||||
<span>实时监控 / 轨迹 / 告警 / 统计</span>
|
||||
<span>一车一服务 / 多源归并</span>
|
||||
</span>
|
||||
</div>
|
||||
<Nav
|
||||
selectedKeys={[selectedPage]}
|
||||
items={navItems}
|
||||
onSelect={({ itemKey }) => onChange(itemKey as PageKey)}
|
||||
style={{ maxWidth: '100%' }}
|
||||
/>
|
||||
<div className="vp-nav-groups">
|
||||
{navGroups.map((group) => (
|
||||
<div key={group.title} className="vp-nav-group">
|
||||
<div className="vp-nav-section-title">{group.title}</div>
|
||||
<Nav
|
||||
selectedKeys={[selectedPage]}
|
||||
items={group.items}
|
||||
onSelect={({ itemKey }) => onChange(itemKey as PageKey)}
|
||||
style={{ maxWidth: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
<main className="vp-main">
|
||||
<header className="vp-topbar">
|
||||
@@ -150,7 +172,7 @@ export function AppShell({
|
||||
) : null}
|
||||
<Tag color="blue">生产环境</Tag>
|
||||
{platformRelease ? <Tag color="blue">版本 {platformRelease}</Tag> : null}
|
||||
<Tag color="grey">32960 / 808 / MQTT 归一</Tag>
|
||||
<Tag color="grey">多源数据归并</Tag>
|
||||
<Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '地图就绪' : '地图待配置'}</Tag>
|
||||
<Button size="small" aria-label="顶部地图态势" onClick={() => onChange('map')}>实时地图</Button>
|
||||
<Button size="small" aria-label="顶部实时监控" onClick={() => onChange('realtime')}>实时监控</Button>
|
||||
|
||||
Reference in New Issue
Block a user