wuhb
/
oa


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
							<%@ page language="java" contentType="text/html;charset=GBK" pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title>合同报表</title>
<link href="/shares/js/yw/master1/liger/skins/ynet/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/shares/js/common.js"></script> 
<script type="text/javascript" src="/shares/js/constant.js"></script>
<link href="/shares/css/yw/master1/reset.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/shares/datePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/shares/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/shares/highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="/shares/highcharts/js/modules/exporting.js"></script>
<script type="text/javascript" src="/shares/highcharts/js/modules/data.js"></script>

<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->
<!-- <script src="http://code.highcharts.com/highcharts.js"></script> -->


<link href="/shares/css/yw/master1/reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	overflow: hidden;
	background: #fff;
}
.default_search li{height:25px}
.default_search ul{display:inline;width:250px;float:left;}
.default_search li.text{float:left;width:151px;padding-top:5px;}
.default_search li.title{float:left;width:90px;padding-top:9px;text-align: right;padding-left: 5px; font-size: 13px;font-weight: normal;}
.search-button {padding-top:5px;float:left;}
.default_search li input[type='text']{width:100px;background:#fff; height:18px;border-style: inherit; line-height: 18px}
.default_search li select{height:20px;border-style: inherit; line-height: 21px; }
</style>
<script type="text/javascript">
	$(function ()
        {
        	loadTypeTree("selectbutton",{type:"dept",tab:"1,2",backId:"dept_name_id",backName:"dept_name"});
        	createQuarterChartForYear();
        }); 


	function createQuarterChartForYear() {

		var seriesDate = new Array();
		var sign_year = $("#sign_year").val();
		if("" == sign_year){
			document.getElementById("msg").innerHTML="<font color='red'>&nbsp;请选择年份！</font>";
			return;
		}else{
			document.getElementById("msg").innerHTML="";
		}

		$.ajax({
			type : "POST",
			url : "contractMoneyStat.do?task=getChartDataForYear&sign_year="
					+ sign_year,
			dataType : 'json',
			async : false,
			success : function(data) {
				// 返回如下json 格式数据
				//  {"data":[
				//      { "mouth": "1", "val":"3"},
				//      { "mouth": "2", "val":"6"},
				//      { "mouth": "3", "val":"8"}
				//]}
				//对数据进行加工处理，也可以按你自己的需求进行处理
				if (data != null && data.length != 0) {
					for (var i = 0; i < data.length; i++) {
						//此处楼主需要显示的X轴为"X月份"这么个字符串，后台取得的数据而仅仅为数字，对此进行加工
						// 	                    quarter.push(data[i].contract_quarter + "季度");
						//也可以在对数据的处理放在highchart 中进行处理。
						// 	                    quarter_money.push(parseFloat(data[i].total_money));

						seriesDate[i] = new Array(data[i].contract_quarter
								+ "季度", parseFloat(data[i].total_money));
					}
				}

				//若后台返回的数据仅仅是json 样子的的字符串
				//那需要将其格式化
				//然后即可对数据进行类似操作。
				var dataTmp = eval(data);
				/*
				
				...
				
				 */
			}

		});
		// 		
		// 		
		// 		downloadSVG: Download SVG vector image,
		// 		drillUpText: Back to {series.name}

		$('#container').highcharts({
			chart : {
				plotBackgroundColor : null,
				plotBorderWidth : null,
				plotShadow : false
			},
			lang : {
				printChart : '打印图表',
				downloadJPEG : '下载JPEG图片',
				downloadPDF : '下载PDF文件',
				downloadPNG : '下载PNG图片',
				downloadSVG : '下载SVG矢量图'
			},
			credits : {
				enabled : false
			},
			title : {
				text : $("#sign_year").val() + '年度季度合同额报表',
				style: {
					 fontSize: "28px"
		            }
			},
			tooltip : {
				pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions : {
				pie : {
					allowPointSelect : true,
					cursor : 'pointer',
					dataLabels : {
						enabled : true,
						color : '#000000',
						connectorColor : '#000000',
						format : '<b>{point.name}</b>: {point.percentage:.1f} %'
					}
				}
			},
			series : [ {
				type : 'pie',
				name : '占比',
				data : seriesDate

			} ]
		});

	}
	
	
	function createQuarterChartForDept() {
		var dept_name_id = $("#dept_name_id").val();
		var name_ = [];
		var price_ = [];
		$.ajax({
			type : "POST",
			url : "contractMoneyStat.do?task=getChartDataForDept&dept_name_id="
					+ dept_name_id,
			dataType : 'json',
			async : false,
			success : function(data) {
				var j = 0;
				if (data != null && data.length != 0) {
					for (var i = 0; i < data.length; i++) {
						if(data[i].GROUPNAME != undefined){
							name_[j] = data[i].GROUPNAME;
							price_[j] = data[i].contract_money;
							j++;
						}
					}
				}
			}

		});
		
		
		$('#container').highcharts({
	        chart: {
	            type: 'column'
	        },
	        lang : {
				printChart : '打印图表',
				downloadJPEG : '下载JPEG图片',
				downloadPDF : '下载PDF文件',
				downloadPNG : '下载PNG图片',
				downloadSVG : '下载SVG矢量图'
			},
	        title: {
	            text: "部门合同报表",
            	style: {
					 fontSize: "28px"
		            }
	        },
	        credits : {
				enabled : false
			},
			xAxis: {
	            categories: name_
	        },
	        yAxis: {
	            min: 0,
	            title: {
	                text: '数值'
	            }
	        },
	        tooltip: {
	            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	                '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
	            footerFormat: '</table>',
	            shared: true,
	            useHTML: true
	        },
	        plotOptions: {
	            column: {
	                pointPadding: 0.2,
	                borderWidth: 0
	            }
	        },
	        series: [{
	            name: '金额',
	            data: price_

	        }]
	    });


	}
	
	function changeQuarterChart(type){
		document.getElementById("container").innerHTML="";
		if(type == '0'){
			document.getElementById("quarterChartForYear").style.display="";
			document.getElementById("quarterChartForDept").style.display="none";
			createQuarterChartForYear();
		}else{
			document.getElementById("quarterChartForYear").style.display="none";
			document.getElementById("quarterChartForDept").style.display="";
			createQuarterChartForDept();
		}
	}
</script>
</head>
<body>
	<div class="s_title b10 f6">
		<img src="/shares/images/master1/fqlc.png" width="27" height="26" /> 报表分析
	</div>
	<div class="container-layout" style="margin-top: 50px;">
		<div class="lc_b_div">
			<div class="lc_btn">
				<a href="#" class="f8" onclick="changeQuarterChart('0');" title="季度合同额报表"> 
				<img src="/shares/images/master1/lc_ico.png" width="19" height="21" /> 季度合同额报表
				</a>
			</div>
			<div class="lc_btn">
				<a href="#" class="f8" onclick="changeQuarterChart('1');" title="部门合同报表"> 
				<img src="/shares/images/master1/lc_ico.png" width="19" height="21" /> 部门合同报表
				</a>
			</div>
		</div>
		<div id="quarterChartForYear" class="default_search" style="margin: 0;">
			<ul class="list_search" >
				<li class="title" style="width: 100px;font-family:'新宋体';font-size:9pt;">年度：</li>
				<li class="text" style="width: 135px;"><input type="text" class="Wdate" name="sign_year" id="sign_year" onclick="WdatePicker({dateFmt:'yyyy'})"
						value="${requestScope.currentYear }"></li>
			</ul>
			<div style="float: left;">
				<input type="button" class="l-button" value="生成报表" onclick="createQuarterChartForYear()" style="width: 80px;" />
			</div>
			<div id="msg" style="float: left;"></div>
		</div>
		<div id="quarterChartForDept" class="default_search" style="margin: 0;display: none;">
			<ul class="list_search"style="width: 470px;">
				<li class="title" style="width: 100px;font-family:'新宋体';font-size:9pt;">部门：</li>
				<li class="text" style="width: 365px;padding-top: 0px;">
					<input type="text" name="dept_name" id="dept_name" value="" readonly="readonly" />
					<input type="button" class="l-button"  id="selectbutton" value="选择部门" style="width: 80px;" />
					<input type="hidden" name="dept_name_id" id="dept_name_id"/>
					&nbsp;&nbsp;
					<input type="button" class="l-button" value="生成报表" onclick="createQuarterChartForDept()" style="width: 80px;margin-left: 50px;" />
				</li>
			</ul>
			
		</div>
		<div id="container" style="min-width: 700px; height: 400px"></div>
	</div>
</body>
</html>