<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>成绩分析</title>
    <meta name="decorator" content="default"/>
    <%@include file="/WEB-INF/views/include/head.jsp" %>
    <%@include file="/WEB-INF/views/include/dialog.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/jBox/Source/jBox.css">
    <script type="text/javascript" src="${ctxStatic}/jBox/Source/jBox.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/echarts/echarts.min.js"></script>
    <style type="text/css">.sort {
        color: #0663A2;
        cursor: pointer;
    }</style>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="${ctx}/admin/exam/reportSubjectRange">分段统计</a></li>
    <li><a href="${ctx}/admin/exam/reportSubjectCollege?subjectCode=${query.subjectCode}"
           data-i18n-text="report.college">电厂分析</a></li>
    <li><a href="${ctx}/admin/exam/reportSubjectTeacher?subjectCode=${query.subjectCode}"
           data-i18n-text="report.teacher">总评分析</a></li>
    <li><a href="${ctx}/admin/exam/reportSubjectClass?subjectCode=${query.subjectCode}" data-i18n-text="report.class">机组分析</a>
    </li>
    <li><a href="${ctx}/admin/exam/reportSubjectQuestion?subjectCode=${query.subjectCode}&objective=true"
           data-i18n-text="report.question.objective">客观题分析</a>
    </li>
    <li><a href="${ctx}/admin/exam/reportSubjectQuestion?subjectCode=${query.subjectCode}&objective=false"
           data-i18n-text="report.question.subjective">主观题分析</a>
    </li>
    <li><a href="${ctx}/admin/exam/reportSubjectGroup?subjectCode=${query.subjectCode}" data-i18n-text="report.group">分组统计分析</a>
    </li>
</ul>
<form id="searchForm" action="${ctx}/admin/exam/reportSubjectRange" method="post" class="breadcrumb form-search">
    <input type="hidden" id="pageNumber" name="pageNumber" value="${query.pageNumber }"/>
    <input type="hidden" id="pageSize" name="pageSize" value="${query.pageSize }"/>
    <div>
        <label data-i18n-text="report.range.subject">科目</label>
        <select class="input-large" id="subjectCode" name="subjectCode">
            <c:forEach items="${subjectList }" var="subject">
                <option value="${subject.code }"
                        <c:if test="${query.subjectCode eq subject.code }">selected</c:if>>${subject.code}-${subject.name}</option>
            </c:forEach>
        </select>
        &nbsp;
        <label>分数间隔</label>
        <input type="text" number="true" id="range" name="range" value="${query.range}" class="input-mini"/>
        <%--        <select class="input-large" name="range">--%>
        <%--                <option value="10" <c:if test="${query.range ==10 }">selected</c:if>>十分一段</option>--%>
        <%--                 <option value="5" <c:if test="${query.range ==5 }">selected</c:if>>五分一段</option>--%>
        <%--        </select>--%>
        &nbsp;
        <input id="btnSubmit" class="btn btn-primary" type="button" value="查询" onclick="goSearch()"
               data-i18n-value="report.group.search"/>
        <c:if test="${query.subjectCode!=null && oldSubjectCode!=null}">
            <a id="refresh" href="<c:if test="${locked}">#</c:if><c:if test="${!locked}">${ctx}/admin/exam/reportSubjectRange/report?subjectCode=${query.subjectCode}&range=${query.range}</c:if>" class="btn" <c:if test="${locked}">disabled="disabled"</c:if>>刷新</a>
        </c:if>
        &nbsp;
        <div class="btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                导出<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="##" id="export-button">导出</a></li>
                <li><a href="##" id="exportAll-button">批量导出</a></li>
            </ul>
        </div>
        &nbsp;
        <a href="#" onclick="viewEcharts()" class="btn  btn-primary">查看统计图</a>
    </div>
</form>
<form id="exportForm" action="${ctx}/admin/exam/reportSubjectRange/export" method="post"
      class="breadcrumb form-search hide">
    <input type="text" name="subjectCode" value="${query.subjectCode}" class="input-small"/>
    <input type="text" name="range" value="${query.range}" class="input-small"/>
    <input type="hidden" id="all" name="all"/>
