fittingtop.jsp 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  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/javascript" src="<%=request.getContextPath()%>/resource/plugin/highslide/highslide-with-html.js"></script>
  8. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resource/plugin/highslide/highslide.css" />
  9. <script type="text/ecmascript" src="<%=request.getContextPath()%>/resource/js/system/jqdatagrid.js"></script>
  10. <script src="<%=request.getContextPath()%>/resource/js/datePicker/WdatePicker.js" type="text/javascript"></script>
  11. <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resource/plugin/jqueryui/css/custom-theme/jquery-ui-1.9.2.custom.css" />
  12. <link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/resource/plugin/jqgrid/css/ui.jqgrid.css" />
  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. <script src="<%=request.getContextPath()%>/resource/js/highcharts/modules/solid-gauge.src.js"></script>
  16. <style type="text/css">
  17. a.url{ /* 统一设置所以样式 */
  18. font-family:Arial;
  19. font-size:12px;
  20. text-align:center;
  21. margin:3px;
  22. }
  23. a:link.url ,a:visited.url{ /* 超链接正常状态、被访问过的样式 */
  24. color:#000000;
  25. padding:4px 10px 4px 10px;
  26. background-color:#f1f1f1;
  27. text-decoration:none;
  28. border-top:1px solid #EEEEEE; /* 边框实现阴影效果 */
  29. border-left:1px solid #EEEEEE;
  30. border-bottom:1px solid #717171;
  31. border-right:1px solid #717171;
  32. }
  33. a:hover.url{ /* 鼠标指针经过时的超链接 */
  34. color:#821818; /* 改变文字颜色 */
  35. padding:5px 8px 3px 12px; /* 改变文字位置 */
  36. background-color:#e2c4c9; /* 改变背景色 */
  37. border-top:1px solid #717171; /* 边框变换,实现“按下去”的效果 */
  38. border-left:1px solid #717171;
  39. border-bottom:1px solid #EEEEEE;
  40. border-right:1px solid #EEEEEE;
  41. }
  42. fieldset legend {
  43. color:#302A2A;
  44. font: bold 16px/2 Verdana, Geneva, sans-serif;
  45. font-weight: bold;
  46. text-align: left;
  47. text-shadow: 2px 2px 2px rgb(88, 126, 156);
  48. }
  49. </style>
  50. <script type="text/javascript">
  51. hs.graphicsDir = '<%=request.getContextPath()%>/resource/plugin/highslide/graphics/';
  52. hs.outlineType = 'rounded-white';
  53. hs.wrapperClassName = 'draggable-header';
  54. var options1;
  55. var chart1;
  56. function changeFc(type){
  57. var url1 = "windfarmAjax.action?type="+type;
  58. $.ajax({
  59. type:"post",
  60. url:url1,
  61. dataType:"json",
  62. success: function(data){
  63. if(data.length != 0){
  64. eval(data);
  65. $("#wpId").empty();
  66. $("#wpId").append("<option value=''>请选择</option>");
  67. for(var i=0; i<data.length; i++){
  68. $("#wpId").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
  69. }
  70. }else{
  71. $("#wpId").append("<option value=''>请选择</option>");
  72. $("#wpId").addOption("请选择","");
  73. }
  74. queryData();
  75. }
  76. });
  77. }
  78. function queryData(){
  79. if("" == $("#beginDate").val()){
  80. alert("请选择查询开始日期!");
  81. }else if("" == $("#endDate").val()){
  82. alert("请选择查询结束日期!");
  83. }
  84. else{
  85. //var wpId=$("#wpId").find("option:selected").val();
  86. //var beginDate=$("#beginDate").val();
  87. //var endDate=$("#endDate").val();
  88. //var url = '<%=request.getContextPath() %>/charts/fittingtoplist1.action?wpId='+wpId
  89. // +"&beginDate="+beginDate +"&endDate="+endDate;
  90. //$("#gridTable").setGridParam({url:url}).trigger("reloadGrid");
  91. $("#gridTable").jqGrid('GridUnload');
  92. showJqGrid();
  93. }
  94. }
  95. function toExcel() {
  96. if("" == $("#beginDate").val()){
  97. alert("请选择查询开始日期!");
  98. }else if("" == $("#endDate").val()){
  99. alert("请选择查询结束日期!");
  100. }
  101. else{
  102. var wpId=$("#wpId").find("option:selected").val();
  103. var beginDate=$("#beginDate").val();
  104. var endDate=$("#endDate").val();
  105. var url = '<%=request.getContextPath() %>/charts/fittingtopExcel.action?wpId='+wpId
  106. +"&beginDate="+beginDate +"&endDate="+endDate;
  107. $('#toexcel').attr('href',url);
  108. }
  109. }
  110. $(document).ready(function () {
  111. showJqGrid();
  112. options1={
  113. chart: {
  114. renderTo: 'container',
  115. type: 'spline'
  116. },
  117. title: {
  118. text: '风功率曲线'
  119. },
  120. tooltip: {
  121. crosshairs:{//控制十字线
  122. width:2
  123. },
  124. crosshairs: true,
  125. shared: true
  126. },
  127. credits: {
  128. enabled: false
  129. },
  130. plotOptions: {
  131. spline: {
  132. dataLabels : {
  133. enabled :false
  134. },
  135. // pointPadding: 0.2,
  136. borderWidth: 0
  137. },
  138. series: {
  139. cursor: 'pointer',
  140. marker: {
  141. radius: 0,
  142. symbol: 'circle' //曲线点类型:"circle", "square", "diamond", "triangle","triangle-down",默认是"circle"
  143. }
  144. }
  145. },
  146. xAxis: {
  147. labels: {
  148. align: 'center'
  149. },
  150. categories:[3.0,3.5,4.0,4.5,5.0,5.5,6.0,6.5,7.0,7.5,8.0,8.5,9.0,9.5,10.0,10.5,11.0,11.5,12.0,12.5,13.0,13.5,14.0,14.5,15.0,15.5,16.0,16.5,17.0,17.5,18.0,18.5,19.0,19.5,20.0,20.5,21.0,21.5,22.0,22.5,23.0,23.5,24.0,24.5,25.0]
  151. },
  152. yAxis: [{
  153. title: {
  154. text: '功率(kW)'
  155. },lineWidth : 1
  156. }],
  157. legend: {
  158. align: 'center',
  159. verticalAlign: 'bottom'
  160. }
  161. };
  162. });
  163. function queryChart(){
  164. var bd=$("#beginDate").val();
  165. var ed=$("#endDate").val();
  166. var wtIds="";
  167. var arr=$("#gridTable").jqGrid('getGridParam', 'selarrrow');
  168. var i=0;
  169. $.each(arr,function(n,value) {
  170. var temp= $("#gridTable").jqGrid('getCell',value,'windturbine');
  171. i++;
  172. wtIds += temp+","
  173. })
  174. wtIds=wtIds.substring(0,wtIds.length-1);
  175. if(i>10)
  176. {
  177. alert("一次最多能选择十台风机!");
  178. }else
  179. {
  180. if(wtIds==""){
  181. alert("请选择风场!");
  182. return;
  183. }
  184. if(bd==""){
  185. alert("请选择开始时间!");
  186. return;
  187. }
  188. if(ed==""){
  189. alert("请选择结束时间!");
  190. return;
  191. }
  192. $.ajax({
  193. url : "queryAp.action?wtIds="+wtIds+"&beginDate="+bd+"&endDate="+ed,
  194. type : "post",
  195. cache : false,
  196. dataType : "json",
  197. data : {},
  198. ifModified : false,
  199. success : function(res) {
  200. var serNames=[];
  201. var speed=res["speed"];
  202. $.each(res["sers"],function(m,obj){
  203. serNames.push(obj);
  204. }
  205. );
  206. chart1 = new Highcharts.Chart(options1);
  207. for(var j=0;j<serNames.length;j++){
  208. var ser={
  209. type: 'spline',
  210. name: serNames[j],
  211. data:res[serNames[j]],
  212. yAxis:0
  213. };
  214. chart1.addSeries(ser);
  215. }
  216. //////////dialog test///////
  217. showDiv1();
  218. ////////////////////////////
  219. }
  220. });
  221. }
  222. }
  223. function showDiv1() {
  224. var hc = $("#container");
  225. // return hs.htmlExpand(obj, {
  226. return hs.htmlExpand(hc[0], {
  227. contentId : 'showDiv2',
  228. width : 1000,
  229. height : 600,
  230. align : 'center',
  231. headingText : '风功率曲线'
  232. });
  233. }
  234. function showJqGrid() {
  235. var wpId=$("#wpId").find("option:selected").val();
  236. var beginDate=$("#beginDate").val();
  237. var endDate=$("#endDate").val();
  238. var id = 'gridTable';
  239. var url = '<%=request.getContextPath() %>/charts/fittingtoplist1.action?wpId='+wpId
  240. +"&beginDate="+beginDate +"&endDate="+endDate;
  241. var datatype = 'json';
  242. var colNames = ['风场', '风机','编码','起始日期','截至日期','平均风速','拟合优度'];
  243. var colModel = [
  244. { name: 'windfarm', index: 'windfarm', width: 200, align: 'center'},
  245. { name: 'windturbine', index: 'windturbine', width: 200, align: 'center',hidden : true},
  246. { name: 'code', index: 'code', width: 80, align: 'center'},
  247. { name: 'beginDate', index: 'beginDate', width: 250, align: 'center',formatter:'date', formatoptions:{newformat:'Y-m-d'},align:'center'},
  248. { name: 'endDate', index: 'endDate', width: 250, align: 'center',formatter:'date', formatoptions:{newformat:'Y-m-d'},align:'center'},
  249. { name: 'speed', index: 'speed', width: 200, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'},
  250. { name: 'power', index: 'power', width: 200, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int' }
  251. ];
  252. var caption = '拟合优度排行榜';
  253. var sortname = 'power';
  254. var gridPagerID ='gridPager';
  255. var sortorder='desc';
  256. var height='auto';
  257. var width='auto';
  258. var rownumbers=true;
  259. var multiselect=true;
  260. myJqGrid(id, url, datatype, colNames, colModel, caption, sortname, gridPagerID,sortorder,height,width,
  261. multiselect,rownumbers);
  262. }
  263. </script>
  264. <style type="text/css">
  265. { /* 统一设置所以样式 */
  266. font-family:Arial;
  267. font-size:12px;
  268. text-align:center;
  269. margin:3px;
  270. }
  271. a:link.url ,a:visited.url{ /* 超链接正常状态、被访问过的样式 */
  272. color:#000000;
  273. padding:4px 10px 4px 10px;
  274. background-color:#f1f1f1;
  275. text-decoration:none;
  276. border-top:1px solid #EEEEEE; /* 边框实现阴影效果 */
  277. border-left:1px solid #EEEEEE;
  278. border-bottom:1px solid #717171;
  279. border-right:1px solid #717171;
  280. }
  281. a:hover.url{ /* 鼠标指针经过时的超链接 */
  282. color:#821818; /* 改变文字颜色 */
  283. padding:5px 8px 3px 12px; /* 改变文字位置 */
  284. background-color:#e2c4c9; /* 改变背景色 */
  285. border-top:1px solid #717171; /* 边框变换,实现“按下去”的效果 */
  286. border-left:1px solid #717171;
  287. border-bottom:1px solid #EEEEEE;
  288. border-right:1px solid #EEEEEE;
  289. }
  290. fieldset legend {
  291. color:#302A2A;
  292. font: bold 16px/2 Verdana, Geneva, sans-serif;
  293. font-weight: bold;
  294. text-align: left;
  295. text-shadow: 2px 2px 2px rgb(88, 126, 156);
  296. }
  297. </style>
  298. </head>
  299. <body>
  300. <form action="fittingtopindex.action" method="post" id="f1">
  301. <div class="highslide-html-content" id="showDiv2" style="width: 1100">
  302. <div class="highslide-header">
  303. <ul>
  304. <li class="highslide-move">
  305. <a href="#" onclick="return false">Move</a>
  306. </li>
  307. <li class="highslide-close" >
  308. <a href="#" onclick="return hs.close(this)"></a>
  309. </li>
  310. </ul>
  311. </div>
  312. <div class="highslide-body" id="container" style="width: 1000px">
  313. </div>
  314. </div>
  315. <fieldset style="height: 60px" id="fst">
  316. <legend class="item_Name">查询条件</legend>
  317. <table width="1200px" cellpadding="0" cellspacing="0" class="dataform">
  318. <tr>
  319. <th width="150px" class="item_Name">
  320. 风场:
  321. </th>
  322. <td width="200px" class="item_Name">
  323. <s:select list="wps" cssStyle="width:200px" listKey="id" listValue="name" id="wpId" name="wpId" headerKey="" headerValue="请选择" onchange="javascript:queryData();"></s:select>
  324. </td>
  325. <th width="100px" class="item_Name">
  326. 开始日期
  327. </th>
  328. <td width="100px" style="text-align: left">
  329. <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})"
  330. id="beginDate" name="beginDate" title="开始日期" onchange="javascript:queryData();"/>
  331. </td>
  332. <th width="100px" class="item_Name">
  333. 结束日期
  334. </th>
  335. <td width="100px" style="text-align: left">
  336. <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})"
  337. id="endDate" name="endDate" title="结束日期" onchange="javascript:queryData();"/>
  338. </td>
  339. <td width="200px" style="text-align: right">
  340. <a href="#" onclick="javascript:queryChart();" class="url" >生成曲线</a>
  341. <a href="#" onclick="javascript:toExcel();" class="url" id="toexcel">导出</a>
  342. </td>
  343. </tr>
  344. </table>
  345. </fieldset>
  346. <br/>
  347. <table id='gridTable' ></table>
  348. </form>
  349. </body>