zhoufan
/
NYDX_CallCenter_UI


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>来电弹屏</title>
    <script src="../Script/Common/huayi.load.js"></script>
    <script src="../Script/Common/huayi.config.js"></script>
    <link rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
    <link rel="stylesheet" href="./css/call.css" />
    <!-- 录屏 -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css" /> -->
    <!-- 回放播放器 -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" /> -->
    <style>
        body,
        html,
        .wrapper {
            height: 100%;
        }

        .ldtp-con {
            display: block;
        }

        .minBacha {
            position: absolute;
            top: 0;
            right: 80px;
            z-index: 10;
            overflow: hidden;
        }

            .minBacha > div {
                float: left;
                height: 35px;
                width: 35px;
                margin-left: 2px;
            }

                .minBacha > div a {
                    display: block;
                    height: 100%;
                    width: 100%;
                    text-align: center;
                    background-position: center center;
                    background-color: #2f4050;
                    opacity: .5;
                }

                    .minBacha > div a:hover {
                        opacity: 1;
                    }

        .minClosed > a {
            background: url("./../img/min.png") no-repeat;
        }

        .Bacha > a {
            background: url("./../img/gb.png") no-repeat;
        }

        .lblcount {
            position: absolute;
            right: 5px;
            top: 7px;
        }

        .first {
            z-index: 1000;
        }

        .khzl {
            font-size: 12px;
            border: 0;
            margin: 35px auto;
            color: #fff;
        }

            .khzl tr {
                border: 0;
            }

            .khzl th {
                padding: 5px 8px 5px 0;
                text-align: right;
                width: 40%;
                font-weight: normal;
                border: 0;
            }

            .khzl tbody > tr > td,
            .khzl tbody > tr > th {
                border: 0;
            }

                .khzl tbody > tr > td input,
                .khzl tbody > tr > td select {
                    border: 0;
                    outline: none;
                    background: #243747;
                    padding-left: 5px;
                    width: 100%;
                }

                .khzl tbody > tr > td select {
                    appearance: none;
                    -moz-appearance: none;
                    /* Firefox */
                    -webkit-appearance: none;
                    /* Safari 和 Chrome */
                }

                    .khzl tbody > tr > td select[disabled] {
                        background-color: #243747;
                    }

        .khbtn {
            /*background: #97a0a8;*/
            color: #1ab394;
            font-size: 14px;
            vertical-align: middle;
        }

        .hei-list {
            width: 400px;
            margin: 0 auto;
        }

        .heiTop {
            height: 35px;
            background: #1ab394;
            color: #fff;
            line-height: 35px;
            padding: 0 15px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

            .heiTop .htl {
                float: left;
                margin: 0;
            }

            .heiTop .bacha {
                float: right;
                font-size: 18px;
                cursor: pointer;
                margin: 0;
            }

        .heiCon {
            width: 100%;
            background: #fff;
            text-align: center;
            padding: 25px 15px;
            height: auto;
            overflow-y: auto;
            border: 1px solid #eee;
        }

        #time-word {
            border: 1px solid #1ab394;
            padding: 5px 0 5px 10px;
            width: 120px;
            outline: none;
            color: #000;
        }

        .chooses {
            margin-top: 10px;
        }

        .btns {
            background: #1ab394;
            color: #fff;
            padding: 3px 10px;
            outline: none;
            font-size: 12px;
            margin-left: 15px;
            border: 0;
            border-radius: 3px;
            box-sizing: border-box;
        }

        .bianji {
            display: inline-block;
            height: 16px;
            width: 16px;
            vertical-align: middle;
            margin-right: 5px;
        }

            .bianji.edi {
                background: url(./../img/xgai.png) no-repeat;
            }

            .bianji.sav {
                background: url(./../img/bbc.png) no-repeat;
            }

            .bianji.canc {
                background: url(./../img/quxi.png) no-repeat;
            }

        .t-shade {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.48);
            z-index: 10004;
            display: none;
        }

        .shade_k {
            z-index: 10005;
            width: 40%;
            margin: 10% auto;
            background-color: #fff;
            box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
            border-radius: 5px;
        }

        .shade_title {
            padding: 0 80px 0 20px;
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid #eee;
            font-size: 16px;
            color: #FFFFFF;
            overflow: hidden;
            background-color: rgb(26, 179, 148);
            border-radius: 2px 2px 0 0;
            position: relative;
        }

        .setwin {
            position: absolute;
            right: 15px;
            top: 5px;
            font-size: 20px;
            line-height: initial;
        }

            .setwin a {
                font-size: 20px;
                color: #fff;
            }

        .shade_content {
            overflow-y: auto;
            position: relative;
            padding-bottom: 50px;
            padding: 10px;
        }

        .ldcr-bottom .detail-con ul li .active a {
            color: #1ab394 !important;
            /*color: #f95a83 !important;*/
        }

        .ldcr-bottom .detail-con ul li .active + .explancon {
            display: block !important;
        }

        .searchbtn {
            width: 2.5em;
            height: 24px;
            border-radius: 5px;
            position: absolute;
            background-color: #1AB394;
            background-image: url(./../img/searIcon.png);
            background-repeat: no-repeat;
            background-position: center center;
            cursor: pointer;
        }

        .cx {
            display: block;
        }
    </style>
