shishengliang/ln-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 去除客户Tab的饼图（客户运营地区占比）
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-03-29 09:39:10 +08:00
parent c70e4b52c4
commit 3e4122caec
1 changed files with 0 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/App.tsx
View File

@@ -2200,80 +2200,6 @@ export default function App() {
{tabReady && activeTab === 'customer' && (
<div className="flex flex-col gap-6">
{/* Customer Region Distribution Chart */}
<section className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-6">
<div className="flex items-center justify-between mb-5">
<div className="flex items-center gap-3">
<div className="w-1.5 h-6 bg-emerald-500 rounded-full"></div>
<h2 className="text-lg font-bold text-gray-800">客户运营地区占比</h2>
</div>
<div className="flex items-center bg-gray-100 rounded-lg p-0.5">
<button
onClick={() => setCustomerChartView('region')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${customerChartView === 'region' ? 'bg-white text-emerald-600 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
>按区域</button>
<button
onClick={() => setCustomerChartView('province')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${customerChartView === 'province' ? 'bg-white text-emerald-600 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
>按省份</button>
</div>
</div>
{(() => {
const PIE_COLORS = ['#6366f1','#06b6d4','#f59e0b','#f43f5e','#10b981','#a855f7','#94a3b8'];
const pieData = customerPieData;
const grandTotal = pieData.reduce((s,d) => s + d.value, 0);
return (
<div className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center">
{/* Donut chart */}
<div className="relative flex-shrink-0" style={{ width: 200, height: 200 }}>
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={pieData}
cx="50%" cy="50%"
innerRadius={68} outerRadius={90}
paddingAngle={3}
startAngle={90} endAngle={-270}
dataKey="value"
>
{pieData.map((_, i) => (
<Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} stroke="white" strokeWidth={2} />
))}
</Pie>
<Tooltip
formatter={(value) => [`${value} 辆`, '']}
contentStyle={{ borderRadius: '10px', border: 'none', boxShadow: '0 8px 24px -4px rgba(0,0,0,0.12)', fontSize: 12 }}
/>
</PieChart>
</ResponsiveContainer>
{/* Center label */}
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
<span className="text-2xl font-bold text-gray-800">{grandTotal}</span>
<span className="text-xs text-gray-400 mt-0.5">辆</span>
</div>
</div>
{/* Custom legend */}
<div className="flex-1 w-full space-y-2.5">
{pieData.map((item, i) => {
const pct = grandTotal > 0 ? (item.value / grandTotal * 100) : 0;
const color = PIE_COLORS[i % PIE_COLORS.length];
return (
<div key={i} className="flex items-center gap-2.5">
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ background: color }} />
<span className="text-sm text-gray-600 flex-1 min-w-0 truncate">{item.name}</span>
<div className="w-20 h-1.5 bg-gray-100 rounded-full overflow-hidden flex-shrink-0">
<div className="h-full rounded-full transition-all" style={{ width: `${pct}%`, background: color }} />
</div>
<span className="text-xs font-semibold text-gray-700 w-6 text-right flex-shrink-0">{item.value}</span>
<span className="text-xs text-gray-400 w-9 text-right flex-shrink-0">{pct.toFixed(1)}%</span>
</div>
);
})}
</div>
</div>
);
})()}
</section>
{/* Customer Operations Statistics Section */}
<section className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6 min-h-[420px]">