loadfactortop.jsp 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%@include file="/pages/includes/taglibs.jsp" %>
  3. <head>
  4. <script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery-1.8.3.js"></script>
  5. <script type="text/ecmascript" src="<%=request.getContextPath() %>/resource/plugin/jqgrid/js/jquery.jqGrid.min.js"></script>
  6. <script type="text/ecmascript" src="<%=request.getContextPath() %>/resource/plugin/jqgrid/js/i18n/grid.locale-cn.js"></script>
  7. <script type="text/ecmascript" src="<%=request.getContextPath()%>/resource/js/system/jqdatagrid.js"></script>
  8. <script src="<%=request.getContextPath()%>/resource/js/datePicker/WdatePicker.js" type="text/javascript"></script>
  9. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resource/plugin/jqueryui/css/custom-theme/jquery-ui-1.9.2.custom.css" />
  10. <link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/resource/plugin/jqgrid/css/ui.jqgrid.css" />
  11. <style type="text/css">
  12. a{ /* 统一设置所以样式 */
  13. font-family:Arial;
  14. font-size:12px;
  15. text-align:center;
  16. margin:3px;
  17. }
  18. a:link,a:visited{ /* 超链接正常状态、被访问过的样式 */
  19. color:#000000;
  20. padding:4px 10px 4px 10px;
  21. background-color:#f1f1f1;
  22. text-decoration:none;
  23. border-top:1px solid #EEEEEE; /* 边框实现阴影效果 */
  24. border-left:1px solid #EEEEEE;
  25. border-bottom:1px solid #717171;
  26. border-right:1px solid #717171;
  27. }
  28. a:hover{ /* 鼠标指针经过时的超链接 */
  29. color:#821818; /* 改变文字颜色 */
  30. padding:5px 8px 3px 12px; /* 改变文字位置 */
  31. background-color:#e2c4c9; /* 改变背景色 */
  32. border-top:1px solid #717171; /* 边框变换,实现“按下去”的效果 */
  33. border-left:1px solid #717171;
  34. border-bottom:1px solid #EEEEEE;
  35. border-right:1px solid #EEEEEE;
  36. }
  37. fieldset legend {
  38. color:#302A2A;
  39. font: bold 16px/2 Verdana, Geneva, sans-serif;
  40. font-weight: bold;
  41. text-align: left;
  42. text-shadow: 2px 2px 2px rgb(88, 126, 156);
  43. }
  44. </style>
  45. <script type="text/javascript">
  46. function changeFc(type){
  47. var url1 = "windfarmAjax.action?type="+type;
  48. $.ajax({
  49. type:"post",
  50. url:url1,
  51. dataType:"json",
  52. success: function(data){
  53. if(data.length != 0){
  54. eval(data);
  55. $("#wpId").empty();
  56. $("#wpId").append("<option value=''>请选择</option>");
  57. for(var i=0; i<data.length; i++){
  58. $("#wpId").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
  59. }
  60. }else{
  61. $("#wpId").append("<option value=''>请选择</option>");
  62. $("#wpId").addOption("请选择","");
  63. }
  64. queryData();
  65. }
  66. });
  67. }
  68. function queryData(){
  69. if("" == $("#beginDate").val()){
  70. alert("请选择查询开始日期!");
  71. }else if("" == $("#endDate").val()){
  72. alert("请选择查询结束日期!");
  73. }
  74. else{
  75. //var type=$("#type").val();
  76. //var wpId=$("#wpId").find("option:selected").val();
  77. //var beginDate=$("#beginDate").val();
  78. //var endDate=$("#endDate").val();
  79. //var url = '<%=request.getContextPath() %>/charts/loadfactortoplist1.action?wpId='+wpId
  80. // +"&beginDate="+beginDate +"&endDate="+endDate+"&type="+type;
  81. //$("#gridTable").setGridParam({url:url}).trigger("reloadGrid");
  82. $("#gridTable").jqGrid('GridUnload');
  83. showJqGrid();
  84. }
  85. }
  86. function toExcel() {
  87. if("" == $("#beginDate").val()){
  88. alert("请选择查询开始日期!");
  89. }else if("" == $("#endDate").val()){
  90. alert("请选择查询结束日期!");
  91. }
  92. else{
  93. var type=$("#type").val();
  94. var wpId=$("#wpId").find("option:selected").val();
  95. var beginDate=$("#beginDate").val();
  96. var endDate=$("#endDate").val();
  97. var url = '<%=request.getContextPath() %>/charts/loadfactortopExcel.action?wpId='+wpId
  98. +"&beginDate="+beginDate +"&endDate="+endDate+"&type="+type;
  99. $('#toexcel').attr('href',url);
  100. }
  101. }
  102. $(document).ready(function () {
  103. showJqGrid();
  104. });
  105. function showJqGrid() {
  106. var type=$("#type").val();
  107. var wpId=$("#wpId").find("option:selected").val();
  108. var beginDate=$("#beginDate").val();
  109. var endDate=$("#endDate").val();
  110. var id = 'gridTable';
  111. var url = '<%=request.getContextPath() %>/charts/loadfactortoplist1.action?wpId='+wpId
  112. +"&beginDate="+beginDate +"&endDate="+endDate+"&type="+type;
  113. var datatype = 'json';
  114. var colNames = ['风场', '风机','编号','起始日期','截至日期','平均风速','平均功率','负荷率'];
  115. var colModel = [
  116. { name: 'windfarm', index: 'windfarm', width: 200, align: 'center'},
  117. { name: 'windturbine', index: 'windturbine', width: 200, align: 'center',hidden : true},
  118. { name: 'code', index: 'code', width: 80, align: 'center'},
  119. { name: 'beginDate', index: 'beginDate', width: 200, align: 'center',formatter:'date', formatoptions:{newformat:'Y-m-d'},align:'center'},
  120. { name: 'endDate', index: 'endDate', width: 200, align: 'center',formatter:'date', formatoptions:{newformat:'Y-m-d'},align:'center'},
  121. { name: 'speed', index: 'speed', width: 250, align: 'center',width: 250, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'},
  122. { name: 'power', index: 'power', width: 250, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'},
  123. { name: 'generatingCapacity', index: 'generatingCapacity', width: 250, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int' }
  124. ];
  125. var caption = '负荷率排行榜';
  126. var sortname = 'power';
  127. var gridPagerID ='gridPager';
  128. var sortorder='desc';
  129. var height='auto';
  130. var width='auto';
  131. var rownumbers=true;
  132. var multiselect=false;
  133. myJqGrid(id, url, datatype, colNames, colModel, caption, sortname, gridPagerID,sortorder,height,width,
  134. multiselect,rownumbers);
  135. }
  136. </script>
  137. <style type="text/css">
  138. fieldset legend {
  139. color:#302A2A;
  140. font: bold 16px/2 Verdana, Geneva, sans-serif;
  141. font-weight: bold;
  142. text-align: left;
  143. text-shadow: 2px 2px 2px rgb(88, 126, 156);
  144. }
  145. </style>
  146. </head>
  147. <body>
  148. <form action="loadfactortopindex.action" method="post" id="f1">
  149. <fieldset style="height: 60px" id="fst">
  150. <legend class="item_Name">查询条件</legend>
  151. <table width="1200px" cellpadding="0" cellspacing="0" class="dataform">
  152. <tr>
  153. <th width="100px" class="item_Name">
  154. 类型:
  155. </th>
  156. <td width="100px" >
  157. <s:select list="#{'fc':'风场'}" cssStyle="width:100px" id="type" name="type" onchange="javascript:changeFc(this.value);"></s:select>
  158. </td>
  159. <th width="100px" class="item_Name">
  160. 风场:
  161. </th>
  162. <td width="200px" >
  163. <s:select list="wps" cssStyle="width:200px" listKey="id" listValue="name" id="wpId" name="wpId" headerKey="" headerValue="请选择" onchange="javascript:queryData();"></s:select>
  164. </td>
  165. <th width="100px" class="item_Name">
  166. 开始日期
  167. </th>
  168. <td width="100px" style="text-align: left">
  169. <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})"
  170. id="beginDate" name="beginDate" title="开始日期" onchange="javascript:queryData();"/>
  171. </td>
  172. <th width="100px" class="item_Name">
  173. 结束日期
  174. </th>
  175. <td width="100px" style="text-align: left">
  176. <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})"
  177. id="endDate" name="endDate" title="结束日期" onchange="javascript:queryData();"/>
  178. </td>
  179. <td width="200px" style="text-align: right">
  180. <a href="#" onclick="javascript:toExcel();" id="toexcel">导出</a>
  181. </td>
  182. </tr>
  183. </table>
  184. </fieldset>
  185. <br/>
  186. <table id='gridTable' >
  187. </table>
  188. <div id='gridPager'></div>
  189. </form>
  190. </body>