xieshengjie
/
gdhb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
							<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/pages/includes/taglibs.jsp" %>
<head>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery-1.8.3.js"></script>
 <script type="text/ecmascript" src="<%=request.getContextPath() %>/resource/plugin/jqgrid/js/jquery.jqGrid.min.js"></script>
 <script type="text/ecmascript" src="<%=request.getContextPath() %>/pages/health/wtcurve.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 type="text/ecmascript" src="<%=request.getContextPath()%>/resource/plugin/jqueryui/js/jquery-ui-1.9.2.custom.min.js"></script>  
<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>
<script	src="<%=request.getContextPath()%>/resource/js/echarts/echarts-all.js"></script>
<style type="text/css">

a{      /* 统一设置所以样式 */
     font-family:Arial;
     font-size:12px;
     text-align:center;
     margin:3px;
}
a:link,a:visited{  /* 超链接正常状态、被访问过的样式 */
    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{       /* 鼠标指针经过时的超链接 */
    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">
	function displaybuttons(cellvalue, options, rawObject) {

	var detail = "<input type='button' value='曲线趋势' onclick=curvefindByIds('"
	+ rawObject.wtId + "','" 
	+ rawObject.rd + "')>";
	 
	 
	/* var history = "<input type='button' value='散点趋势' onclick=scatterfindByIds('"
		+ rawObject.wtId + "','" + rawObject.rd + "')>";
	  */
	 
	return "&nbsp;&nbsp;&nbsp;\t" + detail + "&nbsp;&nbsp;&nbsp;\t"
	/* + history+ "&nbsp;&nbsp;&nbsp;\t" */;
	};

		
	function queryData(){
	
		$("#gridTable").jqGrid('GridUnload');	
		showJqGrid();	

	}
	
var options;
var chart;	
$(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 wpId=$("#wpId").find("option:selected").val(); 
var recodedate=$("#recodedate").val(); 
		
var id = 'gridTable';

var url = '<%=request.getContextPath() %>/wtcurve/wtcurvelist.action?wpId='+wpId
					 +"&recodedate="+recodedate;

var datatype = 'json';

var colNames = ['风机', '日期','3-5米曲线偏差率','5-11米曲线偏差率','11-25米曲线偏差率','操作'];

var colModel = [


{ name: 'wtId', index: 'wtId', width: 250, align: 'center'},
{ name: 'rd', index: 'rd', width: 250, align: 'center'},
{ name: 'qxpc1', index: 'qxpc1', width: 250, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'},
{ name: 'qxpc2', index: 'qxpc2', width: 250, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'},
{ name: 'qxpc3', index: 'qxpc3', width: 250, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'},
{ name: 'op', index: 'op', width: 230, align: 'center',formatter:displaybuttons}
];

var caption = '单机区间曲线偏差率';


var sortname = 'wtId';

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 curvefindByIds(wtId,recodedate){
	
	curveChartAjax(wtId,recodedate);

 
	$("#chartContainer1").dialog({
             title:"曲线趋势",
	      resizable: false,
	      width:1390,
	      height:805,
	      modal: true,
	      beforeClose: function (evt, ui) {  
	    	  //    	clearInterval(resshData);
	        }  
       });
	
	
}

function scatterfindByIds(wtId,recodedate){
	
	$("#chartContainer2").dialog({
        title:"散点趋势",
     resizable: false,
     width:1390,
     height:805,
     modal: true,
     beforeClose: function (evt, ui) {  
   	  //    	clearInterval(resshData);
       }  
  });
	
	scatterChartAjax(wtId,recodedate);

 
}

function curveChartAjax(wtId,recodedate) {
	$("#container").html();
	var type="sjbz";
	var url ="../charts/curvechatAjax.action?windturbineid=" + wtId
	+ "&beginDate=" + recodedate + "&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=wtId+"_"+result["name1"];
			var name2=wtId+"_"+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);

	}
	});

}


</script>
<style type="text/css">


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>
</head>
<body>

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

<fieldset style="height: 60px" id="fst">
    <legend  class="item_Name">查询条件</legend>
   <table width="1000px" cellpadding="0" cellspacing="0" class="dataform">
	<tr>
		
		<th width="100px" class="item_Name">
			风场:
		</th>
		<td width="100px" class="item_Name">
			<s:select  list="wps" cssStyle="width:100px" listKey="id" listValue="name" id="wpId" name="wpId"   onchange="javascript:queryData();"></s:select>
		</td>
	
		<th width="100px" class="item_Name">
			日期
		</th>
		<td width="100px" style="text-align: left">
			<s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})" 
			id="recodedate" name="recodedate" title="日期" onchange="javascript:queryData();"/>
		</td>
		

	</tr>
</table>
  </fieldset>

<br/>

<table id='gridTable' >

</table>

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


</form>


<div style="width:1380px;height:600px;display:none;align:center;valign:middle"  id="chartContainer1">
<div   id="container">

</div>
</div>

<div style="width:1380px;height:800px;display:none;align:center;valign:middle"  id="chartContainer2">
	<div   id="container2" style="width:1350px;height: 700px; border: 1px solid #ccc; padding: 10px;">
	
	</div>
</div>


<script type="text/javascript">
// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
// Step:3 echarts和zrender被echarts-plain.js写入为全局接口
		var	myChart = echarts.init(document.getElementById('container2'));
		var	 option = {
			title : {
				text : '风机功率风速排布情况'
			},
			tooltip : {
				trigger : 'axis',
				showDelay : 0,
				formatter : function(params) {
					if (params.value.length > 0) {
						return params.seriesName + ' :<br/>' + params.value[0] + 'kw ';
					} else {
						return params.seriesName + ' :<br/>' + params.value + 'kw ';
					}
				},
				axisPointer : {
					show : true,
					type : 'cross',
					lineStyle : {
						type : 'dashed',
						width : 1
					}
				}
			},
			legend : {
				data : [ '功率' ]
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataZoom : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			xAxis : [ {
				type : 'value',
				scale : true,
				splitNumber:25,
				axisLabel : {
					formatter : '{value} m/s'
				}
			} ],
			yAxis : [ {
				type : 'value',
				scale : true,
				axisLabel : {
					formatter : '{value} kw'
				}
			} ],
			series : [ {
				name : '功率',
				type : 'scatter',
				large : true,
				data : [],
				markPoint : {
					data : [ {
						type : 'max',
						name : '最大值'
					}, {
						type : 'min',
						name : '最小值'
					} ]
				},
				markLine : {
					data : [ {
						type : 'average',
						name : '平均值'
					} ]
				}
			},	
			{
				name : '拟合功率',
				type : 'line' ,
				color:['black'],
				data : []
				}
			
		]};
	/********************************************************************************/

function scatterChartAjax(wtId,recodedate) {


	var url = "/wtcurve/scatterWtAjax.action?wtId=" + wtId + "&recodedate=" + recodedate;
		$.ajax( {
			url : url,
			type : "post",
			cache : false,
			dataType : "json",
			async : false,
			data : {},
			ifModified : false,
			success : function(result) {
	
				// 使用刚指定的配置项和数据显示图表。
			option.series[0].data = result["scatter"];
			option.series[1].data = result["line"];
			myChart.setOption(option);
	
			//options1.series[0].data = result;
	
			//chart1 = new Highcharts.Chart(options1);
	
		}
	});

}

</script>
</body>