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.
563 lines
29 KiB
HTML
563 lines
29 KiB
HTML
1 day ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>人力资源管理系统</title>
|
||
|
|
<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">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
|
||
|
|
<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>
|
||
|
|
.marquee {
|
||
|
|
animation: marquee 20s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes marquee {
|
||
|
|
0% {
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.org-tree {
|
||
|
|
height: calc(100vh - 156px);
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.performance-dashboard {
|
||
|
|
height: calc(100vh - 156px);
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-container {
|
||
|
|
max-height: 400px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-header {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
background-color: white;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-avatar {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
background-image: url('https://mastergo.com/ai/api/search-image?query=professional20business20person20portrait20with20neutral20background20high20quality20realistic20detailed20face20corporate20style20suit20and20tie20sharp20focus20on20eyes20and20facial20features20studio20lighting20isolated20on20light20gray20background&width=64&height=64&orientation=squarish&flag=689e31f860f98150523d3e36c0018c44');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ai-assistant {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ai-assistant::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: -2px;
|
||
|
|
right: -2px;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
background-color: #00FF9D;
|
||
|
|
border-radius: 9999px;
|
||
|
|
animation: pulse 1.5s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.95);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: scale(1.2);
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(0.95);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="bg-secondary min-h-screen flex flex-col">
|
||
|
|
<!-- 顶部导航 -->
|
||
|
|
<header class="w-full">
|
||
|
|
<nav class="bg-primary text-white h-15 flex items-center px-6">
|
||
|
|
<div class="flex items-center space-x-8 w-full">
|
||
|
|
<div class="font-['Pacifico'] text-xl">人力</div>
|
||
|
|
<div class="flex space-x-6 text-sm flex-1">
|
||
|
|
<a href="#" class="hover:opacity-80">多维统计</a>
|
||
|
|
<a href="#" class="hover:opacity-80">人员管理</a>
|
||
|
|
<a href="#" class="hover:opacity-80">组织管理</a>
|
||
|
|
<a href="#" class="hover:opacity-80">考勤管理</a>
|
||
|
|
<a href="#" class="hover:opacity-80">绩效管理</a>
|
||
|
|
<a href="#" class="hover:opacity-80">薪酬管理</a>
|
||
|
|
<a href="#" class="hover:opacity-80">知识库</a>
|
||
|
|
<a href="#" class="hover:opacity-80">后台管理</a>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<div class="relative">
|
||
|
|
<input type="text" placeholder="搜索..."
|
||
|
|
class="bg-white bg-opacity-20 text-white placeholder-white text-sm px-4 py-1 !rounded-button w-40 focus:outline-none">
|
||
|
|
<i
|
||
|
|
class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-white text-sm"></i>
|
||
|
|
</div>
|
||
|
|
<div class="user-avatar !rounded-button cursor-pointer"></div>
|
||
|
|
<button
|
||
|
|
class="ai-assistant bg-white text-primary text-sm px-3 py-1 !rounded-button flex items-center space-x-1">
|
||
|
|
<i class="fas fa-robot text-xs"></i>
|
||
|
|
<span>AI 助手</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<div class="bg-yellow-50 text-yellow-800 text-xs h-9 px-6 flex items-center">
|
||
|
|
<span class="font-medium mr-2">公告：</span>
|
||
|
|
<div class="overflow-hidden whitespace-nowrap">
|
||
|
|
<div class="marquee inline-block">
|
||
|
|
年度绩效考核即将开始，请各部门负责人及时提交考核计划 | 2023年第三季度优秀员工评选结果已公布 | 公司新福利政策：增加年度体检项目 | 人力资源系统将于本周六凌晨2:00-4:00进行维护升级
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<!-- 主内容区 -->
|
||
|
|
<main class="flex-1 flex max-w-7xl mx-auto w-full px-6 py-4">
|
||
|
|
<!-- 左侧组织架构树 -->
|
||
|
|
<div class="w-1/5 pr-4">
|
||
|
|
<div class="bg-white rounded-lg shadow-sm p-4 org-tree">
|
||
|
|
<h3 class="text-sm font-medium mb-3">组织架构</h3>
|
||
|
|
<div class="space-y-1">
|
||
|
|
<div class="text-sm font-medium py-1 px-2 bg-primary bg-opacity-10 text-primary rounded">公司总部</div>
|
||
|
|
<div class="pl-4">
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">总裁办公室</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">人力资源中心</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">财务中心</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">技术研发中心</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">市场营销中心</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">产品运营中心</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">客户服务中心</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-sm font-medium py-1 px-2 bg-primary bg-opacity-10 text-primary rounded">华东分公司</div>
|
||
|
|
<div class="pl-4">
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">上海办事处</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">杭州办事处</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">南京办事处</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-sm font-medium py-1 px-2 bg-primary bg-opacity-10 text-primary rounded">华南分公司</div>
|
||
|
|
<div class="pl-4">
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">广州办事处</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">深圳办事处</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-sm font-medium py-1 px-2 bg-primary bg-opacity-10 text-primary rounded">华北分公司</div>
|
||
|
|
<div class="pl-4">
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">北京办事处</div>
|
||
|
|
<div class="text-sm py-1 px-2 hover:bg-secondary rounded cursor-pointer">天津办事处</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 右侧绩效仪表盘 -->
|
||
|
|
<div class="w-4/5 pl-4">
|
||
|
|
<div class="bg-white rounded-lg shadow-sm p-4 performance-dashboard">
|
||
|
|
<div class="flex justify-between items-center mb-4">
|
||
|
|
<h2 class="text-lg font-medium">绩效仪表盘</h2>
|
||
|
|
<div class="flex items-center space-x-2">
|
||
|
|
<span class="text-sm">绩效计划：</span>
|
||
|
|
<div class="relative">
|
||
|
|
<button class="bg-secondary text-sm px-3 py-1 !rounded-button flex items-center space-x-1">
|
||
|
|
<span>2023年Q3季度考核</span>
|
||
|
|
<i class="fas fa-chevron-down text-xs"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 图表区域 -->
|
||
|
|
<div class="grid grid-cols-2 gap-4 mb-6">
|
||
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
||
|
|
<h3 class="text-sm font-medium mb-2">绩效评分分布</h3>
|
||
|
|
<div class="chart-container" id="scoreDistributionChart"></div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
||
|
|
<h3 class="text-sm font-medium mb-2">部门绩效平均分</h3>
|
||
|
|
<div class="flex justify-end mb-2">
|
||
|
|
<div class="relative">
|
||
|
|
<button
|
||
|
|
class="bg-secondary text-sm px-3 py-1 !rounded-button flex items-center space-x-1">
|
||
|
|
<span>一级部门</span>
|
||
|
|
<i class="fas fa-chevron-down text-xs"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chart-container" id="departmentScoreChart"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 人员绩效明细表 -->
|
||
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
||
|
|
<h3 class="text-sm font-medium mb-3">人员绩效明细</h3>
|
||
|
|
<div class="table-container">
|
||
|
|
<table class="w-full text-sm">
|
||
|
|
<thead class="table-header">
|
||
|
|
<tr class="border-b">
|
||
|
|
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span>姓名</span>
|
||
|
|
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span>部门</span>
|
||
|
|
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span>总分</span>
|
||
|
|
<i class="fas fa-sort-down ml-1 text-xs opacity-50"></i>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span>代码行数</span>
|
||
|
|
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span>文档字数</span>
|
||
|
|
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span>项目金额数</span>
|
||
|
|
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span>出勤时长</span>
|
||
|
|
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
<th class="text-left py-2 px-3 cursor-pointer hover:bg-secondary">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<span>价值观</span>
|
||
|
|
<i class="fas fa-sort ml-1 text-xs opacity-50"></i>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">张明远</td>
|
||
|
|
<td class="py-2 px-3">技术研发中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">96.5</td>
|
||
|
|
<td class="py-2 px-3">12500</td>
|
||
|
|
<td class="py-2 px-3">8500</td>
|
||
|
|
<td class="py-2 px-3">¥1,250,000</td>
|
||
|
|
<td class="py-2 px-3">186</td>
|
||
|
|
<td class="py-2 px-3">48.0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">李思颖</td>
|
||
|
|
<td class="py-2 px-3">市场营销中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">95.0</td>
|
||
|
|
<td class="py-2 px-3">11800</td>
|
||
|
|
<td class="py-2 px-3">9200</td>
|
||
|
|
<td class="py-2 px-3">¥1,100,000</td>
|
||
|
|
<td class="py-2 px-3">182</td>
|
||
|
|
<td class="py-2 px-3">47.0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">王浩然</td>
|
||
|
|
<td class="py-2 px-3">产品运营中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">93.5</td>
|
||
|
|
<td class="py-2 px-3">11000</td>
|
||
|
|
<td class="py-2 px-3">7800</td>
|
||
|
|
<td class="py-2 px-3">¥980,000</td>
|
||
|
|
<td class="py-2 px-3">180</td>
|
||
|
|
<td class="py-2 px-3">47.0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">陈雨桐</td>
|
||
|
|
<td class="py-2 px-3">人力资源中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">92.0</td>
|
||
|
|
<td class="py-2 px-3">10500</td>
|
||
|
|
<td class="py-2 px-3">9500</td>
|
||
|
|
<td class="py-2 px-3">¥920,000</td>
|
||
|
|
<td class="py-2 px-3">178</td>
|
||
|
|
<td class="py-2 px-3">46.5</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">刘子轩</td>
|
||
|
|
<td class="py-2 px-3">技术研发中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">91.5</td>
|
||
|
|
<td class="py-2 px-3">9800</td>
|
||
|
|
<td class="py-2 px-3">7200</td>
|
||
|
|
<td class="py-2 px-3">¥890,000</td>
|
||
|
|
<td class="py-2 px-3">175</td>
|
||
|
|
<td class="py-2 px-3">46.0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">赵欣然</td>
|
||
|
|
<td class="py-2 px-3">客户服务中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">90.0</td>
|
||
|
|
<td class="py-2 px-3">9200</td>
|
||
|
|
<td class="py-2 px-3">8500</td>
|
||
|
|
<td class="py-2 px-3">¥850,000</td>
|
||
|
|
<td class="py-2 px-3">172</td>
|
||
|
|
<td class="py-2 px-3">45.5</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">孙伟杰</td>
|
||
|
|
<td class="py-2 px-3">财务中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">89.5</td>
|
||
|
|
<td class="py-2 px-3">8900</td>
|
||
|
|
<td class="py-2 px-3">6800</td>
|
||
|
|
<td class="py-2 px-3">¥820,000</td>
|
||
|
|
<td class="py-2 px-3">170</td>
|
||
|
|
<td class="py-2 px-3">45.0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">周晓彤</td>
|
||
|
|
<td class="py-2 px-3">市场营销中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">88.0</td>
|
||
|
|
<td class="py-2 px-3">8500</td>
|
||
|
|
<td class="py-2 px-3">7900</td>
|
||
|
|
<td class="py-2 px-3">¥780,000</td>
|
||
|
|
<td class="py-2 px-3">168</td>
|
||
|
|
<td class="py-2 px-3">44.5</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">吴宇航</td>
|
||
|
|
<td class="py-2 px-3">技术研发中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">87.5</td>
|
||
|
|
<td class="py-2 px-3">8200</td>
|
||
|
|
<td class="py-2 px-3">6500</td>
|
||
|
|
<td class="py-2 px-3">¥750,000</td>
|
||
|
|
<td class="py-2 px-3">165</td>
|
||
|
|
<td class="py-2 px-3">44.0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="border-b hover:bg-secondary">
|
||
|
|
<td class="py-2 px-3">郑雅文</td>
|
||
|
|
<td class="py-2 px-3">产品运营中心</td>
|
||
|
|
<td class="py-2 px-3 font-medium text-primary">86.0</td>
|
||
|
|
<td class="py-2 px-3">8000</td>
|
||
|
|
<td class="py-2 px-3">7800</td>
|
||
|
|
<td class="py-2 px-3">¥720,000</td>
|
||
|
|
<td class="py-2 px-3">162</td>
|
||
|
|
<td class="py-2 px-3">43.5</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between items-center mt-3 text-sm">
|
||
|
|
<div>显示 1 到 10 条，共 128 条记录</div>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<button class="bg-secondary px-3 py-1 !rounded-button">上一页</button>
|
||
|
|
<button class="bg-primary text-white px-3 py-1 !rounded-button">1</button>
|
||
|
|
<button class="bg-secondary px-3 py-1 !rounded-button">2</button>
|
||
|
|
<button class="bg-secondary px-3 py-1 !rounded-button">3</button>
|
||
|
|
<span class="px-2 py-1">...</span>
|
||
|
|
<button class="bg-secondary px-3 py-1 !rounded-button">13</button>
|
||
|
|
<button class="bg-secondary px-3 py-1 !rounded-button">下一页</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<!-- 页脚 -->
|
||
|
|
<footer class="bg-gray-800 text-gray-300 text-xs py-6 px-6">
|
||
|
|
<div class="max-w-7xl mx-auto">
|
||
|
|
<div class="grid grid-cols-4 gap-8">
|
||
|
|
<div>
|
||
|
|
<h4 class="text-sm font-medium text-white mb-3">关于我们</h4>
|
||
|
|
<ul class="space-y-2">
|
||
|
|
<li><a href="#" class="hover:text-white">公司简介</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">发展历程</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">企业文化</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">管理团队</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="text-sm font-medium text-white mb-3">产品服务</h4>
|
||
|
|
<ul class="space-y-2">
|
||
|
|
<li><a href="#" class="hover:text-white">人力资源系统</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">薪酬管理系统</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">绩效管理系统</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">培训发展平台</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="text-sm font-medium text-white mb-3">帮助中心</h4>
|
||
|
|
<ul class="space-y-2">
|
||
|
|
<li><a href="#" class="hover:text-white">常见问题</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">使用指南</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">视频教程</a></li>
|
||
|
|
<li><a href="#" class="hover:text-white">在线客服</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="text-sm font-medium text-white mb-3">联系我们</h4>
|
||
|
|
<ul class="space-y-2">
|
||
|
|
<li><i class="fas fa-map-marker-alt mr-2"></i> 北京市海淀区中关村南大街5号</li>
|
||
|
|
<li><i class="fas fa-phone-alt mr-2"></i> 400-888-8888</li>
|
||
|
|
<li><i class="fas fa-envelope mr-2"></i> hr@company.com</li>
|
||
|
|
<li class="flex space-x-3 mt-3">
|
||
|
|
<a href="#" class="hover:text-white"><i class="fab fa-weixin"></i></a>
|
||
|
|
<a href="#" class="hover:text-white"><i class="fab fa-weibo"></i></a>
|
||
|
|
<a href="#" class="hover:text-white"><i class="fab fa-linkedin-in"></i></a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="border-t border-gray-700 mt-6 pt-6 flex justify-between">
|
||
|
|
<div>© 2023 人力资源管理系统 版权所有</div>
|
||
|
|
<div class="flex space-x-4">
|
||
|
|
<a href="#" class="hover:text-white">隐私政策</a>
|
||
|
|
<a href="#" class="hover:text-white">服务条款</a>
|
||
|
|
<a href="#" class="hover:text-white">法律声明</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
<script>
|
||
|
|
// 绩效评分分布饼图
|
||
|
|
const scoreDistributionChart = echarts.init(document.getElementById('scoreDistributionChart'));
|
||
|
|
const scoreDistributionOption = {
|
||
|
|
animation: false,
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
orient: 'vertical',
|
||
|
|
right: 10,
|
||
|
|
top: 'center',
|
||
|
|
data: ['0-60分', '60-80分', '80-100分']
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '绩效评分分布',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['50%', '70%'],
|
||
|
|
avoidLabelOverlap: false,
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 4,
|
||
|
|
borderColor: '#fff',
|
||
|
|
borderWidth: 2
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: 'center'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
fontSize: '14',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ value: 12, name: '0-60分', itemStyle: { color: '#FF6B6B' } },
|
||
|
|
{ value: 45, name: '60-80分', itemStyle: { color: '#4ECDC4' } },
|
||
|
|
{ value: 71, name: '80-100分', itemStyle: { color: '#45B7D1' } }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
scoreDistributionChart.setOption(scoreDistributionOption);
|
||
|
|
// 部门绩效平均分柱状图
|
||
|
|
const departmentScoreChart = echarts.init(document.getElementById('departmentScoreChart'));
|
||
|
|
const departmentScoreOption = {
|
||
|
|
animation: false,
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'value',
|
||
|
|
boundaryGap: [0, 0.01]
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: ['技术研发', '市场营销', '产品运营', '人力资源', '财务中心', '客户服务']
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '平均分',
|
||
|
|
type: 'bar',
|
||
|
|
data: [89.5, 87.2, 85.8, 84.3, 83.7, 82.1],
|
||
|
|
itemStyle: {
|
||
|
|
color: function (params) {
|
||
|
|
const colorList = ['#45B7D1', '#4ECDC4', '#A5DEE4', '#7AC5CD', '#66C6C4', '#45B7D1'];
|
||
|
|
return colorList[params.dataIndex];
|
||
|
|
},
|
||
|
|
borderRadius: [4, 4, 0, 0]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
departmentScoreChart.setOption(departmentScoreOption);
|
||
|
|
// 窗口大小变化时重新调整图表大小
|
||
|
|
window.addEventListener('resize', function () {
|
||
|
|
scoreDistributionChart.resize();
|
||
|
|
departmentScoreChart.resize();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|