AnYang_UI/WebUI/CallCenterWe.../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 lasttime = new Date().getTime();

//创建scoket连接
function createWebSocket() {
    try {
        $("#top-search li i").removeClass("active");
        Connect();
    } catch (e) {
        reconnect();
    }
}
//连接
function Connect() {
    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();

        if ($.cookie("socket_state") != null) {
            SetLogin($.cookie("socket_state"));
        }
        //$(".hwzt").text('连接成功！');
    };
    //接收到消息的回调方法
    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;
            if (rlt == true) {
                var type = data.Type;
                switch (type.toLowerCase()) {
                    //case "heart": HeartBack(); break;//心跳
                    case "login":
                        LoginBack();
                        break; //签入
                    case "logout":
                        LogoutBack();
                        break; //签出
                    case "dropcall":
                        DropCallBack();
                        break; //挂断
                    case "makecall":
                        MakeCallBack();
                        break; //外呼
                    case "setstate":
                        SetState(data);
                        break; //置忙置闲
                        //case "saybusy": SayBusyBack(data); break;
                        //case "sayfree": SayFreeBack(data); break;
                    case "meeting":
                        MeetingBack();
                        break; //多方通话
                    case "transfer":
                        TransferBack();
                        break; //转移
                    case "hold":
                        HoldBack();
                        break; //保持
                    case "retrieve":
                        RetrieveBack();
                        break; //接回
                    case "incoming":
                        IncomingBack(data);
                        break; //来电
                    case "subscribe":
                        SubScribeBack();
                        break; //监测
                    case "subscribecancel":
                        SubScribeCancelBack();
                        break; //停止监测
                    case "agentstate":
                        AgentStateBack(data);
                        break; //坐席状态
                    case "linestate":
                        LineStateBack(data);
                        break; //线路状态
                    case "motorsetstate":
                        SayFreeBack();
                        break; //班长置闲
                    case "linestateagent":
                        LineStateAgentBack(data);
                        break; //线路状态通知
                    case "agentstateagent":
                        AgentStateAgentBack(data);
                        break; //坐席状态通知
                    //case "callid":
                    //    CallIDBack(data);
                    //    break; //获取callid
                    //case "recordpath":
                    //    RecordPathBack(data);
                    //    break; //录音返回
                    case "getagentlist":
                        GetAgentListBack(data);
                        break;//在线坐席信息
                    case "confirmtransfer":
                        ConfirmTransfer(data);
                        break;//确认转移 取消转移
                    case "consult":
                        ConsultationCall();
                        break;//协商呼叫
                    case "waitcount":
                        backstageQueue();
                        break;//后台排队
                }
            } else {
                if (rlt == false) {
                    //layer.confirm('操作失败！', {
                    //    btn: ['确定'] 
                    //});
                    $(".hwzt").text('操作失败！');
                } else {
                    $(".hwzt").text(rlt);
                    //layer.confirm(rlt, {
                    //    btn: ['确定']
                    //});
                }
            }
        }
    };
    
    //连接关闭的回调方法
    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 LoginBack() {
    $("#top-search li i").removeClass("active");
    $(".Logout").addClass("active");
    $(".SayBusy").addClass("active");
    $(".MakeCall").addClass("active");
    $(".zxzt").removeClass("br").addClass("bl");
    $(".fwzt").removeClass("br").addClass("bl");
    $(".hwzt").text('');
    $('.Consult').addClass("active");
//  if($.cookie("socket_state") == null){
//  	SetStateCookie(0);
//  }
    
    
	$("#isml").val(1);
    SetStateCookie(1);
    obj.Type = "SayBusy";
    Send();
}
//签出
function LogoutBack() {
    $("#top-search li i").removeClass("active");
    $(".Login").addClass("active");
    $(".zxzt").removeClass("bl").addClass("br");
    $(".fwzt").removeClass("bl").addClass("br");
    $(".hwzt").text('');
    SetStateCookie(2);
}

