mengjie
/
KFLTSWCallCenter_WEB


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626
							<!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 href="../js/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../js/bootstrap-treeview/bootstrap-treeview.min.css" />
		<!-- <link href="../css/init.css" rel="stylesheet" /> -->
		<link rel="stylesheet" href="./css/call.css" />
		<link rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
		<link rel="stylesheet" href="../js/webuploader/webuploader.css" />
		<style type="text/css">
			i.tub {
				position: absolute;
				right: 110px;
				top: 8px;
				font-size: 18px;
				color: #1ab494;
			}
			
			.tub+input {
				padding-right: 30px;
			}
			/* 附件开始 */
			.file_imgs {
				padding: 10px 70px;
				list-style: none;
				margin-bottom: 60px;
				margin-left: -15px;
			}
			
			.file_imgs li {
				float: left;
				position: relative;
				width: 109px;
				height: 109px;
				margin-left: 10px;
				margin-right: 10px;
				margin-bottom: 40px;
				padding-top: 0;
				padding-bottom: 0;
			}
			
			.file_imgs li:hover .img_mask {
				display: block;
			}
			
			.file_imgs .img_mask {
				display: none;
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(0, 0, 0, .3);
				width: 100%;
				height: 22px;
				z-index: 1;
			}
			
			.file_imgs .img_mask i {
				position: absolute;
				right: 5px;
				top: 5px;
				display: inline-block;
				width: 13px;
				height: 12px;
				cursor: pointer;
				background: url(../img/file_img_icons.png) no-repeat 0 0;
			}
			
			.file_imgs .file_name {
				width: 100%;
				display: inline-block;
				text-align: center;
				
				word-break: break-all;
				padding-top: 8px;
			}
			
			.file_imgs li img {
				width: 100%;
				height: 100%;
				border: 0;
				vertical-align: middle;
			}
			
			.file_imgs .upload-state-done .img_state {
				display: block;
				position: absolute;
				right: 7px;
				bottom: 29px;
				width: 0;
				height: 0;
				border-bottom: 40px solid #01b2fe;
				border-left: 40px solid transparent;
				overflow: inherit;
			}
			
			.file_imgs .img_state i {
				position: absolute;
				right: 4px;
				bottom: -32px;
				display: inline-block;
				width: 15px;
				height: 11px;
				background: url(../../img/file_img_icons.png) no-repeat 0 -16px;
			}
			
			.error {
				color: red;
				text-align: center;
			}
			
			.noThumb {
				width: 109px;
				height: 83px;
				text-align: center;
				color: #1aaad0;
			}
			
			.glyphicon.glyphicon-paperclip {
				font-size: 44px;
				text-align: center;
			}
			
			.img-box {
				float: left;
				width: 120px;
				height: 120px;
				background-size: 100% 100%;
				display: inline-block;
				position: relative;
				border-radius: 5px;
				margin-right: 10px;
				border: solid 1px #e8e8e8;
				cursor: pointer;
				text-align: center;
				line-height: 120px
			}
			
			.img-box .img_mask {
				display: none;
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(0, 0, 0, .3);
				width: 100%;
				height: 22px;
				z-index: 5;
			}
			
			.image-item {
				width: 120px;
				height: 120px;
				background-size: 100% 100%;
				display: inline-block;
				position: relative;
				border-radius: 5px;
				margin-right: 10px;
			
				cursor: pointer;
			}
			
			.img-box .img_mask i {
				position: absolute;
				right: 5px;
				top: 5px;
				display: inline-block;
				width: 13px;
				height: 12px;
				cursor: pointer;
				color: #fff;
			}
			
			.img-box:hover .img_mask {
				display: block;
			}
			
			.img_filename{
				font-size: 14px;
				/* display: block; */
			  width: 100%;
			  height: calc(100% - 22px);
			} 
			/* 附件结束 */
		</style>
	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight callSreen">
			<!--来电弹屏开始-->
			<div class="ldtp-con clearfix animated fadeInDown ">
				<!--黑名单开始-->
				<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 type="button" id="bc" class="btns">保存</button></p>
					</div>

				</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" />
							<input type="hidden" class="hidActionID" />
						</div>
						<div class="head_info clearfix">
							<div class="clearfix head_info_item">
								<div class="head_tel pull-left">
									<i class="head_tel_icon"></i>
									<span class="tel"></span>
									<i class="head_tel_bg"></i>
								</div>
								<div class="head_time pull-left">
									<i class="head_time_icon"></i>
									<span class="thsc">00:00</span>
								</div>
							</div>
							<div class="clearfix head_info_item">
								<div class="head_location pull-left">
									<i class="head_location_icon"></i>
									<span class="khgsd">未知</span>
									<i class="head_location_bg"></i>
								</div>
								<div class="head_black pull-left">
									<i class="head_black_icon la-before" id="head_black_btn" title="点击加入黑名单"></i>
									<i class="head_black_cancel_icon retur" style="display: none;"></i>
									<span class="head_black_btn">黑名单</span>
									<i class="head_black_ivr take" id="head_black_ivr"></i>
								</div>
							</div>
						</div>
						<div class="head_form form-horizontal">
							 <div class="form-group" id="keBian">
								<label for="head_form_name" class="col-sm-4 control-label">客户编号</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="head_form_customer_id" value="" autocomplete="off" placeholder="请输入客户编号"/>
								</div>
							</div> 
							<div class="form-group">
								<label for="head_form_name" class="col-sm-4 control-label">姓名</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="head_form_name" autocomplete="off" placeholder="请输入姓名">
								</div>
							</div>
							<div class="form-group">
								<label for="head_form_cmpaddress" class="col-sm-4 control-label">地址</label>
								<div class="col-sm-8">
									<input  type="text" class="form-control" id="head_form_cmpaddress" placeholder="请输入地址" autocomplete="off">
								</div>
							</div>
							
							<div class="form-group">
								<label for="" class="col-sm-4 control-label">来电时间</label>
								<div class="col-sm-8">
									<span class="ldtime"></span>
								</div>
							</div>
							<div class="form-group text-center head_form_btn_save">
								<!-- <span id="head_form_btn_reset">清空</span> -->
								<span id="head_form_btn_save">保存联系人</span>
							</div>
						</div>

						<div class="head_customer_info clearfix" style="display: none;">
							<!-- <div class="head_customer_info_title clearfix">
								<span class="info_title pull-left">相关联系人信息</span>
								<ul class="pagination pull-right" id="pagination"></ul>
							</div> -->
							<div class="head_customer_info_lists" id="head_customer_info">
								
							
							</div>
							<div class="pull-right" id="page_number"></div>
						</div>
					</div>
				</div>
				<!--右侧内容-->
				<div class="ldtp-cr col-sm-9">
					<ul class="ld-service clearfix">
						<li style="border-bottom:1px solid #1AB394;" class="cr-click">新增工单</li>
						<li style="border-bottom:1px solid #243747;">历史记录</li>
						<li style="border-bottom:1px solid #67aefe;" class="KF">历史工单</li>
						<li style="border-bottom:1px solid #243747;">客户信息</li>
					</ul>
					<div class="ld-sercon">
						<!--新增工单-->
						<div class="complain order_form" style="display:block;">
							<form class="form-inline clearfix" id="order_form">
								<div class="form-group col-md-12 clearfix">
									<label class="col-md-2">工单来源：</label>
									<div id="" class="col-md-10 r_order_type">
								         <select name=""  id="order_source" data-live-search="true">
											 <option value="">请选择工单来源</option>
										 </select>
									</div>
								</div>
								<div class="form-group col-md-12 clearfix">
									<label class="col-md-2">工单类型：</label>
									<div id="order_type" class="col-md-10 r_order_type">

									</div>
								</div>
								<!-- <div class="form-group col-md-12" id="order_handles">
									<label for="order_handle">业务办理：</label>
									<select class="form-control input-sm selectpicker" id="order_handle" data-live-search="true">
										<option value="0">请选择业务办理</option>
									</select>
								</div> -->
								<div class="col-md-12 row">
									<div class="form-group col-md-4" id="order_handles">
										<label for="order_handle">工单子类：</label>
										<select class="form-control input-sm selectpicker" id="order_godant" data-live-search="true">
											<option value="">请选择工单子类</option>
										
										</select>
									</div>
									<div class="form-group col-md-4">
										<label for="order_name">截止日期：</label>
										<i class="tub fa fa-calendar"></i>
										<input class="form-control search_time" type="text" id="sc_time" placeholder="请选择截止时间">
									</div>
								</div>
								<div class="col-md-12 row" style="position: relative;">
									<div class="form-group col-md-4">
										<label for="order_name">客户姓名：</label>
										<input type="text" class="form-control input-sm" id="order_name" placeholder="请输入客户姓名">
									</div>
									<div class="form-group col-md-4">
										<label for="order_tel">联系电话：</label>
										<input type="text" class="form-control input-sm" id="order_tel" placeholder="请输入联系电话" >
									</div>
									<!-- <div class="form-group col-md-4">
										<label for="order_company">公司名称：</label>
										<input type="text" class="form-control input-sm" id="order_company" placeholder="请输入公司名称">
									</div> -->
									
								</div>
								<div class="form-group col-md-12">
									<label for="order_reception">反馈内容：</label>
									<textarea id="order_reception" rows="3" cols="20" class="form-control" placeholder="请输入反馈内容"></textarea>
								</div>
								<div class=" form-group col-md-12 " style="margin:20px 0 0 -15px;">
									<label class="col-md-2" >附件：</label>
									<div id="imgPicker" class="apply_forms_file">+</div>
										<p class="help-block text-warning" style="display:inline-block;">
											<span id="fileNum">0</span>/6 每个文件大小不超过30M
										</p>
										<ul id="fileList" class="file_imgs clearfix">
										</ul>
														
								</div>
								<div class="form-group col-md-8 clearfix">
									<label class="col-md-2">工单有效性：</label>
									<div id="order_iseffective" class="r_order_type col-md-6">
										<label class="radio-inline">
											<input type="radio" name="radioOptions" value="0" checked="checked">有效
										</label>
										<label class="radio-inline">
											<input type="radio" name="radioOptions" value="1">无效
										</label>
									</div>
								</div>
								<div class="form-group col-md-12 order_note">
									<label for="order_note">无效原因：</label>
									<textarea id="order_note" rows="3" cols="20" class="form-control" placeholder="请输入无效原因"></textarea>
								</div>
								<div id="order_isover_box" class="form-group col-md-12 clearfix">
									<label class="col-md-2">立即处理：</label>
									<div id="order_isover" class="r_order_type col-md-10">
										<label class="radio-inline">
											<input type="radio" name="isoverOptions" value="1">是
										</label>
										<label class="radio-inline">
											<input type="radio" name="isoverOptions" value="0" checked="checked">否
										</label>
									</div>
								</div>
								<div class="col-md-12 clearfix order_transfer" id="order_transfer_depts">
									<div class="form-group drop_down col-md-4">
										<label for="order_transfer_dept">接收部门：</label>
										<input type="text" class="form-control input-sm" id="order_transfer_dept" data-id="0" placeholder="请选择部门" autocomplete="off" />
										<span class="caret"></span>
										<div id="reginsTreeView" class="hidden"></div>
									</div>
									<div class="form-group col-md-12">
										<label for="order_reception">指派说明：</label>
										<textarea id="order_zhipai" rows="3" cols="20" class="form-control" placeholder="请输入反馈内容"></textarea>
									</div>
									<!-- <div class="form-group col-md-4">
										<label for="order_receiveUser">接收人：</label>
										<select class="form-control input-sm selectpicker" id="order_receiveUser" data-live-search="true">
											<option value="0">请选择接收人</option>
										</select>
									</div> -->
								</div>
									
								<div class="form-group text-center col-sm-12">
									<button type="button" class="btn bton btn-sm" id="save_order">创建</button>
									<button type="button" class="btn bton btn-sm" onclick="cleanOrderForm()">清空</button>
								</div>
								
							</form>
						</div>
						<!--历史记录-->
						<div class="complain">
							<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 itemtype="1" class="searchbtn"></span>
								</div>
								<div class="table-responsive col-sm-12" style="padding-left: 0;">
									<table id="oldlist" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
										<thead>
											<tr>
												<th data-field="CallNumber" data-formatter="helper.filter.cutTel">电话号码</th>
												<th data-field="CallState" data-formatter="formatterCallState">呼叫状态</th>
												<th data-field="DealType" data-formatter="formatterDealType" data-align="center">处理方式</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="TalkLongTime">通话时长(s)</th>
												<th data-field="FilePath" data-formatter="formatterRecord">录音</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
						<!--历史工单-->
						<div class="complain">
							<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 itemtype="2" class="searchbtn"></span>
								</div>
								<div id="zxlbs" class="table-responsive col-sm-12" 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="formatterWorkOrderID" data-align="center">工单编号</th>
												<th data-field="State" data-formatter="formatterState" data-width="110" data-align="center">工单状态</th>
												<th data-field="IsEffective" data-formatter="formatterIsEffective" data-align="center">工单有效性</th>
												<th data-field="GDLXName" data-align="center">工单类型</th>
												<th data-field="TypeClassName" data-align="center">业务办理</th>
												<th data-field="Customer" data-width="100" data-align="center">姓名</th>
												<th data-field="CustomerTel" data-formatter="helper.filter.cutTel" data-align="center">客户电话</th>
												<th data-field="County" data-formatter="" data-align="center">公司名称</th>
												<th data-field="ResponDeptName" data-formatter="" data-align="center">接收部门</th>
												<th data-field="AuditUserNameRel" data-formatter="formatterAuditUser" data-align="center">接收人</th>
												<th data-field="Detail" data-align="center" data-formatter="formatterDetail">反馈内容</th>
												<th data-field="CreateTime" data-align="center" data-width="150">创建时间</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
						<!-- 客户信息 -->
						<div class="complain cusDetails">
							
							<div class="content_1 clearfix">
								<div class="shark_content_title clearfix">
									<span>基本信息</span>
								</div>
									<ul class="clearfix form-inline cus_base">
										<li class="col-md-3 col-sm-4">
											<label for="customer_code">客户编号:</label>
											<span id="customer_code"></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_companyname">客户姓名:</label>
											<span id="customer_companyname"></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_comaddress">客户电话:</label>
											<span id="customer_comaddress"></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_legalName">客户地址:</label>
											<span id="customer_legalName"></span>
										</li>
										<!--<li class="col-md-3 col-sm-4">
											<label for="customer_lehalTel">法人电话:</label>
											<span id="customer_lehalTel"></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_subtrade">所属行业:</label>
											<span id="customer_subtrade"></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_taxCategory">税务类别:</label>
											<span id="customer_taxCategory"></span>
										</li>-->
										
										
									</ul>
							</div>

							<div class="content_1 clearfix" id="conectLits" style="display: none;">
								<div class="shark_content_title clearfix">
									<span>联系人信息</span>
								</div>
								<ul class="form-inline cus_base" id="cusLists">
									<div class="clearfix cusListItem">
										<a href="javascript:;" class="aBtn" onclick="btn_edit('1')" title="修改">修改</a>
										<a href="javascript:;" class="aBtn aBtn1" onclick="btn_delete('1')" title="删除">删除</a>
										<li class="col-md-3 col-sm-4">
											<label>姓名:</label>
											<span></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_bemakeAcc">电话:</label>
											<span id="customer_bemakeAcc"></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_bemakeAcc">邮箱:</label>
											<span id="customer_bemakeAcc"></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_bemakeAcc">职务:</label>
											<span id="customer_bemakeAcc"></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_bemakeAcc">QQ:</label>
											<span id="customer_bemakeAcc"></span>
										</li>
										<li class="col-md-3 col-sm-4">
											<label for="customer_bemakeAcc">MSN:</label>
											<span id="customer_bemakeAcc"></span>
										</li>
										<li class="col-md-12 col-sm-12">
											<label for="customer_bemakeAcc">备注:</label>
											<span id="customer_bemakeAcc"></span>
										</li>
										<li class="col-md-12 col-sm-12">
											<label for="customer_F_IsMain">是否主要联系人:</label>
											<span id="customer_F_IsMain"></span>
										</li>
									</div>
									
								</ul>
							</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>
							</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/autosize/autosize.min.js"></script>
		<script src="../js/bootstrap-select/js/bootstrap-select.js"></script>
		<script src="../js/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
		<script src="../js/bootstrap-treeview/bootstrap-treeview.min.js"></script>
		<script src="../js/jqpaginator/jqpaginator.min.js" type="text/javascript"></script>
		<script src="../js/laydate/laydate.js"></script>
		<script src="../js/webuploader/webuploader.min.js"></script>
		<script src="../Script/Common/regexs.js"></script>
		<script src="../js/main.js?v=1.5"></script>
		<script src="../js/zTree/jquery.ztree.core.js"></script>
		<script src="call.js"></script>
	</body>

</html>