大屏修改

WebChart/Script/Common/huayi.config.js

@@ -1,4 +1,4 @@
-if (huayi == undefined) {
+if (huayi == undefined) {
     var huayi = {};
 }
 huayi.config = {
@@ -7,8 +7,8 @@ huayi.config = {
     //callcenter_data: "http://192.168.4.18:4032/",//市县选择
 // callcenter_url: "http://12345.shangqiu.gov.cn:8819/",//生产环境
     //callcenter_url: "http://localhost:63662/"//测试环境
-//  socket_ip: "192.168.5.8",//ip
-    socket_ip: "192.168.4.3",//ip
+    socket_ip: "125.45.12.160",//ip
+    // socket_ip: "192.168.8.7",//ip
     socket_port: "8081",//端口
     menuworktime: 30000,//菜单工单数量刷新间隔
     indextime: 30000//首页报表刷新间隔

WebChart/Script/Common/huayi.config_1.js

@@ -0,0 +1,60 @@
+if (huayi == undefined) {
+    var huayi = {};
+}
+huayi.config = {
+//	callcenter_url: unescape($.cookie("callcenter_url")),//生产环境
+//  socket_ip: $.cookie("socket_ip"),//ip
+//  socket_port: $.cookie("socket_port"),//端口
+//  menuworktime: Number($.cookie("menuworktime")),//菜单工单数量刷新间隔
+//  indextime: Number($.cookie("indextime")),//首页报表刷新间隔
+//  messageTime:Number($.cookie("messageTime")),
+    callcenter_url: "http://192.168.8.20:1001/",//生产环境
+    socket_ip: "192.168.8.4",//ip
+    socket_port: "8081",//端口
+    menuworktime: 30000,//菜单工单数量刷新间隔
+    indextime: 30000,//首页报表刷新间隔
+    messageTime:60000,
+     arr :["<a class='xg' onclick='ckxq(data)' title='查看'>查看</a>",
+				"<a class='xg' onclick='bj(data)' title='编辑'>编辑</a>",
+				"<a class='xg' onclick='move(data)' title='删除'>删除</a>",
+				"<a class='xg' onclick='tj(data)' title='提交'>提交</a>",
+				"<a class='xg' onclick='jb(data)' title='交办'>交办</a>", //交办
+				"<a class='xg' onclick='lader(data)' title='领导'>领导批示</a>", //领导批示
+				"<a class='xg' onclick='city(data)' title='市长'>市长批示</a>", //市长指示
+				"<a class='xg' onclick='Supervision(data)' title='督办'>督办</a>", //督办
+				"<a class='xg' onclick='Supervision_(data)' title='督察'>监察</a>", //督察
+				"<a class='xg' onclick='sh(data)' title='收回'>收回</a>", //收回
+				"<a class='xg' onclick='cs(data)' title='查收'>查收</a>", //查收
+				"<a class='xg' onclick='th(data)' title='退回申请'>退回申请</a>", //退回申请
+				"<a class='xg' onclick='bl(data,isProtect)' title='办理'>办理</a>", //办理
+				"<a class='xg' onclick='ys(data)' title='申请延时'>申请延时</a>", //延时申请
+				"<a class='xg' onclick='shth(data)' title='退回审核'>退回审核</a>", //退回审核
+				"<a class='xg' onclick='hf(data)' title='回访'>回访</a>", //回访
+				"<a class='xg' onclick='shys(data)' title='延时审核'>延时审核</a>", //延时审核
+				"<a class='xg' onclick='cb(data)' title='重办'>重办</a>", //重办
+				"<a class='xg' onclick='Lawsuit(data)' title='结案'>结案</a>", //结案
+				"<a class='xg'  title='导出'>导出</a>", //导出
+				"<a class='xg' onclick='BackDtail(data)'   title='回退'>回退</a>", //回退
+				"<a class='xg' onclick='StrongLawsuit(data)' title='强制结案'>强制结案</a>", //结案
+                "<a class='xg' onclick='pd(data)' title='派单'>派单</a>", //派单
+                "<a class='xg' onclick='auditdeal(data)' title='处理审核'>处理审核</a>", //处理审核
+                "<a class='xg' onclick='sign(data)' title='签收'>签收</a>", //签收
+                "<a class='xg' onclick='refuse(data)' title='拒收'>拒收</a>", //拒收
+                "<a class='xg' onclick='withdraw(data)' title='撤单'>撤单</a>", //撤单
+                "<a class='xg' onclick='audit(data)' title='审核'>审核</a>", //审核
+                "<a class='xg' onclick='zdb(data)' title='转督办'>转督办</a>", //转督办
+                "<a class='xg' onclick='ndb(data)' title='不督办'>不督办</a>", //不督办
+                "<a class='xg' onclick='tjcb(data)' title='提交重办'>提交重办</a>", //重办
+                "<a class='xg' onclick='bhcb(data)' title='驳回重办'>驳回重办</a>" ,//重办
+                "<a class='xg' onclick='lzjd(data)' title='履职界定'>履职界定</a>" ,//履职界定
+                "<a class='xg' onclick='jdsh(data)' title='界定审核 '>界定审核</a>" //界定审核
+			],
+	 kapArr :["<a class='xg' onclick='goDetail(data,data_id)' title='查看'>查看</a>",
+				"<a class='xg' onclick='goEdit(data,data_id)' title='编辑'>编辑</a>",
+				"<a class='xg' onclick='goDel(data)' title='删除'>删除</a>",
+				"<a class='xg' onclick='tj(data)' title='提交'>提交</a>",
+				"<a class='xg' onclick='audit(data)' title='审核'>审核</a>", 
+				"<a class='xg' onclick='solve(data)' title='解决'>解决</a>", 
+				"<a class='xg' onclick='noSolve(data)' title='未解决'>未解决</a>" 
+			]
+};

WebChart/TelephoneDetails.html

@@ -146,32 +146,36 @@
 		            margin-right: 10px;
 					border-radius: 50%;
 		        }
-		
+		/* 通话中 */
 		.hc {
-		    background-color: greenyellow;
+		    background-color: greenyellow!important;
 		}
-		
-		.ml {
-		    background-color: red;
+		/*置忙  */
+		.ml { 
+		    background-color: red!important;
 		}
-		
+		/* 空闲 */
 		.kx {
-		    background-color: #55aa7f
+		    background-color: #55aa7f!important
 			}
+		/* 振铃 */
 		.zl {
-		    background-color: #00ffff
+		    background-color: #00ffff!important
 		}
 		
 		.qc {
-              background-color: #00ffff
+              background-color: #00ffff!important
 		}
-		
+		/* 离线 */
 		.lx {
-		  background-color: #555500
+		  background-color: darkgray!important
 		}
-		
+		/* 化后 */
 		.hh {
-		      background-color: #ff55ff
+		      background-color: #ff55ff!important
+		}
+		.dark{
+			background-color: darkgray!important;
 		}
 		/*坐席监控*/
 		
@@ -251,39 +255,39 @@
 		
 		.zx {
 		    /*background: #989898;*/
-		    background: #61b960;
+		    	background-color: #61b960!important;
 		}
 		
 		.jt {
-		    background: #5ed7b7;
+		    	background-color: #5ed7b7!important;
 		}
 		
 		.dj {
-		    background: #bed75b;
+		    	background-color: #bed75b!important;
 		}
 		
 		.qca {
-		    background: #d75e7c;
+		    	background-color: #d75e7c!important;
 		}
 		
 		.lj {
-		    background: #5daed8;
+		    	background-color: #5daed8!important;
 		}
 		
 		.qc {
-		    background: #d8988f;
+		    	background-color: #d8988f!important;
 		}
 		
 		.kqc {
-		    background: #44af3c;
+		    	background-color: #44af3c!important;
 		}
 		
 		.jqc {
-		    background: #d91e06;
+		    	background-color: #d91e06!important;
 		}
 		
 		.dis {
-		    background: #989898;
+		    	background-color: #989898!important;
 		}
 		
 		.users{
@@ -366,7 +370,7 @@
 					<li class="touxiang">
 						<ol class="tx">
 							<li class="person">
-								<span class="yuan_one"></span>
+								<span class="yuan_one qc"></span>
 								<span class="yuan_two"></span>
 							</li>
 							<li class="userid">8082</li>

WebChart/css/index.css

@@ -247,6 +247,7 @@ a {
 	float: left;
 	box-sizing: border-box;
 	padding-top: 140px;
+	margin-right: 10px;
 }
 
 .slide_left,
@@ -270,7 +271,7 @@ a {
 .orderStatistic>.orderCon_left {
 	box-sizing: border-box;
 	padding-left: 120px;
-	margin-top: 20px;
+	margin-top: 60px;
 }
 
 .orderStatistic>div>ul li {
@@ -288,8 +289,16 @@ a {
 	display: inline-block;
 	vertical-align: middle;
 }
-
-.orderli:nth-child(n+6) {
+.right_box{
+	overflow-y: scroll;
+	margin-top: 60px;
+	height: 620px;
+	margin-right: 25px;
+}
+.right_box::-webkit-scrollbar {
+display: none;
+}
+/* .orderli:nth-child(n+6) {
 	position: absolute !important;
 	right: 125px !important;
 }
@@ -313,7 +322,7 @@ a {
 .orderli:nth-child(10) {
 	top: 660px !important;
 }
-
+ */
 .slideCon_bg>div>ul li .num_word {
 	display: inline-block;
 	vertical-align: middle;

WebChart/css/main.css

@@ -107,13 +107,13 @@ p {
 }
 .map_bg{
 	width: 60%;
-	    margin: -215px 0px 0px 190px;
+	    margin: -250px 0px 0px 190px;
 }
 #radarBox{
 	width: 170px!important;
 	height: 170px!important;
 	    margin-left: -86px;
-	    top: 4px;
+	    top: -13px;
 }
 .radar{
 	width: 150px!important;

WebChart/detail.html

@@ -125,6 +125,11 @@
 			display: block;
 			height: 170px;
 		}
+		.onewrap{
+			height: 820px;
+			/* overflow: hidden; */
+			overflow-y: scroll;
+		}
 		</style>
 	</head>
 
@@ -142,7 +147,7 @@
 		<!-- <div class="wrap"> -->
 			<div class="boxwrap">
 					<!--第一屏  工单统计-->
-						<div class="slideCon_bg_block orderStatistic slideCon_bg clearfix" >
+						<div class=" slideCon_bg_block orderStatistic slideCon_bg clearfix" >
 							<p class="slide_title slide_title1"></p>
 							<!--<div class="timeWrap twotimeWarp firstPos">
 								<div class="time_box pull-right form-inline">
@@ -175,6 +180,20 @@
 									<li class="orderli">
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
+											<span>龙安区</span>
+											<span class="LAQ_num">0</span>
+										</p>
+									</li>
+									<li class="orderli">
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>安阳县</span>
+											<span class="AYX_num">0</span>
+										</p>
+									</li>
+									<!-- <li class="orderli">
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
 											<span>殷都区</span>
 											<span class="YDQ_num">0</span>
 										</p>
@@ -224,7 +243,7 @@
 											<span class="LZS_num">0</span>
 										</p>
 									</li>
-								</ul>
+								</ul> -->
 							</div>
 							
 							<div class="orderCon_middle slide_middle_first">
@@ -379,21 +398,21 @@
 						
 							<div class="orderCon_right slide_right">
 								<div class="timeWrap">
-									<div class="time_box pull-right form-inline"style="margin:0px 60px 0 0;">
+									<div class="time_box pull-right form-inline"style="margin:10px 75px 0 0;">
 										日期<input type="text" id="time1" class="times" />
 										<!-- <img src="img/rili.png" class="data-input-icon1" /> -->
 									</div>
 								</div>
-								<!-- <ul id="right_ri">
+								<ul id="right_ri" class="right_box" >
 									
-									<li>
+									<li class="orderli">
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
 											<span>安阳县</span>
 											<span class="AYX_num">0</span>
 										</p>
 									</li>
-									<li>
+									<li class="orderli">
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
 											<span>汤阴县</span>
@@ -401,7 +420,7 @@
 										</p>
 									</li>
 									
-									<li>
+									<li class="orderli">
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
 											<span>内黄县</span>
@@ -416,7 +435,7 @@
 										</p>
 									</li>
 									
-									<li>
+								<li class="orderli">
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
 											<span>林州市</span>
@@ -424,7 +443,7 @@
 										</p>
 									</li>
 									
-								</ul> -->
+								</ul>
 							</div>
 						</div>
 				
@@ -703,7 +722,7 @@
 		<script src="plugins/numbergd/index.js"></script>
 		<script src="js/tagcloud.js"></script>
 		<script src="js/ScrollDiv.js"></script>
-		<script src="js/index.js"></script>
+		<script src="js/detail.js"></script>
 			<!-- <script src="js/complaintsReport.js"></script>
 		<script src="js/TelephoneDetails.js" type="text/javascript" charset="utf-8"></script>
 		<script src="js/receiptDepartment.js" type="text/javascript" charset="utf-8"></script>

WebChart/js/TelephoneDetails.js

@@ -1,5 +1,18 @@
 	var areaOneVal = helper.cookies.get("areaOneVal");
 	var areaOneText = helper.cookies.get("areaOneText");
+	// 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
+	WEB_SOCKET_SWF_LOCATION = "./js/websocket/WebSocketMain.swf";
+	// 开启flash的websocket debug
+	WEB_SOCKET_DEBUG = true;
+	var ws, n = 0,
+		timer;
+	var lockReconnect = false; //避免重复连接
+	var obj = {};
+	var Statess;
+	var cls = 0;
+	var lasttime = new Date().getTime();
+	var cons;
+	var person='';
 	if (areaOneVal) {
 		var areaOneVal = helper.cookies.get("areaOneVal");
 		
@@ -7,7 +20,377 @@
 		var areaOneVal="sqs12345"
 		
 	}
+	//创建scoket连接
+	function createWebSocket() {
+	    try {
+	       
+	        Connect();
+	    } catch (e) {
+	        reconnect();
+	    }
+	}
+	//连接
+	function Connect() {
+		// debugger
+	    ws = new WebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
+	    ws.onopen = function () {
+	        console.log(new Date() + "    " + "建立连接");
+	        //心跳检测重置
+	        heartCheck.reset().start();
+	        cls = 0;
+	        // $(".Login").addClass("active");
+	        lasttime = new Date().getTime();
+			
+	     join()
+		 SayBusy()
+	        //自动签入
+	        // if ($.cookie("socket_state") != null) {
+	            // SetLogin($.cookie("socket_state"));
+	        // }
+	        //$(".hwzt").text('连接成功！');
+	    };
+	    //接收到消息的回调方法
+	    ws.onmessage = function (evt) {
+	        //如果获取到消息，心跳检测重置
+	        //拿到任何消息都说明当前连接是正常的
+	        heartCheck.reset().start();
+	        var myDate = new Date();
+	        console.log(myDate + "  receive  " + evt.data);
+	        var data = JSON.parse(evt.data)[0];
+	        if (data) {
+	            var rlt = data.Result;
+				  var type = data.Type;
+	            if (rlt == true) {
+	              
+	                switch (type.toLowerCase()) {
+	                    //case "heart": HeartBack(); break;//心跳
+	                    case "login":
+	                        LoginBack();
+	                        break; //签入
+	                  // case "logout":
+	                  //     LogoutBack();
+	                  //     break; //签出
+	                  // case "dropcall":
+	                  //     DropCallBack();
+	                  //     break; //挂断
+	                  case "makecall":
+	                      MakeCallBack();
+	                      break; //外呼
+	                  case "setstate":
+	                      SetState(data);
+	                      break; //置忙置闲
+	                      //case "saybusy": SayBusyBack(data); break;
+	                      //case "sayfree": SayFreeBack(data); break;
+	                  case "meeting":
+	                      MeetingBack();
+	                      break; //多方通话
+	                  case "transfer":
+	                      TransferBack();
+	                      break; //转移
+	                  case "hold":
+	                      HoldBack();
+	                      break; //保持
+	                  case "retrieve":
+	                      RetrieveBack();
+	                      break; //接回
+	                  // case "incoming":
+	                  //     IncomingBack(data);
+	                  //     break; //来电
+	                  case "subscribe":
+	                      SubScribeBack();
+	                      break; //监测
+	                  case "subscribecancel":
+	                      SubScribeCancelBack();
+	                      break; //停止监测
+	                  case "agentstate":
+	                      AgentStateBack(data);
+	                      break; //坐席状态
+	                  case "linestate":
+	                      LineStateBack(data);
+	                      break; //线路状态
+	                  case "motorsetstate":
+	                      SayFreeBack();
+	                      break; //班长置闲
+	                  // case "linestateagent":
+	                  //     LineStateAgentBack(data);
+	                  //     break; //线路状态通知
+	                  case "agentstateagent":
+	                      AgentStateAgentBack(data);
+	                      break; //坐席状态通知
+	                  //case "callid":
+	                  //    CallIDBack(data);
+	                  //    break; //获取callid
+	                  //case "recordpath":
+	                  //    RecordPathBack(data);
+	                  //    break; //录音返回
+	                  case "getagentlist":
+	                      GetAgentListBack(data);
+	                      break;//在线坐席信息
+	                  case "confirmtransfer":
+	                      ConfirmTransfer(data);
+	                      break;//确认转移 取消转移
+	                  case "consult":
+	                      ConsultationCall();
+	                      break;//协商呼叫
+	                
+	                }
+	            } else {
+	                if (rlt == false) {
+	                    //layer.confirm('操作失败！', {
+	                    //    btn: ['确定'] 
+	                    //});
+	                    $(".hwzt").text('操作失败！');
+	                } else {
+	                    $(".hwzt").text(rlt);
+	                    //layer.confirm(rlt, {
+	                    //    btn: ['确定']
+	                    //});
+						  if(type.toLowerCase()=='waitcount') {
+							   backstageQueue(data);
+							  }
+	                }
+	            }
+	        }
+	    };
+	    
+	    //连接关闭的回调方法
+	    ws.onclose = function (evt) {
+	        if (cls == 0) {
+	            cls = 1;
+	            //console.log("连接关闭！");
+	            //layer.confirm('连接关闭！', {
+	            //    btn: ['确定']
+	            //});
+	            $(".hwzt").text('连接关闭！');
+	            $("#top-search li i").removeClass("active");
+	            reconnect();
+	        }
+	    };
+	    //连接发生错误的回调方法
+	    ws.onerror = function (evt) {
+	        //产生异常
+	        $(".hwzt").text('连接出现异常！');
+	        console.log(ws);
+	        if (ws == null || ws.readyState != ws.OPEN) {
+	            console.log(new Date() + "开始重连");
+	            reconnect();
+	        }
+	
+	    };
+	}
+	//重连
+	function reconnect() {
+		
+	    if (lockReconnect) return;
+	    lockReconnect = true;
+	    //没连接上会一直重连，设置延迟避免请求过多
+	    setTimeout(function () {
+	        console.log(new Date() + "    " + "重连中……");
+	        createWebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
+	        lockReconnect = false;
+			SayBusy()
+	    }, 2000);
+	}
+	
+	//发送
+	function Send() {
+	    if (ws.readyState != ws.OPEN) {
+	        reconnect();
+	    }
+	    if (ws.readyState == ws.OPEN) {
+	        console.log(new Date() + "  send  " + JSON.stringify(obj));
+	        ws.send(JSON.stringify(obj));
+	    }
+	}
+	//心跳检测
+	var heartCheck = {
+	    timeout: 25000, //25秒
+	    timeoutObj: null,
+	    serverTimeoutObj: null,
+	    reset: function () {
+	        clearTimeout(this.timeoutObj);
+	        clearTimeout(this.serverTimeoutObj);
+	        return this;
+	    },
+	    start: function () {
+	        var self = this;
+	        this.timeoutObj = setTimeout(function () {
+	            //这里发送一个心跳，后端收到后，返回一个心跳消息，
+	            //onmessage拿到返回的心跳就说明连接正常
+	            obj.Type = "Heart";
+	            Send();
+	            self.serverTimeoutObj = setTimeout(function () { //如果超过一定时间还没重置，说明后端主动断开了
+	                ws.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+	            }, self.timeout)
+	        }, this.timeout)
+	    }
+	}
+	// 签入
+	function SayBusy() {
+		obj.Type = "SayBusy";
+		Send();
+		console.log('置忙')
+	}
+	
+	//签入
+	function LoginBack() {
+	    
+	  obj.Type = "SayBusy";
+	  Send();
+	  console.log('置忙')
+	}
+	// 点击签入
+	function join(){
+	            obj.Type ='Login',
+		        obj.AgentID='9898',
+		        obj.AgentExten='1015',
+		        obj.AgentType='0',
+				obj.AgentGroup='364'
+		       
+		      
+			  // console.log(scoketDatas)
+		      Send()
+	}
+	//监测
+	function SubScribeBack() {
+	    var obj = $("iframe:visible")
+	    if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
+	        window.frames[obj.attr("name")].Start();
+	    }
+	    if (obj.attr("data-id") == "./TelCall/zxKong.html") {
+	        window.frames[obj.attr("name")].Start();
+	    }
+	}
+	//取消监测
+	function SubScribeCancelBack() {
+	    // var obj = $("iframe:visible")
+	    // if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
+	    //     window.frames[obj.attr("name")].Stop();
+	    // }
+	    // if (obj.attr("data-id") == "./TelCall/zxKong.html") {
+	    //     window.frames[obj.attr("name")].Stop();
+	    // }
+		$('.yuan_one').addClass("lx")
+		$('.yuan_two').addClass("lx")
+	}
+	//班长监测返回状态
+	//坐席状态
+	
+	function AgentStateBack(data) {
+		$('.yuan_one').removeClass("lx")
+		$('.yuan_two').removeClass("lx")
+		$(cons).each(function (i, n) {
+			if(n.F_UserCode==data.AgentID){
+				if(data.State=='0'){
+					$('.yuan_one').eq(i).addClass("lx")
+					$('.yuan_two').eq(i).addClass("lx")
+				}else if(data.State=='2'){
+					$('.yuan_one').eq(i).addClass("kx")
+					$('.yuan_two').eq(i).addClass("kx")
+				}else if(data.State=='3'){
+					$('.yuan_one').eq(i).addClass("hc")
+					$('.yuan_two').eq(i).addClass("hc")
+				}else if(data.State=='4'){
+					$('.yuan_one').eq(i).addClass("hh")
+					$('.yuan_two').eq(i).addClass("hh")
+				}else if(data.State=='5'){
+					$('.yuan_one').eq(i).addClass("ml")
+					$('.yuan_two').eq(i).addClass("ml")
+				}else if(data.State=='6'){
+					$('.yuan_one').eq(i).addClass("zl")
+					$('.yuan_two').eq(i).addClass("zl")
+				}
+				
+			}
+			})
+	    // var obj = $("iframe:visible")
+	    // if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
+	    //     window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
+	    // }
+	    // if (obj.attr("data-id") == "./TelCall/zxKong.html") {
+	    //     window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
+	    // }
+	}
+	//线路状态
+	function LineStateBack(data) {
+	    var obj = $("iframe:visible")
+	    if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
+	        window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
+	    }
+	    if (obj.attr("data-id") == "./TelCall/zxKong.html") {
+	        window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
+	    }
+	}
+	//后台排队
+	function backstageQueue(data) {
+		
+		person=data.WaitCount
+		console.log(person)
+	    // if (obj.attr("data-id") == "./widgets.html") {
+	    //     window.frames[obj.attr("name")].realTimeMonitorQueue(data.WaitCount);
+	    // }
+	}
+	//坐席状态通知
+	function AgentStateAgentBack(data) {
+	    var strr = '';
+	    console.log('坐席状态'+ data.State );
+	    switch (data.State+"") {
+	        case "0":
+	            strr = "离线";
+	            $(".zxzt").removeClass("br").removeClass("bl").removeClass("by");
+	            break; //离线
+	        case "1":
+	            break; //登录中
+	        case "2":
+	            strr = "空闲";
+	            $(".zxzt").removeClass("br").removeClass("by").addClass("bl");
+	            break; //空闲
+	        case "3":
+	            strr = "通话中";
+	            $(".zxzt").removeClass("bl").removeClass("by").addClass("br");
+	            break; //通话中
+	        case "4":
+	            strr = "话后处理中";
+	            $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
+	            break; //话后处理中
+	        case "5":
+	            strr = "忙碌";
+	            $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
+	            break; //小休
+	        case "6":
+	            strr = "振铃";
+	            break; //被请求
+	        case "7":
+	            strr = "注销";
+	            $(".zxzt").removeClass("br").removeClass("bl").removeClass("by");
+	            break; //注销
+	    }
+	
+	    $(".hxzt").text(strr);
+	}
+	
+	//置忙 置闲
+	function SetState(obj) {
+	    if (obj.State == '5') {
+	        $(".SayBusy").removeClass("active");
+	        $(".SayFree").addClass("active");
+	        $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
+	        $(".hwzt").text('忙碌');
+	        $("#isml").val(1);
+	        // SetStateCookie(1);
+	    }
+	    if (obj.State == '2') {
+	    	$(".SayBusy").addClass("active");
+	        $(".SayFree").removeClass("active");
+	        $(".zxzt").removeClass("br").removeClass("by").addClass("bl");
+	        $(".hwzt").text('空闲');
+	        $("#isml").val(0);
+	        // SetStateCookie(0);
+	    }
+	}
 	$(function() {
+		createWebSocket()
+		 SayBusy()
 		laydate.render({
 			elem: '#time1',
 			range: '~',
@@ -197,11 +580,10 @@
 			success: function(data) {
 				if(data.state.toLowerCase() == 'success') {
 					// 	   			layer.close(index);
-					var con = data.data;
-					console.log(con)
+					 cons = data.data;
 					$(".users").html('')
-						$(con).each(function(i, n) {
-						var str=' <li class="touxiang"><ol class="tx"><li class="person"><span class="yuan_one"></span><span class="yuan_two"></span></li><li class="userid">'+n.F_UserCode+'</li></ol></li>';
+						$(cons).each(function(i, n) {
+						var str=' <li class="touxiang"><ol class="tx"><li class="person"><span class="yuan_one "></span><span class="yuan_two"></span></li><li class="userid">'+n.F_UserCode+'</li></ol></li>';
 						    var a=$(str)
 						    a.appendTo($(".users"))
 								   })
@@ -212,7 +594,50 @@
 			
 		});
 	}
+	// 开始检测
+ $(".kqc").click(function () {
+                // if (!$(this).hasClass("dis")) {
 
+                    $(cons).each(function (i, n) {
+                       obj.Type = "SubScribe";
+                       obj.SubParmer = n.F_WorkNumber * 1;
+
+                       obj.SubType = "0";//根据工号订阅坐席状态
+                       Send();
+                       obj.SubType = "1";//根据工号订阅线路状态
+                       Send();
+                    })
+                    //top.obj.Type = "SubScribe";
+                    //top.obj.SubParmer = "8003";
+
+                    //top.obj.SubType = "0";//根据工号订阅坐席状态
+                    //top.Send();
+                    //top.obj.SubType = "1";//根据工号订阅线路状态
+                    //top.Send();
+                // }
+            })
+			
+			
+			//停止监测
+			$(".jqc").click(function () {
+			        //$(user).each(function (i, n) {
+			        //   obj.Type = "SubScribeCancel";
+			        //   obj.SubParmer = n.F_WorkNumber;
+			
+			        //   obj.SubType = "0";//根据工号取消订阅坐席状态
+			        //   Send();
+			        //   obj.SubType = "1";//根据工号取消订阅线路状态
+			        //   Send();
+			        //})
+			       obj.Type = "SubScribeCancel";
+			       obj.SubParmer = "-1";
+			
+			       obj.SubType = "0";//根据工号取消订阅坐席状态
+			       Send();
+			       obj.SubType = "1";//根据工号取消订阅线路状态
+			       Send();
+			    
+			})
 	//part 2
 	var phoneTimeCount = echarts.init(document.getElementById('phoneTimeCount'));
 	phoneTimeCount.setOption({
@@ -363,7 +788,7 @@
 		},
 		xAxis: {
 			name: '类型',
-			data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)"],
+			data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)","排队人数"],
 			axisLine: {
 				lineStyle: {
 					color: '#3061a2'
@@ -407,7 +832,7 @@
 					color: function(params) {
 						// build a color map as your need.
 						var colorList = [
-							'#368cab', '#54b793', '#4b6ab0', '#2531a9'
+							'#368cab', '#54b793', '#4b6ab0', '#2531a9','#a93d19'
 						];
 						return colorList[params.dataIndex]
 					}
@@ -442,9 +867,11 @@
 				if(data.state.toLowerCase() == "success") {
 					//					layer.close(index);
 					var con = data.data;
+					con.person=person
+					console.log(con)
 					todyPhoneCount.setOption({
 						series: [{
-							data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes]
+							data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes,con.person]
 						}]
 
 					})

WebChart/js/detail.js

@@ -0,0 +1,599 @@
+var newData = [] //数据倒序
+var floag = true
+
+// var areaOneVal = helper.cookies.get("areaOneVal");
+// var areaOneText = helper.cookies.get("areaOneText");
+// if (areaOneVal) {
+// 	var areaOneVal = helper.cookies.get("areaOneVal");
+
+// } else{
+// 	var areaOneVal="sqs12345"
+
+// }
+$(function() {
+
+	loginTimeLimit(); //登录
+
+	var mySwiper = new Swiper('.swiper-container', {
+		//		loop: true,
+		//		autoplay: {
+		//			delay: 60000,
+		//		},
+		pagination: { /* 分页器*/
+			el: '.swiper-pagination',
+			clickable: true,
+		},
+		navigation: {
+			nextEl: '.swiper-button-next',
+			prevEl: '.swiper-button-prev',
+		},
+		//				followFinger : false,
+		//				speed:800,
+		on: {
+			init: function() {
+				swiperAnimateCache(this); //隐藏动画元素 
+				swiperAnimate(this); //初始化完成开始动画
+			},
+			transitionEnd: function() {
+				swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
+
+			},
+		}
+
+	})
+	// 跳轉
+	$(".nav_middle").click(function() {
+		window.open('index.html', '_self')
+	})
+	$("#department").click(function() {
+		window.open('receiptDepartment.html', '_self')
+	})
+	$("#sourceChannel").click(function() {
+		window.open('sourceChannel.html', '_self')
+	})
+	$("#call").click(function() {
+		window.open('TelephoneDetails.html', '_self')
+	})
+	$("#complaint").click(function() {
+		window.open('complaintsReport.html', '_self')
+	})
+	// 選項卡
+	$(".smallimg").click(function() {
+		//获取点击的元素给其添加样式，讲其兄弟元素的样式移除
+		$(this).addClass("activeBox").siblings().removeClass("activeBox");
+		//获取选中元素的下标
+		var index = $(this).index();
+		$(".slideCon_bg").eq(index).addClass("slideCon_bg_block")
+			.siblings().removeClass("slideCon_bg_block");
+	});
+	Ajax();
+	deprtment(); // 第五屏部门下拉
+	laydate.render({
+		elem: '#time1',
+		range: '~',
+		format: 'yyyy-MM-dd',
+		theme: '#114a97',
+		done: function(value, date) {
+			oneScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1])
+		}
+	});
+	laydate.render({
+		elem: '#time2',
+		range: '~',
+		format: 'yyyy-MM-dd',
+		theme: '#114a97',
+		done: function(value, date) {
+			twoScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1], $(".areaTwo").val())
+			satisfaction(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1], $(".areaTwo").val())
+		}
+	});
+	laydate.render({
+		elem: '#time3',
+		format: 'yyyy-MM-dd',
+		theme: '#114a97',
+		done: function(value) {
+			threeScreen(value, $(".areaThree").val())
+		}
+	});
+	laydate.render({
+		elem: '#test6',
+		range: '~',
+		format: 'yyyy-MM-dd',
+		theme: '#114a97',
+		done: function(value, date) {
+			fiveScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1], $(".areaFive").val())
+		}
+	});
+})
+var cityObj = {
+	ele1: "sqs_count",
+	ele2: "syq_count",
+	ele3: "lyq_count",
+	ele4: "ycs_count",
+	ele5: "mqx_count",
+	ele6: "sx_count",
+	ele7: "nlx_count",
+	ele8: "zcx_count",
+	ele9: "ycx_count",
+	ele10: "xyx_count",
+	ele11: "cxyt_count",
+	ele12: "lhpz_count",
+	ele13: "saz_count",
+	ele14: "djbl_count"
+}
+var vars = {};
+getCountUp(cityObj)
+
+function getCountUp(obj1) {
+	var options = {
+		useEasing: true,
+		useGrouping: true,
+		separator: ',',
+		decimal: '.',
+	};
+	$.each(obj1, function(k, v) {
+		new CountUp(v, 0, 0, 0, 2, options).start()
+		vars[v] = new CountUp(v, 0, 0, 0, 2, options)
+	})
+}
+
+var myDate = new Date();
+
+function turn(aa) {
+	if (aa < 10) {
+		aa = "0" + aa;
+	}
+	return aa
+}
+// 第三屏 第四屏 发光外框 定时
+(function() {
+	var i = 0;
+	var length = $(".orderState_ul >li").length;
+	var j = 0;
+	var length_1 = $(".orderTtype_Con li").length;
+	setInterval(function() {
+		if (i == length) {
+			i = 0;
+			$(".orderState_ul >li").removeClass('active');
+		}
+		$(".orderState_ul >li").eq(i).addClass('active').siblings().removeClass('active');
+		if (i == 5) {
+			$(".orderState_ul >li").eq(4).removeClass('active');
+		}
+		i++;
+
+		if (j == length_1) {
+			j = 0;
+		}
+		$(".orderTtype_Con li").eq(j).addClass('active').siblings().removeClass('active');
+		j++;
+	}, 2000);
+})();
+//对数组进行排序
+function compare(property) {
+	return (firstobj, secondobj) => {
+		const firstValue = firstobj[property];
+		const secondValue = secondobj[property];
+		return secondValue - firstValue; //降序
+	};
+}
+//第一屏幕 开始
+function oneScreen(sd, ed) {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "/info/GetAreaCountByDateNew",
+		async: true,
+		dataType: 'json',
+		data: {
+			start: sd,
+			end: ed,
+		},
+		success: function(data) {
+			if (data.state.toLowerCase() == 'success') {
+				var con = data.data;
+				newData = con.sort(compare("SLCount"));
+				console.log(1)
+				$(newData).each(function(i, n) {
+					if (n.AreaName == '安阳市') {
+						n.AreaName = "市区"
+					}
+					// 	if(n.AreaName.indexOf('安阳市') != -1) {
+					// 		$(".AY_num").html(n.SLCount)
+					// 	}
+					// 	if(n.AreaName.indexOf('文峰区') != -1) {
+					// 		$(".WFQ_num").html(n.SLCount)
+					// 	}
+					// 	if(n.AreaName.indexOf('北关区') != -1) {
+					// 		$(".BGQ_num").html(n.SLCount)
+					// 	}
+					// 	if(n.AreaName.indexOf('殷都区') != -1) {
+					// 		$(".YDQ_num").html(n.SLCount)
+					// 	}
+					// 	if(n.AreaName.indexOf('龙安区') != -1) {
+					// 		$(".LAQ_num").html(n.SLCount)
+					// 	}
+					// 	if(n.AreaName.indexOf('安阳县') != -1) {
+					// 		$(".AYX_num").html(n.SLCount)
+					// 	}
+					// 	if(n.AreaName.indexOf('汤阴县') != -1) {
+					// 		$(".TYX_num").text(n.SLCount)
+					// 	}
+					// 	if(n.AreaName.indexOf('内黄县') != -1) {
+					// 		$(".NHX_num").html(n.SLCount)
+					// 	}
+					// 	if(n.AreaName.indexOf('滑县') != -1) {
+					// 		$(".HX_num").html(n.SLCount)
+					// 	}
+					// 	if(n.AreaName.indexOf('林州市') != -1) {
+					// 		$(".LZS_num").html(n.SLCount)
+					// 	}
+					if (floag == true) {
+						$("#det_ult").html('')
+						$(".right_box").html('')
+						$(newData).each(function(i, n) {
+							if (i < 5) {
+								var str = ' <li class="orderli"><img src="img/num_icon.png" alt="" /><p class="num_word"><span>' + n.AreaName +
+									'</span><span class="AY_num">' + n.SLCount + '</span></p></li>';
+								var a = $(str)
+								a.appendTo($("#det_ult"))
+							}
+							if (i >= 5) {
+								var str = ' <li class="orderli"><img src="img/num_icon.png" alt="" /><p class="num_word"><span>' + n.AreaName +
+									'</span><span class="AY_num">' + n.SLCount + '</span></p></li>';
+								var a = $(str)
+								a.appendTo($(".right_box"))
+							}
+						})
+
+						floag = false
+					}
+					if (n.AreaName.indexOf('总计') != -1) {
+						$(".allSLCount").html(n.SLCount); //受理量
+						$(".allJACount").html(n.JACount); //结案量
+						//$(".allJARate").html(n.JARate); //结案量
+						$(".allJARate").html("93%"); //结案量
+						$(".allMYRate").html('94.09%'); //满意度
+					}
+				})
+			}
+		}
+	});
+}
+
+function aa() {
+
+
+}
+//第二屏
+function twoScreen(start, end, areaTwoVal) {
+	//	if(!areaTwoVal) {
+	//		areaTwoVal = "sqs12345"
+	//	}
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "info/GetSourceByDateNew",
+		async: true,
+		dataType: 'json',
+		data: {
+			start: start,
+			end: end,
+			branchcode: areaTwoVal
+		},
+		success: function(data) {
+			if (data.state.toLowerCase() == 'success') {
+				//layer.close(index);
+				$('.orderSource ul li .rectangle').remove();
+				var con = data.data;
+				var obj = con[0];
+				var con_list = [];
+				con_list = con.shift();
+				con.splice(3, 0, obj);
+				var Percent;
+				$(con).each(function(i, n) {
+					// if(n.Source.indexOf('信箱') != -1) {
+					// 	n.Source = '市长信箱'
+					// }
+					// if(n.Source.indexOf('APP') != -1) {
+					// 	n.Source = 'APP'
+					// }
+					// if(n.Source.indexOf('政务') != -1) {
+					// 	n.Source = '政务网'
+					// }
+					var str = '<div class="source_kuang rectangle">' +
+						'<div class="pbout">' +
+						'<div class="percent_box">' +
+						'<div class="percent_out"></div>	' +
+						' <div class="percent_in"></div>' +
+						' <div class="percent_word"><p>' + n.Rate.split('%')[0] + '%' + '</p><p style="margin-top: 30px;">占总量</p>' +
+						'</div>' +
+						'</div>' +
+						'</div>' +
+						'<p class="num_word nw">' +
+						'<span>' + n.Source + '</span><span>' + n.Count + '</span>' +
+						'</p>' +
+						'</div>'
+					$('.orderSource ul li').eq(i).prepend(str)
+				})
+			}
+		}
+	});
+}
+
+//第三屏
+function threeScreen(sd, areaTwoVal) {
+	//alert(sd)
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "Info/GetTypeCountNew",
+		async: true,
+		dataType: 'json',
+		data: {
+			date: sd,
+			branchcode: areaTwoVal
+		},
+		success: function(data) {
+			if (data.state.toLowerCase() == 'success') {
+				$('.orderTtype_Con ul').html('');
+				// 	   			layer.close(index);
+				var newDatas = data.data;
+				var con = newDatas.sort(compare("TotalCount"))
+				var img_name = '';
+				$(con).each(function(i, n) {
+					if (n.TypeName.indexOf('咨询') != -1) {
+						img_name = 'order_ZX.png'
+					}
+					if (n.TypeName.indexOf('求助') != -1) {
+						img_name = 'order_QZ.png'
+					}
+					if (n.TypeName.indexOf('投诉') != -1) {
+						img_name = 'order_TS.png'
+					}
+					if (n.TypeName.indexOf('建议') != -1) {
+						img_name = 'order_JY.png'
+					}
+					if (n.TypeName.indexOf('表扬') != -1) {
+						img_name = 'order_BY.png'
+					}
+					if (n.TypeName.indexOf('其他') != -1) {
+						img_name = 'order_QT.png'
+					}
+					$('<li>' +
+						'<div class="typeWord">' + n.TypeName + '</div>' +
+						'<img src="img/' + img_name + '" alt="" />' +
+						'<p class="typeWord_line">数据展示</p>' +
+						'<p class="order_count">' + n.DayCount + '</p>' +
+						'<p class="typeWord_line">今日' + n.TypeName + '量</p>' +
+						'<p class="order_count">' + n.MonthCount + '</p>' +
+						'<p class="typeWord_line">本月' + n.TypeName + '量</p>' +
+						'<p class="order_count">' + n.TotalCount + '</p>' +
+						'<p class="typeWord_line">' + n.TypeName + '总量</p>' +
+						'<div class="persent_box">' +
+						'<div class="persent_kuang">' + n.Percent + '</div>' +
+						'</div>' +
+						'<p class="persent_word">总量占比</p>' +
+						'</li>').appendTo('.orderTtype_Con ul');
+
+				})
+			}
+		}
+	});
+}
+//第五屏js
+function fiveScreen(sd, ed, areaTwoVal) {
+	//		if(!sd){
+	//			sd="2019-11-01"
+	//		}if(!ed){
+	//			ed="2019-11-30"
+	//		}
+	keyWord(sd, ed, areaTwoVal);
+}
+$(".depart").change(function() {
+	keyWordDetail($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(
+		' ~ ')[1], $(".areaFive").val());
+})
+//	第二屏
+$(".areaTwo").change(function() {
+	var areaTwoVal = $(this).val();
+	twoScreen($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[
+		1], areaTwoVal);
+	satisfaction($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(
+		' ~ ')[1], areaTwoVal)
+});
+//第三屏
+$(".areaThree").change(function() {
+	var areaTwoVal = $(this).val();
+	threeScreen($('#time3').val(), areaTwoVal);
+});
+//第五屏
+$(".areaFive").change(function() {
+	var areaTwoVal = $(this).val();
+	fiveScreen($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(
+		' ~ ')[1], areaTwoVal);
+	deprtment()
+});
+//部门下拉框
+function deprtment() {
+	$.getJSON(huayi.config.callcenter_url + "info/GetDeptList", {
+			branchcode: $(".areaFive").val()
+		},
+		function(result) {
+			if (result.state.toLowerCase() == "success") {
+				goodslist = result.data;
+				$(".depart").empty();
+				$('<option value="">请选择部门</option>').appendTo($(".depart"));
+				$(goodslist).each(function(i, n) {
+					$('<option value="' + n.F_DeptId +
+						'">' + n.F_DeptName +
+						'</option>').appendTo($(".depart"));
+				})
+			}
+		});
+}
+//区县筛选
+//areaSelect ();
+function areaSelect() {
+	$.getJSON(huayi.config.callcenter_url + "CountyBranch/GetBranchListS", function(result) {
+		if (result.state.toLowerCase() == "success") {
+			goodslist = result.data;
+			//				第五屏
+			$(".areaFive").empty();
+			$(goodslist).each(function(i, n) {
+				$('<option value="' + n.F_Code +
+					'">' + n.F_Name +
+					'</option>').appendTo($(".areaFive"));
+			});
+			//第3屏
+			$(".areaThree").empty();
+			$(goodslist).each(function(i, n) {
+				$('<option value="' + n.F_Code +
+					'">' + n.F_Name +
+					'</option>').appendTo($(".areaThree"));
+			});
+			//第2屏
+			$(".areaTwo").empty();
+			$(goodslist).each(function(i, n) {
+				$('<option value="' + n.F_Code +
+					'">' + n.F_Name +
+					'</option>').appendTo($(".areaTwo"));
+			});
+		}
+	});
+}
+//	左侧关键词
+function keyWord(sd, ed, areaTwoVal) {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "info/GetKeyCountRankByDate",
+		async: true,
+		dataType: 'json',
+		data: {
+			start: sd,
+			end: ed,
+			branchcode: areaTwoVal
+		},
+		success: function(data) {
+			if (data.state.toLowerCase() == 'success') {
+				var con = data.data.reverse();
+				if (con.length > 0) {
+					//						$(".keyW_t").text(con[0].TypeName)
+					$('.tagcloud').html('');
+					$(con).each(function(k, j) {
+						if (k < 19) {
+							var strs = '<div index="' + j.Id + '" class="tagcloud_bj">' +
+								'<p class="tag_title">' + j.TypeName + '</p>' +
+								'<p class="imgs">' + j.Count + '</p>' +
+								'</div>'
+							$('.tagcloud').append(strs);
+						}
+					})
+					$(".tagcloud div:first-child").removeClass("tagcloud_bj");
+					$(".tagcloud div:first-child").addClass("tagcloud_bjShine");
+					keyWordDetail(sd, ed, areaTwoVal);
+				} else {
+					$('.tagcloud').html('');
+				}
+
+			}
+		}
+	});
+}
+
+//	右侧部门
+function keyWordDetail(sd, ed, areaTwoVal) {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "info/GetDeptKeyCountByDateNew",
+		async: true,
+		dataType: 'json',
+		data: {
+			start: sd,
+			end: ed,
+			branchcode: areaTwoVal,
+			deptid: $('.depart').val(),
+			keyid: $(".tagcloud_bjShine").eq(0).attr("index")
+		},
+		success: function(data) {
+			if (data.state.toLowerCase() == 'success') {
+				$('.scroll_table tbody').html('');
+				var con = data.data;
+				$(con).each(function(j, n) {
+					var rate = '';
+					if (n.rate) {
+						rate = n.rate;
+					}
+					var str = '<tr><td>' + n.deptname + '</td><td>' + n.acceptcount + '</td><td>' + rate + '</td></tr>'
+					$('.scroll_table tbody').append(str);
+				})
+				$(".scroll_table").Scroll({
+					line: 1,
+					speed: 500,
+					timer: 2000
+				});
+			}
+		}
+	});
+}
+$(".tagcloud").on("click", "div", function() {
+	$(".tagcloud div").addClass("tagcloud_bj");
+	$(".tagcloud div").removeClass("tagcloud_bjShine");
+	$(this).removeClass("tagcloud_bj");
+	$(this).addClass("tagcloud_bjShine");
+	keyWordDetail($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(
+		' ~ ')[1], $(".areaFive").val());
+});
+
+function Ajax() {
+
+	oneScreen($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[
+		1])
+	twoScreen($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[
+		1])
+	satisfaction($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(
+		' ~ ')[1])
+	threeScreen($('#time3').val(), $(".areaThree").val());
+	fiveScreen($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(' ~ ')[
+		1], $(".areaFive").val())
+
+	// //第五 屏  渠道来源
+	// var areaOneVal = helper.cookies.get("areaOneVal");
+	// var areaOneText = helper.cookies.get("areaOneText");
+	// partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[
+	// 	1], areaOneVal)
+
+
+	// // 接单 部门
+	// partTwo($('#phone_time').val() && $('#phone_time').val().split(' ~ ')[0], $('#phone_time').val() && $('#phone_time').val()
+	// 	.split(' ~ ')[1], areaOneVal);
+
+	// // 话务数量
+	// parthuawu($('#time3').val(), areaOneVal);
+
+	// // 投诉举报
+	// partcomplain($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(
+	// 	' ~ ')[1], areaOneVal)
+
+}
+
+
+function loginTimeLimit() {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "Login/GetAuAuthDate",
+		async: false,
+		success: function(res) {
+			var res = $.parseJSON(res)
+			if (res.state == "success") {} else {
+				layer.confirm(res.message, {
+					icon: 2,
+					btn: ['确定'],
+					yes: function(index, layero) {
+						$("#wrap").hide()
+						$(".timeLimit-wrapper").show()
+						$(".nav_middle ul a").attr('href', '#')
+						layer.close(index)
+					},
+				});
+			}
+		}
+	});
+}