//来电
function IncomingBack(data) {
    $(".ldhm").val(data.Number);
    $(".hidTel").val(data.Number);
    $(".tel").text(data.Number);
    $(".ldtime").text(getNowFormatDate());
    $(".thsc").text("00:00");
    $(".hidCallID").val(data.CallID);
    //获取电话所属地
    $.getJSON(huayi.config.callcenter_url + 'CallInScreen/GetPhoneLocation', {
        "tel": $(".hidTel").val(),
        "token": $.cookie("token")
    }, function (result) {
        if (result.state.toLowerCase() == "success") {
            $(".ldlocation").text(result.data[0].F_Name);
            $(".khgsd").text(result.data[0].F_Name);
        }
    })
    //获取客户信息
    $(".ttsdh").text($(".hidTel").val());
    $(".tsdh").val($(".hidTel").val());
    $.getJSON(huayi.config.callcenter_url + 'CallInScreen/GetCustomerByTel', {
        "tel": $(".hidTel").val(),
        "token": $.cookie("token")
    }, function (result) {
        if (result.state.toLowerCase() == "success") {
            if (result.data.length > 0) {
                $(".khmc").val(result.data[0].F_CustomerName);
                $(".tkhmc").text(result.data[0].F_CustomerName);
                $("#khid").val(result.data[0].F_CustomerId);
                $(".lxdh").val(result.data[0].F_Telephone);
                //$(".tsdh").val(result.data[0].F_Mobile);
                //$(".ttsdh").text(result.data[0].F_Mobile);
                $(".lxr").val(result.data[0].F_CustomerEName);
                $(".postcode").val(result.data[0].F_PostCode);
                $(".email").val(result.data[0].F_Email);
            }
            else {
                $(".khmc").val("");
                $(".tkhmc").text("");
                $("#khid").val("");
                $(".lxr").val("");
                $(".postcode").val("");
                $(".email").val("");
            }
        }
    })

    $('.maxOpen').trigger("click");
    $('.head-pic .lahei .la-before').show();
    //触发来电类型第一个 点击；
    $("#dicValueList li:first-child").find("label").trigger('click');

    $('.head-pic .lahei .la-after').hide();
    $(".Bacha").hide();
}

