xieshengjie
/
gdhb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
							<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/pages/includes/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<%--<meta http-equiv="X-UA-Compatible" content="IE=7"></meta>--%>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<script type="text/javascript"
		src="<%=request.getContextPath()%>/resource/js/jquery-1.8.3.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" />
	<script
		src="<%=request.getContextPath()%>/resource/js/echarts/echarts-all.js">
</script>
	<link rel="stylesheet"
		href="<%=request.getContextPath()%>/resource/css/ztree/zTreeStyle.css"
		type="text/css">
	<script
		src="<%=request.getContextPath()%>/resource/js/ztree/jquery.ztree.all.min.js"
		type="text/javascript">
</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);
}

.normal {
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-style: solid;
	border-top-color: #ffffff;
	border-left-color: #f1f1f1;
	border-right-color: #f1f1f1;
	border-bottom-color: #f1f1f1;
	border-width: 1px;
	width: 100px;
	height: 28px;
	float: left;
	margin-top: -1px;
	cursor: pointer;
	text-align: center;
	line-height: 28px;
	overflow: hidden;
	font-weight: bold;
	font-size: 12px;
	font-family: tahoma, arial, verdana, sans-serif;
}

.disable {
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-style: solid;
	border-top-color: #f1f1f1;
	border-left-color: #f1f1f1;
	border-right-color: #f1f1f1;
	border-bottom-color: #f1f1f1;
	border-width: 1px;
	width: 100px;
	height: 25px;
	float: left;
	margin-top: -1px;
	cursor: pointer;
	text-align: center;
	background-color: #e1e1e1;
	line-height: 25px;
	overflow: hidden;
	font-weight: bold;
	font-size: 12px;
	font-family: tahoma, arial, verdana, sans-serif;
}

.panelcontainer {
	width: 100%;
	height: 70px;
	border-style: solid;
	border-color: #f1f1f1;
	border-width: 1px;
}

.panelquery {
	width: 100%;
	height: 25px;
	background-color: #f1f1f1;
	line-height: 25px;
}

.panelquerytext {
	margin-left: 3px;
	font-weight: bold;
	font-size: 12px;
	font-family: tahoma, arial, verdana, sans-serif;
}

.querycondcontainer {
	line-height: 39px;
	padding: 3px;
	float: left;
	font-size: 12px;
}

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;
}
</style>
	<script type="text/javascript">
var queryType = "fc";
var setting = {
	check : {
		enable : true,
		chkStyle : "radio"
	},
	view : {
		dblClickExpand : false
	},
	data : {
		simpleData : {
			enable : true
		}
	},
	callback : {
		beforeClick : beforeClickWindfarm,
		onCheck : selectWindfarm

	},
	async : {
		enable : true,
		url : "../power/windfarmAjax.action",
		dataType : "json"
	}

};
function beforeClickWindfarm(treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj(treeId);
	zTree.checkNode(treeNode, !treeNode.checked, null, true);
	return false;
}
function showWindfarm() {
	var cityObj = $("#wpId");
	var cityOffset = $("#wpId").offset();
	$("#menuWindfarm").css( {
		left : cityOffset.left + "px",
		top : cityOffset.top + cityObj.outerHeight() + "px"
	}).slideDown("fast");
	$("body").bind("mousedown", onBodyDown);
}
function showLine(){
			if(wpids==""){
				alert("请选择风场！");
				return;
			}
			var setting1 = {
				check: {
					enable: true,
					chkStyle:"radio"
				},
				view: {
					dblClickExpand: false
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					beforeClick: beforeClickWindfarm,
					onCheck: selectXl
				},
				async: {
					enable: true,
					url:"../power/lineAjax.action?wpIds="+wpids,
					dataType:"json"
				}
				
			};
			$.fn.zTree.init($("#treeXl"), setting1);
			var cityObj = $("#lnId");
			var cityOffset = $("#lnId").offset();
			$("#menuXl").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
			
			lnIds='';
			$("#lnId").val("");
			
			//$("#menuWindfarm").fadeOut("fas
		}
function hideMenuWindfarm() {
	$("#menuWindfarm").fadeOut("fast");

}

