Yumin
/
TQE


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506
							<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>
    <%@ include file="../header.jspf"%>
    <style type="text/css">
        .no1 {
            margin-top: 30px;
        }
        .eval-level-cnts{
            height: 400px;
        }
        .eval-table-item-cnts{
            height: 400px;
        }
    </style>

    <title>课程列表</title>
</head>

<body>
<div class="container-fluid">
    <div class="row">
    <%@ include file="../head.jsp"%>
        </div>
    <div class="row " >
        <div class="col-sm-2">
            <%@ include file="../left.jsp"%>
        </div>
        <div class="col-sm-10 ">
            <input type="hidden" id="cid" name="cid" value="${courseModel.course.cid}"/>
            <input type="hidden" id="cno" name="cno" value="${courseModel.course.cno}"/>
            <input type="hidden" id="bid" name="bid" value="${courseBatch.batch.id}"/>
            <div class="bs-callout bs-callout-danger">
                <ol class="breadcrumb">
                    <li><a href="${pageContext.request.contextPath}/admin/course">课程列表</a></li>
                    <li>
                        <a href="${pageContext.request.contextPath}/admin/course/show/${courseModel.course.cid}/${courseModel.course.cno}">
                        课程详情
                        </a>
                    </li>
                    <li class="active">课程统计信息</li>
                </ol>
                <div class="row">
                    <div class="col-sm-3">
                        <h4 >${course.teacher.name} -- ${course.name} (${course.season })</h4>
                        <hr>
                        <h5>${course.department } </h5>
                        <h5>课程号-课序号 :${course.cid}-${course.cno}</h5>
                        <h5>合班:${course.combine }</h5>
                    </div>
                    <div class="col-sm-9">
                        <table class="table no-border" style="text-align: center">
                            <tr class="thead">
                                <td>角色</td>
                                <td>平均得分</td>
                                <td>各批次平均得分</td>
                                <td>得分统计</td>
                            </tr>
                            <tr>
                                <td>学生评教</td>
                                <td> <code>${course.stuEvalAvgScore}</code>分 </td>
                                <td> <code>${course.stuEvalScores}</code>分 </td>
                                <td> <div class="eval-process-bar progress" value="${course.stuEvalLevelCnts}">${course.stuEvalLevelCnts}</div> </td>
                            </tr>
                            <tr>
                                <td>教师评教</td>
                                <td><code>${course.teaEvalAvgScore}</code>分 </td>
                                <td> <code>${course.teaEvalScores}</code>分 </td>
                                <td> <div class="eval-process-bar" value="${course.teaEvalLevelCnts}"></div> </td>
                            </tr>
                            <tr>
                                <td>领导评教</td>
                                <td> <code>${course.leaEvalAvgScore}</code>分</td>
                                <td> <code>${course.leaEvalScores}</code>分 </td>
                                <td> <div class="eval-process-bar" value="${course.leaEvalLevelCnts}"></div> </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="bs-callout bs-callout-info">
                <h4>该课程的所有批次:</h4>
                    <table
                            class="table table-hover table-striped  table-condensed">
                        <thead>
                        <tr class="info">
                            <td>序号</td>
                            <td>批次名</td>
                            <td>学期</td>
                            <td>开始/结束时间</td>
                        </tr>
                        </thead>
                        <tbody>
                             <c:forEach items="${courseModel.batchesList}" var="b" varStatus="s">
                                 <tr>
                                     <td>${s.count}</td>
                                     <td><a class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="点击查看课程统计信息"
                                             href="${pageContext.request.contextPath}/admin/statistics/course?cid=${courseModel.course.cid}&cno=${courseModel.course.cno}&bid=${b.batches.id}">
                                             ${b.batches.name}
                                        </a>
                                     </td>
                                     <td>${b.batches.season}</td>
                                     <td><fm:formatDate value="${b.batches.beginDate}"  dateStyle="medium"/> ~
                                         <fm:formatDate value="${b.batches.endDate}"  dateStyle="medium"/></td>

                                 </tr>
                              </c:forEach>
                        </tbody>
                    </table>
            </div>

            <div class="bs-callout bs-callout-info">
                <h4 class="panel-heading">
                    <a
                            href="${pageContext.request.contextPath}/admin/batches/show/${courseBatch.batch.id}"
                            target="_blank">${courseBatch.batch.name}</a>
                    <a style="padding-left: 50px;"
                       href="${pageContext.request.contextPath}/admin/evalTable/show/${courseBatch.batch.stuEvalId}"
                       target="_blank">点我查看评教表</a>
                    <a style="padding-left: 30px;">
                        评教时间: <fm:formatDate value="${courseBatch.batch.beginDate}"  dateStyle="medium"/> ~ <fm:formatDate value="${courseBatch.batch.endDate}"  dateStyle="medium"/>
                    </a>
                </h4>
                <hr>
                <h4 class="">学生评教进程: 已评 <code>${courseBatch.stuEvalCnt}</code> 人/ 共 <code>${courseBatch.stuEvalTotal}</code> 人</h4>
                <div class="progress stu-eval-progress" style="margin-top: 20px">
                    <div
                            class="progress-bar progress-bar-info progress-bar-striped active"
                            role="progressbar" aria-valuenow="10" aria-valuemin="0"
                            aria-valuemax="100" style="min-width:15%;" id="level">

                    </div>
                </div>
                <hr>
                <div class="row" style="margin-top: 20px;">
                    <div class="col-sm-4">
                        <h4>学生评教平均得分：<code>${courseBatch.stuEvalAvgScore}</code>分</h4>
                        <div id="stu-eval-level-cnts" class="eval-level-cnts" ></div>
                    </div>
                    <div class="col-sm-4">
                        <h4>教师评教平均得分：<code>${courseBatch.teaEvalAvgScore}</code>分</h4>
                        <div id="tea-eval-level-cnts" class="eval-level-cnts" ></div>
                    </div>
                    <div class="col-sm-4">
                        <h4>领导评教平均得分：<code>${courseBatch.leaEvalAvgScore}</code>分</h4>
                        <div id="lea-eval-level-cnts" class="eval-level-cnts" ></div>
                    </div>
                </div>

                <hr>
                <div class="row" style="margin-top: 20px;">
                    <div class="col-sm-6">
                        <h4>学生评教打分表统计</h4>
                        <div id="stu-eval-table-item-cnts" class="eval-table-item-cnts" ></div>
                    </div>
                    <div class="col-sm-6">
                        <h4>教师评教打分表统计</h4>
                        <div id="tea-eval-table-item-cnts" class="eval-table-item-cnts" ></div>
                    </div>
                    <div class="col-sm-6">
                        <h4>领导评教打分表统计</h4>
                        <div id="lea-eval-table-item-cnts" class="eval-table-item-cnts" ></div>
                    </div>

                </div>
                <hr>

                <div style="margin-top: 20px">
                    <div role="tabpanel">

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#student"
                                                                      aria-controls="student" role="tab" data-toggle="tab"><h4>学生问题回答和建议</h4></a></li>
                            <li role="presentation"><a href="#teacher"
                                                       aria-controls="teacher" role="tab" data-toggle="tab"><h4>教师问题回答和建议</h4></a></li>
                            <li role="presentation"><a href="#leader"
                                                       aria-controls="leader" role="tab" data-toggle="tab"><h4>领导问题回答和建议</h4></a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div role="tabpanel" class="tab-content" >
                            <!-- 学生评论信息 -->
                            <div role="tabpanel" class="tab-pane active"  id="student" >
                                <c:if test="${courseBatch.stuQuestionList == null}">
                                    <h3>暂无评教数据</h3>
                                </c:if>
                                <c:forEach var="quest" items="${courseBatch.stuQuestionList}" varStatus="v">

                                        <div class="panel panel-info ">
                                            <div class="panel-heading" style="text-align: center"><h4> <code>${v.count}</code> ${quest.key}</h4></div>
                                            <!-- Table -->
                                            <table class="table table-hover table-condensed">

                                                <tbody>
                                                    <c:forEach varStatus="vs" var="q" items="${quest.value}">
                                                        <tr>
                                                            <td># ${vs.count}</td>
                                                            <td>${q}</td>
                                                        </tr>
                                                    </c:forEach>
                                                </tbody>
                                            </table>
                                        </div>

                                </c:forEach>
                            </div>

                            <!-- 教师评论信息 -->
                            <div role="tabpanel" class="tab-pane " id="teacher">
                                <c:if test="${courseBatch.teaQuestionList == null}">
                                    <h3>暂无评教数据</h3>
                                </c:if>
                                <c:forEach var="quest" items="${courseBatch.teaQuestionList}" varStatus="v">
                                        <div class="panel panel-default">
                                            <div class="panel-heading" style="text-align: center"><h4> <code>${v.count}</code> ${quest.key}</h4></div>
                                            <!-- Table -->
                                            <table class="table table-hover table-condensed">


                                                <tbody>
                                                <c:forEach varStatus="vs" var="q" items="${quest.value}">
                                                    <tr>
                                                        <td># ${vs.count}</td>
                                                        <td>${q}</td>
                                                    </tr>
                                                </c:forEach>
                                                </tbody>
                                            </table>
                                        </div>
                                </c:forEach>
                            </div>


                            <!-- 领导评论信息 -->
                            <div role="tabpanel" class="tab-pane" id="leader">
                                <c:if test="${courseBatch.leaQuestionList == null}">
                                    <h3>暂无评教数据</h3>
                                </c:if>
                                <c:forEach var="quest" items="${courseBatch.leaQuestionList}" varStatus="v">
                                        <div class="panel panel-default">
                                            <div class="panel-heading" style="text-align: center"><h4> <code>${v.count}</code> ${quest.key}</h4></div>
                                            <!-- Table -->
                                            <table class="table table-hover table-condensed">

                                                <tbody>
                                                    <c:forEach varStatus="vs" var="q" items="${quest.value}">
                                                        <tr>
                                                            <td># ${vs.count}</td>
                                                            <td>${q}</td>
                                                        </tr>
                                                    </c:forEach>
                                                </tbody>
                                            </table>
                                        </div>
                                </c:forEach>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<%@ include file="../buttom.jsp"%>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/tqe/course/eval-process-bar.js"></script>
