143 lines
4.6 KiB
HTML
143 lines
4.6 KiB
HTML
{% extends "./base.html" %}
|
||
|
||
{% 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 %}
|
||
{% load static %}
|
||
<div class="callout callout-warning" style="margin-top: 20px;">
|
||
<h3>教育培训统计</h3>
|
||
</div>
|
||
<div style="height:600px;width:100%;background-color:#dac2a3">
|
||
<div style="width:100%;height:100px;">
|
||
开始日期：<input type="text" id="test">
|
||
结束日期：<input type="text" id="test2">
|
||
|
||
<button class="btn btn-info" onclick="funTypeChange()"> 查询</button>
|
||
|
||
|
||
|
||
<div id="trainchart" style="width:60%;height:400px;margin:auto"></div>
|
||
</div>
|
||
</div>
|
||
<!-- jQuery 3 -->
|
||
<script src="{% static 'groups/bower_components/jquery/dist/jquery.min.js' %}"></script>
|
||
<!-- Bootstrap 3.3.7 -->
|
||
<script src="{% static 'groups/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
|
||
<script src="{% static 'groups/time/laydate/laydate.js' %}"></script>
|
||
<link rel="stylesheet" href="{% static 'groups/time/laydate/theme/default/laydate.css' %}">
|
||
<!-- iCheck -->
|
||
<script src="{% static 'groups/plugins/iCheck/icheck.min.js' %}"></script>
|
||
<script src="{% static 'groups/bower_components/echarts.min.js' %}"></script>
|
||
<script type="text/javascript">
|
||
//隐患数量趋势图
|
||
|
||
|
||
$(function () {
|
||
laydate.render({
|
||
elem: '#test'
|
||
, format: 'yyyy-MM-dd' //可任意组合
|
||
});
|
||
laydate.render({
|
||
elem: '#test2'
|
||
, format: 'yyyy-MM-dd' //可任意组合
|
||
});
|
||
train();
|
||
|
||
|
||
});
|
||
function funTypeChange() {
|
||
|
||
train();
|
||
}
|
||
|
||
|
||
|
||
|
||
function train() {
|
||
|
||
var start = $("#test").val();
|
||
var end = $("#test2").val();
|
||
$.ajax({
|
||
type: "get",
|
||
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: "/groups/api/trainChart?code=train&start=" + start + "&end=" + end, //请求发送
|
||
dataType: "json", //返回数据形式为json
|
||
success: function (data) {
|
||
console.log(data);
|
||
//请求成功时执行该函数内容，data即为服务器返回的json对象
|
||
var trainChart = echarts.init(document.getElementById("trainchart"));
|
||
|
||
var trainnum = [];
|
||
var companyName = [];
|
||
if (data.data.trainlist != null) {
|
||
$.each(data.data.trainlist, function (i, item) {
|
||
|
||
|
||
trainnum.push(item.number);
|
||
|
||
companyName.push(item.usecomp__partname);
|
||
|
||
})
|
||
|
||
trainChart.setOption(
|
||
|
||
option = {
|
||
color: ['#00c0ef'],
|
||
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: trainnum,
|
||
type: 'bar'
|
||
}]
|
||
|
||
}
|
||
|
||
);
|
||
|
||
}
|
||
},
|
||
error: function (errorMsg) {
|
||
trainChart.hideLoading();
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
|
||
</script>
|
||
{% endblock %}
|