422 lines
19 KiB
HTML
422 lines
19 KiB
HTML
<!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">
|
|
<style>
|
|
.layui-badge {height: auto;}
|
|
.layui-card-header {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
|
|
.count-second-row {padding-bottom: 0px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="LAY-app" class="layui-fluid">
|
|
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-sm12 layui-col-md12">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-sm6 layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
报名数量
|
|
<span class="layui-badge layui-bg-green layuiadmin-badge">位</span>
|
|
</div>
|
|
<div class="layui-card-body layuiadmin-card-list">
|
|
<p id="applyAllNum" class="layuiadmin-big-font">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm6 layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
培训计划数量
|
|
<span class="layui-badge layui-bg-blue layuiadmin-badge">个</span>
|
|
</div>
|
|
<div class="layui-card-body layuiadmin-card-list">
|
|
<p id="classPlanNum" class="layuiadmin-big-font">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm6 layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
课程数量
|
|
<span class="layui-badge layui-bg-cyan layuiadmin-badge">堂</span>
|
|
</div>
|
|
<div class="layui-card-body layuiadmin-card-list" style="height: 100%">
|
|
<p id="lessonsNum" class="layuiadmin-big-font">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm6 layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
讲师
|
|
<span class="layui-badge layui-bg-orange layuiadmin-badge">位</span>
|
|
</div>
|
|
<div class="layui-card-body layuiadmin-card-list">
|
|
<p id="teacherNum" class="layuiadmin-big-font">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-sm6 layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="overflow: visible">近七天报名情况
|
|
<div class="layui-inline search-item layui-form" style="position: absolute;right: 15px;top: 7px;">
|
|
<select id="applyClassId" name="applyClassId" >
|
|
<option value="">全部</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<div id="applyEChart" style="width: 100%; height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm6 layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">讲师占比</div>
|
|
<div class="layui-card-body">
|
|
<div id="teacherEChart" style="width: 100%; height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-sm6 layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">培训计划占比</div>
|
|
<div class="layui-card-body">
|
|
<div id="planEChart" style="width: 100%; height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm6 layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">培训课程占比</div>
|
|
<div class="layui-card-body">
|
|
<div id="classEChart" style="width: 100%; height: 300px;"></div>
|
|
</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>
|
|
<script>
|
|
layui.config({
|
|
base: 'assets/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'animate-numbers', 'form'], function() {
|
|
var $ = layui.$;
|
|
var $win = $(window);
|
|
var form = layui.form;
|
|
new Vue({
|
|
el: '#LAY-app',
|
|
data: {
|
|
teacherEChart:null,
|
|
applyEChart:null,
|
|
planEChart:null,
|
|
classEChart:null,
|
|
resizeTimeout: null,
|
|
applyAllNum: 0,
|
|
classPlanNum: 0,
|
|
lessonsNum: 0,
|
|
teacherNum: 0,
|
|
|
|
},
|
|
methods: {
|
|
initApplyAllNum: function(){
|
|
var self = this;
|
|
top.restAjax.get('api/indexcount/count-apply-all-num', {}, null, function(code, data) {
|
|
self.applyAllNum = data.data['applyNum'];
|
|
self.$nextTick(function() {
|
|
$('#applyAllNum').animateNumbers(self.applyAllNum);
|
|
});
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
},
|
|
initClassPlanAllNum: function(){
|
|
var self = this;
|
|
top.restAjax.get('api/indexcount/count-class-plan-all-num', {}, null, function(code, data) {
|
|
self.classPlanNum = data.data['classPlanNum'];
|
|
self.$nextTick(function() {
|
|
$('#classPlanNum').animateNumbers(self.classPlanNum);
|
|
});
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
},
|
|
initLessonsAllNum: function(){
|
|
var self = this;
|
|
top.restAjax.get('api/indexcount/count-lessons-all-num', {}, null, function(code, data) {
|
|
self.lessonsNum = data.data['lessonsNum'];
|
|
self.$nextTick(function() {
|
|
$('#lessonsNum').animateNumbers(self.lessonsNum);
|
|
});
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
|
|
},
|
|
initTeacherAllNum: function(){
|
|
var self = this;
|
|
top.restAjax.get('api/indexcount/count-teacher-all-num', {}, null, function(code, data) {
|
|
self.teacherNum = data.data['teacherNum'];
|
|
self.$nextTick(function() {
|
|
$('#teacherNum').animateNumbers(self.teacherNum);
|
|
});
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
},
|
|
initApplyEChart: function(){
|
|
top.restAjax.get('api/indexcount/count-one-weeks-apply-num', {}, null, function(code, data) {
|
|
var status0 = [];
|
|
var status1 = [];
|
|
var status2 = [];
|
|
var status3 = [];
|
|
var status4 = [];
|
|
for(var i= 6;i>=0;i--){
|
|
var week = "week"+i
|
|
status0.push(data.data[week]['0'])
|
|
status1.push(data.data[week]['1'])
|
|
status2.push(data.data[week]['2'])
|
|
status3.push(data.data[week]['3'])
|
|
status4.push(data.data[week]['-1'])
|
|
}
|
|
self.applyEChart = echarts.init(document.getElementById('applyEChart'));
|
|
self.applyEChart.setOption(
|
|
{
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['待审核', '用户撤回', '审核通过', '报名完成', '审核不通过']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
// feature: {
|
|
// saveAsImage: {}
|
|
// }
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: [
|
|
data.data.week6['weekTime'],
|
|
data.data.week5['weekTime'],
|
|
data.data.week4['weekTime'],
|
|
data.data.week3['weekTime'],
|
|
data.data.week2['weekTime'],
|
|
data.data.week1['weekTime'],
|
|
data.data.week0['weekTime']
|
|
]
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '待审核',
|
|
type: 'line',
|
|
stack: '总量',
|
|
data: status0
|
|
},
|
|
{
|
|
name: '用户撤回',
|
|
type: 'line',
|
|
stack: '总量',
|
|
data: status1
|
|
},
|
|
{
|
|
name: '审核通过',
|
|
type: 'line',
|
|
stack: '总量',
|
|
data:status2
|
|
},
|
|
{
|
|
name: '报名完成',
|
|
type: 'line',
|
|
stack: '总量',
|
|
data: status3
|
|
},
|
|
{
|
|
name: '审核不通过',
|
|
type: 'line',
|
|
stack: '总量',
|
|
data: status4
|
|
}
|
|
]
|
|
}
|
|
)
|
|
form.render();
|
|
});
|
|
|
|
},
|
|
initTeacherEChart: function(){
|
|
top.restAjax.get('api/indexcount/count-teacher-num', {}, null, function(code, data) {
|
|
var dataList = [];
|
|
for(var i= 0;i<=2;i++){
|
|
var datajson = {};
|
|
if(i === 0){
|
|
datajson['name'] = "其他"
|
|
}
|
|
if(i === 1){
|
|
datajson['name'] = "专职"
|
|
}
|
|
if(i === 2){
|
|
datajson['name'] = "兼职"
|
|
}
|
|
datajson['value'] = data.data[i+""]
|
|
dataList.push(datajson)
|
|
}
|
|
console.log(dataList)
|
|
self.teacherEChart = echarts.init(document.getElementById('teacherEChart'));
|
|
self.teacherEChart.setOption(
|
|
{
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
},
|
|
series: [
|
|
{
|
|
name: '访问来源',
|
|
type: 'pie',
|
|
radius: '70%',
|
|
data: dataList,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
)
|
|
|
|
})
|
|
|
|
},
|
|
initPlanEChart: function(){
|
|
self.planEChart = echarts.init(document.getElementById('planEChart'));
|
|
self.planEChart.setOption(
|
|
{
|
|
title: {
|
|
text: '世界人口总量',
|
|
subtext: '数据来自网络'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['2011年', '2012年']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01]
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
|
|
},
|
|
series: [
|
|
{
|
|
name: '2011年',
|
|
type: 'bar',
|
|
data: [18203, 23489, 29034, 104970, 131744, 630230]
|
|
},
|
|
{
|
|
name: '2012年',
|
|
type: 'bar',
|
|
data: [19325, 23438, 31000, 121594, 134141, 681807]
|
|
}
|
|
]
|
|
}
|
|
)
|
|
},
|
|
initClassEChart: function(){
|
|
self.classEChart = echarts.init(document.getElementById('classEChart'));
|
|
self.classEChart.setOption(
|
|
{
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['product', '2015', '2016', '2017'],
|
|
['Matcha Latte', 43.3, 85.8, 93.7],
|
|
['Milk Tea', 83.1, 73.4, 55.1],
|
|
['Cheese Cocoa', 86.4, 65.2, 82.5],
|
|
['Walnut Brownie', 72.4, 53.9, 39.1]
|
|
]
|
|
},
|
|
xAxis: {type: 'category'},
|
|
yAxis: {},
|
|
series: [
|
|
{type: 'bar'},
|
|
{type: 'bar'},
|
|
{type: 'bar'}
|
|
]
|
|
}
|
|
)
|
|
}
|
|
},
|
|
mounted: function() {
|
|
var self = this;
|
|
self.initApplyAllNum();
|
|
self.initClassPlanAllNum();
|
|
self.initLessonsAllNum();
|
|
self.initTeacherAllNum();
|
|
self.initTeacherEChart();
|
|
self.initApplyEChart();
|
|
self.initPlanEChart();
|
|
self.initClassEChart();
|
|
// 事件 - 页面变化
|
|
$win.on('resize', function() {
|
|
if(self.resizeTimeout) {
|
|
return;
|
|
}
|
|
self.resizeTimeout = setTimeout(function() {
|
|
self.initTeacherEChart();
|
|
self.resizeTimeout = null;
|
|
}, 500);
|
|
});
|
|
}
|
|
})
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |