warningstatisticaltop.jsp 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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" href="<%=request.getContextPath() %>/resource/plugin/jqgrid/css/ui.jqgrid.css" />
  11. <script type="text/javascript">
  12. function thisPage(){
  13. $("#f1").attr("action","warningStatisticalTop.action").submit();
  14. }
  15. function queryClear(){
  16. $("#wfId").val("");
  17. $("#beginDate").val("");
  18. $("#endDate").val("");
  19. }
  20. function queryData(){
  21. if("" == $("#beginDate").val()){
  22. alert("请选择查询开始日期!");
  23. }else if("" == $("#endDate").val()){
  24. alert("请选择查询结束日期!");
  25. }else if(Date.parse($("#beginDate").val().replace(/-/g,"/"))>=Date.parse($("#endDate").val().replace(/-/g,"/"))){
  26. alert("结束时间应大于开始时间!");
  27. }
  28. else{
  29. $("#column").attr("src","querywarningStatisticalTopColumn.action?wfId="+$("#wfId").val()+"&beginDate="+$("#beginDate").val()+"&endDate="+$("#endDate").val());
  30. $("#pie").attr("src","querywarningStatisticalTopPie.action?wfId="+$("#wfId").val()+"&beginDate="+$("#beginDate").val()+"&endDate="+$("#endDate").val());
  31. /*var wfId = $("#wfId").val();
  32. var beginDate = $("#beginDate").val();
  33. var endDate = $("#endDate").val();
  34. var url=encodeURI("querywarningStatisticalColumnGrid.action?beginDate="+beginDate+"&endDate="+endDate+"&wfId="+wfId);
  35. $("#gridTable").setGridParam({url:url}).trigger("reloadGrid"); */
  36. $("#gridTable").jqGrid('GridUnload');
  37. showJqGrid();
  38. }
  39. }
  40. $(document).ready(function () {
  41. showJqGrid();
  42. });
  43. function showJqGrid() {
  44. var wfId = $("#wfId").val();
  45. var beginDate = $("#beginDate").val();
  46. var endDate = $("#endDate").val();
  47. var url=encodeURI("querywarningStatisticalColumnGrid.action?beginDate="+beginDate+"&endDate="+endDate+"&wfId="+wfId);
  48. var id = 'gridTable';
  49. var datatype = 'json';
  50. var colNames = ['序号', '名称','频率(次)'];
  51. var colModel = [
  52. { name: 'num', index: 'num', width: 700, align: 'center',hidden : true},
  53. { name: 'name', index: 'name', width: 700, align: 'center'},
  54. { name: 'frequencyday', index: 'frequencyday', width: 700, align: 'center'}
  55. ];
  56. var caption = '报警信息统计排行';
  57. var sortname = 'frequencyday';
  58. var gridPagerID ='gridPager';
  59. var sortorder='desc';
  60. var height='auto';
  61. var width='auto';
  62. var rownumbers=true;
  63. var multiselect=false;
  64. myJqGrid(id, url, datatype, colNames, colModel, caption, sortname, gridPagerID,sortorder,height,width,
  65. multiselect,rownumbers);
  66. }
  67. function toExcel() {
  68. if("" == $("#beginDate").val()){
  69. alert("请选择查询开始日期!");
  70. }else if("" == $("#endDate").val()){
  71. alert("请选择查询结束日期!");
  72. }else if(Date.parse($("#beginDate").val().replace(/-/g,"/"))>=Date.parse($("#endDate").val().replace(/-/g,"/"))){
  73. alert("结束时间应大于开始时间!");
  74. }
  75. else{
  76. var wfId = $("#wfId").val();
  77. var beginDate = $("#beginDate").val();
  78. var endDate = $("#endDate").val();
  79. var url=encodeURI("warningExcel.action?beginDate="+beginDate+"&endDate="+endDate+"&wfId="+wfId);
  80. $('#toexcel').attr('href',url);
  81. }
  82. }
  83. </script>
  84. <style type="text/css">
  85. a{ /* 统一设置所以样式 */
  86. font-family:Arial;
  87. font-size:12px;
  88. text-align:center;
  89. margin:3px;
  90. }
  91. a:link,a:visited{ /* 超链接正常状态、被访问过的样式 */
  92. color:#000000;
  93. padding:4px 10px 4px 10px;
  94. background-color:#f1f1f1;
  95. text-decoration:none;
  96. border-top:1px solid #EEEEEE; /* 边框实现阴影效果 */
  97. border-left:1px solid #EEEEEE;
  98. border-bottom:1px solid #717171;
  99. border-right:1px solid #717171;
  100. }
  101. a:hover{ /* 鼠标指针经过时的超链接 */
  102. color:#821818; /* 改变文字颜色 */
  103. padding:5px 8px 3px 12px; /* 改变文字位置 */
  104. background-color:#e2c4c9; /* 改变背景色 */
  105. border-top:1px solid #717171; /* 边框变换,实现“按下去”的效果 */
  106. border-left:1px solid #717171;
  107. border-bottom:1px solid #EEEEEE;
  108. border-right:1px solid #EEEEEE;
  109. }
  110. fieldset legend {
  111. color:#302A2A;
  112. font: bold 16px/2 Verdana, Geneva, sans-serif;
  113. font-weight: bold;
  114. text-align: left;
  115. text-shadow: 2px 2px 2px rgb(88, 126, 156);
  116. }
  117. </style>
  118. </head>
  119. <body>
  120. <form method="post" id="f1">
  121. <hr/>
  122. <fieldset style="height: 60px" id="fst">
  123. <legend class="item_Name">查询条件</legend>
  124. <table width="100%" cellpadding="0" cellspacing="0" >
  125. <tr>
  126. <!--
  127. <th width="5%" class="item_Name">
  128. 维度:
  129. </th>
  130. <td width="20%" >
  131. <select name="wfId" id="wfId" style="width:90%" onchange="queryData()">
  132. <option value="1" selected="selected">按报警统计</option>
  133. <option value="2">按报警分类统计</option>
  134. <option value="3">按厂家统计</option>
  135. </select>
  136. </td>
  137. -->
  138. <th width="5%" class="item_Name">
  139. 开始日期
  140. </th>
  141. <td width="20%" style="text-align: left">
  142. <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})"
  143. id="beginDate" name="beginDate" title="开始日期" onchange="queryData()"/>
  144. </td>
  145. <th width="5%" class="item_Name">
  146. 结束日期
  147. </th>
  148. <td width="20%" style="text-align: left">
  149. <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})"
  150. id="endDate" name="endDate" title="结束日期" onchange="queryData()"/>
  151. </td>
  152. <td width="200px" style="text-align: right">
  153. <a href="#" onclick="javascript:toExcel();" id="toexcel">导出</a>
  154. </td>
  155. </tr>
  156. </table>
  157. </fieldset>
  158. <table id='gridTable' >
  159. </table>
  160. <table width="100%" cellpadding="5" cellspacing="5" height="100%">
  161. <tr>
  162. <td>
  163. <iframe id="column" name="column" src="querywarningStatisticalTopColumn.action" frameborder="0" scrolling="auto" style="width:100%;" height="500"/>
  164. </td>
  165. </tr>
  166. </table>
  167. <table width="100%" cellpadding="5" cellspacing="5" height="100%">
  168. <tr>
  169. <td>
  170. <iframe id="pie" pie="column" src="querywarningStatisticalTopPie.action" frameborder="0" scrolling="auto" style="width:100%;" height="500"/>
  171. </td>
  172. </tr>
  173. </table>
  174. </form>
  175. </body>