SQ12345_Web/WebChart_bak/js/zhongxin.js

$(document).ready(function(){
	laydate.render({
		elem: '#time0',
		theme: '#00a1cb'
	});
	laydate.render({
		elem: '#time1',
		theme: '#00a1cb'
	});
	laydate.render({
		elem: '#time2',
		theme: '#00a1cb'
	});
	laydate.render({
		elem: '#time3',
		theme: '#00a1cb'
	});

	laydate.render({
		elem: '#time4',
		theme: '#00a1cb'
	});
	laydate.render({
		elem: '#time5',
		theme: '#00a1cb'
	});
	//part1
	
  function partOne(){
  	$('.gdmap-l ul').html('');
  	var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
	});
   	   $.ajax({
   	   	type:"get",
   	   	url:huayi.config.callcenter_url + "info/GetCenterTypeCountByDate ",
   	   	async:true,
   	   	dataType:'json',
   	   	success:function(data){
   	   		if(data.state.toLowerCase()=='success'){
   	   			layer.close(index);
   	   			var con=data.data;
   	   			 $(con).each(function(i,n){
   	   			 	if(n.TypeName.indexOf('总计')!=-1){
   	   			 		$('#total').html(n.Count);
   	   			 	}if(n.TypeName.indexOf('受理')!=-1){
   	   			 		$('#today').html(n.Count);
   	   			 	}if(n.TypeName.indexOf('交办')!=-1){
   	   			 		$('#jiaoBan').html(n.Count);
   	   			 	}
   	   			 	if(!(n.TypeName.indexOf('总计')!=-1||n.TypeName.indexOf('今日')!=-1)){
   	   			 		$('<li>'+
						'<div>'+n.TypeName +':<span>'+n.Count +'</span></div>'+
//						'<span>'+n.Count +'</span>'+
					'</li>').appendTo('.gdmap-l ul');
			 	
   	   			 	}
   	   			 		
			 	
			 })
   	   		}
   	   	}
   	   });
   }
	 
	 function partOne_right(){
	 	$('.gdmap-r ul').html('');
	 		var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
	});
   	   $.ajax({
   	   	type:"get",
   	   	url:huayi.config.callcenter_url + "info/GetAreaCountByDate",
   	   	async:true,
   	   	dataType:'json',
   	   	data:{
   	   		start:$('#time0').val(),
   	   		end:$('#time1').val(),
   	   	},
   	   	success:function(data){
   	   		if(data.state.toLowerCase()=='success'){
   	   			layer.close(index);
   	   			var con=data.data;
   	   		var color=["z","l","a","t","y","g","w","b","1","2","3"];
			var dindex=Math.floor(Math.random()*10+1);
			$(con).each(function(i,n){
				var html="";
				
				var dindex=Math.floor(Math.random()*10+1);
				if(n.AreaName.indexOf('商丘')!=-1){
		html = '<li>' +
				'<i class="xe-'+ color[dindex] +'"></i>'+
//					'<span>'+n.AreaName+'</span>'+
					'<span>市直单位:</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">市直单位:'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
				}if(n.AreaName.indexOf('虞城')!=-1){
					
						html = '<li>' +
				'<i class="yuc"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
					
				}if(n.AreaName.indexOf('民权')!=-1){
							html = '<li>' +
				'<i class="mq"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
				}if(n.AreaName.indexOf('睢县')!=-1){
								html = '<li>' +
				'<i class="sx"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
					
					
				}if(n.AreaName.indexOf('宁陵')!=-1){
					
					
								html = '<li>' +
				'<i class="nl"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
					
					
					
				}if(n.AreaName.indexOf('梁园')!=-1){
								html = '<li>' +
				'<i class="lyq"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
				}if(n.AreaName.indexOf('睢阳')!=-1){
					
								html = '<li>' +
				'<i class="syq"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
				}if(n.AreaName.indexOf('柘城')!=-1){
				
					
					
					
								html = '<li>' +
				'<i class="zc"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
				}if(n.AreaName.indexOf('夏邑')!=-1){
				
					
					
								html = '<li>' +
				'<i class="xy"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
				}if(n.AreaName.indexOf('永城')!=-1){
								html = '<li>' +
				'<i class="yongc"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
				}if(n.AreaName.indexOf('城乡一体化')!=-1){
					
									html = '<li>' +
				'<i class="xe-'+ color[dindex] +'"></i>'+
					'<span>'+n.AreaName+':</span>'+
					'<span>'+ n.Count+'</span>'+
						'<div class="tool_count"><div class="tooltips clearfix">'+
						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
					$(n.Item).each(function(i, n) {
						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
					})
				html += '</div>' +
					'</div>' +
					'</li>';
					$('.gdmap-r ul').append(html)
				}
//				if(n.AreaName.indexOf('当即')!=-1){
//					
//										html = '<li>' +
//				'<i class="xe-'+ color[dindex] +'"></i>'+
//					'<span>'+n.AreaName+':</span>'+
//					'<span>'+ n.Count+'</span>'+
//						'<div class="tool_count"><div class="tooltips clearfix">'+
//						'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
//					$(n.Item).each(function(i, n) {
//						html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
//					})
//				html += '</div>' +
//					'</div>' +
//					'</li>';
//					$('.gdmap-r ul').append(html)
//				}
			})
   	   		}
   	   	}
   	   });
	 	
	 }
	 $('.gdmap-r ul').on('click', 'li', function() {
				if($(this).find(".tooltips").css("display") == 'none') {
					$(this).find(".tooltips").show();
					$(this).siblings().find(".tooltips").hide();
				} else {
					$(this).find(".tooltips").hide()
				}

			})
	$('.part1Btn').click(function(){
		partOne_right()
	})
