XY12345_Web/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 "callid":
                    //    CallIDBack(data);
                    //    break; //获取callid
                    //case "recordpath":
                    //    RecordPathBack(data);
                    //    break; //录音返回
                    case "getagentlist":
                        GetAgentListBack(data);
                        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('');
    if ($.cookie("socket_state") == null) {
        SetStateCookie(0);
    }
}
//签出
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() {
    $("#top-search li i").removeClass("active");
    $(".Logout").addClass("active");
    $(".SayBusy").addClass("active");
    $(".MakeCall").addClass("active");

    $(".td-call").hide();
    //$('.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('分机不可用'); //左下角状态显示
    }
    if (data.State == '1') {
        $(".hwzt").text('空闲'); //左下角状态显示

        $(".fwzt").removeClass("br").addClass("bl");
        clearInterval(timer);

        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");
        $(".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");
        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");
        $(".Turn110").addClass("active");
        $(".Meeting").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 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").addClass("br");

        $(".hwzt").text('置忙');

        SetStateCookie(1);
    }
    if (obj.State == '2') {
        $(".SayBusy").addClass("active");
        $(".SayFree").removeClass("active");
        $(".zxzt").removeClass("br").addClass("bl");

        $(".hwzt").text('空闲');
        SetStateCookie(0);
    }
}

function SetLogin(state) {
    if (state == 2) { return; }
    if (obj.AgentID) {
        obj.Type = "Login";
        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");
}
//置闲
function SayFreeBack() {
    $(".SayBusy").addClass("active");
    $(".SayFree").removeClass("active");
}
//多方通话
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 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 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();
        }
    }
}