AnYang_UI/WebChartNew/js/TelephoneDet...

	var areaOneVal = helper.cookies.get("areaOneVal");
	var areaOneText = helper.cookies.get("areaOneText");
	// 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
	WEB_SOCKET_SWF_LOCATION = "./js/websocket/WebSocketMain.swf";
	// 开启flash的websocket debug
	WEB_SOCKET_DEBUG = true;
	var ws, n = 0,
		timer;
	var lockReconnect = false; //避免重复连接
	var obj = {};
	var Statess;
	var cls = 0;
	var lasttime = new Date().getTime();
	var cons;
	var person = '';
	if(areaOneVal) {
		var areaOneVal = helper.cookies.get("areaOneVal");
	} else {
		var areaOneVal = "sqs12345"
	}
	//创建scoket连接
	function createWebSocket() {
		try {

			Connect();
		} catch(e) {
			reconnect();
		}
	}
	//连接
	function Connect() {
		// debugger
		ws = new WebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
		ws.onopen = function() {
			console.log(new Date() + "    " + "建立连接");
			cls = 0;
			lasttime = new Date().getTime();
			join()
			SayBusy()

		};
		//接收到消息的回调方法
		ws.onmessage = function(evt) {
			//如果获取到消息，心跳检测重置
			//拿到任何消息都说明当前连接是正常的
			//heartCheck.reset().start();
			var myDate = new Date();
			console.log(myDate + "  receive  " + evt.data);
			var data = JSON.parse(evt.data)[0];
			if(data) {
				var rlt = data.Result;
				var type = data.Type;
				if(rlt == true) {
					switch(type.toLowerCase()) {
						//case "heart": HeartBack(); break;//心跳
						case "login":
							LoginBack();
							break; //签入
						case "subscribecancel":
							SubScribeCancelBack();
							break; //停止监测
						case "agentstate":
							AgentStateBack(data);
							break; //坐席状态
					}
				} else {
					if(rlt == false) {
						$(".hwzt").text('操作失败！');
					} else {
						$(".hwzt").text(rlt);
						if(type.toLowerCase() == 'waitcount') {
							backstageQueue(data);
						}
					}
				}
			}
		};

		//连接关闭的回调方法
		ws.onclose = function(evt) {
			if(cls == 0) {
				cls = 1;
				$(".hwzt").text('连接关闭！');
				$("#top-search li i").removeClass("active");
				reconnect();
			}
		};
		//连接发生错误的回调方法
		ws.onerror = function(evt) {
			//产生异常
			$(".hwzt").text('连接出现异常！');
			console.log(ws);
			if(ws == null || ws.readyState != ws.OPEN) {
				console.log(new Date() + "开始重连");
				reconnect();
			}

		};
	}
	//重连
	function reconnect() {

		if(lockReconnect) return;
		lockReconnect = true;
		//没连接上会一直重连，设置延迟避免请求过多
		setTimeout(function() {
			console.log(new Date() + "    " + "重连中……");
			createWebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
			lockReconnect = false;
			SayBusy()
		}, 2000);
	}

	//发送
	function Send() {
		if(ws.readyState != ws.OPEN) {
			//reconnect();
		}
		if(ws.readyState == ws.OPEN) {
			console.log(new Date() + "  send  " + JSON.stringify(obj));
			ws.send(JSON.stringify(obj));
		}
	}
	//心跳检测
	var heartCheck = {
		timeout: 25000, //25秒
		timeoutObj: null,
		serverTimeoutObj: null,
		reset: function() {
			clearTimeout(this.timeoutObj);
			clearTimeout(this.serverTimeoutObj);
			return this;
		},
		start: function() {
			var self = this;
			this.timeoutObj = setTimeout(function() {
				//这里发送一个心跳，后端收到后，返回一个心跳消息，
				//onmessage拿到返回的心跳就说明连接正常
				obj.Type = "Heart";
				Send();
				self.serverTimeoutObj = setTimeout(function() { //如果超过一定时间还没重置，说明后端主动断开了
					ws.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
				}, self.timeout)
			}, this.timeout)
		}
	}
	// 签入
	function SayBusy() {
		obj.Type = "SayBusy";
		Send();
	}
	//签入
	function LoginBack() {
		obj.Type = "SayBusy";
		Send();
	}
	// 点击签入
	function join() {
		obj.Type = 'Login',
		obj.AgentID = '9898',
		obj.AgentExten = '1015',
		obj.AgentType = '0',
		obj.AgentGroup = '364'
		Send()
	}
	//取消监测
	function SubScribeCancelBack() {
		$('.yuan_one').addClass("lx")
		$('.yuan_two').addClass("lx")
	}
	//坐席状态
	function AgentStateBack(data) {
		
		$(cons).each(function(i, n) {
			if(n.F_UserCode == data.AgentID) {
				
				$('.yuan_one').eq(i).removeClass("lx")
				$('.yuan_two').eq(i).removeClass("lx")
				
				$('.yuan_one').eq(i).removeClass("kx")
				$('.yuan_two').eq(i).removeClass("kx")
				
				$('.yuan_one').eq(i).removeClass("hc")
				$('.yuan_two').eq(i).removeClass("hc")
				
				$('.yuan_one').eq(i).removeClass("hh")
				$('.yuan_two').eq(i).removeClass("hh")
				
				$('.yuan_one').eq(i).removeClass("ml")
				$('.yuan_two').eq(i).removeClass("ml")
				
				$('.yuan_one').eq(i).removeClass("zl")
				$('.yuan_two').eq(i).removeClass("zl")
				
				if(data.State == '0') {
					$('.yuan_one').eq(i).addClass("lx")
					$('.yuan_two').eq(i).addClass("lx")
				} else if(data.State == '2') {
					$('.yuan_one').eq(i).addClass("kx")
					$('.yuan_two').eq(i).addClass("kx")
				} else if(data.State == '3') {
					$('.yuan_one').eq(i).addClass("hc")
					$('.yuan_two').eq(i).addClass("hc")
				} else if(data.State == '4') {
					$('.yuan_one').eq(i).addClass("hh")
					$('.yuan_two').eq(i).addClass("hh")
				} else if(data.State == '5') {
					$('.yuan_one').eq(i).addClass("ml")
					$('.yuan_two').eq(i).addClass("ml")
				} else if(data.State == '6') {
					$('.yuan_one').eq(i).addClass("zl")
					$('.yuan_two').eq(i).addClass("zl")
				}
			}
		})

	}

	//后台排队
	function backstageQueue(data) {
		person = data.WaitCount
		console.log(person)
	}

	$(function() {
		createWebSocket()
		SayBusy()
		partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1], areaOneVal);
		laydate.render({
			elem: '#time1',
			range: '~',
			theme: '#114a97',
			done: function(value, date) {
				var areaOneVal = $(".areaOne").val();
				partOne(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1], areaOneVal);
			}

		});
		laydate.render({
			elem: '#time2',
			theme: '#114a97',
			done: function(value, date) {
				var areaOneVal = $(".areaOne").val();
				partTwo(value, areaOneVal)
			}
		});
		laydate.render({
			elem: '#time3',
			theme: '#114a97',
			done: function(value, date) {
				var areaOneVal = $(".areaOne").val();
				partThree(value, areaOneVal)
			}
		});
		Ajax();
		$(".areaOne").change(function() {
			var areaOneVal = $(this).val();
			var areaOneText = $(".areaOne").find("option:selected").text();
			helper.cookies.set("areaOneVal", areaOneVal, 7);
			helper.cookies.set("areaOneText", areaOneText, 7);
			partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1], areaOneVal);
			partTwo($('#time2').val(), areaOneVal);
			partThree($('#time3').val(), areaOneVal);
			//  	Ajax()
		});
	})
	// 跳轉
	$(".index").click(function() {
		window.open('detail.html', '_self')
	})
	$(".second").click(function() {
		window.open('second.html', '_self')
	})
	$(".third").click(function() {
		window.open('third.html', '_self')
	})
	$(".fourth").click(function() {
		window.open('fourth.html', '_self')
	})
	$(".nav_middle").click(function() {
		window.open('index.html', '_self')
	})
	$("#department").click(function() {
		window.open('receiptDepartment.html', '_self')
	})
	$("#sourceChannel").click(function() {
		window.open('sourceChannel.html', '_self')
	})
	// $("#call").click(function(){
	// 	window.open('TelephoneDetails.html','_self')
	// })
	$("#complaint").click(function() {
		window.open('complaintsReport.html', '_self')
	})

	//区县筛选
	//deprtment();
	function deprtment() {
		$.getJSON(huayi.config.callcenter_url + "CountyBranch/GetBranchListS", function(result) {
			if(result.state.toLowerCase() == "success") {
				goodslist = result.data;
				//			第五屏
				$(".areaOne").empty();
				$(goodslist).each(function(i, n) {
					$('<option value="' + n.F_Code +
						'">' + n.F_Name +
						'</option>').appendTo($(".areaOne"));
				});
				if(areaOneVal) {
					$(".areaOne").val(areaOneVal);
				}
			}
		});
	}

	function partOne(starts, ends, areaOneVal) {
		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "SeatMonitoring/getlist",
			async: true,
			dataType: 'json',
			data: {
				// start: starts,
				// end: ends,
				// branchcode:areaOneVal
			},
			success: function(data) {
				if(data.state.toLowerCase() == 'success') {
					// 	   			layer.close(index);
					var newdatas=[]
					cons = data.data;
					for(var i=0;i<cons.length;i++){
						console.log(cons[i].F_RoleCode)
						if(cons[i].F_RoleCode=="ZXHWY"){
							newdatas.push(cons[i])
						}
					}
					console.log(newdatas)
					$(".users").html('')
					$(newdatas).each(function(i, n) {
						var str = ' <li class="touxiang"><ol class="tx"><li class="person"><span class="yuan_one ">' +
							'</span><span class="yuan_two"></span></li><li class="userid">' +
							n.F_UserCode + '</li></ol></li>';
						var a = $(str)
						a.appendTo($(".users"))
					})

				}

			}

		});
	}
	// 开始检测
	$(".kqc").click(function() {
		// if (!$(this).hasClass("dis")) {
		$('.kqc').addClass('kqc_active')
		$('.jqc').removeClass('dis')
		$(cons).each(function(i, n) {
			obj.Type = "SubScribe";
			obj.SubParmer = n.F_WorkNumber * 1;

			obj.SubType = "0"; //根据工号订阅坐席状态
			Send();
			obj.SubType = "1"; //根据工号订阅线路状态
			Send();
		})
		//top.obj.Type = "SubScribe";
		//top.obj.SubParmer = "8003";

		//top.obj.SubType = "0";//根据工号订阅坐席状态
		//top.Send();
		//top.obj.SubType = "1";//根据工号订阅线路状态
		//top.Send();
		// }
	})

	//停止监测
	$(".jqc").click(function() {
		$('.kqc').removeClass('kqc_active')
		$('.jqc').addClass('dis')
		//$(user).each(function (i, n) {
		//   obj.Type = "SubScribeCancel";
		//   obj.SubParmer = n.F_WorkNumber;

		//   obj.SubType = "0";//根据工号取消订阅坐席状态
		//   Send();
		//   obj.SubType = "1";//根据工号取消订阅线路状态
		//   Send();
		//})
		obj.Type = "SubScribeCancel";
		obj.SubParmer = "-1";

		obj.SubType = "0"; //根据工号取消订阅坐席状态
		Send();
		obj.SubType = "1"; //根据工号取消订阅线路状态
		Send();

	})
	//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, areaOneVal) {
		//		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,
				branchcode: areaOneVal
			},
			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', '#a93d19'
						];
						return colorList[params.dataIndex]
					}
				}
			},
			label: {
				normal: {
					show: true,
					position: 'top', //顶部数据显示位置
					textStyle: {
						color: '#fff' //顶部数据颜色
					},
					formatter: '{c}' // 这里是数据展示的时候显示的数据
				}
			},
			data: []
		}]

	});

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

					})

				}
			}

		});

	}

	function Ajax() {
		var areaOneVal = helper.cookies.get("areaOneVal");
		var areaOneText = helper.cookies.get("areaOneText");
		//partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1],areaOneVal);
		partTwo($('#time2').val(), areaOneVal)
		partThree($('#time3').val(), areaOneVal);
	}