//挂断
function DropCallBack() {
	debugger
    $("#top-search li i").removeClass("active");
    $(".Logout").addClass("active");
    $(".SayBusy").removeClass("active");
    $(".SayFree").addClass("active");
    $(".MakeCall").addClass("active");
    $(".td-call").hide();
    $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
    $(".hwzt").text('忙碌');
	$("#isml").val(1);
    SetStateCookie(1);
    obj.Type = "SayBusy";
    Send();
    //$('.ldtp-con').css("display", 'none');
    
}
//线路状态通知
function LineStateAgentBack(data) {
    //0分机不可用，1空闲，2摘机等待拨号，3正在拨号，4呼出振铃，5来电振铃，6通话中，7播放忙音中，8移除IP分机，9通话保持中
    if (data.State == '0') {
        $(".hwzt").text('分机不可用'); //左下角状态显示
        $(".fwzt").removeClass("br").removeClass("bl");
    }
    if (data.State == '1') {
    	if($("#isml").val()==1){
//			isml=1;
			$(".hwzt").text('置忙'); //左下角状态显示
			$(".fwzt").removeClass("bl").addClass("br");
		}
		else{
			if ($("#RoleCode").val()=='ZJZY') {
				$(".hwzt").text('置忙'); //左下角状态显示
				$(".fwzt").removeClass("bl").addClass("br");
		    }else{
		    	$(".hwzt").text('空闲'); //左下角状态显示
				$(".fwzt").removeClass("br").addClass("bl");
		    }
			
		}
//      $(".hwzt").text('空闲'); //左下角状态显示
//      $(".fwzt").removeClass("br").addClass("bl");
        clearInterval(timer);

        //2018-10-13 clq 作废挂机
        //if ($(".hidTel").val() && $(".hidCallID").val()) {
        //    $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateGJ', {
        //        callid: $(".hidCallID").val(),
        //        "token": $.cookie("token")
        //    }, function (result) {
        //        result = JSON.parse(result);
        //        if (result.state.toLowerCase() == "success") { }
        //    })
        //}

        $("#top-search li i").removeClass("active");
        $(".Logout").addClass("active");
        if($("#isml").val()==0){
			$(".SayBusy").addClass("active");
		}
		else{
			$(".SayFree").addClass("active");
		}
//      $(".SayBusy").addClass("active");
        $(".MakeCall").addClass("active");
        $(".td-call").hide();
        $(".Bacha").show();

        //$(".hidTel").val("");
        //$(".hidCallID").val("");
    }
    if (data.State == '2') {
        $(".hwzt").text('摘机等待拨号'); //左下角状态显示
    }
    if (data.State == '3') {
        $(".hwzt").text('正在拨号'); //左下角状态显示
    }
    if (data.State == '4') {
        $(".hwzt").text('呼出振铃'); //左下角状态显示
    }
    if (data.State == '5') {
        $(".hwzt").text('来电振铃'); //左下角状态显示
        $(".fwzt").removeClass("bl").addClass("br");
        if ($(".hidTel").val() && $(".hidCallID").val()) {
            $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateZL', {
                callid: $(".hidCallID").val(),
                "token": $.cookie("token")
            }, function (result) {
                result = JSON.parse(result);
                if (result.state.toLowerCase() == "success") { }
            })
        }
    }
    if (data.State == '6') {
        $(".hwzt").text('通话中'); //左下角状态显示
        $(".fwzt").removeClass("bl").addClass("br");
        $(".zxzt").removeClass("bl").addClass("br");
        if ($(".hidTel").val() && $(".hidCallID").val()) {
            $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateZJ', {
                callid: $(".hidCallID").val(),
                "token": $.cookie("token")
            }, function (result) {
                result = JSON.parse(result);
                if (result.state.toLowerCase() == "success") { }
            })
        }
        $(".td-call").show();
        n = 0;
        $("#top-search li i").removeClass("active");
        $(".DropCall").addClass("active");
        $(".Hold").addClass("active");
        $(".Transfer").addClass("active");
        $(".Meeting").addClass("active");
        $('.TurnIvr').addClass("active");
        $('.Consult').addClass("active");
        clearInterval(timer);
        timer = setInterval(function () {
            n++;
            var m = parseInt(n / 60 % 60);
            var s = parseInt(n % 60);
            $(".thsc").text(toDub(m) + ":" + toDub(s));
        }, 1000);
    }
    if (data.State == '7') {
        $(".hwzt").text('播放忙音中'); //左下角状态显示
    }
    if (data.State == '8') {
        $(".hwzt").text('移除IP分机'); //左下角状态显示
    }
    if (data.State == '9') {
        $(".hwzt").text('通话保持中'); //左下角状态显示
    }
}
//坐席状态通知
function AgentStateAgentBack(data) {
    var strr = '';
    console.log('坐席状态'+ data.State );
    switch (data.State+"") {
        case "0":
            strr = "离线";
            $(".zxzt").removeClass("br").removeClass("bl").removeClass("by");
            break; //离线
        case "1":
            break; //登录中
        case "2":
            strr = "空闲";
            $(".zxzt").removeClass("br").removeClass("by").addClass("bl");
            break; //空闲
        case "3":
            strr = "通话中";
            $(".zxzt").removeClass("bl").removeClass("by").addClass("br");
            break; //通话中
        case "4":
            strr = "话后处理中";
            $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
            break; //话后处理中
        case "5":
            strr = "忙碌";
            $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
            break; //小休
        case "6":
            strr = "振铃";
            break; //被请求
        case "7":
            strr = "注销";
            $(".zxzt").removeClass("br").removeClass("bl").removeClass("by");
            break; //注销
    }

    $(".hxzt").text(strr);
}

function toDub(i) {
    return i < 10 ? "0" + i : "" + i;
}
//外呼
function MakeCallBack() {
    $("#top-search li i").removeClass("active");
    $(".DropCall").addClass("active");
    $(".Meeting").addClass("active");
}

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

//置忙 置闲
function SetState(obj) {
    if (obj.State == '5') {
        $(".SayBusy").removeClass("active");
        $(".SayFree").addClass("active");
        $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
        $(".hwzt").text('忙碌');
        $("#isml").val(1);
        SetStateCookie(1);
    }
    if (obj.State == '2') {
    	$(".SayBusy").addClass("active");
        $(".SayFree").removeClass("active");
        $(".zxzt").removeClass("br").removeClass("by").addClass("bl");
        $(".hwzt").text('空闲');
        $("#isml").val(0);
        SetStateCookie(0);
    }
}

