xieshengjie
/
gdhb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725
							<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@include file="/pages/includes/taglibs.jsp"%>
<head>

<script src="<%=request.getContextPath() %>/resource/js/highcharts/highcharts.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/resource/js/highcharts/themes/grid.js" type="text/javascript"></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">
       
        .normal {
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-style:solid;
            border-top-color:#ffffff;
            border-left-color:#c1c1c1;
            border-right-color:#c1c1c1;
            border-bottom-color:#c1c1c1;
            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:#c1c1c1;
            border-left-color:#c1c1c1;
            border-right-color:#c1c1c1;
            border-bottom-color:#c1c1c1;
            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: #C1C1C1;
            border-width:1px;
        }
        .panelquery {
            width:100%;
            height:25px;
            background-color:#c1c1c1;
            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;
        }
    </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:"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 = $("#windfarm");
			var cityOffset = $("#windfarm").offset();
			$("#menuWindfarm").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
			
		}
		function showWindturbine(){
			if(wpids=="" || wpids=="undefined"){
				alert("请选择风场！");
				return;
			}
			var setting2 = {
				check: {
					enable: true,
					chkStyle:"radio"
				},
				view: {
					dblClickExpand: false
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					beforeClick: beforeClickWindfarm,
					onCheck: selectFj
				},
				async: {
					enable: true,
					url:"fjAjax.action?wpIds="+wpids,
					dataType:"json"
				}
				
			};
			$.fn.zTree.init($("#treeFj"), setting2);
			var cityObj = $("#windturbine");
			var cityOffset = $("#windturbine").offset();
			$("#menuFj").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		}
		function showLine(){
			if(wpids=="" || wpids=="undefined"){
				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:"lineAjax.action?wpIds="+wpids,
					dataType:"json"
				}
				
			};
			$.fn.zTree.init($("#treeXl"), setting1);
			var cityObj = $("#line");
			var cityOffset = $("#line").offset();
			$("#menuXl").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		}
		function showProject(){
			if(wpids=="" || wpids=="undefined"){
				alert("请选择风场！");
				return;
			}
			var setting3 = {
				check: {
					enable: true,
					chkStyle:"radio"
				},
				view: {
					dblClickExpand: false
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					beforeClick: beforeClickWindfarm,
					onCheck: selectPj
				},
				async: {
					enable: true,
					url:"projectAjax.action?wpIds="+wpids,
					dataType:"json"
				}
				
			};
			$.fn.zTree.init($("#treePj"), setting3);
			var cityObj = $("#project");
			var cityOffset = $("#project").offset();
			$("#menuPj").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		}
		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 = $("#windfarm");
			cityObj.attr("value", v);
			
			//$("#menuWindfarm").fadeOut("fast");
		}
		var wtids="";
		function selectFj(e, treeId, treeNode){
			var zTree = $.fn.zTree.getZTreeObj("treeFj"),
			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);
			wtids=d;
			
			var cityObj = $("#windturbine");
			cityObj.attr("value", v);
			
			//$("#menuFj").fadeOut("fast");
		}
		var lines="";
		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);
			lines=d;
			
			var cityObj = $("#line");
			cityObj.attr("value", v);
			
			//$("#menuXl").fadeOut("fast");
		}
		var pjIds;
		function selectPj(e, treeId, treeNode){
			var zTree = $.fn.zTree.getZTreeObj("treePj"),
			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);
			pjIds=d;
			
			var cityObj = $("#project");
			cityObj.attr("value", v);
			
			//$("#menuXl").fadeOut("fast");
		}
		function hideMenuPj() {
			$("#menuPj").fadeOut("fast");
			
		}
		function hideMenuXl() {
			$("#menuXl").fadeOut("fast");
			
		}
		function hideMenuFj() {
			$("#menuFj").fadeOut("fast");
			
		}
		$(document).ready(function(){
			$.fn.zTree.init($("#treeWindfarm"), setting);

		});
		
        function swap(obj) {
            document.getElementById('fc').className = "disable";
            document.getElementById('pj').className = "disable";
            document.getElementById('xl').className = "disable";
            document.getElementById('fj').className = "disable";
            obj.className = "normal";

            document.getElementById('pjpanel').style.display = "none";
            document.getElementById('xlpanel').style.display = "none";
            document.getElementById('fjpanel').style.display = "none";
            
      
            if (obj.id == "pj") {
            	queryType="pj";
                document.getElementById('pjpanel').style.display = "";
                
            }
            else if (obj.id == "xl") {
            	queryType="xl";
                document.getElementById('xlpanel').style.display = "";
            }
            else if (obj.id == "fj") {
            	queryType="fj";
                document.getElementById('fjpanel').style.display = "";
            }
            else{
            	queryType="fc";
            
            }

        }
        
        var chartfc;
