yuqian
/
ZYKJ_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828
							<!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>
    <link rel="stylesheet" type="text/css" href="../js/bootstrap-treeview/bootstrap-treeview.min.css" />
    <title>坐席管理</title>
    <style>
        body {
            background-color: #EEEEEE;
            font-family: "微软雅黑";
            background-color: #fdfdfd;
        }

        .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: absolute;
            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;
        }

        .tool {
            margin: 20px 0;
        }

        .drop_down_search {
            width: 360px;
            float: left;
        }

        .drop_down {
            position: relative;
        }

        .caret {
            position: absolute;
            right: 8px;
            top: 15px;
        }

        #deptTreeView {
            width: 360px;
            max-height: 256px;
            overflow-y: auto;
            position: absolute;
            z-index: 2;
            top: 34px;
            left: 0px;
            background-color: #fff;
        }
    </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>
        <div class="tool clearfix row">
            <div class="drop_down_search">
                <div class="drop_down">
                    <input type="text" class="form-control" id="department" data-id="-1" placeholder="请选择部门" />
                    <span class="caret"></span>
                    <div id="deptTreeView" class="hidden"></div>
                </div>
            </div>
            <div class="col-sm-3">
                <button id="searchBtn" class="btns" style="width: 100px;">搜索</button>
            </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"></div>
                    <p>
                        <span>工号：</span>
                        <span class="g_nums"></span>
                    </p>
                    <p>
                        <span>姓名：</span>
                        <span class="g_names"></span>
                    </p>
                    <i class="lx" style="top: 35px;left: 210px;"></i>
                </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 src="../js/bootstrap-treeview/bootstrap-treeview.min.js"></script>
    <script>
        var user;
        $(document).ready(function () {
            //部门下拉数据
            getDeptLists();
            getSeatLists();
            $('#department').on('focus click', function () {
                $('#deptTreeView').removeClass('hidden').addClass('show');
            });
            $('#department').on('keyup', function () {
                if ($(this).val() == '') {
                    $('deptTreeView').treeview('uncheckAll', { silent: true });
                    $(this).attr('data-id', '-1');
                }
            });
            $('#department + .caret').on('click', function () {
                $('#deptTreeView').removeClass('hidden').addClass('show');
            });
            $('#deptTreeView').mouseleave(function () {
                $(this).removeClass('show').addClass('hidden');
            });
            $(".wrapper").click(function () {
                if (!$('.zxtp').is(":hidden")) {
                    $('.zxtp').hide();
                }
            });
            $("#searchBtn").click(function () {
                getSeatLists();
                layer.msg('加载成功！');
            });

            //开始监测
            $(".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();
                }
            })
        });
        //获取部门
        function getDeptLists() {
            $.getJSON(huayi.config.callcenter_url + 'Department/GetDeptListForReport', {
                token: $.cookie("token")
            }, function (result) {
                //debugger;
                if (result.state.toLowerCase() == "success") {
                    var defaultDatas = result.data;
                    var $sTree = $('#deptTreeView').treeview({
                        color: "#428bca",
                        expandIcon: 'glyphicon glyphicon-chevron-right',
                        collapseIcon: 'glyphicon glyphicon-chevron-down',
                        nodeIcon: 'glyphicon glyphicon-bookmark',
                        data: defaultDatas,
                        onNodeSelected: function (event, node) {
                            $sTree.treeview('clearSearch');
                            $('#department').val(node.text);
                            $('#department').attr('data-id', node.id);
                            $('#deptTreeView').removeClass('show').addClass('hidden');
                        },
                        onNodeUnselected: function (event, node) {
                            $('#department').val('');
                            $('#department').attr('data-id', '-1');
                        }
                    });
                    var findSNodes = function () {
                        return $sTree.treeview('search', [$('#department').val(), {
                            ignoreCase: false,
                            exactMatch: false
                        }]);
                    };
                    $('#department').on('keyup', function (e) {
                        var selectableNodes = findSNodes();
                    });

                }
            })
        }
        //获取坐席列表
        function getSeatLists() {
            $.getJSON(huayi.config.callcenter_url + 'SeatMonitoring/getlist', {
                deptid: $("#department").attr('data-id'),
                "token": $.cookie("token")
            }, function (result) {
                if (result.state.toLowerCase() == "success") {
                    //debugger;
                    $(".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"></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>' +
                            '    <i class="lx" zx_item="0" xl_item="0"></i>' +
                            '</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"));
                                //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: ['确定']
                                });
                            }
                        })
                    })
                }
            });
        }

        //计算数量
        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 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; //注销
            }
            var ele = $("." + WorkNumber).find("i");
            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 = "";
            switch (State) {
                case "0":
                    sts = "lx";
                    break; //分机不可用
                    //case "1": 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; //保持/通话中
            }
            var ele = $("." + WorkNumber).find("i");
            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");
            }
        }
        //       	    //浏览器窗口大小改变时
        //       $(window).resize(function() {
        //          screenWidth = $(window).width();
        //           screenHeight = $(window).height();
        //          scrolltop = $(document).scrollTop();
        //           objLeft = (screenWidth - obj.width())/2 ;
        //           objTop = (screenHeight - obj.height())/2 + scrolltop;
        //           obj.css({left: objLeft + 'px', top: objTop + 'px'});
        //        obj.fadeToggle();
        //       });
        //       //浏览器有滚动条时的操作、
        //       $(window).scroll(function() {
        //          screenWidth = $(window).width();
        //           screenHeight = $(window).height();
        //           scrolltop = $(document).scrollTop();
        //           objLeft = (screenWidth - obj.width())/2 ;
        //           objTop = (screenHeight - obj.height())/2 + scrolltop;
        //           obj.css({left: objLeft + 'px', top: objTop + 'px'});
        //         obj.fadeToggle();

        //       });

        //# sourceURL=zx.js;
    </script>
</body>
</html>