YH_Web_UI/WebUI/CallCenterWe.../TelCall/js/seatMonitorL...

/**
 * 坐席监控
 * */
var groupLists = []; //坐席組数组
var postSeatsLists = []; //post的参数
var seatRealSateTimer = null; //定时器
var isTimerOn = false;//定时器是否开启
$(function() {

	getGroups().then(function() {
		getSeatLists(); //获取全部坐席
	});

	//tab切换
	$('#tab_head_left li').click(function() {
		var tabIndex = $(this).attr('data-index');
		$(this).addClass('tab_head_active').siblings().removeClass('tab_head_active');
		$('#tab_contents .seat_lists_all').eq(tabIndex).addClass('show_lists').siblings().removeClass('show_lists');
	});

	//监测
	$('#HY_monitor').on('click', function() {
		switch($(this).val()) {
			case "开始监测":
//				if(top.$('#navbarTopLinks').find('i.Login').hasClass('active')) {
//					layer.confirm('您还没有签入,请签入后再试...', {
//						icon: 7,
//						btn: ['确定'] //按钮
//					});
//					return;
//				}
				getSeatsRealStates();
				$(this).val("停止监测");
				if(seatRealSateTimer){
					clearInterval(seatRealSateTimer); //停止刷新数据
				}
				isTimerOn = true;
				refreshDatas(huayi.config.monitorPlatformTime); //开始刷新数据
				break;
			case "停止监测":
				$(this).val("开始监测");
				isTimerOn = false;
				clearInterval(seatRealSateTimer); //停止刷新数据
				getSeatLists();
				break;
		}
	});

});

//获取全部坐席
function getSeatLists() {
	var loadIndex;
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + "signtokenapi/api/useraccount/getseatlist",
		dataType: 'json',
		async: true,
		beforeSend: function() { //触发ajax请求开始时执行
			loadIndex = layer.load();
		},
		success: function(data) {
			layer.close(loadIndex);
			if(data.state.toLowerCase() === "success") {
				data = data.data;
				$('#seat_lists').html('');
				if(data && data.length > 0) {
					$.each(data, function(i, v) {
						postSeatsLists.push({
							"group_id": v.group, // 坐席所在组ID
							//           				"agent_id": v.usercode - 0 // 坐席ID
							"agent_id": Number(v.usercode) // 坐席ID
						});
						$('#seat_lists').append('<div class="col-sm-2 seat_item_content seat_outline">' +
							'<div class="seat_item clearfix" onclick="btn_opareteSeats(event)">' +
							'<div class="seat_item_left pull-left">' +
							'<div class="seat_head_img">' +
							'<img id="headImg_' + v.id + '" class="img-circle" src="' + v.head_small_img + '" alt="头像" onerror="this.src=\'../img/zxPhone.png\'">' +
							'</div>' +
							'</div>' +
							'<div class="seat_item_right pull-right">' +
							'<p class="seat_name">' + v.username + '</p>' +
							'<p class="seat_usercode" id="seat_usercode_'+ v.usercode +'">工号：' + v.usercode + '</p>' +
							'<p>分机号：<span class="seat_userextid">未知</span></p>' +
							'<p class="seat_usernum">坐席组：' + formatterGroups(groupLists, v.group) + '</p>' +
							'<p class="seat_callee"></p>' +
							'<p id="seat_listen_'+ v.usercode +'" class="seat_listen"></p>'+
							'</div>' +
							'<p class="seat_state">' +
							'<i class="fa icon-weizhi state_des_icon"></i>' +
							'</p>' +
							'</div>' +
							'</div>');
						//头像
						var ipUrl = v.head_small_img;
						if(ipUrl) {
							$('#headImg_' + v.id).attr('src', ipUrl);
						} else {
							$('#headImg_' + v.id).attr('src', '../img/pro_default_user.png');
						}
						
					});
					updateTable1(data); //更新表格
					calculatCount();
				} else {
					$('#seat_lists').html('<p class="text-center">没有找到您想要的记录呢！我会努力的...</p>');
				}
			}
		},
		error: function(textStatus) {
			layer.close(loadIndex);
			layer.confirm('网络繁忙，请稍后再试...', {
				icon: 7,
				closeBtn: 0,
				btn: ['确定'] //按钮
			});
		},
		complete: function(XMLHttpRequest, textStatus) {
			layer.close(loadIndex);
			if(textStatus == 'timeout') {
				var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
				xmlhttp.abort();
				layer.confirm('网络超时，请稍后再试...', {
					icon: 7,
					closeBtn: 0,
					btn: ['确定'] //按钮
				});　　　　
			}
		},
	});
}

