52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import { LayoutDashboard, BarChart3, FileText } from 'lucide-react';
|
|
import { AnimatePresence } from 'motion/react';
|
|
import MonitoringView from './MonitoringView';
|
|
import StatisticsView from './StatisticsView';
|
|
import DailyReportView from './DailyReportView';
|
|
import { useHashSubTab } from '../energy/useHashSubTab';
|
|
import RotatingFooterHint from '../../components/RotatingFooterHint';
|
|
import { FadeIn, PageFrame, SegmentedNav } from '../../components/ui/surface';
|
|
|
|
type MileageSubTab = 'monitoring' | 'statistics' | 'report';
|
|
|
|
const MILEAGE_TABS = [
|
|
{ id: 'monitoring', label: '实时监控', icon: LayoutDashboard },
|
|
{ id: 'statistics', label: '统计报表', icon: BarChart3 },
|
|
{ id: 'report', label: '每日汇报', icon: FileText },
|
|
] as const satisfies readonly { id: MileageSubTab; label: string; icon: typeof LayoutDashboard }[];
|
|
|
|
const MILEAGE_SUB_IDS: readonly MileageSubTab[] = ['monitoring', 'statistics', 'report'];
|
|
|
|
export default function MileageModule() {
|
|
const [activeSubTab, setActiveSubTab] = useHashSubTab<MileageSubTab>('mileage', MILEAGE_SUB_IDS);
|
|
|
|
return (
|
|
<PageFrame
|
|
title="车辆里程中心"
|
|
subtitle="统一监控车辆日里程、累计里程、考核进度与日报经营口径，突出异常车辆和任务压力。"
|
|
icon={LayoutDashboard}
|
|
eyebrow="MILEAGE BI"
|
|
meta="实时监控 · 统计报表 · 每日汇报"
|
|
compactInfo
|
|
hideHeader
|
|
>
|
|
<div className="sticky top-0 z-30 -mx-3 bg-[var(--app-bg)] px-3 pb-2 pt-1 shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)] md:-mx-6 md:top-12 md:px-6">
|
|
<SegmentedNav tabs={MILEAGE_TABS} active={activeSubTab} onChange={setActiveSubTab} />
|
|
</div>
|
|
|
|
<AnimatePresence mode="wait">
|
|
<FadeIn key={activeSubTab}>
|
|
{activeSubTab === 'monitoring' ? (
|
|
<MonitoringView />
|
|
) : activeSubTab === 'statistics' ? (
|
|
<StatisticsView />
|
|
) : (
|
|
<DailyReportView />
|
|
)}
|
|
</FadeIn>
|
|
</AnimatePresence>
|
|
<RotatingFooterHint />
|
|
</PageFrame>
|
|
);
|
|
}
|