334 lines
12 KiB
HTML
334 lines
12 KiB
HTML
{% extends "groups/base.html" %}
|
||
{% load static %}
|
||
{% block headother%}
|
||
<link rel="stylesheet" href="{% static 'groups/bower_components/layer/theme/default/layer.css' %}">
|
||
<script src="{% static 'groups/bower_components/bootstrap-table/bootstrap-table.min.js' %}"></script>
|
||
<script src="{% static 'groups/bower_components/bootstrap-table/locale/bootstrap-table-zh-CN.min.js' %}"></script>
|
||
<script src="{% static 'groups/time/laydate/laydate.js' %}"></script>
|
||
<link rel="stylesheet" href="{% static 'groups/time/laydate/theme/default/laydate.css' %}">
|
||
<script src="{% static 'groups/plugins/iCheck/icheck.min.js' %}"></script>
|
||
<script src="{% static 'groups/bower_components/echarts.min.js' %}"></script>
|
||
{% endblock %}
|
||
{% block title %}在线考试统计{% endblock %}
|
||
{% block pagehead %}
|
||
|
||
<ol class="breadcrumb">
|
||
<li><a href="{% url 'groups_index' %}"><i class="fa fa-dashboard"></i> 主页</a></li>
|
||
<li class="active">在线考试统计</li>
|
||
</ol>
|
||
{% endblock %}
|
||
{% block content %}
|
||
|
||
<div class="callout callout-warning" style="margin-top: 20px;">
|
||
<h3>在线考试统计</h3>
|
||
</div>
|
||
<div style="width:100%;">
|
||
开始日期：<input type="text" id="test">
|
||
结束日期：<input type="text" id="test2">
|
||
<button class="btn btn-info" onclick="funTypeChange()"> 查询</button>
|
||
</div>
|
||
<section class="content">
|
||
<div class="box">
|
||
<div class="box-body">
|
||
<table
|
||
id="table">
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div style="background-color:#dac2a3;margin-top:10px">
|
||
<div id="examChart" style="width:100%;height:500px;margin:auto"></div>
|
||
</div>
|
||
<div style="background-color:#dac2a3;margin-top:10px">
|
||
<div id="examChart2" style="width:100%;height:500px;margin:auto"></div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
//隐患数量趋势图
|
||
|
||
$(function () {
|
||
initTable()
|
||
laydate.render({
|
||
elem: '#test'
|
||
, format: 'yyyy-MM-dd' //可任意组合
|
||
});
|
||
laydate.render({
|
||
elem: '#test2'
|
||
, format: 'yyyy-MM-dd' //可任意组合
|
||
});
|
||
exam();
|
||
});
|
||
function funTypeChange() {
|
||
var start = $("#test").val();
|
||
var end = $("#test2").val();
|
||
exam();
|
||
$('#table').bootstrapTable('refresh', {
|
||
query:
|
||
{
|
||
start:start,
|
||
end:end
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
|
||
|
||
function exam() {
|
||
|
||
var start = $("#test").val();
|
||
var end = $("#test2").val();
|
||
var examChart = echarts.init(document.getElementById("examChart"));
|
||
examChart.showLoading({
|
||
maskColor: '#dac2a3',
|
||
});
|
||
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "/groups/api/examChart?code=exam&start=" + start + "&end=" + end, //请求发送
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
console.log(data.data.number);
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
var labelOption = {
|
||
show: true,
|
||
formatter: '{c}',
|
||
fontSize: 14,
|
||
align: 'middle',
|
||
verticalAlign: 'middle',
|
||
position: 'top',
|
||
color:'#A52A2A'
|
||
// distance: 15,
|
||
// rich: {
|
||
// name: {
|
||
// textBorderColor: '#fff'
|
||
// }
|
||
// }
|
||
};
|
||
|
||
var exnum = [];
|
||
var companyName = [];
|
||
if (data.data != null) {
|
||
$.each(data.data, function (i, item) {
|
||
|
||
|
||
exnum.push(item.number);
|
||
|
||
companyName.push(item.companyName);
|
||
|
||
})
|
||
examChart.hideLoading();
|
||
examChart.setOption(
|
||
option = {
|
||
color: ['#32CD32'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
|
||
title: {
|
||
text: '本集团各公司在线考试统计图'
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
data: ['公司在线考试总数']
|
||
},
|
||
grid: {
|
||
y2: 140
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: companyName,
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
interval: 0,//横轴信息全部显示
|
||
rotate: -30,//-30度角倾斜显示
|
||
}
|
||
|
||
|
||
},
|
||
yAxis: {},
|
||
series: [{
|
||
name: '公司在线考试总数',
|
||
data: exnum,
|
||
type: 'bar',
|
||
label:labelOption
|
||
}]
|
||
|
||
}
|
||
|
||
);
|
||
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
examChart.hideLoading();
|
||
}
|
||
});
|
||
|
||
}
|
||
function exam2(data) {
|
||
|
||
// var start = $("#test").val();
|
||
// var end = $("#test2").val();
|
||
var examChart = echarts.init(document.getElementById("examChart2"));
|
||
// examChart.showLoading({
|
||
// maskColor: '#dac2a3',
|
||
// });
|
||
|
||
// $.ajax({
|
||
// type: "get",
|
||
// async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
// url: "/groups/api/examrate/?start=" + start + "&end=" + end, //请求发送
|
||
// dataType: "json", //返回数据形式为json
|
||
// success: function (data) {
|
||
var labelOption = {
|
||
show: true,
|
||
formatter: '{c}%',
|
||
fontSize: 14,
|
||
align: 'middle',
|
||
verticalAlign: 'middle',
|
||
position: 'top',
|
||
color:'#A52A2A'
|
||
// distance: 15,
|
||
// rich: {
|
||
// name: {
|
||
// textBorderColor: '#fff'
|
||
// }
|
||
// }
|
||
};
|
||
if (data != null) {
|
||
var series = [], legend = []
|
||
for(var i=0;i<data.s.length;i++){
|
||
var item = data.s[i]
|
||
item.type = 'bar'
|
||
item.barGap = 0
|
||
item.label = labelOption
|
||
series.push(item)
|
||
legend.push(item.name)
|
||
}
|
||
examChart.hideLoading();
|
||
examChart.setOption(
|
||
option = {
|
||
color: ['#C2D69A', '#9CF2A2', '#56E860'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
formatter: function (data) {
|
||
console.log(data)
|
||
}
|
||
},
|
||
|
||
title: {
|
||
text: data.t
|
||
},
|
||
legend: {
|
||
data: legend
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.x.data,
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
interval: 0,//横轴信息全部显示
|
||
rotate: -30,//-30度角倾斜显示
|
||
}
|
||
|
||
|
||
},
|
||
yAxis: {},
|
||
series: series
|
||
|
||
}
|
||
|
||
);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
function initTable(data) {
|
||
$("#table").bootstrapTable('destroy').bootstrapTable({
|
||
//height: 550,
|
||
url: '{% url "exam_rate" %}', //请求后台的URL（*）
|
||
method: 'GET', //请求方式（*）
|
||
striped: true, //是否显示行间隔色
|
||
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
|
||
pagination: false, //是否显示分页（*）
|
||
sortable: true, //是否启用排序
|
||
sortOrder: "asc", //排序方式
|
||
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
|
||
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
|
||
pageSize: 10, //每页的记录行数（*）
|
||
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
|
||
search: true, //是否显示表格搜索
|
||
strictSearch: false,
|
||
showColumns: true, //是否显示所有的列（选择显示的列）
|
||
showRefresh: true, //是否显示刷新按钮
|
||
minimumCountColumns: 2, //最少允许的列数
|
||
clickToSelect: true, //是否启用点击选中行
|
||
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
|
||
uniqueId: "ID", //每一行的唯一标识，一般为主键列
|
||
showToggle: true, //是否显示详细视图和列表视图的切换按钮
|
||
cardView: false, //是否显示详细视图
|
||
detailView: false, //是否显示父子表
|
||
responseHandler: function (res) {
|
||
if(res.code){
|
||
exam2(res.data[0]);
|
||
return res.data[1]
|
||
}
|
||
},
|
||
columns: [
|
||
{
|
||
field: 'company',
|
||
title: '公司名',
|
||
sortable: true,
|
||
align: 'center'
|
||
}, {
|
||
field: 'test_count',
|
||
title: '发布考试数',
|
||
sortable: true,
|
||
align: 'center',
|
||
searchable: false,
|
||
}, {
|
||
field: 'user_count',
|
||
title: '员工数',
|
||
sortable: true,
|
||
align: 'center',
|
||
searchable: false,
|
||
},
|
||
{
|
||
field: 'testuser_count',
|
||
title: '参加考试员工数',
|
||
sortable: true,
|
||
align: 'center',
|
||
searchable: false,
|
||
},{
|
||
field: 'rate1',
|
||
title: '参加率',
|
||
sortable: true,
|
||
align: 'center',
|
||
searchable: false,
|
||
},{
|
||
field: 'rate3',
|
||
title: '优秀率',
|
||
sortable: true,
|
||
align: 'center',
|
||
searchable: false,
|
||
},
|
||
{
|
||
field: 'rate2',
|
||
title: '满分率',
|
||
sortable: true,
|
||
align: 'center',
|
||
searchable: false,
|
||
}
|
||
]
|
||
})
|
||
}
|
||
</script>
|
||
{% endblock %} |