AnYang_UI/WebChartNewest/js/main.js

if(typeof console == "undefined") {
	this.console = {
		log: function(msg) {}
	};
}
var callSeatState = echarts.init(document.getElementById("callSeatState"));
// 如果浏览器不支持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 dataLength; //坐席数量
let distributionData = []; //话务数据统计数据
let callDate = []; //话务坐席数据
let hwcount;
let jtcount;
let daySeatName = ['登陆坐席数量', '呼叫排队数量', '话务量', '呼入接通量'];
let callSeatStateName = ['等待', '通话中', '话后处理', '置忙', '空闲']
var lasttime = new Date().getTime();
let callSeatStateData;
let locationNum = 0;

//坐席数量
function agentCount() {
	$.ajax({
		url: huayi.config.callcenter_url + "SeatMonitoring/getlist",
		data: {
			token: $.cookie("token"),
		},
		async: false,
		dataType: 'json',
		success: function(res) {
			dataLength = res.data.length;
		}
	})
}
//话务量接通量
function getPhoneCount() {
	$.ajax({
		url: huayi.config.callcenter_url + "/InfoNew/GetTrafficCountByNow",
		data: {
			token: $.cookie("token"),
		},
		async: false,
		dataType: 'json',
		success: function(res) {
			hwcount = res.data.hw[0].hwcount;
			jtcount = res.data.hw[0].jtcount
		}
	})
}
//话务数据统计
function GetDistributionCount() {
	$.ajax({
		url: huayi.config.callcenter_url + "InfoNew/GetDistributionCount",
		data: {
			token: $.cookie("token"),
		},
		async: false,
		dataType: 'json',
		success: function(res) {
			distributionData = [];
			let hw = res.data.hw[0];
			let gd = res.data.gd[0];
			Object.keys(hw).forEach((key, n) => {
				if(key == 'hrjtcount') {
					distributionData.push({
						name: '呼入接通数量',
						value: hw[key]
					})
				}
				if(key == 'hcjtcount') {
					distributionData.push({
						name: '呼出接通数量',
						value: hw[key]
					})
				}
				if(key == 'hrtime') {
					distributionData.push({
						name: '呼入通话时长',
						value: hw[key]
					})
				}
				if(key == 'hctime') {
					distributionData.push({
						name: '呼出通话时长',
						value: hw[key]
					})
				}
				if(key == 'pjhrtime') {
					distributionData.push({
						name: '平均呼入通时',
						value: hw[key]
					})
				}
				if(key == 'pjhctime') {
					distributionData.push({
						name: '平均呼出通时',
						value: hw[key]
					})
				}
				if(key == 'fqcount') {
					distributionData.push({
						name: '放弃呼叫量',
						value: hw[key]
					})
				}
				if(key == 'hscount') {
					distributionData.push({
						name: '日呼损量',
						value: hw[key]
					})
				}
				if(key == 'sdhscount') {
					distributionData.push({
						name: '时段呼损量',
						value: hw[key]
					})
				}
			})
			Object.keys(gd).forEach((key, n) => {
				if(key == 'dxcount') {
					distributionData.push({
						name: '短信受理量',
						value: gd[key]
					})
				}
				if(key == 'wxcount') {
					distributionData.push({
						name: '微信受理量',
						value: gd[key]
					})
				}
				if(key == 'wbcount') {
					distributionData.push({
						name: '微博受理量',
						value: gd[key]
					})
				}
				if(key == 'apcount') {
					distributionData.push({
						name: 'APP受理量',
						value: gd[key]
					})
				}
				if(key == 'xxcount') {
					distributionData.push({
						name: '市长信箱受理量',
						value: gd[key]
					})
				}
			})
			distributionData.unshift({
				name: '登陆坐席数量',
				value: 0
			})
			distributionData.unshift({
				name: '呼叫排队数量',
				value: 0
			})
		}
	})
}
Connect()
//创建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() + "    " + "建立连接");
		//心跳检测重置
		heartCheck.reset().start();
		cls = 0;
		$(".Login").addClass("active");
		lasttime = new Date().getTime();
		//		debugger
		//话务坐席情况
		obj = {
			"Type": 'GetAgentDetail', //话后处理时长设置，0代表一致话后处理，除非发送置闲 （按照历史习惯，字符串形式）
		};
		Send();
	};
	//接收到消息的回调方法
	ws.onmessage = function(evt) {
		//如果获取到消息，心跳检测重置
		//拿到任何消息都说明当前连接是正常的
		heartCheck.reset().start();
		var myDate = new Date();
		data = JSON.parse(evt.data)[0];
		if(data.Type == "GetAgentDetail") {
			if(distributionData[0]){
				distributionData[0].value = data.WaiteCallCount;
				distributionData[1].value = data.AgentOnlineCount
				let disStr = ''
				distributionData.forEach(function(v, n) {
					disStr += '<li><label>' + v.name + '</label><span class="num_roll" id="">' + parseInt(v.value % 100000 / 10000) +
						'</span><span class="num_roll" id="">' + parseInt(v.value % 10000 / 1000) +
						'</span><span class="num_roll" id="">' + parseInt(v.value % 1000 / 100) +
						'</span><span class="num_roll"id="">' + parseInt((v.value % 100) / 10) +
						'</span><span class="num_roll" id="">' + parseInt(v.value % 10) + '</span></li>'
				})
				$('.callTraffic .data_info').html(disStr)
				callDate = [Number(data.AgentOnlineCount), Number(data.WaiteCallCount), Number(hwcount), Number(jtcount)]
				const outLine = dataLength - data.AgentOnlineCount;
				callSeatStateData = [data.WaiteCallCount, data.AgentSpeakCount, data.AgentProcessingCount, data.AgentReposeCount, data.AgentFreeCount]
				hotThingsChartMain('callSeatState', callSeatStateName, callSeatStateData, 500)
			}
			
		}

		if(data) {
			var rlt = data.Result;
			if(rlt == true) {
				var type = data.Type;
				switch(type.toLowerCase()) {
					case "subscribe":
						SubScribeBack();
						break; //监测
					case "subscribecancel":
						SubScribeCancelBack();
						break; //停止监测
					case "agentstate":
						AgentStateBack(data);
						break; //坐席状态
					case "linestate":
						//						LineStateBack(data);
						break; //线路状态
				}
			} else {
				if(rlt == false) {
					//layer.confirm('操作失败！', {
					//    btn: ['确定'] 
					//});
					$(".hwzt").text('操作失败！');
				} else {
					$(".hwzt").text(rlt);
					//layer.confirm(rlt, {
					//    btn: ['确定']
					//});
					switch(data.Type.toLowerCase()) {
						case "waitcount":
							backstageQueue(data);
							break; //后台排队 
					}
				}
			}
		}
	}
};
//连接关闭的回调方法
ws.onclose = function(evt) {
	if(cls == 0) {
		cls = 1;
		//console.log("连接关闭！");
		//layer.confirm('连接关闭！', {
		//    btn: ['确定']
		//});
		$(".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;
	}, 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 SubScribeBack() {
	$(".star_btn").css("background-color", 'rgb(1,216,235)');
	$(".stop_btn").css("background-color", '#064695');

}
//取消监测
function SubScribeCancelBack() {
	$(".people_list").show()
	$(".people_list i").hide()
	$(".stop_btn").css("background-color", 'rgb(1,216,235)');
	$(".star_btn").css("background-color", '#064695');
	$(".stop_btn").addClass("dis");
	$(".star_btn").removeClass("dis");
	$(".zx_people i").removeClass().addClass("lx");
	$(".zx_people i").removeClass().addClass("lx").attr("zx_item", "0").attr("xl_item", "0");
}
//班长监测返回状态
//坐席状态
function AgentStateBack(data) {
	//	console.log(data)
	var sts = "";
	switch(data.State) {
		case "0":
			sts = "lx";
			break; //离线
		case "1":
			break; //登录中
		case "2":
			sts = "kx";
			break; //空闲
		case "3":
			sts = "th";
			break; //通话中
		case "4":
			sts = "hh";
			break; //话后处理中
		case "5":
			sts = "ml";
			break; //小休
		case "6":
			sts = "zl";
			break; //被请求
		case "7":
			sts = "lx";
			break; //注销
	}
	if(data.AgentID * 1 < 10) {
		data.AgentID = '0' + data.AgentID;
	}
	var ele = $("." + data.AgentID).find("i");
	if(sts) {
		ele.removeClass().addClass(sts);
	}

	ele.attr("zx_item", data.State);
	if($(".zxtp .g_nums").text() == data.AgentID) {
		if(sts) {
			$(".zxtp i").removeClass().addClass(sts);
		}
	}
	if(data.State === "2") {
		//		console.log(data.AgentID,data.State,data.Group,)
	}
	$(".people_list dl dt").each(function() {
		//		console.log($(this).find("i").attr("zxGroup"))
		//		if($(this).find("i").attr("class")==='lx'){
		////			console.log($(this).find("i").attr("zxGroup"))
		////			console.log(data.AgentID,$(this).find("i").attr("zxGroup"))
		//			if ($(this).find("i").attr("zxGroup")==data.Group) {
		//				$(this).show()
		//				$(this).find("i").show()
		//				$(this).find("i").removeClass().addClass("dg");
		//				console.log($(this).find("i").attr("zxGroup"))
		//			}
		//			if($(this).find("i").attr("class")==='lx'){
		//				$(this).find("i").hide()
		//			}
		//		}else{
		//			$(this).find("i").show()
		//		}
		//		$(this).find("i").removeClass().addClass("dg");
		$(this).find("i").show()

	})
	//	$(".people_list dl dt").eq(0).before($('.' + data.AgentID))
	//	$(document.getElementsByClassName('seatList')[locationNum]).before($('.' + data.AgentID))
}
//线路状态
function LineStateBack(data) {
	//data.Type,data,
	//	console.log(data.AgentID,data.State)
	if(data.State.indexOf("|") != -1) {
		arr = data.State.split("|");
		data.State = arr[0];
	}

	if(data.AgentID * 1 < 10) {
		data.AgentID = '0' + data.AgentID;
	}
	var ele = $("." + data.AgentID).find("i");

	var sts = "";
	switch(data.State) {
		case "0":
			sts = "lx";
			break; //分机不可用
		case "1":
			if(!(ele.hasClass("hh") || ele.hasClass("ml"))) {
				sts = "kx";
			}
			break; //空闲
		case "2":
			sts = "ml";
			break; //摘机等待拨号
		case "3":
			sts = "ml";
			break; //正在拨号
		case "4":
			sts = "zl";
			break; //呼出振铃
		case "5":
			sts = "zl";
			break; //来电振铃
		case "6":
			sts = "th";
			break; //通话中
		case "7":
			sts = "ml";
			break; //播放忙音中
		case "8":
			sts = "th";
			break; //通话保持中
		case "9":
			break; //话机移除
		case "10":
			break; //保持/空闲
		case "11":
			break; //保持/摘机等待拨号
		case "12":
			break; //保持/正在拨号
		case "13":
			break; //保持/呼出振铃
		case "14":
			break; //保持/通话中
	}
	if(sts) {
		ele.removeClass().addClass(sts);
	}
	ele.attr("xl_item", data.State);
	if($(".zxtp .g_nums").text() == data.AgentID) {
		if(sts) {
			$(".zxtp i").removeClass().addClass(sts);
		}
	}
}

function toDub(i) {
	return i < 10 ? "0" + i : "" + i;
}
//默认记忆上次是否签入，是否置忙置闲 0表示已签入 空闲，1表示签入置忙，2表示签出 
function SetStateCookie(state) {
	$.cookie("socket_state", state);
}

function backstageQueue(data) {
	var obj = $("iframe:visible")
	// if (obj.attr("data-id") == "index_v1.html") {
	window.frames[obj.attr("name")].realTimeMonitorQueue(data.WaitCount);
	// }
}
//在线坐席信息
function GetAgentListBack(data) {
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + "SeatMonitoring/GetAgentList",
		async: true,
		dataType: 'json',
		data: {
			"token": $.cookie("token")
		},
		success: function(result) {
			var user = result.data;
			$(user).each(function(j, m) {
				$(data.AgentList).each(function(k, g) {
					if(g.AgentID == m.UserCode) {
						g.userName = m.UserName;
					}
				})

			})
			$(data.AgentList).each(function(k, m) {
				var strr = '';
				switch(m.State) {
					case "0":
						strr = "离线";
						break; //离线
					case "1":
						break; //登录中
					case "2":
						strr = "空闲";
						break; //空闲
					case "3":
						strr = "通话中";
						break; //通话中
					case "4":
						strr = "话后处理中";
						break; //话后处理中
					case "5":
						strr = "忙碌";
						break; //小休
					case "6":
						strr = "振铃";
						break; //被请求
					case "7":
						strr = "注销";
						break; //注销
				}
				var html = '<tr fjh="' + m.AgentExten + '">' +
					'<td>' + (m.userName ? '' : m.userName) + '</td>' //姓名
					+
					'<td>' + m.AgentID + '</td>' //工号
					+
					'<td>' + m.AgentExten + '</td>' //分机号
					+
					'<td class=" ' + m.UserCode + 'state">' + strr + '</td>' //状态
					+
					'</tr>';
				$(html).appendTo("#zxTable tbody");

			})
		}
	});
}
//获取当前的日期时间 格式“yyyy-MM-dd HH:mm:ss”
function getNowFormatDate() {
	var date = new Date();
	var seperator1 = "-";
	var seperator2 = ":";
	var month = date.getMonth() + 1;
	var strDate = date.getDate();
	if(month >= 1 && month <= 9) {
		month = "0" + month;
	}
	if(strDate >= 0 && strDate <= 9) {
		strDate = "0" + strDate;
	}
	var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
		" " + date.getHours() + seperator2 + date.getMinutes() +
		seperator2 + date.getSeconds();
	return currentdate;
}

var iswebcloase = 1;
window.onunload = function() {
	if(iswebcloase) {
		iswebcloase = 0;
		if(ws.readyState == ws.OPEN) {
			obj.Type = 'Logout';
			Send();
			ws.onclose();
		}
	}
}
window.onbeforeunload = function() {
	if(iswebcloase) {
		iswebcloase = 0;
		if(ws.readyState == ws.OPEN) {
			obj.Type = 'Logout';
			Send();
			ws.onclose();
		}
	}
}