WebChart/js/index.js

@@ -1,7 +1,18 @@
 
 var newData=[]  //数据倒序
 var floag=true
-
+WEB_SOCKET_SWF_LOCATION = "./js/websocket/WebSocketMain.swf";
+	// 开启flash的websocket debug
+	WEB_SOCKET_DEBUG = true;
+	var ws, n = 0,
+		timer;
+	var lockReconnect = false; //避免重复连接
+	var obj = {};
+	var Statess;
+	var cls = 0;
+	var lasttime = new Date().getTime();
+	var cons;
+	var person='';
 // var areaOneVal = helper.cookies.get("areaOneVal");
 // var areaOneText = helper.cookies.get("areaOneText");
 // if (areaOneVal) {
@@ -11,8 +22,377 @@ var floag=true
 // 	var areaOneVal="sqs12345"
 	
 // }
-$(function() {
+//创建scoket连接
+	function createWebSocket() {
+	    try {
+	       
+	        Connect();
+	    } catch (e) {
+	        reconnect();
+	    }
+	}
+	//连接
+	function Connect() {
+		// debugger
+	    ws = new WebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
+	    ws.onopen = function () {
+	        console.log(new Date() + "    " + "建立连接");
+	        //心跳检测重置
+	        heartCheck.reset().start();
+	        cls = 0;
+	        // $(".Login").addClass("active");
+	        lasttime = new Date().getTime();
+			
+	     join()
+		 SayBusy()
+	        //自动签入
+	        // if ($.cookie("socket_state") != null) {
+	            // SetLogin($.cookie("socket_state"));
+	        // }
+	        //$(".hwzt").text('连接成功！');
+	    };
+	    //接收到消息的回调方法
+	    ws.onmessage = function (evt) {
+	        //如果获取到消息，心跳检测重置
+	        //拿到任何消息都说明当前连接是正常的
+	        heartCheck.reset().start();
+	        var myDate = new Date();
+	        console.log(myDate + "  receive  " + evt.data);
+	        var data = JSON.parse(evt.data)[0];
+	        if (data) {
+	            var rlt = data.Result;
+				  var type = data.Type;
+	            if (rlt == true) {
+	              
+	                switch (type.toLowerCase()) {
+	                    //case "heart": HeartBack(); break;//心跳
+	                    case "login":
+	                        LoginBack();
+	                        break; //签入
+	                  // case "logout":
+	                  //     LogoutBack();
+	                  //     break; //签出
+	                  // case "dropcall":
+	                  //     DropCallBack();
+	                  //     break; //挂断
+	                  case "makecall":
+	                      MakeCallBack();
+	                      break; //外呼
+	                  case "setstate":
+	                      SetState(data);
+	                      break; //置忙置闲
+	                      //case "saybusy": SayBusyBack(data); break;
+	                      //case "sayfree": SayFreeBack(data); break;
+	                  case "meeting":
+	                      MeetingBack();
+	                      break; //多方通话
+	                  case "transfer":
+	                      TransferBack();
+	                      break; //转移
+	                  case "hold":
+	                      HoldBack();
+	                      break; //保持
+	                  case "retrieve":
+	                      RetrieveBack();
+	                      break; //接回
+	                  // case "incoming":
+	                  //     IncomingBack(data);
+	                  //     break; //来电
+	                  case "subscribe":
+	                      SubScribeBack();
+	                      break; //监测
+	                  case "subscribecancel":
+	                      SubScribeCancelBack();
+	                      break; //停止监测
+	                  case "agentstate":
+	                      AgentStateBack(data);
+	                      break; //坐席状态
+	                  case "linestate":
+	                      LineStateBack(data);
+	                      break; //线路状态
+	                  case "motorsetstate":
+	                      SayFreeBack();
+	                      break; //班长置闲
+	                  // case "linestateagent":
+	                  //     LineStateAgentBack(data);
+	                  //     break; //线路状态通知
+	                  case "agentstateagent":
+	                      AgentStateAgentBack(data);
+	                      break; //坐席状态通知
+	                  //case "callid":
+	                  //    CallIDBack(data);
+	                  //    break; //获取callid
+	                  //case "recordpath":
+	                  //    RecordPathBack(data);
+	                  //    break; //录音返回
+	                  case "getagentlist":
+	                      GetAgentListBack(data);
+	                      break;//在线坐席信息
+	                  case "confirmtransfer":
+	                      ConfirmTransfer(data);
+	                      break;//确认转移 取消转移
+	                  case "consult":
+	                      ConsultationCall();
+	                      break;//协商呼叫
+	                
+	                }
+	            } else {
+	                if (rlt == false) {
+	                    //layer.confirm('操作失败！', {
+	                    //    btn: ['确定'] 
+	                    //});
+	                    $(".hwzt").text('操作失败！');
+	                } else {
+	                    $(".hwzt").text(rlt);
+	                    //layer.confirm(rlt, {
+	                    //    btn: ['确定']
+	                    //});
+						  if(type.toLowerCase()=='waitcount') {
+							   backstageQueue(data);
+							  }
+	                }
+	            }
+	        }
+	    };
+	    
+	    //连接关闭的回调方法
+	    ws.onclose = function (evt) {
+	        if (cls == 0) {
+	            cls = 1;
+	            //console.log("连接关闭！");
+	            //layer.confirm('连接关闭！', {
+	            //    btn: ['确定']
+	            //});
+	            $(".hwzt").text('连接关闭！');
+	            $("#top-search li i").removeClass("active");
+	            reconnect();
+	        }
+	    };
+	    //连接发生错误的回调方法
+	    ws.onerror = function (evt) {
+	        //产生异常
+	        $(".hwzt").text('连接出现异常！');
+	        console.log(ws);
+	        if (ws == null || ws.readyState != ws.OPEN) {
+	            console.log(new Date() + "开始重连");
+	            reconnect();
+	        }
+	
+	    };
+	}
+	//重连
+	function reconnect() {
+		
+	    if (lockReconnect) return;
+	    lockReconnect = true;
+	    //没连接上会一直重连，设置延迟避免请求过多
+	    setTimeout(function () {
+	        console.log(new Date() + "    " + "重连中……");
+	        createWebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
+	        lockReconnect = false;
+			SayBusy()
+	    }, 2000);
+	}
+	
+	//发送
+	function Send() {
+	    if (ws.readyState != ws.OPEN) {
+	        reconnect();
+	    }
+	    if (ws.readyState == ws.OPEN) {
+	        console.log(new Date() + "  send  " + JSON.stringify(obj));
+	        ws.send(JSON.stringify(obj));
+	    }
+	}
+	//心跳检测
+	var heartCheck = {
+	    timeout: 25000, //25秒
+	    timeoutObj: null,
+	    serverTimeoutObj: null,
+	    reset: function () {
+	        clearTimeout(this.timeoutObj);
+	        clearTimeout(this.serverTimeoutObj);
+	        return this;
+	    },
+	    start: function () {
+	        var self = this;
+	        this.timeoutObj = setTimeout(function () {
+	            //这里发送一个心跳，后端收到后，返回一个心跳消息，
+	            //onmessage拿到返回的心跳就说明连接正常
+	            obj.Type = "Heart";
+	            Send();
+	            self.serverTimeoutObj = setTimeout(function () { //如果超过一定时间还没重置，说明后端主动断开了
+	                ws.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+	            }, self.timeout)
+	        }, this.timeout)
+	    }
+	}
+	// 签入
+	function SayBusy() {
+		obj.Type = "SayBusy";
+		Send();
+		console.log('置忙')
+	}
+	
+	//签入
+	function LoginBack() {
+	    
+	  obj.Type = "SayBusy";
+	  Send();
+	  console.log('置忙')
+	}
+	// 点击签入
+	function join(){
+	            obj.Type ='Login',
+		        obj.AgentID='9898',
+		        obj.AgentExten='1015',
+		        obj.AgentType='0',
+				obj.AgentGroup='364'
+		       
+		      
+			  // console.log(scoketDatas)
+		      Send()
+	}
+	//监测
+	function SubScribeBack() {
+	    var obj = $("iframe:visible")
+	    if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
+	        window.frames[obj.attr("name")].Start();
+	    }
+	    if (obj.attr("data-id") == "./TelCall/zxKong.html") {
+	        window.frames[obj.attr("name")].Start();
+	    }
+	}
+	//取消监测
+	function SubScribeCancelBack() {
+	    // var obj = $("iframe:visible")
+	    // if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
+	    //     window.frames[obj.attr("name")].Stop();
+	    // }
+	    // if (obj.attr("data-id") == "./TelCall/zxKong.html") {
+	    //     window.frames[obj.attr("name")].Stop();
+	    // }
+		$('.yuan_one').addClass("lx")
+		$('.yuan_two').addClass("lx")
+	}
+	//班长监测返回状态
+	//坐席状态
+	
+	function AgentStateBack(data) {
+		$('.yuan_one').removeClass("lx")
+		$('.yuan_two').removeClass("lx")
+		$(cons).each(function (i, n) {
+			if(n.F_UserCode==data.AgentID){
+				if(data.State=='0'){
+					$('.yuan_one').eq(i).addClass("lx")
+					$('.yuan_two').eq(i).addClass("lx")
+				}else if(data.State=='2'){
+					$('.yuan_one').eq(i).addClass("kx")
+					$('.yuan_two').eq(i).addClass("kx")
+				}else if(data.State=='3'){
+					$('.yuan_one').eq(i).addClass("hc")
+					$('.yuan_two').eq(i).addClass("hc")
+				}else if(data.State=='4'){
+					$('.yuan_one').eq(i).addClass("hh")
+					$('.yuan_two').eq(i).addClass("hh")
+				}else if(data.State=='5'){
+					$('.yuan_one').eq(i).addClass("ml")
+					$('.yuan_two').eq(i).addClass("ml")
+				}else if(data.State=='6'){
+					$('.yuan_one').eq(i).addClass("zl")
+					$('.yuan_two').eq(i).addClass("zl")
+				}
+				
+			}
+			})
+	    // var obj = $("iframe:visible")
+	    // if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
+	    //     window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
+	    // }
+	    // if (obj.attr("data-id") == "./TelCall/zxKong.html") {
+	    //     window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
+	    // }
+	}
+	//线路状态
+	function LineStateBack(data) {
+	    var obj = $("iframe:visible")
+	    if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
+	        window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
+	    }
+	    if (obj.attr("data-id") == "./TelCall/zxKong.html") {
+	        window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
+	    }
+	}
+	//后台排队
+	function backstageQueue(data) {
+		
+		person=data.WaitCount
+		console.log(person)
+	    // if (obj.attr("data-id") == "./widgets.html") {
+	    //     window.frames[obj.attr("name")].realTimeMonitorQueue(data.WaitCount);
+	    // }
+	}
+	//坐席状态通知
+	function AgentStateAgentBack(data) {
+	    var strr = '';
+	    console.log('坐席状态'+ data.State );
+	    switch (data.State+"") {
+	        case "0":
+	            strr = "离线";
+	            $(".zxzt").removeClass("br").removeClass("bl").removeClass("by");
+	            break; //离线
+	        case "1":
+	            break; //登录中
+	        case "2":
+	            strr = "空闲";
+	            $(".zxzt").removeClass("br").removeClass("by").addClass("bl");
+	            break; //空闲
+	        case "3":
+	            strr = "通话中";
+	            $(".zxzt").removeClass("bl").removeClass("by").addClass("br");
+	            break; //通话中
+	        case "4":
+	            strr = "话后处理中";
+	            $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
+	            break; //话后处理中
+	        case "5":
+	            strr = "忙碌";
+	            $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
+	            break; //小休
+	        case "6":
+	            strr = "振铃";
+	            break; //被请求
+	        case "7":
+	            strr = "注销";
+	            $(".zxzt").removeClass("br").removeClass("bl").removeClass("by");
+	            break; //注销
+	    }
+	
+	    $(".hxzt").text(strr);
+	}
 	
