fix: 移除工作台风险分布饼图区域，简化页面布局
This commit is contained in:
freedakgmail
@@ -1003,114 +1003,6 @@ export default function Dashboard() {
|
||||
{/* 风险提醒 Tab */}
|
||||
{(activeTab === 'risk' || activeTab === 'task') && (
|
||||
<div className="space-y-3">
|
||||
{/* 风险分布饼图（仅风险提醒Tab） */}
|
||||
{activeTab === 'risk' && isSectionVisible('risk_distribution') && (
|
||||
<Card>
|
||||
<h2 className="text-sm font-medium mb-3">风险分布</h2>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-32 h-32 shrink-0">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={[
|
||||
{ name: '合同风险', value: data.riskDistribution.contract, color: '#4F46E5' },
|
||||
{ name: '薪资风险', value: data.riskDistribution.salary, color: '#F59E0B' },
|
||||
{ name: '解聘风险', value: data.riskDistribution.termination, color: '#EF4444' },
|
||||
].filter(d => d.value > 0)}
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={30}
|
||||
outerRadius={55}
|
||||
paddingAngle={2}
|
||||
>
|
||||
{[
|
||||
{ name: '合同风险', value: data.riskDistribution.contract, color: '#4F46E5' },
|
||||
{ name: '薪资风险', value: data.riskDistribution.salary, color: '#F59E0B' },
|
||||
{ name: '解聘风险', value: data.riskDistribution.termination, color: '#EF4444' },
|
||||
].filter(d => d.value > 0).map((entry, i) => (
|
||||
<Cell key={i} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip formatter={(v: any) => `${v} 项`} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="flex-1 space-y-2">
|
||||
<button
|
||||
onClick={() => setDrillDownType(drillDownType === 'CONTRACT' ? null : 'CONTRACT')}
|
||||
className={`flex items-center justify-between w-full p-2 rounded-lg transition-colors ${drillDownType === 'CONTRACT' ? 'bg-primary/10' : 'hover:bg-gray-50'}`}
|
||||
>
|
||||
<span className="flex items-center gap-2 text-sm">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-primary" />
|
||||
合同风险
|
||||
</span>
|
||||
<span className="text-sm font-bold text-primary">{data.riskDistribution.contract}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDrillDownType(drillDownType === 'SALARY' ? null : 'SALARY')}
|
||||
className={`flex items-center justify-between w-full p-2 rounded-lg transition-colors ${drillDownType === 'SALARY' ? 'bg-warning/10' : 'hover:bg-gray-50'}`}
|
||||
>
|
||||
<span className="flex items-center gap-2 text-sm">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-warning" />
|
||||
薪资风险
|
||||
</span>
|
||||
<span className="text-sm font-bold text-warning">{data.riskDistribution.salary}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDrillDownType(drillDownType === 'TERMINATION' ? null : 'TERMINATION')}
|
||||
className={`flex items-center justify-between w-full p-2 rounded-lg transition-colors ${drillDownType === 'TERMINATION' ? 'bg-danger/10' : 'hover:bg-gray-50'}`}
|
||||
>
|
||||
<span className="flex items-center gap-2 text-sm">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-danger" />
|
||||
解聘风险
|
||||
</span>
|
||||
<span className="text-sm font-bold text-danger">{data.riskDistribution.termination}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{drillDownType && (
|
||||
<div className="mt-3 border-t pt-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-gray-600">
|
||||
{drillDownType === 'CONTRACT' ? '合同' : drillDownType === 'SALARY' ? '薪资' : '解聘'}风险明细
|
||||
</span>
|
||||
<button onClick={() => setDrillDownType(null)} className="text-xs text-gray-500 hover:text-gray-600">收起</button>
|
||||
</div>
|
||||
{(data.topRisks || []).filter(r => r.type === drillDownType).length > 0 ? (
|
||||
(data.topRisks || []).filter(r => r.type === drillDownType).map((r) => (
|
||||
<Link key={r.id} to={r.actionUrl} className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-50 text-xs">
|
||||
<AlertCircle className={`w-4 h-4 flex-shrink-0 ${r.level === 'high' ? 'text-danger' : 'text-warning'}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="truncate text-gray-800">{r.title}</span>
|
||||
{r.priority && priorityConfig[r.priority] && (
|
||||
<span className={`px-1 py-0.5 rounded text-xs font-medium ${priorityConfig[r.priority].bg} ${priorityConfig[r.priority].color}`}>
|
||||
{priorityConfig[r.priority].label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
{r.employeeName && <span>{r.employeeName}</span>}
|
||||
{r.estimatedLoss > 0 && <span className="text-red-600">损失 {fmt(r.estimatedLoss)}</span>}
|
||||
{r.daysUntilDeadline !== null && r.daysUntilDeadline <= 7 && (
|
||||
<span className="text-red-600">{r.daysUntilDeadline <= 0 ? '已逾期' : `${r.daysUntilDeadline}天`}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRight className="w-3 h-3 text-gray-500" />
|
||||
</Link>
|
||||
))
|
||||
) : (
|
||||
<div className="text-xs text-gray-500 text-center py-2">暂无高风险项</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 待办列表 */}
|
||||
{isSectionVisible(activeTab === 'risk' ? 'risk_todos' : 'task_todos') && (
|
||||
<Card>
|
||||
|
||||
@@ -125,6 +125,8 @@ export interface DashboardData {
|
||||
contract: number
|
||||
salary: number
|
||||
termination: number
|
||||
retirement: number
|
||||
monthly: number
|
||||
}
|
||||
riskTrend: {
|
||||
thisMonth: number
|
||||
|
||||
Reference in New Issue
Block a user