compareownmonth.jsp 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  1. <%@ page language="java" contentType="text/html;charset=utf-8"%>
  2. <%@include file="/pages/includes/taglibs.jsp"%>
  3. <head>
  4. <script type="text/javascript"
  5. src="<%=request.getContextPath()%>/resource/js/jquery-1.8.3.js">
  6. </script>
  7. <script type="text/ecmascript"
  8. src="<%=request.getContextPath()%>/resource/plugin/jqgrid/js/jquery.jqGrid.min.js">
  9. </script>
  10. <script type="text/ecmascript"
  11. src="<%=request.getContextPath()%>/resource/plugin/jqgrid/js/i18n/grid.locale-cn.js">
  12. </script>
  13. <script type="text/ecmascript"
  14. src="<%=request.getContextPath()%>/resource/js/system/jqdatagridpage.js">
  15. </script>
  16. <script
  17. src="<%=request.getContextPath()%>/resource/js/datePicker/WdatePicker.js"
  18. type="text/javascript">
  19. </script>
  20. <link rel="stylesheet" type="text/css"
  21. href="<%=request.getContextPath()%>/resource/plugin/jqueryui/css/custom-theme/jquery-ui-1.9.2.custom.css" />
  22. <link rel="stylesheet" type="text/css" media="screen"
  23. href="<%=request.getContextPath()%>/resource/plugin/jqgrid/css/ui.jqgrid.css" />
  24. <link rel="stylesheet"
  25. href="<%=request.getContextPath()%>/resource/css/ztree/zTreeStyle.css"
  26. type="text/css">
  27. <script
  28. src="<%=request.getContextPath()%>/resource/js/ztree/jquery.ztree.all.min.js"
  29. type="text/javascript">
  30. </script>
  31. <script
  32. src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts.src.js"
  33. type="text/javascript">
  34. </script>
  35. <script
  36. src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts-more.js">
  37. </script>
  38. <script type="text/javascript">
  39. var inital=1;
  40. function changeFc(windfarm, windturbineid) {
  41. var url = "../warn/changeFc.action?fcId=" + windfarm;
  42. $.ajax( {
  43. type : "post",
  44. url : url,
  45. dataType : "json",
  46. success : function(data) {
  47. if (data.length != 0) {
  48. eval(data);
  49. $("#windturbineid").empty();
  50. for ( var i = 0; i < data.length; i++) {
  51. $("#windturbineid").append(
  52. "<option value='" + data[i].id + "'>" + data[i].code
  53. + "</option>");
  54. }
  55. $("#windturbineid").val(windturbineid);
  56. } else {
  57. $("#windturbineid").empty();
  58. }
  59. }
  60. });
  61. if(inital!=1)
  62. {
  63. setTimeout(queryData, 1000 );
  64. }else
  65. {
  66. inital++;
  67. }
  68. }
  69. var series;
  70. var options;
  71. var chart;
  72. $(function() {
  73. var wf = '<s:property value="windfarm"/>';
  74. var wt = '<s:property value="windturbineid"/>';
  75. var year = '<s:property value="year"/>';
  76. var month = '<s:property value="month"/>';
  77. changeFc(wf, wt);
  78. $("#year").val(year);
  79. $("#month").val(month);
  80. showJqGrid();
  81. options = {
  82. chart : {
  83. renderTo : 'container',
  84. width:1600,
  85. height:300,
  86. type : 'line'
  87. },
  88. title : {
  89. text : '功率曲线'
  90. },
  91. xAxis : {
  92. categories : [],
  93. labels : {
  94. rotation : -45,
  95. align : 'right',
  96. style : {
  97. fontSize : '13px',
  98. fontFamily : 'Verdana, sans-serif'
  99. }
  100. }
  101. },
  102. yAxis : {
  103. title : {
  104. text : '功率(kW)'
  105. }
  106. },
  107. tooltip : {
  108. headerFormat : '<b>{series.name}</b><br/>',
  109. pointFormat : ' {point.y}MW'
  110. },
  111. plotOptions : {
  112. spline : {
  113. marker : {
  114. enable : false
  115. }
  116. }
  117. },
  118. series : [ {
  119. name : '实际功率',
  120. data : []
  121. }, {
  122. name : '最优拟合功率',
  123. data : []
  124. }, {
  125. name : '保证功率',
  126. data : []
  127. } ]
  128. }
  129. chartAjax();
  130. })
  131. var temp = 0;
  132. function chartAjax() {
  133. var url;
  134. var year = $("#year").val();
  135. var month = $("#month").val();
  136. var windturbineid = $("#windturbineid").val();
  137. var windfarm = $("#windfarm").val();
  138. url = "../compareown/comparemonthchatAjax.action?windfarm=" + windfarm + "&windturbineid="
  139. + windturbineid + "&year=" + year+ "&month=" + month;
  140. $.ajax( {
  141. url : url,
  142. type : "get",
  143. cache : false,
  144. dataType : "json",
  145. data : {},
  146. ifModified : false,
  147. success : function(result) {
  148. var sj = [];
  149. var zy = [];
  150. var bz = [];
  151. var fu = [];
  152. if (null != result) {
  153. $.each(result, function(m, obj) {
  154. if (obj.value1 != null) {
  155. fu.push(parseFloat(obj.value1));
  156. }
  157. if (obj.value2 != null) {
  158. sj.push(parseFloat(obj.value2));
  159. }
  160. if (obj.value3 != null) {
  161. zy.push(parseFloat(obj.value3));
  162. }
  163. if (obj.value4 != null) {
  164. bz.push(parseFloat(obj.value4));
  165. }
  166. });
  167. }
  168. options.series[0].data = sj;
  169. options.series[1].data = zy;
  170. options.series[2].data = bz;
  171. options.xAxis.categories = fu;
  172. chart = new Highcharts.Chart(options);
  173. //alert(options.xAxis.categories);
  174. }
  175. });
  176. }
  177. function queryData() {
  178. var year = $("#year").val();
  179. var month = $("#month").val();
  180. var windturbineid = $("#windturbineid").val();
  181. var windfarm = $("#windfarm").val();
  182. if (windfarm == "") {
  183. alert("请选择风场!");
  184. return;
  185. }
  186. if (windturbineid == "") {
  187. alert("请选择风机!");
  188. return;
  189. }
  190. $("#gridTable").jqGrid('GridUnload');
  191. showJqGrid();
  192. chartAjax();
  193. }
  194. function editData(id) {
  195. $("#f1").attr("action", "updatemonthindex.action?wtid=" + id).submit();
  196. }
  197. function toExcel() {
  198. var year = $("#year").val();
  199. var month = $("#month").val();
  200. var windturbineid = $("#windturbineid").val();
  201. var windfarm = $("#windfarm").val();
  202. if (windfarm == "") {
  203. alert("请选择风场!");
  204. return;
  205. }
  206. if (windturbineid == "") {
  207. alert("请选择风机!");
  208. return;
  209. }
  210. if (recorddate == "") {
  211. alert("请选择日期!");
  212. return;
  213. }
  214. var temp = "comparemonthExcel.action?windfarm=" + windfarm + "&windturbineid="
  215. + windturbineid + "&year=" + year+ "&month=" + month;
  216. var url = encodeURI(encodeURI(temp));
  217. $('#toexcel').attr('href', url);
  218. }
  219. function displaybuttons(cellvalue, options, rawObject) {
  220. var recorddate = $("#recorddate").val();
  221. var detail = "<input type='button' value='修改' onclick=editData('"
  222. + rawObject.id + "','" + recorddate + "')>";
  223. return "&nbsp;&nbsp;&nbsp;\t" + detail;
  224. };
  225. function showJqGrid() {
  226. var year = $("#year").val();
  227. var month = $("#month").val();
  228. var windturbineid = $("#windturbineid").val();
  229. var windfarm = $("#windfarm").val();
  230. var id = 'gridTable';
  231. var url = '<%=request.getContextPath()%>/compareown/comparemonthlist.action?windfarm='
  232. + windfarm
  233. + "&year="
  234. + year
  235. + "&month="
  236. + month
  237. + "&windturbineid="
  238. + windturbineid;
  239. var datatype = 'json';
  240. var colNames = [ '编号', '风机','编号', '风速', '实际功率', '最优拟合功率', '操作' ];
  241. var colModel = [
  242. {
  243. name : 'id',
  244. index : 'id',
  245. width : 100,
  246. align : 'center',
  247. hidden : true
  248. }, {
  249. name : 'windturbineid',
  250. index : 'windturbineid',
  251. width : 200,
  252. align : 'center',
  253. hidden : true
  254. }, {
  255. name : 'code',
  256. index : 'code',
  257. width : 200,
  258. align : 'center'
  259. }, {
  260. name : 'speed',
  261. index : 'speed',
  262. width : 200,
  263. align : 'center'
  264. }, {
  265. name : 'actualpower',
  266. actualpower : 'modelid',
  267. width : 200,
  268. align : 'center'
  269. }, {
  270. name : 'optimalpower',
  271. index : 'optimalpower',
  272. width : 200,
  273. align : 'center'
  274. }, {
  275. name : 'optimalpower',
  276. index : 'optimalpower',
  277. width : 200,
  278. align : 'center',
  279. formatter : displaybuttons
  280. } ];
  281. var caption = '单机月功率信息列表';
  282. var sortname = 'speed';
  283. var gridPagerID = 'gridPager';
  284. var sortorder = 'asc';
  285. var height='300';
  286. var width='1600';
  287. var rownumbers = true;
  288. var multiselect = false;
  289. myJqGrid(id, url, datatype, colNames, colModel, caption, sortname,
  290. gridPagerID, sortorder, height, width, multiselect, rownumbers);
  291. }
  292. </script>
  293. <style type="text/css">
  294. .a { /* 统一设置所以样式 */
  295. font-family: Arial;
  296. font-size: 12px;
  297. text-align: center;
  298. margin: 3px;
  299. }
  300. .a:link,a:visited { /* 超链接正常状态、被访问过的样式 */
  301. color: #fff;
  302. padding: 4px 10px 4px 10px;
  303. background-color: #083772;
  304. text-decoration: none;
  305. border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */
  306. border-left: 1px solid #EEEEEE;
  307. border-bottom: 1px solid #717171;
  308. border-right: 1px solid #717171;
  309. }
  310. .a:hover { /* 鼠标指针经过时的超链接 */
  311. color: #fff; /* 改变文字颜色 */
  312. padding: 5px 8px 3px 12px; /* 改变文字位置 */
  313. background-color: #083772; /* 改变背景色 */
  314. border-top: 1px solid #717171; /* 边框变换,实现“按下去”的效果 */
  315. border-left: 1px solid #717171;
  316. border-bottom: 1px solid #EEEEEE;
  317. border-right: 1px solid #EEEEEE;
  318. }
  319. </style>
  320. </head>
  321. <body>
  322. <form action="" method="post" id="f1">
  323. <fieldset style="height: 50px" id="fst">
  324. <legend class="item_Name">
  325. 查询条件
  326. </legend>
  327. <table width="100%" cellpadding="0" cellspacing="0" class="dataform">
  328. <tr>
  329. <th width="5%" class="item_Name">
  330. 风电电场:
  331. </th>
  332. <td width="20%">
  333. <s:if test="u.wpId == null">
  334. <s:select list="wps" cssStyle="width:90%" listKey="id"
  335. listValue="name" id="windfarm" name="windfarm" headerKey=""
  336. headerValue="请选择" onchange="javascript:changeFc(this.value);"></s:select>
  337. </s:if>
  338. <s:else>
  339. <s:select list="wps" cssStyle="width:90%" listKey="id"
  340. listValue="name" id="windfarm" name="windfarm" headerKey=""
  341. headerValue="请选择" onchange="javascript:changeFc(this.value);"></s:select>
  342. </s:else>
  343. </td>
  344. <th width="5%" class="item_Name">
  345. 风机:
  346. </th>
  347. <td width="20%">
  348. <select name="windturbineid" id="windturbineid" style="width: 90%"
  349. onchange="javascript:queryData();">
  350. <option value="">
  351. 请选择
  352. </option>
  353. </select>
  354. </td>
  355. <th width="5%" class="item_Name">
  356. </th>
  357. <td width="20%" style="text-align: left">
  358. <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy',isShowWeek:true,readOnly:true})"
  359. id="year" name="year" title="年" onchange="javascript:queryData();"/>
  360. </td>
  361. <th width="5%" class="item_Name">
  362. </th>
  363. <td width="20%" style="text-align: left">
  364. <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'M',isShowWeek:true,readOnly:true})"
  365. id="month" name="month" title="月" onchange="javascript:queryData();"/>
  366. </td>
  367. </tr>
  368. </table>
  369. </fieldset>
  370. <table id='gridTable'>
  371. </table>
  372. <div id='gridPager'></div>
  373. <div id="container"
  374. style="background-color: '#ffffff'; vertical-align: middle; width: 100%; height: 100%"></div>
  375. </form>
  376. </body>