This commit is contained in:
cqq
commit
5bf8c62d9e
Binary file not shown.
|
|
@ -0,0 +1,822 @@
|
|||
<!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-warning {
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background-color: #219653;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
.btn-warning:hover {
|
||||
background-color: #e67e22;
|
||||
}
|
||||
.status-active {
|
||||
color: #27ae60;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-expired {
|
||||
color: #e74c3c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-pending {
|
||||
color: #f39c12;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.insurance-detail {
|
||||
display: none;
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 5px;
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
.detail-row {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.detail-label {
|
||||
width: 150px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
}
|
||||
.policy-benefits {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.benefit-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
}
|
||||
.text-success {
|
||||
color: #27ae60;
|
||||
}
|
||||
.text-warning {
|
||||
color: #f39c12;
|
||||
}
|
||||
.text-danger {
|
||||
color: #e74c3c;
|
||||
}
|
||||
.file-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
}
|
||||
.file-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.file-icon {
|
||||
margin-right: 10px;
|
||||
color: #3498db;
|
||||
}
|
||||
.profile-section {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.profile-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
.profile-name {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.profile-meta {
|
||||
color: #7f8c8d;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profile-actions {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.info-table {
|
||||
width: 100%;
|
||||
}
|
||||
.info-table td {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.info-table td:first-child {
|
||||
width: 30%;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* 新增提醒相关样式 */
|
||||
.sidebar-notification {
|
||||
position: relative;
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.sidebar-notification:hover {
|
||||
background-color: #2c3e50;
|
||||
}
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 15px;
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.reminder-item {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.reminder-item.urgent {
|
||||
border-left: 4px solid #e74c3c;
|
||||
background-color: #fff5f5;
|
||||
}
|
||||
.reminder-item.warning {
|
||||
border-left: 4px solid #f39c12;
|
||||
background-color: #fffaf0;
|
||||
}
|
||||
.reminder-content h4 {
|
||||
margin: 0 0 5px 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
.reminder-content p {
|
||||
margin: 0;
|
||||
color: #7f8c8d;
|
||||
font-size: 14px;
|
||||
}
|
||||
.reminder-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 10% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 60%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
.close:hover {
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>员工保险管理系统</h1>
|
||||
<div class="user-info">
|
||||
<span>张三 (EMP001)</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 class="active">我的保险</li>
|
||||
<li>保单文件</li>
|
||||
<li>个人信息</li>
|
||||
<li>修改密码</li>
|
||||
</ul>
|
||||
<div class="sidebar-notification" onclick="showReminders()">
|
||||
<span>保险提醒</span>
|
||||
<span class="notification-badge" id="reminderBadge">2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>我的保险信息</h2>
|
||||
</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>医疗保险</td>
|
||||
<td>CL12345678</td>
|
||||
<td>2023-01-01</td>
|
||||
<td>2023-12-31</td>
|
||||
<td class="status-active">有效</td>
|
||||
<td><button class="btn btn-primary" onclick="toggleDetail('detail1')">查看详情</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div id="detail1" class="insurance-detail">
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">保费:</div>
|
||||
<div class="detail-value">¥ 8,500/年 (公司承担¥6,800，个人承担¥1,700)</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">保额:</div>
|
||||
<div class="detail-value">¥ 500,000</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">受益人:</div>
|
||||
<div class="detail-value">张三本人</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">缴费方式:</div>
|
||||
<div class="detail-value">年缴</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">备注:</div>
|
||||
<div class="detail-value">包含门诊和住院医疗，无免赔额</div>
|
||||
</div>
|
||||
|
||||
<div class="policy-benefits">
|
||||
<h4>保障内容:</h4>
|
||||
<div class="benefit-item">
|
||||
<span>住院医疗费用报销</span>
|
||||
<span class="text-success">最高¥200,000 (90%报销)</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>门诊医疗费用报销</span>
|
||||
<span class="text-success">最高¥50,000 (80%报销)</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>重大疾病保障</span>
|
||||
<span class="text-success">一次性给付¥300,000 (涵盖30种重疾)</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>住院津贴</span>
|
||||
<span class="text-warning">¥200/天(最高90天)</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>年度体检</span>
|
||||
<span class="text-success">免费基础体检1次/年</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>平安保险</td>
|
||||
<td>意外险</td>
|
||||
<td>PA87654321</td>
|
||||
<td>2023-01-01</td>
|
||||
<td>2023-12-31</td>
|
||||
<td class="status-active">有效</td>
|
||||
<td><button class="btn btn-primary" onclick="toggleDetail('detail2')">查看详情</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div id="detail2" class="insurance-detail">
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">保费:</div>
|
||||
<div class="detail-value">¥ 1,200/年 (公司全额承担)</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">保额:</div>
|
||||
<div class="detail-value">¥ 1,000,000</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">受益人:</div>
|
||||
<div class="detail-value">张三本人、配偶、子女</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">保障地区:</div>
|
||||
<div class="detail-value">全球范围(战争地区除外)</div>
|
||||
</div>
|
||||
|
||||
<div class="policy-benefits">
|
||||
<h4>保障内容:</h4>
|
||||
<div class="benefit-item">
|
||||
<span>意外身故/全残</span>
|
||||
<span class="text-success">¥1,000,000</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>意外医疗费用</span>
|
||||
<span class="text-success">¥50,000 (100%报销)</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>意外住院津贴</span>
|
||||
<span class="text-warning">¥150/天(最高180天)</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>公共交通意外</span>
|
||||
<span class="text-success">额外¥500,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>泰康保险</td>
|
||||
<td>养老保险</td>
|
||||
<td>TK33445566</td>
|
||||
<td>2022-01-01</td>
|
||||
<td>2042-12-31</td>
|
||||
<td class="status-active">有效</td>
|
||||
<td><button class="btn btn-primary" onclick="toggleDetail('detail3')">查看详情</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div id="detail3" class="insurance-detail">
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">保费:</div>
|
||||
<div class="detail-value">¥ 12,000/年 (公司承担¥6,000，个人承担¥6,000)</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">保额:</div>
|
||||
<div class="detail-value">退休后每月¥3,000 (保证领取20年)</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">受益人:</div>
|
||||
<div class="detail-value">张三本人</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">缴费期限:</div>
|
||||
<div class="detail-value">20年 (已缴1年)</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">预计退休金:</div>
|
||||
<div class="detail-value text-success">¥3,000/月 (按当前标准)</div>
|
||||
</div>
|
||||
|
||||
<div class="policy-benefits">
|
||||
<h4>保障内容:</h4>
|
||||
<div class="benefit-item">
|
||||
<span>养老金</span>
|
||||
<span class="text-success">60岁起每月领取¥3,000</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>身故保障</span>
|
||||
<span class="text-success">缴费期内身故返还已缴保费120%</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>全残保障</span>
|
||||
<span class="text-success">缴费期内全残免缴后续保费</span>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span>分红权益</span>
|
||||
<span class="text-warning">参与公司盈利分配(浮动)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>我的保险提醒</h2>
|
||||
</div>
|
||||
<div id="remindersList">
|
||||
<div class="reminder-item urgent">
|
||||
<div class="reminder-content">
|
||||
<h4>医疗保险即将到期</h4>
|
||||
<p>保单号: CL12345678</p>
|
||||
<p>到期日期: 2023-12-31 (剩余15天)</p>
|
||||
<p>提醒内容: 您的医疗保险即将到期，请及时处理续保事宜。</p>
|
||||
</div>
|
||||
<div class="reminder-actions">
|
||||
<button class="btn btn-primary" onclick="viewInsuranceDetail('CL12345678')">查看详情</button>
|
||||
<button class="btn btn-success" onclick="acknowledgeReminder('1')">续保</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reminder-item warning">
|
||||
<div class="reminder-content">
|
||||
<h4>意外险即将到期</h4>
|
||||
<p>保单号: PA87654321</p>
|
||||
<p>到期日期: 2023-12-25 (剩余9天)</p>
|
||||
<p>提醒内容: 您的意外险即将到期，请及时处理续保事宜。</p>
|
||||
</div>
|
||||
<div class="reminder-actions">
|
||||
<button class="btn btn-primary" onclick="viewInsuranceDetail('PA87654321')">查看详情</button>
|
||||
<button class="btn btn-success" onclick="acknowledgeReminder('2')">续保</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>保单文件</h2>
|
||||
</div>
|
||||
<ul class="file-list">
|
||||
<li class="file-item">
|
||||
<div>
|
||||
<span class="file-icon">📄</span>
|
||||
<span>中国人寿-医疗保险-保单.pdf</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary">查看</button>
|
||||
<button class="btn btn-success">下载</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="file-item">
|
||||
<div>
|
||||
<span class="file-icon">📄</span>
|
||||
<span>平安保险-意外险-保单.pdf</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary">查看</button>
|
||||
<button class="btn btn-success">下载</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="file-item">
|
||||
<div>
|
||||
<span class="file-icon">📄</span>
|
||||
<span>泰康保险-养老保险-保单.pdf</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary">查看</button>
|
||||
<button class="btn btn-success">下载</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="file-item">
|
||||
<div>
|
||||
<span class="file-icon">📄</span>
|
||||
<span>保险条款说明.docx</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary">查看</button>
|
||||
<button class="btn btn-success">下载</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>个人信息</h2>
|
||||
<button class="btn btn-primary">编辑信息</button>
|
||||
</div>
|
||||
<div class="profile-section">
|
||||
<div class="profile-avatar">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="员工头像">
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-name">张三</div>
|
||||
<div class="profile-meta">EMP001 | 技术部 | 高级软件工程师</div>
|
||||
<div class="profile-actions">
|
||||
<button class="btn btn-primary">更换头像</button>
|
||||
<button class="btn btn-warning">修改密码</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td>员工编号</td>
|
||||
<td>EMP001</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>部门</td>
|
||||
<td>技术部</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>职位</td>
|
||||
<td>高级软件工程师</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>入职日期</td>
|
||||
<td>2020-05-15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>联系电话</td>
|
||||
<td>13800138001</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>电子邮箱</td>
|
||||
<td>zhangsan@company.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>身份证号</td>
|
||||
<td>**************1234</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>联系地址</td>
|
||||
<td>北京市海淀区中关村软件园1号楼</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紧急联系人</td>
|
||||
<td>李四 (配偶) 13800138002</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增：提醒详情模态框 -->
|
||||
<div id="remindersModal" class="modal">
|
||||
<div class="modal-content" style="width: 80%; max-width: 800px;">
|
||||
<span class="close" onclick="document.getElementById('remindersModal').style.display='none'">×</span>
|
||||
<h2>我的保险提醒</h2>
|
||||
<div id="modalRemindersList">
|
||||
<!-- 内容由JavaScript动态加载 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 原有脚本保持不变
|
||||
function toggleDetail(detailId) {
|
||||
const detailElement = document.getElementById(detailId);
|
||||
if (detailElement.style.display === 'block') {
|
||||
detailElement.style.display = 'none';
|
||||
} else {
|
||||
document.querySelectorAll('.insurance-detail').forEach(detail => {
|
||||
detail.style.display = 'none';
|
||||
});
|
||||
detailElement.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.sidebar-menu li').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
document.querySelectorAll('.sidebar-menu li').forEach(li => {
|
||||
li.classList.remove('active');
|
||||
});
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 新增提醒功能脚本
|
||||
function showReminders() {
|
||||
loadReminders();
|
||||
document.getElementById('remindersModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function loadReminders() {
|
||||
// 模拟数据
|
||||
const reminders = [
|
||||
{
|
||||
id: '1',
|
||||
insuranceId: 'CL12345678',
|
||||
insuranceType: '医疗保险',
|
||||
endDate: '2023-12-31',
|
||||
daysLeft: 15,
|
||||
message: '您的医疗保险即将到期，请及时处理续保事宜。',
|
||||
isUrgent: true
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
insuranceId: 'PA87654321',
|
||||
insuranceType: '意外险',
|
||||
endDate: '2023-12-25',
|
||||
daysLeft: 9,
|
||||
message: '您的意外险即将到期，请及时处理续保事宜。',
|
||||
isUrgent: false
|
||||
}
|
||||
];
|
||||
|
||||
const list = document.getElementById('modalRemindersList');
|
||||
list.innerHTML = '';
|
||||
|
||||
if (reminders.length === 0) {
|
||||
list.innerHTML = '<p>暂无待处理的保险提醒</p>';
|
||||
document.getElementById('reminderBadge').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('reminderBadge').textContent = reminders.length;
|
||||
|
||||
reminders.forEach(reminder => {
|
||||
const item = document.createElement('div');
|
||||
item.className = `reminder-item ${reminder.isUrgent ? 'urgent' : 'warning'}`;
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="reminder-content">
|
||||
<h4>${reminder.insuranceType}即将到期</h4>
|
||||
<p>保单号: ${reminder.insuranceId}</p>
|
||||
<p>到期日期: ${reminder.endDate} (剩余${reminder.daysLeft}天)</p>
|
||||
<p>${reminder.message}</p>
|
||||
</div>
|
||||
<div class="reminder-actions">
|
||||
<button class="btn btn-primary" onclick="viewInsuranceDetail('${reminder.insuranceId}')">查看详情</button>
|
||||
<button class="btn btn-success" onclick="acknowledgeReminder('${reminder.id}')">续保</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
list.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function viewInsuranceDetail(policyId) {
|
||||
alert(`查看保单 ${policyId} 的详情`);
|
||||
document.getElementById('remindersModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function acknowledgeReminder(reminderId) {
|
||||
// 这里应该是AJAX请求标记提醒为已处理
|
||||
alert(`已续保 ${reminderId}`);
|
||||
|
||||
// 更新UI
|
||||
const badge = document.getElementById('reminderBadge');
|
||||
const newCount = parseInt(badge.textContent) - 1;
|
||||
badge.textContent = newCount > 0 ? newCount : '0';
|
||||
if (newCount <= 0) {
|
||||
badge.style.display = 'none';
|
||||
}
|
||||
|
||||
// 从列表中移除
|
||||
const item = document.querySelector(`[onclick="acknowledgeReminder('${reminderId}')"]`).closest('.reminder-item');
|
||||
if (item) item.style.display = 'none';
|
||||
}
|
||||
|
||||
// 点击模态框外部关闭模态框
|
||||
window.onclick = function(event) {
|
||||
if (event.target == document.getElementById('remindersModal')) {
|
||||
document.getElementById('remindersModal').style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,779 @@
|
|||
<!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;
|
||||
}
|
||||
.status-active {
|
||||
color: #27ae60;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-expired {
|
||||
color: #e74c3c;
|
||||
font-weight: bold;
|
||||
}
|
||||
.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-warning {
|
||||
background-color: #f39c12;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background-color: #219653;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
.btn-warning:hover {
|
||||
background-color: #d35400;
|
||||
}
|
||||
.search-bar {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.search-bar button {
|
||||
padding: 10px 15px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.pagination a {
|
||||
color: #3498db;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
border: 1px solid #ddd;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.pagination a.active {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: 1px solid #3498db;
|
||||
}
|
||||
.pagination a:hover:not(.active) {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 10% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 60%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
.close:hover {
|
||||
color: black;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 新增提醒相关样式 */
|
||||
.notification-btn {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
}
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.reminder-item {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.reminder-item.urgent {
|
||||
border-left: 4px solid #e74c3c;
|
||||
background-color: #fff5f5;
|
||||
}
|
||||
.reminder-item.warning {
|
||||
border-left: 4px solid #f39c12;
|
||||
background-color: #fffaf0;
|
||||
}
|
||||
.reminder-content h4 {
|
||||
margin: 0 0 5px 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
.reminder-content p {
|
||||
margin: 0;
|
||||
color: #7f8c8d;
|
||||
font-size: 14px;
|
||||
}
|
||||
.reminder-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>员工保险管理系统</h1>
|
||||
<div class="user-info">
|
||||
<div class="notification-btn" onclick="showAdminReminders()">
|
||||
<span>提醒管理</span>
|
||||
<span class="notification-badge" id="adminReminderBadge" style="display: none;">0</span>
|
||||
</div>
|
||||
<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 class="active">员工保险管理</li>
|
||||
<li onclick="window.location.href='settings.html'">系统设置</li>
|
||||
<li onclick="window.location.href='reports.html'">统计报表</li>
|
||||
<li>添加新员工</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="搜索员工姓名、工号或保单号...">
|
||||
<button>搜索</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>员工保险列表</h2>
|
||||
<button class="btn btn-success" onclick="document.getElementById('addModal').style.display='block'">添加保险</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>员工姓名</th>
|
||||
<th>工号</th>
|
||||
<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>CL12345678</td>
|
||||
<td>¥8,500</td>
|
||||
<td>¥500,000</td>
|
||||
<td>2023-01-01</td>
|
||||
<td>2023-12-31</td>
|
||||
<td class="status-active">有效</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
<button class="btn btn-warning" onclick="showSetReminderModal('CL12345678')">设置提醒</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李四</td>
|
||||
<td>EMP002</td>
|
||||
<td>平安保险</td>
|
||||
<td>意外险</td>
|
||||
<td>PA87654321</td>
|
||||
<td>¥1,200</td>
|
||||
<td>¥1,000,000</td>
|
||||
<td>2023-01-01</td>
|
||||
<td>2023-12-31</td>
|
||||
<td class="status-active">有效</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
<button class="btn btn-warning" onclick="showSetReminderModal('PA87654321')">设置提醒</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王五</td>
|
||||
<td>EMP003</td>
|
||||
<td>太平洋保险</td>
|
||||
<td>养老保险</td>
|
||||
<td>TP11223344</td>
|
||||
<td>¥12,000</td>
|
||||
<td>¥300,000</td>
|
||||
<td>2022-01-01</td>
|
||||
<td>2022-12-31</td>
|
||||
<td class="status-expired">已过期</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
<button class="btn btn-warning">续保</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵六</td>
|
||||
<td>EMP004</td>
|
||||
<td>泰康保险</td>
|
||||
<td>重大疾病险</td>
|
||||
<td>TK55667788</td>
|
||||
<td>¥5,800</td>
|
||||
<td>¥800,000</td>
|
||||
<td>2023-06-01</td>
|
||||
<td>2024-05-31</td>
|
||||
<td class="status-active">有效</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
<button class="btn btn-warning" onclick="showSetReminderModal('TK55667788')">设置提醒</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pagination">
|
||||
<a href="#">«</a>
|
||||
<a href="#" class="active">1</a>
|
||||
<a href="#">2</a>
|
||||
<a href="#">3</a>
|
||||
<a href="#">»</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>保险到期提醒管理</h2>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>员工姓名</th>
|
||||
<th>工号</th>
|
||||
<th>保险公司</th>
|
||||
<th>保险类型</th>
|
||||
<th>到期日期</th>
|
||||
<th>剩余天数</th>
|
||||
<th>提醒状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="reminderManagementList">
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td>EMP001</td>
|
||||
<td>中国人寿</td>
|
||||
<td>医疗保险</td>
|
||||
<td>2023-12-31</td>
|
||||
<td>15</td>
|
||||
<td>待发送</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">发送提醒</button>
|
||||
<button class="btn btn-danger">取消</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李四</td>
|
||||
<td>EMP002</td>
|
||||
<td>平安保险</td>
|
||||
<td>意外险</td>
|
||||
<td>2023-12-31</td>
|
||||
<td>15</td>
|
||||
<td>已发送</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">重新发送</button>
|
||||
<button class="btn btn-danger">取消</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>保单文件管理</h2>
|
||||
<button class="btn btn-success" onclick="document.getElementById('uploadModal').style.display='block'">上传文件</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>员工姓名</th>
|
||||
<th>工号</th>
|
||||
<th>文件名</th>
|
||||
<th>文件类型</th>
|
||||
<th>上传日期</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td>EMP001</td>
|
||||
<td>医疗保险合同.pdf</td>
|
||||
<td>PDF文档</td>
|
||||
<td>2023-01-05</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">下载</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李四</td>
|
||||
<td>EMP002</td>
|
||||
<td>意外险合同.pdf</td>
|
||||
<td>PDF文档</td>
|
||||
<td>2023-01-05</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">下载</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王五</td>
|
||||
<td>EMP003</td>
|
||||
<td>养老保险合同.pdf</td>
|
||||
<td>PDF文档</td>
|
||||
<td>2022-01-05</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">下载</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加保险模态框（原有） -->
|
||||
<div id="addModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="document.getElementById('addModal').style.display='none'">×</span>
|
||||
<h2>添加新保险</h2>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="employee">员工</label>
|
||||
<select id="employee">
|
||||
<option value="">请选择员工</option>
|
||||
<option value="EMP001">张三 (EMP001)</option>
|
||||
<option value="EMP002">李四 (EMP002)</option>
|
||||
<option value="EMP003">王五 (EMP003)</option>
|
||||
<option value="EMP004">赵六 (EMP004)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="insuranceCompany">保险公司</label>
|
||||
<select id="insuranceCompany">
|
||||
<option value="">请选择保险公司</option>
|
||||
<option value="中国人寿">中国人寿</option>
|
||||
<option value="平安保险">平安保险</option>
|
||||
<option value="太平洋保险">太平洋保险</option>
|
||||
<option value="泰康保险">泰康保险</option>
|
||||
<option value="其他">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="insuranceType">保险类型</label>
|
||||
<select id="insuranceType">
|
||||
<option value="">请选择保险类型</option>
|
||||
<option value="医疗保险">医疗保险</option>
|
||||
<option value="意外险">意外险</option>
|
||||
<option value="养老保险">养老保险</option>
|
||||
<option value="重大疾病险">重大疾病险</option>
|
||||
<option value="其他">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="policyNumber">保单号</label>
|
||||
<input type="text" id="policyNumber" placeholder="请输入保单号">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="startDate">生效日期</label>
|
||||
<input type="date" id="startDate">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="endDate">到期日期</label>
|
||||
<input type="date" id="endDate">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="premium">保费</label>
|
||||
<input type="number" id="premium" placeholder="请输入保费金额">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="coverage">保额</label>
|
||||
<input type="number" id="coverage" placeholder="请输入保额">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="notes">备注</label>
|
||||
<textarea id="notes" rows="3" style="width: 100%; border: 1px solid #ddd; border-radius: 4px;"></textarea>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-danger" onclick="document.getElementById('addModal').style.display='none'">取消</button>
|
||||
<button type="submit" class="btn btn-success">保存</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传文件模态框（原有） -->
|
||||
<div id="uploadModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="document.getElementById('uploadModal').style.display='none'">×</span>
|
||||
<h2>上传保单文件</h2>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="fileEmployee">员工</label>
|
||||
<select id="fileEmployee">
|
||||
<option value="">请选择员工</option>
|
||||
<option value="EMP001">张三 (EMP001)</option>
|
||||
<option value="EMP002">李四 (EMP002)</option>
|
||||
<option value="EMP003">王五 (EMP003)</option>
|
||||
<option value="EMP004">赵六 (EMP004)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fileType">文件类型</label>
|
||||
<select id="fileType">
|
||||
<option value="">请选择文件类型</option>
|
||||
<option value="保险合同">保险合同</option>
|
||||
<option value="保险凭证">保险凭证</option>
|
||||
<option value="理赔材料">理赔材料</option>
|
||||
<option value="其他">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fileUpload">选择文件</label>
|
||||
<input type="file" id="fileUpload">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fileDescription">文件描述</label>
|
||||
<textarea id="fileDescription" rows="3" style="width: 100%; border: 1px solid #ddd; border-radius: 4px;"></textarea>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-danger" onclick="document.getElementById('uploadModal').style.display='none'">取消</button>
|
||||
<button type="submit" class="btn btn-success">上传</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增：设置提醒模态框 -->
|
||||
<div id="setReminderModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="document.getElementById('setReminderModal').style.display='none'">×</span>
|
||||
<h2>设置保险到期提醒</h2>
|
||||
<form id="reminderForm">
|
||||
<input type="hidden" id="reminderPolicyId">
|
||||
<div class="form-group">
|
||||
<label for="reminderDays">提前提醒天数</label>
|
||||
<input type="number" id="reminderDays" min="1" max="365" value="30">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="reminderMessage">提醒消息内容</label>
|
||||
<textarea id="reminderMessage" rows="3">您的保险即将到期，请及时处理续保事宜。</textarea>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-danger" onclick="document.getElementById('setReminderModal').style.display='none'">取消</button>
|
||||
<button type="submit" class="btn btn-success">保存设置</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增：提醒管理模态框 -->
|
||||
<div id="adminRemindersModal" class="modal">
|
||||
<div class="modal-content" style="width: 80%; max-width: 800px;">
|
||||
<span class="close" onclick="document.getElementById('adminRemindersModal').style.display='none'">×</span>
|
||||
<h2>保险到期提醒</h2>
|
||||
<div id="adminRemindersList">
|
||||
<div class="reminder-item urgent">
|
||||
<div class="reminder-content">
|
||||
<h4>张三 - 医疗保险即将到期</h4>
|
||||
<p>保单号: CL12345678</p>
|
||||
<p>到期日期: 2023-12-31 (剩余15天)</p>
|
||||
<p>提醒内容: 您的医疗保险即将到期，请及时处理续保事宜。</p>
|
||||
</div>
|
||||
<div class="reminder-actions">
|
||||
<button class="btn btn-primary">查看详情</button>
|
||||
<button class="btn btn-success">标记为已发送</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reminder-item warning">
|
||||
<div class="reminder-content">
|
||||
<h4>李四 - 意外险即将到期</h4>
|
||||
<p>保单号: PA87654321</p>
|
||||
<p>到期日期: 2023-12-25 (剩余9天)</p>
|
||||
<p>提醒内容: 您的意外险即将到期，请及时处理续保事宜。</p>
|
||||
</div>
|
||||
<div class="reminder-actions">
|
||||
<button class="btn btn-primary">查看详情</button>
|
||||
<button class="btn btn-success">标记为已发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 原有脚本保持不变
|
||||
window.onclick = function(event) {
|
||||
if (event.target == document.getElementById('addModal')) {
|
||||
document.getElementById('addModal').style.display = "none";
|
||||
}
|
||||
if (event.target == document.getElementById('uploadModal')) {
|
||||
document.getElementById('uploadModal').style.display = "none";
|
||||
}
|
||||
if (event.target == document.getElementById('setReminderModal')) {
|
||||
document.getElementById('setReminderModal').style.display = "none";
|
||||
}
|
||||
if (event.target == document.getElementById('adminRemindersModal')) {
|
||||
document.getElementById('adminRemindersModal').style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// 新增提醒功能脚本
|
||||
function showSetReminderModal(policyId) {
|
||||
document.getElementById('reminderPolicyId').value = policyId;
|
||||
document.getElementById('setReminderModal').style.display = 'block';
|
||||
}
|
||||
|
||||
function showAdminReminders() {
|
||||
document.getElementById('adminRemindersModal').style.display = 'block';
|
||||
updateAdminReminderBadge(0); // 清除未读提醒
|
||||
}
|
||||
|
||||
function updateAdminReminderBadge(count) {
|
||||
const badge = document.getElementById('adminReminderBadge');
|
||||
if (count > 0) {
|
||||
badge.style.display = 'flex';
|
||||
badge.textContent = count;
|
||||
} else {
|
||||
badge.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('reminderForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const policyId = document.getElementById('reminderPolicyId').value;
|
||||
const days = document.getElementById('reminderDays').value;
|
||||
const message = document.getElementById('reminderMessage').value;
|
||||
|
||||
alert(`已为保单 ${policyId} 设置提前 ${days} 天提醒`);
|
||||
document.getElementById('setReminderModal').style.display = 'none';
|
||||
|
||||
// 模拟添加新提醒到管理列表
|
||||
addNewReminderToManagementList({
|
||||
employeeName: '张三',
|
||||
employeeId: 'EMP001',
|
||||
company: '中国人寿',
|
||||
type: '医疗保险',
|
||||
endDate: '2023-12-31',
|
||||
daysLeft: days,
|
||||
status: '待发送'
|
||||
});
|
||||
});
|
||||
|
||||
function addNewReminderToManagementList(data) {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${data.employeeName}</td>
|
||||
<td>${data.employeeId}</td>
|
||||
<td>${data.company}</td>
|
||||
<td>${data.type}</td>
|
||||
<td>${data.endDate}</td>
|
||||
<td>${data.daysLeft}</td>
|
||||
<td>${data.status}</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">发送提醒</button>
|
||||
<button class="btn btn-danger">取消</button>
|
||||
</td>
|
||||
`;
|
||||
document.getElementById('reminderManagementList').prepend(row);
|
||||
updateAdminReminderBadge(parseInt(document.getElementById('adminReminderBadge').textContent || '0') + 1);
|
||||
}
|
||||
|
||||
// 初始化
|
||||
updateAdminReminderBadge(2); // 模拟有2个待处理提醒
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,620 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!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;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.login-container {
|
||||
background-color: white;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
width: 350px;
|
||||
text-align: center;
|
||||
}
|
||||
.logo {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="logo">
|
||||
<h2>员工保险管理系统</h2>
|
||||
</div>
|
||||
<form id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
</div>
|
||||
<button type="submit">登录</button>
|
||||
</form>
|
||||
<div class="footer">
|
||||
<p>© 2023 员工保险管理系统 - 版权所有</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
// 模拟登录逻辑
|
||||
if(username === 'admin' && password === 'admin123') {
|
||||
window.location.href = 'admin.html'; // 管理员跳转
|
||||
} else if(username === 'employee' && password === 'employee123') {
|
||||
window.location.href = 'employee.html'; // 员工跳转
|
||||
} else {
|
||||
alert('用户名或密码错误');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,567 @@
|
|||
<!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;
|
||||
}
|
||||
</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 class="active">系统设置</li>
|
||||
<li onclick="window.location.href='reports.html'">统计报表</li>
|
||||
<li>添加新员工</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="card">
|
||||
<div class="tabs">
|
||||
<div class="tab active" onclick="switchTab('users')">用户管理</div>
|
||||
<div class="tab" onclick="switchTab('companies')">保险公司管理</div>
|
||||
<div class="tab" onclick="switchTab('types')">保险类型管理</div>
|
||||
<div class="tab" onclick="switchTab('system')">系统配置</div>
|
||||
</div>
|
||||
|
||||
<div id="users" class="tab-content active">
|
||||
<div class="card-header">
|
||||
<h2>用户列表</h2>
|
||||
<button class="btn btn-success" onclick="document.getElementById('addUserModal').style.display='block'">添加用户</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户名</th>
|
||||
<th>姓名</th>
|
||||
<th>角色</th>
|
||||
<th>部门</th>
|
||||
<th>工号</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>admin</td>
|
||||
<td>系统管理员</td>
|
||||
<td>管理员</td>
|
||||
<td>人事部</td>
|
||||
<td>ADM001</td>
|
||||
<td>激活</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">禁用</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zhangsan</td>
|
||||
<td>张三</td>
|
||||
<td>员工</td>
|
||||
<td>技术部</td>
|
||||
<td>EMP001</td>
|
||||
<td>激活</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">禁用</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lisi</td>
|
||||
<td>李四</td>
|
||||
<td>员工</td>
|
||||
<td>市场部</td>
|
||||
<td>EMP002</td>
|
||||
<td>激活</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">禁用</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>wangwu</td>
|
||||
<td>王五</td>
|
||||
<td>员工</td>
|
||||
<td>财务部</td>
|
||||
<td>EMP003</td>
|
||||
<td>已禁用</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-success">激活</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="companies" class="tab-content">
|
||||
<div class="card-header">
|
||||
<h2>保险公司管理</h2>
|
||||
<button class="btn btn-success" onclick="document.getElementById('addCompanyModal').style.display='block'">添加保险公司</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>保险公司名称</th>
|
||||
<th>联系人</th>
|
||||
<th>联系电话</th>
|
||||
<th>合作状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>中国人寿</td>
|
||||
<td>张经理</td>
|
||||
<td>13800138001</td>
|
||||
<td>合作中</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">终止合作</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>平安保险</td>
|
||||
<td>李经理</td>
|
||||
<td>13800138002</td>
|
||||
<td>合作中</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">终止合作</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>太平洋保险</td>
|
||||
<td>王经理</td>
|
||||
<td>13800138003</td>
|
||||
<td>合作中</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">终止合作</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="types" class="tab-content">
|
||||
<div class="card-header">
|
||||
<h2>保险类型管理</h2>
|
||||
<button class="btn btn-success" onclick="document.getElementById('addTypeModal').style.display='block'">添加保险类型</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>保险类型</th>
|
||||
<th>描述</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>医疗保险</td>
|
||||
<td>员工医疗费用报销</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>意外险</td>
|
||||
<td>员工意外伤害保障</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>养老保险</td>
|
||||
<td>员工退休养老保障</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>重大疾病险</td>
|
||||
<td>员工重大疾病保障</td>
|
||||
<td>
|
||||
<button class="btn btn-primary">编辑</button>
|
||||
<button class="btn btn-danger">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="system" class="tab-content">
|
||||
<div class="card-header">
|
||||
<h2>系统配置</h2>
|
||||
</div>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="systemName">系统名称</label>
|
||||
<input type="text" id="systemName" value="员工保险管理系统">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="companyName">公司名称</label>
|
||||
<input type="text" id="companyName" value="某某科技有限公司">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="expireWarning">保险到期提前提醒天数</label>
|
||||
<input type="number" id="expireWarning" value="30">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="backupFrequency">数据备份频率</label>
|
||||
<select id="backupFrequency">
|
||||
<option value="daily">每天</option>
|
||||
<option value="weekly" selected>每周</option>
|
||||
<option value="monthly">每月</option>
|
||||
</select>
|
||||
</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>
|
||||
|
||||
<!-- 添加用户模态框 -->
|
||||
<div id="addUserModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="document.getElementById('addUserModal').style.display='none'">×</span>
|
||||
<h2>添加新用户</h2>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" id="username" placeholder="请输入用户名">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fullname">姓名</label>
|
||||
<input type="text" id="fullname" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" id="password" placeholder="请输入密码">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirmPassword">确认密码</label>
|
||||
<input type="password" id="confirmPassword" placeholder="请再次输入密码">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="role">角色</label>
|
||||
<select id="role">
|
||||
<option value="employee">员工</option>
|
||||
<option value="admin">管理员</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="department">部门</label>
|
||||
<select id="department">
|
||||
<option value="hr">人事部</option>
|
||||
<option value="tech">技术部</option>
|
||||
<option value="market">市场部</option>
|
||||
<option value="finance">财务部</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="employeeId">工号</label>
|
||||
<input type="text" id="employeeId" placeholder="请输入工号">
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-danger" onclick="document.getElementById('addUserModal').style.display='none'">取消</button>
|
||||
<button type="submit" class="btn btn-success">保存</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加保险公司模态框 -->
|
||||
<div id="addCompanyModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="document.getElementById('addCompanyModal').style.display='none'">×</span>
|
||||
<h2>添加保险公司</h2>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="companyName">保险公司名称</label>
|
||||
<input type="text" id="companyName" placeholder="请输入保险公司名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactPerson">联系人</label>
|
||||
<input type="text" id="contactPerson" placeholder="请输入联系人">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contactPhone">联系电话</label>
|
||||
<input type="text" id="contactPhone" placeholder="请输入联系电话">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">电子邮箱</label>
|
||||
<input type="email" id="email" placeholder="请输入电子邮箱">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address">公司地址</label>
|
||||
<input type="text" id="address" placeholder="请输入公司地址">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cooperationDate">合作开始日期</label>
|
||||
<input type="date" id="cooperationDate">
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-danger" onclick="document.getElementById('addCompanyModal').style.display='none'">取消</button>
|
||||
<button type="submit" class="btn btn-success">保存</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加保险类型模态框 -->
|
||||
<div id="addTypeModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="document.getElementById('addTypeModal').style.display='none'">×</span>
|
||||
<h2>添加保险类型</h2>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="insuranceType">保险类型</label>
|
||||
<input type="text" id="insuranceType" placeholder="请输入保险类型">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="typeDescription">描述</label>
|
||||
<textarea id="typeDescription" rows="3" placeholder="请输入保险类型描述"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="coverageRange">保障范围</label>
|
||||
<textarea id="coverageRange" rows="3" placeholder="请输入保障范围"></textarea>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-danger" onclick="document.getElementById('addTypeModal').style.display='none'">取消</button>
|
||||
<button type="submit" class="btn btn-success">保存</button>
|
||||
</div>
|
||||
</form>
|
||||
</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');
|
||||
}
|
||||
|
||||
// 点击模态框外部关闭模态框
|
||||
window.onclick = function(event) {
|
||||
if (event.target == document.getElementById('addUserModal')) {
|
||||
document.getElementById('addUserModal').style.display = "none";
|
||||
}
|
||||
if (event.target == document.getElementById('addCompanyModal')) {
|
||||
document.getElementById('addCompanyModal').style.display = "none";
|
||||
}
|
||||
if (event.target == document.getElementById('addTypeModal')) {
|
||||
document.getElementById('addTypeModal').style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,394 @@
|
|||
<!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="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<style>
|
||||
/* 基础样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
.app-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
background-color: #304156;
|
||||
color: #fff;
|
||||
}
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 预处理专用样式 */
|
||||
.preprocess-container {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
||||
padding: 20px;
|
||||
}
|
||||
.step-indicator {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.data-preview {
|
||||
border: 1px dashed #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-top: 15px;
|
||||
min-height: 200px;
|
||||
}
|
||||
.audio-wave {
|
||||
background: #f5f7fa;
|
||||
height: 80px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.match-result {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.match-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #ebeef5;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.match-text {
|
||||
flex: 1;
|
||||
}
|
||||
.function-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="app-container">
|
||||
<!-- 侧边栏导航 -->
|
||||
<div class="sidebar">
|
||||
<div class="logo">
|
||||
<h2>风电叶片检查</h2>
|
||||
<p>智能管理系统</p>
|
||||
</div>
|
||||
<el-menu
|
||||
default-active="data-preprocess"
|
||||
background-color="#304156"
|
||||
text-color="#fff"
|
||||
active-text-color="#409EFF"
|
||||
>
|
||||
<!-- 其他菜单项... -->
|
||||
<el-submenu index="data">
|
||||
<template slot="title">
|
||||
<i class="el-icon-upload"></i>
|
||||
<span>数据处理</span>
|
||||
</template>
|
||||
<el-menu-item index="data-import" @click="activeModule='data-import'">数据入库</el-menu-item>
|
||||
<el-menu-item index="data-preprocess" @click="activeModule='data-preprocess'">智能预处理</el-menu-item>
|
||||
<el-menu-item index="data-platform" @click="activeModule='data-platform'">分析平台</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main-content">
|
||||
<!-- 智能数据预处理模块 -->
|
||||
<div v-if="activeModule === 'data-preprocess'" class="preprocess-container">
|
||||
<h2>智能数据预处理中心</h2>
|
||||
|
||||
<el-steps :active="currentStep" finish-status="success" class="step-indicator">
|
||||
<el-step title="数据选择"></el-step>
|
||||
<el-step title="智能处理"></el-step>
|
||||
<el-step title="结果验证"></el-step>
|
||||
<el-step title="完成导入"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<!-- 步骤1：数据选择 -->
|
||||
<div v-show="currentStep === 0">
|
||||
<h3>选择待处理数据源</h3>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action=""
|
||||
multiple
|
||||
:on-change="handleFileUpload"
|
||||
:auto-upload="false"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">支持图片(jpg/png)、视频(mp4)、音频(mp3/wav)、点云数据(pcd)</div>
|
||||
</el-upload>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
style="margin-top: 20px;"
|
||||
@click="currentStep = 1"
|
||||
:disabled="fileList.length === 0"
|
||||
>
|
||||
开始智能处理
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2：智能处理 -->
|
||||
<div v-show="currentStep === 1">
|
||||
<h3>选择预处理功能</h3>
|
||||
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="func in availableFunctions"
|
||||
:key="func.name"
|
||||
:type="selectedFunctions.includes(func.name) ? 'primary' : 'info'"
|
||||
class="function-tag"
|
||||
@click="toggleFunction(func.name)"
|
||||
>
|
||||
{{ func.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedFunctions.length > 0" style="margin-top: 30px;">
|
||||
<h4>功能配置</h4>
|
||||
|
||||
<!-- 语音转文字配置 -->
|
||||
<div v-if="selectedFunctions.includes('speech2text')" style="margin-bottom: 20px;">
|
||||
<el-card shadow="never">
|
||||
<div slot="header">语音转文字配置</div>
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="语言模型">
|
||||
<el-select v-model="config.speech2text.language" style="width: 100%">
|
||||
<el-option label="中文普通话" value="zh-CN"></el-option>
|
||||
<el-option label="英语" value="en-US"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专业术语库">
|
||||
<el-switch v-model="config.speech2text.useGlossary"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 关键信息提取配置 -->
|
||||
<div v-if="selectedFunctions.includes('keyinfo')" style="margin-bottom: 20px;">
|
||||
<el-card shadow="never">
|
||||
<div slot="header">关键信息提取配置</div>
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="提取模式">
|
||||
<el-radio-group v-model="config.keyinfo.mode">
|
||||
<el-radio label="standard">标准模式</el-radio>
|
||||
<el-radio label="detailed">详细模式</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="包含缺陷描述">
|
||||
<el-switch v-model="config.keyinfo.includeDefect"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 图文匹配配置 -->
|
||||
<div v-if="selectedFunctions.includes('match')">
|
||||
<el-card shadow="never">
|
||||
<div slot="header">图文匹配配置</div>
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="匹配精度">
|
||||
<el-slider v-model="config.match.threshold" :min="50" :max="100"></el-slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动修正">
|
||||
<el-switch v-model="config.match.autoAdjust"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 30px; text-align: center;">
|
||||
<el-button @click="currentStep = 0">上一步</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="startProcessing"
|
||||
:loading="processing"
|
||||
>
|
||||
开始处理
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3：结果验证 -->
|
||||
<div v-show="currentStep === 2">
|
||||
<h3>处理结果验证</h3>
|
||||
|
||||
<el-tabs type="border-card">
|
||||
<!-- 语音转文字结果 -->
|
||||
<el-tab-pane label="语音转文字" v-if="selectedFunctions.includes('speech2text')">
|
||||
<div v-for="(result, index) in processResults.speech2text" :key="index">
|
||||
<h4>{{ result.fileName }}</h4>
|
||||
<div class="audio-wave">
|
||||
<!-- 音频波形图占位 -->
|
||||
<div style="position: absolute; top: 50%; left: 20px; transform: translateY(-50%);">
|
||||
<i class="el-icon-headset" style="font-size: 24px;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
v-model="result.text"
|
||||
style="margin-top: 10px;"
|
||||
></el-input>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 关键信息提取结果 -->
|
||||
<el-tab-pane label="关键信息" v-if="selectedFunctions.includes('keyinfo')">
|
||||
<el-table :data="processResults.keyinfo" border style="width: 100%">
|
||||
<el-table-column prop="fileName" label="文件名" width="180"></el-table-column>
|
||||
<el-table-column prop="defectType" label="缺陷类型" width="120"></el-table-column>
|
||||
<el-table-column prop="position" label="位置"></el-table-column>
|
||||
<el-table-column prop="description" label="描述"></el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 图文匹配结果 -->
|
||||
<el-tab-pane label="图文匹配" v-if="selectedFunctions.includes('match')">
|
||||
<div v-for="(result, index) in processResults.match" :key="index" class="match-result">
|
||||
<div class="match-image">
|
||||
<img :src="result.image" style="width: 100%; height: 100%; object-fit: contain;">
|
||||
</div>
|
||||
<div class="match-text">
|
||||
<h4>匹配度: {{ result.score }}%</h4>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
v-model="result.text"
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div style="margin-top: 30px; text-align: center;">
|
||||
<el-button @click="currentStep = 1">上一步</el-button>
|
||||
<el-button type="primary" @click="currentStep = 3">确认结果</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤4：完成导入 -->
|
||||
<div v-show="currentStep === 3">
|
||||
<h3>预处理完成</h3>
|
||||
<el-result
|
||||
icon="success"
|
||||
title="数据处理成功"
|
||||
:subTitle="`已完成 ${processedCount} 个文件的智能预处理`"
|
||||
>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" @click="importToPlatform">导入分析平台</el-button>
|
||||
<el-button @click="exportResults">导出处理结果</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
activeModule: 'data-preprocess',
|
||||
currentStep: 0,
|
||||
fileList: [],
|
||||
availableFunctions: [
|
||||
{ name: 'speech2text', label: '语音转文字' },
|
||||
{ name: 'keyinfo', label: '关键信息提取' },
|
||||
{ name: 'match', label: '图文智能匹配' }
|
||||
],
|
||||
selectedFunctions: ['speech2text', 'keyinfo', 'match'],
|
||||
config: {
|
||||
speech2text: {
|
||||
language: 'zh-CN',
|
||||
useGlossary: true
|
||||
},
|
||||
keyinfo: {
|
||||
mode: 'standard',
|
||||
includeDefect: true
|
||||
},
|
||||
match: {
|
||||
threshold: 75,
|
||||
autoAdjust: true
|
||||
}
|
||||
},
|
||||
processing: false,
|
||||
processResults: {
|
||||
speech2text: [
|
||||
{
|
||||
fileName: '检查记录_20231105.mp3',
|
||||
text: '发现1号机组2号叶片前缘有约3厘米的腐蚀痕迹，建议在下个月停机时进行修复处理。'
|
||||
}
|
||||
],
|
||||
keyinfo: [
|
||||
{
|
||||
fileName: '检查报告_001.docx',
|
||||
defectType: '前缘腐蚀',
|
||||
position: '1号机组-2号叶片-前缘',
|
||||
description: '长度约3cm，深度约2mm'
|
||||
}
|
||||
],
|
||||
match: [
|
||||
{
|
||||
image: 'https://via.placeholder.com/800x600?text=叶片前缘腐蚀',
|
||||
text: '图片显示1号机组2号叶片前缘有明显腐蚀痕迹，与2023年11月5日的检查记录相符',
|
||||
score: 89
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
processedCount() {
|
||||
return this.fileList.length
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFileUpload(file, fileList) {
|
||||
this.fileList = fileList
|
||||
},
|
||||
toggleFunction(funcName) {
|
||||
const index = this.selectedFunctions.indexOf(funcName)
|
||||
if (index >= 0) {
|
||||
this.selectedFunctions.splice(index, 1)
|
||||
} else {
|
||||
this.selectedFunctions.push(funcName)
|
||||
}
|
||||
},
|
||||
startProcessing() {
|
||||
this.processing = true
|
||||
// 模拟处理过程
|
||||
setTimeout(() => {
|
||||
this.processing = false
|
||||
this.currentStep = 2
|
||||
}, 2000)
|
||||
},
|
||||
importToPlatform() {
|
||||
this.$message.success('数据已导入分析平台')
|
||||
this.activeModule = 'data-platform'
|
||||
},
|
||||
exportResults() {
|
||||
this.$message.success('处理结果导出成功')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue