<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/taglib/c.tld" prefix="c"%>
<%@ include file="../../common/init.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../../common/top.jsp"%>
<script type="text/javascript" src="${ctx}/static/subjecthead/js/jquery.PrintArea.js"></script>
<script type="text/javascript" src="${ctx}/static/highcharts/js/highcharts.js"></script>
</head>
<body class="easyui-layout">
	<%@ include file="../../common/topicheader.jsp"%>
	<%@ include file="../../common/topicmenu-w.jsp"%>
	<div data-options="region:'center',title:'首页 - 评卷员对比'">
		<div id="tt" class="easyui-tabs" fit="true"
			style="width: 500px; height: 250px;">
			<div title="评卷员工作量统计" style="padding: 20px;">
				<div class="easyui-layout" data-options="fit:true,border:false">
					<div data-options="region:'north',border:false" class="domain">
						<div id="tb" style="padding: 5px; height: auto">
							<div>
								评卷状态: <select id="markStage" name="markStage"
									style="width: 100px;">
									<option value="-1">请选择...</option>
									<option value="2">试评</option>
									<option value="3" selected="selected">正评</option>
								</select>
								<button type="button" onclick="showWorkLoad()" class="btn">
									<i class="icon-search"></i> 查询
								</button>
							</div>
						</div>
					</div>
					<div data-options="region:'center'"
						style="border-color: #ccc; border-left: none;">
						<div id="workload"  style="width: 500px; float: left; margin: 0 80px; margin-top: 10px;">
						</div>
						<div class="fr">
							<div id="table1" style="width: 300px">
								<table class="table table-bordered table-hover mr-t">
									<thead>
										<tr>
											<th style="text-align: center;">评卷员代码</th>
											<th style="text-align: center;">评卷员</th>
											<th style="text-align: center;">评卷数量</th>
										</tr>
									</thead>
									<tbody id="tbody1">
									</tbody>
								</table>
							</div>
							<div>
								<!-- <button id="exportButton" class="btn btn-primary" type="button"><i class="icon-file icon-white"></i>导出</button> -->
								<button id="printButton1" class="btn btn-primary" type="button">
									<i class="icon-print icon-white"></i> 打印
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div title="评卷员质量统计" style="padding: 10px;">
				<div class="easyui-layout" data-options="fit:true,border:false">
					<div data-options="region:'north',border:false" class="domain">
						<div id="tb" style="padding: 5px; height: auto">
							<div>
								评卷状态: <select id="ms" name="ms" style="width: 100px;">
									<option value="-1" selected="selected">请选择</option>
									<option value="2">试评</option>
									<option value="3">正评</option>
								</select>
								<input id="block" name="block" type="hidden" value="${blockId}"/>
								<%-- 题块：<select id="block" name="block" style="width: 100px;">
									<c:forEach items="${sbList}" var="block">
										<option value="${block.id}">${block.title}</option>
									</c:forEach>
								</select> --%>
								<button type="button" onclick="showQuality()" class="btn">
									<i class="icon-search"></i> 查询
								</button>
							</div>
						</div>
					</div>
					
					<div data-options="region:'center'" style="border-color: #ccc; border-left: none;">
						<!-- <div id="parameter"  style="width: 500px; float: left; margin: 0 80px; margin-top: 10px;">
						</div> -->
						<div>
							<div id="table2">
								<table class="table table-bordered table-hover mr-t">
									<thead>
										<tr>
											<th style="text-align: center;">评卷员代码</th>
											<th style="text-align: center;">评卷员</th>
											<th style="text-align: center;cursor:pointer;" onmouseover=showChart(1) onmouseout=hideChart()>零分总量</th>
											<th style="text-align: center;cursor:pointer;" onmouseover=showChart(2) onmouseout=hideChart()>满分总量</th>
											<th style="text-align: center;cursor:pointer;" onmouseover=showChart(3) onmouseout=hideChart()>误差总量</th>
											<th style="text-align: center;cursor:pointer;" onmouseover=showChart(4) onmouseout=hideChart()>平均分</th>
											<th style="text-align: center;cursor:pointer;" onmouseover=showChart(5) onmouseout=hideChart()>标准差</th>
											<th style="text-align: center;cursor:pointer;" onmouseover=showChart(6) onmouseout=hideChart()>最高分</th>
											<th style="text-align: center;cursor:pointer;" onmouseover=showChart(7) onmouseout=hideChart()>最低分</th>
											<th style="text-align: center;cursor:pointer;" onmouseover=showChart(8) onmouseout=hideChart()>平均耗时</th>
										</tr>
									</thead>
									<tbody id="tbody2">
									</tbody>
								</table>
								<div id="qualityView" style="width: 550px; height: 300px;position: absolute; left: 300px; top: 100px;display:none;">
								</div>
							</div>
							<div>
								<button id="printButton2" class="btn btn-primary" type="button">
									<i class="icon-print icon-white"></i> 打印
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		showWorkLoad();
		showQuality();
	});
	
	function showWorkLoad(){
		var markStage = $('#markStage').val();
		var labs = [];
		var d = [];
		$.post('${ctx}/topicmarker/marker/workloadbyblock',{markStage : markStage},function(res) {
			$('#tbody1').find('tr').remove();
			$.each(res, function(n, obj) {
				labs.push(obj.name);
				var o = {};
				o.y = obj.count;
				d.push(o);
				$('#tbody1').append(
						'<tr><td style="text-align:center;">' + obj.code
								+ '</td><td style="text-align:center;">'
								+ obj.name
								+ '</td><td style="text-align:center;">'
								+ obj.count + '</td></tr>');
			});
			var chart;
			chart = new Highcharts.Chart({  
		        chart: {  
		            renderTo: 'workload',  
		            type: 'column', 
		            backgroundColor:'#F5F5F5',
		            events: {  
		              load: function() {      
		                  var series = this.series[0];  
		                  series.setData(d);  
		              }  
		          }  
		        },  
		        title: {  
		            text: '<b>评卷员工作量统计</b>',
		            style: {  
	                     color:'#263C53'  
	                    } 
		        },  
		        xAxis: {  
		            categories: labs ,
		            style: {
	                     color:'#263C53'
	                     }
		        },  
		        credits: {
	            	 text: 'qmth.com.cn',
	            	 href: 'http://www.qmth.com.cn'
	        	 },
		        yAxis: {  
		            min: 0,  
		            title: {  
		                text: '数量',
			            style: {
		                     color:'#777777'  
		                     }  
		            },  
		            stackLabels: {  
		                enabled: true,  
		                style: {  
		                    fontWeight: 'bold',  
		                    color: (Highcharts.theme && Highcharts.theme.textColor) || '#777777'  
		                }  
		            }  
		        },  
		        legend: {  
		            align: 'right',  
		            x: -100,  
		            verticalAlign: 'bottom',  
		            y: 20,  
		            floating: true,  
		            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',  
		            borderColor: '#CCC',  
		            borderWidth: 1,  
		            shadow: false  
		        },  
		        tooltip: {  
		            formatter: function() {  
		                return '<b>'+ this.y +'</b><br/>';  
		            }  
		        },  
		        plotOptions: {  
		            column: {  
		                stacking: 'normal',  
		                dataLabels: {  
		                    enabled: true,  
		                    color: '#777777'  
		                }  
		            },
		            series: {  
		                colorByPoint: true
		            } 
		        },  
		        series: [{  
		            name: '工作量',  
		            data: [5, 3, 4] ,
		            color: 'white'
		        }]
		    });
		});
	}

	$("#printButton1").click(function() {
		$("#table1").printArea();
	});
	
	$("#printButton2").click(function() {
		$("#table2").printArea();
	});

	function showQuality() {
		var ms=$('#ms').val();
		var blockId=$('#block').val();
		$.post('${ctx}/topicmarker/marker/qualitybyblock',{markStage:ms,blockId:blockId},function(res) {
			$('#tbody2').find('tr').remove();
			$.each(res, function(n, obj) {
				$('#tbody2').append(
						'<tr><td style="text-align:center;">' + obj.code
								+ '</td><td style="text-align:center;">'
								+ obj.name
								+ '</td><td style="text-align:center;" onmouseover=showChart(1) onmouseout=hideChart()>'
								+ obj.zeroCount + '</td><td style="text-align:center;" onmouseover=showChart(2) onmouseout=hideChart()>'
								+ obj.outCount + '</td><td style="text-align:center;" onmouseover=showChart(3) onmouseout=hideChart()>'
								+ obj.mistakeCount + '</td><td style="text-align:center;" onmouseover=showChart(4) onmouseout=hideChart()>'
								+ obj.avgScore + '</td><td style="text-align:center;" onmouseover=showChart(5) onmouseout=hideChart()>'
								+ obj.stddev + '</td><td style="text-align:center;" onmouseover=showChart(6) onmouseout=hideChart()>'
								+ obj.maxScore + '</td><td style="text-align:center;" onmouseover=showChart(7) onmouseout=hideChart()>'
								+ obj.minScore + '</td><td style="text-align:center;" onmouseover=showChart(8) onmouseout=hideChart()>'
								+ obj.avgSpent + '</td></tr>');
			});
		});
	}
	
	function showChart(num){
		$("#qualityView").css("display", "block");
		var markStage = $('#ms').val();
		var blockId = $('#block').val();
		var labs = [];
		var d = [];
		var tl="";
		$.post('${ctx}/topicmarker/marker/qualitybyblock',{markStage : markStage,blockId:blockId},function(res) {
			$.each(res, function(n, obj) {
				labs.push(obj.name);
				if(num==1){
					tl="零分总量";
					d.push(obj.zeroCount);
				}else if(num==2){
					tl="满分总量";
					d.push(obj.outCount);
				}else if(num==3){
					tl="误差总量";
					d.push(obj.mistakeCount);
				}else if(num==4){
					tl="平均分";
					d.push(obj.avgScore);
				}else if(num==5){
					tl="标准差";
					d.push(obj.stddev);
				}else if(num==6){
					tl="最高分";
					d.push(obj.maxScore);
				}else if(num==7){
					tl="最低分";
					d.push(obj.minScore);
				}else{
					tl="平均耗时";
					d.push(obj.avgSpent);
				}
			});
			var chart;
			chart = new Highcharts.Chart({  
		        chart: {  
		            renderTo: 'qualityView',  
		            type: 'column', 
		            backgroundColor:'#F5F5F5',
		            events: {  
		              load: function() {      
		                  var series = this.series[0];  
		                  series.setData(d);  
		              }  
		          }  
		        },  
		        title: {  
		            text: '<b>'+tl+'</b>',
		            style: {  
	                     color:'#263C53'  
	                    } 
		        },  
		        xAxis: {  
		            categories: labs ,
		            style: {
	                     color:'#263C53'
	                     }
		        },  
		        credits: {
	            	 text: 'qmth.com.cn',
	            	 href: 'http://www.qmth.com.cn'
	        	 },
		        yAxis: {  
		            min: 0,  
		            title: {  
		                text: '数量',
			            style: {
		                     color:'#777777'  
		                     }  
		            },  
		            stackLabels: {  
		                enabled: true,  
		                style: {  
		                    fontWeight: 'bold',  
		                    color: (Highcharts.theme && Highcharts.theme.textColor) || '#777777'  
		                }  
		            }  
		        },  
		        legend: {  
		            align: 'right',  
		            x: -100,  
		            verticalAlign: 'bottom',  
		            y: 20,  
		            floating: true,  
		            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',  
		            borderColor: '#CCC',  
		            borderWidth: 1,  
		            shadow: false  
		        },  
		        tooltip: {  
		            formatter: function() {  
		                return '<b>'+ this.y +'</b><br/>';  
		            }  
		        },  
		        plotOptions: {  
		            column: {  
		                stacking: 'normal',  
		                dataLabels: {  
		                    enabled: true,  
		                    color: '#777777'  
		                }  
		            },
		            series: {  
		                colorByPoint: true
		            } 
		        },  
		        series: [{  
		            name: '质量分析',  
		            data: [5, 3, 4] ,
		            color: 'white'
		        }]
		    });
		});
	}
	
	function hideChart(){
		$("#qualityView").html("");
		//$("#qualityView").attr("style", "display:none;");
		$("#qualityView").css("display", "none");  
	}
</script>
</html>