<script type="text/javascript">

    function fillCourseBatchInfo(courseBatch){
        var stuEvalTotal = courseBatch.stuEvalTotal;
        var stuEvalCnt = courseBatch.stuEvalCnt;
        var stuEvalPercent = parseInt((stuEvalCnt/stuEvalTotal)*100);
        $(".stu-eval-progress").find(".progress-bar").css("width",stuEvalPercent);
        $(".stu-eval-progress").find(".progress-bar").html("评教已进行:"+stuEvalPercent+"%");

        var stuEvalLevelCntsChart = echarts.init(document.getElementById('stu-eval-level-cnts'),echartTheme);

        var stuEvalLevelCnts = courseBatch.stuEvalLevelCnts;
        var teaEvalLevelCnts = courseBatch.teaEvalLevelCnts;
        var leaEvalLevelCnts = courseBatch.leaEvalLevelCnts;

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}个: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                x: 'top',
                data:['优秀','良好','一般','差']
            },
            series: [
                {
                    name:'学生评教等级',
                    type:'pie',
                    radius: ['30%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            formatter: "{b}{c}个\n({d}%)"
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },

                    data:[
                        {value:stuEvalLevelCnts[0], name:'优秀',select:true},
                        {value:stuEvalLevelCnts[1], name:'良好'},
                        {value:stuEvalLevelCnts[2], name:'一般'},
                        {value:stuEvalLevelCnts[3], name:'差'}
                    ]
                }
            ]
        };


        stuEvalLevelCntsChart.setOption(option);

        //教师评教等级饼图绘制
        option.series[0].data = [
            {value: teaEvalLevelCnts[0], name: '优秀', select: true},
            {value: teaEvalLevelCnts[1], name: '良好'},
            {value: teaEvalLevelCnts[2], name: '一般'},
            {value: teaEvalLevelCnts[3], name: '差'}
        ];
        option.series[0].name = "教师评教等级";
        var teaEvalLevelCntsChart = echarts.init(document.getElementById('tea-eval-level-cnts'),echartTheme);
        teaEvalLevelCntsChart.setOption(option);

        //领导评教等级饼图绘制
        option.series[0].data = [
            {value: leaEvalLevelCnts[0], name: '优秀', select: true},
            {value: leaEvalLevelCnts[1], name: '良好'},
            {value: leaEvalLevelCnts[2], name: '一般'},
            {value: leaEvalLevelCnts[3], name: '差'}
        ];
        option.series[0].name = "领导评教等级";
        var leaEvalLevelCntsChart = echarts.init(document.getElementById('lea-eval-level-cnts'),echartTheme);
        leaEvalLevelCntsChart.setOption(option);


        fillTableItemLevelInfo(courseBatch,'stu');
        fillTableItemLevelInfo(courseBatch,'tea');
        fillTableItemLevelInfo(courseBatch,'lea');
        //TODO
    }

    /**
     *  打分表的 表项的统计图的绘制
     */
    function fillTableItemLevelInfo(courseBatch,type) {
        var id = type+'-eval-table-item-cnts';
        var evalTableItemChart = echarts.init(document.getElementById(id),echartTheme);

        var evalTable = $.parseJSON(courseBatch.stuEvalTableJsonString);
        if(type=='tea'){
            evalTable = $.parseJSON(courseBatch.teaEvalTableJsonString);
        }
        if(type=='lea'){
            evalTable = $.parseJSON(courseBatch.leaEvalTableJsonString);
        }
        if(!evalTable){
            $("#"+id).html("<h3 style='text-align: center;margin-top: 30px;'>暂无评教数据</h3>");
            return ;
        }
        var tableItemList = evalTable.tableItemList;
        var itemList = [];

        var bestCnt=[];
        var goodCnt=[];
        var avgCnt=[];
        var badCnt=[];
        $.each(tableItemList,function(){
            var itemName = this.context;
            var item = {
                value:itemName + "\n \n 平均得分: "+this.avgScore+" 分/共"+this.maxLevel+"分("+this.percent+"%)",
                textStyle:{
                    fontSize:15
                }
            };
            itemList.push(item);
            bestCnt.push(this.scoreLevelCnts[0]);
            goodCnt.push(this.scoreLevelCnts[1]);
            avgCnt.push(this.scoreLevelCnts[2]);
            badCnt.push(this.scoreLevelCnts[3]);
        });


        var option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['优','良','中','差']
            },
            grid: {
                left: '5%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: itemList
            },
            series: [
                {
                    name: '优',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: "{a}{c}个"
                        }
                    },
                    data: bestCnt
                },
                {
                    name: '良',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: "{a}{c}个"
                        }
                    },
                    data: goodCnt
                },
                {
                    name: '中',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: "{a}{c}个"
                        }
                    },
                    data: avgCnt
                },
                {
                    name: '差',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: "{a}{c}个"
                        }
                    },
                    data: badCnt
                }
            ]
        };
        evalTableItemChart.setOption(option);
    }


    $(function(){

        var cid= $("#cid").val();
        var cno= $("#cno").val();
        var bid= $("#bid").val();

        $.get("../course-batch/info",{cid:cid,cno:cno,bid:bid},function(data){
            if(data.success){
                var courseBatch = data.item;
                fillCourseBatchInfo(courseBatch);

            }else{
                showGlobalNotification(data.msg);
            }
        });
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
<script src="${pageContext.request.contextPath}/js/echarts/echarts.common.min.js"></script>
<script src="${pageContext.request.contextPath}/js/echarts/macarons.js"></script>

</body>
</html>