<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<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><a href="${ctx}/admin/exam/reportSubjectCollege?subjectCode=${query.subjectCode}">学院分析</a></li>
    <li><a href="${ctx}/admin/exam/reportSubjectTeacher?subjectCode=${query.subjectCode}">任课老师分析</a></li>
    <li><a href="${ctx}/admin/exam/reportSubjectClass?subjectCode=${query.subjectCode}">班级分析</a></li>
    <li><a href="${ctx}/admin/exam/reportSubjectQuestion?subjectCode=${query.subjectCode}&objective=true">客观题分析</a>
    </li>
    <li><a href="${ctx}/admin/exam/reportSubjectQuestion?subjectCode=${query.subjectCode}&objective=false">主观题分析</a>
    </li>
    <li class="active"><a href="${ctx}/admin/exam/reportSubjectGroup?subjectCode=${query.subjectCode}">大题统计分析</a></li>
</ul>
<form id="searchForm" action="${ctx}/admin/exam/reportSubjectGroup" method="post" class="breadcrumb form-search">
    <div>
        <label>科目：</label>
        <select class="input-large" id="subject-select" name="subjectCode">
            <option value="">请选择</option>
            <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>
<!--         <label>大题</label> -->
<!--             <select class="input-medium" id="group-select" name="groupNumber"> -->
<!--             </select> -->
        &nbsp;
        <input id="btnSubmit" class="btn btn-primary" type="button" value="查询" onclick="goSearch()"/>
		&nbsp;
		<input id="export-button" class="btn" type="button" value="导出"/>
		 &nbsp;
        <input class="btn btn-primary" type="button" value="查看统计图" onclick="viewGroupEcharts()"/>
    </div>
</form>
<tags:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <th>大题</th>
        <th>题号</th>
        <th>满分</th>
        <th>最高分</th>
        <th>最低分</th>
        <th>平均分</th>
        <th>标准差</th>
        <th>差异系数(%)</th>
        <th>得分率</th>
        <th>零分人数</th>
        <th>满分人数</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${list}" var="group">
        <tr>
            <td>${group.groupName}</td>
            <td>${group.groupNumber }</td>
            <td>${group.totalScore}</td>
            <td>${group.maxScore}</td>
            <td>${group.minScore}</td>
            <td><fmt:formatNumber type="number" value="${group.avgScore}" pattern="0.00" maxFractionDigits="2"/></td>
            <td><fmt:formatNumber type="number" value="${group.stdev}" pattern="0.00" maxFractionDigits="2"/></td>
            <td><fmt:formatNumber type="number" value="${group.coefficient}" pattern="0.00" maxFractionDigits="2"/></td>
            <td><fmt:formatNumber type="number" value="${group.scoreRate}" pattern="0.00" maxFractionDigits="2"/></td>
            <td>${group.zeroCount}</td>
            <td>${group.fullCount}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<script type="text/javascript">
$("#export-button").click(function(){
    if ($("#subject-select").val() == null || $("#subject-select").val() == '') {
        alert('请选择科目');
        return;
    }
	$("#searchForm").attr("action","${ctx}/admin/exam/reportSubjectGroup/export");
	$("#searchForm").submit();
});
/* var searchSubjectCode = '${query.subjectCode}';
var searchGroupNumber = '${query.groupNumber}';
$('#subject-select').change(function(){
    var code = $(this).val();
    $('#group-select').empty();
    $('#group-select').append('<option value="0">请选择</option>');
    if(code==''){
        $('#group-select').val('0').trigger('change');
        return;
    }
    $.post('${ctx}/admin/exam/group/query', {subjectCode: code}, function(result){
        var parent = $('#group-select');
        for(var i=0;i<result.length;i++){
            var group = result[i];
            var dom = $('<option value="'+group.number+'">'+group.number+'-'+group.title+'</option>').appendTo(parent);
            if(searchSubjectCode==code && searchGroupNumber==group.number){
                dom.attr('selected', 'selected');
            }
        }
        parent.trigger('change');
    });
}); */
$('#subject-select').trigger('change');

    function viewGroupEcharts() {
        var groupNames = new Array();
        var fullScores = new Array();
        var maxScores = new Array();
        var minScores = new Array();
        var avgScores = new Array();
        var sds = new Array();

        $('tbody tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if (j == 0) {
                    groupNames.push($(this).text()+"_"+$(this).next().text());
                } else if (j == 2) {
                    fullScores.push($(this).text());
                } else if (j == 3) {
                    maxScores.push($(this).text());
                } else if (j == 4) {
                    minScores.push($(this).text());
                } else if (j == 5) {
                    avgScores.push($(this).text());
                } else if (j == 6) {
                    sds.push($(this).text());
                }
            });
            var width = 800;
            if(i>40){
            	width = 18*i;
            }
            if(i = $('tbody tr').length-1){
            	$("#echart-content").width(width+"px") ;
            }
        });

        var title = '';

        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: 60
                },
                data: groupNames
            },
            yAxis: [
                {
                    type: 'value'
                },
                {
                    type: 'value'
                }
            ],
            series: [{
                name: '满分',
                type: 'bar',
                data: fullScores
            }, {
                name: '最高分',
                type: 'bar',
                yAxisIndex: 1,
                data: maxScores
            }, {
                name: '最低分',
                type: 'bar',
                data: minScores
            }, {
                name: '平均分',
                type: 'line',
                data: avgScores
            }, {
                name: '标准差',
                type: 'line',
                yAxisIndex: 1,
                data: sds
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


    function goSearch() {
        if ($("#subject-select").val() == null || $("#subject-select").val() == '') {
            alert('请选择科目');
            return;
        }
    	$("#searchForm").attr("action","${ctx}/admin/exam/reportSubjectGroup");
        $("#searchForm").submit();
        return false;
    }

    $(document).keydown(function (event) {
        if (event.keyCode == 13 || event.keyCode == 108) {
            goSearch();
            return false;
        }
    });
</script>

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