<%@ 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 class="active"><a href="#" data-i18n-text="report.teacher">任课老师班级分析</a></li>
</ul>
<form id="searchForm" action="${ctx}/admin/exam/reportSubjectTeacher" method="post" class="breadcrumb form-search">
		<input type="hidden" id="teacherName" name="teacherName" value="${query.teacherName }"/>
		<input type="hidden" id="subjectCode" name="subjectCode" value="${query.subjectCode }"/>
    &nbsp;&nbsp;<span data-i18n-text="report.teacher.subject">科目</span>：${subjectName}&nbsp;&nbsp;&nbsp;&nbsp;
    <span data-i18n-text="report.teacher.name">任课老师</span>：${query.teacherName} &nbsp;&nbsp;
    <a href="#" class="btn btn-primary" onclick="viewTeacherClassEcharts()" data-i18n-text="report.teacher.chart">查看统计图</a>
    &nbsp;
	<!-- <input id="export-button" class="btn" type="button" value="导出" data-i18n-value="report.teacher.export"/>
	&nbsp; -->
    <a href="javascript:" onclick="history.go(-1);"  class="btn" data-i18n-text="report.teacher.return">返回</a>
</form>
<tags:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <th data-i18n-text="report.class.name">班级</th>
        <th data-i18n-text="report.teacher.realityCount">有效人数</th>
        <th data-i18n-text="report.teacher.passCount">及格</th>
        <th data-i18n-text="report.teacher.excellentCount">优秀</th>
        <th data-i18n-text="report.teacher.maxScore">最高分</th>
        <th data-i18n-text="report.teacher.minScore">最低分</th>
        <th data-i18n-text="report.teacher.passRate">及格率</th>
        <th data-i18n-text="report.teacher.excellentRate">优秀率</th>
        <th data-i18n-text="report.teacher.avgScore">平均分</th>
        <th data-i18n-text="report.teacher.relativeAvgScore">平均相对分</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${list}" var="reportSubjectteacher">
        <tr>
            <td>${reportSubjectteacher.className}</td>
            <td>${reportSubjectteacher.realityCount}</td>
            <td>${reportSubjectteacher.passCount}</td>
            <td>${reportSubjectteacher.excellentCount}</td>
            <td>${reportSubjectteacher.maxScore}</td>
            <td>${reportSubjectteacher.minScore}</td>
            <td><fmt:formatNumber type="number" value="${reportSubjectteacher.passRate}" pattern="0.00" maxFractionDigits="2"/></td>
            <td><fmt:formatNumber type="number" value="${reportSubjectteacher.excellentRate}" pattern="0.00" maxFractionDigits="2"/></td>
            <td><fmt:formatNumber type="number" value="${reportSubjectteacher.avgScore}" pattern="0.00" maxFractionDigits="2"/></td>
            <td><fmt:formatNumber type="number" value="${reportSubjectteacher.relativeAvgScore}" pattern="0.00" maxFractionDigits="2"/></td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<script type="text/javascript">
$("#export-button").click(function(){
	if ($("#subjectCode").val() == null || $("#subjectCode").val() == '') {
        alert('请选择科目');
        return;
    }
	$("#searchForm").attr("action","${ctx}/admin/exam/reportSubjectTeacherClass/export");
	$("#searchForm").submit();
});


    function viewTeacherClassEcharts() {
        var classs = new Array();
        var avgScores = new Array();
        var maxScores = new Array();
        var minScores = new Array();
        var passRates = new Array();
        var excellentRates = new Array();
        var relativeAvgScore = new Array();

        $('tbody tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if(j == 0){
                    classs.push($(this).text());
                } else if(j == 8){
                    avgScores.push($(this).text());
                } else if(j == 4){
                    maxScores.push($(this).text());
                } else if(j == 5){
                    minScores.push($(this).text());
                } else if(j == 6){
                    passRates.push($(this).text()*100);
                } else if(j == 7){
                    excellentRates.push($(this).text()*100);
                } else if(j == 9){
                    relativeAvgScore.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(getMessage("report.teacher"));
        imageModal.setContent($('#echart-view-content'));
        imageModal.open();

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

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: getMessage("report.teacher")
                // textAlign:'center'
            },
            tooltip: {},
            legend: {
                data: [getMessage("report.teacher.maxScore"),
                       getMessage("report.teacher.minScore"),
                       getMessage("report.teacher.avgScore"),
                       getMessage("report.teacher.relativeAvgScore"),
                       getMessage("report.teacher.passRate"),
                       getMessage("report.teacher.excellentRate")]
            },
        /*     dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                left: '9%',
                bottom: -5,
                start: 10,
                end: 90 //初始化滚动条
            }], */
            toolbox: {
                feature : {
                    saveAsImage : {show: true}
                }
            },
            xAxis: {
                axisLabel: {
                    interval:0,
                    rotate:60
                },
                data: classs
            },
            yAxis: [
                {
                    type: 'value'
                },
                {
                    type: 'value'
                }
            ],
            series: [{
                name: getMessage("report.teacher.maxScore"),
                type: 'bar',
                data: maxScores
            },{
                name: getMessage("report.teacher.minScore"),
                type: 'bar',
                data: minScores
            },{
                name: getMessage("report.teacher.avgScore"),
                type: 'bar',
                data: avgScores
            },{
                name: getMessage("report.teacher.relativeAvgScore"),
                type: 'line',
                yAxisIndex : 1,
                data: relativeAvgScore
            },{
                name: getMessage("report.teacher.passRate"),
                type: 'line',
                data: passRates
            },{
                name: getMessage("report.teacher.excellentRate"),
                type: 'line',
                data: excellentRates
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        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:700px;"/>
</div>
</body>
</html>