+	//置忙 置闲
+	function SetState(obj) {
+	    if (obj.State == '5') {
+	        $(".SayBusy").removeClass("active");
+	        $(".SayFree").addClass("active");
+	        $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
+	        $(".hwzt").text('忙碌');
+	        $("#isml").val(1);
+	        // SetStateCookie(1);
+	    }
+	    if (obj.State == '2') {
+	    	$(".SayBusy").addClass("active");
+	        $(".SayFree").removeClass("active");
+	        $(".zxzt").removeClass("br").removeClass("by").addClass("bl");
+	        $(".hwzt").text('空闲');
+	        $("#isml").val(0);
+	        // SetStateCookie(0);
+	    }
+	}
+$(function() {
+	createWebSocket()
+	 SayBusy()
 	loginTimeLimit(); //登录
 
 	var mySwiper = new Swiper('.swiper-container', {
@@ -232,9 +612,11 @@ function turn(aa) {
 					if(floag==true){
 						$("#det_ult").html('')
 						$(newData).each(function(i, n) {
-						var str=' <li class="orderli"><img src="img/num_icon.png" alt="" /><p class="num_word"><span>'+n.AreaName+'</span><span class="AY_num">'+n.SLCount+'</span></p></li>';
-						    var a=$(str)
-						    a.appendTo($("#det_ult"))
+						if(i<10){
+							var str=' <li class="orderli"><img src="img/num_icon.png" alt="" /><p class="num_word"><span>'+n.AreaName+'</span><span class="AY_num">'+n.SLCount+'</span></p></li>';
+							    var a=$(str)
+							    a.appendTo($("#det_ult"))
+						}
 								   })
 									   floag=false
 					}
@@ -785,7 +1167,7 @@ function partTwo(starts, ends, areaOneVal) {
 
 		xAxis: {
 			name: '类型',
-			data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)"],
+			data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)","排队人数"],
 			axisLine: {
 				lineStyle: {
 					color: '#3061a2'
@@ -829,7 +1211,7 @@ function partTwo(starts, ends, areaOneVal) {
 					color: function(params) {
 						// build a color map as your need.
 						var colorList = [
-							'#368cab', '#54b793', '#4b6ab0', '#2531a9'
+							'#368cab', '#54b793', '#4b6ab0', '#2531a9','#a93d19'
 						];
 						return colorList[params.dataIndex]
 					}
@@ -864,9 +1246,10 @@ function partTwo(starts, ends, areaOneVal) {
 				if(data.state.toLowerCase() == "success") {
 					//					layer.close(index);
 					var con = data.data;
+					con.person=person
 					todyPhoneCount.setOption({
 						series: [{
-							data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes]
+							data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes,con.person]
 						}]
 
 					})

WebChart/js/map1.js

@@ -24,7 +24,7 @@ window.onload = function() {
 	});
 	
 	$("#myMap").bind("contextmenu", function () {
-	    //alert("点击了右键");
+	    //alert("点击了右键"); 
 	    $(".map_bg").fadeIn();
 	    $("#mapSj").hide();
 	    //return false;
@@ -44,7 +44,7 @@ window.onload = function() {
 		myGeo.getPoint(address, function(point) {
 			if(point) {
 				//定位到区 ，级别显示12
-				map.centerAndZoom(point, 12);
+				map.centerAndZoom(point, 13);
 				map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
 				//删除选点
 				map.clearOverlays();
@@ -126,7 +126,7 @@ window.onload = function() {
 			myGeo.getPoint(address, function(point) {
 				if(point) {
 					//定位到区 ，级别显示12
-					map.centerAndZoom(point, 12);
+					map.centerAndZoom(point, 13);
 					//删除选点
 					map.clearOverlays();
 					throungh();
@@ -248,28 +248,28 @@ window.onload = function() {
 				map.setZoom(18);
 			}
 			//解析地址
-			// var rsaddress = rs.address;
-			// console.log(rs);
-			// console.log(rs.addressComponents.district)
-			// if (rs.addressComponents.district=="睢阳区") {
+			var rsaddress = rs.address;
+			console.log(rs);
+			console.log(rs.addressComponents.district)
+			// if (rs.addressComponents.district=="汤阴县") {
 			// 	$('#sourcearea').val("2");
-			// }else if (rs.addressComponents.district=="梁园区"){
+			// }else if (rs.addressComponents.district=="龙安区"){
 			// 	$('#sourcearea').val("3");
-			// }else if (rs.addressComponents.district=="永城市"){
+			// }else if (rs.addressComponents.district=="滑县"){
 			// 	$('#sourcearea').val("4");
-			// }else if (rs.addressComponents.district=="民权县"){
+			// }else if (rs.addressComponents.district=="北关区"){
 			// 	$('#sourcearea').val("5");
 			// }else if (rs.addressComponents.district=="林州市"){
 			// 	$('#sourcearea').val("6");
-			// }else if (rs.addressComponents.district=="宁陵县"){
+			// }else if (rs.addressComponents.district=="殷都区"){
 			// 	$('#sourcearea').val("7");
-			// }else if (rs.addressComponents.district=="柘城县"){
+			// }else if (rs.addressComponents.district=="高新区"){
 			// 	$('#sourcearea').val("8");
-			// }else if (rs.addressComponents.district=="虞城县"){
+			// }else if (rs.addressComponents.district=="安阳县"){
 			// 	$('#sourcearea').val("9");
-			// }else if (rs.addressComponents.district=="夏邑县"){
+			// }else if (rs.addressComponents.district=="内黄县"){
 			// 	$('#sourcearea').val("10");
-			// }else if (rs.addressComponents.district=="城乡一体化示范区"){
+			// }else if (rs.addressComponents.district=="文峰区"){
 			// 	$('#sourcearea').val("11");
 			// }
 			$('#sourcearea').find("option:selected").text(rs.addressComponents.district);

WebChart/js/websocket/web_socket.js

@@ -0,0 +1,398 @@
+// Copyright: Hiroshi Ichikawa <http://gimite.net/en/>
+// License: New BSD License
+// Reference: http://dev.w3.org/html5/websockets/
+// Reference: http://tools.ietf.org/html/rfc6455
+
+(function() {
+  
+  if (window.WEB_SOCKET_FORCE_FLASH) {
+    // Keeps going.
+  } else if (window.WebSocket) {
+    return;
+  } else if (window.MozWebSocket) {
+    // Firefox.
+    window.WebSocket = MozWebSocket;
+    return;
+  }
+  
+  var logger;
+  if (window.WEB_SOCKET_LOGGER) {
+    logger = WEB_SOCKET_LOGGER;
+  } else if (window.console && window.console.log && window.console.error) {
+    // In some environment, console is defined but console.log or console.error is missing.
+    logger = window.console;
+  } else {
+    logger = {log: function(){ }, error: function(){ }};
+  }
+  
+  // swfobject.hasFlashPlayerVersion("10.0.0") doesn't work with Gnash.
+  if (swfobject.getFlashPlayerVersion().major < 10) {
+    logger.error("Flash Player >= 10.0.0 is required.");
+    return;
+  }
+  if (location.protocol == "file:") {
+    logger.error(
+      "WARNING: web-socket-js doesn't work in file:///... URL " +
+      "unless you set Flash Security Settings properly. " +
+      "Open the page via Web server i.e. http://...");
+  }
+
+  /**
+   * Our own implementation of WebSocket class using Flash.
+   * @param {string} url
+   * @param {array or string} protocols
+   * @param {string} proxyHost
+   * @param {int} proxyPort
+   * @param {string} headers
+   */
+  window.WebSocket = function(url, protocols, proxyHost, proxyPort, headers) {
+    var self = this;
+    self.__id = WebSocket.__nextId++;
+    WebSocket.__instances[self.__id] = self;
+    self.readyState = WebSocket.CONNECTING;
+    self.bufferedAmount = 0;
+    self.__events = {};
+    if (!protocols) {
+      protocols = [];
+    } else if (typeof protocols == "string") {
+      protocols = [protocols];
+    }
+    // Uses setTimeout() to make sure __createFlash() runs after the caller sets ws.onopen etc.
+    // Otherwise, when onopen fires immediately, onopen is called before it is set.
+    self.__createTask = setTimeout(function() {
+      WebSocket.__addTask(function() {
+        self.__createTask = null;
+        WebSocket.__flash.create(
+            self.__id, url, protocols, proxyHost || null, proxyPort || 0, headers || null);
+      });
+    }, 0);
+  };
+
+  /**
+   * Send data to the web socket.
+   * @param {string} data  The data to send to the socket.
+   * @return {boolean}  True for success, false for failure.
+   */
+  WebSocket.prototype.send = function(data) {
+    if (this.readyState == WebSocket.CONNECTING) {
+      throw "INVALID_STATE_ERR: Web Socket connection has not been established";
+    }
+    // We use encodeURIComponent() here, because FABridge doesn't work if
+    // the argument includes some characters. We don't use escape() here
+    // because of this:
+    // https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Functions#escape_and_unescape_Functions
+    // But it looks decodeURIComponent(encodeURIComponent(s)) doesn't
+    // preserve all Unicode characters either e.g. "\uffff" in Firefox.
+    // Note by wtritch: Hopefully this will not be necessary using ExternalInterface.  Will require
+    // additional testing.
+    var result = WebSocket.__flash.send(this.__id, encodeURIComponent(data));
+    if (result < 0) { // success
+      return true;
+    } else {
+      this.bufferedAmount += result;
+      return false;
+    }
+  };
+
+  /**
+   * Close this web socket gracefully.
+   */
+  WebSocket.prototype.close = function() {
+    if (this.__createTask) {
+      clearTimeout(this.__createTask);
+      this.__createTask = null;
+      this.readyState = WebSocket.CLOSED;
+      return;
+    }
+    if (this.readyState == WebSocket.CLOSED || this.readyState == WebSocket.CLOSING) {
+      return;
+    }
+    this.readyState = WebSocket.CLOSING;
+    WebSocket.__flash.close(this.__id);
+  };
+
+  /**
+   * Implementation of {@link <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-registration">DOM 2 EventTarget Interface</a>}
+   *
+   * @param {string} type
+   * @param {function} listener
+   * @param {boolean} useCapture
+   * @return void
+   */
+  WebSocket.prototype.addEventListener = function(type, listener, useCapture) {
+    if (!(type in this.__events)) {
+      this.__events[type] = [];
+    }
+    this.__events[type].push(listener);
+  };
+
+  /**
+   * Implementation of {@link <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-registration">DOM 2 EventTarget Interface</a>}
+   *
+   * @param {string} type
+   * @param {function} listener
+   * @param {boolean} useCapture
+   * @return void
+   */
+  WebSocket.prototype.removeEventListener = function(type, listener, useCapture) {
+    if (!(type in this.__events)) return;
+    var events = this.__events[type];
+    for (var i = events.length - 1; i >= 0; --i) {
+      if (events[i] === listener) {
+        events.splice(i, 1);
+        break;
+      }
+    }
+  };
+
+  /**
+   * Implementation of {@link <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-registration">DOM 2 EventTarget Interface</a>}
+   *
+   * @param {Event} event
+   * @return void
+   */
+  WebSocket.prototype.dispatchEvent = function(event) {
+    var events = this.__events[event.type] || [];
+    for (var i = 0; i < events.length; ++i) {
+      events[i](event);
+    }
+    var handler = this["on" + event.type];
+    if (handler) handler.apply(this, [event]);
+  };
+
+  /**
+   * Handles an event from Flash.
+   * @param {Object} flashEvent
+   */
+  WebSocket.prototype.__handleEvent = function(flashEvent) {
+    
+    if ("readyState" in flashEvent) {
+      this.readyState = flashEvent.readyState;
+    }
+    if ("protocol" in flashEvent) {
+      this.protocol = flashEvent.protocol;
+    }
+    
+    var jsEvent;
+    if (flashEvent.type == "open" || flashEvent.type == "error") {
+      jsEvent = this.__createSimpleEvent(flashEvent.type);
+    } else if (flashEvent.type == "close") {
+      jsEvent = this.__createSimpleEvent("close");
+      jsEvent.wasClean = flashEvent.wasClean ? true : false;
+      jsEvent.code = flashEvent.code;
+      jsEvent.reason = flashEvent.reason;
+    } else if (flashEvent.type == "message") {
+      var data = decodeURIComponent(flashEvent.message);
+      jsEvent = this.__createMessageEvent("message", data);
+    } else {
+      throw "unknown event type: " + flashEvent.type;
+    }
+    
+    this.dispatchEvent(jsEvent);
+    
+  };
+  
+  WebSocket.prototype.__createSimpleEvent = function(type) {
+    if (document.createEvent && window.Event) {
+      var event = document.createEvent("Event");
+      event.initEvent(type, false, false);
+      return event;
+    } else {
+      return {type: type, bubbles: false, cancelable: false};
+    }
+  };
+  
+  WebSocket.prototype.__createMessageEvent = function(type, data) {
+    if (window.MessageEvent && typeof(MessageEvent) == "function" && !window.opera) {
+      return new MessageEvent("message", {
+        "view": window,
+        "bubbles": false,
+        "cancelable": false,
+        "data": data
+      });
+    } else if (document.createEvent && window.MessageEvent && !window.opera) {
+      var event = document.createEvent("MessageEvent");
+    	event.initMessageEvent("message", false, false, data, null, null, window, null);
+      return event;
+    } else {
+      // Old IE and Opera, the latter one truncates the data parameter after any 0x00 bytes.
+      return {type: type, data: data, bubbles: false, cancelable: false};
+    }
+  };
+  
+  /**
+   * Define the WebSocket readyState enumeration.
+   */
+  WebSocket.CONNECTING = 0;
+  WebSocket.OPEN = 1;
+  WebSocket.CLOSING = 2;
+  WebSocket.CLOSED = 3;
+
+  // Field to check implementation of WebSocket.
+  WebSocket.__isFlashImplementation = true;
+  WebSocket.__initialized = false;
+  WebSocket.__flash = null;
+  WebSocket.__instances = {};
+  WebSocket.__tasks = [];
+  WebSocket.__nextId = 0;
+  
+  /**
+   * Load a new flash security policy file.
+   * @param {string} url
+   */
+  WebSocket.loadFlashPolicyFile = function(url){
+    WebSocket.__addTask(function() {
+      WebSocket.__flash.loadManualPolicyFile(url);
+    });
+  };
+
+  /**
+   * Loads WebSocketMain.swf and creates WebSocketMain object in Flash.
+   */
+  WebSocket.__initialize = function() {
+    
+    if (WebSocket.__initialized) return;
+    WebSocket.__initialized = true;
+    
+    if (WebSocket.__swfLocation) {
+      // For backword compatibility.
+      window.WEB_SOCKET_SWF_LOCATION = WebSocket.__swfLocation;
+    }
+    if (!window.WEB_SOCKET_SWF_LOCATION) {
+      logger.error("[WebSocket] set WEB_SOCKET_SWF_LOCATION to location of WebSocketMain.swf");
+      return;
+    }
+    if (!window.WEB_SOCKET_SUPPRESS_CROSS_DOMAIN_SWF_ERROR &&
+        !WEB_SOCKET_SWF_LOCATION.match(/(^|\/)WebSocketMainInsecure\.swf(\?.*)?$/) &&
+        WEB_SOCKET_SWF_LOCATION.match(/^\w+:\/\/([^\/]+)/)) {
+      var swfHost = RegExp.$1;
+      if (location.host != swfHost) {
+        logger.error(
+            "[WebSocket] You must host HTML and WebSocketMain.swf in the same host " +
+            "('" + location.host + "' != '" + swfHost + "'). " +
+            "See also 'How to host HTML file and SWF file in different domains' section " +
+            "in README.md. If you use WebSocketMainInsecure.swf, you can suppress this message " +
+            "by WEB_SOCKET_SUPPRESS_CROSS_DOMAIN_SWF_ERROR = true;");
+      }
+    }
+    var container = document.createElement("div");
+    container.id = "webSocketContainer";
+    // Hides Flash box. We cannot use display: none or visibility: hidden because it prevents
+    // Flash from loading at least in IE. So we move it out of the screen at (-100, -100).
+    // But this even doesn't work with Flash Lite (e.g. in Droid Incredible). So with Flash
+    // Lite, we put it at (0, 0). This shows 1x1 box visible at left-top corner but this is
+    // the best we can do as far as we know now.
+    container.style.position = "absolute";
+    if (WebSocket.__isFlashLite()) {
+      container.style.left = "0px";
+      container.style.top = "0px";
+    } else {
+      container.style.left = "-100px";
+      container.style.top = "-100px";
+    }
+    var holder = document.createElement("div");
+    holder.id = "webSocketFlash";
+    container.appendChild(holder);
+    document.body.appendChild(container);
+    // See this article for hasPriority:
+    // http://help.adobe.com/en_US/as3/mobile/WS4bebcd66a74275c36cfb8137124318eebc6-7ffd.html
+    swfobject.embedSWF(
+      WEB_SOCKET_SWF_LOCATION,
+      "webSocketFlash",
+      "1" /* width */,
+      "1" /* height */,
+      "10.0.0" /* SWF version */,
+      null,
+      null,
+      {hasPriority: true, swliveconnect : true, allowScriptAccess: "always"},
+      null,
+      function(e) {
+        if (!e.success) {
+          logger.error("[WebSocket] swfobject.embedSWF failed");
+        }
+      }
+    );
+    
+  };
+  
+  /**
+   * Called by Flash to notify JS that it's fully loaded and ready
+   * for communication.
+   */
+  WebSocket.__onFlashInitialized = function() {
+    // We need to set a timeout here to avoid round-trip calls
+    // to flash during the initialization process.
+    setTimeout(function() {
+      WebSocket.__flash = document.getElementById("webSocketFlash");
+      WebSocket.__flash.setCallerUrl(location.href);
+      WebSocket.__flash.setDebug(!!window.WEB_SOCKET_DEBUG);
+      for (var i = 0; i < WebSocket.__tasks.length; ++i) {
+        WebSocket.__tasks[i]();
+      }
+      WebSocket.__tasks = [];
+    }, 0);
+  };
+  
+  /**
+   * Called by Flash to notify WebSockets events are fired.
+   */
+  WebSocket.__onFlashEvent = function() {
+    setTimeout(function() {
+      try {
+        // Gets events using receiveEvents() instead of getting it from event object
+        // of Flash event. This is to make sure to keep message order.
+        // It seems sometimes Flash events don't arrive in the same order as they are sent.
+        var events = WebSocket.__flash.receiveEvents();
+        for (var i = 0; i < events.length; ++i) {
+          WebSocket.__instances[events[i].webSocketId].__handleEvent(events[i]);
+        }
+      } catch (e) {
+        logger.error(e);
+      }
+    }, 0);
+    return true;
+  };
+  
+  // Called by Flash.
+  WebSocket.__log = function(message) {
+    logger.log(decodeURIComponent(message));
+  };
+  
+  // Called by Flash.
+  WebSocket.__error = function(message) {
+    logger.error(decodeURIComponent(message));
+  };
+  
+  WebSocket.__addTask = function(task) {
+    if (WebSocket.__flash) {
+      task();
+    } else {
+      WebSocket.__tasks.push(task);
+    }
+  };
+  
+  /**
+   * Test if the browser is running flash lite.
+   * @return {boolean} True if flash lite is running, false otherwise.
+   */
+  WebSocket.__isFlashLite = function() {
+    if (!window.navigator || !window.navigator.mimeTypes) {
+      return false;
+    }
+    var mimeType = window.navigator.mimeTypes["application/x-shockwave-flash"];
+    if (!mimeType || !mimeType.enabledPlugin || !mimeType.enabledPlugin.filename) {
+      return false;
+    }
+    return mimeType.enabledPlugin.filename.match(/flashlite/i) ? true : false;
+  };
+  
+  if (!window.WEB_SOCKET_DISABLE_AUTO_INITIALIZATION) {
+    // NOTE:
+    //   This fires immediately if web_socket.js is dynamically loaded after
+    //   the document is loaded.
+    swfobject.addDomLoadEvent(function() {
+      WebSocket.__initialize();
+    });
+  }
+  
+})();