1688 lines
83 KiB
TypeScript
1688 lines
83 KiB
TypeScript
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||
import { motion, AnimatePresence } from 'motion/react';
|
||
import {
|
||
Truck, Filter, ChevronDown,
|
||
Maximize2, Minimize2, RotateCcw,
|
||
ArrowUp, ArrowDown, ChevronsUp, Download, Check, CalendarDays,
|
||
RefreshCw, ArrowLeftRight, Power,
|
||
} from 'lucide-react';
|
||
import { BarChart, Bar, ResponsiveContainer, Tooltip, ReferenceLine, XAxis } from 'recharts';
|
||
import type {
|
||
MileageSourceGroup,
|
||
MonitoringVehicle,
|
||
MonitoringStats,
|
||
MonitoringFilters,
|
||
} from './types';
|
||
import { fetchMonitoring } from './api';
|
||
import Blur from '../../components/Blur';
|
||
import PlateMultiSelect from './PlateMultiSelect';
|
||
import { exportMileageXlsx } from './xlsx-export';
|
||
import VehicleDetailModal from './VehicleDetailModal';
|
||
import {
|
||
buildMileageDrillUrl,
|
||
parseMileageDrillContext,
|
||
type MileageDrillContext,
|
||
} from './drill-context';
|
||
import { formatMileageSnapshotTime } from './data-freshness';
|
||
|
||
const HIGH_MILEAGE_ALERT_TARGETS = new Set([
|
||
'交投40辆4.5T普货',
|
||
'交投190辆4.5T冷链车',
|
||
]);
|
||
const HIGH_MILEAGE_ALERT_KM = 800;
|
||
const ALL_MILEAGE_SOURCE_GROUPS: MileageSourceGroup[] = ['instrument', 'gps'];
|
||
|
||
const MILEAGE_SOURCE_META = {
|
||
instrument: { label: '仪表数据', protocol: null },
|
||
gps: { label: 'GPS数据', protocol: 'JT808' },
|
||
} as const;
|
||
|
||
function vehicleSourceDisplay(vehicle: MonitoringVehicle): {
|
||
label: string;
|
||
title: string;
|
||
className: string;
|
||
} {
|
||
if (vehicle.sourceCategory === 'INSTRUMENT') {
|
||
return {
|
||
label: '仪表数据',
|
||
title: vehicle.sourceProtocol || 'GB32960 / MQTT',
|
||
className: 'bg-violet-50 text-violet-600',
|
||
};
|
||
}
|
||
if (vehicle.sourceCategory === 'GPS') {
|
||
return {
|
||
label: 'GPS数据',
|
||
title: vehicle.sourceProtocol || 'JT808',
|
||
className: 'bg-emerald-50 text-emerald-600',
|
||
};
|
||
}
|
||
if (vehicle.sourceCategory === 'MIXED') {
|
||
return {
|
||
label: '仪表+GPS',
|
||
title: '所选区间内包含仪表数据和 GPS 数据',
|
||
className: 'bg-blue-50 text-blue-600',
|
||
};
|
||
}
|
||
return {
|
||
label: vehicle.isDataSynced ? '来源待接口' : '无数据',
|
||
title: vehicle.isDataSynced
|
||
? 'OneOS 当前响应未返回 sourceProtocol'
|
||
: '所选来源没有有效数据',
|
||
className: vehicle.isDataSynced
|
||
? 'bg-amber-50 text-amber-600'
|
||
: 'bg-slate-100 text-slate-400',
|
||
};
|
||
}
|
||
|
||
function SourcePriorityControl({
|
||
priority,
|
||
onChange,
|
||
}: {
|
||
priority: MileageSourceGroup[];
|
||
onChange: (next: MileageSourceGroup[]) => void;
|
||
}) {
|
||
const ordered = [
|
||
...priority,
|
||
...ALL_MILEAGE_SOURCE_GROUPS.filter(group => !priority.includes(group)),
|
||
];
|
||
const toggle = (group: MileageSourceGroup) => {
|
||
if (priority.includes(group)) {
|
||
if (priority.length === 1) return;
|
||
onChange(priority.filter(item => item !== group));
|
||
return;
|
||
}
|
||
onChange([...priority, group]);
|
||
};
|
||
const swap = () => {
|
||
if (priority.length === 2) onChange([priority[1], priority[0]]);
|
||
};
|
||
|
||
return (
|
||
<div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar">
|
||
<span className="shrink-0 text-[9px] font-black text-slate-400">数据来源</span>
|
||
{ordered.map(group => {
|
||
const enabledIndex = priority.indexOf(group);
|
||
const enabled = enabledIndex >= 0;
|
||
const meta = MILEAGE_SOURCE_META[group];
|
||
return (
|
||
<button
|
||
key={group}
|
||
type="button"
|
||
onClick={() => toggle(group)}
|
||
className={`flex shrink-0 items-center gap-1.5 rounded-lg border px-2 py-1 transition-all ${
|
||
enabled
|
||
? 'border-blue-100 bg-blue-50 text-blue-700'
|
||
: 'border-slate-100 bg-slate-50 text-slate-400'
|
||
}`}
|
||
title={enabled && priority.length === 1 ? '至少保留一种数据来源' : enabled ? '点击停用' : '点击启用'}
|
||
>
|
||
<span className={`flex h-4 w-4 items-center justify-center rounded text-[8px] font-black ${
|
||
enabled ? 'bg-blue-600 text-white' : 'bg-slate-200 text-slate-500'
|
||
}`}>
|
||
{enabled ? enabledIndex + 1 : <Power size={9} />}
|
||
</span>
|
||
<span className="text-left leading-tight">
|
||
<span className="block text-[9px] font-black">{meta.label}</span>
|
||
<span className="block min-h-[9px] text-[7px] font-bold opacity-60">
|
||
{enabled ? meta.protocol : '已停用'}
|
||
</span>
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
<button
|
||
type="button"
|
||
onClick={swap}
|
||
disabled={priority.length !== 2}
|
||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-slate-100 bg-white text-slate-400 transition-all hover:border-blue-100 hover:text-blue-600 disabled:cursor-not-allowed disabled:opacity-30"
|
||
title="切换数据来源优先级"
|
||
>
|
||
<ArrowLeftRight size={12} />
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function defaultMileageDate(): string {
|
||
const now = new Date();
|
||
if (now.getHours() < 5) now.setDate(now.getDate() - 1);
|
||
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
|
||
}
|
||
|
||
function parseOneOsTime(value: string | null | undefined): number | null {
|
||
if (!value) return null;
|
||
let normalized = value.trim().replace(' ', 'T');
|
||
if (!/(?:Z|[+-]\d{2}:?\d{2})$/i.test(normalized)) normalized += '+08:00';
|
||
const timestamp = Date.parse(normalized);
|
||
return Number.isFinite(timestamp) ? timestamp : null;
|
||
}
|
||
|
||
function formatAbsoluteTime(value: string | null | undefined): string | null {
|
||
const timestamp = parseOneOsTime(value);
|
||
if (timestamp === null) return null;
|
||
return new Intl.DateTimeFormat('zh-CN', {
|
||
timeZone: 'Asia/Shanghai',
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit',
|
||
hour12: false,
|
||
}).format(new Date(timestamp));
|
||
}
|
||
|
||
function vehicleStatisticTime(vehicle: MonitoringVehicle, nowMs: number): {
|
||
label: string;
|
||
title: string;
|
||
color: string;
|
||
} {
|
||
const primaryTime = vehicle.dataTime || vehicle.updatedAt || vehicle.calculatedAt;
|
||
const timestamp = parseOneOsTime(primaryTime);
|
||
if (timestamp === null) {
|
||
return {
|
||
label: vehicle.isDataSynced ? '统计时间待接口' : '无有效数据时间',
|
||
title: 'OneOS 当前未返回车辆级数据时间',
|
||
color: vehicle.isDataSynced ? 'text-amber-500' : 'text-slate-500',
|
||
};
|
||
}
|
||
|
||
const deltaSeconds = Math.floor((nowMs - timestamp) / 1000);
|
||
let label: string;
|
||
if (deltaSeconds < -60) label = '时间异常';
|
||
else if (deltaSeconds < 5) label = '刚刚';
|
||
else if (deltaSeconds < 60) label = `${deltaSeconds}秒前`;
|
||
else if (deltaSeconds < 3600) label = `${Math.floor(deltaSeconds / 60)}分钟前`;
|
||
else if (deltaSeconds < 86400) label = `${Math.floor(deltaSeconds / 3600)}小时前`;
|
||
else label = `${Math.floor(deltaSeconds / 86400)}天前`;
|
||
|
||
const absoluteDataTime = formatAbsoluteTime(vehicle.dataTime);
|
||
const absoluteCalculatedAt = formatAbsoluteTime(vehicle.calculatedAt);
|
||
const absoluteUpdatedAt = formatAbsoluteTime(vehicle.updatedAt);
|
||
const title = [
|
||
absoluteDataTime ? `数据时间：${absoluteDataTime}` : null,
|
||
absoluteCalculatedAt ? `计算时间：${absoluteCalculatedAt}` : null,
|
||
absoluteUpdatedAt ? `更新时间：${absoluteUpdatedAt}` : null,
|
||
].filter(Boolean).join('\n');
|
||
const ageSeconds = Math.max(0, deltaSeconds);
|
||
const color = ageSeconds <= 300
|
||
? 'text-emerald-500'
|
||
: ageSeconds <= 3600
|
||
? 'text-blue-500'
|
||
: ageSeconds <= 86400
|
||
? 'text-amber-500'
|
||
: 'text-rose-500';
|
||
return { label, title, color };
|
||
}
|
||
|
||
function normalizeRangeLabel(start: string, end: string): string {
|
||
if (!start && !end) return '最新数据';
|
||
if (start && end && start === end) return start;
|
||
return `${start || end} 至 ${end || start}`;
|
||
}
|
||
|
||
function fmtDate(date: Date): string {
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||
}
|
||
|
||
type RangePreset = 'today' | 'yesterday' | 'thisWeek' | 'thisMonth' | 'last7' | 'last15';
|
||
|
||
function getRangePreset(preset: RangePreset): { start: string; end: string } {
|
||
const end = new Date(`${defaultMileageDate()}T00:00:00`);
|
||
const start = new Date(end);
|
||
if (preset === 'yesterday') {
|
||
start.setDate(start.getDate() - 1);
|
||
end.setDate(end.getDate() - 1);
|
||
} else if (preset === 'thisWeek') {
|
||
const day = start.getDay() || 7;
|
||
start.setDate(start.getDate() - day + 1);
|
||
} else if (preset === 'thisMonth') {
|
||
start.setDate(1);
|
||
} else if (preset === 'last7') {
|
||
start.setDate(start.getDate() - 6);
|
||
} else if (preset === 'last15') {
|
||
start.setDate(start.getDate() - 14);
|
||
}
|
||
return { start: fmtDate(start), end: fmtDate(end) };
|
||
}
|
||
|
||
const SearchableSelect = ({
|
||
options,
|
||
value,
|
||
onChange,
|
||
placeholder
|
||
}: {
|
||
options: string[],
|
||
value: string,
|
||
onChange: (val: string) => void,
|
||
placeholder: string
|
||
}) => {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const [search, setSearch] = useState('');
|
||
|
||
const filtered = useMemo(() => {
|
||
if (!search) return options;
|
||
return options.filter(opt => opt.toLowerCase().includes(search.toLowerCase()));
|
||
}, [options, search]);
|
||
|
||
return (
|
||
<div className="relative">
|
||
<div className="relative">
|
||
<input
|
||
type="text"
|
||
className="w-full bg-slate-50 border-none rounded-lg py-1.5 px-2 text-[10px] font-bold text-slate-600 outline-none focus:ring-1 focus:ring-blue-500/20 placeholder:text-slate-400"
|
||
placeholder={value === 'All' ? placeholder : value === '__EMPTY__' ? '无值' : value}
|
||
value={search}
|
||
onFocus={() => setIsOpen(true)}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
onBlur={() => {
|
||
// Delay to allow clicking an option
|
||
setTimeout(() => setIsOpen(false), 200);
|
||
}}
|
||
/>
|
||
<ChevronDown size={10} className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
|
||
</div>
|
||
|
||
<AnimatePresence>
|
||
{isOpen && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -5 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -5 }}
|
||
className="absolute z-50 left-0 right-0 mt-1 bg-white border border-slate-100 rounded-xl shadow-xl max-h-40 overflow-y-auto"
|
||
>
|
||
<div
|
||
className="px-3 py-2 text-[10px] font-bold text-blue-600 hover:bg-slate-50 cursor-pointer"
|
||
onClick={() => {
|
||
onChange('All');
|
||
setSearch('');
|
||
setIsOpen(false);
|
||
}}
|
||
>
|
||
无限制
|
||
</div>
|
||
{filtered.map((opt: string) => (
|
||
<div
|
||
key={opt}
|
||
className="px-3 py-2 text-[10px] font-bold text-slate-600 hover:bg-slate-50 cursor-pointer border-t border-slate-50"
|
||
onClick={() => {
|
||
onChange(opt);
|
||
setSearch('');
|
||
setIsOpen(false);
|
||
}}
|
||
>
|
||
{opt === '__EMPTY__' ? '无值' : opt}
|
||
</div>
|
||
))}
|
||
{filtered.length === 0 && (
|
||
<div className="px-3 py-2 text-[10px] font-bold text-slate-300 italic">
|
||
无匹配项
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const BatchMultiSelect = ({
|
||
options,
|
||
selected,
|
||
onChange,
|
||
placeholder,
|
||
}: {
|
||
options: string[],
|
||
selected: string[],
|
||
onChange: (val: string[]) => void,
|
||
placeholder: string
|
||
}) => {
|
||
const rootRef = useRef<HTMLDivElement>(null);
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const [search, setSearch] = useState('');
|
||
|
||
const selectedSet = useMemo(() => new Set(selected), [selected]);
|
||
const filtered = useMemo(() => {
|
||
if (!search) return options;
|
||
return options.filter(opt => opt.toLowerCase().includes(search.toLowerCase()));
|
||
}, [options, search]);
|
||
const label = selected.length === 0
|
||
? placeholder
|
||
: selected.length === options.length
|
||
? '全部批次'
|
||
: selected.length === 1
|
||
? selected[0]
|
||
: `已选 ${selected.length} 个批次`;
|
||
|
||
const toggle = (opt: string) => {
|
||
if (selectedSet.has(opt)) {
|
||
onChange(selected.filter(item => item !== opt));
|
||
} else {
|
||
onChange([...selected, opt]);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!isOpen) return;
|
||
const handlePointerDown = (event: PointerEvent) => {
|
||
const target = event.target;
|
||
if (target instanceof Node && !rootRef.current?.contains(target)) {
|
||
setIsOpen(false);
|
||
setSearch('');
|
||
}
|
||
};
|
||
document.addEventListener('pointerdown', handlePointerDown);
|
||
return () => document.removeEventListener('pointerdown', handlePointerDown);
|
||
}, [isOpen]);
|
||
|
||
return (
|
||
<div ref={rootRef} className="relative">
|
||
<button
|
||
type="button"
|
||
className="w-full bg-slate-50 border-none rounded-lg py-1.5 pl-2 pr-6 text-left text-[10px] font-bold text-slate-600 outline-none focus:ring-1 focus:ring-blue-500/20"
|
||
onClick={() => setIsOpen(open => !open)}
|
||
>
|
||
<span className="block truncate">{label}</span>
|
||
<ChevronDown size={10} className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
|
||
</button>
|
||
|
||
<AnimatePresence>
|
||
{isOpen && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -5 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -5 }}
|
||
className="absolute z-50 left-0 right-0 mt-1 bg-white border border-slate-100 rounded-xl shadow-xl overflow-hidden"
|
||
>
|
||
<div className="p-2 border-b border-slate-50">
|
||
<input
|
||
type="text"
|
||
className="w-full bg-slate-50 border-none rounded-lg py-1.5 px-2 text-[10px] font-bold text-slate-600 outline-none focus:ring-1 focus:ring-blue-500/20 placeholder:text-slate-400"
|
||
placeholder="搜索批次"
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-1 px-2 py-1.5 border-b border-slate-50">
|
||
<button
|
||
type="button"
|
||
className="flex-1 px-2 py-1 text-[10px] font-bold text-blue-600 hover:bg-blue-50 rounded-lg"
|
||
onClick={() => onChange(options)}
|
||
>
|
||
全选批次
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="flex-1 px-2 py-1 text-[10px] font-bold text-slate-400 hover:bg-slate-50 rounded-lg"
|
||
onClick={() => onChange([])}
|
||
>
|
||
不限
|
||
</button>
|
||
</div>
|
||
<div className="max-h-44 overflow-y-auto">
|
||
{filtered.map((opt: string) => {
|
||
const checked = selectedSet.has(opt);
|
||
return (
|
||
<button
|
||
type="button"
|
||
key={opt}
|
||
className="w-full px-3 py-2 text-[10px] font-bold text-slate-600 hover:bg-slate-50 cursor-pointer border-t border-slate-50 flex items-center justify-between gap-2 text-left"
|
||
onClick={() => toggle(opt)}
|
||
>
|
||
<span className="truncate">{opt}</span>
|
||
<span className={`w-3.5 h-3.5 rounded border flex items-center justify-center flex-shrink-0 ${checked ? 'bg-blue-600 border-blue-600 text-white' : 'border-slate-200 text-transparent'}`}>
|
||
<Check size={10} />
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
{filtered.length === 0 && (
|
||
<div className="px-3 py-2 text-[10px] font-bold text-slate-300 italic">
|
||
无匹配项
|
||
</div>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default function MonitoringView() {
|
||
const [drillContext, setDrillContext] = useState<MileageDrillContext>(() => (
|
||
parseMileageDrillContext(window.location.search)
|
||
));
|
||
const [searchTerm, setSearchTerm] = useState('');
|
||
const [filterDept, setFilterDept] = useState('All');
|
||
const [sortBy, setSortBy] = useState<'today' | 'total' | 'statisticTime'>('today');
|
||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
|
||
const [isFilterOpen, setIsFilterOpen] = useState(false);
|
||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||
const [fullscreenVehicles, setFullscreenVehicles] = useState<MonitoringVehicle[]>([]);
|
||
const [fullscreenStats, setFullscreenStats] = useState<MonitoringStats>({ totalToday: 0, totalAll: 0, vehicleCount: 0, yesterdayTotal: 0 });
|
||
const [fullscreenRefresh, setFullscreenRefresh] = useState(0);
|
||
const [fullscreenLoading, setFullscreenLoading] = useState(false);
|
||
|
||
// New filters from image
|
||
const [filterPlates, setFilterPlates] = useState<string[]>(() => (
|
||
drillContext.level === 'vehicle' && drillContext.plate ? [drillContext.plate] : []
|
||
));
|
||
const [filterCustomer, setFilterCustomer] = useState('All');
|
||
const [filterProject, setFilterProject] = useState('All');
|
||
const [filterEntity, setFilterEntity] = useState('All');
|
||
const [filterRentStatus, setFilterRentStatus] = useState('All');
|
||
const [filterPlatePrefix, setFilterPlatePrefix] = useState('All');
|
||
const [filterTargetNames, setFilterTargetNames] = useState<string[]>([]);
|
||
const [filterRegion, setFilterRegion] = useState('All');
|
||
const [filterBrands, setFilterBrands] = useState<string[]>([]);
|
||
const [filterMileageRange, setFilterMileageRange] = useState({ min: '', max: '' });
|
||
const [appliedMileageRange, setAppliedMileageRange] = useState({ min: '', max: '' });
|
||
const [exporting, setExporting] = useState(false);
|
||
const [rangeStart, setRangeStart] = useState(() => drillContext.startDate || defaultMileageDate());
|
||
const [rangeEnd, setRangeEnd] = useState(() => drillContext.endDate || defaultMileageDate());
|
||
const [sourcePriority, setSourcePriority] = useState<MileageSourceGroup[]>(drillContext.sourcePriority);
|
||
|
||
const [vehicles, setVehicles] = useState<MonitoringVehicle[]>([]);
|
||
const [stats, setStats] = useState<MonitoringStats>({ totalToday: 0, totalAll: 0, vehicleCount: 0, yesterdayTotal: 0 });
|
||
const [filterOptions, setFilterOptions] = useState<MonitoringFilters>({ departments: [], customers: [], plates: [], projects: [], entities: [], rentStatuses: [], platePrefixes: [], targetNames: [], regions: [], brands: [] });
|
||
const [rangeDailyTotals, setRangeDailyTotals] = useState<{ date: string; totalKm: number }[]>([]);
|
||
const [effectiveRange, setEffectiveRange] = useState<{ start: string; end: string }>(() => ({ start: defaultMileageDate(), end: defaultMileageDate() }));
|
||
const [total, setTotal] = useState(0);
|
||
const [page, setPage] = useState(1);
|
||
const [hasMore, setHasMore] = useState(true);
|
||
const [loadingMore, setLoadingMore] = useState(false);
|
||
const [pageLoading, setPageLoading] = useState(true);
|
||
const [pageError, setPageError] = useState<{ message: string; scope: 'first' | 'more' } | null>(null);
|
||
const [manualRefreshing, setManualRefreshing] = useState(false);
|
||
const [dataUpdatedAt, setDataUpdatedAt] = useState<string | null>(null);
|
||
const [showBackToTop, setShowBackToTop] = useState(false);
|
||
const [relativeNow, setRelativeNow] = useState(() => Date.now());
|
||
const PAGE_SIZE = 50;
|
||
const detailVehicle = drillContext.level === 'vehicle' && drillContext.plate
|
||
? vehicles.find(vehicle => vehicle.plate === drillContext.plate) || null
|
||
: null;
|
||
|
||
const commitDrillContext = useCallback((next: MileageDrillContext, mode: 'push' | 'replace') => {
|
||
const url = buildMileageDrillUrl(window.location, next);
|
||
window.history[mode === 'push' ? 'pushState' : 'replaceState'](null, '', url);
|
||
setDrillContext(next);
|
||
}, []);
|
||
|
||
const openVehicleDetail = useCallback((vehicle: MonitoringVehicle) => {
|
||
commitDrillContext({
|
||
level: 'vehicle',
|
||
plate: vehicle.plate,
|
||
startDate: effectiveRange.start,
|
||
endDate: effectiveRange.end,
|
||
sourcePriority,
|
||
}, 'push');
|
||
}, [commitDrillContext, effectiveRange.end, effectiveRange.start, sourcePriority]);
|
||
|
||
const closeVehicleDetail = useCallback(() => {
|
||
commitDrillContext({
|
||
level: 'overview',
|
||
startDate: effectiveRange.start,
|
||
endDate: effectiveRange.end,
|
||
sourcePriority,
|
||
}, 'replace');
|
||
}, [commitDrillContext, effectiveRange.end, effectiveRange.start, sourcePriority]);
|
||
|
||
useEffect(() => {
|
||
const timer = setInterval(() => setRelativeNow(Date.now()), 5000);
|
||
return () => clearInterval(timer);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const handlePopState = () => {
|
||
const next = parseMileageDrillContext(window.location.search);
|
||
setDrillContext(next);
|
||
if (next.startDate) setRangeStart(next.startDate);
|
||
if (next.endDate) setRangeEnd(next.endDate);
|
||
setSourcePriority(next.sourcePriority);
|
||
if (next.level === 'vehicle' && next.plate) setFilterPlates([next.plate]);
|
||
};
|
||
window.addEventListener('popstate', handlePopState);
|
||
return () => window.removeEventListener('popstate', handlePopState);
|
||
}, []);
|
||
|
||
const departments = filterOptions.departments;
|
||
const plateNumbers = filterOptions.plates;
|
||
const rangeLabel = normalizeRangeLabel(effectiveRange.start, effectiveRange.end);
|
||
const isRangeMode = !!effectiveRange.start && !!effectiveRange.end && effectiveRange.start !== effectiveRange.end;
|
||
const averageDailyKm = rangeDailyTotals.length > 0
|
||
? rangeDailyTotals.reduce((sum, item) => sum + item.totalKm, 0) / rangeDailyTotals.length
|
||
: 0;
|
||
const applyRangePreset = useCallback((preset: RangePreset) => {
|
||
const range = getRangePreset(preset);
|
||
setRangeStart(range.start);
|
||
setRangeEnd(range.end);
|
||
}, []);
|
||
|
||
const isHighMileageAlert = useCallback((v: MonitoringVehicle) => {
|
||
const inAlertTarget = v.targetNames?.some(name => HIGH_MILEAGE_ALERT_TARGETS.has(name))
|
||
|| filterTargetNames.some(name => HIGH_MILEAGE_ALERT_TARGETS.has(name));
|
||
return inAlertTarget && Math.max(0, v.dailyKm || 0) >= HIGH_MILEAGE_ALERT_KM;
|
||
}, [filterTargetNames]);
|
||
|
||
// 加载首页数据
|
||
const loadFirstPage = useCallback((showPageLoading = true, force = false) => {
|
||
if (showPageLoading) setPageLoading(true);
|
||
setPageError(null);
|
||
return fetchMonitoring({
|
||
sortBy,
|
||
sortOrder,
|
||
limit: PAGE_SIZE,
|
||
page: 1,
|
||
search: searchTerm || undefined,
|
||
dept: filterDept !== 'All' ? filterDept : undefined,
|
||
customer: filterCustomer !== 'All' ? filterCustomer : undefined,
|
||
project: filterProject !== 'All' ? filterProject : undefined,
|
||
entity: filterEntity !== 'All' ? filterEntity : undefined,
|
||
rentStatus: filterRentStatus !== 'All' ? filterRentStatus : undefined,
|
||
platePrefix: filterPlatePrefix !== 'All' ? filterPlatePrefix : undefined,
|
||
targetNames: filterTargetNames.length > 0 ? filterTargetNames : undefined,
|
||
region: filterRegion !== 'All' ? filterRegion : undefined,
|
||
plate: filterPlates.length > 0 ? filterPlates.join(',') : undefined,
|
||
mileageMin: appliedMileageRange.min || undefined,
|
||
mileageMax: appliedMileageRange.max || undefined,
|
||
startDate: rangeStart || undefined,
|
||
endDate: rangeEnd || undefined,
|
||
brands: filterBrands.length > 0 ? filterBrands : undefined,
|
||
sourcePriority,
|
||
force,
|
||
}).then(d => {
|
||
setVehicles(d.vehicles);
|
||
setStats(d.stats);
|
||
setFilterOptions(d.filters);
|
||
setRangeDailyTotals(d.rangeDailyTotals || []);
|
||
setEffectiveRange(d.dateRange || { start: rangeStart, end: rangeEnd });
|
||
setTotal(d.total);
|
||
setPage(1);
|
||
setHasMore(d.page < d.totalPages);
|
||
setDataUpdatedAt(d.updatedAt);
|
||
}).catch(error => {
|
||
setPageError({
|
||
message: error instanceof Error ? error.message : '里程数据加载失败，请稍后重试',
|
||
scope: 'first',
|
||
});
|
||
}).finally(() => {
|
||
if (showPageLoading) setPageLoading(false);
|
||
});
|
||
}, [sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterProject, filterEntity, filterRentStatus, filterPlatePrefix, filterTargetNames, filterRegion, filterPlates, appliedMileageRange, rangeStart, rangeEnd, filterBrands, sourcePriority]);
|
||
|
||
const handleManualRefresh = useCallback(async () => {
|
||
if (manualRefreshing) return;
|
||
setManualRefreshing(true);
|
||
try {
|
||
await loadFirstPage(false, true);
|
||
} finally {
|
||
setManualRefreshing(false);
|
||
}
|
||
}, [loadFirstPage, manualRefreshing]);
|
||
|
||
// 加载更多
|
||
const loadMore = useCallback(() => {
|
||
if (loadingMore || !hasMore) return;
|
||
const nextPage = page + 1;
|
||
setLoadingMore(true);
|
||
setPageError(null);
|
||
fetchMonitoring({
|
||
sortBy,
|
||
sortOrder,
|
||
limit: PAGE_SIZE,
|
||
page: nextPage,
|
||
search: searchTerm || undefined,
|
||
dept: filterDept !== 'All' ? filterDept : undefined,
|
||
customer: filterCustomer !== 'All' ? filterCustomer : undefined,
|
||
project: filterProject !== 'All' ? filterProject : undefined,
|
||
entity: filterEntity !== 'All' ? filterEntity : undefined,
|
||
rentStatus: filterRentStatus !== 'All' ? filterRentStatus : undefined,
|
||
platePrefix: filterPlatePrefix !== 'All' ? filterPlatePrefix : undefined,
|
||
targetNames: filterTargetNames.length > 0 ? filterTargetNames : undefined,
|
||
region: filterRegion !== 'All' ? filterRegion : undefined,
|
||
plate: filterPlates.length > 0 ? filterPlates.join(',') : undefined,
|
||
mileageMin: appliedMileageRange.min || undefined,
|
||
mileageMax: appliedMileageRange.max || undefined,
|
||
startDate: rangeStart || undefined,
|
||
endDate: rangeEnd || undefined,
|
||
brands: filterBrands.length > 0 ? filterBrands : undefined,
|
||
sourcePriority,
|
||
}).then(d => {
|
||
setVehicles(prev => [...prev, ...d.vehicles]);
|
||
setPage(nextPage);
|
||
setHasMore(nextPage < d.totalPages);
|
||
setDataUpdatedAt(d.updatedAt);
|
||
}).catch(error => {
|
||
setPageError({
|
||
message: error instanceof Error ? error.message : '更多车辆加载失败，请稍后重试',
|
||
scope: 'more',
|
||
});
|
||
}).finally(() => setLoadingMore(false));
|
||
}, [sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterProject, filterEntity, filterRentStatus, filterPlatePrefix, filterTargetNames, filterRegion, filterPlates, appliedMileageRange, rangeStart, rangeEnd, page, loadingMore, hasMore, filterBrands, sourcePriority]);
|
||
|
||
// 筛选/排序变化时重新加载
|
||
useEffect(() => {
|
||
loadFirstPage();
|
||
}, [loadFirstPage]);
|
||
|
||
// 区域级联：plate 选项收窄后，剔除已选但已不属于该区域的车牌
|
||
useEffect(() => {
|
||
if (filterPlates.length === 0) return;
|
||
const valid = new Set(filterOptions.plates);
|
||
const next = filterPlates.filter(p => valid.has(p));
|
||
if (next.length !== filterPlates.length) setFilterPlates(next);
|
||
}, [filterOptions.plates, filterPlates]);
|
||
|
||
// 下载当前筛选结果为 xlsx
|
||
const handleDownload = useCallback(async () => {
|
||
if (exporting) return;
|
||
setExporting(true);
|
||
try {
|
||
const d = await fetchMonitoring({
|
||
sortBy,
|
||
sortOrder,
|
||
limit: 9999,
|
||
page: 1,
|
||
search: searchTerm || undefined,
|
||
dept: filterDept !== 'All' ? filterDept : undefined,
|
||
customer: filterCustomer !== 'All' ? filterCustomer : undefined,
|
||
project: filterProject !== 'All' ? filterProject : undefined,
|
||
entity: filterEntity !== 'All' ? filterEntity : undefined,
|
||
rentStatus: filterRentStatus !== 'All' ? filterRentStatus : undefined,
|
||
platePrefix: filterPlatePrefix !== 'All' ? filterPlatePrefix : undefined,
|
||
targetNames: filterTargetNames.length > 0 ? filterTargetNames : undefined,
|
||
region: filterRegion !== 'All' ? filterRegion : undefined,
|
||
plate: filterPlates.length > 0 ? filterPlates.join(',') : undefined,
|
||
mileageMin: appliedMileageRange.min || undefined,
|
||
mileageMax: appliedMileageRange.max || undefined,
|
||
startDate: rangeStart || undefined,
|
||
endDate: rangeEnd || undefined,
|
||
brands: filterBrands.length > 0 ? filterBrands : undefined,
|
||
sourcePriority,
|
||
});
|
||
exportMileageXlsx(d.vehicles, { startDate: d.dateRange?.start || rangeStart, endDate: d.dateRange?.end || rangeEnd, sortBy });
|
||
} catch (err) {
|
||
console.error('export failed', err);
|
||
} finally {
|
||
setExporting(false);
|
||
}
|
||
}, [exporting, sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterProject, filterEntity, filterRentStatus, filterPlatePrefix, filterTargetNames, filterRegion, filterPlates, appliedMileageRange, rangeStart, rangeEnd, filterBrands, sourcePriority]);
|
||
|
||
// 每分钟自动刷新
|
||
useEffect(() => {
|
||
const timer = setInterval(() => { void loadFirstPage(false); }, 60 * 1000);
|
||
return () => clearInterval(timer);
|
||
}, [loadFirstPage]);
|
||
|
||
// 回到顶部按钮：用 IntersectionObserver 检测顶部哨兵是否离开视口
|
||
const topSentinelRef = useRef<HTMLDivElement>(null);
|
||
useEffect(() => {
|
||
const el = topSentinelRef.current;
|
||
if (!el) return;
|
||
const observer = new IntersectionObserver(
|
||
([entry]) => setShowBackToTop(!entry.isIntersecting),
|
||
);
|
||
observer.observe(el);
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
const scrollToTop = () => {
|
||
window.scrollTo(0, 0);
|
||
document.documentElement.scrollTop = 0;
|
||
document.body.scrollTop = 0;
|
||
};
|
||
|
||
const filteredVehicles = vehicles;
|
||
|
||
const toggleFullscreen = () => {
|
||
setIsFullscreen(!isFullscreen);
|
||
};
|
||
|
||
// 全屏时加载全部数据（无分页），筛选变化时重新加载
|
||
useEffect(() => {
|
||
if (!isFullscreen) return;
|
||
setFullscreenLoading(true);
|
||
fetchMonitoring({
|
||
sortBy,
|
||
sortOrder,
|
||
limit: 9999,
|
||
page: 1,
|
||
search: searchTerm || undefined,
|
||
dept: filterDept !== 'All' ? filterDept : undefined,
|
||
customer: filterCustomer !== 'All' ? filterCustomer : undefined,
|
||
rentStatus: filterRentStatus !== 'All' ? filterRentStatus : undefined,
|
||
platePrefix: filterPlatePrefix !== 'All' ? filterPlatePrefix : undefined,
|
||
targetNames: filterTargetNames.length > 0 ? filterTargetNames : undefined,
|
||
region: filterRegion !== 'All' ? filterRegion : undefined,
|
||
plate: filterPlates.length > 0 ? filterPlates.join(',') : undefined,
|
||
startDate: rangeStart || undefined,
|
||
endDate: rangeEnd || undefined,
|
||
brands: filterBrands.length > 0 ? filterBrands : undefined,
|
||
sourcePriority,
|
||
}).then(d => {
|
||
setFullscreenVehicles(d.vehicles);
|
||
setFullscreenStats(d.stats);
|
||
setFilterOptions(d.filters);
|
||
setDataUpdatedAt(d.updatedAt);
|
||
}).catch(() => {}).finally(() => setFullscreenLoading(false));
|
||
}, [isFullscreen, sortBy, sortOrder, searchTerm, filterDept, filterCustomer, filterRentStatus, filterPlatePrefix, filterTargetNames, filterRegion, filterPlates, rangeStart, rangeEnd, fullscreenRefresh, filterBrands, sourcePriority]);
|
||
|
||
// 全屏时禁止背景滚动
|
||
useEffect(() => {
|
||
if (isFullscreen) {
|
||
document.body.style.overflow = 'hidden';
|
||
} else {
|
||
document.body.style.overflow = '';
|
||
}
|
||
return () => { document.body.style.overflow = ''; };
|
||
}, [isFullscreen]);
|
||
|
||
// 检测是否在小程序 webview 中（微信/抖音/支付宝等），且当前是竖屏
|
||
// 小程序 webview 无法调用系统旋转 API，只能用 CSS rotate 强制横屏
|
||
const forceLandscape = useMemo(() => {
|
||
if (typeof window === 'undefined') return false;
|
||
const ua = navigator.userAgent || '';
|
||
const isMiniProgram =
|
||
/miniProgram/i.test(ua) ||
|
||
/toutiaomicroapp/i.test(ua) ||
|
||
/AlipayClient/i.test(ua) ||
|
||
(window as any).__wxjs_environment === 'miniprogram';
|
||
const isPortrait = window.innerHeight > window.innerWidth;
|
||
return isMiniProgram && isPortrait;
|
||
}, [isFullscreen]);
|
||
|
||
return (
|
||
<>
|
||
{/* 顶部哨兵：离开视口时显示回到顶部按钮 */}
|
||
<div ref={topSentinelRef} className="h-0" />
|
||
|
||
{/* Fullscreen Landscape View Overlay */}
|
||
<AnimatePresence>
|
||
{isFullscreen && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed z-[100] bg-slate-950 flex flex-col overflow-hidden"
|
||
style={
|
||
forceLandscape
|
||
? {
|
||
// 小程序 webview 无法真横屏，强制 CSS 旋转 90 度模拟横屏
|
||
top: 0,
|
||
left: '100vw',
|
||
width: '100vh',
|
||
height: '100vw',
|
||
transform: 'rotate(90deg)',
|
||
transformOrigin: 'top left',
|
||
}
|
||
: { top: 0, left: 0, right: 0, bottom: 0 }
|
||
}
|
||
>
|
||
{/* Top bar: compact inline KPI */}
|
||
<div className="flex-shrink-0 px-3 py-2 border-b border-slate-800/60 flex items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-0.5 h-4 bg-blue-500 rounded-full"></div>
|
||
<h2 className="text-white font-bold text-xs">全屏监控</h2>
|
||
</div>
|
||
<div className="flex items-center gap-3 text-[10px]">
|
||
<span className="text-slate-500">区间 <span className="text-white font-black">{Math.round(fullscreenStats.totalToday).toLocaleString()}</span> <span className="text-blue-400">km</span></span>
|
||
<span className="text-slate-700">|</span>
|
||
<span className="text-slate-500">累计 <span className="text-white font-black">{Math.round(fullscreenStats.totalAll).toLocaleString()}</span> <span className="text-blue-400">km</span></span>
|
||
<span className="text-slate-700">|</span>
|
||
<span className="text-slate-500">车辆 <span className="text-white font-black">{fullscreenStats.vehicleCount}</span> 台</span>
|
||
<span className="text-slate-700">|</span>
|
||
<span className="text-slate-500">均 <span className="text-white font-black">{(fullscreenStats.vehicleCount > 0 ? (sortBy === 'total' ? fullscreenStats.totalAll : fullscreenStats.totalToday) / fullscreenStats.vehicleCount : 0).toFixed(0)}</span> <span className="text-blue-400">km</span></span>
|
||
<span className="text-slate-700">|</span>
|
||
<span className="text-slate-500">
|
||
来源 <span className="text-white font-black">
|
||
{sourcePriority.map(group => MILEAGE_SOURCE_META[group].label).join(' > ')}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() => { setFullscreenRefresh(n => n + 1); }}
|
||
className={`p-1.5 text-slate-500 hover:text-blue-400 transition-colors ${fullscreenLoading ? 'animate-spin' : ''}`}
|
||
>
|
||
<RotateCcw size={13} />
|
||
</button>
|
||
<button onClick={toggleFullscreen} className="p-1.5 text-slate-500 hover:text-white transition-colors">
|
||
<Minimize2 size={14} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Batch selector + legend */}
|
||
<div className="flex-shrink-0 px-3 py-1 border-b border-slate-800/60 flex items-center justify-between">
|
||
<div className="flex items-center gap-1 overflow-x-auto no-scrollbar">
|
||
<button
|
||
onClick={() => setFilterTargetNames([])}
|
||
className={`px-2 py-0.5 rounded text-[8px] font-bold transition-all whitespace-nowrap ${filterTargetNames.length === 0 ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}
|
||
>全部</button>
|
||
{filterOptions.targetNames.map(n => (
|
||
<button
|
||
key={n}
|
||
onClick={() => setFilterTargetNames(prev => prev.includes(n) ? prev.filter(item => item !== n) : [...prev, n])}
|
||
className={`px-2 py-0.5 rounded text-[8px] font-bold transition-all whitespace-nowrap ${filterTargetNames.includes(n) ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}
|
||
>{n.replace(/交投|羚牛|恒运/, '').replace(/辆/, '台')}</button>
|
||
))}
|
||
</div>
|
||
<div className="flex items-center gap-2 text-[8px] text-slate-500 flex-shrink-0 ml-2">
|
||
<span className="flex items-center gap-0.5"><span className="w-1.5 h-1.5 rounded-full bg-green-500 inline-block"></span>在线</span>
|
||
<span className="flex items-center gap-0.5"><span className="w-1.5 h-1.5 rounded-full bg-slate-500 inline-block"></span>离线</span>
|
||
<span className="flex items-center gap-0.5"><span className="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block"></span>未对接</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Table Area */}
|
||
<div className="flex-1 overflow-hidden flex flex-col">
|
||
|
||
<div className="flex-1 overflow-auto relative">
|
||
{fullscreenLoading && (
|
||
<div className="absolute inset-0 bg-slate-950/60 z-20 flex items-center justify-center">
|
||
<div className="flex items-center gap-2 text-slate-400 text-xs font-bold">
|
||
<RotateCcw size={14} className="animate-spin" />
|
||
加载中...
|
||
</div>
|
||
</div>
|
||
)}
|
||
<table className="w-full text-left border-collapse">
|
||
<thead className="sticky top-0 bg-slate-900 z-10">
|
||
<tr className="border-b border-slate-800/60">
|
||
<th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase w-12 text-center">状态</th>
|
||
<th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
|
||
<div className="flex flex-col gap-1">
|
||
<span>车牌号</span>
|
||
<span className="text-[9px] text-slate-500 font-normal">
|
||
{filterPlates.length === 0 ? '全部' : `已选 ${filterPlates.length}`}
|
||
</span>
|
||
</div>
|
||
</th>
|
||
<th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
|
||
<div className="flex flex-col gap-1">
|
||
<span>客户</span>
|
||
<input
|
||
type="text"
|
||
className="bg-slate-800 border-none rounded px-2 py-0.5 text-[9px] text-slate-300 outline-none focus:ring-1 focus:ring-blue-500/30 w-20"
|
||
placeholder={filterCustomer === 'All' ? '全部' : filterCustomer}
|
||
defaultValue=""
|
||
onBlur={(e) => {
|
||
const val = e.target.value.trim();
|
||
setFilterCustomer(val || 'All');
|
||
e.target.value = '';
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
const val = (e.target as HTMLInputElement).value.trim();
|
||
setFilterCustomer(val || 'All');
|
||
(e.target as HTMLInputElement).value = '';
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</th>
|
||
<th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
|
||
<div className="flex flex-col gap-1">
|
||
<span>品牌</span>
|
||
<input
|
||
type="text"
|
||
className="bg-slate-800 border-none rounded px-2 py-0.5 text-[9px] text-slate-300 outline-none focus:ring-1 focus:ring-blue-500/30 w-16"
|
||
placeholder={filterBrands.length === 0 ? '全部' : `已选${filterBrands.length}`}
|
||
defaultValue=""
|
||
onBlur={(e) => {
|
||
const val = e.target.value.trim();
|
||
if (val) {
|
||
setFilterBrands(filterBrands.includes(val) ? filterBrands.filter(b => b !== val) : [...filterBrands, val]);
|
||
}
|
||
e.target.value = '';
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
const val = (e.target as HTMLInputElement).value.trim();
|
||
if (val) {
|
||
setFilterBrands(filterBrands.includes(val) ? filterBrands.filter(b => b !== val) : [...filterBrands, val]);
|
||
}
|
||
(e.target as HTMLInputElement).value = '';
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</th>
|
||
<th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
|
||
<div className="flex flex-col gap-1">
|
||
<span>租赁状态</span>
|
||
<select
|
||
className="bg-slate-800 border-none rounded px-2 py-0.5 text-[9px] text-slate-300 outline-none focus:ring-1 focus:ring-blue-500/30"
|
||
value={filterRentStatus}
|
||
onChange={(e) => setFilterRentStatus(e.target.value)}
|
||
>
|
||
<option value="All">全部状态</option>
|
||
{filterOptions.rentStatuses.map(s => <option key={s} value={s}>{s}</option>)}
|
||
</select>
|
||
</div>
|
||
</th>
|
||
<th className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
|
||
<div className="flex flex-col gap-1">
|
||
<span>部门</span>
|
||
<select
|
||
className="bg-slate-800 border-none rounded px-2 py-0.5 text-[9px] text-slate-300 outline-none focus:ring-1 focus:ring-blue-500/30"
|
||
value={filterDept}
|
||
onChange={(e) => setFilterDept(e.target.value)}
|
||
>
|
||
<option value="All">全部部门</option>
|
||
<option value="__EMPTY__">无值</option>
|
||
{departments.map(d => <option key={d} value={d}>{d.replace('业务', '')}</option>)}
|
||
</select>
|
||
</div>
|
||
</th>
|
||
<th
|
||
className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-right cursor-pointer hover:text-blue-400 transition-colors"
|
||
onClick={() => {
|
||
if (sortBy === 'today') {
|
||
setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc');
|
||
} else {
|
||
setSortBy('today');
|
||
setSortOrder('desc');
|
||
}
|
||
}}
|
||
>
|
||
<div className="flex items-center justify-end gap-1">
|
||
<span>区间里程</span>
|
||
{sortBy === 'today' && (
|
||
sortOrder === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />
|
||
)}
|
||
</div>
|
||
</th>
|
||
<th
|
||
className="px-3 py-2 text-[10px] font-bold text-slate-500 uppercase text-right cursor-pointer hover:text-blue-400 transition-colors"
|
||
onClick={() => {
|
||
if (sortBy === 'total') {
|
||
setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc');
|
||
} else {
|
||
setSortBy('total');
|
||
setSortOrder('desc');
|
||
}
|
||
}}
|
||
>
|
||
<div className="flex items-center justify-end gap-1">
|
||
<span>累计里程</span>
|
||
{sortBy === 'total' && (
|
||
sortOrder === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />
|
||
)}
|
||
</div>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-800/30">
|
||
{fullscreenVehicles.map((v) => {
|
||
const highMileageAlert = isHighMileageAlert(v);
|
||
const statisticTime = vehicleStatisticTime(v, relativeNow);
|
||
const sourceDisplay = vehicleSourceDisplay(v);
|
||
return (
|
||
<tr key={v.plate} className="hover:bg-slate-800/20 transition-colors">
|
||
<td className="px-3 py-2 text-center">
|
||
<div className={`w-2 h-2 rounded-full mx-auto ${v.isOnline ? 'bg-green-500 shadow-[0_0_6px_rgba(34,197,94,0.4)]' : (v.isDataSynced || v.totalKm != null) ? 'bg-slate-600' : 'bg-amber-400 animate-pulse'}`}></div>
|
||
</td>
|
||
<td className="px-3 py-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<div className="text-xs font-bold text-white"><Blur>{v.plate}</Blur></div>
|
||
<span
|
||
className={`inline-flex shrink-0 rounded px-1.5 py-0.5 text-[7px] font-black ${sourceDisplay.className}`}
|
||
title={sourceDisplay.title}
|
||
>
|
||
{sourceDisplay.label}
|
||
</span>
|
||
</div>
|
||
<div className={`mt-0.5 text-[8px] font-bold ${statisticTime.color}`} title={statisticTime.title}>
|
||
{statisticTime.label}
|
||
</div>
|
||
</td>
|
||
<td className="px-3 py-2 text-[11px] text-slate-400"><Blur>{v.customer || '-'}</Blur></td>
|
||
<td className="px-3 py-2 text-[11px] text-slate-400">{v.brand || '-'}</td>
|
||
<td className="px-3 py-2 text-[11px] text-slate-400">{v.rentStatus || '-'}</td>
|
||
<td className="px-3 py-2 text-[11px] text-slate-400">{v.department || '-'}</td>
|
||
<td className="px-3 py-2 text-right">
|
||
<span className={`text-xs font-mono font-bold ${(v.isDataSynced || v.totalKm != null) ? (highMileageAlert ? 'text-red-400' : 'text-blue-400') : 'text-amber-400'}`}>
|
||
{(v.isDataSynced || v.totalKm != null) ? <>{Math.max(0, v.dailyKm || 0).toLocaleString()} <span className={`text-[8px] ${highMileageAlert ? 'text-red-400/70' : 'text-slate-500'}`}>km</span></> : <span className="text-[8px] text-amber-500/50">未对接</span>}
|
||
</span>
|
||
</td>
|
||
<td className="px-3 py-2 text-right">
|
||
<span className={`text-xs font-mono font-bold ${v.isDataSynced ? 'text-slate-300' : 'text-slate-600'}`}>
|
||
{v.totalKm != null ? <>{v.totalKm.toLocaleString()} <span className="text-[8px] text-slate-500">km</span></> : <span className="text-[8px] text-amber-500/50">未对接</span>}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<div className="flex flex-col gap-3 rounded-2xl border border-gray-100 bg-white p-3 shadow-sm">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<div className="flex min-w-0 items-center gap-3">
|
||
<div className="h-8 w-1 flex-shrink-0 rounded-full bg-blue-600" />
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-2">
|
||
<h1 className="truncate text-lg font-black leading-none text-slate-900">里程看板</h1>
|
||
<button onClick={toggleFullscreen} className="p-1 text-slate-300 transition-colors hover:text-blue-600" title="全屏视图">
|
||
<Maximize2 size={14} />
|
||
</button>
|
||
<button onClick={handleDownload} disabled={exporting} className="p-1 text-slate-300 transition-colors hover:text-blue-600 disabled:text-slate-200" title="下载当前筛选结果">
|
||
{exporting ? <RotateCcw size={14} className="animate-spin" /> : <Download size={14} />}
|
||
</button>
|
||
</div>
|
||
<div className="mt-1 flex items-center gap-1.5">
|
||
<span className="h-1.5 w-1.5 rounded-full bg-blue-500" />
|
||
<span
|
||
className="truncate text-[9px] font-bold tracking-tight text-slate-400"
|
||
title={`OneOS 分钟级快照 · 数据截至 ${formatMileageSnapshotTime(dataUpdatedAt)}`}
|
||
>
|
||
OneOS 分钟级快照 · 截至 {formatMileageSnapshotTime(dataUpdatedAt)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-shrink-0 items-center gap-1.5">
|
||
<span className="hidden text-[9px] font-bold tabular-nums text-slate-400 sm:inline">
|
||
数据截至 {formatMileageSnapshotTime(dataUpdatedAt)}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={handleManualRefresh}
|
||
disabled={manualRefreshing}
|
||
className="flex h-7 items-center gap-1 whitespace-nowrap rounded-lg border border-blue-100 bg-blue-50 px-2 text-[9px] font-bold text-blue-600 disabled:cursor-wait disabled:opacity-60"
|
||
title="局部刷新当前筛选数据"
|
||
>
|
||
<RefreshCw size={11} className={manualRefreshing ? 'animate-spin' : ''} />
|
||
<span>{manualRefreshing ? '刷新中' : '刷新数据'}</span>
|
||
</button>
|
||
<div className="flex items-center gap-1 rounded-lg bg-slate-100 p-0.5">
|
||
<button onClick={() => setSortBy('today')} className={`rounded-md px-2 py-1 text-[9px] font-bold transition-all ${sortBy === 'today' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400'}`}>区间</button>
|
||
<button onClick={() => setSortBy('total')} className={`rounded-md px-2 py-1 text-[9px] font-bold transition-all ${sortBy === 'total' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400'}`}>累计</button>
|
||
<button onClick={() => setSortBy('statisticTime')} className={`rounded-md px-2 py-1 text-[9px] font-bold transition-all ${sortBy === 'statisticTime' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400'}`}>统计时间</button>
|
||
<button
|
||
onClick={() => setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc')}
|
||
className="rounded-md p-1 text-blue-600 transition-all hover:bg-white"
|
||
title={sortOrder === 'desc' ? '当前倒序，点击切换正序' : '当前正序，点击切换倒序'}
|
||
>
|
||
{sortOrder === 'desc' ? <ArrowDown size={12} /> : <ArrowUp size={12} />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<SourcePriorityControl priority={sourcePriority} onChange={setSourcePriority} />
|
||
|
||
<div className="flex items-center gap-2">
|
||
<div className="grid flex-1 grid-cols-3 gap-1.5">
|
||
<BatchMultiSelect options={filterOptions.targetNames} selected={filterTargetNames} onChange={setFilterTargetNames} placeholder="批次型号" />
|
||
<SearchableSelect options={filterOptions.regions} value={filterRegion} onChange={setFilterRegion} placeholder="运营区域" />
|
||
<PlateMultiSelect allPlates={plateNumbers} selected={filterPlates} onChange={setFilterPlates} placeholder="按车牌" />
|
||
</div>
|
||
<button
|
||
onClick={() => setIsFilterOpen(!isFilterOpen)}
|
||
className={`flex-shrink-0 rounded-lg border p-1.5 transition-all ${isFilterOpen || searchTerm || filterDept !== 'All' || filterCustomer !== 'All' || filterRentStatus !== 'All' || filterPlates.length > 0 || filterProject !== 'All' || filterTargetNames.length > 0 || filterBrands.length > 0 ? 'border-blue-100 bg-blue-50 text-blue-600' : 'border-transparent bg-slate-50 text-slate-400'}`}
|
||
title="高级筛选"
|
||
>
|
||
<Filter size={16} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar">
|
||
{([
|
||
['today', '今天'],
|
||
['yesterday', '昨天'],
|
||
['thisWeek', '本周'],
|
||
['thisMonth', '本月'],
|
||
['last15', '近15天'],
|
||
] as Array<[RangePreset, string]>).map(([preset, label]) => {
|
||
const range = getRangePreset(preset);
|
||
const active = rangeStart === range.start && rangeEnd === range.end;
|
||
return (
|
||
<button
|
||
key={preset}
|
||
type="button"
|
||
onClick={() => applyRangePreset(preset)}
|
||
className={`shrink-0 rounded-lg border px-2.5 py-1.5 text-[10px] font-black transition-all ${active ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm' : 'border-slate-100 bg-slate-50 text-slate-500 hover:border-blue-100 hover:bg-blue-50 hover:text-blue-600'}`}
|
||
>
|
||
{label}
|
||
</button>
|
||
);
|
||
})}
|
||
<span className="ml-auto shrink-0 rounded-lg bg-slate-50 px-2 py-1 text-[10px] font-bold text-slate-400">{rangeLabel}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Expandable Filter Panel */}
|
||
<AnimatePresence>
|
||
{isFilterOpen && (
|
||
<motion.div
|
||
initial={{ height: 0, opacity: 0 }}
|
||
animate={{ height: 'auto', opacity: 1 }}
|
||
exit={{ height: 0, opacity: 0 }}
|
||
className="overflow-hidden"
|
||
>
|
||
<div className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm mb-2 space-y-4">
|
||
{/* Date range */}
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">查询时间区间</label>
|
||
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
|
||
<input
|
||
type="date"
|
||
className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
|
||
value={rangeStart}
|
||
onChange={(e) => setRangeStart(e.target.value)}
|
||
/>
|
||
<span className="text-[10px] font-bold text-slate-300">至</span>
|
||
<input
|
||
type="date"
|
||
className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
|
||
value={rangeEnd}
|
||
onChange={(e) => setRangeEnd(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-1.5 pt-1">
|
||
{([
|
||
['today', '今天'],
|
||
['yesterday', '昨天'],
|
||
['thisWeek', '本周'],
|
||
['thisMonth', '本月'],
|
||
['last7', '近7天'],
|
||
['last15', '近15天'],
|
||
] as Array<[RangePreset, string]>).map(([preset, label]) => (
|
||
<button
|
||
key={preset}
|
||
type="button"
|
||
className="rounded-lg bg-slate-50 px-2 py-1 text-[10px] font-bold text-slate-500 hover:bg-blue-50 hover:text-blue-600"
|
||
onClick={() => applyRangePreset(preset)}
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{/* Department */}
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">按部门</label>
|
||
<select
|
||
className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
|
||
value={filterDept}
|
||
onChange={(e) => setFilterDept(e.target.value)}
|
||
>
|
||
<option value="All">无限制</option>
|
||
<option value="__EMPTY__">无值</option>
|
||
{departments.map(d => <option key={d} value={d}>{d}</option>)}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Customer */}
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">按客户</label>
|
||
<SearchableSelect
|
||
options={filterOptions.customers}
|
||
value={filterCustomer}
|
||
onChange={setFilterCustomer}
|
||
placeholder="搜索客户"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Brand multi-select */}
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">按品牌</label>
|
||
<BatchMultiSelect
|
||
options={filterOptions.brands}
|
||
selected={filterBrands}
|
||
onChange={setFilterBrands}
|
||
placeholder="选择品牌"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{/* Project */}
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">项目</label>
|
||
<select
|
||
className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
|
||
value={filterProject}
|
||
onChange={(e) => setFilterProject(e.target.value)}
|
||
>
|
||
<option value="All">无限制</option>
|
||
{filterOptions.projects.map(p => <option key={p} value={p}>{p}</option>)}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Rent Status */}
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">租赁状态</label>
|
||
<select
|
||
className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
|
||
value={filterRentStatus}
|
||
onChange={(e) => setFilterRentStatus(e.target.value)}
|
||
>
|
||
<option value="All">无限制</option>
|
||
{filterOptions.rentStatuses.map(s => <option key={s} value={s}>{s}</option>)}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{/* Entity */}
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">主体查询</label>
|
||
<select
|
||
className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
|
||
value={filterEntity}
|
||
onChange={(e) => setFilterEntity(e.target.value)}
|
||
>
|
||
<option value="All">无限制</option>
|
||
{filterOptions.entities.map(e => <option key={e} value={e}>{e}</option>)}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Plate Prefix */}
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">车牌区域</label>
|
||
<select
|
||
className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
|
||
value={filterPlatePrefix}
|
||
onChange={(e) => setFilterPlatePrefix(e.target.value)}
|
||
>
|
||
<option value="All">无限制</option>
|
||
{filterOptions.platePrefixes.map(p => <option key={p.prefix} value={p.prefix}>{p.prefix}（{p.count}）</option>)}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Mileage Range */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">里程 ≥ (KM)</label>
|
||
<input
|
||
type="number"
|
||
placeholder="不限"
|
||
className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
|
||
value={filterMileageRange.min}
|
||
onChange={(e) => setFilterMileageRange(prev => ({ ...prev, min: e.target.value }))}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">里程 ≤ (KM)</label>
|
||
<input
|
||
type="number"
|
||
placeholder="不限"
|
||
className="w-full bg-slate-50 border-none rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-blue-500/20 outline-none"
|
||
value={filterMileageRange.max}
|
||
onChange={(e) => setFilterMileageRange(prev => ({ ...prev, max: e.target.value }))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-between items-center pt-4 border-t border-slate-50">
|
||
<button
|
||
onClick={() => {
|
||
setSearchTerm('');
|
||
setFilterDept('All');
|
||
setFilterPlates([]);
|
||
setFilterCustomer('All');
|
||
setFilterProject('All');
|
||
setFilterEntity('All');
|
||
setFilterPlatePrefix('All');
|
||
setFilterTargetNames([]);
|
||
setFilterRegion('All');
|
||
setFilterMileageRange({ min: '', max: '' });
|
||
setAppliedMileageRange({ min: '', max: '' });
|
||
setFilterBrands([]);
|
||
const today = defaultMileageDate();
|
||
setRangeStart(today);
|
||
setRangeEnd(today);
|
||
}}
|
||
className="text-[10px] font-bold text-slate-400 hover:text-slate-600"
|
||
>
|
||
重置所有
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setAppliedMileageRange({ ...filterMileageRange });
|
||
setIsFilterOpen(false);
|
||
}}
|
||
className="bg-blue-600 text-white px-6 py-2 rounded-xl text-xs font-bold shadow-lg shadow-blue-100"
|
||
>
|
||
完成筛选
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{/* Active Filter Tags */}
|
||
{(() => {
|
||
const tags: { label: string; onClear: () => void }[] = [];
|
||
if (filterTargetNames.length > 0) tags.push({
|
||
label: filterTargetNames.length === filterOptions.targetNames.length ? '批次: 全部批次' : `批次: ${filterTargetNames.length === 1 ? filterTargetNames[0] : `${filterTargetNames[0]} 等${filterTargetNames.length}`}`,
|
||
onClear: () => setFilterTargetNames([])
|
||
});
|
||
if (filterRegion !== 'All') tags.push({ label: `区域: ${filterRegion}`, onClear: () => setFilterRegion('All') });
|
||
if (filterPlates.length > 0) tags.push({ label: `车牌: ${filterPlates.length === 1 ? filterPlates[0] : `${filterPlates[0]} 等${filterPlates.length}`}`, onClear: () => setFilterPlates([]) });
|
||
if (filterRentStatus !== 'All') tags.push({ label: `状态: ${filterRentStatus}`, onClear: () => setFilterRentStatus('All') });
|
||
if (filterDept !== 'All') tags.push({ label: `部门: ${filterDept === '__EMPTY__' ? '无值' : filterDept}`, onClear: () => setFilterDept('All') });
|
||
if (filterCustomer !== 'All') tags.push({ label: `客户: ${filterCustomer === '__EMPTY__' ? '无值' : filterCustomer}`, onClear: () => setFilterCustomer('All') });
|
||
if (filterBrands.length > 0) tags.push({
|
||
label: `品牌: ${filterBrands.length === 1 ? filterBrands[0] : `${filterBrands[0]} 等${filterBrands.length}`}`,
|
||
onClear: () => setFilterBrands([])
|
||
});
|
||
if (filterProject !== 'All') tags.push({ label: `项目: ${filterProject}`, onClear: () => setFilterProject('All') });
|
||
if (filterEntity !== 'All') tags.push({ label: `主体: ${filterEntity}`, onClear: () => setFilterEntity('All') });
|
||
if (searchTerm) tags.push({ label: `搜索: ${searchTerm}`, onClear: () => setSearchTerm('') });
|
||
if (appliedMileageRange.min) tags.push({ label: `里程≥${appliedMileageRange.min}`, onClear: () => { setFilterMileageRange(prev => ({ ...prev, min: '' })); setAppliedMileageRange(prev => ({ ...prev, min: '' })); } });
|
||
if (appliedMileageRange.max) tags.push({ label: `里程≤${appliedMileageRange.max}`, onClear: () => { setFilterMileageRange(prev => ({ ...prev, max: '' })); setAppliedMileageRange(prev => ({ ...prev, max: '' })); } });
|
||
if (filterPlatePrefix !== 'All') tags.push({ label: `车牌段: ${filterPlatePrefix}`, onClear: () => setFilterPlatePrefix('All') });
|
||
if (rangeStart || rangeEnd) tags.push({
|
||
label: `区间: ${normalizeRangeLabel(rangeStart, rangeEnd)}`,
|
||
onClear: () => {
|
||
const today = defaultMileageDate();
|
||
setRangeStart(today);
|
||
setRangeEnd(today);
|
||
}
|
||
});
|
||
if (tags.length === 0) return null;
|
||
const clearAll = () => {
|
||
setFilterDept('All'); setFilterCustomer('All'); setFilterRentStatus('All'); setFilterProject('All'); setFilterEntity('All');
|
||
setFilterPlates([]); setSearchTerm(''); setFilterPlatePrefix('All'); setFilterTargetNames([]); setFilterRegion('All');
|
||
setFilterMileageRange({ min: '', max: '' }); setAppliedMileageRange({ min: '', max: '' });
|
||
setFilterBrands([]);
|
||
const today = defaultMileageDate();
|
||
setRangeStart(today); setRangeEnd(today);
|
||
};
|
||
return (
|
||
<div className="flex flex-wrap items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 py-2 shadow-sm">
|
||
<span className="mr-1 text-[10px] font-black text-slate-500">已选条件</span>
|
||
{tags.map((tag, i) => (
|
||
<span key={i} className="inline-flex items-center gap-1 rounded-md bg-blue-50 px-2 py-1 text-[10px] font-bold text-blue-600">
|
||
{tag.label}
|
||
<button onClick={tag.onClear} className="hover:text-blue-800 ml-0.5">×</button>
|
||
</span>
|
||
))}
|
||
<button onClick={clearAll} className="text-[10px] font-bold text-rose-500 hover:text-rose-600 ml-auto">
|
||
清除全部
|
||
</button>
|
||
</div>
|
||
);
|
||
})()}
|
||
|
||
{/* Sticky header: KPI + 清单标题 */}
|
||
<div className="sticky top-[44px] z-20 bg-[var(--app-bg)] pt-1 pb-1 space-y-2">
|
||
<div className={`grid grid-cols-4 gap-2 transition-opacity ${pageLoading ? 'opacity-60' : ''}`}>
|
||
<div className="relative col-span-2 flex min-h-[68px] flex-col justify-center overflow-hidden rounded-xl bg-slate-900 p-2.5 text-white">
|
||
<div className="text-[7px] font-bold text-slate-500 uppercase tracking-wider">{sortBy === 'total' ? '累计' : (isRangeMode ? '区间' : '当日')}总里程</div>
|
||
<div className="text-lg font-black tracking-tighter leading-tight flex items-baseline gap-1">
|
||
{pageLoading ? <div className="h-5 w-20 bg-slate-700 rounded animate-pulse"></div> : <>{Math.round(sortBy === 'total' ? stats.totalAll : stats.totalToday).toLocaleString()} <span className="text-[8px] text-slate-400">km</span></>}
|
||
</div>
|
||
<div className="mt-0.5 truncate text-[8px] font-bold text-slate-500">{rangeLabel}</div>
|
||
</div>
|
||
<div className="flex min-h-[68px] flex-col justify-center rounded-xl border border-gray-100 bg-white p-2.5 shadow-sm">
|
||
<div className="text-[7px] font-bold text-slate-400 uppercase">平均单车</div>
|
||
<div className="text-sm font-black text-slate-800 leading-tight">{pageLoading ? <div className="h-4 w-8 bg-slate-100 rounded animate-pulse"></div> : (stats.vehicleCount > 0 ? (sortBy === 'total' ? stats.totalAll : stats.totalToday) / stats.vehicleCount : 0).toFixed(0)}</div>
|
||
<div className="text-[7px] text-slate-400">km/台</div>
|
||
</div>
|
||
<div className="flex min-h-[68px] flex-col justify-center rounded-xl border border-gray-100 bg-white p-2.5 shadow-sm">
|
||
<div className="text-[7px] font-bold text-slate-400 uppercase">监控台数</div>
|
||
<div className="text-sm font-black text-slate-800 leading-tight">{pageLoading ? <div className="h-4 w-8 bg-slate-100 rounded animate-pulse"></div> : stats.vehicleCount}</div>
|
||
<div className="text-[7px] text-slate-400">台</div>
|
||
</div>
|
||
</div>
|
||
<div className="rounded-xl border border-slate-100 bg-white shadow-sm overflow-hidden">
|
||
{pageLoading ? (
|
||
<div className="h-[74px] bg-slate-50 animate-pulse" />
|
||
) : isRangeMode ? (
|
||
<div className="grid grid-cols-[92px_minmax(0,1fr)_62px] items-center gap-2 px-2 py-2">
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-1 text-[10px] font-black text-slate-700">
|
||
<CalendarDays size={12} className="text-blue-500" />
|
||
区间走势
|
||
</div>
|
||
<div className="mt-1 text-[9px] font-bold text-slate-400">{rangeDailyTotals.length} 天 · km</div>
|
||
</div>
|
||
<div className="h-[58px] min-w-0">
|
||
{rangeDailyTotals.length === 0 ? (
|
||
<div className="flex h-full items-center justify-center rounded-lg bg-slate-50 text-[10px] font-bold text-slate-300">暂无趋势</div>
|
||
) : (
|
||
<ResponsiveContainer width="100%" height={58} minWidth={0}>
|
||
<BarChart data={rangeDailyTotals} margin={{ top: 4, right: 2, bottom: 0, left: 2 }}>
|
||
<XAxis dataKey="date" hide />
|
||
<Tooltip
|
||
formatter={(value) => [`${Number(value ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 2 })} km`, '当日里程']}
|
||
labelFormatter={(label) => `日期 ${String(label)}`}
|
||
contentStyle={{ borderRadius: 10, borderColor: '#e2e8f0', fontSize: 11 }}
|
||
cursor={{ fill: 'rgba(37, 99, 235, 0.06)' }}
|
||
/>
|
||
{averageDailyKm > 0 && <ReferenceLine y={averageDailyKm} stroke="#f59e0b" strokeDasharray="3 3" />}
|
||
<Bar dataKey="totalKm" radius={[3, 3, 0, 0]} fill="#38bdf8" />
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
)}
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-[9px] font-black text-slate-400">日均</div>
|
||
<div className="text-xs font-black text-slate-800">{Math.round(averageDailyKm).toLocaleString()}</div>
|
||
<div className="text-[9px] font-bold text-slate-400">km</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="grid min-h-[64px] grid-cols-[minmax(0,1fr)_86px_86px] items-stretch gap-2 px-3 py-2 md:grid-cols-[minmax(0,1fr)_110px_110px]">
|
||
<div className="flex min-w-0 flex-col justify-center">
|
||
<div className="flex items-center gap-1 text-[10px] font-black text-slate-700">
|
||
<CalendarDays size={12} className="text-blue-500" />
|
||
单日概览
|
||
</div>
|
||
<div className="mt-1 truncate text-[9px] font-bold text-slate-400">{rangeLabel} · 单位 km</div>
|
||
</div>
|
||
<div className="flex flex-col justify-center rounded-lg bg-blue-50 px-2 py-1.5 text-right">
|
||
<div className="text-[9px] font-black text-blue-400">当日总计</div>
|
||
<div className="mt-1 text-xs font-black tabular-nums text-blue-700">{Math.round(stats.totalToday).toLocaleString()}</div>
|
||
</div>
|
||
<div className="flex flex-col justify-center rounded-lg bg-slate-50 px-2 py-1.5 text-right">
|
||
<div className="text-[9px] font-black text-slate-400">日均单车</div>
|
||
<div className="mt-1 text-xs font-black tabular-nums text-slate-800">{stats.vehicleCount > 0 ? Math.round(stats.totalToday / stats.vehicleCount).toLocaleString() : 0}</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center justify-between px-1">
|
||
<span className="text-[9px] font-black text-slate-400 uppercase tracking-widest">车辆详情清单</span>
|
||
<span className="text-[9px] font-bold text-slate-400">
|
||
已加载 {filteredVehicles.length} / 共 {total} 条
|
||
</span>
|
||
</div>
|
||
<div className="hidden grid-cols-[minmax(190px,1.1fr)_minmax(160px,1fr)_130px_130px] items-center gap-3 rounded-lg border border-slate-200 bg-white px-4 py-2 text-[10px] font-bold text-slate-400 md:grid">
|
||
<span>车牌 / 数据状态</span>
|
||
<span>客户 / 归属</span>
|
||
<span className="text-right">{isRangeMode ? '区间里程' : '当日里程'}</span>
|
||
<span className="text-right">累计里程</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Vehicle List */}
|
||
<div className="space-y-1.5">
|
||
|
||
{pageLoading && (
|
||
<div className="space-y-1.5">
|
||
{Array.from({ length: 6 }).map((_, i) => (
|
||
<div key={i} className="bg-white px-3 py-3 rounded-xl border border-slate-50 shadow-sm flex items-center justify-between animate-pulse">
|
||
<div className="flex items-center gap-3 flex-1">
|
||
<div className="w-8 h-8 rounded-lg bg-slate-100"></div>
|
||
<div className="space-y-1.5 flex-1">
|
||
<div className="h-3 bg-slate-100 rounded w-24"></div>
|
||
<div className="h-2 bg-slate-50 rounded w-36"></div>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-1.5 text-right">
|
||
<div className="h-4 bg-slate-100 rounded w-16 ml-auto"></div>
|
||
<div className="h-2 bg-slate-50 rounded w-20 ml-auto"></div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-1 gap-1.5">
|
||
{filteredVehicles.map((v) => {
|
||
const highMileageAlert = isHighMileageAlert(v);
|
||
const statisticTime = vehicleStatisticTime(v, relativeNow);
|
||
const sourceDisplay = vehicleSourceDisplay(v);
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
key={v.plate}
|
||
className="grid cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2.5 shadow-sm transition-all hover:border-blue-200 hover:shadow-md active:bg-slate-50 md:grid-cols-[minmax(190px,1.1fr)_minmax(160px,1fr)_130px_130px] md:px-4"
|
||
onClick={() => openVehicleDetail(v)}
|
||
>
|
||
<div className="flex min-w-0 items-center gap-3 overflow-hidden">
|
||
<div className="relative flex-shrink-0">
|
||
<div className="w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center">
|
||
<Truck size={14} className="text-slate-400" />
|
||
</div>
|
||
<div className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white ${v.isOnline ? 'bg-green-500' : 'bg-slate-300'}`} title={v.isOnline ? '在线' : '离线'}></div>
|
||
</div>
|
||
<div className="overflow-hidden flex-1">
|
||
<div className="flex flex-wrap items-center gap-1.5">
|
||
<span className="text-xs font-black text-slate-900 font-mono"><Blur>{v.plate}</Blur></span>
|
||
<span className={`text-[8px] px-1 rounded ${v.isOnline ? 'bg-green-50 text-green-600' : 'bg-slate-100 text-slate-400'} font-bold`}>
|
||
{v.isOnline ? '在线' : '离线'}
|
||
</span>
|
||
<span
|
||
className={`inline-flex shrink-0 rounded px-1.5 py-0.5 text-[7px] font-black ${sourceDisplay.className}`}
|
||
title={sourceDisplay.title}
|
||
>
|
||
{sourceDisplay.label}
|
||
</span>
|
||
</div>
|
||
<div className={`text-[8px] font-bold ${statisticTime.color}`} title={statisticTime.title}>
|
||
{statisticTime.label}
|
||
</div>
|
||
<div className="flex items-center gap-1.5 md:hidden">
|
||
<span className="text-[8px] text-slate-300 font-bold">{v.rentStatus || ''}{v.department ? ` · ${v.department.replace('业务', '')}` : ''}</span>
|
||
<span className="text-[9px] font-bold text-slate-600 truncate"><Blur>{v.customer || '-'}</Blur></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="hidden min-w-0 md:block">
|
||
<div className="truncate text-xs font-bold text-slate-700"><Blur>{v.customer || '-'}</Blur></div>
|
||
<div className="mt-1 truncate text-[9px] font-medium text-slate-400">
|
||
{[v.rentStatus, v.department?.replace('业务', ''), v.project].filter(Boolean).join(' · ') || '暂无归属信息'}
|
||
</div>
|
||
</div>
|
||
<div className="hidden text-right md:block">
|
||
<div className={`text-sm font-black tabular-nums ${highMileageAlert ? 'text-red-600' : 'text-blue-600'}`}>
|
||
{Math.max(0, v.dailyKm || 0).toLocaleString()}
|
||
<span className="ml-1 text-[9px] font-bold text-slate-400">km</span>
|
||
</div>
|
||
</div>
|
||
<div className="hidden text-right md:block">
|
||
<div className="text-xs font-black tabular-nums text-slate-700">
|
||
{v.totalKm != null ? v.totalKm.toLocaleString() : '-'}
|
||
<span className="ml-1 text-[9px] font-bold text-slate-400">km</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-shrink-0 flex-col items-end text-right md:hidden">
|
||
<div className="flex items-center gap-1 mb-0.5">
|
||
{!v.isDataSynced && v.totalKm == null && (
|
||
<div className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" title="未对接车机数据"></div>
|
||
)}
|
||
<span className="text-[7px] font-black text-blue-600/50 bg-blue-50 w-3 h-3 rounded flex items-center justify-center leading-none" title={isRangeMode ? '区间内里程' : '当日里程'}>区</span>
|
||
<div className={`text-sm font-black leading-none ${(v.isDataSynced || v.totalKm != null) ? (highMileageAlert ? 'text-red-600' : 'text-blue-600') : 'text-amber-600'}`}>
|
||
{(v.isDataSynced || v.totalKm != null) ? <>{Math.max(0, v.dailyKm || 0).toLocaleString()} <span className={`text-[8px] ${highMileageAlert ? 'text-red-400' : 'text-slate-400'}`}>km</span></> : <span className="text-[7px] text-amber-500/70">未对接</span>}
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<span className="text-[7px] font-black text-slate-400/60 bg-slate-100 w-3 h-3 rounded flex items-center justify-center leading-none">总</span>
|
||
<span className="text-[8px] font-bold text-slate-300">
|
||
{v.totalKm != null ? `${v.totalKm.toLocaleString()} km` : '未对接'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{filteredVehicles.length === 0 && !loadingMore && !pageError && (
|
||
<div className="py-10 text-center bg-white rounded-2xl border border-dashed border-slate-100">
|
||
<p className="text-xs font-bold text-slate-300">未找到匹配数据</p>
|
||
</div>
|
||
)}
|
||
|
||
{pageError && (
|
||
<div className="rounded-xl border border-rose-100 bg-rose-50 px-3 py-3 text-center">
|
||
<p className="text-[10px] font-bold text-rose-600">{pageError.message}</p>
|
||
<button
|
||
type="button"
|
||
onClick={() => pageError.scope === 'more' ? loadMore() : loadFirstPage()}
|
||
disabled={pageLoading || loadingMore}
|
||
className="mt-2 inline-flex h-8 items-center gap-1.5 rounded-lg border border-rose-200 bg-white px-3 text-[10px] font-black text-rose-700 transition-colors hover:bg-rose-100 disabled:cursor-not-allowed disabled:opacity-60"
|
||
>
|
||
<RefreshCw size={12} className={pageLoading || loadingMore ? 'animate-spin' : ''} />
|
||
重试
|
||
</button>
|
||
</div>
|
||
)}
|
||
{hasMore && !pageError && filteredVehicles.length > 0 && (
|
||
<div className="flex flex-col items-center gap-1.5 py-4">
|
||
<button
|
||
type="button"
|
||
onClick={loadMore}
|
||
disabled={loadingMore}
|
||
className="inline-flex h-9 items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-4 text-[11px] font-black text-slate-700 shadow-sm transition-colors hover:border-blue-200 hover:text-blue-600 disabled:cursor-not-allowed disabled:opacity-60"
|
||
>
|
||
{loadingMore ? <RefreshCw size={13} className="animate-spin" /> : <ChevronDown size={14} />}
|
||
{loadingMore ? '加载中' : '加载更多'}
|
||
</button>
|
||
<span className="text-[9px] font-bold text-slate-300">
|
||
已加载 {filteredVehicles.length} / 共 {total} 条
|
||
</span>
|
||
</div>
|
||
)}
|
||
{!hasMore && filteredVehicles.length > 0 && (
|
||
<div className="py-4 text-center">
|
||
<span className="text-[10px] font-bold text-slate-300">已加载全部 {total} 条</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<VehicleDetailModal
|
||
vehicle={detailVehicle}
|
||
onClose={closeVehicleDetail}
|
||
sourcePriority={sourcePriority}
|
||
/>
|
||
|
||
{/* 回到顶部按钮 */}
|
||
<AnimatePresence>
|
||
{showBackToTop && (
|
||
<motion.button
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 0.8 }}
|
||
onClick={scrollToTop}
|
||
className="fixed bottom-20 right-4 md:bottom-6 md:right-6 z-40 w-10 h-10 bg-blue-600 text-white rounded-full shadow-lg shadow-blue-200 flex items-center justify-center active:scale-95 transition-transform"
|
||
>
|
||
<ChevronsUp size={18} />
|
||
</motion.button>
|
||
)}
|
||
</AnimatePresence>
|
||
</>
|
||
);
|
||
}
|