You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
564 lines
22 KiB
HTML
564 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>人力资源管理系统 - 多维统计</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#2D5CF6',
|
|
secondary: '#F5F6FA'
|
|
},
|
|
borderRadius: {
|
|
'none': '0px',
|
|
'sm': '2px',
|
|
DEFAULT: '4px',
|
|
'md': '8px',
|
|
'lg': '12px',
|
|
'xl': '16px',
|
|
'2xl': '20px',
|
|
'3xl': '24px',
|
|
'full': '9999px',
|
|
'button': '4px'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
[type="number"]::-webkit-inner-spin-button,
|
|
[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
.fa-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-[1024px] bg-secondary font-sans">
|
|
<!-- 顶部导航 -->
|
|
<!-- <header class="w-full bg-primary text-white shadow-md">
|
|
<div class="container mx-auto px-6 h-16 flex items-center justify-between">
|
|
<div class="flex items-center space-x-8">
|
|
<a href="#" class="text-2xl font-['Pacifico']">人力</a>
|
|
<nav class="hidden md:flex space-x-6">
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">多维统计</a>
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">人员管理</a>
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">组织管理</a>
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">考勤管理</a>
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">绩效管理</a>
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">薪酬管理</a>
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">知识库</a>
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">后台管理</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索..." class="bg-white/20 text-sm px-4 py-2 rounded-button w-48 focus:outline-none focus:ring-2 focus:ring-white/50">
|
|
<i class="fa-icon fa-solid fa-magnifying-glass absolute right-3 top-1/2 transform -translate-y-1/2 text-white/70"></i>
|
|
</div>
|
|
<button class="flex items-center space-x-1 bg-white/10 hover:bg-white/20 px-3 py-1 rounded-button transition">
|
|
<i class="fa-icon fa-solid fa-robot"></i>
|
|
<span class="text-sm">AI助手</span>
|
|
</button>
|
|
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-user"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header> -->
|
|
|
|
<!-- 主要内容 -->
|
|
<main class="container mx-auto px-6 py-8">
|
|
<!-- 数据卡片行 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-gray-500 text-sm">员工总数</p>
|
|
<p class="text-3xl font-bold mt-2">1,248</p>
|
|
</div>
|
|
<div class="bg-green-100 text-green-800 px-2 py-1 rounded-button text-xs flex items-center">
|
|
<i class="fa-icon fa-solid fa-arrow-up mr-1"></i>
|
|
<span>5.2%</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-500 text-xs mt-2">较上月增加 62 人</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
|
|
<div>
|
|
<p class="text-gray-500 text-sm">本月入职</p>
|
|
<p class="text-3xl font-bold mt-2">87</p>
|
|
</div>
|
|
<p class="text-gray-500 text-xs mt-2">其中社招 52 人，校招 35 人</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
|
|
<div>
|
|
<p class="text-gray-500 text-sm">本月离职</p>
|
|
<p class="text-3xl font-bold mt-2">25</p>
|
|
</div>
|
|
<p class="text-gray-500 text-xs mt-2">主动离职 18 人，被动离职 7 人</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
|
|
<div>
|
|
<p class="text-gray-500 text-sm">平均工龄</p>
|
|
<p class="text-3xl font-bold mt-2">3.2</p>
|
|
</div>
|
|
<p class="text-gray-500 text-xs mt-2">年，较行业平均高 0.8 年</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表行1 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
<h3 class="text-lg font-semibold mb-4">部门人员分布</h3>
|
|
<div class="chart-container" id="departmentChart"></div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
<h3 class="text-lg font-semibold mb-4">职位分布</h3>
|
|
<div class="chart-container" id="positionChart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表行2 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
<h3 class="text-lg font-semibold mb-4">员工年龄分布</h3>
|
|
<div class="chart-container" id="ageChart"></div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
<h3 class="text-lg font-semibold mb-4">员工工龄分布</h3>
|
|
<div class="chart-container" id="seniorityChart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表行3 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
<h3 class="text-lg font-semibold mb-4">员工绩效分布</h3>
|
|
<div class="chart-container" id="performanceChart"></div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
<h3 class="text-lg font-semibold mb-4">招聘渠道分布</h3>
|
|
<div class="chart-container" id="recruitmentChart"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="w-full bg-gray-800 text-white py-8 mt-auto">
|
|
<div class="container mx-auto px-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4">关于我们</h3>
|
|
<p class="text-sm text-gray-400 mb-4">人力科技是一家专注于企业人力资源数字化解决方案的高科技公司，致力于为企业提供智能化的人力资源管理工具。</p>
|
|
<div class="flex space-x-4">
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fa-icon fa-brands fa-weixin"></i></a>
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fa-icon fa-brands fa-weibo"></i></a>
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fa-icon fa-brands fa-linkedin"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4">快速链接</h3>
|
|
<ul class="space-y-2">
|
|
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">产品介绍</a></li>
|
|
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">解决方案</a></li>
|
|
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">客户案例</a></li>
|
|
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">价格方案</a></li>
|
|
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">帮助中心</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4">联系我们</h3>
|
|
<ul class="space-y-2 text-sm text-gray-400">
|
|
<li class="flex items-start">
|
|
<i class="fa-icon fa-solid fa-map-marker-alt mt-1 mr-2"></i>
|
|
<span>北京市海淀区中关村软件园 12 号楼 3 层</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fa-icon fa-solid fa-phone mr-2"></i>
|
|
<span>400-888-8888</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fa-icon fa-solid fa-envelope mr-2"></i>
|
|
<span>contact@hrtech.com</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-400">
|
|
<p>© 2023 人力科技 版权所有 | 京ICP备12345678号-1 | 京公网安备11010802023456号</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 部门分布图表
|
|
const departmentChart = echarts.init(document.getElementById('departmentChart'));
|
|
departmentChart.setOption({
|
|
animation: false,
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: 10,
|
|
top: 'center',
|
|
data: ['技术部', '产品部', '市场部', '销售部', '人力资源', '财务部', '行政部']
|
|
},
|
|
series: [
|
|
{
|
|
name: '部门分布',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 4,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '18',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 320, name: '技术部' },
|
|
{ value: 240, name: '产品部' },
|
|
{ value: 149, name: '市场部' },
|
|
{ value: 180, name: '销售部' },
|
|
{ value: 98, name: '人力资源' },
|
|
{ value: 56, name: '财务部' },
|
|
{ value: 105, name: '行政部' }
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 职位分布图表
|
|
const positionChart = echarts.init(document.getElementById('positionChart'));
|
|
positionChart.setOption({
|
|
animation: false,
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: 10,
|
|
top: 'center',
|
|
data: ['工程师', '产品经理', '设计师', '市场专员', '销售代表', 'HRBP', '财务专员', '行政专员']
|
|
},
|
|
series: [
|
|
{
|
|
name: '职位分布',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 4,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '18',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 280, name: '工程师' },
|
|
{ value: 120, name: '产品经理' },
|
|
{ value: 90, name: '设计师' },
|
|
{ value: 80, name: '市场专员' },
|
|
{ value: 150, name: '销售代表' },
|
|
{ value: 60, name: 'HRBP' },
|
|
{ value: 40, name: '财务专员' },
|
|
{ value: 80, name: '行政专员' }
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 年龄分布图表
|
|
const ageChart = echarts.init(document.getElementById('ageChart'));
|
|
ageChart.setOption({
|
|
animation: false,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['20-25岁', '26-30岁', '31-35岁', '36-40岁', '41岁以上'],
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '人数',
|
|
type: 'bar',
|
|
barWidth: '60%',
|
|
itemStyle: {
|
|
color: '#2D5CF6'
|
|
},
|
|
data: [120, 480, 360, 180, 108]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 工龄分布图表
|
|
const seniorityChart = echarts.init(document.getElementById('seniorityChart'));
|
|
seniorityChart.setOption({
|
|
animation: false,
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: 10,
|
|
top: 'center',
|
|
data: ['1年以内', '1-3年', '3-5年', '5-10年', '10年以上']
|
|
},
|
|
series: [
|
|
{
|
|
name: '工龄分布',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 4,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '18',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 280, name: '1年以内' },
|
|
{ value: 420, name: '1-3年' },
|
|
{ value: 300, name: '3-5年' },
|
|
{ value: 180, name: '5-10年' },
|
|
{ value: 68, name: '10年以上' }
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 绩效分布图表
|
|
const performanceChart = echarts.init(document.getElementById('performanceChart'));
|
|
performanceChart.setOption({
|
|
animation: false,
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: 10,
|
|
top: 'center',
|
|
data: ['A(优秀)', 'B(良好)', 'C(合格)', 'D(待改进)']
|
|
},
|
|
series: [
|
|
{
|
|
name: '绩效分布',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 4,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '18',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 180, name: 'A(优秀)' },
|
|
{ value: 420, name: 'B(良好)' },
|
|
{ value: 480, name: 'C(合格)' },
|
|
{ value: 68, name: 'D(待改进)' }
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 招聘渠道图表
|
|
const recruitmentChart = echarts.init(document.getElementById('recruitmentChart'));
|
|
recruitmentChart.setOption({
|
|
animation: false,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['猎头', '招聘网站', '内部推荐', '校园招聘', '社交媒体']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value'
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
},
|
|
series: [
|
|
{
|
|
name: '猎头',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [5, 3, 7, 4, 6, 8]
|
|
},
|
|
{
|
|
name: '招聘网站',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [12, 10, 15, 18, 14, 16]
|
|
},
|
|
{
|
|
name: '内部推荐',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [8, 6, 10, 7, 9, 11]
|
|
},
|
|
{
|
|
name: '校园招聘',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [0, 0, 0, 15, 12, 10]
|
|
},
|
|
{
|
|
name: '社交媒体',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [3, 5, 4, 6, 5, 7]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 窗口大小变化时重新调整图表大小
|
|
window.addEventListener('resize', function() {
|
|
departmentChart.resize();
|
|
positionChart.resize();
|
|
ageChart.resize();
|
|
seniorityChart.resize();
|
|
performanceChart.resize();
|
|
recruitmentChart.resize();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|