var wpids = "";
function selectWindfarm(e, treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("treeWindfarm"), nodes = zTree
			.getCheckedNodes(true);
	v = "";
	d = "";

	for ( var i = 0, l = nodes.length; i < l; i++) {
		v += nodes[i].name + ",";
		d += nodes[i].id + ",";
	}
	if (v.length > 0)
		v = v.substring(0, v.length - 1);
	if (d.length > 0)
		d = d.substring(0, d.length - 1);
	wpids = d;
	var cityObj = $("#wpId");
	cityObj.attr("value", v);

	pjIds = '';
	$("#lnId").val("");
	$("#lnId").val("");

	//$("#menuWindfarm").fadeOut("fast");
}
var lnIds="";
		function selectXl(e, treeId, treeNode){
			var zTree = $.fn.zTree.getZTreeObj("treeXl"),
			nodes = zTree.getCheckedNodes(true);
			v = "";
			d="";
			
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
				d+=nodes[i].id+",";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			if (d.length > 0 ) d = d.substring(0, d.length-1);
			lnIds=d;
			
			var cityObj = $("#lnId");
			cityObj.attr("value", v);
			
			//$("#menuXl").fadeOut("fast");
		}
		function hideMenuXl() {
			$("#menuXl").fadeOut("fast");
			
		}
		
function onBodyDown(event) {
	if ((event.target.id != "wpId" && event.target.id != "menuWindfarm" && $(
			event.target).parents("#menuWindfarm").length <= 0)) {
		hideMenuWindfarm();
	}

	if (!( event.target.id == "lnId" || event.target.id == "menuXl" || $(event.target).parents("#menuXl").length>0)) {
				hideMenuXl();
			}
}
$(document).ready(function() {
	$.fn.zTree.init($("#treeWindfarm"), setting);

});
</script>
</head>
<body>

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

		<fieldset style="height: 60px" id="fst">
			<legend class="item_Name">
				查询条件
			</legend>
			<div class="panelcontainer" style="width: 1620px;">
				<div class="querycondcontainer">
					风场：
					<input id="wpId" type="text" readonly value=""
						style="width: 150px;" onclick="showWindfarm();" />
				</div>
				<div id="pjpanel" class="querycondcontainer">
					线路：
					<input id="lnId" type="text" readonly value=""
						style="width: 150px;" onclick="showLine();" />
				</div>
				<div class="querycondcontainer">
					年份：
					<s:textfield cssClass="Wdate"
						onFocus="WdatePicker({dateFmt:'yyyy',isShowWeek:true,readOnly:true})"
						id="year" name="year" title="年份" />
				</div>
				<div class="querycondcontainer">
					月份：
					<s:textfield cssClass="Wdate"
						onFocus="WdatePicker({dateFmt:'MM',isShowWeek:true,readOnly:true})"
						id="month" name="month" title="月份" />
				</div>
				<div
					style="float: left; line-height: 39px; margin-left: 20px; width: 80px;">
					<input type="button" value="查询" onClick="queryData()" />
				</div>
			</div>

		</fieldset>

		<br />

		<div id="main"
			style="height: 700px; border: 1px solid #ccc; padding: 10px;"></div>

		<div id="menuWindfarm" class="menuContent"
			style="overflow-y: scroll; overflow-x: auto; z-index: 9999; border: 1px solid #617775; background: #f0f6e4; display: none; position: absolute;">
			<ul id="treeWindfarm" class="ztree"
				style="margin-top: 0; width: 180px; height: 300px;"></ul>

		</div>
		<div id="menuXl" class="menuContent" style="overflow-y:scroll;overflow-x:auto;z-index:9999; border: 1px solid #617775;background: #f0f6e4;display:none;position: absolute;">
		<ul id="treeXl" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
		</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('main'));
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 : '平均值'
			} ]
		}
	} ]
};

// 使用刚指定的配置项和数据显示图表。
//queryData();
function findscatter() {

	var wpId = wpids;
	var lnId = lnIds;
	var year = $("#year").val();
	var month = $("#month").val();
	var url = "/scatter/scatterAjax.action?wpId=" + wpId + "&year=" + year
			+ "&month=" + month + "&lnId=" + lnId;
	$.ajax( {
		url : url,
		type : "post",
		cache : false,
		dataType : "json",
		async : false,
		data : {},
		ifModified : false,
		success : function(result) {

			// 使用刚指定的配置项和数据显示图表。
		option.series[0].data = result;
		myChart.setOption(option);

		//options1.series[0].data = result;

		//chart1 = new Highcharts.Chart(options1);

	}
	});

}

function queryData() {
	if ("" == $("#wpId").val()) {
		alert("请选择风场!");
	} else if ("" == $("#lnId").val()) {
		alert("请选择线路!");
	} else if ("" == $("#year").val()) {
		alert("请选择年份!");
	} else if ("" == $("#month").val()) {
		alert("请选择月份!");
	} else {

		findscatter();
	}
}
</script>
	</form>

</body>