</form>
<tags:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
    <caption align="top">*分数段80表示:80&lt;=成绩&lt;${80+query.range}</caption>
    <thead>
    <tr>
        <th>分数段</th>
        <th>人数</th>
        <th>频率（%）</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${total}" var="subject">
        <tr>
            <td>${subject.score}&lt;=X&lt;${subject.score+query.range}</td>
            <td>${subject.rangeCount}</td>
            <td><fmt:formatNumber type="number" value="${subject.rangeRate}" pattern="0.00" maxFractionDigits="2"/></td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function () {
        var old = "${oldSubjectCode}";
        var locked = "${locked}";
        if (old == "") {
            $('#btnSubmit').attr("type", "button");
            $('#refresh').hide();
        } else {
            $('#btnSubmit').attr("type", "hidden");
            $('#refresh').show();
            if (locked != 'false') {
                $('#refresh').text("计算中");
                window.setTimeout(function () {
                    goSearch();
                }, 5 * 1000);
            } else {
                $('#refresh').text("刷新");
            }
        }
    });

    $("#refresh").click(function(){
        var locked = "${locked}";
        if(locked!='false'){
            return;
        }
        var code = $("#subjectCode").val();
        var range = $('#range').val();
        if (!isQuarterMultiple(range) || range == null || range == ''||range<=0) {
            alert("分数间隔必须是0.25的倍数");
            return false;
        }
        $("#refresh").attr("href","${ctx}/admin/exam/reportSubjectRange/report?subjectCode="+code+"&range="+range);
    });
    $('#subjectCode').change(function () {
        var code = $(this).val();
        var old = "${oldSubjectCode}";
        if (code != old || old == "") {
            $('#btnSubmit').attr("type", "button");
            $('#refresh').hide();
        } else {
            $('#btnSubmit').attr("type", "hidden");
            $('#refresh').show();
        }
    });

    $("#export-button").click(function () {
        if ($("#subjectCode").val() == null || $("#subjectCode").val() == '') {
            alert('请选择科目');
            return;
        }
        $("#all").attr("value", false);
        $("#exportForm").attr("action", "${ctx}/admin/exam/reportSubjectRange/export");
        $("#exportForm").submit();
    });
    $("#exportAll-button").click(function () {
        $("#all").attr("value", true);
        $("#exportForm").attr("action", "${ctx}/admin/exam/reportSubjectRange/export");
        $("#exportForm").submit();
    });

    function page(n, s) {
        $("#pageNumber").val(n);
        $("#pageSize").val(s);
        $("#searchForm").attr('action', '${ctx}/admin/exam/reportSubjectRange');
        $("#searchForm").submit();
        return false;
    }

    function isQuarterMultiple(number) {
        return number % 0.25 === 0;
    }

    function goSearch() {
        var range = $("#range").val();
        if (!isQuarterMultiple(range) || range == null || range == ''||range<=0) {
            alert("分数间隔必须是0.25的倍数");
            return false;
        }
        $("#pageNumber").val(1);
        $("#pageSize").val('${query.pageSize}');
        $("#searchForm").attr('action', '${ctx}/admin/exam/reportSubjectRange');
        $("#searchForm").submit();
        return false;
    }

    function viewEcharts() {

        var scores = new Array();
        var rangeCounts = new Array();
        var rangeRanges = new Array();

        $('tbody tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if (j == 0) {
                    scores.push($(this).text());
                } else if (j == 1) {
                    rangeCounts.push($(this).text());
                } else if (j == 2) {
                    rangeRanges.push($(this).text());
                }
            });
            var width = 800;
            if (i > 40) {
                width = 18 * i;
            }
            if (i = $('tbody tr').length - 1) {
                $("#echart-content").width(width + "px");
            }
        });

        var imageModal = new jBox('Modal');
        imageModal.setWidth($(window).width() * 0.9);
        imageModal.setHeight($(window).height() * 0.85);
        imageModal.setTitle('课程成绩分段图');
        imageModal.setContent($('#echart-view-content'));
        imageModal.open();

        var myChart = echarts.init(document.getElementById('echart-content'));

        var option = {
            title: {
                text: '课程成绩分段图'
                // textAlign:'center'
            },
            tooltip: {},
            legend: {
                data: ["分数段",
                    "人数",
                    "频率"]
            },
            toolbox: {
                feature: {
                    saveAsImage: {show: true}
                }
            },
            /*      dataZoom: [{
                     type: 'slider',
                     show: true,
                     xAxisIndex: [0],
                     left: '9%',
                     bottom: -5,
                     start: 10,
                     end: 90 //初始化滚动条
                 }], */
            xAxis: {
                axisLabel: {
                    interval: 0,
                    rotate: 45
                },
                data: scores
            },
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [{
                name: "人数",
                type: 'bar',
                data: rangeCounts
            }, {
                name: "频率",
                type: 'line',
                data: rangeRanges
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }

</script>
<div id="echart-view-content" class="container-fluid" style="display:none" align="center">
    <div id="echart-content" style="width: 100%;height:500px;"/>
</div>
</body>


</html>