historypower.jsp 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%@include file="/pages/includes/taglibs.jsp" %>
  3. <head>
  4. <link href="<%=request.getContextPath() %>/resource/css/hbsj/index.css" rel="stylesheet" type="text/css" />
  5. <script type='text/javascript' src='<%=request.getContextPath() %>/resource/js/jquery-1.8.3.js'></script>
  6. <script type="text/javascript"
  7. src="<%=request.getContextPath()%>/resource/plugin/highslide/highslide-with-html.js">
  8. </script>
  9. <link rel="stylesheet" type="text/css"
  10. href="<%=request.getContextPath()%>/resource/plugin/highslide/highslide.css" />
  11. <script
  12. src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts.src.js"
  13. type="text/javascript">
  14. </script>
  15. <script
  16. src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts-more.js">
  17. </script>
  18. <script
  19. src="<%=request.getContextPath()%>/resource/js/highcharts/modules/solid-gauge.src.js">
  20. </script>
  21. <script type="text/ecmascript"
  22. src="<%=request.getContextPath()%>/resource/plugin/jqgrid/js/jquery.jqGrid.min.js">
  23. </script>
  24. <script type="text/ecmascript"
  25. src="<%=request.getContextPath()%>/resource/plugin/jqgrid/js/i18n/grid.locale-cn.js">
  26. </script>
  27. <link rel="stylesheet" type="text/css"
  28. href="<%=request.getContextPath()%>/resource/plugin/jqueryui/css/custom-theme/jquery-ui-1.9.2.custom.css" />
  29. <script type='text/javascript' src='<%=request.getContextPath() %>/pages/apdata/historypower.js'></script>
  30. <script src="<%=request.getContextPath()%>/resource/js/datePicker/WdatePicker.js" type="text/javascript"></script>
  31. <style type="text/css">
  32. a{ /* 统一设置所以样式 */
  33. font-family:Arial;
  34. font-size:12px;
  35. text-align:center;
  36. margin:3px;
  37. }
  38. a:link,a:visited{ /* 超链接正常状态、被访问过的样式 */
  39. color:#000000;
  40. padding:4px 10px 4px 10px;
  41. background-color:#f1f1f1;
  42. text-decoration:none;
  43. border-top:1px solid #EEEEEE; /* 边框实现阴影效果 */
  44. border-left:1px solid #EEEEEE;
  45. border-bottom:1px solid #717171;
  46. border-right:1px solid #717171;
  47. }
  48. a:hover{ /* 鼠标指针经过时的超链接 */
  49. color:#821818; /* 改变文字颜色 */
  50. padding:5px 8px 3px 12px; /* 改变文字位置 */
  51. background-color:#e2c4c9; /* 改变背景色 */
  52. border-top:1px solid #717171; /* 边框变换,实现“按下去”的效果 */
  53. border-left:1px solid #717171;
  54. border-bottom:1px solid #EEEEEE;
  55. border-right:1px solid #EEEEEE;
  56. }
  57. fieldset legend {
  58. color:#302A2A;
  59. font: bold 16px/2 Verdana, Geneva, sans-serif;
  60. font-weight: bold;
  61. text-align: left;
  62. text-shadow: 2px 2px 2px rgb(88, 126, 156);
  63. }
  64. </style>
  65. <script type="text/javascript">
  66. $(function() {
  67. var bch = document.documentElement.clientHeight;
  68. var h = bch-60;
  69. $("#container1").css("height", h - 60);
  70. $("#wpId").val('<s:property value="wpId"/>');
  71. $("#period").val('<s:property value="period"/>')
  72. apdata();
  73. });
  74. function queryData() {
  75. apdata();
  76. }
  77. </script>
  78. <style type="text/css">
  79. fieldset legend {
  80. color:#302A2A;
  81. font: bold 16px/2 Verdana, Geneva, sans-serif;
  82. font-weight: bold;
  83. text-align: left;
  84. text-shadow: 2px 2px 2px rgb(88, 126, 156);
  85. }
  86. </style>
  87. </head>
  88. <body>
  89. <form>
  90. <fieldset style="height: 60px" id="fst">
  91. <legend class="item_Name">查询条件</legend>
  92. <table width="1200px" cellpadding="0" cellspacing="0" class="dataform">
  93. <tr>
  94. <th width="100px" class="item_Name">
  95. 风场:
  96. </th>
  97. <td width="120px" class="item_Name">
  98. <s:select list="wps" cssStyle="width:120px;cursor:pointer;" listKey="id" listValue="name" id="wpId" name="wpId" headerKey="0" headerValue="所有风场"></s:select>
  99. </td>
  100. <th width="100px" class="item_Name">
  101. 开始时间
  102. </th>
  103. <td width="100px" style="text-align: left">
  104. <!-- 因为状态监视中功率预测曲线时间间隔为半小时 因此此处只能选择半小时和前者一致 -->
  105. <s:textfield style="cursor:pointer;" cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:00',isShowWeek:true,readOnly:true,
  106. disabledDates:[
  107. '....-..-.. ..\:05\:00',
  108. '....-..-.. ..\:10\:00',
  109. '....-..-.. ..\:15\:00',
  110. '....-..-.. ..\:20\:00',
  111. '....-..-.. ..\:25\:00',
  112. '....-..-.. ..\:35\:00',
  113. '....-..-.. ..\:40\:00',
  114. '....-..-.. ..\:45\:00',
  115. '....-..-.. ..\:50\:00',
  116. '....-..-.. ..\:55\:00'
  117. ]})"
  118. id="beginDate" value='<s:date name="beginDate" format="yyyy-MM-dd HH:mm:00" />' title="开始日期">
  119. <s:param name="value">
  120. <s:date name="beginDate" format="yyyy-MM-dd HH:mm:00"/>
  121. </s:param>
  122. </s:textfield>
  123. </td>
  124. <th width="100px" class="item_Name">
  125. 结束时间
  126. </th>
  127. <td width="100px" style="text-align: left">
  128. <s:textfield style="cursor:pointer;" cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:00',maxDate:'%y-%M-%d %H:%m:00',isShowWeek:true,readOnly:true,
  129. disabledDates:[
  130. '....-..-.. ..\:05\:00',
  131. '....-..-.. ..\:10\:00',
  132. '....-..-.. ..\:15\:00',
  133. '....-..-.. ..\:20\:00',
  134. '....-..-.. ..\:25\:00',
  135. '....-..-.. ..\:35\:00',
  136. '....-..-.. ..\:40\:00',
  137. '....-..-.. ..\:45\:00',
  138. '....-..-.. ..\:50\:00',
  139. '....-..-.. ..\:55\:00'
  140. ]})"
  141. id="endDate" title="结束日期">
  142. <s:param name="value">
  143. <s:date name="endDate" format="yyyy-MM-dd HH:mm:00"/>
  144. </s:param>
  145. </s:textfield>
  146. </td>
  147. <th width="100px" class="item_Name">
  148. 时间间隔:
  149. </th>
  150. <td width="100px" style="text-align: left">
  151. <!-- 因为风功率预测点 时间间隔为15分钟 因此设置为最小时间间隔 -->
  152. <select id="period" name="period" style="cursor:pointer;">
  153. <option value="">请选择</option>
  154. <option value="900">15分钟</option>
  155. <option value="1800">30分钟</option>
  156. <option value="3600">1小时</option>
  157. <option value="7200">2小时</option>
  158. <select>
  159. </td>
  160. <td width="100px" style="text-align: left">
  161. <a href="#" onclick="javascript:queryData();">查询</a>
  162. </td>
  163. </tr>
  164. </table>
  165. </fieldset>
  166. <fieldset>
  167. <legend class="item_Name">功率曲线</legend>
  168. <div id="container1" style="height: 600px;"></div>
  169. </div>
  170. </fieldset>
  171. </form>
  172. </body>