function SetLogin(state) {
    if (state == 2) { return; }
    if (obj.AgentID) {
        obj.Type = "Login";
         if( $("#RoleCode").val()=='DBHWY'){
         	obj.AgentGroup = "1";
         }
         else if($("#RoleCode").val()=='ZJZY'){
                	obj.AgentGroup = "2";
                }
         else{
         	obj.AgentGroup = "364";
         }
        obj.AgentType = "0";
        Send();
    }
    if (state == 1) {
        setTimeout('SayBusy()', 500);
    }
}
//置忙
function SayBusy() {
    if (obj.AgentID) {
        obj.Type = "SayBusy";
        Send();
    }
}

//置忙
function SayBusyBack() {
    $(".SayBusy").removeClass("active");
    $(".SayFree").addClass("active");
        $("#isml").val(1)
}
//置闲
function SayFreeBack() {
	$(".SayBusy").addClass("active");
    $(".SayFree").removeClass("active");
    $(".zxzt").removeClass("br").addClass("bl"); //坐席状态指示
	$(".hwzt").text('空闲');// 增加坐席状态指示
	$("#isml").val(0)
}
//多方通话
function MeetingBack() {

}
//转移
function TransferBack() {
    $("#top-search li i").removeClass("active");
    $(".Logout").addClass("active");
    $(".SayBusy").addClass("active");
    $(".MakeCall").addClass("active");
}
//保持
function HoldBack() {
    $(".Hold").removeClass("active");
    $(".Retrieve").addClass("active");
}
//接回
function RetrieveBack() {
    $(".Hold").addClass("active");
    $(".Retrieve").removeClass("active");
}
//协商呼叫
function ConsultationCall() {
    $('.Consult').removeClass("active");
    $('.ConfirmTransfer').addClass("active");//确认转移
    $('.CancelTransfer').addClass("active");//取消转移
}
//确认转移&取消转移
function ConfirmTransfer(data) {
    if (data.State == 3) {//取消转移
        $('.Consult').addClass("active");
        $(".CancelTransfer").removeClass("active");
        $(".ConfirmTransfer").removeClass("active");
    } else {
        //确认转移
        $('.Consult').removeClass("active");
        $(".CancelTransfer").removeClass("active");
        $(".ConfirmTransfer").removeClass("active");
    }
}

//监测
function SubScribeBack() {
    var obj = $("iframe:visible")
    if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
        window.frames[obj.attr("name")].Start();
    }
    if (obj.attr("data-id") == "./TelCall/zxKong.html") {
        window.frames[obj.attr("name")].Start();
    }
}
//取消监测
function SubScribeCancelBack() {
    var obj = $("iframe:visible")
    if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
        window.frames[obj.attr("name")].Stop();
    }
    if (obj.attr("data-id") == "./TelCall/zxKong.html") {
        window.frames[obj.attr("name")].Stop();
    }
}
//班长监测返回状态
//坐席状态
function AgentStateBack(data) {
    var obj = $("iframe:visible")
    if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
        window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
    }
    if (obj.attr("data-id") == "./TelCall/zxKong.html") {
        window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
    }
}
//线路状态
function LineStateBack(data) {
    var obj = $("iframe:visible")
    if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
        window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
    }
    if (obj.attr("data-id") == "./TelCall/zxKong.html") {
        window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
    }
}
//后台排队
function backstageQueue(data) {
    if (obj.attr("data-id") == "./widgets.html") {
        window.frames[obj.attr("name")].realTimeMonitorQueue(data.WaitCount);
    }
}
//录音返回
function RecordPathBack(data) {
    //if ($(".hidTel").val() && $(".hidCallID").val()) {
    //    $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateLY', { callid: $(".hidCallID").val(),path:data.RecPath, "token": $.cookie("token") }, function (result) {
    //        result = JSON.parse(result);
    //        if (result.state.toLowerCase() == "success") {
    //        }
    //    })
    //}
    if ($(".hidTel").val()) {
        $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateLY', {
            callid: data.CallID,
            path: data.RecPath,
            "token": $.cookie("token")
        }, function (result) {
            result = JSON.parse(result);
            if (result.state.toLowerCase() == "success") { }
        })
    }
}

//在线坐席信息
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();
        }
    }
}