<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@include file="/pages/includes/taglibs.jsp" %> <head> <script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery-1.8.3.js"></script> <script type="text/ecmascript" src="<%=request.getContextPath() %>/resource/plugin/jqgrid/js/jquery.jqGrid.min.js"></script> <script type="text/ecmascript" src="<%=request.getContextPath() %>/resource/plugin/jqgrid/js/i18n/grid.locale-cn.js"></script> <script type="text/ecmascript" src="<%=request.getContextPath()%>/resource/js/system/jqdatagrid.js"></script> <script src="<%=request.getContextPath()%>/resource/js/datePicker/WdatePicker.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resource/plugin/jqueryui/css/custom-theme/jquery-ui-1.9.2.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/resource/plugin/jqgrid/css/ui.jqgrid.css" /> <style type="text/css"> a{ /* 统一设置所以样式 */ font-family:Arial; font-size:12px; text-align:center; margin:3px; } a:link,a:visited{ /* 超链接正常状态、被访问过的样式 */ color:#000000; padding:4px 10px 4px 10px; background-color:#f1f1f1; text-decoration:none; border-top:1px solid #EEEEEE; /* 边框实现阴影效果 */ border-left:1px solid #EEEEEE; border-bottom:1px solid #717171; border-right:1px solid #717171; } a:hover{ /* 鼠标指针经过时的超链接 */ color:#821818; /* 改变文字颜色 */ padding:5px 8px 3px 12px; /* 改变文字位置 */ background-color:#e2c4c9; /* 改变背景色 */ border-top:1px solid #717171; /* 边框变换,实现“按下去”的效果 */ border-left:1px solid #717171; border-bottom:1px solid #EEEEEE; border-right:1px solid #EEEEEE; } fieldset legend { color:#302A2A; font: bold 16px/2 Verdana, Geneva, sans-serif; font-weight: bold; text-align: left; text-shadow: 2px 2px 2px rgb(88, 126, 156); } </style> <script type="text/javascript"> function changeFc(type){ var url1 = "windfarmAjax.action?type="+type; $.ajax({ type:"post", url:url1, dataType:"json", success: function(data){ if(data.length != 0){ eval(data); $("#wpId").empty(); $("#wpId").append("<option value=''>请选择</option>"); for(var i=0; i<data.length; i++){ $("#wpId").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>"); } }else{ $("#wpId").append("<option value=''>请选择</option>"); $("#wpId").addOption("请选择",""); } queryData(); } }); } function queryData(){ if("" == $("#beginDate").val()){ alert("请选择查询开始日期!"); }else if("" == $("#endDate").val()){ alert("请选择查询结束日期!"); } else{ //var type=$("#type").val(); //var wpId=$("#wpId").find("option:selected").val(); //var beginDate=$("#beginDate").val(); //var endDate=$("#endDate").val(); //var url = '<%=request.getContextPath() %>/charts/utilizationList.action?wpId='+wpId // +"&beginDate="+beginDate +"&endDate="+endDate+"&type="+type; //$("#gridTable").setGridParam({url:url}).trigger("reloadGrid"); $("#gridTable").jqGrid('GridUnload'); showJqGrid(); } } function toExcel() { if("" == $("#beginDate").val()){ alert("请选择查询开始日期!"); }else if("" == $("#endDate").val()){ alert("请选择查询结束日期!"); } else{ var type=$("#type").val(); var wpId=$("#wpId").find("option:selected").val(); var beginDate=$("#beginDate").val(); var endDate=$("#endDate").val(); var url = '<%=request.getContextPath() %>/charts/utilizationExcel.action?wpId='+wpId +"&beginDate="+beginDate +"&endDate="+endDate+"&type="+type; $('#toexcel').attr('href',url); } } $(document).ready(function () { showJqGrid(); }); function showJqGrid() { var type=$("#type").val(); var wpId=$("#wpId").find("option:selected").val(); var beginDate=$("#beginDate").val(); var endDate=$("#endDate").val(); var id = 'gridTable'; var url = '<%=request.getContextPath() %>/charts/utilizationList.action?wpId='+wpId +"&beginDate="+beginDate +"&endDate="+endDate+"&type="+type; var datatype = 'json'; var colNames = ['名称', '实际发电量(万KW)','理论发电量(万KW)','风电利用率(%)']; var colModel = [ { name: 'windturbineid', index: 'windturbineid', width: 200, align: 'center'}, { name: 'daydl2', index: 'daydl2', width: 250, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'}, { name: 'daylldl', index: 'daylldl', width: 250, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'}, { name: 'dayspeed', index: 'dayspeed', width: 200, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'} ]; var caption = '利用率排行榜'; var sortname = 'daydl2'; var gridPagerID ='gridPager'; var sortorder='desc'; var height='auto'; var width='auto'; var rownumbers=true; var multiselect=false; myJqGrid(id, url, datatype, colNames, colModel, caption, sortname, gridPagerID,sortorder,height,width, multiselect,rownumbers);} </script> <style type="text/css"> fieldset legend { color:#302A2A; font: bold 16px/2 Verdana, Geneva, sans-serif; font-weight: bold; text-align: left; text-shadow: 2px 2px 2px rgb(88, 126, 156); } </style> </head> <body> <form action="utilizationIndex.action" method="post" id="f1"> <fieldset style="height: 60px" id="fst"> <legend class="item_Name">查询条件</legend> <table width="1000px" cellpadding="0" cellspacing="0" class="dataform"> <tr> <th width="100px" class="item_Name"> 类型: </th> <td width="100px" > <s:select list="#{0:'风场',1:'项目',2:'线路',3:'风机'}" cssStyle="width:100px" id="type" name="type" onchange="queryData();"></s:select> </td> <th width="100px" class="item_Name"> 风场: </th> <td width="100px" class="item_Name"> <s:select list="wps" cssStyle="width:100px" listKey="id" listValue="name" id="wpId" name="wpId" headerKey="" headerValue="请选择" onchange="javascript:queryData();"></s:select> </td> <th width="100px" class="item_Name"> 开始日期 </th> <td width="100px" style="text-align: left"> <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})" id="beginDate" name="beginDate" title="开始日期" onchange="javascript:queryData();"/> </td> <th width="100px" class="item_Name"> 结束日期 </th> <td width="100px" style="text-align: left"> <s:textfield cssClass="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowWeek:true,readOnly:true})" id="endDate" name="endDate" title="结束日期" onchange="javascript:queryData();"/> </td> <td width="200px" style="text-align: right"> <a href="#" onclick="javascript:toExcel();" id="toexcel">导出</a> </td> </tr> </table> </fieldset> <br/> <table id='gridTable' > </table> <div id='gridPager'></div> </form> </body>