/**
 * 获取坐席组 
 */
function getGroups() {
	var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
	$.getJSON(huayi.config.callcenter_url + "callcenterapi/api/sysseatgroup/getlist", function(data) {
		if(data.state.toLowerCase() == "success") {
			var content = data.data;
			if(content && content.length > 0) {
				$(content).each(function(i, n) {
					groupLists.push({
						'id': n.id,
						'names': n.zxzname
					})
				});
			}
			dtd.resolve(); // 改变Deferred对象的执行状态
		}
	})
	return dtd.promise(); // 返回promise对象
}

/**
 * 监测坐席状态 坐席实时状态
 */
function getSeatsRealStates() {
	$.ajax({
		type: "post",
		url: huayi.config.callcenter_url + "callcenterapi/api/autocall/postsend",
		async: true,
		//		ContentType: 'application/json',
		//		data: JSON.stringify(postSeatsLists), //也可以不带参数名传递
		//		dataType: 'json',
		data: {
			posturl: huayi.config.callcenter_acd_url + "v1/acd/AgentlMgr/state", //（请求的连接）      
			postobj: JSON.stringify(postSeatsLists), //（json数据）
		},
		success: function(data) {
			data = JSON.parse(data);
			if(data.state.toLowerCase() === "success") {
				data = data.data;
				if(data.state.toLowerCase() === "success") {
					data = data.data;
					if(data && data.length > 0) {
						var seat_lists_usercodes = $('#seat_lists').find('.seat_usercode');
						if(seat_lists_usercodes.length > 0) {
							$.each(seat_lists_usercodes, function(i, v) {
								$.each(data, function(j, k) {
									if(Number($(v).text().substring(3)) === k.agent_id) {
										$(v).siblings().find('.seat_userextid').text(k.extid === 0 ? '未知' : k.extid);
										//根据 agent_state 获取坐席状态对应的 class
										var real_sate_class = formatterSeatState(k.agent_state).agentStateClass;
										$(v).parent().parent().parent().attr('class', 'col-sm-2 seat_item_content ' + real_sate_class);
										//根据 class 名获取 对应的图标
										var seatIcon = formatterSeatStateClass(real_sate_class).agentStateIcon;
										$(v).parent().siblings('.seat_state').html('<i class="fa ' + seatIcon + ' state_des_icon"></i>');
										$(v).parent().parent().parent().attr('data-agent_state', k.agent_state); //坐席状态
										$(v).parent().parent().parent().attr('data-ext_state', k.ext_state); //线路状态
										//通话中,获取电话号码
										if(k.agent_state === 3) {
											getSeatsCallStates(k.agent_id, k.extid, $(v));
										} else {
											$(v).siblings('.seat_callee').html('');
										}
//										console.log('被监听状态:.............' + k.mon_state);
										//被监听状态
										if(k.mon_state === 1){
											$('#seat_listen_'+ k.agent_id).text('被监听中•••');
										}else{
											$('#seat_listen_'+ k.agent_id).text('');
										}
									}
								});
							});
							//计算 实时状态的数量
							calculatCount();
							updateTable2(data); //更新表格
						}
					}
				}
			}
		},
		error: function(textStatus) {
			layer.confirm('网络繁忙，请稍后再试...', {
				icon: 7,
				closeBtn: 0,
				btn: ['确定'] //按钮
			});
		},
		complete: function(XMLHttpRequest, textStatus) {
			if(textStatus == 'timeout') {
				var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
				xmlhttp.abort();
				layer.confirm('网络超时，请稍后再试...', {
					icon: 7,
					closeBtn: 0,
					btn: ['确定'] //按钮
				});　　　　
			}
		},
	});
}

