zhoufan
/
SQMQ12345_Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
							<!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="../js/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;
		}
		
		.time-box {
			display: inline-block;
			position: relative;
		}
		
		.toolRight input {
			padding-right: 30px;
		}
		
		.tub {
			position: absolute;
			right: 8px;
			top: 5px;
			font-size: 18px;
			color: #00a0ca;
		}
		
		.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>
					<span class="time-box"><i class="tub fa fa-calendar"></i><input type="text" id="chooseTime" /></span>
					<span>结束日期：</span>
					<span class="time-box"><i class="tub fa fa-calendar"></i><input type="text" id="chooseTime2" /></span>
					<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;

			$(document).ready(function () {

			    var token = $.cookie("token");
			    laydate.render({
			        elem: '#chooseTime',
			        format: 'yyyy-MM',
			        type: 'month',
			        theme: '#00a1cb',
			        value: new Date()
			    });
			    laydate.render({
			        elem: '#chooseTime2',
			        format: 'yyyy-MM',
			        type: 'month',
			        theme: '#00a1cb',
			        value: new Date()
			    });
			    laydate.ready(function () {
			        Ajax();
			    })

				$('.th-tab li').click(function() {
					$(this).addClass('active')
						.siblings().removeClass('active');

					var index = $(this).index();
					$('.tab-content >div').eq(index).show()
						.siblings().hide();
				})

	
				//图形
				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/GetMonthCount",
						async: true,
						dataType: 'json',
						data: {
							token: token,
							sdate: $('#chooseTime').val(),
							edate: $('#chooseTime2').val()
						},
						success: function(data) {
							if(data.state.toLowerCase() == "success") {
								myChart.setOption({
									xAxis: [{
										data: data.data.months
									}],
									series: [{
										data: data.data.counts
									}]
								});

							}

						}
					});
					$.ajax({
						type: "get",
						url: huayi.config.callcenter_url + "FlowAnalysis/GetMonthCountTable",
						async: true,
						dataType: 'json',
						data: {
							token: token,
							sdate: $('#chooseTime').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/ExptMonthList?token=" + $.cookie("token");
					url += "&sdate=" + $("#chooseTime").val() + "&edate=" + $("#chooseTime2").val();
					obj.href = url;
				}

			})
		</script>

	</body>

</html>