620 lines
25 KiB
HTML
620 lines
25 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>
|
||
<style>
|
||
body {
|
||
font-family: 'Microsoft YaHei', sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #f4f6f9;
|
||
}
|
||
.header {
|
||
background-color: #2c3e50;
|
||
color: white;
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.header h1 {
|
||
margin: 0;
|
||
font-size: 22px;
|
||
}
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.user-info span {
|
||
margin-right: 15px;
|
||
}
|
||
.logout-btn {
|
||
background-color: #e74c3c;
|
||
color: white;
|
||
border: none;
|
||
padding: 5px 10px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
}
|
||
.container {
|
||
display: flex;
|
||
min-height: calc(100vh - 60px);
|
||
}
|
||
.sidebar {
|
||
width: 220px;
|
||
background-color: #34495e;
|
||
color: white;
|
||
padding: 20px 0;
|
||
}
|
||
.sidebar-menu {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.sidebar-menu li {
|
||
padding: 12px 20px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
.sidebar-menu li:hover {
|
||
background-color: #2c3e50;
|
||
}
|
||
.sidebar-menu li.active {
|
||
background-color: #2c3e50;
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
}
|
||
.card {
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.card-header {
|
||
border-bottom: 1px solid #eee;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.card-header h2 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
color: #2c3e50;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
th, td {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
th {
|
||
background-color: #f8f9fa;
|
||
font-weight: bold;
|
||
color: #2c3e50;
|
||
}
|
||
tr:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
.btn {
|
||
padding: 8px 12px;
|
||
border-radius: 3px;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
margin-right: 5px;
|
||
}
|
||
.btn-primary {
|
||
background-color: #3498db;
|
||
color: white;
|
||
}
|
||
.btn-success {
|
||
background-color: #27ae60;
|
||
color: white;
|
||
}
|
||
.btn-danger {
|
||
background-color: #e74c3c;
|
||
color: white;
|
||
}
|
||
.btn-primary:hover {
|
||
background-color: #2980b9;
|
||
}
|
||
.btn-success:hover {
|
||
background-color: #219653;
|
||
}
|
||
.btn-danger:hover {
|
||
background-color: #c0392b;
|
||
}
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
.form-group input, .form-group select {
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
.form-actions {
|
||
text-align: right;
|
||
margin-top: 20px;
|
||
}
|
||
.tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid #ddd;
|
||
margin-bottom: 20px;
|
||
}
|
||
.tab {
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
border-bottom: none;
|
||
margin-right: 5px;
|
||
background-color: #f8f9fa;
|
||
border-radius: 5px 5px 0 0;
|
||
}
|
||
.tab.active {
|
||
background-color: white;
|
||
border-color: #ddd;
|
||
border-bottom-color: white;
|
||
margin-bottom: -1px;
|
||
font-weight: bold;
|
||
}
|
||
.tab-content {
|
||
display: none;
|
||
}
|
||
.tab-content.active {
|
||
display: block;
|
||
}
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 400px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.filter-bar {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
gap: 10px;
|
||
}
|
||
.filter-bar select, .filter-bar input {
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
.filter-bar button {
|
||
padding: 8px 15px;
|
||
background-color: #3498db;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.stat-cards {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.stat-card {
|
||
flex: 1;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
.stat-card h3 {
|
||
margin-top: 0;
|
||
color: #7f8c8d;
|
||
}
|
||
.stat-card .value {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin: 10px 0;
|
||
}
|
||
.stat-card .trend {
|
||
font-size: 14px;
|
||
color: #27ae60;
|
||
}
|
||
.stat-card .trend.down {
|
||
color: #e74c3c;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<h1>员工保险管理系统</h1>
|
||
<div class="user-info">
|
||
<span>管理员</span>
|
||
<button class="logout-btn" onclick="window.location.href='login.html'">退出</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="sidebar">
|
||
<ul class="sidebar-menu">
|
||
<li onclick="window.location.href='admin.html'">员工保险管理</li>
|
||
<li onclick="window.location.href='settings.html'">系统设置</li>
|
||
<li class="active">统计报表</li>
|
||
<li>添加新员工</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<div class="card">
|
||
<div class="tabs">
|
||
<div class="tab active" onclick="switchTab('summary')">保险概况</div>
|
||
<div class="tab" onclick="switchTab('expiring')">即将到期</div>
|
||
<div class="tab" onclick="switchTab('cost')">费用分析</div>
|
||
<div class="tab" onclick="switchTab('custom')">自定义报表</div>
|
||
</div>
|
||
|
||
<div id="summary" class="tab-content active">
|
||
<div class="filter-bar">
|
||
<select>
|
||
<option>全部部门</option>
|
||
<option>人事部</option>
|
||
<option>技术部</option>
|
||
<option>市场部</option>
|
||
<option>财务部</option>
|
||
</select>
|
||
<select>
|
||
<option>全部保险公司</option>
|
||
<option>中国人寿</option>
|
||
<option>平安保险</option>
|
||
<option>太平洋保险</option>
|
||
<option>泰康保险</option>
|
||
</select>
|
||
<select>
|
||
<option>全部保险类型</option>
|
||
<option>医疗保险</option>
|
||
<option>意外险</option>
|
||
<option>养老保险</option>
|
||
<option>重大疾病险</option>
|
||
</select>
|
||
<button>筛选</button>
|
||
<button>导出Excel</button>
|
||
</div>
|
||
|
||
<div class="stat-cards">
|
||
<div class="stat-card">
|
||
<h3>总投保人数</h3>
|
||
<div class="value">156</div>
|
||
<div class="trend">↑ 5% 较上月</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>总保费</h3>
|
||
<div class="value">¥ 1,256,800</div>
|
||
<div class="trend">↑ 8% 较上月</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>即将到期保单</h3>
|
||
<div class="value">23</div>
|
||
<div class="trend down">↑ 3% 较上月</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>平均保费</h3>
|
||
<div class="value">¥ 8,056</div>
|
||
<div class="trend">↑ 2% 较上月</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<!-- 这里应该是一个图表，实际项目中可以使用ECharts等库 -->
|
||
<img src="https://via.placeholder.com/1200x400?text=保险类型分布图表" alt="保险类型分布图表" style="width:100%; border:1px solid #eee; border-radius:5px;">
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<!-- 这里应该是一个图表，实际项目中可以使用ECharts等库 -->
|
||
<img src="https://via.placeholder.com/1200x400?text=月度保费趋势图表" alt="月度保费趋势图表" style="width:100%; border:1px solid #eee; border-radius:5px;">
|
||
</div>
|
||
</div>
|
||
|
||
<div id="expiring" class="tab-content">
|
||
<div class="filter-bar">
|
||
<select>
|
||
<option>未来30天内到期</option>
|
||
<option>未来15天内到期</option>
|
||
<option>未来7天内到期</option>
|
||
<option>已过期</option>
|
||
</select>
|
||
<select>
|
||
<option>全部部门</option>
|
||
<option>人事部</option>
|
||
<option>技术部</option>
|
||
<option>市场部</option>
|
||
<option>财务部</option>
|
||
</select>
|
||
<button>筛选</button>
|
||
<button>导出Excel</button>
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>员工姓名</th>
|
||
<th>工号</th>
|
||
<th>部门</th>
|
||
<th>保险公司</th>
|
||
<th>保险类型</th>
|
||
<th>保单号</th>
|
||
<th>到期日期</th>
|
||
<th>剩余天数</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>张三</td>
|
||
<td>EMP001</td>
|
||
<td>技术部</td>
|
||
<td>中国人寿</td>
|
||
<td>医疗保险</td>
|
||
<td>CL12345678</td>
|
||
<td>2023-12-31</td>
|
||
<td>15</td>
|
||
<td><button class="btn btn-primary">续保</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>李四</td>
|
||
<td>EMP002</td>
|
||
<td>市场部</td>
|
||
<td>平安保险</td>
|
||
<td>意外险</td>
|
||
<td>PA87654321</td>
|
||
<td>2023-12-25</td>
|
||
<td>9</td>
|
||
<td><button class="btn btn-primary">续保</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>王五</td>
|
||
<td>EMP003</td>
|
||
<td>财务部</td>
|
||
<td>太平洋保险</td>
|
||
<td>养老保险</td>
|
||
<td>TP11223344</td>
|
||
<td>2023-12-20</td>
|
||
<td>4</td>
|
||
<td><button class="btn btn-primary">续保</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>赵六</td>
|
||
<td>EMP004</td>
|
||
<td>人事部</td>
|
||
<td>泰康保险</td>
|
||
<td>重大疾病险</td>
|
||
<td>TK55667788</td>
|
||
<td>2023-11-30</td>
|
||
<td class="text-danger">已过期</td>
|
||
<td><button class="btn btn-primary">续保</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="cost" class="tab-content">
|
||
<div class="filter-bar">
|
||
<select>
|
||
<option>2023年</option>
|
||
<option>2022年</option>
|
||
<option>2021年</option>
|
||
</select>
|
||
<select>
|
||
<option>全部部门</option>
|
||
<option>人事部</option>
|
||
<option>技术部</option>
|
||
<option>市场部</option>
|
||
<option>财务部</option>
|
||
</select>
|
||
<select>
|
||
<option>全部保险公司</option>
|
||
<option>中国人寿</option>
|
||
<option>平安保险</option>
|
||
<option>太平洋保险</option>
|
||
<option>泰康保险</option>
|
||
</select>
|
||
<button>筛选</button>
|
||
<button>导出Excel</button>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<!-- 这里应该是一个图表，实际项目中可以使用ECharts等库 -->
|
||
<img src="https://via.placeholder.com/1200x400?text=部门保费支出图表" alt="部门保费支出图表" style="width:100%; border:1px solid #eee; border-radius:5px;">
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>部门</th>
|
||
<th>医疗保险</th>
|
||
<th>意外险</th>
|
||
<th>养老保险</th>
|
||
<th>重大疾病险</th>
|
||
<th>总计</th>
|
||
<th>占比</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>技术部</td>
|
||
<td>¥ 256,800</td>
|
||
<td>¥ 128,400</td>
|
||
<td>¥ 192,600</td>
|
||
<td>¥ 85,600</td>
|
||
<td>¥ 663,400</td>
|
||
<td>42.8%</td>
|
||
</tr>
|
||
<tr>
|
||
<td>市场部</td>
|
||
<td>¥ 185,200</td>
|
||
<td>¥ 92,600</td>
|
||
<td>¥ 138,900</td>
|
||
<td>¥ 61,700</td>
|
||
<td>¥ 478,400</td>
|
||
<td>30.9%</td>
|
||
</tr>
|
||
<tr>
|
||
<td>人事部</td>
|
||
<td>¥ 85,300</td>
|
||
<td>¥ 42,650</td>
|
||
<td>¥ 63,975</td>
|
||
<td>¥ 28,425</td>
|
||
<td>¥ 220,350</td>
|
||
<td>14.2%</td>
|
||
</tr>
|
||
<tr>
|
||
<td>财务部</td>
|
||
<td>¥ 64,700</td>
|
||
<td>¥ 32,350</td>
|
||
<td>¥ 48,525</td>
|
||
<td>¥ 21,550</td>
|
||
<td>¥ 167,125</td>
|
||
<td>10.8%</td>
|
||
</tr>
|
||
<tr>
|
||
<td>其他部门</td>
|
||
<td>¥ 12,200</td>
|
||
<td>¥ 6,100</td>
|
||
<td>¥ 9,150</td>
|
||
<td>¥ 4,075</td>
|
||
<td>¥ 31,525</td>
|
||
<td>2.0%</td>
|
||
</tr>
|
||
<tr>
|
||
<td>总计</td>
|
||
<td>¥ 604,200</td>
|
||
<td>¥ 302,100</td>
|
||
<td>¥ 453,150</td>
|
||
<td>¥ 201,350</td>
|
||
<td>¥ 1,560,800</td>
|
||
<td>100%</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="custom" class="tab-content">
|
||
<div class="card-header">
|
||
<h2>自定义报表</h2>
|
||
</div>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="reportName">报表名称</label>
|
||
<input type="text" id="reportName" placeholder="请输入报表名称">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>选择数据字段</label>
|
||
<div style="display: flex; gap: 20px;">
|
||
<div style="flex: 1;">
|
||
<h4>可选字段</h4>
|
||
<div style="border: 1px solid #ddd; height: 200px; overflow-y: auto; padding: 10px;">
|
||
<div><input type="checkbox"> 员工姓名</div>
|
||
<div><input type="checkbox"> 工号</div>
|
||
<div><input type="checkbox"> 部门</div>
|
||
<div><input type="checkbox"> 职位</div>
|
||
<div><input type="checkbox"> 保险公司</div>
|
||
<div><input type="checkbox"> 保险类型</div>
|
||
<div><input type="checkbox"> 保单号</div>
|
||
<div><input type="checkbox"> 生效日期</div>
|
||
<div><input type="checkbox"> 到期日期</div>
|
||
<div><input type="checkbox"> 保费</div>
|
||
<div><input type="checkbox"> 保额</div>
|
||
<div><input type="checkbox"> 保险状态</div>
|
||
</div>
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<h4>已选字段</h4>
|
||
<div style="border: 1px solid #ddd; height: 200px; overflow-y: auto; padding: 10px;">
|
||
<!-- 这里会动态显示已选字段 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>筛选条件</label>
|
||
<div style="border: 1px solid #ddd; padding: 10px; border-radius: 4px;">
|
||
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
|
||
<select style="flex: 1;">
|
||
<option>部门</option>
|
||
<option>保险公司</option>
|
||
<option>保险类型</option>
|
||
<option>保险状态</option>
|
||
</select>
|
||
<select style="flex: 1;">
|
||
<option>等于</option>
|
||
<option>不等于</option>
|
||
<option>包含</option>
|
||
<option>不包含</option>
|
||
</select>
|
||
<input type="text" style="flex: 2;" placeholder="输入值">
|
||
<button type="button" class="btn btn-danger">删除</button>
|
||
</div>
|
||
<button type="button" class="btn btn-primary">添加条件</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>排序</label>
|
||
<div style="border: 1px solid #ddd; padding: 10px; border-radius: 4px;">
|
||
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
|
||
<select style="flex: 2;">
|
||
<option>选择排序字段</option>
|
||
<option>员工姓名</option>
|
||
<option>部门</option>
|
||
<option>保险公司</option>
|
||
<option>保险类型</option>
|
||
<option>到期日期</option>
|
||
</select>
|
||
<select style="flex: 1;">
|
||
<option>升序</option>
|
||
<option>降序</option>
|
||
</select>
|
||
<button type="button" class="btn btn-danger">删除</button>
|
||
</div>
|
||
<button type="button" class="btn btn-primary">添加排序</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="reset" class="btn btn-danger">重置</button>
|
||
<button type="submit" class="btn btn-success">生成报表</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 切换标签页
|
||
function switchTab(tabId) {
|
||
// 隐藏所有标签内容
|
||
document.querySelectorAll('.tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 取消所有标签的活动状态
|
||
document.querySelectorAll('.tab').forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
|
||
// 显示选中的标签内容
|
||
document.getElementById(tabId).classList.add('active');
|
||
|
||
// 设置选中标签的活动状态
|
||
event.currentTarget.classList.add('active');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |