AnYang_UI/WebChartNewest/js/main.js

if (typeof console == "undefined") {
	this.console = {
		log: function (msg) { }
	};
}
// 如果浏览器不支持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;
//坐席分析
agentCount();
getPhoneCount();
GetDistributionCount()
setInterval(function () {
	agentCount();
	getPhoneCount();
	GetDistributionCount();
}, 120000)
//坐席数量
function agentCount() {
	$.ajax({
		url: huayi.config.callcenter_url + "SeatMonitoring/getlist",
		data: {},
		async: false,
		dataType: 'json',
		success: function (res) {
			dataLength = res.data.length;
		}
	})
}
//话务量接通量
function getPhoneCount() {
	$.ajax({
		url: huayi.config.callcenter_url + "/InfoNew/GetTrafficCountByNow",
		data: {},
		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: {},
		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];
		console.log(data)
		if (data.Type == "GetAgentDetail") {
			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.AgentRingCount, data.TrunkCallInCount, data.AgentCallOutCount, data.AgentFreeCount, outLine]
			hotThingsChart('timeTraffic', daySeatName, callDate, callDate[0])
			hotThingsChart('callSeatState', callSeatStateName, callSeatStateData, 500)
			$('.btn_time').click(function (e) {
				if (e.target.tagName == 'SPAN') {
					if ($(e.target).attr('data-state') == '1') {
						$('.daySeat').css('display', 'none')
						$('.timeTraffic').css('display', 'inline-block')
						$('#traffic').css('display', 'none')
						$('#timeTraffic').css('display', 'block')
						$('.act').html('当日数据')
						$('.call_situation h2').text('话务数据统计')
						hotThingsChart('timeTraffic', ['登陆坐席数量', '呼叫排队数量', '话务量', '呼入接通量'], callDate, callDate[0])
						trafficState = 0
					}
				}
				e.stopPropagation();
			})

		}

		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() {
	$(".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) {
	var sts = "";
	// console.log(data)
	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);
		}
	}
	$(document.getElementsByClassName('people_list')[locationNum]).before($('.' + data.AgentID))
}
//线路状态
function LineStateBack(data) {
	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) {
	console.log("123")
	var obj = $("iframe:visible")
	// if (obj.attr("data-id") == "index_v1.html") {
	window.frames[obj.attr("name")].realTimeMonitorQueue(data.WaitCount);
	// }
}
//在线坐席信息
function GetAgentListBack(data) {
	console.log(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();
		}
	}
}