xieshengjie
/
gdhb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
							<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/pages/includes/taglibs.jsp"%>
<head>
<script type="text/ecmascript" src="<%=request.getContextPath() %>/resource/plugin/jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/ecmascript" src="<%=request.getContextPath() %>/resource/plugin/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="<%=request.getContextPath()%>/resource/js/system/jqdatagridpagenum.js"></script>
<script src="<%=request.getContextPath()%>/resource/js/datePicker/WdatePicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resource/plugin/jqueryui/css/custom-theme/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/resource/plugin/jqgrid/css/ui.jqgrid.css" />
<script	src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts.src.js"	type="text/javascript"></script>
<script	src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts-more.js">	</script>
<script	src="<%=request.getContextPath()%>/resource/js/highcharts/modules/solid-gauge.src.js"></script>
<link rel="stylesheet" type="text/css"	href="<%=request.getContextPath()%>/resource/plugin/highslide/highslide.css" />
<script type="text/javascript"	src="<%=request.getContextPath()%>/resource/plugin/highslide/highslide-with-html.js"></script>

<style type="text/css">

a.url {      /* 统一设置所以样式 */
     font-family:Arial;
     font-size:12px;
     text-align:center;
     margin:3px;
}
a:link.url ,a:visited.url{  /* 超链接正常状态、被访问过的样式 */
    color:#000000;
    padding:4px 10px 4px 10px;
    background-color:#f1f1f1;
    text-decoration:none;
 
    border-top:1px solid #EEEEEE; /* 边框实现阴影效果 */
    border-left:1px solid #EEEEEE;
    border-bottom:1px solid #717171;
    border-right:1px solid #717171;
}
a:hover.url{       /* 鼠标指针经过时的超链接 */
    color:#821818;     /* 改变文字颜色 */
    padding:5px 8px 3px 12px;  /* 改变文字位置 */
    background-color:#e2c4c9;  /* 改变背景色 */
    border-top:1px solid #717171; /* 边框变换，实现“按下去”的效果 */
    border-left:1px solid #717171;
    border-bottom:1px solid #EEEEEE;
    border-right:1px solid #EEEEEE;
}

fieldset legend {  
    color:#302A2A;  
    font: bold 16px/2 Verdana, Geneva, sans-serif;  
    font-weight: bold;  
    text-align: left;  
    text-shadow: 2px 2px 2px rgb(88, 126, 156);  
}  
</style>
<script type="text/javascript">
hs.graphicsDir = '<%=request.getContextPath()%>/resource/plugin/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';

var options;
var chart;

var windfarm = '<s:property value="windfarm"/>'

function thisPage() {
	$("#f1").attr("action", "curvedeviationmonthindex.action").submit();
}

function queryClear() {
	$("#windfarm").val("");

	$("#beginDate").val("");

}
function queryData() {
	var windfarm = $("#windfarm").val();
	var year = $("#year").val();
	var month = $("#month").val();

	if ("" == windfarm) {
		alert("请选择风场!");
	} else if ("" == year) {
		alert("请选择年份!");
	} else if ("" == month) {
		alert("请选择月份!");
	} else {

		/*var temp = "curvedeviationmonthlist.action?windfarm=" + windfarm + "&year="
				+ year + "&month=" + month;
		var url = encodeURI(encodeURI(temp));

		$("#gridTable").setGridParam({url:url}).trigger("reloadGrid"); */
			$("#gridTable").jqGrid('GridUnload');	
			showJqGrid();	
	}
}

	function toExcel() {
		var windfarm = $("#windfarm").val();
			var year = $("#year").val();
			var month = $("#month").val();
		
			if ("" == windfarm) {
				alert("请选择风场!");
			} else if ("" == year) {
				alert("请选择年份!");
			} else if ("" == month) {
				alert("请选择月份!");
			} else {
		
			var temp = "curveMonthExcel.action?windfarm=" + windfarm + "&year="
						+ year + "&month=" + month;
			var url = encodeURI(encodeURI(temp));

			$('#toexcel').attr('href',url); 
			}
		}	

$(document).ready(function () {
showJqGrid();

options = {
		chart : {
			renderTo : 'container',
			type : 'spline'
		},
		title : {
			text : '曲线偏差率排行'
		},

		xAxis : {
			categories : [],
			labels : {
				rotation : -45,
				align : 'right',
				style : {
					fontSize : '13px',
					fontFamily : 'Verdana, sans-serif'
				}
			}
		},
		yAxis : {
			title : {
				text : '功率(MW)'
			}
		},
		tooltip : {
			headerFormat : '<b>{series.name}</b><br/>',
			pointFormat : ' {point.y}MW'
		},
		plotOptions : {
			spline : {
				marker : {
					enable : false
				}
			}
		},
		series: [{
                name: '',
                data: []
            }, {
                name: '',
                data: []
            }]
	}
});

