zhoufan
/
SQMQ12345_Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="../Script/Common/huayi.load.js"></script>
    	<script src="../Script/Common/huayi.config.js"></script>
		 <link href="../css/init.css" rel="stylesheet" />
      <script src="../css/laydate/laydate.js"></script>
		<link rel="stylesheet" href="../css/init.css" />
		<title>日流量统计</title>
	</head>
	<style>
		@font-face {
			font-family: 'iconfont';
			src: url('fonts/iconfont.eot');
			/* IE9*/
			src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('fonts/iconfont.woff') format('woff'), /* chrome、firefox */
			url('fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
			url('fonts/iconfont.svg#iconfont') format('svg');
			/* iOS 4.1- */
		}
		
		.iconfont {
			font-family: "iconfont";
			font-style: normal;
		}
		ul,
		li,
		ol {
			list-style: none;
		}
		
		a {
			text-decoration: none
		}
		.clearfix:after {
	    content: "";
	    display: block;
	    clear: both;
		}
		.hut-top{
			background: #f3f3f4;
			/*height: 60px;*/
			padding: 10px 20px;
			
		}
		.hut-tcon{
			float: right;
		}
		.dhLeft a{
			color: #999;
		}
		.huTable thead td{
			background: #00a1cb!important;
   			color: #fff!important;
		}
		.th-table{
				display: none;
			}
		.tab-content{
			width: 90%;
    		margin: 0 auto;
		}
			#thead thead th{
			background: #00a0cd;
    		color: #fff;
		}
		table thead, tbody tr {
            display:table;
            width:100%;
            table-layout:fixed;
        }
        .table{
        	margin-bottom: 0;
        }
	</style>

	<body class="gray-bg" style="background: #fefefe;">
		<div class="hu-total wrapper wrapper-content animated fadeInRight">
			<div class="daoHang clearfix">
				<div class="dhLeft">
					<sapn><i class="syIcon"></i>位置：<a id="ReIndex" href="javaScript:;">首页</a>&gt;<a href="javaScript:;">报表管理</a>&gt;<a href="" class="nowPosition">日流量统计</a></sapn>
				</div>
				<div class="dhRight"><a href="" title="刷新"><i class="fa fa-refresh"></i></a></div>
			</div>
			<div class="toolBar clearfix">
				<div class="toolRight" style="float: right;">
					<span>选择日期：</span>
				   	<input type="text" class="laydate-icon" id="chooseTime1" />至
				   	<input type="text" class="laydate-icon" id="chooseTime2" />
				</select>
					<button class="btns sear">搜索</button>
					<a class="btns export">导出</a>
				</div>
			</div>
		 <div class="hu-content">
		 	<ul class="nav nav-tabs th-tab">
			  <li role="presentation" class="active"><a href="javascript:;">图表</a></li>
			  <li role="presentation"><a href="javascript:;">表格</a></li>
			</ul>
		 	<div class="tab-content">
		 		  <div class="hu-con-right">
	          	 		<div  id="huData" style="width:100%; height: 500px;">
	          	 			
	          	 		</div>
	          </div>
	          
	          <div class="th-table">
						<div style="width: 100%;padding: 10px;">
							<div class="table-head">
								<table id="thead" class="table table-hover table-striped table-bordered table-condensed">
								 <colgroup>
					                <col style="width: 80px;"/>
					                <col/>
					            </colgroup>
								<thead>
									<tr>
									<th>时刻</th>
									<th>流量数</th>
									</tr>
								</thead>
							</table>
							</div>
							<div class="table-body">
								 <table class="thTable table table-hover table-striped table-bordered table-condensed">
						            <colgroup>
						                <col style="width: 80px;"/>
						                <col/>
						            </colgroup>
						            <tbody>
						          
						            </tbody>
						        </table>
							</div>
						</div>
	          	
				</div>
	          
		 	</div>
		 	
		  </div>
		</div>	
		<script src="../js/echarts.common.min.js"></script>
		<script>
			var myChart;
			var token = $.cookie("token");
			$(document).ready(function(){
				
				$('.th-tab li').click(function(){
					$(this).addClass('active')
							.siblings().removeClass('active');
					
					var index=$(this).index();
					$('.tab-content >div').eq(index).show()
					                .siblings().hide();
				})
				
			  laydate.skin('blue');
            laydate({
                elem: '#chooseTime1',
                event: 'focus'
            });
            laydate({
                elem: '#chooseTime2',
                event: 'focus'
            });
            //图形
            myChart = echarts.init(document.getElementById('huData'));
            myChart.setOption({
        				color: ['#00a1cb'],
        				tooltip: {
        					trigger: 'axis',
        					axisPointer: { // 坐标轴指示器，坐标轴触发有效
        						type: 'line' // 默认为直线，可选为：'line' | 'shadow'
        					}
        				},
        				toolbox: {
        					show: true,
        				},
        				calculable: true,
        				xAxis: [{
        					type: 'category',
        					name: '时',
        					splitLine: {
        						show: false
        					}, //去除网格线
        					data: [],
        					axisTick: {
        						alignWithLabel: true
        					}
        				}],
        				yAxis: [{
        					type: 'value',
        					name: '数量',
        					nameLocation: 'end',
        					splitLine: {
        						show: false
        					} //去除网格线
        				}],
        				series: [{
        						name: '流量',
        						type: 'bar',
        						barWidth: 20, //图形宽度
        						data:[],
        						itemStyle: {
        							normal: {
        								label: {
        									show: true,
        									textStyle: {
        										color: '#FF9800' //顶部数据颜色
        									}
        								}
        							}
        						},
        						label: {
        							normal: {
        								show: true,
        								position: 'top' //顶部数据显示位置
        							}

        						}
        					}

        				]
        			})
             Ajax();
			function Ajax(){
				$.ajax({
				type:"get",
				url: huayi.config.callcenter_url + "FlowAnalysis/GetDayCount",
				async:true,
				dataType:'json',
				data:{
					token:token,
					sdate:$('#chooseTime1').val(),
					edate:$('#chooseTime2').val()
				},
				success:function(data){
					if(data.state.toLowerCase()=="success"){
					 myChart.setOption({
							xAxis:[{
								data: data.data.hours
							}],
							series:[{
								data:data.data.counts
							}] 
						});
					}
					
				}
			});
				$.ajax({
				type:"get",
				url: huayi.config.callcenter_url + "FlowAnalysis/GetDayCountTable",
				async:true,
				dataType:'json',
				data:{
					token:token,
					sdate:$('#chooseTime1').val(),
					edate:$('#chooseTime2').val()
				},
				success:function(data){
					if(data.state.toLowerCase()=="success"){
							$('.thTable tbody').html('');
						$(data.data).each(function(j,m){
						$('<tr>'+
							'<td>' +m.时刻+ '</td>'+
							'<td>' + m.数量 + '</td>'+
							'</tr>').appendTo('.thTable tbody')
						})
						
					}
					
				}
			});
			
			
			}
			
			//搜索事件
			$('.sear').click(function(){
				 Ajax();
			})
	        //导出功能
          	$('.export').click(function() {
				dcexcel(this);
			})
			   function dcexcel(obj) {
	           	 	var url = huayi.config.callcenter_url + "FlowAnalysis/ExptDayList?token=" + $.cookie("token");
	                	url += "&sdate=" + $("#chooseTime1").val() + "&edate=" + $("#chooseTime2").val();
	               		obj.href = url;
	       		}
			
			})
			
			
			
			
			
			
			
		</script>

	</body>

</html>