Sprint 4-5: 员工自助+考勤+合规+AI+搜索
This commit is contained in:
selfrelease
@@ -0,0 +1,179 @@
|
||||
/**
|
||||
* 薪酬分析看板 — 展示薪酬分布、部门对比、同比环比趋势
|
||||
*/
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import {
|
||||
BarChart3, TrendingUp, TrendingDown, Users, Wallet,
|
||||
} from 'lucide-react'
|
||||
import Card from '../components/ui/Card'
|
||||
import { Select } from '../components/ui/Input'
|
||||
import { InlineAlert } from '../components/ui/InlineAlert'
|
||||
import api from '../lib/api'
|
||||
|
||||
/** 金额格式化 */
|
||||
const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
|
||||
export default function SalaryDashboard() {
|
||||
const [year, setYear] = useState(new Date().getFullYear().toString())
|
||||
|
||||
/** 获取薪酬分析数据 */
|
||||
const { data, isLoading } = useQuery<any>({
|
||||
queryKey: ['salary-dashboard', year],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/salary/dashboard', { params: { year } }) as any
|
||||
return res.data
|
||||
},
|
||||
})
|
||||
|
||||
const departments = data?.departments || []
|
||||
const monthlyTrend = data?.monthlyTrend || []
|
||||
const summary = data?.summary || {}
|
||||
|
||||
/** 计算最大值用于柱状图比例 */
|
||||
const maxDeptAvg = useMemo(() => {
|
||||
if (departments.length === 0) return 1
|
||||
return Math.max(...departments.map((d: any) => d.avgSalary || 0), 1)
|
||||
}, [departments])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 页头 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5 text-primary" />
|
||||
<div>
|
||||
<h1 className="text-base font-semibold">薪酬分析看板</h1>
|
||||
<p className="mt-0.5 text-sm text-gray-500">薪酬分布、部门对比、趋势分析</p>
|
||||
</div>
|
||||
</div>
|
||||
<Select value={year} onChange={(e) => setYear(e.target.value)} className="!w-24">
|
||||
{Array.from({ length: 5 }, (_, i) => new Date().getFullYear() - i).map(y => (
|
||||
<option key={y} value={y}>{y}年</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8 text-gray-400">加载中...</div>
|
||||
) : !data ? (
|
||||
<Card><div className="text-center py-8 text-gray-400 text-sm">暂无数据</div></Card>
|
||||
) : (
|
||||
<>
|
||||
{/* 概览卡片 */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<Card className="p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-blue-500" />
|
||||
<span className="text-xs text-gray-400">员工总数</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold mt-1">{summary.totalEmployees || 0}</div>
|
||||
</Card>
|
||||
<Card className="p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wallet className="w-4 h-4 text-emerald-500" />
|
||||
<span className="text-xs text-gray-400">月均薪酬</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold mt-1">¥{fmt(summary.avgSalary)}</div>
|
||||
</Card>
|
||||
<Card className="p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4 text-purple-500" />
|
||||
<span className="text-xs text-gray-400">薪酬中位数</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold mt-1">¥{fmt(summary.medianSalary)}</div>
|
||||
</Card>
|
||||
<Card className="p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wallet className="w-4 h-4 text-amber-500" />
|
||||
<span className="text-xs text-gray-400">年度总薪酬</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold mt-1">¥{fmt(summary.totalAnnual)}</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 同比环比 */}
|
||||
{summary.yoy !== undefined && (
|
||||
<div className="flex gap-3">
|
||||
<Card className="flex-1 p-3">
|
||||
<div className="text-xs text-gray-400">同比增长率</div>
|
||||
<div className={`text-lg font-bold mt-1 flex items-center gap-1 ${summary.yoy >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
|
||||
{summary.yoy >= 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
||||
{summary.yoy >= 0 ? '+' : ''}{(summary.yoy || 0).toFixed(1)}%
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="flex-1 p-3">
|
||||
<div className="text-xs text-gray-400">环比增长率</div>
|
||||
<div className={`text-lg font-bold mt-1 flex items-center gap-1 ${summary.mom >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
|
||||
{summary.mom >= 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
||||
{summary.mom >= 0 ? '+' : ''}{(summary.mom || 0).toFixed(1)}%
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 部门薪酬对比 */}
|
||||
<Card>
|
||||
<h2 className="text-sm font-medium mb-4">部门薪酬对比</h2>
|
||||
{departments.length === 0 ? (
|
||||
<div className="text-center py-4 text-gray-400 text-sm">暂无部门数据</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{departments.map((dept: any) => (
|
||||
<div key={dept.name}>
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span className="text-gray-600">{dept.name}</span>
|
||||
<div className="flex items-center gap-3 text-xs text-gray-400">
|
||||
<span>{dept.count}人</span>
|
||||
<span className="font-medium text-gray-700">¥{fmt(dept.avgSalary)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary rounded-full transition-all"
|
||||
style={{ width: `${(dept.avgSalary / maxDeptAvg) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 月度趋势 */}
|
||||
<Card>
|
||||
<h2 className="text-sm font-medium mb-4">月度薪酬趋势</h2>
|
||||
{monthlyTrend.length === 0 ? (
|
||||
<div className="text-center py-4 text-gray-400 text-sm">暂无月度数据</div>
|
||||
) : (
|
||||
<div className="flex items-end gap-2 h-40">
|
||||
{monthlyTrend.map((m: any) => {
|
||||
const maxVal = Math.max(...monthlyTrend.map((t: any) => t.total || 0), 1)
|
||||
const height = ((m.total || 0) / maxVal) * 100
|
||||
return (
|
||||
<div key={m.month} className="flex-1 flex flex-col items-center gap-1">
|
||||
<div className="text-xs text-gray-400">{m.total ? `¥${(m.total / 10000).toFixed(1)}万` : ''}</div>
|
||||
<div className="w-full bg-gray-100 rounded-t-md flex-1 flex items-end overflow-hidden">
|
||||
<div
|
||||
className="w-full bg-primary/70 rounded-t-md transition-all hover:bg-primary"
|
||||
style={{ height: `${height}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">{m.month}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{summary.totalEmployees === 0 && (
|
||||
<InlineAlert type="info">
|
||||
当前年度暂无薪酬数据，请确保已发布发薪批次。
|
||||
</InlineAlert>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user