/**
 * 监测 坐席通话关联状态
 * agent_id  坐席ID
 * ext_id    分机ID
 * el        坐席工号所在元素
 */
function getSeatsCallStates(agent_id, ext_id, el) {
	var postCallJson = [{
		"agent_id": agent_id,
		"ext_id": ext_id
	}];

	$.ajax({
		type: "post",
		url: huayi.config.callcenter_url + "callcenterapi/api/autocall/postsend",
		async: true,
		data: {
			posturl: huayi.config.callcenter_cti_url + "v1/cti/AgentlMgr/assoc/info", //（请求的连接）      
			postobj: JSON.stringify(postCallJson), //（json数据）
		},
		success: function(data) {
			data = JSON.parse(data);
			if(data.state.toLowerCase() === "success") {
				data = data.data;
				if(data.state.toLowerCase() === "success") {
					data = data.data;
					if(data && data.length > 0) {
						if(data[0].caller_flag === 1){//1-是主叫
							if(data[0].callee){
								el.siblings('.seat_callee').html('呼出：' + data[0].callee); //呼出 主叫
							}else{
								el.siblings('.seat_callee').html('');
							}
						}else{
							if(data[0].caller){
								el.siblings('.seat_callee').html('呼入：' + data[0].caller); //呼入 被叫
							}else{
								el.siblings('.seat_callee').html('');
							}
						}
					}
				}
			}
		},

		error: function(textStatus) {
			layer.confirm('网络繁忙，请稍后再试...', {
				icon: 7,
				closeBtn: 0,
				btn: ['确定'] //按钮
			});
		},
		complete: function(XMLHttpRequest, textStatus) {
			if(textStatus == 'timeout') {
				var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
				xmlhttp.abort();
				layer.confirm('网络超时，请稍后再试...', {
					icon: 7,
					closeBtn: 0,
					btn: ['确定'] //按钮
				});　　　　
			}
		},
	});

}

//操作坐席
function btn_opareteSeats(event) {
	event.stopPropagation();
	if($('#HY_monitor').val() === '开始监测') {
		layer.confirm('您还没有开始监测,请点击开始监测后再操作!', {
			icon: 7,
			closeBtn: 0,
			btn: ['确定'] //按钮
		});
		return
	}
	
	if(top.$('#navbarTopLinks').find('i.Login').hasClass('active')) {
		layer.confirm('您还没有签入,请签入后再操作!', {
			icon: 7,
			btn: ['确定'] //按钮
		});
		return;
	}
	var $el = $(event.currentTarget);//当前被点击的元素 .seat_item
	var real_sate_class = $el.parent().attr('class').split(' ')[2];//元素的状态class名
	var agent_state_title = formatterSeatStateClass(real_sate_class).agentStateTitle;//坐席状态对应的名称
	var oparate_agent_state = $el.parent().attr('data-agent_state'); //坐席状态
	var oparate_ext_state = $el.parent().attr('data-ext_state'); //线路状态
	var head_img = $el.find('.img-circle').attr('src'); //头像
	var seat_name = $el.find('.seat_name').text(); //姓名
	var seat_usercode = $el.find('.seat_usercode').text().split('：')[1]; //工号
	var call_number = $el.find('.seat_callee').text(); //呼出或呼入
	if(seat_usercode === window.localStorage.getItem('userCode')){
		layer.confirm('您不能在坐席监控中对自己进行操作!', {
			icon: 7,
			closeBtn: 0,
			btn: ['确定'] //按钮
		});
		return;	
	}
	if($('#seat_usercode_'+ window.localStorage.getItem('userCode')).parent().parent().parent().hasClass('seat_calling')){
		layer.confirm('您当前在通话中不能对坐席进行操作!', {
			icon: 7,
			btn: ['确定'] //按钮
		});
		return;
	}
	
	var layerTitle = '';//弹出窗口的 title
	if(call_number){
		layerTitle = '当前状态: ' + agent_state_title + '（' + call_number + '）';
	}else{
		layerTitle = '当前状态: ' + agent_state_title;
	}
	//(小休/空闲)置闲  (通话中/通话中)监听强插强拆拦截 (空闲/来电振铃)代接
//	console.log('坐席:'+ oparate_agent_state + ', 线路:' + oparate_ext_state);
	if((oparate_agent_state === '5' && oparate_ext_state === '1') 
		|| (oparate_agent_state === '3' && oparate_ext_state === '6')
		|| (oparate_agent_state === '2' && oparate_ext_state === '5')) {
		layer.open({
			type: 2,
			content: "template/opareteSeats.html?oparate_agent_state=" + oparate_agent_state + "&oparate_ext_state=" + oparate_ext_state + "&head_img=" + head_img + "&seat_name=" + seat_name + "&seat_usercode=" + seat_usercode, //iframe的url，no代表不显示滚动条
			title: layerTitle,
			closeBtn: 1,
			area: ['496px', '340px'], //宽高
		});
	}else{
		layer.confirm('当前坐席无需操作!', {
			title: layerTitle,
			icon: 7,
			closeBtn: 0,
			btn: ['确定'] //按钮
		});
	}
}

