zhengbingbing
/
XiXianDC_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737
							<!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 id="ReIndex">首页</a>&gt;
						<a href="javaScript:;">话务管理</a>&gt;
						<a href="" style="color: #000;">坐席监控管理</a>
					</sapn>
				</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() {
				//获取坐席列表
				$.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"));
									//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");
			}
			/**
			 * 修改当前页面坐席列表内 坐席弹屏内  坐席头像上 坐席状态
			 * WorkNumber 坐席工号
			 * State 状态值
			 * */
			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>