safesite/groups/templates/groups/exam.html

{% extends "groups/base.html" %}
{% load static %}

{% 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()">&nbsp;查询</button>
</div>
<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>
<!-- 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' //可任意组合
        });
        exam();
        exam2()
    });
    function funTypeChange() {
        exam();
        exam2()
    }




    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() {

        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.data != null) {
                    var series = [], legend = []
                    for(var i=0;i<data.data.s.length;i++){
                        var item = data.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'
                                }
                            },

                            title: {
                                text: data.data.t
                            },
                            tooltip: {},
                            legend: {
                                data: legend
                            },
                            xAxis: {
                                type: 'category',
                                data: data.data.x.data,
                                boundaryGap: [0, 0.01],
                                axisLabel: {
                                    interval: 0,//横轴信息全部显示
                                    rotate: -30,//-30度角倾斜显示
                                }


                            },
                            yAxis: {},
                            series: series

                        }

                    );

                }
            },
            error: function (errorMsg) {
                examChart.hideLoading();
            }
        });

    }

</script>
{% endblock %}