diff --git a/src/App.tsx b/src/App.tsx index a2d42c6..370bd9a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -172,7 +172,7 @@ export default function App() { const [inventoryTab, setInventoryTab] = useState<'region' | 'model'>('region'); const [expandedInventoryRegions, setExpandedInventoryRegions] = useState>(new Set()); const [expandedInventoryTypes, setExpandedInventoryTypes] = useState>(new Set(['4.5T普货'])); - const [inventoryFilters, setInventoryFilters] = useState({ region: '', city: '', brand: '', batch: '', model: '' }); + const [inventoryFilters, setInventoryFilters] = useState({ region: '', city: '', brand: '', type: '', model: '' }); const [isInventoryFilterOpen, setIsInventoryFilterOpen] = useState(false); // Chart view states @@ -363,15 +363,23 @@ export default function App() { const mr = !inventoryFilters.region || s.region === inventoryFilters.region; const mc = !inventoryFilters.city || s.city === inventoryFilters.city; const mb = !inventoryFilters.brand || s.brand === inventoryFilters.brand; - const mbt = !inventoryFilters.batch || s.batch === inventoryFilters.batch; + const mt = !inventoryFilters.type || s.type === inventoryFilters.type; const mm = !inventoryFilters.model || s.model === inventoryFilters.model; - return mr && mc && mb && mbt && mm; + return mr && mc && mb && mt && mm; }), [inventoryData, inventoryFilters]); const uniqueInventoryBrands = useMemo(() => Array.from(new Set(inventoryData.map((s) => s.brand).filter(Boolean))), [inventoryData]); const uniqueInventoryRegions = useMemo(() => Array.from(new Set(inventoryData.map((s) => s.region))), [inventoryData]); const uniqueInventoryCities = useMemo(() => Array.from(new Set(inventoryData.map((s) => s.city).filter(Boolean))), [inventoryData]); - const uniqueInventoryBatches = useMemo(() => Array.from(new Set(inventoryData.map((s) => s.batch).filter(Boolean))), [inventoryData]); + const INVENTORY_TYPE_ORDER_LIST = ['4.5T普货', '4.5T冷链', '18T', '49T', '挂车', '其他']; + const uniqueInventoryTypes = useMemo(() => { + const types = Array.from(new Set(inventoryData.map((s) => s.type).filter(Boolean))); + return types.sort((a, b) => INVENTORY_TYPE_ORDER_LIST.indexOf(a) - INVENTORY_TYPE_ORDER_LIST.indexOf(b)); + }, [inventoryData]); + const uniqueInventoryModelsForType = useMemo(() => { + const source = inventoryFilters.type ? inventoryData.filter((s) => s.type === inventoryFilters.type) : inventoryData; + return Array.from(new Set(source.map((s) => s.model).filter(Boolean))); + }, [inventoryData, inventoryFilters.type]); const inventoryByRegion = useMemo(() => { const result: Record> = {}; @@ -992,14 +1000,14 @@ export default function App() { @@ -1017,7 +1025,7 @@ export default function App() {

库存统计 - 数据筛选

- - setInventoryFilters({...inventoryFilters, type: e.target.value, model: ''})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"> - {uniqueInventoryModels.map(m => )} + {uniqueInventoryTypes.map(t => )} + +
+
+ +
@@ -1085,7 +1100,7 @@ export default function App() { {/* Active Filters Bar */} - {(inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.batch || inventoryFilters.model) && ( + {(inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.type || inventoryFilters.model) && (
当前筛选: {inventoryFilters.region && ( @@ -1106,20 +1121,20 @@ export default function App() { )} - {inventoryFilters.batch && ( + {inventoryFilters.type && ( - 批次: {inventoryFilters.batch} - + 车型: {inventoryFilters.type} + )} {inventoryFilters.model && ( - 车型: {inventoryFilters.model} + 批次: {inventoryFilters.model} )}