Yezb
/
ss_new_ui_skin_and_page


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
							<html lang="cn">
<head>
<meta charset="UTF-8">
<js.ss file="/ss/growHeight.js"/>
<js.ss file="/ss/jquery/jquery.ellipsis.js"/>
<js.ss file="/ss/datePicker/WdatePicker.js"/>
<js.ss file="/ss/edit.js"/>
<js.ss file="/ss/echarts/echarts.js"/>
<js.ss file="/ss/myEcharts.js"/>
<style>
	#big_pie_kqtj${sybjId}> .ss-placeholder-child,
	#small_pie > .ss-placeholder-child {
		background: transparent;
	}
	#big_pie_kqtj${sybjId}
	{
		display: block;
		position: relative;
		width: calc(100% - 60px);
		margin-left: 5px;
		height: calc(100% - 7px);
		overflow-y: hidden !important;
	}
	#big_pie_kqtj${sybjId}
	.pie {
		position: absolute !important;
		height: 100%;
		width: 100%;
	}
</style>
</head>

<body class="drawer drawer--right" style="background-color: #f2f2f2;overflow-x: hidden;">
<div id="sybj">
	<div class="plugin-component-div">
		<div id="bt" class="plugin-title hLine-highlightBlod" style="margin-bottom: 5px;">
			<span refreshClass="todoPlugin-loadingIcon" class="img-header plugin-icon icon-chart"></span>
			<span style="vertical-align: middle;">在校生人数统计(点名)</span>
			<span style="float: right;margin-right: 6px;">
				<span class="icon-setHelpButton" style="position: relative;top: 12px;display: inline-block;"></span>
				<span class="icon-helpButton" style="position: relative;top: 12px;"></span>
			</span>
		</div>
		<div id="sybjBody" style="height: calc(100% - 50px)!important;width: 100%;box-sizing: border-box;">
			<div id="sybjBodyInner" style="height: 100%;">
				<div class="smallScrollbar" id="bj${sybjId}" style="height: 100%;">
					<div class="graph-list scrollbar">
						<div style="height:calc(50% - 1px);border-bottom: 1px solid #ccc;">
							<div id="big_pie_kqtj${sybjId}" style="height:100%;float: left;overflow:hidden;"></div>
							<div id="bar_bjdmTj${sybjId}" style="width:50px;height:100%;float: right;margin-right: 5px;"></div>
						</div>
						<div id="big_pie_kqtj${sybjId}_zxt" style="height:50%;"></div>
					</div>
				</div>
			</div>
		</div>
		<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=" onload="initJs${sybjId}(this)"/>
	</div>
