lihai
/
ZZDianXin_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	 <link href="../css/init.css" rel="stylesheet" />
    <script src="../Script/Common/huayi.load.js"></script>
    <script src="../Script/Common/huayi.config.js"></script>
    <title>坐席监控管理</title>
    <style>
        body {
            background-color: #EEEEEE;
            font-family: "微软雅黑";
            background-color: #fdfdfd;
        }

        ul li {
            float: left;
        }

        .zx-title {
            background-color: #2e4050;
            color: #FFFFFF;
            padding: 5px 20px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            letter-spacing: 3px;
        }

        ul {
            overflow: hidden;
        }

            ul li {
                list-style: none;
            }

        .fenxian {
            list-style: none;
            width: 136px;
            padding: 0;
            height: 10px;
        }

            .fenxian li {
                width: 50%;
                list-style: none;
                height: 8px;
                float: left;
            }

        .left_red {
            background: #65c2ca;
        }

        .rg_green {
            background: #F95A83;
        }

        .zx-box {
            background: #F5F5F5;
            /*height: 200px;*/
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .m-b {
            margin-bottom: 0;
        }
        /*坐席数量*/
        .zt-content ul {
            width: 100%;
            overflow: hidden;
            padding-left: 0px;
            padding-top: 20px;
        }

            .zt-content ul li {
                width: 40%;
                font-size: 14px;
                float: left;
                margin-bottom: 20px;
                /*text-align: center;*/
                margin-left: 10%;
            }

                .zt-content ul li i {
                    display: inline-block;
                    width: 20px;
                    height: 21px;
                    vertical-align: middle;
                    margin-right: 10px;
                    background: url(../img/zuoxiIcon.png) no-repeat;
                }

        .hc {
            background-position: 0 0 !important;
        }

        .ml {
            background-position: 0 -24px !important;
        }

        .kx {
            background-position: 0 -68px !important;
        }

        .zl {
            background-position: 0 -93px !important;
        }

        .qc {
            background-position: 0 -116px !important;
        }

        .lx {
            background-position: 0 -138px !important;
        }

        .hh {
            background-position: 0 -46px !important;
        }
        .th{
        	
                    background: url(../img/thz.png) no-repeat!important;        }
        /*坐席监控*/
        .bg_person {
            background: url(../img/bg-person.png)no-repeat;
            width: 65px;
            height: 65px;
            text-align: -webkit-center;
            background-position: center center;
            margin: 0 auto;
        }

        .zx_people {
            padding: 0;
        }

        .zx_content ul:after {
            content: "";
            display: block;
            clear: both;
        }

        .people_list p {
            margin-bottom: 5px !important;
        }

        .zx_content ul {
            height: 800px;
            overflow: auto;
        }

            .zx_content ul li {
                width: 14%;
                text-align: center;
                float: left;
                cursor: pointer;
            }

                .zx_content ul li > div {
                    width: 100%;
                    position: relative;
                }

        .zx_content i {
            display: block;
            height: 22px;
            width: 20px;
            background: url(../img/zuoxiIcon.png) no-repeat;
            position:relative;
            right: -25px;
            top: 25px;
        }
        /*坐席状态*/
        .ztsm {
            width: 100%;
            overflow: hidden;
            padding-left: 0px;
            padding-top: 20px;
        }

            .ztsm b {
                padding: 3px 15px;
                border-radius: 10px;
                color: #FFFFFF;
            }

        .ztsm2 ul li {
            width: 33%;
            font-size: 14px;
            float: left;
            margin-bottom: 25px;
            text-align: center;
            cursor: pointer;
        }

        .zx {
            /*background: #989898;*/
            background: #61b960;
        }

        .jt {
            background: #5ed7b7;
        }

        .dj {
            background: #bed75b;
        }

        .qca {
            background: #d75e7c;
        }

        .lj {
            background: #5daed8;
        }

        .qc {
            background: #d8988f;
        }

        .kqc {
            background: #44af3c;
        }

        .jqc {
            background: #d91e06;
        }

        .dis {
            background: #989898;
        }
        /*坐席弹屏*/
        .zx_photo {
            padding: 10px;
        }

            .zx_photo p {
                text-align: center;
            }

        .zx-box_ul > ul {
            padding-left: 0px;
        }

            .zx-box_ul > ul > li {
                width: 33% !important;
                padding: 22px 13px;
                text-align: -webkit-center;
                font-size: 15px;
                cursor: pointer;
            }

                .zx-box_ul > ul > li b {
                    padding: 7px 15px;
                    border-radius: 10px;
                    color: #FFFFFF;
                }

        .zxtp {
            position: absolute;
            display: none;
        }

        .shows {
            display: block;
        }

        .hides {
            display: block;
        }
    </style>
</head>
<body>
    <div class="wrapper wrapper-content animated fadeInRight">
    	<!--<div class="daoHang clearfix">
				<div class="dhLeft">
					<sapn><i class="syIcon"></i>位置：<a href="javaScript:;" id="ReIndex">首页</a>&gt;<a href="javaScript:;">话务管理</a>&gt;<a href="" style="color: #000;">坐席监控管理</a></sapn>
				</div>
				
				<div class="dhRight">
            		<a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
            	</div>
		</div>-->
        <div class="row" style="margin-top: 20px;">
            <!--左边-->
            <div class="col-sm-9">
                <div class="zx_top">
                    <span class="zx-title">坐席监控系统</span>
                    <ul class="fenxian">
                        <li class="left_red"></li>
                        <li class="rg_green"></li>
                    </ul>
                </div>
                <div class="zx_content">
                    <ul class="zx_people"></ul>
                </div>
            </div>
            <!--右边-->
            <div class="col-sm-3">

                <div class="zx_top">
                    <span class="zx-title">状态说明</span>
                    <ul class="m-b  fenxian" style="width:104px;">
                        <li class="left_red"></li>
                        <li class="rg_green"></li>
                    </ul>
                    <div class="zx-box">
                        <div class="ztsm2 w_3">
                            <ul class="ztsm">
                                <li><b class="zx">置闲</b></li>
                                <li><b class="jt">监听</b></li>
                                <li><b class="dj">代接</b></li>
                                <li><b class="qca">强插</b></li>
                                <li><b class="lj">拦截</b></li>
                                <li><b class="qc">强拆</b></li>
                                <li style="width: 50%;"><b class="kqc">开始监测</b></li>
                                <li style="width: 50%;"><b class="jqc dis">停止监测</b></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="zx_top">
                    <span class="zx-title">实时统计</span>
                    <ul class="m-b  fenxian" style="width:104px;">
                        <li class="left_red"></li>
                        <li class="rg_green"></li>
                    </ul>
                    <div class="zx-box">
                        <div class="zt-content w_5">
                            <ul class="tjcount">
                                <li>登录坐席：<b>0</b></li>
                                <li>离线人数：<b>0</b></li>
                                <li>空闲人数：<b>0</b></li>
                                <li>通话人数：<b>0</b></li>
                                <li>系统呼入：<b>0</b></li>
                                <li>置忙坐席：<b>0</b></li>
                                <!--<li>签出坐席：<b>100</b></li>-->
                                <li>全部坐席：<b>0</b></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="zx_top">
                    <span class="zx-title">状态说明</span>
                    <ul class="m-b  fenxian" style="width:104px;">
                        <li class="left_red"></li>
                        <li class="rg_green"></li>
                    </ul>
                    <div class="zx-box">
                        <div class="zt-content w_5">
                            <ul>
                                <li><i class="hc"></i>呼出</li>
                                <li><i class="ml"></i>忙绿</li>
                                <li><i class="kx"></i>空闲</li>
                                <li><i class="zl"></i>振铃</li>
                                <!--<li><i class="qc"></i>&nbsp;签出</li>-->
                                <li><i class="lx"></i>离线</li>
                                <li><i class="hh"></i>话后处理</li>
                                <li><i class="th"></i>通话中</li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--坐席弹屏-->
    <div class="zxT  zxtp">
        <div class="zx-box" style="width: 400px;">
            <div class="zx_photo row zx_content">
                <div style="width: 400px;">
                    <div class="bg_person"> <i class="lx"></i></div>
                    <p>
                        <span>工号：</span>
                        <span class="g_nums"></span>
                    </p>
                    <p>
                        <span>姓名：</span>
                        <span class="g_names"></span>
                    </p>
                   
                </div>
            </div>
            <div class="zx-box_ul row">
                <ul>
                    <li><b class="zx" item="ForceAgentState">置闲</b></li>
                    <li><b class="jt" item="Listen">监听</b></li>
                    <li><b class="dj" item="Instead">代接</b></li>
                    <li><b class="qca" item="Insert">强插</b></li>
                    <li><b class="lj" item="Intercept">拦截</b></li>
                    <li><b class="qc" item="Break">强拆</b></li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        var user;
        $(document).ready(function () {
//      	if (!top.ws) {
//              top.Connect();
//          }
            //获取坐席列表
            $.getJSON(huayi.config.callcenter_url+'SeatMonitoring/getlist', { "token": $.cookie("token") }, function (result) {
                if (result.state.toLowerCase() == "success") {
                    $(".zx_people").empty();
                    user = result.data;
                    $(".tjcount li").eq(6).find("b").text(user.length);
                    $(user).each(function (i, n) {
                        var html = '<li class="people_list ' + n.F_WorkNumber + '">'
                            + '<div>'
                            + '    <div class="bg_person">'
                              + '    <i class="lx" zx_item="0" xl_item="0"></i>'
                             + ' </div>'
                            + '    <p>'
                            + '        <span>工号：</span>'
                            + '        <span class="g-num">' + n.F_WorkNumber + '</span>'
                            + '    </p>'
                            + '    <p>'
                            + '        <span>&nbsp;&nbsp;姓名：</span>'
                            + '        <span class="g-name">' + n.F_UserName + '</span>'
                            + '    </p>'
                          
                            + '</div>'
                            + '</li>';

                        $(html).appendTo($(".zx_people")).click(function (event) {
                            event.stopPropagation();
                            if (top.obj.AgentID != $(this).find(".g-num").text()) {
                                $(".zxtp .g_nums").text($(this).find(".g-num").text());
                                $(".zxtp .g_names").text($(this).find(".g-name").text());
                                $(".zxtp i").removeClass().addClass($(this).find("i").attr("class"));
                                $(".zxtp .bg_person").html($(this).find(".bg_person").html());
                                //if (!$(this).find("i").hasClass("lx")) {
                                //    Center($('.zxtp'));
                                //}

                                Center($('.zxtp'));

                                UpdateSelState($(this).find("i").attr("zx_item"), $(this).find("i").attr("xl_item"));
                            }
                            else {

                                layer.confirm('不能操作自己的坐席！', {
                                    btn: ['确定']
                                });
                            }
                        })
                    })
                }
            })

            $(".wrapper").click(function () {
                if (!$('.zxtp').is(":hidden")) {
                    $('.zxtp').hide();
                }
            })
            //开始监测
            $(".kqc").click(function () {
                if (!$(this).hasClass("dis")) {
                    $(user).each(function (i, n) {
                        top.obj.Type = "SubScribe";
                        top.obj.SubParmer = n.F_WorkNumber;

                        top.obj.SubType = "0";//根据工号订阅坐席状态
                        top.Send();
                        top.obj.SubType = "1";//根据工号订阅线路状态
                        top.Send();
                    })
                    //top.obj.Type = "SubScribe";
                    //top.obj.SubParmer = "8003";

                    //top.obj.SubType = "0";//根据工号订阅坐席状态
                    //top.Send();
                    //top.obj.SubType = "1";//根据工号订阅线路状态
                    //top.Send();
                }
            })
            //停止监测
            $(".jqc").click(function () {
                if (!$(this).hasClass("dis")) {
                    //$(user).each(function (i, n) {
                    //    top.obj.Type = "SubScribeCancel";
                    //    top.obj.SubParmer = n.F_WorkNumber;

                    //    top.obj.SubType = "0";//根据工号取消订阅坐席状态
                    //    top.Send();
                    //    top.obj.SubType = "1";//根据工号取消订阅线路状态
                    //    top.Send();
                    //})
                    top.obj.Type = "SubScribeCancel";
                    top.obj.SubParmer = "-1";

                    top.obj.SubType = "0";//根据工号取消订阅坐席状态
                    top.Send();
                    top.obj.SubType = "1";//根据工号取消订阅线路状态
                    top.Send();
                }
            })
            //班长操作坐席
            $(".zxtp b").click(function () {
                if (!$(this).hasClass("dis")) {
                    var wn = $(".zxtp .g_nums").text();
                    var type = $(this).attr("item");
                    top.obj.Type = type;
                    top.obj.TargetAgentID = wn;
                    top.Send();
                }
            })
        })

        //计算数量
        var tj;
        function tjcount() {
            tj = { hr: 0, tx: 0, kx: 0, lx: 0, zm: 0, dl: 0};
            $(".zx_people i").each(function () {
                var zx = $(this).attr("zx_item");
                var xl = $(this).attr("xl_item");
                switch (zx) {
                    case "0": tj.lx = tj.lx + 1; break;//离线
                    case "5": tj.zm = tj.zm + 1; break;//小休
                }
                switch (xl) {
                    case "5": tj.hr = tj.hr + 1; break;//来电振铃
                    case "6": tj.tx = tj.tx + 1; break;//通话中
                }
                if (zx == '2' && xl == '1') { tj.kx = tj.kx + 1; }//空闲
                if (zx != '0' && zx != '7' && xl != '0' && xl != '9') {
                    tj.dl = tj.dl + 1;
                }
            })

            $(".tjcount li").eq(0).find("b").text(tj.dl);
            $(".tjcount li").eq(1).find("b").text(tj.lx);
            $(".tjcount li").eq(2).find("b").text(tj.kx);
            $(".tjcount li").eq(3).find("b").text(tj.tx);
            $(".tjcount li").eq(4).find("b").text(tj.hr);
            $(".tjcount li").eq(5).find("b").text(tj.zm);
        }
        /*居中*/
        function Center(obj) {
            var screenWidth = $(window).width(), screenHeight = $(window).height();  //当前浏览器窗口的 宽高
            var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度
            var objLeft = (screenWidth - obj.width()) / 2;
            var objTop = (screenHeight - obj.height()) / 2 + scrolltop;
            obj.css({ left: objLeft + 'px', top: objTop + 'px' });
            obj.show();
        }
        //开始监测成功后
        function Start() {
            $(".kqc").addClass("dis");
            $(".jqc").removeClass("dis");
        }
        //停止监测成功后
        function Stop() {
            $(".jqc").addClass("dis");
            $(".kqc").removeClass("dis");
            $(".zxtp i").removeClass().addClass("lx");
            $(".zx_people i").removeClass().addClass("lx").attr("zx_item", "0").attr("xl_item", "0");
        }
        //坐席状态
        function UpdateAgentState(WorkNumber, State) {
        	 var ele = $("." + WorkNumber).find("i");
            var sts = "";
            switch (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 (sts) {
                ele.removeClass().addClass(sts);
            }
            ele.attr("zx_item", State);
            if ($(".zxtp .g_nums").text() == WorkNumber) {
                if (sts) {
                    $(".zxtp i").removeClass().addClass(sts);
                }
                UpdateSelState(State, ele.attr("xl_item"))
            }
            tjcount();
        }
        //线路状态
        function UpdateLineState(WorkNumber, State) {
            var sts = "";
            var ele = $("." + WorkNumber).find("i");
            switch (State) {
                case "0": sts = "lx"; break;//分机不可用
                case "1": if (!(ele.hasClass("hh") || ele.hasClass("ml"))) {//空闲  2018-05-18 zhangshuangnan 新增
                	sts = "kx";
                 } break;
                case "2": sts = "ml"; break;//摘机等待拨号
                case "3": sts = "ml"; break;//正在拨号
                case "4": sts = "hc"; 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", State);
            if ($(".zxtp .g_nums").text() == WorkNumber) {
                if (sts) {
                    $(".zxtp i").removeClass().addClass(sts);
                }
                UpdateSelState(ele.attr("zx_item"), State)
            }
            tjcount();
        }
        //更新选中坐席的可操作
        function UpdateSelState(zxState, xlState) {
            $(".zxtp b").addClass("dis");
            if (zxState == '5' && xlState == '1') {
                $(".zxtp .zx").removeClass("dis");
            }
            if (zxState == '3' && xlState == '6') {
                $(".zxtp .jt").removeClass("dis");
                $(".zxtp .qca").removeClass("dis");
                $(".zxtp .qc").removeClass("dis");
                $(".zxtp .lj").removeClass("dis");
            }
            if (zxState == '2' && xlState == '5') {
                $(".zxtp .dj").removeClass("dis");
                
            }
        }
    </script>
</body>

</html>