<%@ 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>