<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="js/jquery.min.js"></script> <script src="charts/FusionCharts.js" type="text/javascript"></script> <script src="jquery-ui/js/jquery-ui.js"></script> <script src="jquery-ui/js/jquery.ui.datepicker-zh-CN.js"></script> <link href="jquery-ui/css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> <script> var nd=new Date(); function day(){ var ChartId = "dayChart"; $.ajax({ url:"/cms/acquisit/nearlyDay", success:function(res){ if(res){ var dayChart = new FusionCharts("charts/Bar2D.swf", ChartId, "250", "250", "0", "0"); dayChart.setXMLData(res); dayChart.render("dayLayout"); } } }); } function week(){ var ChartId = "weekChart"; $.ajax({ url:"/cms/acquisit/nearlyWeek", success:function(res){ if(res){ var weekChart = new FusionCharts("charts/Bar2D.swf", ChartId, "250", "250", "0", "0"); weekChart.setXMLData(res); weekChart.render("weekLayout"); } } }); } function month(){ var ChartId = "monthChart"; $.ajax({ url:"/cms/acquisit/nearlyMonth", success:function(res){ if(res){ var monthChart = new FusionCharts("charts/Bar2D.swf", ChartId, "250", "250", "0", "0"); monthChart.setXMLData(res); monthChart.render("monthLayout"); } } }); } function refEven(){ getChartFromId("dayChart").setXMLUrl("/cms/acquisit/nearlyDay"); getChartFromId("weekChart").setXMLUrl("/cms/acquisit/nearlyWeek"); getChartFromId("monthChart").setXMLUrl("/cms/acquisit/nearlyMonth"); } function qLine(){ var sdate = $("#startDate").val(); var edate = $("#endDate").val(); $.ajax({ url:"/cms/acquisit/queryChart", data: {startDate:sdate,endDate:edate}, success:function(res){ if(res){ var queryChart = new FusionCharts("charts/MSLine.swf", "queryChart", "600", "300", "0", "0"); queryChart.setXMLData(res); queryChart.render("queryLayout"); } } }); } function qTable(){ //var sdate = $("#startDate").val()+" 00:00:00"; //var edate = $("#endDate").val()+" "+nd.getHours()+":"+nd.getMinutes()+":"+nd.getSeconds(); var sdate = $("#startDate").val(); var edate = $("#endDate").val(); if(sdate.substring(0,4)!=edate.substring(0,4)){ alert("不推荐跨年查询!"); return; } $(".trs").html(""); $.ajax({ url:"/cms/acquisit/queryList", data: {startDate:sdate,endDate:edate}, success:function(res){ if(res.data){ $.each(res.data, function(i, field){ $("#lltable").append("<tr class='trs'><td>"+field.cname+"</td><td>"+field.times+"</td></tr>"); }); } } }); } $(document).ready(function(){ day(); week(); month(); setInterval('refEven()',10000); var today = nd.getFullYear()+"-"+(nd.getMonth()+1)+"-"+nd.getDate(); $("#startDate").val(today); $("#endDate").val(today); $("#startDate").datepicker(); $("#endDate").datepicker(); qTable(); qLine(); $("#btn").click( function(){ qTable(); var sdate = $("#startDate").val(); var edate = $("#endDate").val(); getChartFromId("queryChart").setXMLUrl("/cms/acquisit/queryChart?startDate="+sdate+"&endDate="+edate); } ); }); </script> <style> body {margin:0; padding:0; font:12px/1.5 \5b8b\4f53,Arial,sans-serif;} .clean{clear:both;height:0; display:block; overflow:hidden;} .fl{float:left;} .w{width:780px;padding:10px;} .q{margin-bottom:10px;} .tab_lay{width:170px;margin-left:10px;} .line_lay{width:600px;} .tab_class { border: 1px none #333333; border-collapse: collapse; color: #333333; width: 100%; } .tab_class td { height: 35px; padding-left: 5px; } .tab_class th { background: none repeat scroll 0 0 #CCCCCC; height: 30px; } .tab_class .timTD{width:90px;word-break:break-all;} .frm{margin:10px;} .chartLay{border: 1px solid #333333;} .realInfo{height:25px;line-height:25px;background:#CCCCCC;margin-bottom:5px;} </style> </head> <body> <div class="w"> <div class="q"> <form id="qFrm" class="frm"> 开始日期:<input type="text" id="startDate" readonly value=""/> 结束日期:<input type="text" id="endDate" readonly/> <input type="button" value="查询" id="btn" /> </form> <div id="queryLayout" class="fl line_lay">Loading</div> <div class="fl tab_lay"> <table id="lltable" width="100%" cellspacing="1" cellpadding="1" border="1" class="tab_class"> <tr style="text-align:left;"> <th style="width:50px;padding-left:5px;">名称</th> <th style="padding-left:5px;">次数</th> </tr> </table> </div> <div class="clean"></div> </div> <div class="chartLay"> <div class="realInfo">实时信息(每隔10秒刷新)</div> <div id="dayLayout" style="float:left;width:250px;margin-right:10px;">Loading</div> <div id="weekLayout" style="float:left;width:250px;margin-right:10px;">Loading</div> <div id="monthLayout" style="float:left;width:250px;">Loading</div> <div class="clean"></div> </div> </div> </body> </html>