//计算 实时状态的数量
function calculatCount() {
	var seat_items = $('#seat_lists').find('.seat_item_content');
	var totalCount = seat_items.length; //全部坐席数量
	var offlineCount = 0; //离线数量
	var freeCount = 0; //空闲数量
	var callingCount = 0; //通话中数量
	var afterCallCount = 0; //话后处理数量
	var busyCount = 0; //置忙数量(小休)
	$.each(seat_items, function(i, v) {
		var seat_state_class = $(v).attr('class').substring(27);
		switch(seat_state_class) {
			case 'seat_busy':
				offlineCount++;
				break;
			case 'seat_free':
				freeCount++;
				break;
			case 'seat_calling':
				callingCount++;
				break;
			case 'seat_after_call':
				afterCallCount++;
				break;
			case 'seat_ringing':
				busyCount++;
				break;
			default:
				break;
		}
	});
	var onlineCount = freeCount + callingCount + afterCallCount + busyCount; //在线数量
	$('#seat_sts').find('.total_count').text(totalCount);
	$('#seat_sts').find('.online_count').text(onlineCount);
	$('#seat_sts').find('.outline_count').text(offlineCount);
	$('#seat_sts').find('.free_count').text(freeCount);
	$('#seat_sts').find('.in_call_count').text(callingCount);
	$('#seat_sts').find('.call_in_count').text(afterCallCount);
	$('#seat_sts').find('.busy_count').text(busyCount);
}

/**
 * 刷新 数据
 * monitorPlatformTime 刷新间隔
 * */
function refreshDatas(monitorPlatformTime) {
	var objTime = {
		init: 0,
		time: function() {
			if(top.$("iframe:visible").contents().find('.layui-layer').length === 0) {
				objTime.init += 1000;
				//console.log(objTime.init);
				//当页面没有click、keydown、mousewheel 并且没有layer 弹窗时；每间隔  monitorPlatformTime 刷新数据；
				if(objTime.init == monitorPlatformTime) {
					getSeatsRealStates();
					objTime.init = 0;
				}
			}
		},
		eventFun: function() {
			clearInterval(seatRealSateTimer);
			objTime.init = 0;
			if(isTimerOn){
				seatRealSateTimer = setInterval(objTime.time, 1000);
			}
		}
	}
	seatRealSateTimer = setInterval(objTime.time, 1000);
	var body = document.querySelector('html');
	body.addEventListener("click", objTime.eventFun);
	body.addEventListener("keydown", objTime.eventFun);
	body.addEventListener("mousewheel", objTime.eventFun);
}