</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInRight">
        <!--来电弹屏开始-->
        <div class="ldtp-con clearfix animated fadeInDown ">
            <!--左侧内容-->
            <!--黑名单弹出内容-->
            <!--<div class="hei-list ">
                <i class="bacha">X</i>
                <form class="form-inline">


                    <label class="radio-inline">
                    <input type="radio" name="time" value="1" checked="checked"> 天
                </label>
                    <label class="radio-inline">
                    <input type="radio" name="time" value="2"> 时
                </label>
                    <label class="radio-inline">
                    <input type="radio" name="time" value="3">分
                </label>
                    <label class="radio-inline">
                    <input type="radio" name="time" value="4">永久
                </label>
                    <label class="radio-inline">
                    <input type="button" id="bc" value="保存">
                </label>
                </form>

            </div>-->
            <div class="hei-list">
                <div class="heiTop clearFix">
                    <p class="htl">黑名单</p>
                    <p class="bacha" title="关闭">x</p>
                </div>
                <div class="heiCon">
                    <div class="heit">
                        <span style="font-size: 14px;">输入拉黑时长：</span>
                        <input type="text" id="time-word" />
                    </div>
                    <div class="chooses">

                        <label class="radio-inline">
                            <input type="radio" name="time" value="1" checked="checked" style="margin-top: 3px;"> 天
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="time" value="2" style="margin-top: 3px;" />时
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="time" value="3" style="margin-top: 3px;" />分
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="time" value="4" style="margin-top: 3px;" />永久
                        </label>

                    </div>
                    <p style="margin-top: 15px;"><button id="bc" class="btns">保存</button></p>
                </div>

            </div>

            <!--最小化按钮-->
            <!--<div class="minClosed">
                <a href="javaScript:;" title="最小化"></a>
            </div>-->
            <!--左侧内容-->
            <div class="ldtp-cl col-sm-3">
                <div class="head-pic">
                    <div class="hp-box">
                        <img src="./../img/txpic.png" alt="头像好像去了外星球！" style="width: 100%;height: 100%;" />
                        <input type="hidden" class="hidCallID" />
                    </div>
                   <ul>
                        <li><span style="font-size: 25px;" class="tel"></span></li>
                        <li><span style="font-size: 15px;" class="khgsd"></span></li>
                        <!--<li class="nikeName"><i></i><span class="ldname">未知</span><i></i></li>-->
                        <li style="color: #4cd964;">当前通话时长：<span class="thsc">00:00</span></li>
                        <li class="lahei">
                            <div class="la-before"><i class="push"></i> 移至黑名单</div>
                            <div class="la-after" style="display: none;">
                                <p class="la-time">拉黑时间：<span class="lhtime"></span></p>
                                <p class="la-shichang">拉黑截止时间：<span class="blackTime"></span></p>
                            </div>
                            <div class="retur" style="display: none;"><i class="qxlh"></i>取消黑名单</div>
                        </li>
                        <li class="td-call clearfix" style="display:none;">
                            <a class="take" style="float:none;" href="javascript:;"><i></i></a>
                            <!--<a class="drop" href="javascript:;"><i></i></a>-->
                        </li>
                    </ul>
                </div>
                <div style="text-align: center; padding-bottom: 10px; color: #ccc;"><span id="playersing"></span> 
                <!--<span id="startplayers">开始录屏</span> | <span id="stopplayers">停止录屏</span> | <span id="replayers">回放录屏</span>--> 
                </div>

                <table class="table khzl">
                    <tr>
                        <th>姓名：</th>
                        <td><input type="text" value="未知" class="ldname khmc" /><input type="hidden" value="" id="khid" /></td>
                    </tr>
                    <tr>
                        <th>归属地：</th>
                        <td><span class="ldlocation" style="padding-left: 5px;">未知</span></td>
                    </tr>
                    <tr>
                        <th>手机号：</th>
                        <td><input type="text" id="t_mobile" /></td>
                    </tr>
                    <tr>
                        <th>电话：</th>
                        <td><input type="text" id="t_tels" /></td>
                    </tr>
                    <tr>
                        <th>乡镇或单位：</th>
                        <td>
                            <select class="form-control" id="t_countys" disabled>
                                <option value="0">请选择乡镇或单位</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>地址：</th>
                        <td><input type="text" id="t_addresss" /></td>
                    </tr>
                    <tr>
                        <th>来电时间：</th>
                        <td><span class="ldtime" style="padding-left: 5px;"></span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><span class="edit"><i class="bianji edi"></i><a class="khbtn">编辑</a></span><span class="save"> <i class="bianji sav"></i><a class="khbtn">保存</a></span><span class="cancel"><i class="bianji canc"></i><a class="khbtn">取消</a></span></td>
                    </tr>
                </table>
            </div>
            <!--右侧内容-->

            <div class="ldtp-cr col-sm-9">
                <ul class="ld-service clearfix">
                	<li style="border-bottom:1px solid #243747;" itemtype="1" class="cr-click">新增工单</li>
                    <li style="border-bottom:1px solid #243747;" itemtype="0" >历史记录</li>
                    <!--<li style="border-bottom:1px solid #69cbd0;" itemtype="1">咨询</li>
                    <li style="border-bottom:1px solid #243747  f95a83;" itemtype="2">保修服务</li>-->
                    <li style="border-bottom:1px solid #243747;" itemtype="3">历史工单</li>
                </ul>
                <div class="ld-sercon">
                	<div class="complain" style="display: block;">
                		 <div class="Pre-second second-con addgd" style="display:none;">
                            <form class="form-inline clearfix">
                                <div class="form-group col-md-4">
                                    <label for="t_name">客户姓名：</label>
                                    <input type="text" class="form-control input-sm" id="t_name" placeholder="请输入客户姓名">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="t_tel"><b class="text-red">*</b>电话：</label>
                                    <input type="text" class="form-control input-sm" id="t_tel" placeholder="请输入电话">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="t_county">乡镇或单位：</label>
                                    <select class="form-control input-sm" id="t_county">
                                        <option value="0">请选择</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="t_address">地址：</label>
                                    <input type="text" class="form-control input-sm" id="t_address" placeholder="请输入地址">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="t_time">调查时间：</label>
                                    <input type="text" class="form-control input-sm" id="t_time" placeholder="请输入调查时间">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="t_investigator">调查员：</label>
                                    <input type="text" class="form-control input-sm" id="t_investigator" placeholder="请输入调查员">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="clbmname">处理部门：</label>
                                    <div class="inpBox">
                                        <input type="text" class="inps form-control" id="clbmname" placeholder="请输入处理部门" />
                                        <!--<input type="text" class="inps tree" readonly="readonly" id="clbmname" placeholder="请选择处理部门" />
                                        <input type="hidden" class="inps" id="clbm" />
                                        <i class="xl"></i>
                                        <b class="de_icon">X</b>
                                        <div class="addTree">
                                            <ul id="clbmtree" class="ztree"></ul>
                                        </div>-->
                                    </div>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="clidname">处理人：</label>
                                    <div class="inpBox">
                                        <input type="text" class="inps form-control" id="clidname" placeholder="请输入处理人姓名" />
                                        <!--<input type="text" class="inps select" readonly="readonly" id="clidname" placeholder="请先选择处理部门" />
                                        <input type="hidden" class="inps " id="clid" />
                                        <i class="xl"></i>
                                        <div class="xl_common">
                                            <ul class="xl_box clid"></ul>
                                        </div>-->
                                    </div>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="t_infoCls">问题分类：</label>
                                    <input type="text" class="inps form-control" id="t_infoCls" placeholder="请输入问题分类" />
                                    <!--<select class="form-control input-sm" id="t_infoCls">
                                        <option value="">请选择</option>
                                    </select>-->
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="t_unitid">交办单位：</label>
                                    <input type="text" class="inps form-control" id="t_unitid" placeholder="请输入交办单位" />
                                    <!--<select class="form-control input-sm" id="t_unitid">
                                        <option value="">请选择</option>
                                    </select>-->
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="t_detail">反映问题：</label>
                                    <textarea id="t_detail" rows="3" cols="20" class="form-control" placeholder="请输入反映问题"></textarea>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="t_answer">回访反馈情况：</label>
                                    <textarea id="t_answer" name="" rows="3" cols="20" class="form-control" placeholder="请输入回访反馈情况"></textarea>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="t_cont">问题处理情况：</label>
                                    <textarea id="t_cont" name="" rows="3" cols="20" class="form-control" placeholder="请输入问题处理情况"></textarea>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="t_remarks">备注：</label>
                                    <textarea id="t_remarks" name="" rows="3" cols="20" class="form-control" placeholder="请输入备注"></textarea>
                                </div>
                                <div class="form-group text-center col-sm-12">
                                    <button type="button" class="btn bton addts btn-sm">创建</button>
                                </div>
                            </form>
                        </div>
                	</div>
                    <div class="complain" style="display:none;">
                        <div class="ld-sercon-con clearfix">
                            <div class="Ps-chaxun">
                                <span>查询: <input type="text" id="old_startTime" class="laydate-icon" />&nbsp;——&nbsp;<input type="text" id="old_endTime" class="laydate-icon" /></span>

                                <span class="searchbtn"></span>
                            </div>
                            <div class="table-responsive col-sm-12 tbold" style="padding-left: 0;">
                                <table id="oldlist" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
                                    <thead>
                                        <tr>
                                            <th data-field="CallNumber">电话号码</th>
                                            <th data-field="CallState" data-formatter="GetCallState">呼叫状态</th>
                                            <!--<th data-field="IsDeal" data-formatter="GetDealState">是否处理</th>-->
                                            <th data-field="UserCode">坐席工号</th>
                                            <th data-field="UserName">坐席姓名</th>
                                            <th data-field="BeginTime">开始时间</th>
                                            <th data-field="TalkStartTime">通话开始时间</th>
                                            <th data-field="TalkEndTime">通话结束时间</th>
                                            <th data-field="EndTime">通话结束时间</th>
                                            <th data-field="TalkLongTime">通话时长(s)</th>
                                            <th data-field="FilePath" data-formatter="setCode">录音</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list"></tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                    <div class="complain" style="display:none;">
                        <div class="ld-sercon-con clearfix">
                            <div class="Ps-chaxun">
                                <span>查询: <input type="text" id="con_startTime" class="laydate-icon" />&nbsp;——&nbsp;<input type="text" id="con_endTime" class="laydate-icon" /></span>
                                <span class="searchbtn"></span>
                                <!--<span class="addjl g" style="margin-left:5em;">新增工单</span>-->
                            </div>
                            <div id="zxlbs" class="table-responsive col-sm-12 tbold" style="padding-left: 0;">
                                <table id="orderlist" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
                                    <thead>
                                        <tr>
                                            <th data-field="WorkOrderID" data-formatter="View">工单编号</th>
                                            <th data-field="State" data-formatter="GetStateName">工单状态</th>
                                            <th data-field="Customer">客户姓名</th>
                                            <th data-field="CustomerTel">客户电话</th>
                                            <th data-field="Detail" data-formatter="GetCont">反映问题</th>
                                            <th data-field="CreateUser">坐席工号</th>
                                            <th data-field="CreateTime">创建时间</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list"></tbody>
                                </table>
                            </div>
                        </div>
                       
                        <div class="Pre-second second-con zxbg " style="display: none;">
                            <form>
                                <div class="form-group clearfix">
                                    <span class="col-sm-1">
                                        咨询人:
                                    </span>
                                    <span class="col-sm-3">
                                        <input type="text" id="zxr_" />
                                    </span>
                                    <span class="col-sm-1">
                                        咨询电话:
                                    </span>
                                    <span class="col-sm-3">
                                        <input type="text" id="zxdh_" />
                                    </span>
                                </div>

                                <div class="form-group clearfix">
                                    <span class="col-sm-1">咨询内容:</span>
                                    <span class="col-sm-11">
                                        <textarea rows="5" id="zxnr_" style="resize: none;"></textarea>
                                    </span>
                                </div>
                                <div class="form-group clearfix">
                                    <span class="col-sm-1">处理内容:</span>
                                    <span class="col-sm-11">
                                        <textarea rows="5" style="resize: none;" id="clnr_"></textarea>
                                    </span>

                                </div>
                                <div class="bton add_">创建</div>
                            </form>
                        </div>
                    </div>
                	
                </div>
                <!--右侧下方内容区-->
                <div class="ldcr-bottom" style="margin-top:10px;">
                    <div class="ldcrb-top clearfix">
                        <ul class="clearfix">
                            <li style="border-bottom:1px solid #69cbd0; background: #000;color: #fff;">知识库</li>
                            <!--<li style="border-bottom:1px solid #f95a83;border-top:1px solid #000;border-right:1px solid #000;">更多内容</li>-->
                        </ul>
                        <div class="ld-search">
                            <div class="sear-inp">
                                <input type="text" class="search" placeholder="搜索问题、内容或者标题" />
                            </div>
                            <div class="searIcon">
                            </div>
                        </div>
                    </div>
                    <div class="detail-con">
                        <ul></ul>
                    </div>
                </div>
            </div>
        </div>

        <!--来电弹屏结束-->
        <!--下载框-->
        <div class="t-shade">
            <div class="shade_k">
                <div class="shade_title">
                    <span>录音播放与下载<srong class="cknum"></srong></span>
                    <span class="setwin"><a>x</a></span>
                </div>
                <div class="shade_content">
                    <div class="Ly_box audiojs">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/laydate/laydate.js"></script>
    <script src="../js/autosize/autosize.js"></script>
    <script src="../js/main.js?v=1.5"></script>
    <script src="call.js"></script>
    <!-- 录屏
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script>-->
    <!-- 回放播放器 
    <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
    <script src="cutVideo.js" type="text/javascript"></script>-->
</body>

</html>