function showJqGrid() {

var windfarm = $("#windfarm").val();
	var year = $("#year").val();
	var month = $("#month").val();
	var temp = "curvedeviationmonthlist.action?windfarm=" + windfarm + "&year="
				+ year + "&month=" + month;
	var url = encodeURI(encodeURI(temp));
var id = 'gridTable';


var datatype = 'json';

var colNames = ['风机','编号', '实际与保证偏差率(%)','实际与最优偏差率(%)','最优与保证偏差率(%)','环比','同比','比标杆风机'];

var colModel = [

{ name: 'windturbineid', index: 'windturbineid', width: 200, align: 'center',hidden : true},
{ name: 'code', index: 'code', width: 80, align: 'center'},
{ name: 'deviationrate2', index: 'deviationrate2', width: 200, align: 'center'},
{ name: 'deviationrate1', index: 'deviationrate1', width: 200, align: 'center'},
{ name: 'deviationrate3', index: 'deviationrate3', width: 200, align: 'center'},
{ name: 'monthdeviationrate', index: 'monthdeviationrate', width: 200, align: 'center'},
{ name: 'yeardeviationrate', index: 'yeardeviationrate', width: 200, align: 'center'},
{ name: 'standarddeviationrate', index: 'standarddeviationrate', width: 200, align: 'center'}

];

var caption = '月曲线偏差率排行榜';


var sortname = 'deviationrate2';

var gridPagerID ='gridPager';

var sortorder='desc';

var height='auto';

var width='auto';


var rownumbers=true;

var multiselect=false;

myJqGrid(id, url, datatype, colNames, colModel, caption,  sortname, gridPagerID,sortorder,height,width,
multiselect,rownumbers);
}
function detail(windturbineid, type) {

	chartAjax(windturbineid,type);
}

function showDiv1() {
var hc = $("#container");

//	return hs.htmlExpand(obj, {
	return  hs.htmlExpand(hc[0], {
		contentId : 'showDiv2',
		width : 1370,
		height : 500,
		align : 'center',
		headingText : '月曲线偏差率排行'
	});
}

function chartAjax(windturbineid,type) {

	
	var year=$("#year").val();
	var month=$("#month").val();
	var url = "";
	if (type == 'tb') {
		url = "curvemonthchatAjaxtb.action?windturbineid=" + windturbineid
				+"&year="+year+"&month="+month+"&type="+type;

	} else if (type == 'hb') {
		url = "curvemonthchatAjaxhb.action?windturbineid=" + windturbineid
				+"&year="+year+"&month="+month+"&type="+type;

	} else if (type == 'bg') {
		url = "curvemonthchatAjaxbg.action?windturbineid=" + windturbineid
				+"&year="+year+"&month="+month+"&type="+type;
	} else {
		url = "curvemonthchatAjax.action?windturbineid=" + windturbineid
				+"&year="+year+"&month="+month+"&type="+type;

	}

	$.ajax( {
		url : url,
		type : "post",
		cache : false,
		dataType : "json",
		data : {},
		ifModified : false,
		success : function(result) {
			var sj = [];
			var zy = [];
			var fu = [];
			var name1=result["name1"];
			var name2=result["name2"];
			$.each(result["datas"], function(m, obj) {
				if (obj.value1 != null) {
					fu.push(parseFloat(obj.value1));
				}
				if (obj.value2 != null) {
					sj.push(parseFloat(obj.value2));
				}
				if (obj.value3 != null) {
					zy.push(parseFloat(obj.value3));
				}

			});

				options.series[0].data = sj;
				options.series[0].name = name1;
				options.series[1].data = zy;
				options.series[1].name = name2;
				options.xAxis.categories = fu;
				
				chart = new Highcharts.Chart(options);

			//alert(options.xAxis.categories);

	}
	});
	
showDiv1();
}
</script>

</head>
<body>

<form action="curveindex.action" method="post" id="f1">

<br/>
<fieldset style="height: 50px" id="fst">
    <legend class="item_Name">查询条件</legend>
			<table width="1000px" cellpadding="0" cellspacing="0" class="dataform">
				<tr>
					<th width="5%" class="item_Name">
						风场：
					</th>
					<td width="20%">
						<s:select list="wps" cssStyle="width:150px" listKey="id"
							listValue="name" id="windfarm" name="windfarm"  onchange="queryData()"></s:select>
					</td>
					<th width="5%" class="item_Name">
						年份：
					</th>
					<td width="20%" style="text-align: left">
						<s:textfield cssClass="Wdate" cssStyle="width:150px"
							onFocus="WdatePicker({dateFmt:'yyyy',isShowWeek:true,readOnly:true})"
							id="year" name="year" title="年份"  onchange="queryData()"/>
					</td>
					<th width="5%" class="item_Name">
						月份：
					</th>
					<td width="20%" style="text-align: left">
						<s:textfield cssClass="Wdate" cssStyle="width:150px"
							onFocus="WdatePicker({dateFmt:'MM',isShowWeek:true,readOnly:true})"
							id="month" name="month" title="月份"  onchange="queryData()"/>
					</td>
					<td width="200px" style="text-align: right">
			
						<a href="#" onclick="javascript:toExcel();" id="toexcel" class="url">导出</a>	
					</td>
				</tr>
			</table>
  </fieldset>
<br/>

<table id='gridTable' >

</table>

<div id='gridPager'></div>

<div class="highslide-html-content" id="showDiv2" style="height: 800">
			<div class="highslide-header">
				<ul>
					<li class="highslide-move">
						<a href="#" onclick="return false">Move</a>
					</li>
					<li class="highslide-close">
						<a href="#" onclick="return hs.close(this)"></a>
					</li>
				</ul>
			</div>
			<div id="container"
				style="background-color: '#ffffff'; vertical-align: middle; width: 100%; height: 100%"></div>
</div>
</form>

</body>