XiXianDC_ZhuBiao_UI/WebChart/js/huawu.js

$(document).ready(function() {
	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'
	});

	laydate.render({
		elem: '#time6',
		theme: '#00a1cb'
	});
	var myDate=new Date();
	function turn(aa){
		if(aa<10){
			aa = "0" + aa;
		}
		return aa
	}
	$('#time1').val(myDate.getFullYear()+"-"+turn(myDate.getMonth()+1)+"-"+turn(myDate.getDate()));
	$('#time2').val(myDate.getFullYear()+"-"+turn(myDate.getMonth()+1)+"-"+turn(myDate.getDate()));
	$('#time3').val(myDate.getFullYear()+"-"+turn(myDate.getMonth()+1)+"-01");
	$('#time4').val(myDate.getFullYear()+"-"+turn(myDate.getMonth()+1)+"-"+turn(myDate.getDate()));
	$('#time5').val(myDate.getFullYear()+"-"+turn(myDate.getMonth()+1)+"-01");
	$('#time6').val(myDate.getFullYear()+"-"+turn(myDate.getMonth()+1)+"-"+turn(myDate.getDate()));
	//part 1
	var main1 = echarts.init(document.getElementById('main1'));
	main1.setOption({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				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: [],
	});
	

	function partOne() {
		var index = layer.load(1, {
			shade: [0.5, '#030303'] //0.1透明度的白色背景
		});
		$('.list_one').html('');
		data=$('#time1').val();
		if(data==''){
			data='2018-11-07';
//			$('#time1').val(data);
		}
		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "info/GetTelCount24ByDate",
			async: true,
			dataType: "json",
			data: {
				date: data
			},
			success: function(data) {
				if(data.state.toLowerCase() == "success") {
					layer.close(index);
					var con = data.data;
					main1.setOption({
						xAxis: {
							data: con.hours
						},
						series: [{
							name: "来电数量",
							type: "line",
							smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
							data: con.rcounts
						}, {
							name: "接通数量",
							type: "line",
							smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
							data: con.ccounts
						},
						 {
							name: "放弃数量",
							type: "line",
							smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
							data: con.gcounts
						},
						{
							name: "黑名单拒接数量",
							type: "line",
							smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
							data: con.scounts
						}]

					})

				}
			}

		});

	}

$('.part1Btn').click(function() {
	partOne();
})

$('.part1Export').click(function(){
	part1ExportFun();
})
function part1ExportFun() {
 	var date=$('#time1').val();
	var url = huayi.config.callcenter_url + "Info/GetTelCount24ByDateExpt?date=" + date;
	window.location.href = url;
}
	
	//part 2
	var phone_num = echarts.init(document.getElementById('phone_num'));
	phone_num.setOption({
		title: {
			//		text: '投诉/举报汇总',
			x: 'center',
			textStyle: {
				color: '#fff',
				fontSize: 16
			},
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'line' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		calculable: true,
		xAxis: [{
			type: 'category',
			//		name: '月份',
			splitLine: {
				show: false
			}, //去除网格线
			data: ["外呼量", "呼入量", "接通量(通)", "平均通话时长(秒)","总通话时长"],
			//		axisTick: {
			//			alignWithLabel: true
			//		},
			axisLine: {
				show: false,
				lineStyle: {
					color: '#fff'
				}
			},
			axisLabel: {
		       show: true,
		        textStyle: {
		          fontSize : 14      //更改坐标轴文字大小
		        }
		     },
			axisTick: {
				show: false
			}

		}],
		yAxis: [{
			show: false
		}],
		series: [{
				name: '数量',
				type: 'bar',
				barWidth: '30%', //图形宽度
				data: [],
				itemStyle: {
					normal: {
						label: {
							show: true,
							textStyle: {
								color: '#fff' //顶部数据颜色
							}
						}
					}
				},
				label: {
					normal: {
						show: true,
						position: 'top' //顶部数据显示位置
					}

				}
			}

		]
		//  color: ['#ff9800','#61a0a8','#1ab394']
	});
	
	function partTwo() {
		var index = layer.load(1, {
			shade: [0.5, '#030303'] //0.1透明度的白色背景
		});
		var date=$('#time2').val();
		if(date==''){
			date='2018-11-07';
//			$('#time2').val(date)
		}
		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "info/GetTelCountByDate",
			async: true,
			dataType: "json",
			data: {
				date: date
			},
			success: function(data) {
				if(data.state.toLowerCase() == "success") {
					layer.close(index);
					var con = data.data;
					phone_num.setOption({
						series: [{
							data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes,con.thtimes]
							//						data: [20, 100, 5, 80]
						}]

					})

				}
			}

		});

	}

