bt-yjj-system-examination-s.../src/main/resources/templates/index2.html

450 lines
22 KiB
HTML
Raw Normal View History

2021-05-12 15:00:00 +08:00
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="${#request.getContextPath() + '/'}">
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
2021-05-13 16:44:12 +08:00
<link rel="stylesheet" href="assets/js/vendor/full-calendar/main.css" media="all">
2021-05-12 15:00:00 +08:00
</head>
<body>
<div id="LAY-app" class="layui-fluid">
<div class="layui-row layui-col-space15">
2021-05-13 16:44:12 +08:00
<div class="layui-col-md8">
2021-05-12 15:00:00 +08:00
<div class="layui-row layui-col-space15">
2021-05-13 16:44:12 +08:00
<div class="layui-col-md6">
2021-05-12 15:00:00 +08:00
<div class="layui-card">
2021-05-13 16:44:12 +08:00
<div class="layui-card-header">快捷方式</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-shortcut" id="quickButtons" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
<div carousel-item="">
<ul class="layui-row layui-col-space10 layui-this">
<li class="layui-col-xs3">
<a lay-href="/route/worktype/tree.html" lay-open-type="1">
<i class="layui-icon layui-icon-console"></i>
<cite>工种管理</cite>
</a>
</li>
<li class="layui-col-xs3">
<a lay-href="/route/traininginstitution/list.html" lay-open-type="1">
<i class="layui-icon layui-icon-chart"></i>
<cite>培训机构管理</cite>
</a>
</li>
<li class="layui-col-xs3">
<a lay-href="/route/examination/station/list.html" lay-open-type="1">
<i class="layui-icon layui-icon-template-1"></i>
<cite>考试机构管理</cite>
</a>
</li>
<li class="layui-col-xs3">
<a lay-href="/route/examinationuser/list.html" lay-open-type="1">
<i class="layui-icon layui-icon-chat"></i>
<cite>考务人员管理</cite>
</a>
</li>
<li class="layui-col-xs3">
<a lay-href="/route/examcheck/list.html" lay-open-type="1">
<i class="layui-icon layui-icon-find-fill"></i>
<cite>开班计划审核</cite>
</a>
</li>
<li class="layui-col-xs3">
<a lay-href="/route/examapply/list-check.html" lay-open-type="1">
<i class="layui-icon layui-icon-survey"></i>
<cite>考试申请审核</cite>
</a>
</li>
<li class="layui-col-xs3">
<a lay-href="/route/examapply/list.html" lay-open-type="1">
<i class="layui-icon layui-icon-user"></i>
<cite>考试信息分配</cite>
</a>
</li>
</ul>
<!--<ul class="layui-row layui-col-space10"></ul>-->
</div>
<div class="layui-carousel-ind">
<ul>
<li class="layui-this"></li>
<!--<li class=""></li>-->
</ul>
</div>
</div>
2021-05-12 15:00:00 +08:00
</div>
</div>
</div>
2021-05-13 16:44:12 +08:00
<div class="layui-col-md6">
2021-05-12 15:00:00 +08:00
<div class="layui-card">
2021-05-13 16:44:12 +08:00
<div class="layui-card-header">分类统计</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" id="typeCount" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
<div carousel-item="">
<ul class="layui-row layui-col-space10 layui-this">
<li class="layui-col-xs6">
<a lay-href="" class="layadmin-backlog-body">
<h3>培训机构</h3>
<p><cite id="trainingInstitutionNum">0</cite></p>
</a>
</li>
<li class="layui-col-xs6">
<a lay-href="" class="layadmin-backlog-body">
<h3>考试机构</h3>
<p><cite id="stationInstitutionNum">0</cite></p>
</a>
</li>
<li class="layui-col-xs6">
<a lay-href="" class="layadmin-backlog-body">
<h3>考务人员</h3>
<p><cite id="examinationNum">0</cite></p>
</a>
</li>
<!--<li class="layui-col-xs6">-->
<!--&lt;!&ndash;onclick="layer.tips('不跳转', this, {tips: 3});"&ndash;&gt;-->
<!--<a href="javascript:;" class="layadmin-backlog-body">-->
<!--<h3>工种</h3>-->
<!--<p><cite>20</cite></p>-->
<!--</a>-->
<!--</li>-->
</ul>
<!--<ul class="layui-row layui-col-space10">-->
<!--</ul>-->
</div>
<div class="layui-carousel-ind">
<ul>
<li class="layui-this"></li>
<!--<li class=""></li>-->
</ul>
</div>
</div>
2021-05-12 15:00:00 +08:00
</div>
</div>
</div>
2021-05-13 16:44:12 +08:00
<div class="layui-col-md12" style="height: 660px">
<div class="layui-card" style="height: 100%">
<div class="layui-tab layui-tab-brief layadmin-latestData" lay-filter="tabTitle" style="height: 650px">
<ul class="layui-tab-title" >
<li class="layui-this" lay-id="a">开班计划审核</li>
<li lay-id="b">考试申请审核</li>
<li lay-id="c">考试信息分配</li>
</ul>
<div class="layui-tab-content" >
<iframe src="route/examcheck/list.html" id="iframeId" style="width: 100%; height: 568px; border:none"></iframe>
</div>
2021-05-12 15:00:00 +08:00
</div>
</div>
</div>
</div>
</div>
2021-05-13 16:44:12 +08:00
<div id="layu-col-md4-panel" class="layui-col-md4">
2021-05-12 15:00:00 +08:00
<div class="layui-card">
2021-05-13 16:44:12 +08:00
<div class="layui-card-header">考试分布日期</div>
2021-05-12 15:00:00 +08:00
<div class="layui-card-body">
2021-05-13 16:44:12 +08:00
<div id="fullCalendar"></div>
2021-05-12 15:00:00 +08:00
</div>
</div>
<div class="layui-card">
2021-05-13 16:44:12 +08:00
<div class="layui-card-header">数据概览</div>
2021-05-12 15:00:00 +08:00
<div class="layui-card-body">
2021-05-13 16:44:12 +08:00
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" id="dataECharView" >
<div carousel-item >
<div id="eChart0" style="width:600px"></div>
<div id="eChart1" style="width:600px"></div>
</div>
<div class="layui-carousel-ind">
<ul>
<li class="layui-this"></li>
<li class=""></li>
</ul>
</div>
</div>
2021-05-12 15:00:00 +08:00
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/vue.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/echarts/echarts.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
2021-05-13 16:44:12 +08:00
<script type="text/javascript" src="assets/js/vendor/full-calendar/main.js"></script>
<script type="text/javascript" src="assets/js/vendor/full-calendar/locales/zh-cn.js"></script>
2021-05-12 15:00:00 +08:00
<script>
layui.config({
base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
2021-05-13 16:44:12 +08:00
}).use(['index', 'animate-numbers', 'form','carousel','element'], function() {
2021-05-12 15:00:00 +08:00
var $ = layui.$;
var $win = $(window);
var form = layui.form;
2021-05-13 16:44:12 +08:00
var carousel = layui.carousel;
var element = layui.element;
2021-05-12 15:00:00 +08:00
new Vue({
el: '#LAY-app',
data: {
2021-05-13 16:44:12 +08:00
trainingInstitutionNum:0,
stationInstitutionNum:0,
examinationNum:0,
eChart0:null,
eChart1:null,
2021-05-12 15:00:00 +08:00
},
methods: {
2021-05-13 16:44:12 +08:00
initTrainingInstitutionNum:function(){
var self = this;
top.restAjax.get('api/indexcount/count-training-institution-num', {}, null, function(code, data) {
self.trainingInstitutionNum = data.data['num'];
self.$nextTick(function() {
$('#trainingInstitutionNum').animateNumbers(self.trainingInstitutionNum);
});
}, function(code, data) {
top.dialog.msg(data.msg);
});
},
initStationInstitutionNum:function(){
var self = this;
top.restAjax.get('api/indexcount/count-station-institution-num', {}, null, function(code, data) {
self.stationInstitutionNum = data.data['num'];
self.$nextTick(function() {
$('#stationInstitutionNum').animateNumbers(self.stationInstitutionNum);
});
}, function(code, data) {
top.dialog.msg(data.msg);
});
},
initExaminationNum:function(){
var self = this;
top.restAjax.get('api/indexcount/count-examination-num', {}, null, function(code, data) {
self.examinationNum = data.data['num'];
self.$nextTick(function() {
$('#examinationNum').animateNumbers(self.examinationNum);
});
}, function(code, data) {
top.dialog.msg(data.msg);
});
},
teachingPlan: function(calendar) {
var self = this;
top.restAjax.get(top.restAjax.path('api/indexcount/exam-apply-list', []), {}, null, function(code, data) {
for(var i = 0, item; item = data.data[i++];) {
console.log(item.examId)
calendar.addEvent({
id: item.examId +"|"+item.examApplyId,
start: item.startTime,
end: item.endTime,
title: item.examName
});
}
}, function(code, data) {
top.dialog.msg(data.msg);
});
},
initFullCalendar: function() {
var self = this;
var calendarEl = document.getElementById('fullCalendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
timeZone: 'local',
locale: 'zh-cn',
dateClick: function(info) {
info.jsEvent.preventDefault();
},
eventClick: function(info) {
//info.jsEvent.preventDefault();
var idInfo = info.event.id.split("|");
2021-05-15 23:41:01 +08:00
self.kaoshiOpen('考试详情', top.restAjax.path('route/examination/distribution/show.html?planId={planId}', [idInfo[0]]));
2021-05-13 16:44:12 +08:00
},
});
var date = new Date();
self.teachingPlan(calendar);
calendar.render();
},
initEChart0: function(){
top.restAjax.get('api/indexcount/count-exam-check-num', {}, null, function(code, data) {
console.log(data.data)
var dataList = [];
var datajson1 = {};
var datajson2 = {};
var datajson3 = {};
datajson1['name'] = "通过"
datajson1['value'] = data.data.pass
dataList.push(datajson1)
datajson2['name'] = "不通过"
datajson2['value'] = data.data.fail;
dataList.push(datajson2)
datajson3['name'] = "未审核"
datajson3['value'] = data.data.noCheck;
dataList.push(datajson3)
self.eChart0 = echarts.init(document.getElementById('eChart0'));
self.eChart0.setOption(
{
title: {
text: '开班计划审核占比',
/* subtext: '纯属虚构',*/
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: dataList,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
)
})
},
initEChart1: function(){
top.restAjax.get('api/indexcount/count-exam-apply-num', {}, null, function(code, data) {
console.log(data.data)
var dataList = [];
var datajson1 = {};
var datajson2 = {};
var datajson3 = {};
datajson1['name'] = "通过"
datajson1['value'] = data.data.pass
dataList.push(datajson1)
datajson2['name'] = "不通过"
datajson2['value'] = data.data.fail;
dataList.push(datajson2)
datajson3['name'] = "未审核"
datajson3['value'] = data.data.noCheck;
dataList.push(datajson3)
self.eChart1 = echarts.init(document.getElementById('eChart1'));
self.eChart1.setOption(
{
title: {
text: '考试申请审核占比',
// subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: dataList,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
)
})
},
kaoshiOpen:function(title,path){
layer.open({
type: 2,
title: false,
closeBtn: 1,
area: ['70%', '70%'],
shadeClose: true,
anim: 2,
content: path,
end: function() {
reloadTable();
}
});
}
2021-05-12 15:00:00 +08:00
},
mounted: function() {
var self = this;
2021-05-13 16:44:12 +08:00
$('#eChart0').width($('#layu-col-md4-panel').width());
$('#eChart1').width($('#layu-col-md4-panel').width());
self.initTrainingInstitutionNum();
self.initStationInstitutionNum();
self.initExaminationNum();
self.initFullCalendar();
self.initEChart0();
self.initEChart1();
2021-05-12 15:00:00 +08:00
// 事件 - 页面变化
$win.on('resize', function() {
if(self.resizeTimeout) {
return;
}
self.resizeTimeout = setTimeout(function() {
self.resizeTimeout = null;
}, 500);
});
}
})
2021-05-13 16:44:12 +08:00
carousel.render({
elem: '#typeCount'
,width: '100%' //设置容器宽度
,arrow: 'none' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
carousel.render({
elem: '#quickButtons'
,width: '100%' //设置容器宽度
,arrow: 'none' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
carousel.render({
elem: '#dataECharView'
,width: '100%' //设置容器宽度
,arrow: 'none' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
element.on('tab(tabTitle)', function(){
var aSrc = "route/examcheck/list.html"
var bSrc = "route/examapply/list-check.html"
var cSrc = "route/examapply/list.html"
var layId = this.getAttribute('lay-id')
if('a' === layId){
$("#iframeId").attr("src",aSrc)
}else if('b' === layId){
$("#iframeId").attr("src",bSrc)
}else if('c' === layId){
$("#iframeId").attr("src",cSrc)
}
});
2021-05-12 15:00:00 +08:00
});
</script>
</body>
</html>