<!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>
FusionCharts
最新推荐文章于 2023-04-11 20:57:35 发布