/**
 * 更新列表1 (用于检测之前)
 * tData 数据
 */
function updateTable1(tData) {
	$('#list').html('');
	$.each(tData, function(i, v) {
		var tr = '<tr><td>' + (i + 1) + '</td>' +
			'<td>' + v.username + '</td>' +
			'<td class="seat_list_usercode">' + v.usercode + '</td>' +
			'<td class="extid">未知</td>' +
			'<td class="agent_ip">未知</td>' +
			'<td>' + formatterGroups(groupLists, v.group) + '</td>' +
			'<td>' + formatterGroupType(v.seat_right) + '</td>' +
			'<td class="time_login">未知</td>' +
			'<td class="login_times">0</td>' +
			'<td class="free_times">0</td>' +
			'<td class="repose_times">0</td>' +
			'<td class="talk_times">0</td>' +
			'<td class="repose_num">0</td>' +
			'<td class="answer_num">0</td>' +
			'<td class="cur_state_times">0</td>' +
			'<td class="agent_state">未知</td>' +
			'<td class="ext_state">未知</td>' +
			'<td class="mon_state">未知</td></tr>';
		$('#list').append(tr);
	});
}

/**
 * 更新列表2(用于检测之后)
 * tData 数据
 */
function updateTable2(tData) {
	var s_usercodes = $('#list').find('.seat_list_usercode');
	$.each(s_usercodes, function(j, k) {
		$.each(tData, function(i, v) {
			if($(k).text() == v.agent_id) {
				$(k).siblings('.extid').text(v.extid === 0 ? '未知' : v.extid); //分机号
				$(k).siblings('.agent_ip').text(v.agent_ip === '' ? '未知' : v.agent_ip); //坐席IP
				var time_logins = v.time_login === 0 ? '未知' : helper.DateFormat.timestampToTime(v.time_login);
				$(k).siblings('.time_login').text(time_logins); //签入时间
				$(k).siblings('.login_times').text(v.login_times); //签入时长
				$(k).siblings('.free_times').text(v.free_times); //空闲时长
				$(k).siblings('.repose_times').text(v.repose_times); //休息时长
				$(k).siblings('.talk_times').text(v.talk_times); //通话时长
				$(k).siblings('.repose_num').text(v.repose_num); //休息次数
				$(k).siblings('.answer_num').text(v.answer_num); //应答次数
				$(k).siblings('.cur_state_times').text(v.cur_state_times); //当前状态时长
				$(k).siblings('.agent_state').text(formatterSeatState(v.agent_state).agentStateName); //坐席状态
				$(k).siblings('.ext_state').text(formatterExtState(v.ext_state)); //分机状态
				$(k).siblings('.mon_state').text(formatterListenState(v.mon_state)); //被监听状态
			}
		});
	});
}

/**
 * 格式化坐席组 角色
 * option1 数组
 * option2 id
 */
function formatterGroups(option1, option2) {
	var groupName = '';
	$(option1).each(function(i, n) {
		if(option2 === n.id) {
			groupName = n.names;
		}
	});
	return groupName;
}

/**
 * 格式化坐席类型
 * typeVal 坐席类型的值
 * 0 普通坐席 1 班长坐席
 */
function formatterGroupType(typeVal) {
	var typeName = '-';
	switch(typeVal) {
		case 0:
			typeName = '普通坐席';
			break;
		case 1:
			typeName = '班长坐席';
			break;
		default:
			break;
	}
	return typeName;
}

