274 lines
13 KiB
HTML
274 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<base href="/"/>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>在线测评系统</title>
|
||
<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"/>
|
||
</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">
|
||
|
||
<li class="layui-nav-item topTitlec" id="accountManageBtn">
|
||
<div>
|
||
<div class="topTitle "><i class="layui-icon layui-icon-user topicon"></i>账号管理
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
|
||
<a href="javascript:void(0);">管理员</a>
|
||
<dl class="layui-nav-child">
|
||
<dd><a href="javascript:void(0);" id="signoutBtn">退出</a></dd>
|
||
</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">
|
||
<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>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<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>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<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>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<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>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<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>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<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>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<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>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<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>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<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>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<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>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="layui-body">
|
||
<!-- 内容主体区域 -->
|
||
<div class="layui-box-top">
|
||
<blockquote class="layui-elem-quote-index layui-text">
|
||
欢迎使用在线测评系统
|
||
</blockquote>
|
||
<!--数据统计代码写到这里 , 只允许2行 -->
|
||
<div class='homepage' id="homepage">
|
||
<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>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card layui-panel page-iframe-container">
|
||
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="layui-footer"></div>-->
|
||
</div>
|
||
</div>
|
||
<script src="assets/crpm/js/layui/layui.js"></script>
|
||
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
|
||
|
||
<script>
|
||
layui.use(['element', 'layer', 'util'], function () {
|
||
var element = layui.element;
|
||
var layer = layui.layer;
|
||
var util = layui.util;
|
||
var $ = layui.$;
|
||
var $win = $(window);
|
||
window['layer'] = layer;
|
||
$('#signoutBtn').click(function () {
|
||
window.open('sign/signout', '_self')
|
||
})
|
||
|
||
$('#accountManageBtn').click(function () {
|
||
var pageIframe = $('#pageIframe');
|
||
pageIframe.attr('src', 'route/pages/user/list.html');
|
||
pageIframe.show();
|
||
homepage.style.display = 'none';
|
||
})
|
||
var init = function () {
|
||
var $pageIframe = $('#pageIframe');
|
||
$pageIframe.css({
|
||
height: `${$win.height() - 115}px`
|
||
})
|
||
}
|
||
|
||
init();
|
||
var homepage = document.getElementById('homepage');
|
||
$(document).on('click', '.menu-item', function () {
|
||
var url = this.dataset.url;
|
||
var pageIframe = $('#pageIframe');
|
||
pageIframe.attr('src', url);
|
||
pageIframe.show();
|
||
homepage.style.display = 'none';
|
||
});
|
||
|
||
// 初始化数据统计图表
|
||
var initDataCharts = function () {
|
||
// 考试参与情况饼图
|
||
var examChart = echarts.init(document.getElementById('examParticipationChart'));
|
||
var examOption = {
|
||
tooltip: {trigger: 'item'},
|
||
legend: {orient: 'vertical', left: 'left'},
|
||
series: [{
|
||
name: '参与情况',
|
||
type: 'pie',
|
||
radius: '60%',
|
||
data: [
|
||
{value: 86, name: '已参与'},
|
||
{value: 24, name: '未参与'}
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
examChart.setOption(examOption);
|
||
|
||
// 成绩分布柱状图
|
||
var scoreChart = echarts.init(document.getElementById('scoreDistributionChart'));
|
||
var scoreOption = {
|
||
tooltip: {trigger: 'axis'},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['90-100分', '80-89分', '70-79分', '60-69分', '60分以下']
|
||
},
|
||
yAxis: {type: 'value'},
|
||
series: [{
|
||
name: '人数',
|
||
data: [12, 28, 35, 18, 7],
|
||
type: 'bar',
|
||
itemStyle: {color: '#5470c6'}
|
||
}]
|
||
};
|
||
scoreChart.setOption(scoreOption);
|
||
|
||
// 题目难度分布环形图
|
||
var difficultyChart = echarts.init(document.getElementById('difficultyChart'));
|
||
var difficultyOption = {
|
||
tooltip: {trigger: 'item'},
|
||
legend: {orient: 'vertical', left: 'left'},
|
||
series: [{
|
||
name: '题目难度',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
data: [
|
||
{value: 45, name: '简单'},
|
||
{value: 128, name: '中等'},
|
||
{value: 67, name: '困难'}
|
||
]
|
||
}]
|
||
};
|
||
difficultyChart.setOption(difficultyOption);
|
||
|
||
// 月度考试趋势曲线图
|
||
var trendChart = echarts.init(document.getElementById('monthlyTrendChart'));
|
||
var trendOption = {
|
||
tooltip: {trigger: 'axis'},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
||
},
|
||
yAxis: {type: 'value', name: '考试次数'},
|
||
series: [{
|
||
name: '考试场次',
|
||
data: [8, 12, 15, 18, 22, 25],
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {color: '#91cc75'},
|
||
areaStyle: {opacity: 0.3}
|
||
}]
|
||
};
|
||
trendChart.setOption(trendOption);
|
||
};
|
||
|
||
// 初始化图表
|
||
initDataCharts();
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|