crpm-proj-code-set/zxcpxt/src/main/resources/static/route/pages/index.html

274 lines
13 KiB
HTML
Raw Normal View History

2025-06-30 09:30:01 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
2025-07-03 14:49:27 +08:00
<base href="/"/>
2025-07-04 18:14:44 +08:00
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
2025-06-30 09:30:01 +08:00
<title>在线测评系统</title>
2025-07-04 18:14:44 +08:00
<link rel="stylesheet" href="assets/crpm/js/layui/css/layui.css"/>
<link rel="stylesheet" href="assets/crpm/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/crpm/index/index3/index3.css"/>
<link rel="stylesheet" href="assets/crpm/index/index.css"/>
2025-06-30 09:30:01 +08:00
</head>
<body>
<div id="app">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">
在线测评系统
</div>
<ul class="layui-nav layui-layout-right">
2025-07-04 16:50:18 +08:00
2025-07-04 18:14:44 +08:00
<li class="layui-nav-item topTitlec" id="accountManageBtn">
2025-07-04 16:50:18 +08:00
<div>
2025-07-04 18:14:44 +08:00
<div class="topTitle "><i class="layui-icon layui-icon-user topicon"></i>账号管理
</div>
2025-07-04 16:50:18 +08:00
</div>
</li>
2025-06-30 09:30:01 +08:00
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:void(0);">管理员</a>
<dl class="layui-nav-child">
2025-07-04 18:14:44 +08:00
<dd><a href="javascript:void(0);" id="signoutBtn">退出</a></dd>
2025-06-30 09:30:01 +08:00
</dl>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域可配合layui已有的垂直导航 -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-c6e43803-1fd3-4869-afbf-19bdad5cba01"
data-mod-id="18a85b2f-22b9-4e85-a913-d799d5bd9744" data-url="route/pages/6e55d5/list.html"><i
class="fa fa-calendar-check-o"></i> 考试安排</a>
2025-06-30 09:30:01 +08:00
</li>
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-4b169ac5-041d-4ce7-9888-e272f7d46aca"
data-mod-id="ad52bb2a-b3a8-42b9-810c-936af20a61b9" data-url="route/pages/fd7c04/list.html"><i
class="fa fa-cog"></i> 系统设置</a>
2025-06-30 09:30:01 +08:00
</li>
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-9f27ecbc-2380-4244-b1a3-23a40551f909"
data-mod-id="04fe9e21-8eb8-44e2-b124-49dcab8a248b" data-url="route/pages/d307dd/list.html"><i
class="fa fa-file-text-o"></i> 试卷管理</a>
2025-06-30 09:30:01 +08:00
</li>
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-5a0a6124-8680-4588-ac2f-f32e4f3f46b3"
data-mod-id="068117b5-128e-4964-aaba-f138663c24d2" data-url="route/pages/f7032e/list.html"><i
class="fa fa-question-circle"></i> 题库管理</a>
2025-06-30 09:30:01 +08:00
</li>
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-49ba617b-2a3f-4730-b5a5-fa4b703358f9"
data-mod-id="86b515f5-c49f-47d3-a192-b41687fd3b49" data-url="route/pages/286b2b/list.html"><i
class="fa fa-users"></i> 用户管理</a>
2025-06-30 09:30:01 +08:00
</li>
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-e99c4fbe-7436-4bf7-8dd5-46f3a7ecbbea"
data-mod-id="f23678c6-8f60-4bd1-8a87-36210666acdd" data-url="route/pages/d6a132/list.html"><i
class="fa fa-sitemap"></i> 班级管理</a>
2025-06-30 09:30:01 +08:00
</li>
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-902a979b-e5e0-4ed6-a396-159afd54e3ca"
data-mod-id="eab4ad11-37f2-43df-b8ab-b014178bac77" data-url="route/pages/d633e3/list.html"><i
class="fa fa-history"></i> 答题记录</a>
2025-06-30 09:30:01 +08:00
</li>
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-f1a8ab61-a8fc-4ef9-8ee2-40f45c7cc00d"
data-mod-id="e194e640-0536-4933-b389-f57dc09414c0" data-url="route/pages/e281ff/list.html"><i
class="fa fa-bar-chart"></i> 成绩分析</a>
2025-06-30 09:30:01 +08:00
</li>
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-88dda718-8817-48a9-aa5b-e32d91b193da"
data-mod-id="4611c960-893f-49a5-9109-5273faa6c646" data-url="route/pages/079b7d/list.html"><i
class="fa fa-exclamation-triangle"></i> 错题统计</a>
2025-06-30 09:30:01 +08:00
</li>
<li class="layui-nav-item layui-nav-itemed">
2025-07-04 18:14:44 +08:00
<a href="javascript:void(0);" class="menu-item" id="menu-41ffc7bf-14bd-4945-810a-aa72c05c99fb"
data-mod-id="4b02c324-1fee-4abf-aee6-25e30c1f9713" data-url="route/pages/86ad8d/list.html"><i
class="fa fa-folder-open-o"></i> 资源库管理</a>
2025-06-30 09:30:01 +08:00
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div class="layui-box-top">
<blockquote class="layui-elem-quote-index layui-text">
欢迎使用在线测评系统
</blockquote>
2025-07-03 14:49:27 +08:00
<!--数据统计代码写到这里 , 只允许2行 -->
2025-06-30 09:30:01 +08:00
<div class='homepage' id="homepage">
2025-07-03 14:49:27 +08:00
<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">
<div id="examParticipationChart" style="width: 100%; height: 300px;"></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="scoreDistributionChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
2025-06-30 09:30:01 +08:00
</div>
2025-07-03 14:49:27 +08:00
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">题目难度分布</div>
<div class="layui-card-body">
<div id="difficultyChart" style="width: 100%; height: 300px;"></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="monthlyTrendChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
2025-06-30 09:30:01 +08:00
</div>
2025-07-03 14:49:27 +08:00
</div>
2025-06-30 09:30:01 +08:00
<div class="layui-card layui-panel page-iframe-container">
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
</div>
</div>
</div>
2025-07-04 18:14:44 +08:00
<!-- <div class="layui-footer"></div>-->
2025-06-30 09:30:01 +08:00
</div>
</div>
<script src="assets/crpm/js/layui/layui.js"></script>
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
2025-07-03 14:49:27 +08:00
2025-06-30 09:30:01 +08:00
<script>
2025-07-03 14:49:27 +08:00
layui.use(['element', 'layer', 'util'], function () {
2025-06-30 09:30:01 +08:00
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
var $win = $(window);
window['layer'] = layer;
2025-07-04 18:14:44 +08:00
$('#signoutBtn').click(function () {
window.open('sign/signout', '_self')
})
2025-06-30 09:30:01 +08:00
2025-07-04 18:14:44 +08:00
$('#accountManageBtn').click(function () {
var pageIframe = $('#pageIframe');
pageIframe.attr('src', 'route/pages/user/list.html');
pageIframe.show();
homepage.style.display = 'none';
})
var init = function () {
2025-06-30 09:30:01 +08:00
var $pageIframe = $('#pageIframe');
$pageIframe.css({
2025-07-04 16:50:18 +08:00
height: `${$win.height() - 115}px`
2025-06-30 09:30:01 +08:00
})
}
init();
2025-07-03 14:49:27 +08:00
var homepage = document.getElementById('homepage');
2025-07-04 18:14:44 +08:00
$(document).on('click', '.menu-item', function () {
2025-06-30 09:30:01 +08:00
var url = this.dataset.url;
var pageIframe = $('#pageIframe');
pageIframe.attr('src', url);
pageIframe.show();
2025-07-03 14:49:27 +08:00
homepage.style.display = 'none';
2025-06-30 09:30:01 +08:00
});
2025-07-03 14:49:27 +08:00
// 初始化数据统计图表
2025-07-04 18:14:44 +08:00
var initDataCharts = function () {
2025-07-03 14:49:27 +08:00
// 考试参与情况饼图
var examChart = echarts.init(document.getElementById('examParticipationChart'));
var examOption = {
2025-07-04 18:14:44 +08:00
tooltip: {trigger: 'item'},
legend: {orient: 'vertical', left: 'left'},
2025-07-03 14:49:27 +08:00
series: [{
name: '参与情况',
type: 'pie',
radius: '60%',
data: [
2025-07-04 18:14:44 +08:00
{value: 86, name: '已参与'},
{value: 24, name: '未参与'}
2025-07-03 14:49:27 +08:00
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
examChart.setOption(examOption);
2025-06-30 09:30:01 +08:00
2025-07-03 14:49:27 +08:00
// 成绩分布柱状图
var scoreChart = echarts.init(document.getElementById('scoreDistributionChart'));
var scoreOption = {
2025-07-04 18:14:44 +08:00
tooltip: {trigger: 'axis'},
2025-07-03 14:49:27 +08:00
xAxis: {
type: 'category',
data: ['90-100分', '80-89分', '70-79分', '60-69分', '60分以下']
},
2025-07-04 18:14:44 +08:00
yAxis: {type: 'value'},
2025-07-03 14:49:27 +08:00
series: [{
name: '人数',
data: [12, 28, 35, 18, 7],
type: 'bar',
2025-07-04 18:14:44 +08:00
itemStyle: {color: '#5470c6'}
2025-07-03 14:49:27 +08:00
}]
};
scoreChart.setOption(scoreOption);
2025-06-30 09:30:01 +08:00
2025-07-03 14:49:27 +08:00
// 题目难度分布环形图
var difficultyChart = echarts.init(document.getElementById('difficultyChart'));
var difficultyOption = {
2025-07-04 18:14:44 +08:00
tooltip: {trigger: 'item'},
legend: {orient: 'vertical', left: 'left'},
2025-07-03 14:49:27 +08:00
series: [{
name: '题目难度',
type: 'pie',
radius: ['40%', '70%'],
data: [
2025-07-04 18:14:44 +08:00
{value: 45, name: '简单'},
{value: 128, name: '中等'},
{value: 67, name: '困难'}
2025-07-03 14:49:27 +08:00
]
}]
};
difficultyChart.setOption(difficultyOption);
2025-06-30 09:30:01 +08:00
2025-07-03 14:49:27 +08:00
// 月度考试趋势曲线图
var trendChart = echarts.init(document.getElementById('monthlyTrendChart'));
var trendOption = {
2025-07-04 18:14:44 +08:00
tooltip: {trigger: 'axis'},
2025-07-03 14:49:27 +08:00
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
2025-07-04 18:14:44 +08:00
yAxis: {type: 'value', name: '考试次数'},
2025-07-03 14:49:27 +08:00
series: [{
name: '考试场次',
data: [8, 12, 15, 18, 22, 25],
type: 'line',
smooth: true,
2025-07-04 18:14:44 +08:00
itemStyle: {color: '#91cc75'},
areaStyle: {opacity: 0.3}
2025-07-03 14:49:27 +08:00
}]
};
trendChart.setOption(trendOption);
2025-06-30 09:30:01 +08:00
};
2025-07-03 14:49:27 +08:00
// 初始化图表
initDataCharts();
});
2025-06-30 09:30:01 +08:00
</script>
</body>
</html>