var optionsfc;

Highcharts.setOptions({
	global : {
		useUTC : false
	}
});

optionsfc = {
		colors: [
		          
		         '#19FF38', 
		         '#0026FF',
		         '#FF350C',
		         '#9926FF',
		         '#55350C'
		      ],
		chart: {
			
		    renderTo: 'chartfc',
		    type: 'spline',
		    //backgroundColor:'#BFDFFF',
		    //plotBackgroundColor:'#BFDFFF',
		    zoomType: 'x'
	
	         },
	         title: {
	             text: '实时功率曲线分析'
	         },
	         subtitle: {
	             text: ''
	         },
	         xAxis: {
	          		labels: {
	          			align: 'center',
	          			rotation: 15,
	                	formatter: function() {
	                       return  Highcharts.dateFormat('%y年<br/>%m月<br/>%d日', this.value);
	                	}
	                },
	            type: 'datetime'
	         },
	         yAxis: [{
	             title: {
	                 text: '功率(MW)'
	             }},{
	             title: {
	                 text: '风速(m/s)'
	             },
				            labels:{  
					             formatter: function(){  
					                 return this.value;  
					             }  
					         },
				            lineWidth : 1,
				            opposite:true
	        } ],
	         
	         tooltip: {
	          	 
	          	 shared:true,
	          	 xDateFormat:'%Y-%m-%d %H:%M '
	             /*formatter: function() {
	                    return '<b>'+ this.series.name +'</b>：'+
	                    Highcharts.numberFormat(this.y, 2) +' 万kW<br/>时间：'+
	                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
	             }*/
	         },
	         credits: {
	    		enabled: false
			},
			  legend: {
                align: 'center',
                verticalAlign: 'bottom',
                y: 20,
                floating: true,
                borderWidth: 0
            },
	         plotOptions: {
	         	spline: {
	                  		dataLabels : {  
	                            enabled :false  
	                        },  
	                      // pointPadding: 0.2,
	                       borderWidth: 0
	                  },
	                  column: {
	                      pointPadding: 0.2,
	                      borderWidth: 0
	                  },
	             series: {
	                 cursor: 'pointer',
	                 marker: {
	                     radius: 0, 
	                     symbol: 'circle' //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
	                 }
	             }
	         },
	         series: [{
	         	type: 'spline',
	             name: '理论功率(MW)',
	             yAxis:0
	         },
	         {
	         	type: 'spline',
	          	 name: '保证功率(MW)',
	          	 yAxis:0
	         },

	         {
	         	type: 'spline',
	          	 name: '自算功率(MW)',
	          	 yAxis:0
	         },{
	         	type: 'spline',
	          	 name: '实发功率(MW)',
	          	 yAxis:0
	         },{
	         	type: 'spline',
	          	 name: '平均风速(m/s)',
	          	 yAxis:1
	         }]
	   };
       
        
        	function getResultInfo(result)
        	{
        		var llgl=[];
				var bzgl=[];
				var zsgl=[];
				var sjgl=[];
				var pjfs=[];
				var xtime = [];
				var beginDateNum;
				var endDateNum;
				$.each(result, function(m, obj) {
				if (obj.value1 != null) {
				
					llgl.push(  parseFloat(obj.value1) );
				}
				if (obj.value2 != null) {
					bzgl.push( parseFloat(obj.value2) );
				}
				if (obj.value3 != null) {

					zsgl.push( parseFloat(obj.value3) );

				}if (obj.value4 != null) {

					sjgl.push( parseFloat(obj.value4) );

				}
				if (obj.value5 != null) {

					pjfs.push( parseFloat(obj.value5) );

				}
	
				xtime.push(parseFloat(obj.time));

				});
				if(queryType=='fj')
				{
					optionsfc.yAxis[0].title.text='功率(KW)';
					
					optionsfc.series[0].name = '理论功率(KW)';
					optionsfc.series[1].name = '保证功率(KW)';
					optionsfc.series[2].name = '自算功率(KW)';
					optionsfc.series[3].name = '实际功率(KW)';
					
					
				}
				var timeType=	$("#timeType").val();
				if(timeType=='day')
					{
						optionsfc.xAxis.labels.formatter=function() {
	                       return  Highcharts.dateFormat('%H时<br/>%M分', this.value);
	                }
					}
				
					optionsfc.series[0].data = llgl;
					optionsfc.series[1].data = bzgl;
					optionsfc.series[2].data = zsgl;
					optionsfc.series[3].data = sjgl;
					optionsfc.series[4].data = pjfs;
					optionsfc.xAxis.categories = xtime;
					chartfc = new Highcharts.Chart(optionsfc);
				
				
        	}
 
        	function onBodyDown(event) {
			if (( event.target.id != "windfarm" && event.target.id != "menuWindfarm" && $(event.target).parents("#menuWindfarm").length<=0)) {
				hideMenuWindfarm();
			}
			//alert(event.target.id);
			//alert($(event.target).parents("#menuXl").length);
			if (!( event.target.id == "line" || event.target.id == "menuXl" || $(event.target).parents("#menuXl").length>0)) {
				hideMenuXl();
			}
			if (!( event.target.id == "windturbine" || event.target.id == "menuFj" || $(event.target).parents("#menuFj").length>0)) {
				hideMenuFj();
			}
			if (!( event.target.id == "project" || event.target.id == "menuPj" || $(event.target).parents("#menuPj").length>0)) {
				hideMenuPj();
			}
		}
        	
        	
        function queryApData(){
    
        	if(wpids=='')
        		{
        		wpids='-1';
        		}
        	
        	if(queryType=="pj" || queryType=="undefined"){
        		if(pjIds==""){
        			alert("请选择项目！");
        			return;
        		}
        	}
        	if(queryType=="xl" || queryType=="undefined"){
        		if(lines==""){
        			alert("请选择线路！");
        			return;
        		}
        	}
        	if(queryType=="fj" || queryType=="undefined"){
        		if(wtids==""){
        			alert("请选择风电机！");
        			return;
        		}
        	}
        	
        	var timeType=	$("#timeType").val();
        	$.ajax({
			url : "queryReal.action?queryType=" + queryType+"&wpIds="+wpids+"&pjIds="+pjIds+"&lineIds="+lines
			                       +"&wtIds="+wtids+"&timeType="+timeType,
			type : "post",
			cache : false,
			dataType : "json",
			data : {},
			ifModified : false,
			success : function(result) {
				getResultInfo(result);
			}
		});
        }
        
        function initial(){
       		
        	
        	$.ajax({
			url : "queryReal.action?queryType=" + queryType+"&wpIds=-1",
			type : "post",
			cache : false,
			dataType : "json",
			data : {},
			ifModified : false,
			success : function(result) {
				getResultInfo(result);
			}
		});
        }
        
        
        $(document).ready(function() {
		initial();
		setInterval(queryApData, 60000);
	});
    </script>