//类型工单统计 part2

var slhw = echarts.init(document.getElementById('slhw'));
slhw.setOption({
	title: {
		text: '工单类型统计',
		x: 'center',
		textStyle: {
			color: '#fff',
			fontSize: 18,
			fontWeight: 'normal'
		}
	},
		legend: {
				//      orient: 'vertical',
				bottom: 'bottom',
				data: [],
				textStyle: {
					color: '#fff'
				}
			},
	tooltip: {
		trigger: 'item',
		formatter: "{a} <br/>{b} : {c} ({d}%)"
	},
	series: [{
		name: '工单类型',
		type: 'pie',
		radius: '60%',
		center: ['50%', '55%'],
		data: [],
		itemStyle: {
			emphasis: {
				shadowBlur: 10,
				shadowOffsetX: 0,
				shadowColor: 'rgba(0, 0, 0, 0.5)'
			},
			normal:{
				 label:{ 
                                   show: true, 
                                   formatter: '{b} : {c} ({d}%)' 
                                }, 
                                labelLine :{show:true}
			}
		},
		label: {
                normal: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
	}]
	
	
	
	
	
});
  
  function partTwo(){
  	var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
	});
   	   $.ajax({
   	   	type:"get",
   	   	url:huayi.config.callcenter_url + "info/GetTypeCountByDate",
   	   	async:true,
   	   	dataType:'json',
   	   	data:{
   	   		start:$('#time2').val(),
   	   		end:$('#time3').val()
   	   	},
   	   	success:function(data){
   	   		if(data.state.toLowerCase()=='success'){
   	   			layer.close(index);
   	   			var con=data.data;
				var part2_legend = [];
				var part2_ser = [];
   	   			$(con).each(function(i,n){
   	   				var obj={};
   	   				if(i==0){
   	   					obj.value=n.Count;
					obj.name=n.TypeName;
					obj.selected=true;
   	   				}else{
   	   					obj.value=n.Count;
						obj.name=n.TypeName;
   	   				}
   	   				
   	   				
					part2_legend.push(n.TypeName);
					part2_ser.push(obj);
   	   			})
   	   			slhw.setOption({
						legend: {
							data: part2_legend
						},
						series: [{
							data: part2_ser
						}]
			})
			
   	   		}
   	   	}
   	   });
   }
  $('.part2Btn').click(function(){
  	partTwo();
  })