</div>
<script>
	var initJs${sybjId}=function(img){
console.log("dmzxsHomep.ss.jsp");
		var color = ['#6c9fd3', "#d14a61"];
		var bigDom${sybjId} = $("#bj${sybjId}").find("div#big_pie_kqtj${sybjId}")[0];
		initPie_kqtj();
		var count${sybjId} = 0;

		function initPie_kqtj(val) {
			var vals = val || {};
			$.ajax({
				type: "post",
				url: "<serv.ss name='dmzxsHomep_refresh'/>",	// :"kqtj"。Lin
				data: vals,
				dataType: "json",
				success: function(res) {
					count${sybjId} = 0; //防止数据叠加
					var dtkqtj = res.dtkqtj;
					for (var i = 0; i < res.dtkqtj.length; i++) {
						count${sybjId} += parseInt(dtkqtj[i].value);
					}
					var obj = {
						id: bigDom${sybjId}.id,
						//name: '考勤情况',
						dataList: dtkqtj,
						clickFunction: openDetail_kqtj,
						optionObj: optionPie
					};
					//饼状图
					MyECharts.init(obj);
					//右边柱状图
					initBar${sybjId}(res);
					//加载折线图
					zxt${sybjId}(res.zxt);
				}
			});
		}

		function initBar${sybjId}(res) {
			var zs = res.zs;
			var dmzs = res.dmzs;
			var wdmzs = res.wdmbj;
			var objDmzs = {
				value: dmzs,
				dmType: "ydm"
			}
			var objWdmzs = {
				value: wdmzs,
				dmType: "wdm"
			}
			barOption.yAxis.max = zs;
			barOption.series[0].data[0] = objDmzs;
			barOption.series[1].data[0] = objWdmzs;
			var targetDOM = document.getElementById("bar_bjdmTj${sybjId}");
			var myChart = echarts.init(targetDOM);
			myChart.on("click", clickBarClick);
			myChart.setOption(barOption, true);
		}

		function clickBarClick(param) {
			var data = param.data;
<%-- 改，去掉 bjdmTj_tjtz("统计跳转") 空服务。Lin
			var url = '@service{name:"bjdmTj_tjtz",dest:"bjdm_bm",show:"wdDialog",param:{dmType:"wdVal{dmType}"},width:880,height:600}@'; --%>
			var url = '<serv.ss dlg="true" dest="dmzxsHomep_bm" parm="{dmType:&quot;ssVal{dmType}&quot;}" width="880" height="600"/>';
			url = wd.display.replaceDynamicParam(url, data);
			eval(url);
		}

		var barOption = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				y: 0,
				left: '-3%',
				right: '6%',
				bottom: '5%',
				x2: 2,
				containLabel: true
			},
			yAxis: {
				type: 'value',
				show: false,
				max: 320 //设置最大值
			},
			xAxis: {
				type: 'category',
				show: false
			},
			series: [{
				name: '已点名班级',
				stack:'总人数',
				type: 'bar',
				data: [120],
				barWidth: 30,
				z: 10,
				itemStyle: {
					normal: {
						color: '#6c9fd3'
					}
				},
				label: {
					normal: {
						show: true
					}
				},
			},{
				name: '未点名班级',
				stack:'总人数',
				type: 'bar',
				z: 1,
				data: [180],
				barWidth: 30,
				itemStyle: {
					normal: {
						color: '#cccccc'
					}
				},
				label: {
					normal: {
						show: true
					}
				},
			}]
		};

		function formatter(param) {
			var bzxStr="";
			var zxStr="";
			var zrs=count${sybjId};
			if(param.data.tip=='qq'){
				bzxStr=" 不在校人数 : "+param.value;
				zxStr=" <br/>在校人数 ："+(zrs-param.value);
			}else{
				bzxStr=" 不在校人数 : "+(zrs-param.value);
				zxStr=" <br/>在校人数 ："+param.value;
			}
			showStr=bzxStr+zxStr;
			return  showStr;
		}

		var optionPie = {
			tooltip: {
				trigger: 'item',
				formatter: formatter,
				position: function(point, params, dom, rect, size) {
					var viewSize=size.viewSize;
					var width=viewSize[0];
					var height=viewSize[1];
					var contentSize=size.contentSize;
					var contentWidth=contentSize[0];
					var contentHeigh=contentSize[1];
					var mouseX=point[0];
					var mouseY=point[1];
					var x=0;
					var y=0;
					if((mouseY+contentHeigh)<=height){
						//显示在左下角
						x=mouseX+10;
						y=mouseY;
					}else{
						//显示在右上角
						x=mouseX+10;
						y=mouseY-contentHeigh;
						if(y<=0){
							y=0;
						}
					}
					return [x, y];
				}
			}
		}

		var option = {
			color: color,
			tooltip: {
				trigger: 'axis',
				formatter: function(param) {
		//		return param[0].axisValueLabel + "<br/>总人数 :" + count${sybjId} + "<br/>" + param[0].seriesName + " : " + param[0].value;
					return param[0].axisValueLabel +"<br/>" + param[0].seriesName + " : " + param[0].value + "<br/>在校人数 : " + param[0].data.zx ;
				}
			},
			grid: {
				top: '38%',
				left: '10%',
				bottom: '7%',
				right: '10%',
				containLabel: true,
				tooltip: {
					axisPointer: {
						label: {
							formatter: function(param) {
								return "第" + param.value + "周 ";
							}
						}
					}
				}
			},
			xAxis: {
				type: 'category',
				data: [],
				name: '周'
			},
			yAxis: {
				type: 'value',
				splitLine: {
					show: false
				},
				name: '不在校人数',
				axisLabel: {
					show: false
				},
				nameTextStyle: {
					padding: [0, 0, 0, 30]
				}
			},
			series: [{
				name: '不在校人数',
				type: 'bar',
				data: [1, -2, 2, 5, 3, 2, 5]
			}]
		};

		function zxt${sybjId}(data) {
			var xAxisData = [];
			var zxrsArray = [];
			var kkrsArray = [];
			for (var i in data) {
				xAxisData.push(data[i].zc);
				kkrsArray.push({value:data[i].bzx,zx:data[i].zx,bzx:data[i].bzx})
				/*kkrsArray.push(data[i].bzx);*/
			}
			option.xAxis.data = xAxisData;
			option.series[0].data = kkrsArray;
			var targetDOM = document.getElementById("big_pie_kqtj${sybjId}_zxt");
			var myChart = echarts.init(targetDOM);
			myChart.setOption(option, true);
		}

		function openDetail_kqtj(param) {
			var tip = param.data.tip;
			var json = JSON.parse('{"tip":"' + encodeURI(tip) + '"}');
<%-- 改，去掉 tjtz("统计跳转") 空服务。Lin
			var url = '@service{name:"tjtz",dest:"bmtj",show:"wdDialog",param:{tip:"wdVal{tip}"},width:880,height:600}@'; --%>
			var url = '<serv.ss dlg="true" dest="dmzxsHomep_bmtj" parm="{tip:&quot;ssVal{tip}&quot;}" width="880" height="600"/>';
			url = wd.display.replaceDynamicParam(url, json);
			eval(url);
		}
		//3小时刷新一下统计图
		//var intervalId = window.setInterval(initPie_kqtj, 1000 * 60 * 60 * 3);
		}
</script>
</body>
</html>