<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/pages/includes/taglibs.jsp"%>
<head>
<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" />
<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>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resource/plugin/highslide/highslide.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/resource/plugin/highslide/highslide-with-html.js"></script>
<style type="text/css">
a.url { /* 统一设置所以样式 */
font-family:Arial;
font-size:12px;
text-align:center;
margin:3px;
}
a:link.url ,a:visited.url{ /* 超链接正常状态、被访问过的样式 */
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.url{ /* 鼠标指针经过时的超链接 */
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">
hs.graphicsDir = '<%=request.getContextPath()%>/resource/plugin/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
var windfarm = '<s:property value="windfarm"/>'
var options;
var chart;
function thisPage() {
$("#f1").attr("action", "curvedeviationindex.action").submit();
}
function queryClear() {
$("#windfarm").val("");
$("#beginDate").val("");
}
function queryData() {
var windfarm = $("#windfarm").val();
var beginDate = $("#beginDate").val();
if ("" == windfarm) {
alert("请选择风场!");
} else if ("" == beginDate) {
alert("请选择日期!");
} else {
/*var temp = "curvedeviationlist.action?windfarm=" + windfarm + "&beginDate="
+ beginDate;
var url = encodeURI(encodeURI(temp));
$("#gridTable").setGridParam({url:url}).trigger("reloadGrid"); */
$("#gridTable").jqGrid('GridUnload');
showJqGrid();
}
}
function toExcel() {
var windfarm = $("#windfarm").val();
var beginDate = $("#beginDate").val();
if ("" == windfarm) {
alert("请选择风场!");
} else if ("" == beginDate) {
alert("请选择日期!");
} else {
var temp = "curveExcel.action?windfarm=" + windfarm + "&beginDate="
+ beginDate;
var url = encodeURI(encodeURI(temp));
$('#toexcel').attr('href',url);
}
}
function detail(windturbineid, type) {
chartAjax(windturbineid,type);
}
function showDiv1() {
var hc = $("#container");
// return hs.htmlExpand(obj, {
return hs.htmlExpand(hc[0], {
contentId : 'showDiv2',
width : 1370,
height : 500,
align : 'center',
headingText : '曲线偏差率排行'
});
}
$(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 windfarm = $("#windfarm").val();
var beginDate = $("#beginDate").val();
var temp = "curvedeviationlist.action?windfarm=" + windfarm + "&beginDate="
+ beginDate;
var url = encodeURI(encodeURI(temp));
var id = 'gridTable';
var datatype = 'json';
var colNames = ['风机', '实际/保证(%)','实际/最优(%)','最优/保证(%)','环比','同比','比标杆风机'];
var colModel = [
{ name: 'windturbineid', index: 'windturbineid', width: 200, align: 'center'},
{ name: 'deviationrate2', index: 'deviationrate2', width: 200, align: 'center'},
{ name: 'deviationrate1', index: 'deviationrate1', width: 200, align: 'center'},
{ name: 'deviationrate3', index: 'deviationrate3', width: 200, align: 'center'},
{ name: 'monthdeviationrate', index: 'monthdeviationrate', width: 200, align: 'center'},
{ name: 'yeardeviationrate', index: 'yeardeviationrate', width: 200, align: 'center'},
{ name: 'standarddeviationrate', index: 'standarddeviationrate', width: 200, align: 'center'}
];
var caption = '日曲线偏差率排行榜';
var sortname = 'deviationrate2';
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 chartAjax(windturbineid,type) {
var beginDate = $("#beginDate").val();
var url = "";
if (type == 'tb') {
url = "curvechatAjaxtb.action?windturbineid=" + windturbineid
+ "&beginDate=" + beginDate + "&type=" + type;
} else if (type == 'hb') {
url = "curvechatAjaxhb.action?windturbineid=" + windturbineid
+ "&beginDate=" + beginDate + "&type=" + type;
} else if (type == 'bg') {
url = "curvechatAjaxbg.action?windturbineid=" + windturbineid
+ "&beginDate=" + beginDate + "&type=" + type;
} else {
url = "curvechatAjax.action?windturbineid=" + windturbineid
+ "&beginDate=" + beginDate + "&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=result["name1"];
var name2=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);
}
});
showDiv1();
}
</script>
</head>
<body>
<form action="curveindex.action" method="post" id="f1">
<br/>
<fieldset style="height: 50px" id="fst">
<legend class="item_Name">查询条件</legend>
<table width="1000px" cellpadding="0" cellspacing="0" class="dataform">
<tr>
<th width="5%" class="item_Name">
风场：
</th>
<td width="20%">
<s:select list="wps" listKey="id" cssStyle="width:150px"
listValue="name" id="windfarm" name="windfarm" onchange="queryData()"></s:select>
</td>
<th width="5%" class="item_Name" align="left">
日期：
</th>
<td width="20%" style="text-align: left" align="left">
<s:textfield cssClass="Wdate" cssStyle="width:150px"
onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})"
id="beginDate" name="beginDate" title="日期" onchange="queryData()"/>
</td>
<td width="200px" style="text-align: right">
<a href="#" onclick="javascript:toExcel();" id="toexcel" class="url" >导出</a>
</td>
</tr>
</table>
</fieldset>
<br/>
<table id='gridTable' >
</table>
<div id='gridPager'></div>
<div class="highslide-html-content" id="showDiv2" style="height: 800">
<div class="highslide-header">
<ul>
<li class="highslide-move">
<a href="#" onclick="return false">Move</a>
</li>
<li class="highslide-close">
<a href="#" onclick="return hs.close(this)"></a>
</li>
</ul>
</div>
<div id="container"
style="background-color: '#ffffff'; vertical-align: middle; width: 100%; height: 100%"></div>
</div>
</form>
</body>