// 格式化 坐席状态的class名,获取 对应的状态名称和icon
function formatterSeatStateClass(real_sate_class) {
	var agent_state_title = '';
	var agent_state_icon = '';
	switch(real_sate_class) {
		case 'seat_outline':
			agent_state_title = '未知';
			agent_state_icon = 'icon-weizhi';
			break;
		case 'seat_free':
			agent_state_title = '空闲中';
			agent_state_icon = 'icon-kongxian';
			break;
		case 'seat_busy':
			agent_state_title = '离线';
			agent_state_icon = 'icon-zhuxiao';
			break;
		case 'seat_after_call':
			agent_state_title = '话后处理中';
			agent_state_icon = 'icon-kongxian1';
			break;
		case 'seat_call_out':
			agent_state_title = '已签入';
			agent_state_icon = 'icon-denglu';
			break;
		case 'seat_ringing':
			agent_state_title = '小休';
			agent_state_icon = 'icon-xiuxi';
			break;
		case 'seat_calling':
			agent_state_title = '通话中';
			agent_state_icon = 'icon-tonghuazhong';
			break;
		case 'seat_requset':
			agent_state_title = '被请求中';
			agent_state_icon = 'icon-qingqiu';
			break;
		default:
			break;
	}
	return {
		'agentStateTitle': agent_state_title,
		'agentStateIcon': agent_state_icon,
	};
}

/**
 * 格式化坐席状态    获取class 名称 和 状态名
 * agent_state 坐席状态值
 *   0x00 未知  0x01 已签入   0x02 空闲  0x03 通话中  0x04 话后处理  0x05 小休  0x06 被请求   0x07 离线
 */
function formatterSeatState(agent_state) {
	var agent_state_class = '';
	var typeName = '-';
	switch(agent_state) {
		case 0x00:
			agent_state_class = 'seat_outline'; //未知  
			typeName = '未知';
			break;
		case 0x01:
			agent_state_class = 'seat_call_out'; //已签入    
			typeName = '已签入';
			break;
		case 0x02:
			agent_state_class = 'seat_free'; //空闲
			typeName = '空闲';
			break;
		case 0x03:
			agent_state_class = 'seat_calling'; //通话中 
			typeName = '通话中';
			break;
		case 0x04:
			agent_state_class = 'seat_after_call'; //话后处理
			typeName = '话后处理';
			break;
		case 0x05:
			agent_state_class = 'seat_ringing'; //小休  
			typeName = '小休';
			break;
		case 0x06:
			agent_state_class = 'seat_requset'; //被请求 
			typeName = '被请求';
			break;
		case 0x07:
			agent_state_class = 'seat_busy'; //离线 
			typeName = '离线';
			break;
		default:
			break;
	}
	return {
		"agentStateClass": agent_state_class,
		"agentStateName": typeName
	};
}

/**
 * 格式化线路状态
 * typeVal 线路状态的值
 *  0x00,分机不可用   0x01,空闲   0x02,摘机等待拨号 0x03,正在拨号     0x04,呼出振铃   
 *   0x05,来电振铃   0x06,通话中 0x07,播放忙音中  	0x08,移除IP分机  0x0100,通话保持中
 */
function formatterExtState(typeVal) {
	var typeName = '-';
	switch(typeVal) {
		case 0x00:
			typeName = '分机不可用';
			break;
		case 0x01:
			typeName = '空闲';
			break;
		case 0x02:
			typeName = '摘机等待拨号';
			break;
		case 0x03:
			typeName = '正在拨号';
			break;
		case 0x04:
			typeName = '呼出振铃';
			break;
		case 0x05:
			typeName = '来电振铃';
			break;
		case 0x06:
			typeName = '通话中';
			break;
		case 0x07:
			typeName = '播放忙音中';
			break;
		case 0x08:
			typeName = '移除IP分机';
			break;
		case 0x0100:
			typeName = '通话保持中';
			break;
		default:
			break;
	}
	return typeName;
}

/**
 * 格式化坐席监听状态
 * typeVal 坐席监听的值
 * 0 未被监听   1 被监听中
 */
function formatterListenState(typeVal) {
	var typeName = '-';
	switch(typeVal) {
		case 0:
			typeName = '未被监听';
			break;
		case 1:
			typeName = '被监听中';
			break;
		default:
			break;
	}
	return typeName;
}