<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>私塾家</title>
	<link th:href="@{/static/kmt/css/bootstrap.css}" rel="stylesheet">
	<link rel="stylesheet" type="text/css" th:href="@{/static/kmt/css/common.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/static/kmt/css/header.css}"/>
	<script th:include="sys/common/metaCSS" th:remove="tag"></script>
	<script th:include="sys/common/metaJS" th:remove="tag"></script>
	<script src="sys/js/jquery.validate.min.js" th:src="@{/static/sys/js/jquery.validate.min.js}"></script>
	<script src="sys/js/jquery-validation/messages_zh.js" th:src="@{/static/sys/js/jquery-validation/messages_zh.js}"></script>
	<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>
    <script src="js/echarts.min.js" th:src="@{/static/js/echarts.min.js}"></script>

	<style>
    	.clearfix:after {
			visibility: hidden;
			display: block;
			font-size: 0;
			content: " ";
			clear: both;
			height: 0;
		}
		.clearfix { display: inline-table; }
		* html .clearfix { height: 1%; }
		.clearfix { display: block; }
		.fl{display:inline;float:left}
		clearfix >control-label-error{display:inline;float:left;marign-left:10px}
		 label.control-label-error {
  				color: Red;
             }
          .lispan {line-height: 34px;}   
          
          .select1{
   		    width:100%;
		    height: 32px;
		    line-height: 32px;
		    border-top: solid 1px #a7b5bc;
		    border-left: solid 1px #a7b5bc;
		    border-right: solid 1px #ced9df;
		    border-bottom: solid 1px #ced9df;
		    opacity:1;
	        margin-bottom: 10px;
    	}
    	
    	textarea{
    	width: 382px;
    	}
    </style>
</head>

<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
		<li><a href="#">用户管理中心</a></li>
		<li><a th:href="@{/sys/usercenter/studentList.html}">学生列表</a></li>
		<li>学生档案</li>
	</ul>
</div>
<div class="formbody">
	<div class="formtitle"><span>数据统计</span></div>
    <div id="datacount" style="width: 600px;height:400px;"></div>
	<div class="formtitle"><span>购买服务</span></div>
	<ul>
		<li>
            <table class="table">
                <caption>小塾作业吧服务</caption>
                <thead>
                <tr>
                    <th>日期</th>
                    <th>馆名称</th>
                    <th>老师</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="item:${map.zybService}">
                    <td th:text="${#calendars.format(item.start_time,'yyyy-MM-dd HH')}+'~'+${#calendars.format(item.end_time,'yyyy-MM-dd HH')}"></td>
                    <td th:text="${item.league_name}"></td>
                    <td th:text="${item.leadue_manager}"></td>
                </tr>
                </tbody>
            </table>
		</li>
	</ul>
	<div class="formtitle"><span>学习状态分析</span></div>
    <!--学习积极性-->
    <div id="studentWorkChart1" style="width: 300px;height:400px;display: inline-block;"></div>
    <!--专注度-->
    <div id="studentWorkChart2" style="width: 300px;height:400px;display: inline-block;"></div>
    <!--作业速度-->
    <div id="studentWorkChart3" style="width: 300px;height:400px;display: inline-block;"></div>
    <!--自律性-->
    <div id="studentWorkChart4" style="width: 300px;height:400px;display: inline-block;"></div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    var map = [[${map}]];
    console.info(map);
    var homeworkCount = map.homeworkCount;
    var prolemCount = map.prolemCount;
    var smarttimeCount = map.smarttimeCount;
    var wrongCount = map.wrongCount;
    var studentWorkList = map.studentWorkList;
    // 基于准备好的dom，初始化echarts实例
    var datacountChart = echarts.init(document.getElementById('datacount'));
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: ''
        },
        tooltip: {},
        legend: {
            //data:['']
        },
        xAxis: {
            data: ["作业","难题","错题","小时光"]
        },
        yAxis: {},
        series: [{
            name: '数量',
            type: 'bar',
            data: [homeworkCount, prolemCount, wrongCount, smarttimeCount]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    datacountChart.setOption(option1);
    var studentWorkChart1 = echarts.init(document.getElementById('studentWorkChart1'));
    var work_option1 = {
        title: {
            text: '学习积极性',
            subtext: '',
            left: 'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['好','一般','欠佳']
        },
        series : [
            {
                type: 'pie',
                radius : '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[],//饼状图数据
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    work_option1 = loadWorkChartInfo(work_option1,'学习积极性');
    studentWorkChart1.setOption(work_option1);

    var studentWorkChart2 = echarts.init(document.getElementById('studentWorkChart2'));
    var work_option2 = {
        title: {
            text: '专注度',
            subtext: '',
            left: 'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['好','一般','欠佳']
        },
        series : [
            {
                type: 'pie',
                radius : '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[],//饼状图数据
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    work_option2 = loadWorkChartInfo(work_option2,'专注度');
    studentWorkChart2.setOption(work_option2);
    var studentWorkChart3 = echarts.init(document.getElementById('studentWorkChart3'));
    var work_option3 = {
        title: {
            text: '自律性',
            subtext: '',
            left: 'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['好','一般','欠佳']
        },
        series : [
            {
                type: 'pie',
                radius : '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[],//饼状图数据
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    work_option3 = loadWorkChartInfo(work_option3,'自律性');
    studentWorkChart3.setOption(work_option3);
    var studentWorkChart4 = echarts.init(document.getElementById('studentWorkChart4'));
    var work_option4 = {
        title: {
            text: '作业速度',
            subtext: '',
            left: 'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['很快','较快','较慢','很慢','拖拉很严重']
        },
        series : [
            {
                type: 'pie',
                radius : '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[],//饼状图数据
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }

                }
            }
        ]
    };
    work_option4 = loadWorkChartInfo(work_option4,'作业速度');
    studentWorkChart4.setOption(work_option4);

    function loadWorkChartInfo(option,type) {
        var i = studentWorkList.length;
        while(i--){
            if(studentWorkList[i].parent_name == type){
                if(type == '作业速度'){
                    if(studentWorkList[i].child_stat == '1'){
                        option.series[0].data.push({value:studentWorkList[i].counts,name:'很快'});
                    }else if(studentWorkList[i].child_stat == '2'){
                        option.series[0].data.push({value:studentWorkList[i].counts,name:'较快'});
                    }else if(studentWorkList[i].child_stat == '3'){
                        option.series[0].data.push({value:studentWorkList[i].counts,name:'较慢'});
                    }else if(studentWorkList[i].child_stat == '4'){
                        option.series[0].data.push({value:studentWorkList[i].counts,name:'很慢'});
                    }else if(studentWorkList[i].child_stat == '5'){
                        option.series[0].data.push({value:studentWorkList[i].counts,name:'拖拉很严重'});
                    }
                }else{
                    option = pushInfo(option,studentWorkList[i].child_stat,studentWorkList[i].counts);
                    studentWorkList.splice(i,1);
                }
            }
        }
        return option;
    }
    function pushInfo(option,child_stat,counts) {
        if(child_stat == '1'){
            option.series[0].data.push({value:counts,name:'好'});
        }else if(child_stat == '2'){
            option.series[0].data.push({value:counts,name:'一般'});
        }else if(child_stat == '3'){
            option.series[0].data.push({value:counts,name:'欠佳'});
        }
        return option;
    }
</script>
</html>