zhengbingbing
/
XYUpgrade_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
							<!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 rel="stylesheet" href="./../css/huTotal.css" />-->
		<link rel="stylesheet" href="./../js/layui/css/layui.css" />
		<link rel="stylesheet" href="./../css/init.css" />
		<title>来电分析</title>
	</head>
	<style>
		.hut-top {
			background: #f3f3f4;
			/*height: 60px;*/
			padding: 10px 20px;
		}
		
		.hut-tcon {
			float: right;
		}
		
		.dhLeft a {
			color: #999;
		}
		.layui-table td, .layui-table th{
			text-align: center!important;
		}
		 .layui-table th{
		 	background: #1ab494;
		 	color: #fff;
		 }
		 .charts,#callIn_count{
		 	width: 100%;
		 }
		 .time_title{
		 	    text-align: right;
			    font-size: 15px;
			    line-height: 24px;
			    font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif;
			    color: #333;
			    margin-top: 15px;
			    padding-right: 25px;
		 }
	</style>

	<body class="gray-bg" style="background: #fefefe;">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="hu-total">
			<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="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="hut-top clearfix">
				<div class="topCon">
					<div class="form-inline th-bar clearfix">
						<div class="time-box form-group">
							<i class="tub fa fa-calendar"></i>
							<input class="form-control" type="text" id="chooseTime" placeholder="请选择日期">
						</div>
						<div class="form-group tool_bars pull-right">
							<button class="btns sear">搜索</button>
						</div>
					</div>
				</div>
			</div>
			<div class="hu-content">
				<p class="time_title">统计截止日期：<span class="strdate" style="color: darkred;"></span></p>
				<div class="layui-form">
				  <table class="layui-table dataTable">
				    <colgroup>
				      <col width="150">
				      <col width="150">
				      <col width="200">
				      <col>
				    </colgroup>
				    <thead>
				      <tr>
				        <th>呼叫方式</th>
				        <th>总呼叫量</th>
				        <th>接通量</th>
				        <th>未接量</th>
				        <th>客户主动放弃呼叫数量</th>
				        <th>接通率</th>
				        <th>总通话时长</th>
				        <th>平均通话时长</th>
				      </tr> 
				    </thead>
				    <tbody>
				      <tr>
				        <td>呼入</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				      </tr>
				      <tr>
				         <td>呼出</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				        <td>0</td>
				      </tr>
				    </tbody>
				  </table>
				</div>
				
				
				<div class="charts">
					<div id="callIn_count" style="height: 450px;"></div>
					
				</div>
				
				

			</div>
		</div>
		</div>
		<script src="./../js/layui/layui.js"></script>
		<script src="../js/echarts.common.min.js"></script>
		<script>
			$(function(){
				/*日期选择*/
				layui.use('laydate', function() {
					var laydate = layui.laydate;
					//日期
					laydate.render({
						elem: '#chooseTime',
						range: '~',
						theme: '#1ab394',
					});
				});
				//搜索事件
				$('.sear').click(function(){
					ReportTable();
				});
				
				var callIn_count = echarts.init(document.getElementById('callIn_count'));
					callIn_count.setOption({
						title: {
							text: '来电高峰期（低谷期）统计',
							x: 'center',
							textStyle: {
								color: '#000',
								fontSize: 16,
								fontWeight: 'normal'
							}
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow',
								label: {
									show: true,
									backgroundColor: '#333'
								}
							}
						
						},
						grid: {
							left: '2%',
							right: '5%',
							bottom: '6%',
							containLabel: true
						},
						legend: {
							bottom:'bottom',
							data: ['电话量'],
							textStyle: {
								color: '#000'
							}
						},
						xAxis: {
							name: '时',
							data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
							axisLine: {
								lineStyle: {
									color: '#000'
								}
							},
					
						},
						yAxis: {
							name: '通',
							splitLine: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#000'
								}
							}
						},
						series: [{
							name: '电话量',
							type: 'line',
							smooth:true,
							showAllSymbol:true,
							symbol :"emptyCircle",
							symbolSize: 10,
							data: []
						}]
					});
				ReportTable();
			
					function ReportTable(){
						   	   $.ajax({
						   	   	type:"get",
						   	   	url:huayi.config.callcenter_url + "CallByMonth/GetReportTable",
						   	   	async:true,
						   	   	dataType:'json',
						   	   	data:{
						   	   		token:$.cookie("token"),
						   	   		type:2,
						   	   		sdate:$('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[0],
						   	   		edate:$('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[1],
						   	   	},
						   	   	success:function(data){
						   	   		if(data.state.toLowerCase()=='success'){
						   	   			$('.dataTable tbody').html('');
						   	   			var con=data.data;
						   	   			$('.strdate').text(con.strdate);
										callIn_count.setOption({
						//						xAxis: {
						//							data:con.hours
						//						},
												series: [{
													data:con.linedata
												}]
												
										})
										if(con.tabledata && con.tabledata.length>0){
											$.each(con.tabledata,function(i,n){
											$('<tr>'+
												'<td>'+ n.呼叫方式 +'</td>'+
												'<td>'+ n.总呼叫数量 +'</td>'+
												'<td>'+ n.接通数量 +'</td>'+
												'<td>'+ n.未接数量 +'</td>'+
												'<td>'+ n.客户主动放弃呼叫数量 +'</td>'+
												'<td>'+ n.接通率 +'</td>'+
												'<td>'+ n.总通话时长 +'</td>'+
												'<td>'+ n.平均通话时长 +'</td>'+
											'</tr>').appendTo('.dataTable tbody');
										})
									
										}else{
											$('<tr><td colspan="8"> 暂无数据。。。</td></tr>').appendTo('.dataTable tbody');
										}
						   	   		}
						   	   	}
						   	   });
						   }
				
				
		})
		</script>
	</body>

</html>