fix: 里程范围筛选接入后端

- 后端支持 mileageMin/mileageMax 查询参数
- 前端点击"完成筛选"时将里程范围提交到后端
- "重置所有"同时清除已应用的里程范围

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-01 23:14:56 +08:00
parent 863ab17b58
commit 2469da310d
3 changed files with 20 additions and 3 deletions

View File

@@ -104,6 +104,7 @@ export default function MonitoringView() {
const [filterEntity, setFilterEntity] = useState('All');
const [filterRegionCode, setFilterRegionCode] = useState('All');
const [filterMileageRange, setFilterMileageRange] = useState({ min: '', max: '' });
const [appliedMileageRange, setAppliedMileageRange] = useState({ min: '', max: '' });
const [vehicles, setVehicles] = useState<MonitoringVehicle[]>([]);
const [stats, setStats] = useState<MonitoringStats>({ totalToday: 0, totalAll: 0, onlineCount: 0, vehicleCount: 0 });
@@ -132,6 +133,8 @@ export default function MonitoringView() {
dept: filterDept !== 'All' ? filterDept : undefined,
project: filterProject !== 'All' ? filterProject : undefined,
entity: filterEntity !== 'All' ? filterEntity : undefined,
mileageMin: appliedMileageRange.min || undefined,
mileageMax: appliedMileageRange.max || undefined,
}).then(d => {
setVehicles(d.vehicles);
setStats(d.stats);
@@ -140,7 +143,7 @@ export default function MonitoringView() {
setPage(1);
setHasMore(d.page < d.totalPages);
}).catch(() => {});
}, [sortBy, sortOrder, searchTerm, filterDept, filterProject, filterEntity]);
}, [sortBy, sortOrder, searchTerm, filterDept, filterProject, filterEntity, appliedMileageRange]);
// 加载更多
const loadMore = useCallback(() => {
@@ -156,12 +159,14 @@ export default function MonitoringView() {
dept: filterDept !== 'All' ? filterDept : undefined,
project: filterProject !== 'All' ? filterProject : undefined,
entity: filterEntity !== 'All' ? filterEntity : undefined,
mileageMin: appliedMileageRange.min || undefined,
mileageMax: appliedMileageRange.max || undefined,
}).then(d => {
setVehicles(prev => [...prev, ...d.vehicles]);
setPage(nextPage);
setHasMore(nextPage < d.totalPages);
}).catch(() => {}).finally(() => setLoadingMore(false));
}, [sortBy, sortOrder, searchTerm, filterDept, filterProject, filterEntity, page, loadingMore, hasMore]);
}, [sortBy, sortOrder, searchTerm, filterDept, filterProject, filterEntity, appliedMileageRange, page, loadingMore, hasMore]);
// 筛选/排序变化时重新加载
useEffect(() => {
@@ -684,13 +689,17 @@ export default function MonitoringView() {
setFilterEntity('All');
setFilterRegionCode('All');
setFilterMileageRange({ min: '', max: '' });
setAppliedMileageRange({ min: '', max: '' });
}}
className="text-[10px] font-bold text-slate-400 hover:text-slate-600"
>
</button>
<button
onClick={() => setIsFilterOpen(false)}
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"
>