analysisday.jsp 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  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. <link rel="stylesheet" href="<%=request.getContextPath()%>/resource/css/ztree/zTreeStyle.css" type="text/css">
  12. <script src="<%=request.getContextPath()%>/resource/js/ztree/jquery.ztree.all.min.js" type="text/javascript"></script>
  13. <script src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts.src.js" type="text/javascript"></script>
  14. <script src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts-more.js"> </script>
  15. <style type="text/css">
  16. .normal {
  17. border-right-style: solid;
  18. border-bottom-style: solid;
  19. border-left-style: solid;
  20. border-top-style: solid;
  21. border-top-color: #ffffff;
  22. border-left-color: #c1c1c1;
  23. border-right-color: #c1c1c1;
  24. border-bottom-color: #c1c1c1;
  25. border-width: 1px;
  26. width: 100px;
  27. height: 28px;
  28. float: left;
  29. margin-top: -1px;
  30. cursor: pointer;
  31. text-align: center;
  32. line-height: 28px;
  33. overflow: hidden;
  34. font-weight: bold;
  35. font-size: 12px;
  36. font-family: tahoma, arial, verdana, sans-serif;
  37. }
  38. .disable {
  39. border-right-style: solid;
  40. border-bottom-style: solid;
  41. border-left-style: solid;
  42. border-top-style: solid;
  43. border-top-color: #c1c1c1;
  44. border-left-color: #c1c1c1;
  45. border-right-color: #c1c1c1;
  46. border-bottom-color: #c1c1c1;
  47. border-width: 1px;
  48. width: 100px;
  49. height: 25px;
  50. float: left;
  51. margin-top: -1px;
  52. cursor: pointer;
  53. text-align: center;
  54. background-color: #e1e1e1;
  55. line-height: 25px;
  56. overflow: hidden;
  57. font-weight: bold;
  58. font-size: 12px;
  59. font-family: tahoma, arial, verdana, sans-serif;
  60. }
  61. .panelcontainer {
  62. width: 100%;
  63. height: 70px;
  64. border-style: solid;
  65. border-color: #C1C1C1;
  66. border-width: 1px;
  67. }
  68. .panelquery {
  69. width: 100%;
  70. height: 25px;
  71. background-color: #c1c1c1;
  72. line-height: 25px;
  73. }
  74. .panelquerytext {
  75. margin-left: 3px;
  76. font-weight: bold;
  77. font-size: 12px;
  78. font-family: tahoma, arial, verdana, sans-serif;
  79. }
  80. .querycondcontainer {
  81. line-height: 39px;
  82. padding: 3px;
  83. float: left;
  84. font-size: 12px;
  85. }
  86. </style>
  87. <script type="text/javascript">
  88. function queryData(){
  89. var recorddate = $("#recorddate").val();
  90. var windfarm=$("#windfarm").val();
  91. if (windfarm == "") {
  92. alert("请选择风场!");
  93. return;
  94. }
  95. if (recorddate == "") {
  96. alert("请选择开始时间!");
  97. return;
  98. }
  99. //var temp = "analysislist.action?windfarm=" + windfarm + "&recorddate=" + recorddate;
  100. //var url = encodeURI(encodeURI(temp));
  101. //$("#gridTable").setGridParam({url:url}).trigger("reloadGrid");
  102. $("#gridTable").jqGrid('GridUnload');
  103. showJqGrid();
  104. createPolarChat();
  105. }
  106. var series;
  107. var options1;
  108. var options2;
  109. var chart1;
  110. var chart2;
  111. $(document).ready(function () {
  112. initial();
  113. showJqGrid();
  114. createPolarChat();
  115. });
  116. function initial()
  117. {
  118. $("#windfarm").attr("value", '<s:property value="windfarm"/>');
  119. $("#recorddate").attr("value", '<s:property value="recorddate"/>');
  120. /******************************************玫瑰图1***********************************************/
  121. options1 = {
  122. chart: {
  123. renderTo : 'fzy1',
  124. polar: true,
  125. type: 'area'
  126. },
  127. title: {
  128. text: '',
  129. x: 0
  130. },
  131. pane: {
  132. size: '80%'
  133. },
  134. xAxis: {
  135. categories: ['发电量排行', '上网电量排行', '利用小时排行', '设备可利用率排行','综合场用电率排行', '等效可利用率排行'
  136. ],
  137. tickmarkPlacement: 'on',
  138. lineWidth: 0
  139. },
  140. yAxis: {
  141. gridLineInterpolation: 'polygon',
  142. lineWidth: 0,
  143. min: 0
  144. },
  145. tooltip: {
  146. shared: true,
  147. pointFormat: '<span style="color:{series.color}"> <b>{point.y:,.0f}</b><br/>'
  148. },
  149. series: [{
  150. name: '月排行区域分析',
  151. data: [],
  152. pointPlacement: 'on'
  153. }]
  154. }
  155. /******************************************玫瑰图2**********************************************/
  156. options2 = {
  157. chart: {
  158. renderTo : 'fzy2',
  159. polar: true,
  160. type: 'area'
  161. },
  162. title: {
  163. text: '',
  164. x: 0
  165. },
  166. pane: {
  167. size: '80%'
  168. },
  169. xAxis: {
  170. categories: ['发电量排行', '上网电量排行', '利用小时排行', '设备可利用率排行','综合场用电率排行', '等效可利用率排行'
  171. ],
  172. tickmarkPlacement: 'on',
  173. lineWidth: 0
  174. },
  175. yAxis: {
  176. gridLineInterpolation: 'polygon',
  177. lineWidth: 0,
  178. min: 0
  179. },
  180. tooltip: {
  181. shared: true,
  182. pointFormat: '<span style="color:{series.color}"> <b>{point.y:,.0f}</b><br/>'
  183. },
  184. series: [{
  185. name: '年排行区域分析',
  186. data: [],
  187. pointPlacement: 'on'
  188. }]
  189. }
  190. }
  191. function createPolarChat()
  192. {
  193. var recorddate = $("#recorddate").val();
  194. var windfarm = $("#windfarm").val();
  195. var url = "monthtop.action?windfarm=" + windfarm
  196. + "&recorddate=" + recorddate ;
  197. $.ajax( {
  198. url : url,
  199. type : "post",
  200. cache : false,
  201. dataType : "json",
  202. data : {},
  203. ifModified : false,
  204. success : function(result) {
  205. var data1 = [];
  206. if(result.data !=null)
  207. {
  208. $.each(result.data, function(m, obj) {
  209. if (obj.data1 != null) {
  210. data1.push(parseFloat(obj.data1));
  211. }
  212. });
  213. if(null !=options1.series[0])
  214. {
  215. options1.series[0].data = data1;
  216. }
  217. chart1 = new Highcharts.Chart(options1);
  218. }
  219. }
  220. });
  221. /******************************************玫瑰图2**********************************************/
  222. url = "yeartop.action?windfarm=" + windfarm
  223. + "&recorddate=" + recorddate ;
  224. $.ajax( {
  225. url : url,
  226. type : "post",
  227. cache : false,
  228. dataType : "json",
  229. data : {},
  230. ifModified : false,
  231. success : function(result) {
  232. var data1 = [];
  233. if(result.data !=null)
  234. {
  235. $.each(result.data, function(m, obj) {
  236. if (obj.data1 != null) {
  237. data1.push(parseFloat(obj.data1));
  238. }
  239. });
  240. if(null !=options2.series[0])
  241. {
  242. options2.series[0].data = data1;
  243. }
  244. chart2 = new Highcharts.Chart(options2);
  245. }
  246. }
  247. });
  248. }
  249. function showJqGrid() {
  250. var recorddate = $("#recorddate").val();
  251. var windfarm = $("#windfarm").val();
  252. var temp = "analysislist.action?windfarm=" + windfarm + "&recorddate=" + recorddate;
  253. var url = encodeURI(encodeURI(temp));
  254. var id = 'gridTable';
  255. var datatype = 'json';
  256. var colNames = ['发电量', '上网电量','功率','风速','利用小时','设备可利用率'
  257. , '等效可利用率','综合场用电率','故障损失电量','维护损失电量','限电损失电量'
  258. , '性能损失电量'
  259. ];
  260. var colModel = [
  261. { name: 'generatingcapacity', index: 'generatingcapacity', width: 120, align: 'center'},
  262. { name: 'gridelectricity', index: 'gridelectricity', width: 120, align: 'center'},
  263. { name: 'power', index: 'power', width: 120, align: 'center'},
  264. { name: 'speed', index: 'speed', width: 120, align: 'center'},
  265. { name: 'daylyxs', index: 'daylyxs', width: 120, align: 'center'},
  266. { name: 'daysbklyl', index: 'daysbklyl', width: 120, align: 'center'},
  267. { name: 'daydxkyxs', index: 'daydxkyxs', width: 120, align: 'center'},
  268. { name: 'dayzhcydl', index: 'dayzhcydl', width: 120, align: 'center'},
  269. { name: 'lossofpower2', index: 'lossofpower2', width: 120, align: 'center'},
  270. { name: 'lossofpower3', index: 'lossofpower3', width: 120, align: 'center'},
  271. { name: 'lossofpower1', index: 'lossofpower1', width: 120, align: 'center'},
  272. { name: 'lossofpower4', index: 'lossofpower4', width: 120, align: 'center'}
  273. ];
  274. var caption = '风电场历史日信息查看';
  275. var sortname = 'generatingCapacity';
  276. var gridPagerID ='gridPager';
  277. var sortorder='desc';
  278. var height='auto';
  279. var width='auto';
  280. var rownumbers=true;
  281. var multiselect=false;
  282. myJqGrid(id, url, datatype, colNames, colModel, caption, sortname, gridPagerID,sortorder,height,width,
  283. multiselect,rownumbers);
  284. }
  285. </script>
  286. <style type="text/css">
  287. fieldset legend {
  288. color:#302A2A;
  289. font: bold 16px/2 Verdana, Geneva, sans-serif;
  290. font-weight: bold;
  291. text-align: left;
  292. text-shadow: 2px 2px 2px rgb(88, 126, 156);
  293. }
  294. </style>
  295. </head>
  296. <body>
  297. <form action="analysisindex.action" method="post" id="f1">
  298. <fieldset style="height: 60px" id="fst">
  299. <legend class="item_Name">查询条件</legend>
  300. <table width="500px" cellpadding="0" cellspacing="0" class="dataform">
  301. <tr>
  302. <th width="100px" class="item_Name">
  303. 风场:
  304. </th>
  305. <td width="100px" class="item_Name">
  306. <s:select list="wps" cssStyle="width:100px" listKey="id" listValue="name" id="windfarm" name="windfarm" headerKey="" headerValue="请选择" onchange="javascript:queryData();"></s:select>
  307. </td>
  308. <th width="100px" class="item_Name">
  309. 日期
  310. </th>
  311. <td width="100px" style="text-align: left">
  312. <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})"
  313. id="recorddate" name="recorddate" title="日期" onchange="javascript:queryData();"/>
  314. </td>
  315. </tr>
  316. </table>
  317. </fieldset>
  318. <br/>
  319. <table id='gridTable' >
  320. </table>
  321. <div id='gridPager' style="width: 0px;height: 0px"></div>
  322. <br/>
  323. <div>
  324. <div id="fzy1"
  325. style="background-color: '#ffffff'; width: 720px; height: 400px;float: left;"></div>
  326. <div style="width: 5px;float: left;height: 400px;"></div>
  327. <div id="fzy2"
  328. style="background-color: '#ffffff'; width: 720px; height: 400px;float: left;"></div>
  329. <div style="clear:both;width: 0px;height: 0px"></div>
  330. </div>
  331. </form>
  332. </body>