<%@ 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/reportSubject">课程总量统计</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>科目</label>
        <select class="input-large" id="subjectCode" 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>
		&nbsp;
        <input id="btnSubmit" class="btn btn-primary" type="button" value="查询" onclick="goSearch()"/>
        &nbsp;
		<input id="export-button" class="btn" type="button" value="导出"/>
    </div>
</form>
<tags:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <th>课程</th>
        <th>层次</th>
        <th>0-</th>
        <th>0-占比(%)</th>
        <th>50-</th>
        <th>50-占比(%)</th>
        <th>60-</th>
        <th>60-占比(%)</th>
        <th>70-</th>
        <th>70-占比(%)</th>
        <th>80-</th>
        <th>80-占比(%)</th>
        <th>90-</th>
        <th>90-占比(%)</th>
        <th><60</th>
        <th><60占比(%)</th>
        <th>>=60</th>
        <th>>=60占比(%)</th>
        <th>总数</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${list}" var="subject">
        <tr>
            <td>
                <a href="${ctx}/admin/exam/reportSubjectCollege?subjectCode=${subject.subjectCode}">${subject.subjectCode}-${subject.subjectName}</a>
            </td>
            <td>${subject.level}</td>
            <td>${subject.count0_49}</td>
            <td><fmt:formatNumber type="number" value="${subject.percent0_49 * 100}" pattern="0.00" maxFractionDigits="2"/></td>
            <td>${subject.count50_59}</td>
            <td><fmt:formatNumber type="number" value="${subject.percent50_59 * 100}" pattern="0.00" maxFractionDigits="2"/></td>
            <td>${subject.count60_69}</td>
            <td><fmt:formatNumber type="number" value="${subject.percent60_69 * 100}" pattern="0.00" maxFractionDigits="2"/></td>
            <td>${subject.count70_79}</td>
            <td><fmt:formatNumber type="number" value="${subject.percent70_79 * 100}" pattern="0.00" maxFractionDigits="2"/></td>
            <td>${subject.count80_89}</td>
            <td><fmt:formatNumber type="number" value="${subject.percent80_89 * 100}" pattern="0.00" maxFractionDigits="2"/></td>
            <td>${subject.count90_100}</td>
            <td><fmt:formatNumber type="number" value="${subject.percent90_100 * 100}" pattern="0.00" maxFractionDigits="2"/></td>
            <td>${subject.lt60}</td>
            <td><fmt:formatNumber type="number" value="${subject.percent_lt60 * 100}" pattern="0.00" maxFractionDigits="2"/></td>
            <td>${subject.mte60}</td>
            <td><fmt:formatNumber type="number" value="${subject.percent_mte60 * 100}" pattern="0.00" maxFractionDigits="2"/></td>
            <td>${subject.totalCount}</td>
            <td><a href="#" onclick="viewEcharts('${subject.subjectCode}','${subject.subjectName}',${subject.percent0_49},${subject.percent50_59},${subject.percent60_69},${subject.percent70_79},${subject.percent80_89},${subject.percent90_100})">分段图</a>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<div class="pagination">${query}</div>
<script type="text/javascript">
$("#export-button").click(function(){
	$("#searchForm").attr("action","${ctx}/admin/exam/reportSubjectRange/export");
	$("#searchForm").submit();
});

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

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

    function viewEcharts(code, name, d1, d2, d3, d4, d5, d6) {

        var title = name + ' ' + code;

        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: title
                // textAlign:'center'
            },
            tooltip: {},
            legend: {
                data: [title]
            },
            toolbox: {
                feature : {
                    saveAsImage : {show: true}
                }
            },
            xAxis: {
                data: ["0-49占比(%)", "50-59占比(%)", "60-69占比(%)", "70-79占比(%)", "80-89占比(%)", "90-100占比(%)"]
            },
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [{
                name: title,
                type: 'bar',
                data: [d1, d2, d3, d4, d5, d6]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        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>