</head>
<body>
<form action="" method="post" id="f1">
<div class="panelcontainer" >
        <div class="panelquery"><span class="panelquerytext">功率查询</span></div>
        <div  class="querycondcontainer">
            风电场：
            <input id="windfarm" type="text" readonly value="" style="width:180px;" onclick="showWindfarm();" />
        </div>
         <div id="pjpanel" class="querycondcontainer" style="display:none;">
            项目：<input id="project" type="text" readonly value="" style="width:180px;" onclick="showProject();" />
        </div>
        <div id="xlpanel" class="querycondcontainer" style="display:none;">
            线路：<input id="line" type="text" readonly value="" style="width:180px;" onclick="showLine();" />
        </div>
        <div id="fjpanel" class="querycondcontainer" style="display:none;">
            风电机：<input id="windturbine" type="text" readonly value="" style="width:180px;" onclick="showWindturbine();" />
        </div>
       
       <div style="float:left;line-height:39px;margin-left:20px;">
          			时间周期：<s:select list="#{'day':'日期','month':'月份','year':'年份'}"   id="timeType" name="timeType"  ></s:select>

        </div>
        <div style="float:left;line-height:39px;margin-left:20px;">
            <input type="button" value="查询" onClick="queryApData()"/>

        </div>

    </div>
    <div id="fc" onclick="swap(this);" class="normal">风场</div>
    <div id="pj" onclick="swap(this);" class="disable">项目</div>
    <div id="xl" onclick="swap(this);" class="disable">集电线路</div>
    <div id="fj" onclick="swap(this);" class="disable">风电机</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;">
		<!--  <div style="overflow-y:scroll;overflow-x:auto;">-->
		<ul id="treeWindfarm" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
		<!--  </div>
			<div style="padding:5px;margin-left:25px;">
			<input style="width:70px" type="button" value="确定" onClick="selectWindfarm()"/>
			<input style="width:70px;margin-left:5px;" type="button" value="取消" onClick="hideMenuWindfarm()"/>
			</div>-->
		</div>
		<div id="menuPj" class="menuContent" style="overflow-y:scroll;overflow-x:auto;z-index:9999; border: 1px solid #617775;background: #f0f6e4;display:none;position: absolute;">
		<!--  <div style="overflow-y:scroll;overflow-x:auto;">-->
		<ul id="treePj" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
		<!-- </div>
			<div style="padding:5px;margin-left:25px;">
			<input style="width:70px" type="button" value="确定" onClick="selectXl()"/>
			<input style="width:70px;margin-left:5px;" type="button" value="取消" onClick="hideMenuXl()"/>
			</div>-->
		</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;">
		<!--  <div style="overflow-y:scroll;overflow-x:auto;">-->
		<ul id="treeXl" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
		<!-- </div>
			<div style="padding:5px;margin-left:25px;">
			<input style="width:70px" type="button" value="确定" onClick="selectXl()"/>
			<input style="width:70px;margin-left:5px;" type="button" value="取消" onClick="hideMenuXl()"/>
			</div>-->
		</div>
		
		<div id="menuFj" class="menuContent" style="overflow-y:scroll;overflow-x:auto;z-index:9999; border: 1px solid #617775;background: #f0f6e4;display:none;position: absolute;">
		<!--  <div style="overflow-y:scroll;overflow-x:auto;">-->
		<ul id="treeFj" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
		<!--  </div>
			<div style="padding:5px;margin-left:25px;">
			<input style="width:70px" type="button" value="确定" onClick="selectFj()"/>
			<input style="width:70px;margin-left:5px;" type="button" value="取消" onClick="hideMenuFj()"/>
			</div>-->
		</div>
		<p style="clear:both;height:1px"/>
		<div style="width:100%;height:400px;" id="chartfc"></div>
		<div style="width:100%;height:50px;"></div>
		
		<div style="width:1000px;height:600px;display:none;" id="chartContainer">
		
        <div style="width:1000px;height:480px;top: 40px;position: relative;z-index:-1;" id="chart1"></div>
		</div>
</form>
</body>