$('.part2Btn').click(function() {
	partTwo();
})
$('.part2Export').click(function() {
	part2ExportFun();
})
function part2ExportFun() {
	var date=$('#time2').val();
	var url = huayi.config.callcenter_url + "Info/GetTelCountByDateExpt?date=" + date;
	window.location.href = url;
}
//pasrt 3
	var main = echarts.init(document.getElementById('main'));
	main.setOption({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				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;
			}
		},
		grid: {
	        left: '13%',
	        right: '14%',
	        bottom: '11%',
	        containLabel: true
	    },
		legend: {
			data: ["空闲", "通话", "置忙"],
			textStyle: {
				color: '#fff'
			},
			bottom:'bottom'
		},
		xAxis: {
			name: '时',
			data: [],
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			}
		},
		yAxis: {
			name: '比率',
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			}
		},
		series: [],
	});
 	
    function partThree(){ 
    		var index = layer.load(1, {
			shade: [0.5, '#030303'] //0.1透明度的白色背景
		});
		var start=$('#time3').val();
		var end=$('#time4').val();
    	$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "info/GetUserStateCount24ByDate",
			async: true,
			dataType: "json",
			data: {
				start: start,
				end: end
			},
			success: function(data) {
				if(data.state.toLowerCase() == "success") {
					layer.close(index);
					var con = data.data;
//					var part3 = result.data.b;
					main.setOption({
						xAxis: {
							data: con.hours
						},
						series: [{
							name: "空闲",
							type: "bar",
							data: con.kxpercents,
							 itemStyle:{
				                  normal:{color:'#87CEEB'}
				              }
						}, {
							name: "通话",
							type: "bar",
							data: con.thpercents,
							itemStyle:{
				                  normal:{color:'#F7A35C'}
				              }
						}, {
							name: "置忙",
							type: "bar",
							data: con.zmpercents,
							itemStyle:{
				                  normal:{color:'#DDDF0D'}
				              }
						}]

					})

				}
			}

		});
    }
    //partFour
    function partFour(){
	  	var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
		});
	   var start=$('#time5').val();
       var end=$('#time6').val();
   	   $.ajax({
   	   	type:"get",
   	   	url:huayi.config.callcenter_url + "Info/GetTotal",
   	   	async:true,
   	   	dataType:'json',
   	   	data: {
            sdate: start,
            edate: end
        },
   	   	success:function(data){
   	   		if(data.state.toLowerCase()=='success'){
   	   			layer.close(index);
   	   			var con=data.data;
   	   			console.log(con);
   	   			var dataList=[];
   	   			var dataScore=[];
   	   			$('.phone_li').empty();
   	   			 $(con).each(function(i,n){
   	   			 	if(n.分类=='系统量'){
   	   			 		$('#total').text(n.数量)
   	   			 	}else if(n.分类=='今日量'){
   	   			 		$('#today').text(n.数量)
   	   			 	}else{
   	   			 		dataList[i]=n.分类;
   	   			 		dataScore[i]=n.数量;
//						if(dataList[i]!='undefined'){
//	   	   			 			var html='';
//								html = '<li><div class="text'+i+'"></div><span>'+ dataList[i]+'</span></li>';
//								$('.phone_li').append(html);
//	   	   			 	}
   	   			 	}
					
			 	})  
				  for(var i = 0; i < dataList.length; i++) {
				   if(dataList[i] == undefined) {
				      dataList.splice(i,1);
				      i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，
				    }
				  }
				  for(var i = 0; i < dataScore.length; i++) {
				   if(dataScore[i] == undefined) {
				      dataScore.splice(i,1);
				      i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，
				    }
				  }
				  for (var i=0;i<dataList.length;i++) {
				  	var html='';
				  	html = '<li><div class="text'+i+'"></div><span>'+ dataList[i]+'</span></li>';
					$('.phone_li').append(html);
				  }
   	   			 console.log(dataList);
// 	   			var html='';
// 	   			html='<li><div class="text2"></div><span>'+ dataList[2]+'</span></li>'+
// 	   				'<li><div class="text3"></div><span>'+ dataList[3]+'</span></li>'+
// 	   				'<li><div class="text4"></div><span>'+ dataList[4]+'</span></li>'+
// 	   				'<li><div class="text5"></div><span>'+ dataList[5]+'</span></li>'+
// 	   				'<li><div class="text6"></div><span>'+ dataList[6]+'</span></li>'+
// 	   				'<li><div class="text7"></div><span>'+ dataList[7]+'</span></li>'+
// 	   				'<li><div class="text8"></div><span>'+ dataList[8]+'</span></li>'+
// 	   				'<li><div class="text9"></div><span>'+ dataList[9]+'</span></li>';
// 	   			$('.phone_li').append(html);
   	   			$('.text0').radialIndicator({
					radius: 40,
					barBgColor: '#999',
					barColor: 'rgb(135,206,235)',
					barWidth: 8,
					initValue:dataScore[0],
					roundCorner: true,
					maxValue:5000
					//    percentage: true
				});
				$('.text1').radialIndicator({
					radius: 40,
					barBgColor: '#999',
					barColor: 'rgb(135,206,235)',
					barWidth: 8,
					initValue:dataScore[1],
					roundCorner: true,
					maxValue:5000
					//    percentage: true
				});
				$('.text2').radialIndicator({
					radius: 40,
					barBgColor: '#999',
					barColor: 'rgb(135,206,235)',
					barWidth: 8,
					initValue:dataScore[2],
					roundCorner: true,
					maxValue:5000
					//    percentage: true
				});
				$('.text3').radialIndicator({
					radius: 40,
					barBgColor: '#999',
					barColor: 'rgb(135,206,235)',
					barWidth: 8,
					initValue:dataScore[3],
					roundCorner: true,
					maxValue:5000
					//    percentage: true
				});$('.text4').radialIndicator({
					radius: 40,
					barBgColor: '#999',
					barColor: 'rgb(135,206,235)',
					barWidth: 8,
					initValue:dataScore[4],
					roundCorner: true,
					maxValue:5000
					//    percentage: true
				});$('.text5').radialIndicator({
					radius: 40,
					barBgColor: '#999',
					barColor: 'rgb(135,206,235)',
					barWidth: 8,
					initValue:dataScore[5],
					roundCorner: true,
					maxValue:5000
					//    percentage: true
				});$('.text6').radialIndicator({
					radius: 40,
					barBgColor: '#999',
					barColor: 'rgb(135,206,235)',
					barWidth: 8,
					initValue:dataScore[6],
					roundCorner: true,
					maxValue:5000
					//    percentage: true
				});
				$('.text7').radialIndicator({
					radius: 40,
					barBgColor: '#999',
					barColor: 'rgb(135,206,235)',
					barWidth: 8,
					initValue:dataScore[7],
					roundCorner: true,
					maxValue:5000
					//    percentage: true
				});
   	   		}
   	   	}
   	   });
   }

   // 管辖区域来话量统计
	function part4ExportFun() {
		var start=$('#time5').val();
		var end=$('#time6').val();
		var url = huayi.config.callcenter_url + "Info/GetTotalExpt?sdate=" + start + "&edate=" + end;
		window.location.href = url;
	}

	//导出
	$('.part4Export').click(function() {
		part4ExportFun();
	})
	 
$('.part3Btn').click(function() {
	partThree();
})
$('.part3Export').click(function() {
	part3ExportFun();
})
function part3ExportFun() {
	var start=$('#time3').val();
	var end=$('#time4').val();
	var url = huayi.config.callcenter_url + "Info/GetUserStateCount24ByDateExpt?start=" + start + "&end=" + end;
	window.location.href = url;
}

$('.part4Btn').click(function() {
				partFour();
			})
Ajax();
partFour();
function Ajax(){
	partOne();
	partTwo(); 
	partThree();
}

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