<%@ 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() %>/resource/plugin/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="<%=request.getContextPath()%>/resource/js/system/jqdatagrid.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" />
<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>
<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>
<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",
radioType:'all'
},
view : {
dblClickExpand : false
},
data : {
simpleData : {
enable : true
}
},
callback : {
beforeClick : beforeClickWindfarm,
onCheck : selectWindfarm
},
async : {
enable : true,
url : "../apdata/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);
}
var wts;
function showWindturbine() {
wts=$("#windturbineid").val();
if(wts !="")
{
wts=wts+","
}
if (wpids == "") {
alert("请选择风场！");
return;
}
var setting2 = {
check : {
enable : true,
chkboxType : {
"Y" : "",
"N" : ""
}
},
view : {
dblClickExpand : false
},
data : {
simpleData : {
enable : true
}
},
callback : {
beforeClick : beforeClickWindfarm,
onCheck : selectFj
},
async : {
enable : true,
url : "../apdata/fjAjax.action?wpIds=" + wpids,
dataType : "json"
}
};
$.fn.zTree.init($("#treeFj"), setting2);
var cityObj = $("#windturbineid");
var cityOffset = $("#windturbineid").offset();
$("#menuFj").css( {
left : cityOffset.left + "px",
top : cityOffset.top + cityObj.outerHeight() + "px"
}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenuWindfarm() {
$("#menuWindfarm").fadeOut("fast");
}
var wpids = '<s:property value="windfarm"/>';
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);
$("#windturbineid").val("");
wtcodes="";
wtids="";
$("#wpidls").val(wpids);
//$("#menuWindfarm").fadeOut("fast");
}
var wtids = '<s:property value="windturbineid"/>';
var wtcodes = '<s:property value="code"/>';
var num = 0;
function selectFj(e, treeId, treeNode) {
if(wtids !="")
{
wtids=wtids+","
}
var cityObj = $("#windturbineid");
var temp=cityObj.val();
var zTree = $.fn.zTree.getZTreeObj("treeFj"), nodes = zTree
.getCheckedNodes(true);
v = "";
d = "";
num = 0;
for ( var i = 0, l = nodes.length; i < l; i++) {
wts=wts.replace(nodes[i].code + ",","");
wtids=wtids.replace(nodes[i].id + ",","");
v += nodes[i].code + ",";
d += nodes[i].id + ",";
num++;
}
if (v.length > 0)
v = v.substring(0, v.length - 1);
if (d.length > 0)
d = d.substring(0, d.length - 1);
wtids = wtids+d;
wtcodes=v;
var cityObj = $("#windturbineid");
cityObj.attr("value", wts+v);
$("#wtidls").val(wtids);
//$("#menuFj").fadeOut("fast");
}
function hideMenuXl() {
$("#menuXl").fadeOut("fast");
}
function hideMenuFj() {
$("#menuFj").fadeOut("fast");
}
function queryData(){
var bd = $("#beginDate").val();
var ids = wtids.split(",");
var num=ids.length;
var windturbineid=$("#windturbineid").val();
if (wpids == "") {
alert("请选择风场！");
return;
}
if (wtids == "") {
alert("请选择风机！");
return;
}
var tmp = wtids.split(",");
for(var i=0;i<tmp.length;i++ ){
if(wpids=='WNS_FDC'&&tmp[i]=='GL01_001'){
tmp[i]='WNS01_001';
}
}
wtids='';
for(var j=0;j<tmp.length;j++){
if (j==0){
wtids= wtids+tmp[j];
}else{
wtids= wtids+','+tmp[j];
}
}
if (num > 5) {
alert("最多只能选择5个风机！");
return;
}
if (bd == "") {
alert("请选择开始时间!");
return;
}
/*var temp = "comparelist.action?windfarm=" + wpids + "&windturbineid="
+ windturbineid + "&beginDate=" + bd;
var url = encodeURI(encodeURI(temp));
$("#gridTable").setGridParam({url:url}).trigger("reloadGrid");
*/
$("#gridTable").jqGrid('GridUnload');
showJqGrid();
createChat();
setTimeout("createPolarChat()",2000);
}
function clearData()
{
$("#windfarm").val("");
$("#windturbineid").val("");
}
var series;
var options;
var chart;
var options1;
var options2;
var options3;
var options4;
var options5;
var chart1;
var chart2;
var chart3;
var chart4;
var chart5;
$(document).ready(function () {
$.fn.zTree.init($("#treeWindfarm"), setting);
initial();
showJqGrid();
createChat();
setTimeout("createPolarChat()",2000);
});
function initial()
{
$("#windturbineid").attr("value", '1B01');
$("#windfarm").attr("value", '<s:property value="windfarmName" escape="false"/>');
$("#beginDate").attr("value", '<s:property value="beginDate"/>');
series=[{name: '<s:property value="code"/>',data: []}];
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: series
}
/******************************************玫瑰图1***********************************************/
options1 = {
chart: {
renderTo : 'fzy1',
polar: true,
type: 'area'
},
title: {
text: '',
x: 0
},
pane: {
size: '80%'
},
xAxis: {
categories: ['北', '北北东', '北东', '东北东','东', '东南东',
'南东', '南南东', '南','南南西', '南西',
'西南西', '西', '西北西', '北西','北北西'
],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}"> <b>{point.y:,.0f}</b><br/>'
},
series: [{
name: 'name1',
data: [],
pointPlacement: 'on'
}]
}
/******************************************玫瑰图2***********************************************/
options2 = {
chart: {
renderTo : 'fzy2',
polar: true,
type: 'area'
},
title: {
text: '',
x: 0
},
pane: {
size: '80%'
},
xAxis: {
categories: ['北', '北北东', '北东', '东北东','东', '东南东',
'南东', '南南东', '南','南南西', '南西',
'西南西', '西', '西北西', '北西','北北西'
],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}"> <b>{point.y:,.0f}</b><br/>'
},
series: [{
name: 'name1',
data: [],
pointPlacement: 'on'
}]
}/******************************************玫瑰图3***********************************************/
options3 = {
chart: {
renderTo : 'fzy3',
polar: true,
type: 'area'
},
title: {
text: '',
x: 0
},
pane: {
size: '80%'
},
xAxis: {
categories: ['北', '北北东', '北东', '东北东','东', '东南东',
'南东', '南南东', '南','南南西', '南西',
'西南西', '西', '西北西', '北西','北北西'
],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}"> <b>{point.y:,.0f}</b><br/>'
},
series: [{
name: 'name1',
data: [],
pointPlacement: 'on'
}]
}/******************************************玫瑰图4***********************************************/
options4 = {
chart: {
renderTo : 'fzy4',
polar: true,
type: 'area'
},
title: {
text: '',
x: 0
},
pane: {
size: '80%'
},
xAxis: {
categories: ['北', '北北东', '北东', '东北东','东', '东南东',
'南东', '南南东', '南','南南西', '南西',
'西南西', '西', '西北西', '北西','北北西'
],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}"> <b>{point.y:,.0f}</b><br/>'
},
series: [{
name: 'name1',
data: [],
pointPlacement: 'on'
}]
}/******************************************玫瑰图5***********************************************/
options5 = {
chart: {
renderTo : 'fzy5',
polar: true,
type: 'area'
},
title: {
text: '',
x: 0
},
pane: {
size: '80%'
},
xAxis: {
categories: ['北', '北北东', '北东', '东北东','东', '东南东',
'南东', '南南东', '南','南南西', '南西',
'西南西', '西', '西北西', '北西','北北西'
],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}"><b>{point.y:,.0f}</b><br/>'
},
series: [{
name: 'name1',
data: [],
pointPlacement: 'on'
}]
}
}
function createChat()
{
var beginDate =$("#beginDate").val();
var ids = wtids.split(",");
var codes = wtcodes.split(",");
options.series = new Array();
$.each(codes, function(i,val){
var series = {
name: val,
data: []
};
options.series.push(series);
});
chart = new Highcharts.Chart(options);
var url = "../compare/comparechatAjax.action?windturbineid=" + ids
+ "&beginDate=" + beginDate ;
$.ajax( {
url : url,
type : "post",
cache : false,
dataType : "json",
data : {},
ifModified : false,
success : function(result) {
var speed = [];
var value1 = [];
var value2 = [];
var value3 = [];
var value4 = [];
var value5 = [];
$.each(result, function(m, obj) {
if (obj.speed != 0) {
speed.push(parseFloat(obj.speed));
}
if (null !=obj.value1 && obj.value1 != 0) {
value1.push(parseFloat(obj.value1));
}
if (null !=obj.value2 && obj.value2 != 0) {
value2.push(parseFloat(obj.value2));
}
if (null !=obj.value3 && obj.value3 != 0) {
value3.push(parseFloat(obj.value3));
}
if (null !=obj.value4 && obj.value4 != 0) {
value4.push(parseFloat(obj.value4));
}
if (null !=obj.value5 && obj.value5 != 0) {
value5.push(parseFloat(obj.value5));
}
});
if (chart) {
chart = new Highcharts.Chart(options);
if(null !=chart.series[0])
{
chart.series[0].setData(value1);
}
if(null !=chart.series[1])
{
chart.series[1].setData(value2);
}
if(null !=chart.series[2])
{
chart.series[2].setData(value3);
}
if(null !=chart.series[3])
{
chart.series[3].setData(value4);
}
if(null !=chart.series[4])
{
chart.series[4].setData(value5);
}
options.xAxis.categories = speed;
} else {
if(null !=options.series[0])
{
options.series[0].data = value1;
}
if(null !=options.series[1])
{
options.series[1].data = value2;
}
if(null !=options.series[2])
{
options.series[2].data = value3;
}
if(null !=options.series[3])
{
options.series[3].data = value4;
}
if(null !=options.series[4])
{
options.series[4].data = value5;
}
options.xAxis.categories = speed;
chart = new Highcharts.Chart(options);
}
//alert(options.xAxis.categories);
}
});
}
function createPolarChat()
{
var beginDate = $("#beginDate").val();
var jfpl;
var ids = wtids.split(",");
if (null != ids[0]) {
var url = "../compare/fzy.action?windturbineid=" + ids[0]
+ "&beginDate=" + beginDate ;
$.ajax( {
url : url,
type : "post",
cache : false,
dataType : "json",
data : {},
ifModified : false,
success : function(result) {
var data1 = [];
var jfpl=result.jfpl;
$.each(result.data, function(m, obj) {
if (obj.data1 != null) {
data1.push(parseFloat(obj.data1));
}
});
if(null !=options1.series[0])
{
options1.series[0].data = data1;
}
options1.series[0].name = jfpl;
chart1 = new Highcharts.Chart(options1);
}
});
}
if (null != ids[1]) {
var url = "../compare/fzy.action?windturbineid=" + ids[1]
+ "&beginDate=" + beginDate ;
$.ajax( {
url : url,
type : "post",
cache : false,
dataType : "json",
data : {},
ifModified : false,
success : function(result) {
var data1 = [];
var jfpl=result.jfpl;
$.each(result.data, function(m, obj) {
if (obj.data1 != null) {
data1.push(parseFloat(obj.data1));
}
});
if(null !=options2.series[0])
{
options2.series[0].data = data1;
}
options2.series[0].name = jfpl;
chart2 = new Highcharts.Chart(options2);
}
});
}
if (null != ids[2]) {
var url = "../compare/fzy.action?windturbineid=" + ids[2]
+ "&beginDate=" + beginDate ;
$.ajax( {
url : url,
type : "post",
cache : false,
dataType : "json",
data : {},
ifModified : false,
success : function(result) {
var data1 = [];
var jfpl=result.jfpl;
$.each(result.data, function(m, obj) {
if (obj.data1 != null) {
data1.push(parseFloat(obj.data1));
}
});
if(null !=options3.series[0])
{
options3.series[0].data = data1;
}
options3.series[0].name = jfpl;
chart3 = new Highcharts.Chart(options3);
}
});
}
if (null != ids[3]) {
var url = "../compare/fzy.action?windturbineid=" + ids[3]
+ "&beginDate=" + beginDate ;
$.ajax( {
url : url,
type : "post",
cache : false,
dataType : "json",
data : {},
ifModified : false,
success : function(result) {
var data1 = [];
var jfpl=result.jfpl;
$.each(result.data, function(m, obj) {
if (obj.data1 != null) {
data1.push(parseFloat(obj.data1));
}
});
if(null !=options4.series[0])
{
options4.series[0].data = data1;
}
options4.series[0].name = jfpl;
chart4 = new Highcharts.Chart(options4);
}
});
}
if (null != ids[4]) {
var url = "../compare/fzy.action?windturbineid=" + ids[4]
+ "&beginDate=" + beginDate ;
$.ajax( {
url : url,
type : "post",
cache : false,
dataType : "json",
data : {},
ifModified : false,
success : function(result) {
var data1 = [];
var jfpl=result.jfpl;
$.each(result.data, function(m, obj) {
if (obj.data1 != null) {
data1.push(parseFloat(obj.data1));
}
});
if(null !=options5.series[0])
{
options5.series[0].data = data1;
}
options5.series[0].name = jfpl;
chart5 = new Highcharts.Chart(options5);
}
});
}
}
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 == "windturbineid" || event.target.id == "menuFj" || $(
event.target).parents("#menuFj").length > 0)) {
hideMenuFj();
}
}
function showJqGrid() {
var bd = $("#beginDate").val();
var windfarm = $("#windfarm").val();
var temp = "comparelist.action?windfarm=" + windfarm + "&windturbineid="
+( windfarm=='太旗卧牛山风电场'&&wtids=='GL01_001'?'WNS01_001':wtids) + "&beginDate=" + bd;
var url = encodeURI(encodeURI(temp));
var id = 'gridTable';
var datatype = 'json';
var colNames = ['项目', '','','','',''];
var colModel = [
{ name: 'name', index: 'name', width: 150, align: 'center'},
{ name: 'value1', index: 'value1', width: 250, align: 'center'},
{ name: 'value2', index: 'value2', width: 250, align: 'center'},
{ name: 'value3', index: 'value3', width: 250, align: 'center'},
{ name: 'value4', index: 'value4', width: 250, align: 'center'},
{ name: 'value5', index: 'value5', width: 250, align: 'center'}
];
var caption = '单机年信息对比';
var sortname = 'generatingCapacity';
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);
}
</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="/compareyear/compareindex.action" method="post" id="f1">
<!--
<input type="hidden" id="wtidls" name="wtidls"/>
<input type="hidden" id="wpidls" name="wpidls"/>
-->
<fieldset style="height: 80px" id="fst">
<legend class="item_Name">查询条件</legend>
<div class="querycondcontainer" class="item_Name">
风场：
<input id="windfarm" type="text" readonly value=""
style="width: 180px;" onclick="showWindfarm();" />
</div>
<div id="fjpanel" class="querycondcontainer" class="item_Name">
风机：
<input id="windturbineid" type="text" readonly value=""
style="width: 360px;" onclick="showWindturbine();" />
</div>
<div class="querycondcontainer">
日期:
<s:textfield cssClass="Wdate"
onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})"
id="beginDate" name="beginDate" title="日期" />
</div>
<div style="float: left; line-height: 39px; margin-left: 20px;">
<input type="button" value="对比" onClick="queryData()" />
<input type="button" value="清空" onClick="clearData()" />
</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="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>
</fieldset>
<br/>
<table id='gridTable' >
</table>
<div id='gridPager'></div>
<div id="container"
style="background-color: '#ffffff'; vertical-align: middle; width: 100%; height: 100%"></div>
</form>
</body>