//接通率报表part3
var jtv = echarts.init(document.getElementById('jtv_num'));
jtv.setOption({
	title: {
		text: '接通率统计',
		x: 'center',
		textStyle: {
			color: '#fff',
			fontSize: 18,
			fontWeight: 'normal'
		}
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
			label: {
				show: true,
				backgroundColor: '#333'
			}
		},
		formatter: function(datas) 
              {
              var res = datas[0].name + '<br/>', val;
                  for(var i = 0, length = datas.length; i < length; i++) {
                        val = (datas[i].value) + '%';
                        res += datas[i].seriesName + '：' + val + '<br/>';
                    }
                    return res;
               }
	},
	legend: {
//		top: 30,
bottom:'bottom',
		data: ['接通率'],
		textStyle: {
			color: '#fff'
		}
	},
	xAxis: {
		name: '时',
		data: [],
		axisLine: {
			lineStyle: {
				color: '#ccc'
			}
		},

	},
	yAxis: {
		name: '比率',
		splitLine: {
			show: false
		},
		axisLine: {
			lineStyle: {
				color: '#ccc'
			}
		}
	},
	series: [{
		name: '接通率',
		type: 'bar',
		barWidth: 8,
		itemStyle: {
			normal: {
				color: new echarts.graphic.LinearGradient(
					0, 0, 0, 1, [{
							offset: 0,
							color: '#14c8d4'
						},
						{
							offset: 1,
							color: '#43eec6'
						}
					]
				)
			}
		},
		data: []
	}]

});

function partThree(){
	var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
	});
   	   $.ajax({
   	   	type:"get",
   	   	url:huayi.config.callcenter_url + "info/GetTelRate24ByDate",
   	   	async:true,
   	   	dataType:'json',
   	   	data:{
   	   		date:$('#time4').val()
   	   	},
   	   	success:function(data){
   	   		if(data.state.toLowerCase()=='success'){
   	   			layer.close(index);
   	   			var con=data.data;
// 	   			var part3=data.data.b;
				jtv.setOption({
						xAxis: {
							data:con.hours
						},
						series: [{
							data:con.rates
						}]
						
				})
			
   	   		}
   	   	}
   	   });
   }
  $('.part3Btn').click(function(){
  	partThree();
  })



//通话时长part4
var th_nums = echarts.init(document.getElementById('th_nums'));
th_nums.setOption({
	title: {
		text: '通话时长统计',
		x: 'center',
		textStyle: {
			color: '#fff',
			fontSize: 18,
			fontWeight: 'normal'
		}
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
			label: {
				show: true,
				backgroundColor: '#333'
			}
		}
	
	},
	legend: {
		bottom:'bottom',
		data: ['平均通话时长'],
		textStyle: {
			color: '#fff'
		}
	},
	xAxis: {
		name: '时',
		data: [],
		axisLine: {
			lineStyle: {
				color: '#ccc'
			}
		},

	},
	yAxis: {
		name: '秒',
		splitLine: {
			show: false
		},
		axisLine: {
			lineStyle: {
				color: '#ccc'
			}
		}
	},
	series: [{
		name: '平均通话时长',
		type: 'line',
		smooth:true,
		showAllSymbol:true,
		symbol :"emptyCircle",
		symbolSize: 10,
		data: []
	}]
});

function partFour(){
	var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
	});
   	   $.ajax({
   	   	type:"get",
   	   	url:huayi.config.callcenter_url + "info/GetAvgTelTime24ByDate",
   	   	async:true,
   	   	dataType:'json',
   	   	data:{
   	   		date:$('#time5').val()
   	   	},
   	   	success:function(data){
   	   		if(data.state.toLowerCase()=='success'){
   	   			layer.close(index);
   	   			var con=data.data;
				th_nums.setOption({
						xAxis: {
							data:con.hours
						},
						series: [{
							data:con.avgtimes
						}]
						
				})
			
				
			
   	   		}
   	   	}
   	   });
   }
  $('.part4Btn').click(function(){
  	partFour();
  })


Ajax();
function Ajax(){
	partOne();
	partOne_right()
	partTwo();
	partThree();
	partFour();
}

setInterval(Ajax, huayi.config.indextime);//Ajax调用函数
})