diff --git a/src/App.tsx b/src/App.tsx index 7fd0648..2615c1c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1619,6 +1619,328 @@ export default function App() { + {/* Customer Operations Statistics Section */} +
+
+
+
+
+

客户运营统计

+

*按客户维度统计资产分布

+
+
+ +
+ + + + {isCustomerFilterOpen && ( + <> + {/* Backdrop for closing */} +
setIsCustomerFilterOpen(false)} + /> + + {/* Popover Content */} + +
+

数据筛选

+ +
+ +
+
+ +
+ + setCustomerFilters(prev => ({ ...prev, customer: e.target.value }))} + /> +
+
+ +
+ +
+ + setCustomerFilters(prev => ({ ...prev, manager: e.target.value }))} + /> +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ +
+ + + )} + +
+
+ +
+ {/* Desktop Table View (Customer) */} +
+ + + + + + + + + + + + + + + + + {filteredCustomerStats.map((cust) => { + const isExpanded = expandedCustomers.has(cust.customer); + return ( + + toggleCustomer(cust.customer)} + > + + + + + + + + + + + + {isExpanded && ( + + + + )} + + ); + })} + +
客户名称所在区域关联业务员4.5T4.5T冷链18T49T挂车其他合计
+ {isExpanded ? : } + {cust.customer} + + {cust.region} + {cust.manager} { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '4.5T普货' }); }}>{cust.t4_5} { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '4.5T冷链' }); }}>{cust.t4_5c} { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '18T' }); }}>{cust.t18} { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '49T' }); }}>{cust.t49} { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, isTrailer: true }); }}>{cust.trailer} { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '其他' }); }}>{cust.other} { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer }); }}>{cust.total}
+
+
+
客户详情
+
{cust.customer}
+
主责业务员: {cust.manager}
+
+
+
主要车型
+
+ {cust.t49 > cust.t18 ? '49T 重卡' : (cust.t18 > cust.t4_5c ? '18T 货车' : '4.5T 轻卡')} +
+
+
+
运营状态
+
正常运营中
+
+
+
资产占比
+
+ {((cust.total / (customerData.reduce((s, c) => s + c.total, 0) || 1)) * 100).toFixed(1)}% +
+
+
+
+
+ + {/* Mobile Card View (Customer) */} +
+ {filteredCustomerStats.map((cust) => { + const isExpanded = expandedCustomers.has(cust.customer); + return ( +
+
toggleCustomer(cust.customer)} + > +
+ {isExpanded ? : } +
+ {cust.customer} + {cust.region}区域 +
+
+
+ 合计: {cust.total} +
+
+ + {isExpanded && ( +
+ {/* Details Cards for Mobile */} +
+
+
客户详情
+
{cust.customer}
+
主责: {cust.manager}
+
+
+
主要车型
+
+ {cust.t49 > cust.t18 ? '49T 重卡' : (cust.t18 > cust.t4_5c ? '18T 货车' : '4.5T 轻卡')} +
+
+
+
运营状态
+
正常运营中
+
+
+
资产占比
+
+ {((cust.total / (customerData.reduce((s, c) => s + c.total, 0) || 1)) * 100).toFixed(1)}% +
+
+
+ +
+
车型分布
+
+
setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '4.5T普货' })} + > +
4.5T
+
{cust.t4_5}
+
+
setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '4.5T冷链' })} + > +
冷链
+
{cust.t4_5c}
+
+
setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '18T' })} + > +
18T
+
{cust.t18}
+
+
setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '49T' })} + > +
49T
+
{cust.t49}
+
+
setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, isTrailer: true })} + > +
挂车
+
{cust.trailer}
+
+
setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, vehicleType: '其他' })} + > +
其他
+
{cust.other}
+
+
+
+
+ )} +
+ ); + })} +
+
+
+ {/* Plate Number Modal */} {showPlateNumbers && (