504 lines
22 KiB
TypeScript
504 lines
22 KiB
TypeScript
import { Button, Input, Nav, Space, Tag, Toast } from '@douyinfe/semi-ui';
|
||
import {
|
||
IconActivity,
|
||
IconBarChartHStroked,
|
||
IconHistogram,
|
||
IconHome,
|
||
IconMapPin,
|
||
IconSearch,
|
||
IconServer,
|
||
IconSetting,
|
||
IconBell,
|
||
IconPulse
|
||
} from '@douyinfe/semi-icons';
|
||
import type { ReactNode } from 'react';
|
||
import { useState } from 'react';
|
||
import type { VehicleSourceConsistency, VehicleServiceStatus } from '../api/types';
|
||
import { isAMapConfigured } from '../config/appConfig';
|
||
|
||
export type PageKey = 'dashboard' | 'vehicles' | 'map' | 'realtime' | 'detail' | 'history' | 'history-query' | 'mileage' | 'time-monitor' | 'alert-events' | 'quality' | 'notification-rules' | 'ops-quality';
|
||
|
||
export type CustomerView = {
|
||
id: string;
|
||
label: string;
|
||
keyword: string;
|
||
protocol?: string;
|
||
dateFrom?: string;
|
||
dateTo?: string;
|
||
};
|
||
|
||
const navGroups = [
|
||
{
|
||
title: '车辆监控',
|
||
audience: '客户',
|
||
description: '地图看车、实时状态、异常优先',
|
||
items: [
|
||
{ itemKey: 'dashboard', text: '车辆总览', icon: <IconHome /> },
|
||
{ itemKey: 'map', text: '实时地图', icon: <IconMapPin /> },
|
||
{ itemKey: 'realtime', text: '实时监控', icon: <IconActivity /> }
|
||
]
|
||
},
|
||
{
|
||
title: '车辆服务',
|
||
audience: '客户',
|
||
description: '按 VIN、车牌、手机号管理车辆',
|
||
items: [
|
||
{ itemKey: 'vehicles', text: '车辆中心', icon: <IconServer /> },
|
||
{ itemKey: 'detail', text: '车辆档案', icon: <IconSetting /> }
|
||
]
|
||
},
|
||
{
|
||
title: '轨迹里程',
|
||
audience: '客户',
|
||
description: '回放轨迹、里程统计、导出数据',
|
||
items: [
|
||
{ itemKey: 'history', text: '轨迹回放', icon: <IconMapPin /> },
|
||
{ itemKey: 'mileage', text: '里程统计', icon: <IconBarChartHStroked /> },
|
||
{ itemKey: 'time-monitor', text: '时间窗监控', icon: <IconPulse /> },
|
||
{ itemKey: 'history-query', text: '数据导出', icon: <IconHistogram /> }
|
||
]
|
||
},
|
||
{
|
||
title: '告警通知',
|
||
audience: '客户',
|
||
description: '断链、离线、定位异常和通知升级',
|
||
items: [
|
||
{ itemKey: 'alert-events', text: '告警事件', icon: <IconHistogram /> },
|
||
{ itemKey: 'notification-rules', text: '通知闭环', icon: <IconBell /> }
|
||
]
|
||
},
|
||
{
|
||
title: '接入运维',
|
||
audience: '内部',
|
||
description: '客户主流程外查看链路质量',
|
||
items: [
|
||
{ itemKey: 'ops-quality', text: '运维质量', icon: <IconPulse /> }
|
||
]
|
||
}
|
||
];
|
||
const customerNavGroups = navGroups.filter((group) => group.audience !== '内部');
|
||
const internalNavGroups = navGroups.filter((group) => group.audience === '内部');
|
||
|
||
const customerPrimaryPath = [
|
||
{ label: '车辆地图', page: 'map' as const },
|
||
{ label: '轨迹回放', page: 'history' as const },
|
||
{ label: '里程统计', page: 'mileage' as const },
|
||
{ label: '时间窗监控', page: 'time-monitor' as const },
|
||
{ label: '数据导出', page: 'history-query' as const },
|
||
{ label: '告警通知', page: 'alert-events' as const }
|
||
];
|
||
|
||
const customerTaskPath = [
|
||
{ label: '地图看车', question: '车辆在哪里', page: 'map' as const },
|
||
{ label: '轨迹回放', question: '这段时间怎么跑', page: 'history' as const },
|
||
{ label: '里程统计', question: '里程怎么算', page: 'mileage' as const },
|
||
{ label: '时间窗监控', question: '这段时间发生什么', page: 'time-monitor' as const },
|
||
{ label: '数据导出', question: '证据怎么给客户', page: 'history-query' as const },
|
||
{ label: '告警通知', question: '异常谁处理', page: 'alert-events' as const }
|
||
];
|
||
|
||
function linkHealthClassName(count: number | null) {
|
||
if (count == null) {
|
||
return '';
|
||
}
|
||
return count > 0 ? 'vp-link-health-button-warning' : 'vp-link-health-button-ok';
|
||
}
|
||
|
||
function alertButtonLabel(linkIssueCount: number | null, activeRuleCount?: number | null, p0RuleCount?: number | null) {
|
||
const activeCount = Number.isFinite(Number(activeRuleCount)) ? Number(activeRuleCount) : 0;
|
||
const p0Count = Number.isFinite(Number(p0RuleCount)) ? Number(p0RuleCount) : 0;
|
||
if (p0Count > 0) {
|
||
return `告警事件 P0 ${p0Count.toLocaleString()} / 活跃 ${activeCount.toLocaleString()}`;
|
||
}
|
||
if (activeCount > 0) {
|
||
return `告警事件 ${activeCount.toLocaleString()}类规则`;
|
||
}
|
||
if (linkIssueCount == null) {
|
||
return '告警事件';
|
||
}
|
||
return linkIssueCount > 0 ? `告警事件 ${linkIssueCount}项关注` : '告警事件正常';
|
||
}
|
||
|
||
function alertButtonClassName(linkIssueCount: number | null, activeRuleCount?: number | null, p0RuleCount?: number | null) {
|
||
const activeCount = Number.isFinite(Number(activeRuleCount)) ? Number(activeRuleCount) : 0;
|
||
const p0Count = Number.isFinite(Number(p0RuleCount)) ? Number(p0RuleCount) : 0;
|
||
if (p0Count > 0 || activeCount > 0 || (linkIssueCount ?? 0) > 0) {
|
||
return 'vp-link-health-button-warning';
|
||
}
|
||
return linkHealthClassName(linkIssueCount);
|
||
}
|
||
|
||
function customerStatusTitle(title?: string) {
|
||
if (!title) {
|
||
return '';
|
||
}
|
||
return title === '来源不完整' ? '数据通道不完整' : title;
|
||
}
|
||
|
||
function dateText(offsetDays = 0) {
|
||
const date = new Date();
|
||
date.setHours(0, 0, 0, 0);
|
||
date.setDate(date.getDate() + offsetDays);
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
|
||
export function AppShell({
|
||
activePage,
|
||
linkIssueCount,
|
||
activeAlertRuleCount,
|
||
p0AlertRuleCount,
|
||
platformRelease,
|
||
currentVehicleStatus,
|
||
currentVehicleLabel,
|
||
currentVehicleConsistency,
|
||
customerTimeWindow,
|
||
customerViews,
|
||
onCustomerTimeWindowChange,
|
||
onSaveCustomerView,
|
||
onOpenCustomerView,
|
||
onCopyCustomerScope,
|
||
onChange,
|
||
onCustomerTask,
|
||
onVehicleSearch,
|
||
children
|
||
}: {
|
||
activePage: PageKey;
|
||
linkIssueCount: number | null;
|
||
activeAlertRuleCount?: number | null;
|
||
p0AlertRuleCount?: number | null;
|
||
platformRelease?: string;
|
||
currentVehicleStatus?: VehicleServiceStatus;
|
||
currentVehicleLabel?: string;
|
||
currentVehicleConsistency?: VehicleSourceConsistency;
|
||
customerTimeWindow?: Record<string, string>;
|
||
customerViews?: CustomerView[];
|
||
onCustomerTimeWindowChange?: (filters: Record<string, string>) => void;
|
||
onSaveCustomerView?: () => void;
|
||
onOpenCustomerView?: (view: CustomerView) => void;
|
||
onCopyCustomerScope?: () => void;
|
||
onChange: (page: PageKey) => void;
|
||
onCustomerTask?: (page: PageKey) => void;
|
||
onVehicleSearch: (keyword: string) => void | Promise<void>;
|
||
children: ReactNode;
|
||
}) {
|
||
const [keyword, setKeyword] = useState('');
|
||
const [searching, setSearching] = useState(false);
|
||
const [internalEvidenceExpanded, setInternalEvidenceExpanded] = useState(false);
|
||
const amapConfigured = isAMapConfigured();
|
||
const alertLabel = alertButtonLabel(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount);
|
||
const alertClassName = alertButtonClassName(linkIssueCount, activeAlertRuleCount, p0AlertRuleCount);
|
||
const selectedPage = activePage === 'quality' ? 'alert-events' : activePage;
|
||
const dateFrom = customerTimeWindow?.dateFrom ?? '';
|
||
const dateTo = customerTimeWindow?.dateTo ?? '';
|
||
const savedViews = customerViews ?? [];
|
||
const serviceObjectText = currentVehicleLabel ? `车辆：${currentVehicleLabel}` : '未选择车辆';
|
||
const serviceTimeText = dateFrom || dateTo ? `${dateFrom || '未指定'} 至 ${dateTo || '未指定'}` : '实时范围';
|
||
|
||
const applyTimeWindowPreset = (days: number) => {
|
||
onCustomerTimeWindowChange?.({
|
||
dateFrom: dateText(-(days - 1)),
|
||
dateTo: dateText()
|
||
});
|
||
};
|
||
|
||
const search = () => {
|
||
const value = keyword.trim();
|
||
if (!value) {
|
||
Toast.warning('请输入 VIN / 车牌 / 手机号');
|
||
return;
|
||
}
|
||
setSearching(true);
|
||
Promise.resolve(onVehicleSearch(value)).finally(() => setSearching(false));
|
||
};
|
||
|
||
const quickActions = [
|
||
{ label: '地图', ariaLabel: '顶部地图态势', page: 'map' as const },
|
||
{ label: '监控', ariaLabel: '顶部实时监控', page: 'realtime' as const },
|
||
{ label: '轨迹', ariaLabel: '顶部轨迹回放', page: 'history' as const },
|
||
{ label: '里程', ariaLabel: '顶部里程统计', page: 'mileage' as const },
|
||
{ label: '时间窗', ariaLabel: '顶部时间窗监控', page: 'time-monitor' as const },
|
||
{ label: '导出', ariaLabel: '顶部数据导出', page: 'history-query' as const },
|
||
{ label: '告警', ariaLabel: '顶部告警事件', page: 'alert-events' as const }
|
||
];
|
||
const deliveryActions = quickActions.filter((item) => item.page !== 'realtime');
|
||
|
||
return (
|
||
<div className="vp-app">
|
||
<div className="vp-shell" data-testid="vehicle-platform-shell" data-mobile-layout="content-first">
|
||
<aside className="vp-sidebar">
|
||
<div className="vp-brand">
|
||
<span className="vp-brand-mark" />
|
||
<span className="vp-brand-copy">
|
||
<span>车辆服务中台</span>
|
||
<span>实时地图 / 轨迹里程 / 告警通知</span>
|
||
</span>
|
||
</div>
|
||
<div className="vp-customer-primary-path" aria-label="客户主线">
|
||
<div className="vp-customer-primary-path-head">
|
||
<strong>客户主线</strong>
|
||
<span>先看车，再查时间窗，最后导出和通知。</span>
|
||
</div>
|
||
<div className="vp-customer-primary-path-actions">
|
||
{customerPrimaryPath.map((item) => (
|
||
<button
|
||
key={item.page}
|
||
type="button"
|
||
className={selectedPage === item.page ? 'vp-customer-primary-path-action vp-customer-primary-path-action-active' : 'vp-customer-primary-path-action'}
|
||
onClick={() => onChange(item.page)}
|
||
aria-label={`客户主线 ${item.label}`}
|
||
>
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="vp-customer-task-dispatch" aria-label="客户任务分发台">
|
||
<div className="vp-customer-task-dispatch-head">
|
||
<strong>客户任务分发台</strong>
|
||
<span>输入 VIN / 车牌 / 手机号后，地图、轨迹、里程、导出和告警都围绕同一辆车服务。</span>
|
||
</div>
|
||
<div className="vp-customer-task-dispatch-actions">
|
||
{customerTaskPath.map((item) => (
|
||
<button
|
||
key={item.page}
|
||
type="button"
|
||
className={selectedPage === item.page ? 'vp-customer-task-dispatch-action vp-customer-task-dispatch-action-active' : 'vp-customer-task-dispatch-action'}
|
||
onClick={() => (onCustomerTask ?? onChange)(item.page)}
|
||
aria-label={`客户任务 ${item.label} ${item.question}`}
|
||
>
|
||
<strong>{item.label}</strong>
|
||
<span>{item.question}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="vp-nav-groups">
|
||
{customerNavGroups.map((group) => (
|
||
<div key={group.title} className="vp-nav-group">
|
||
<div className="vp-nav-section-title">
|
||
<span className="vp-nav-section-title-main">
|
||
<span>{group.title}</span>
|
||
<Tag size="small" color={group.audience === '内部' ? 'grey' : 'blue'}>{group.audience}</Tag>
|
||
</span>
|
||
<small>{group.description}</small>
|
||
</div>
|
||
<Nav
|
||
selectedKeys={[selectedPage]}
|
||
items={group.items}
|
||
onSelect={({ itemKey }) => onChange(itemKey as PageKey)}
|
||
style={{ maxWidth: '100%' }}
|
||
/>
|
||
</div>
|
||
))}
|
||
<div className="vp-internal-evidence-zone" aria-label="内部证据区">
|
||
<div className="vp-internal-evidence-zone-head">
|
||
<div>
|
||
<strong>内部证据区</strong>
|
||
<span>运维证据只在客户问题需要解释时展开，不作为客户默认入口。</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
aria-label={internalEvidenceExpanded ? '收起内部证据区' : '展开内部证据区'}
|
||
onClick={() => setInternalEvidenceExpanded((value) => !value)}
|
||
>
|
||
{internalEvidenceExpanded ? '收起' : '展开'}
|
||
</button>
|
||
</div>
|
||
<div className={internalEvidenceExpanded ? 'vp-internal-evidence-zone-body vp-internal-evidence-zone-body-open' : 'vp-internal-evidence-zone-body'}>
|
||
{internalNavGroups.map((group) => (
|
||
<div key={group.title} className="vp-nav-group vp-nav-group-internal">
|
||
<div className="vp-nav-section-title">
|
||
<span className="vp-nav-section-title-main">
|
||
<span>{group.title}</span>
|
||
<Tag size="small" color="grey">{group.audience}</Tag>
|
||
</span>
|
||
<small>{group.description}</small>
|
||
</div>
|
||
<div className="vp-internal-evidence-actions">
|
||
{group.items.map((item) => (
|
||
<button
|
||
key={item.itemKey}
|
||
type="button"
|
||
className={selectedPage === item.itemKey ? 'vp-internal-evidence-action vp-internal-evidence-action-active' : 'vp-internal-evidence-action'}
|
||
aria-label={`内部证据区 ${item.text}`}
|
||
onClick={() => onChange(item.itemKey as PageKey)}
|
||
>
|
||
<span>{item.icon}</span>
|
||
<strong>{item.text}</strong>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<main className="vp-main">
|
||
<header className="vp-topbar">
|
||
<Space spacing={12} className="vp-topbar-search">
|
||
<Input
|
||
prefix={<IconSearch />}
|
||
placeholder="搜索 VIN / 车牌 / 手机号"
|
||
value={keyword}
|
||
onChange={setKeyword}
|
||
onEnterPress={search}
|
||
style={{ width: 280 }}
|
||
/>
|
||
<Button theme="solid" type="primary" loading={searching} onClick={search}>查询车辆</Button>
|
||
</Space>
|
||
<nav className="vp-mobile-service-dock" aria-label="移动端车辆服务快捷入口">
|
||
{deliveryActions.map((item) => (
|
||
<button
|
||
key={item.page}
|
||
type="button"
|
||
aria-label={`移动端车辆服务快捷入口 ${item.label}`}
|
||
onClick={() => (onCustomerTask ?? onChange)(item.page)}
|
||
>
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
<div className="vp-topbar-context">
|
||
<div className="vp-service-delivery-strip" aria-label="车辆服务交付条">
|
||
<div className="vp-service-delivery-strip-head">
|
||
<strong>车辆服务交付条</strong>
|
||
<span>围绕一辆车或一个车队完成监控、复盘、统计、导出和通知。</span>
|
||
</div>
|
||
<div className="vp-service-delivery-strip-fact">
|
||
<span>服务对象</span>
|
||
<strong>{serviceObjectText}</strong>
|
||
</div>
|
||
<div className="vp-service-delivery-strip-fact">
|
||
<span>服务时间</span>
|
||
<strong>{serviceTimeText}</strong>
|
||
</div>
|
||
<div className="vp-service-delivery-strip-actions">
|
||
<span>服务动作</span>
|
||
<div>
|
||
{deliveryActions.map((item) => (
|
||
<button
|
||
key={item.page}
|
||
type="button"
|
||
aria-label={`车辆服务交付条 ${item.label}`}
|
||
onClick={() => (onCustomerTask ?? onChange)(item.page)}
|
||
>
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="vp-topbar-time-window" aria-label="客户时间窗">
|
||
<div className="vp-topbar-time-window-copy">
|
||
<strong>客户时间窗</strong>
|
||
<span>同步约束地图、轨迹、里程、导出和告警</span>
|
||
</div>
|
||
<label htmlFor="vp-customer-time-window-start">
|
||
<span>开始日期</span>
|
||
<input
|
||
id="vp-customer-time-window-start"
|
||
aria-label="客户时间窗开始日期"
|
||
type="text"
|
||
inputMode="numeric"
|
||
pattern="\d{4}-\d{2}-\d{2}"
|
||
placeholder="YYYY-MM-DD"
|
||
maxLength={10}
|
||
value={dateFrom}
|
||
onChange={(event) => onCustomerTimeWindowChange?.({ dateFrom: event.currentTarget.value, dateTo })}
|
||
/>
|
||
</label>
|
||
<label className="vp-sr-only" htmlFor="vp-customer-time-window-start">顶部时间窗开始</label>
|
||
<label htmlFor="vp-customer-time-window-end">
|
||
<span>结束日期</span>
|
||
<input
|
||
id="vp-customer-time-window-end"
|
||
aria-label="客户时间窗结束日期"
|
||
type="text"
|
||
inputMode="numeric"
|
||
pattern="\d{4}-\d{2}-\d{2}"
|
||
placeholder="YYYY-MM-DD"
|
||
maxLength={10}
|
||
value={dateTo}
|
||
onChange={(event) => onCustomerTimeWindowChange?.({ dateFrom, dateTo: event.currentTarget.value })}
|
||
/>
|
||
</label>
|
||
<label className="vp-sr-only" htmlFor="vp-customer-time-window-end">顶部时间窗结束</label>
|
||
<div className="vp-topbar-time-window-presets">
|
||
<button type="button" aria-label="顶部时间窗 今天" onClick={() => applyTimeWindowPreset(1)}>今天</button>
|
||
<button type="button" aria-label="顶部时间窗 近7天" onClick={() => applyTimeWindowPreset(7)}>近7天</button>
|
||
<button type="button" aria-label="顶部时间窗 近30天" onClick={() => applyTimeWindowPreset(30)}>近30天</button>
|
||
<button type="button" aria-label="顶部时间窗 清空" onClick={() => onCustomerTimeWindowChange?.({})}>清空</button>
|
||
</div>
|
||
</div>
|
||
{currentVehicleLabel ? <Tag color="grey">{currentVehicleLabel}</Tag> : null}
|
||
{currentVehicleStatus ? (
|
||
<Tag color={currentVehicleStatus.severity === 'ok' ? 'green' : currentVehicleStatus.severity === 'error' ? 'red' : 'orange'}>
|
||
当前车辆：{customerStatusTitle(currentVehicleStatus.title)}
|
||
</Tag>
|
||
) : null}
|
||
{currentVehicleConsistency ? (
|
||
<Tag color={currentVehicleConsistency.severity === 'ok' ? 'green' : currentVehicleConsistency.severity === 'error' ? 'red' : 'orange'}>
|
||
一致性：{customerStatusTitle(currentVehicleConsistency.title) || `${currentVehicleConsistency.onlineSourceCount}/${currentVehicleConsistency.sourceCount} 数据通道`}
|
||
</Tag>
|
||
) : null}
|
||
<Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图就绪' : '高德地图待配置'}</Tag>
|
||
<div className="vp-topbar-quick-actions" aria-label="车辆服务快捷入口">
|
||
{quickActions.map((item) => (
|
||
<Button key={item.page} size="small" aria-label={item.ariaLabel} onClick={() => (onCustomerTask ?? onChange)(item.page)}>
|
||
{item.label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
<Button
|
||
size="small"
|
||
aria-label="顶部复制客户服务范围"
|
||
onClick={onCopyCustomerScope}
|
||
>
|
||
复制范围
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
aria-label="顶部保存客户视图"
|
||
onClick={onSaveCustomerView}
|
||
>
|
||
保存视图
|
||
</Button>
|
||
{savedViews.length > 0 ? (
|
||
<div className="vp-topbar-saved-views" aria-label="客户视图">
|
||
{savedViews.slice(0, 3).map((view) => {
|
||
const rangeText = view.dateFrom || view.dateTo ? `${view.dateFrom || '未指定'} 至 ${view.dateTo || '未指定'}` : '实时范围';
|
||
return (
|
||
<button
|
||
key={view.id}
|
||
type="button"
|
||
aria-label={`客户视图 ${view.label} ${rangeText}`}
|
||
onClick={() => onOpenCustomerView?.(view)}
|
||
>
|
||
{view.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
) : null}
|
||
<Button
|
||
size="small"
|
||
aria-label={`顶部${alertLabel}`}
|
||
className={alertClassName}
|
||
onClick={() => (onCustomerTask ?? onChange)('alert-events')}
|
||
>
|
||
{alertLabel}
|
||
</Button>
|
||
{platformRelease ? <span className="vp-topbar-release">版本 {platformRelease}</span> : null}
|
||
</div>
|
||
</header>
|
||
{children}
|
||
</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|