123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417 |
- <%@ 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/javascript" src="<%=request.getContextPath()%>/resource/plugin/highslide/highslide-with-html.js"></script>
- <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resource/plugin/highslide/highslide.css" />
- <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" />
- <script src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts.src.js" type="text/javascript"></script>
- <script src="<%=request.getContextPath()%>/resource/js/highcharts/highcharts-more.js"> </script>
- <script src="<%=request.getContextPath()%>/resource/js/highcharts/modules/solid-gauge.src.js"></script>
- <style type="text/css">
- a.url{ /* 统一设置所以样式 */
- font-family:Arial;
- font-size:12px;
- text-align:center;
- margin:3px;
- }
- a:link.url ,a:visited.url{ /* 超链接正常状态、被访问过的样式 */
- 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.url{ /* 鼠标指针经过时的超链接 */
- 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">
- hs.graphicsDir = '<%=request.getContextPath()%>/resource/plugin/highslide/graphics/';
- hs.outlineType = 'rounded-white';
- hs.wrapperClassName = 'draggable-header';
- var options1;
- var chart1;
- 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 wpId=$("#wpId").find("option:selected").val();
- //var beginDate=$("#beginDate").val();
- //var endDate=$("#endDate").val();
- //var url = '<%=request.getContextPath() %>/charts/fittingtoplist1.action?wpId='+wpId
- // +"&beginDate="+beginDate +"&endDate="+endDate;
- //$("#gridTable").setGridParam({url:url}).trigger("reloadGrid");
- $("#gridTable").jqGrid('GridUnload');
- showJqGrid();
- }
- }
-
- function toExcel() {
- if("" == $("#beginDate").val()){
- alert("请选择查询开始日期!");
- }else if("" == $("#endDate").val()){
- alert("请选择查询结束日期!");
- }
- else{
-
- var wpId=$("#wpId").find("option:selected").val();
- var beginDate=$("#beginDate").val();
- var endDate=$("#endDate").val();
- var url = '<%=request.getContextPath() %>/charts/fittingtopExcel.action?wpId='+wpId
- +"&beginDate="+beginDate +"&endDate="+endDate;
- $('#toexcel').attr('href',url);
- }
- }
-
- $(document).ready(function () {
- showJqGrid();
- options1={
- chart: {
- renderTo: 'container',
- type: 'spline'
- },
- title: {
- text: '风功率曲线'
- },
- tooltip: {
- crosshairs:{//控制十字线
- width:2
- },
- crosshairs: true,
- shared: true
- },
- credits: {
- enabled: false
- },
- plotOptions: {
- spline: {
- dataLabels : {
- enabled :false
- },
- // pointPadding: 0.2,
- borderWidth: 0
- },
- series: {
- cursor: 'pointer',
- marker: {
- radius: 0,
- symbol: 'circle' //曲线点类型:"circle", "square", "diamond", "triangle","triangle-down",默认是"circle"
- }
- }
- },
- xAxis: {
- labels: {
- align: 'center'
- },
- 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]
- },
- yAxis: [{
- title: {
- text: '功率(kW)'
- },lineWidth : 1
- }],
- legend: {
-
- align: 'center',
- verticalAlign: 'bottom'
- }
- };
- });
- function queryChart(){
- var bd=$("#beginDate").val();
- var ed=$("#endDate").val();
-
- var wtIds="";
-
- var arr=$("#gridTable").jqGrid('getGridParam', 'selarrrow');
- var i=0;
-
- $.each(arr,function(n,value) {
-
- var temp= $("#gridTable").jqGrid('getCell',value,'windturbine');
- i++;
- wtIds += temp+","
- })
- wtIds=wtIds.substring(0,wtIds.length-1);
- if(i>10)
- {
- alert("一次最多能选择十台风机!");
-
- }else
- {
- if(wtIds==""){
- alert("请选择风场!");
- return;
- }
-
- if(bd==""){
- alert("请选择开始时间!");
- return;
- }
- if(ed==""){
- alert("请选择结束时间!");
- return;
- }
- $.ajax({
- url : "queryAp.action?wtIds="+wtIds+"&beginDate="+bd+"&endDate="+ed,
- type : "post",
- cache : false,
- dataType : "json",
- data : {},
- ifModified : false,
- success : function(res) {
- var serNames=[];
- var speed=res["speed"];
-
-
- $.each(res["sers"],function(m,obj){
- serNames.push(obj);
- }
- );
-
- chart1 = new Highcharts.Chart(options1);
-
- for(var j=0;j<serNames.length;j++){
- var ser={
- type: 'spline',
- name: serNames[j],
- data:res[serNames[j]],
- yAxis:0
- };
-
- chart1.addSeries(ser);
- }
-
- //////////dialog test///////
- showDiv1();
- ////////////////////////////
- }
- });
- }
-
- }
-
- function showDiv1() {
- var hc = $("#container");
- // return hs.htmlExpand(obj, {
- return hs.htmlExpand(hc[0], {
- contentId : 'showDiv2',
- width : 1000,
- height : 600,
- align : 'center',
- headingText : '风功率曲线'
- });
- }
- function showJqGrid() {
-
- var wpId=$("#wpId").find("option:selected").val();
- var beginDate=$("#beginDate").val();
- var endDate=$("#endDate").val();
- var id = 'gridTable';
- var url = '<%=request.getContextPath() %>/charts/fittingtoplist1.action?wpId='+wpId
- +"&beginDate="+beginDate +"&endDate="+endDate;
- var datatype = 'json';
- var colNames = ['风场', '风机','编码','起始日期','截至日期','平均风速','拟合优度'];
- var colModel = [
- { name: 'windfarm', index: 'windfarm', width: 200, align: 'center'},
- { name: 'windturbine', index: 'windturbine', width: 200, align: 'center',hidden : true},
- { name: 'code', index: 'code', width: 80, align: 'center'},
- { name: 'beginDate', index: 'beginDate', width: 250, align: 'center',formatter:'date', formatoptions:{newformat:'Y-m-d'},align:'center'},
- { name: 'endDate', index: 'endDate', width: 250, align: 'center',formatter:'date', formatoptions:{newformat:'Y-m-d'},align:'center'},
- { name: 'speed', index: 'speed', width: 200, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int'},
- { name: 'power', index: 'power', width: 200, align: 'center', formatter:'number', formatoptions:{decimalPlaces: 2},sorttype: 'int' }
- ];
- var caption = '拟合优度排行榜';
- var sortname = 'power';
- var gridPagerID ='gridPager';
- var sortorder='desc';
- var height='auto';
- var width='auto';
- var rownumbers=true;
- var multiselect=true;
- myJqGrid(id, url, datatype, colNames, colModel, caption, sortname, gridPagerID,sortorder,height,width,
- multiselect,rownumbers);
- }
- </script>
- <style type="text/css">
- { /* 统一设置所以样式 */
- font-family:Arial;
- font-size:12px;
- text-align:center;
- margin:3px;
- }
- a:link.url ,a:visited.url{ /* 超链接正常状态、被访问过的样式 */
- 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.url{ /* 鼠标指针经过时的超链接 */
- 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>
- </head>
- <body>
- <form action="fittingtopindex.action" method="post" id="f1">
- <div class="highslide-html-content" id="showDiv2" style="width: 1100">
- <div class="highslide-header">
- <ul>
- <li class="highslide-move">
- <a href="#" onclick="return false">Move</a>
- </li>
- <li class="highslide-close" >
- <a href="#" onclick="return hs.close(this)"></a>
- </li>
- </ul>
- </div>
- <div class="highslide-body" id="container" style="width: 1000px">
- </div>
- </div>
- <fieldset style="height: 60px" id="fst">
- <legend class="item_Name">查询条件</legend>
- <table width="1200px" cellpadding="0" cellspacing="0" class="dataform">
- <tr>
-
- <th width="150px" class="item_Name">
- 风场:
- </th>
- <td width="200px" class="item_Name">
- <s:select list="wps" cssStyle="width:200px" 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:queryChart();" class="url" >生成曲线</a>
- <a href="#" onclick="javascript:toExcel();" class="url" id="toexcel">导出</a>
- </td>
- </tr>
- </table>
- </fieldset>
- <br/>
- <table id='gridTable' ></table>
- </form>
- </body>
|