431 lines
15 KiB
HTML
431 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>银河锋锐工作室账户后台系统</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<link rel="stylesheet" href="/css/font.css">
|
|
<link rel="stylesheet" href="/css/xadmin.css">
|
|
<link rel="stylesheet" href="/css/win10ui.css">
|
|
<link rel="stylesheet" href="/css/theme.css">
|
|
<link rel="stylesheet" href="/lib/layui/css/layui.css">
|
|
<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="/js/xadmin.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<script>window.breadcrumbs = [{name: "首页", url: ""},{name: "工作组", url: ""},{name: "考核中心"}];</script>
|
|
<script src="/js/address.bar.js"></script>
|
|
<style>
|
|
.score-container {
|
|
position: relative;
|
|
border-radius: 50%;
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.score-container.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.score-value {
|
|
font-size: 48px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.score-status {
|
|
font-size: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.calendar-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.calendar {
|
|
width: 32%;
|
|
border: 1px solid #e6e6e6;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.calendar-title {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.calendar-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.calendar-days {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 5px;
|
|
}
|
|
|
|
.calendar-day {
|
|
height: 25px;
|
|
width: 25px; /* 添加固定宽度 */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
margin: 0 auto; /* 居中显示 */
|
|
}
|
|
|
|
.calendar-day.checked {
|
|
background-color: #5FB878;
|
|
color: white;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.calendar-day.missed {
|
|
background-color: #FF5722;
|
|
color: white;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.point-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.point-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.point-desc {
|
|
flex: 1;
|
|
}
|
|
|
|
.point-value {
|
|
width: 60px;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.point-value.positive {
|
|
color: #5FB878;
|
|
}
|
|
|
|
.point-value.negative {
|
|
color: #FF5722;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin: 20px 0 15px;
|
|
padding-left: 10px;
|
|
border-left: 4px solid #1E9FFF;
|
|
}
|
|
|
|
.layui-card {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #999;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="max-width: 1500px; margin-top: 40px; margin: 0 auto; padding: 20px;">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">综合考核成绩</div>
|
|
<div class="layui-card-body" style="text-align: center; padding: 30px 0;">
|
|
<div id="scoreDisplay" class="score-container layui-bg-green pulse">
|
|
<div class="score-value">--</div>
|
|
<div class="score-status">加载中...</div>
|
|
<div class="score-nolong">非限制分数：加载中...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">最近三周签到情况</div>
|
|
<div class="layui-card-body">
|
|
<div id="attendanceLoading" class="loading">
|
|
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate"></i> 加载签到数据...
|
|
</div>
|
|
<div class="calendar-container" style="display: none;">
|
|
<div class="calendar">
|
|
<div class="calendar-title">上上周</div>
|
|
<div class="calendar-header">
|
|
<span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
|
|
</div>
|
|
<div class="calendar-days" id="lastWeekCalendar">
|
|
</div>
|
|
</div>
|
|
<div class="calendar">
|
|
<div class="calendar-title">上周</div>
|
|
<div class="calendar-header">
|
|
<span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
|
|
</div>
|
|
<div class="calendar-days" id="currentWeekCalendar">
|
|
</div>
|
|
</div>
|
|
<div class="calendar">
|
|
<div class="calendar-title">本周</div>
|
|
<div class="calendar-header">
|
|
<span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
|
|
</div>
|
|
<div class="calendar-days" id="nextWeekCalendar">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">加分项目</div>
|
|
<div class="layui-card-body">
|
|
<div id="bonusLoading" class="loading">
|
|
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate"></i> 加载加分项...
|
|
</div>
|
|
<div id="bonusItems" style="display: none;">
|
|
<!-- 由JS动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">减分项目</div>
|
|
<div class="layui-card-body">
|
|
<div id="penaltyLoading" class="loading">
|
|
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate"></i> 加载减分项...
|
|
</div>
|
|
<div id="penaltyItems" style="display: none;">
|
|
<!-- 由JS动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">考核说明</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-collapse" lay-accordion>
|
|
<div class="layui-colla-item">
|
|
<h2 class="layui-colla-title">考核等级说明</h2>
|
|
<div class="layui-colla-content">
|
|
<p>95分及以上：卓越</p>
|
|
<p>90-94分：优秀</p>
|
|
<p>85-89分：优良</p>
|
|
<p>80-84分：良好</p>
|
|
<p>75-79分：较好</p>
|
|
<p>70-74分：一般</p>
|
|
<p>65-69分：及格</p>
|
|
<p>60-64分：临界，可能面临辞退风险</p>
|
|
<p>50-59分：较差，面临辞退风险</p>
|
|
<p>30-49分：很差，面临辞退风险</p>
|
|
<p>30分以下：极差，面临辞退风险</p>
|
|
</div>
|
|
</div>
|
|
<div class="layui-colla-item">
|
|
<h2 class="layui-colla-title">评分标准</h2>
|
|
<div class="layui-colla-content">
|
|
<p>1. 工作质量：40%</p>
|
|
<p>2. 工作效率：30%</p>
|
|
<p>3. 团队协作：20%</p>
|
|
<p>4. 考勤情况：10%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use(['element', 'jquery'], function(){
|
|
var element = layui.element;
|
|
var $ = layui.jquery;
|
|
|
|
// 根据分数设置样式
|
|
function setScoreStyle(score, tscore=0) {
|
|
var container = $('#scoreDisplay');
|
|
var status = $('.score-status');
|
|
var nolong = $('.score-nolong');
|
|
|
|
// 移除所有可能的背景类
|
|
container.removeClass('layui-bg-green layui-bg-cyan layui-bg-blue layui-bg-orange layui-bg-red');
|
|
|
|
if(score >= 95) {
|
|
container.addClass('layui-bg-green');
|
|
status.text('卓越');
|
|
} else if(score >= 90) {
|
|
container.addClass('layui-bg-green');
|
|
status.text('优秀');
|
|
} else if(score >= 85) {
|
|
container.addClass('layui-bg-cyan');
|
|
status.text('优良');
|
|
} else if(score >= 80) {
|
|
container.addClass('layui-bg-blue');
|
|
status.text('良好');
|
|
} else if(score >= 75) {
|
|
container.addClass('layui-bg-blue');
|
|
status.text('较好');
|
|
} else if(score >= 70) {
|
|
container.addClass('layui-bg-orange');
|
|
status.text('一般');
|
|
} else if(score >= 65) {
|
|
container.addClass('layui-bg-orange');
|
|
status.text('及格');
|
|
} else if(score >= 60) {
|
|
container.addClass('layui-bg-orange');
|
|
status.text('临界，面临辞退风险');
|
|
} else if(score >= 50) {
|
|
container.addClass('layui-bg-red');
|
|
status.text('较差，面临辞退风险');
|
|
} else if(score >= 30) {
|
|
container.addClass('layui-bg-red');
|
|
status.text('很差，面临辞退风险');
|
|
} else {
|
|
container.addClass('layui-bg-red');
|
|
status.text('极差，面临辞退风险');
|
|
}
|
|
|
|
nolong.text(`非限制分数：${tscore}`);
|
|
|
|
// 设置分数值
|
|
$('.score-value').text(score);
|
|
}
|
|
|
|
// 生成日历
|
|
function generateCalendar(containerId, data) {
|
|
var html = '';
|
|
for (var i = 0; i < 7; i++) {
|
|
var dayClass = 'calendar-day';
|
|
if (data[i] === 1) {
|
|
dayClass += ' checked';
|
|
} else if (data[i] === 2) {
|
|
dayClass += ' missed';
|
|
}
|
|
html += '<div class="' + dayClass + '">' + (i+1) + '</div>';
|
|
}
|
|
$('#' + containerId).html(html);
|
|
}
|
|
|
|
// 生成加分/减分项
|
|
function generatePointItems(containerId, items, isPositive) {
|
|
var html = '';
|
|
items.forEach(function(item) {
|
|
html += '<div class="point-item">' +
|
|
'<div class="point-desc">' + item.description + '</div>' +
|
|
'<div class="point-value ' + (isPositive ? 'positive' : 'negative') + '">' +
|
|
(isPositive ? '+' : '-') + item.points +
|
|
'</div>' +
|
|
'</div>';
|
|
});
|
|
|
|
if (items.length === 0) {
|
|
html = '<div style="padding: 15px; text-align: center; color: #999;">暂无记录</div>';
|
|
}
|
|
|
|
// 移除加载掩层并显示内容
|
|
$('#' + containerId).html(html).show();
|
|
$('#' + containerId + 'Loading').remove(); // 完全移除加载元素而不仅仅是隐藏
|
|
}
|
|
|
|
// 在fetchAssessmentData函数中更新相关部分
|
|
if (window.UserUUID) {url='/API/AssessmentScore.api?UserUUID=' + UserUUID} else {url='/API/AssessmentScore.api'}
|
|
function fetchAssessmentData() {
|
|
$.ajax({
|
|
url: url,
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
if (response && response.success) {
|
|
var data = response.data;
|
|
setScoreStyle(data.score, data.tscore);
|
|
if (data.attendance) {
|
|
generateCalendar('lastWeekCalendar', data.attendance.lastWeek || []);
|
|
generateCalendar('currentWeekCalendar', data.attendance.currentWeek || []);
|
|
generateCalendar('nextWeekCalendar', data.attendance.nextWeek || []);
|
|
$('.calendar-container').show();
|
|
$('#attendanceLoading').remove();
|
|
}
|
|
if (data.bonusItems) {
|
|
generatePointItems('bonusItems', data.bonusItems, true);
|
|
} else {
|
|
$('#bonusItems').html('<div style="padding: 15px; text-align: center; color: #999;">暂无加分记录</div>').show();
|
|
}
|
|
if (data.penaltyItems) {
|
|
generatePointItems('penaltyItems', data.penaltyItems, false);
|
|
} else {
|
|
$('#penaltyItems').html('<div style="padding: 15px; text-align: center; color: #999;">暂无减分记录</div>').show();
|
|
}
|
|
$('#bonusLoading').remove();
|
|
$('#penaltyLoading').remove();
|
|
} else {
|
|
showError('获取数据失败: ' + (response.message || '未知错误'));
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
showError('API请求失败: ' + error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 更新showError函数也移除加载掩层
|
|
function showError(message) {
|
|
layui.layer.msg(message, {icon: 2});
|
|
|
|
// 显示占位内容并移除所有加载状态
|
|
$('.score-value').text('--');
|
|
$('.score-status').text('数据加载失败');
|
|
|
|
// 移除所有加载掩层
|
|
$('.loading').remove();
|
|
|
|
// 显示错误信息
|
|
$('.calendar-container, #bonusItems, #penaltyItems').show().html(
|
|
'<div style="padding: 15px; text-align: center; color: #FF5722;">' + message + '</div>'
|
|
);
|
|
}
|
|
fetchAssessmentData();
|
|
setInterval(fetchAssessmentData, 5 * 60 * 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |