feat: simplify login and unify monitor summary
This commit is contained in:
lingniu
@@ -118,15 +118,19 @@ test('starts without a selection and supports expand, collapse, reselection, and
|
||||
|
||||
expect(firstVehicle).toHaveClass('semi-button', 'v2-vehicle-row');
|
||||
expect(view.container.querySelector('.v2-filterbar')).toHaveClass('semi-card');
|
||||
const kpis = view.container.querySelector('.v2-kpis');
|
||||
expect(kpis).toHaveClass('semi-card');
|
||||
expect(Array.from(kpis?.querySelectorAll('.v2-kpi small') ?? []).map((item) => item.textContent)).toEqual([
|
||||
'车辆总数', '当前在线', '当前离线', '行驶车辆', '静止车辆', '告警车辆', '今日上报', '无实时位置'
|
||||
const kpis = screen.getByRole('list', { name: '车辆整体统计' });
|
||||
expect(kpis.closest('.v2-monitor-summary-rail')).toHaveClass('semi-card', 'v2-workspace-metric-rail', 'is-queue');
|
||||
expect(Array.from(kpis.querySelectorAll(':scope > [role="listitem"] > small')).map((item) => item.textContent)).toEqual([
|
||||
'车辆总数', '当前在线', '行驶车辆', '当前离线', '静止车辆', '告警车辆'
|
||||
]);
|
||||
expect(kpis?.querySelector('.v2-kpi.is-fleet')).toHaveClass('is-primary');
|
||||
expect(kpis?.querySelector('.v2-kpi.is-online')).toHaveClass('is-primary');
|
||||
expect(kpis?.querySelector('.v2-kpi.is-today')).toHaveClass('is-support');
|
||||
expect(kpis?.querySelector('.v2-kpi:last-child')).toHaveClass('is-missing', 'is-support');
|
||||
expect(kpis.querySelectorAll(':scope > [role="listitem"]')).toHaveLength(6);
|
||||
expect(kpis.querySelector(':scope > [role="listitem"]:nth-child(1)')).toHaveClass('is-primary');
|
||||
expect(kpis.querySelector(':scope > [role="listitem"]:nth-child(2)')).toHaveClass('is-primary', 'is-success');
|
||||
expect(kpis.querySelector(':scope > [role="listitem"]:nth-child(4)')).toHaveClass('is-secondary');
|
||||
const summarySupport = view.container.querySelector('.v2-monitor-summary-support');
|
||||
expect(summarySupport).toHaveTextContent('今日上报10条数据活跃度');
|
||||
expect(summarySupport).toHaveTextContent('无实时位置0辆辅助排查');
|
||||
expect(view.container.querySelector('.v2-kpis')).not.toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-event-strip')).toHaveClass('semi-card');
|
||||
expect(view.container.querySelector('.v2-monitor-live-tag')).toHaveClass('semi-tag');
|
||||
const liveStatus = screen.getByLabelText('实时数据状态');
|
||||
|
||||
@@ -13,6 +13,7 @@ import { EmptyState, InlineError } from '../shared/AsyncState';
|
||||
import { SegmentedTabs } from '../shared/SegmentedTabs';
|
||||
import { TablePagination } from '../shared/TablePagination';
|
||||
import { ProtocolTag } from '../shared/ProtocolTag';
|
||||
import { WorkspaceMetricRail, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';
|
||||
import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
|
||||
import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
|
||||
import { formatNumber, statusLabel, vehicleStatus } from '../domain/monitor';
|
||||
@@ -340,6 +341,56 @@ export default function MonitorPage() {
|
||||
const driving = rows.filter((vehicle) => vehicleStatus(vehicle) === 'driving').length;
|
||||
const idle = rows.filter((vehicle) => vehicleStatus(vehicle) === 'idle').length;
|
||||
const offline = rows.filter((vehicle) => vehicleStatus(vehicle) === 'offline').length;
|
||||
const totalVehicleCount = summary.data?.totalVehicles ?? vehicles.data?.total ?? rows.length;
|
||||
const onlineVehicleCount = summary.data?.onlineVehicles ?? rows.length - offline;
|
||||
const offlineVehicleCount = summary.data?.offlineVehicles ?? offline;
|
||||
const drivingVehicleCount = summary.data?.drivingVehicles ?? driving;
|
||||
const idleVehicleCount = summary.data?.idleVehicles ?? idle;
|
||||
const alertVehicleCount = summary.data?.alertDataAvailable ? summary.data.alertVehicles : undefined;
|
||||
const monitorMetrics: WorkspaceQueueMetricRailItem[] = [
|
||||
{
|
||||
label: '车辆总数',
|
||||
value: <>{formatNumber(totalVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
|
||||
note: '授权车辆',
|
||||
tone: 'primary',
|
||||
emphasis: 'primary'
|
||||
},
|
||||
{
|
||||
label: '当前在线',
|
||||
value: <>{formatNumber(onlineVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
|
||||
note: '当前可用',
|
||||
tone: 'success',
|
||||
emphasis: 'primary'
|
||||
},
|
||||
{
|
||||
label: '行驶车辆',
|
||||
value: <>{formatNumber(drivingVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
|
||||
note: '实时行驶',
|
||||
tone: 'primary',
|
||||
emphasis: 'primary'
|
||||
},
|
||||
{
|
||||
label: '当前离线',
|
||||
value: <>{formatNumber(offlineVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
|
||||
note: '无在线来源',
|
||||
tone: 'neutral',
|
||||
emphasis: 'secondary'
|
||||
},
|
||||
{
|
||||
label: '静止车辆',
|
||||
value: <>{formatNumber(idleVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
|
||||
note: '在线静止',
|
||||
tone: 'success',
|
||||
emphasis: 'secondary'
|
||||
},
|
||||
{
|
||||
label: '告警车辆',
|
||||
value: <>{alertVehicleCount == null ? '—' : formatNumber(alertVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
|
||||
note: alertVehicleCount == null ? '数据未开放' : '需要关注',
|
||||
tone: alertVehicleCount ? 'danger' : 'neutral',
|
||||
emphasis: 'primary'
|
||||
}
|
||||
];
|
||||
const viewportLoad = mode === 'map'
|
||||
? (map.data?.clusters.length
|
||||
? `${map.data.clusters.length} 个聚合 · ${map.data.points.length} 个车辆点`
|
||||
@@ -409,18 +460,16 @@ export default function MonitorPage() {
|
||||
</Card>
|
||||
{batchSearchOpen ? <BatchVehicleSearchDialog initialValue={searchTerms.join('\n')} mobile={mobileLayout} onClose={() => setBatchSearchOpen(false)} onApply={(value) => { setKeyword(value); setListOffset(0); setBatchSearchOpen(false); }} /> : null}
|
||||
|
||||
<Card className="v2-kpis" bodyStyle={{ padding: 0 }} aria-label="车辆整体统计">
|
||||
{[
|
||||
{ label: '车辆总数', value: formatNumber(summary.data?.totalVehicles ?? vehicles.data?.total ?? rows.length), tone: 'fleet', priority: 'primary', unit: '辆' },
|
||||
{ label: '当前在线', value: formatNumber(summary.data?.onlineVehicles ?? rows.length - offline), tone: 'online', priority: 'primary', unit: '辆' },
|
||||
{ label: '当前离线', value: formatNumber(summary.data?.offlineVehicles ?? offline), tone: 'offline', priority: 'standard', unit: '辆' },
|
||||
{ label: '行驶车辆', value: formatNumber(summary.data?.drivingVehicles ?? driving), tone: 'driving', priority: 'standard', unit: '辆' },
|
||||
{ label: '静止车辆', value: formatNumber(summary.data?.idleVehicles ?? idle), tone: 'idle', priority: 'standard', unit: '辆' },
|
||||
{ label: '告警车辆', value: summary.data?.alertDataAvailable ? formatNumber(summary.data.alertVehicles) : '—', tone: 'alert', priority: 'standard', unit: '辆' },
|
||||
{ label: '今日上报', value: formatNumber(summary.data?.frameToday ?? 0), tone: 'today', priority: 'support', unit: '条' },
|
||||
{ label: '无实时位置', value: formatNumber(summary.data?.noLocationVehicles ?? 0), tone: 'missing', priority: 'support', unit: '辆' }
|
||||
].map(({ label, value, tone, priority, unit }) => <div key={label} className={`v2-kpi is-${tone} is-${priority}`}><small>{label}</small><strong>{value}<em>{unit}</em></strong></div>)}
|
||||
</Card>
|
||||
<WorkspaceMetricRail
|
||||
variant="queue"
|
||||
ariaLabel="车辆整体统计"
|
||||
className="v2-monitor-summary-rail"
|
||||
items={monitorMetrics}
|
||||
context={<div className="v2-monitor-summary-support">
|
||||
<span><small>今日上报</small><strong>{formatNumber(summary.data?.frameToday ?? 0)}<i>条</i></strong><em>数据活跃度</em></span>
|
||||
<span><small>无实时位置</small><strong>{formatNumber(summary.data?.noLocationVehicles ?? 0)}<i>辆</i></strong><em>辅助排查</em></span>
|
||||
</div>}
|
||||
/>
|
||||
|
||||
{vehicles.isError ? <InlineError message={vehicles.error instanceof Error ? vehicles.error.message : '车辆数据加载失败'} onRetry={() => vehicles.refetch()} /> : null}
|
||||
{mode === 'list' && realtimeListQuery.isError ? <InlineError message={realtimeListQuery.error instanceof Error ? realtimeListQuery.error.message : '车辆列表加载失败'} onRetry={() => realtimeListQuery.refetch()} /> : null}
|
||||
|
||||
Reference in New Issue
Block a user