SQYCX12345_Web/WebChart_2.0/js/TelephoneDet...

	$(function(){
		laydate.render({
		elem: '#time1',
		range: '~',
		theme: '#114a97',
		    done: function(value, date) {
					partOne(value && value.split(' ~ ')[0],value && value.split(' ~ ')[1]);
					partTwo(value && value.split(' ~ ')[0]);	
		    		partThree(value && value.split(' ~ ')[0]);
		    }
		});
		Ajax();
	})
			var sitProportion = echarts.init(document.getElementById('sitProportion')); //坐席闲忙比例
			sitProportion.setOption({
				color: ['#4ab7c7', '#2484d9', '#2e39c1'],
				tooltip: {
					trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								show: true,
								backgroundColor: '#333'
							}
						}
				},
				legend: {
					top: 'top',
					left: '135px',
					data: ['呼入量', '呼入接通量', '呼出','呼出接通量'],
					textStyle: {
						color: '#00e9ff'
					}
				},
				grid: {
					left: '1%',
					right: '3%',
					bottom: '5%',
					containLabel: true
					},
				xAxis: {
					name: '坐席',
					data: [],
					axisLine: {
						lineStyle: {
							color: '#3061a2'
						}
					},
					axisTick: {
						alignWithLabel: true,
						show: false
					},
					axisLabel: { //横轴字体颜色
						show: true,
						textStyle: {
							color: '#eff0f4'
						}
					}

				},
				yAxis: {
					name: '通',
					splitLine: {
						show: false
					},
					axisLine: {
						lineStyle: {
							color: '#3061a2'
						}
					},
					axisLabel: { //横轴字体颜色
						show: true,
						textStyle: {
							color: '#eff0f4'
						}
					}
				},
				series: [{
					name: '呼入量',
					type: 'line',
					smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
					data: []
				}, {
					name: '呼入接通量',
					type: 'line',
					smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
					data: []
				}, {
					name: '呼出',
					type: 'line',
					smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
					data: []
				}, {
					name: '呼出接通量',
					type: 'line',
					smooth: true,
					showAllSymbol: true,
					symbol: "emptyCircle",
					symbolSize: 10,
					data: []
				}]

			});
			function partOne(starts,ends) {
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + "info/GetAgentTelCount",
					async: true,
					dataType: 'json',
					data: {
						start: starts,
						end:ends
					},
					success: function(data) {
						if(data.state.toLowerCase() == 'success') {
							// 	   			layer.close(index);
							var con = data.data;
							sitProportion.setOption({
								xAxis: {
									data: con.users
								},
								series: [{
									data: con.incount
								},{
									data:con.inconnectcount
								},{
									data:con.outcount
								},{
									data:con.outconnectcount
								}]

							})

						}
					}
				});
			}



//part 2
	var phoneTimeCount = echarts.init(document.getElementById('phoneTimeCount'));
	phoneTimeCount.setOption({
		color: ['#ceba5f', '#4da991', '#f06e84', '#6a91e0'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					show: true,
					backgroundColor: '#333'
				}
			}
		},
			grid: {
					left: '2%',
					right: '5%',
					bottom: '6%',
					containLabel: true
					},
		legend: {
			top: 'top',
			left: '180px',
			data: ["来电数量", "接通数量",  "放弃数量", "黑名单拒接数量"],
			textStyle: {
				color: '#00e9ff'
			}
		
			
		},
		xAxis: {
			name: '时',
			data: [],
			axisLine: {
				lineStyle: {
					color: '#3061a2'
				}
			},
			axisTick: {
				alignWithLabel: true,
				show: false
			},
			axisLabel: { //横轴字体颜色
				show: true,
				textStyle: {
					color: '#eff0f4'
				}
			}
		},
		yAxis: {
			name: '数量',
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#3061a2'
				}
			},
			axisLabel: { //横轴字体颜色
				show: true,
				textStyle: {
					color: '#eff0f4'
				}
			}
		},
		series: []
	});
	

	function partTwo(dates) {
//		var index = layer.load(1, {
//			shade: [0.5, '#030303'] //0.1透明度的白色背景
//		});
		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "info/GetTelCount24ByDate",
			async: true,
			dataType: "json",
			data: {
				date: dates
			},
			success: function(data) {
				if(data.state.toLowerCase() == "success") {
//					layer.close(index);
					var con = data.data;
					phoneTimeCount.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
						}]

					})

				}
			}

		});

	}

//part3
	var todyPhoneCount = echarts.init(document.getElementById('todyPhoneCount'));
			todyPhoneCount.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: false,
						label: {
							show: true,
							backgroundColor: '#030917'
						}
					},
				},
				xAxis: {
					name: '类型',
					data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)"],
					axisLine: {
						lineStyle: {
							color: '#3061a2'
						}
					},
					axisTick: {
						alignWithLabel: true,
						show: false
					},
					axisLabel: { //横轴字体颜色
						show: true,
						textStyle: {
							color: '#eff0f4'
						}
					}
				},
				yAxis: {
					name: '数量',
					splitLine: {
						show: false
					},
					axisLine: {
						lineStyle: {
							color: '#3061a2'
						}
					},
					axisLabel: { //横轴字体颜色
						show: true,
						textStyle: {
							color: '#eff0f4'
						}
					}
					
				},
				series: [{
					name: '数量',
					type: 'bar',
					barWidth: 18,
					itemStyle: {
		                normal: {
		                    color: function(params) {
		                        // build a color map as your need.
		                        var colorList = [
		                          '#368cab','#54b793','#4b6ab0','#2531a9'];
		                        return colorList[params.dataIndex]
		                    }
		                }
		            },
					label: {
						normal: {
							show: true,
							position: 'top',//顶部数据显示位置
							textStyle: {
						            color: '#fff' //顶部数据颜色
						         },
							formatter: '{c}' // 这里是数据展示的时候显示的数据
						}
					},
					data: []
				}]

			});
			

		function partThree(dates) {
				$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "info/GetTelCountByDate",
			async: true,
			dataType: "json",
			data: {
				date: dates
			},
			success: function(data) {
				if(data.state.toLowerCase() == "success") {
//					layer.close(index);
					var con = data.data;
					todyPhoneCount.setOption({
						series: [{
							data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes]
						}]

					})

				}
			}

		});

			}
		
		function Ajax(){
			partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0],$('#time1').val() && $('#time1').val().split(' ~ ')[1]);
			partTwo($('#time1').val() && $('#time1').val().split(' ~ ')[0])
			partThree($('#time1').val() && $('#time1').val().split(' ~ ')[0]);
		}