郑州颐和随访系统UI

main.js 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579
  1. var ws, n = 0,
  2. timer,hidTel,hidCallID,hidActionID;
  3. var lockReconnect = false; //避免重复连接
  4. var obj = {};
  5. var cls = 0;
  6. var lasttime = new Date().getTime();
  7. //创建scoket连接
  8. function createWebSocket() {
  9. try {
  10. $("#top-search li i").removeClass("active");
  11. Connect();
  12. } catch(e) {
  13. reconnect();
  14. }
  15. }
  16. //连接
  17. function Connect() {
  18. ws = new WebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
  19. ws.onopen = function() {
  20. console.log(new Date() + " " + "建立连接");
  21. //心跳检测重置
  22. heartCheck.reset().start();
  23. cls = 0;
  24. $(".Login").addClass("active");
  25. if ($.cookie("socket_state") != null) {
  26. SetLogin($.cookie("socket_state"));
  27. }
  28. //自动签入
  29. //lasttime = new Date().getTime();
  30. //obj.Type = "Login";
  31. //obj.AgentType = "0";
  32. //Send(); /*2018-05-19zhangshaungnan注释*/
  33. };
  34. //接收到消息的回调方法
  35. ws.onmessage = function(evt) {
  36. //如果获取到消息,心跳检测重置
  37. //拿到任何消息都说明当前连接是正常的
  38. heartCheck.reset().start();
  39. var myDate = new Date();
  40. console.log(myDate + " receive " + evt.data);
  41. var data = JSON.parse(evt.data)[0];
  42. if(data) {
  43. var rlt = data.Result;
  44. if(rlt == true) {
  45. var type = data.Type;
  46. switch(type.toLowerCase()) {
  47. //case "heart": HeartBack(); break;//心跳
  48. case "login":
  49. LoginBack();
  50. break; //签入
  51. case "logout":
  52. LogoutBack();
  53. break; //签出
  54. case "dropcall":
  55. DropCallBack();
  56. break; //挂断
  57. case "makecall":
  58. MakeCallBack();
  59. break; //外呼
  60. case "setstate":
  61. SetState(data);
  62. break; //置忙置闲
  63. //case "saybusy": SayBusyBack(data); break;
  64. //case "sayfree": SayFreeBack(data); break;
  65. case "meeting":
  66. MeetingBack();
  67. break; //多方通话
  68. case "transfer":
  69. TransferBack();
  70. break; //转移
  71. case "hold":
  72. HoldBack();
  73. break; //保持
  74. case "retrieve":
  75. RetrieveBack();
  76. break; //接回
  77. case "incoming":
  78. IncomingBack(data);
  79. break; //来电
  80. case "subscribe":
  81. SubScribeBack();
  82. break; //监测
  83. case "subscribecancel":
  84. SubScribeCancelBack();
  85. break; //停止监测
  86. case "agentstate":
  87. AgentStateBack(data);
  88. break; //坐席状态
  89. case "linestate":
  90. LineStateBack(data);
  91. break; //线路状态
  92. case "motorsetstate":
  93. SayFreeBack();
  94. break; //班长置闲
  95. case "linestateagent":
  96. LineStateAgentBack(data);
  97. break; //线路状态通知
  98. case "agentstateagent":
  99. AgentStateAgentBack(data);
  100. break; //坐席状态通知
  101. case "callid":
  102. CallIDBack(data);
  103. break; //获取callid
  104. case "recordpath":
  105. RecordPathBack(data);
  106. break; //录音返回
  107. }
  108. } else {
  109. if(rlt == false) {
  110. //layer.confirm('操作失败!', {
  111. // btn: ['确定']
  112. //});
  113. $(".hwzt").text('操作失败!');
  114. } else {
  115. $(".hwzt").text(rlt);
  116. //layer.confirm(rlt, {
  117. // btn: ['确定']
  118. //});
  119. }
  120. }
  121. }
  122. };
  123. //连接关闭的回调方法
  124. ws.onclose = function(evt) {
  125. if(cls == 0) {
  126. cls = 1;
  127. //console.log("连接关闭!");
  128. //layer.confirm('连接关闭!', {
  129. // btn: ['确定']
  130. //});
  131. $(".hwzt").text('连接关闭!');
  132. $("#top-search li i").removeClass("active");
  133. reconnect();
  134. }
  135. };
  136. //连接发生错误的回调方法
  137. ws.onerror = function(evt) {
  138. //产生异常
  139. $(".hwzt").text('连接出现异常!');
  140. console.log(ws);
  141. if(ws == null || ws.readyState != ws.OPEN) {
  142. console.log(new Date() + "开始重连");
  143. reconnect();
  144. }
  145. };
  146. }
  147. //重连
  148. function reconnect() {
  149. if(lockReconnect) return;
  150. lockReconnect = true;
  151. //没连接上会一直重连,设置延迟避免请求过多
  152. setTimeout(function() {
  153. console.log(new Date() + " " + "重连中……");
  154. createWebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
  155. lockReconnect = false;
  156. }, 2000);
  157. }
  158. //发送
  159. function Send() {
  160. if(ws.readyState != ws.OPEN) {
  161. reconnect();
  162. }
  163. if(ws.readyState == ws.OPEN) {
  164. console.log(new Date() + " send " + JSON.stringify(obj));
  165. ws.send(JSON.stringify(obj));
  166. }
  167. }
  168. //心跳检测
  169. var heartCheck = {
  170. timeout: 25000, //25秒
  171. timeoutObj: null,
  172. serverTimeoutObj: null,
  173. reset: function() {
  174. clearTimeout(this.timeoutObj);
  175. clearTimeout(this.serverTimeoutObj);
  176. return this;
  177. },
  178. start: function() {
  179. var self = this;
  180. this.timeoutObj = setTimeout(function() {
  181. //这里发送一个心跳,后端收到后,返回一个心跳消息,
  182. //onmessage拿到返回的心跳就说明连接正常
  183. obj.Type = "Heart";
  184. Send();
  185. self.serverTimeoutObj = setTimeout(function() { //如果超过一定时间还没重置,说明后端主动断开了
  186. ws.close(); //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
  187. }, self.timeout)
  188. }, this.timeout)
  189. }
  190. }
  191. //签入
  192. function LoginBack() {
  193. $("#top-search li i").removeClass("active");
  194. $(".Logout").addClass("active");
  195. $(".SayBusy").addClass("active");
  196. $(".MakeCall").addClass("active");
  197. $(".zxzt").removeClass("br").addClass("bl");
  198. $(".fwzt").removeClass("br").addClass("bl");
  199. $(".hwzt").text('');
  200. if($.cookie("socket_state") == null){
  201. SetStateCookie(0);
  202. }
  203. }
  204. //签出
  205. function LogoutBack() {
  206. $("#top-search li i").removeClass("active");
  207. $(".Login").addClass("active");
  208. $(".zxzt").removeClass("bl").addClass("br");
  209. $(".fwzt").removeClass("bl").addClass("br");
  210. $(".hwzt").text('');
  211. SetStateCookie(2);
  212. }
  213. //来电
  214. function IncomingBack(data) {
  215. if(data.CallID!=0){
  216. var p = '<a href="javascript:;" class="active J_menuTab" data-id="./callScreen/callScreen.html?tel=' + data.Number + '&CallID=' + data.CallID + '">来电弹屏' + helper.filter.cutTel(data.Number) + ' <i class="fa fa-times-circle"></i></a>';
  217. $(".J_menuTab").removeClass("active");
  218. var nif = '<iframe class="J_iframe J_iframeNew" name="iframe'+ data.CallID +'" width="100%" height="100%" src="./callScreen/callScreen.html?Number=' + data.Number + '&CallID=' + data.CallID + '&ActionID=' + data.ActionID + '" frameborder="0" data-id="./callScreen/callScreen.html?tel=' + data.Number + '&CallID=' + data.CallID + '" seamless></iframe>';
  219. $(".J_mainContent").find("iframe.J_iframe").hide().parents(".J_mainContent").append(nif);
  220. $(".J_menuTabs .page-tabs-content").append(p);
  221. hidTel=data.Number;
  222. hidCallID=data.CallID;
  223. hidActionID=data.ActionID;
  224. }else{
  225. var timestamp = Date.parse(new Date());
  226. var p = '<a href="javascript:;" class="active J_menuTab" data-id="./callScreen/callScreen.html?tel=' + data.Number + '&CallID='+timestamp+'">来电弹屏' + helper.filter.cutTel(data.Number) + ' <i class="fa fa-times-circle"></i></a>';
  227. $(".J_menuTab").removeClass("active");
  228. var nif = '<iframe class="J_iframe J_iframeNew" name="iframe'+timestamp+'" width="100%" height="100%" src="./callScreen/callScreen.html?Number=' + data.Number + '&CallID='+timestamp+'" frameborder="0" data-id="./callScreen/callScreen.html?tel=' + data.Number + '&CallID='+timestamp+'" seamless></iframe>';
  229. $(".J_mainContent").find("iframe.J_iframe").hide().parents(".J_mainContent").append(nif);
  230. $(".J_menuTabs .page-tabs-content").append(p);
  231. hidTel=data.Number;
  232. hidCallID=timestamp;
  233. }
  234. }
  235. //***************************************************
  236. function CallIDBack(data) {
  237. $('#content-main .J_iframe').each(function(i,n){
  238. console.log($(this).attr('src'))
  239. if($(this).attr('src') == "./Arrangefollow/arrangeCall.html"){
  240. window.frames[0].getCallId(data.CurrID, data.ActionID);
  241. }
  242. })/*2018-05-24 zhangshuangnan 修改 解决通话中时 坐席监控状态不改变的问题*/
  243. //$(".hidCallID").val(data.CurrID);
  244. }
  245. //挂断
  246. function DropCallBack() {
  247. $("#top-search li i").removeClass("active");
  248. $(".Logout").addClass("active");
  249. $(".SayBusy").addClass("active");
  250. $(".MakeCall").addClass("active");
  251. var obj = $("iframe:visible")
  252. console.log($.cookie("socket_state"))
  253. if($.cookie("socket_state") == 1){
  254. SayBusy()
  255. }
  256. // if (obj.attr("data-id") == './callScreen/callScreen.html?tel=' + hidTel + '&CallID=' + hidCallID + '') {
  257. // window.frames[obj.attr("name")].$(".td-call").hide();
  258. // window.frames['iframe'+ hidCallID +''].$(".td-call").hide();
  259. // }
  260. if(window.frames['iframe'+ hidCallID +'']){
  261. window.frames['iframe'+ hidCallID +''].$(".td-call").hide();
  262. }
  263. }
  264. //线路状态通知
  265. function LineStateAgentBack(data) {
  266. var objiframe = $("iframe:visible")
  267. //0分机不可用,1空闲,2摘机等待拨号,3正在拨号,4呼出振铃,5来电振铃,6通话中,7播放忙音中,8移除IP分机,9通话保持中
  268. if(data.State == '0') {
  269. $(".hwzt").text('分机不可用'); //左下角状态显示
  270. //$(".fwzt").removeClass("br").removeClass("bl");
  271. $(".fwzt").removeClass("bl").addClass("br");//20180509 by fanlongfei 增加话机状态灯
  272. $(".zxzt").removeClass("bl").addClass("br");//20180509 by fanlongfei 增加坐席状态灯
  273. }
  274. if(data.State == '1') {
  275. $(".hwzt").text('空闲'); //左下角状态显示
  276. $(".fwzt").removeClass("br").addClass("bl");
  277. $(".zxzt").removeClass("br").addClass("bl");//20180509 by fanlongfei 增加坐席状态灯
  278. if(window.frames['iframe'+ hidCallID +'']){
  279. window.frames['iframe'+ hidCallID +''].clearInter();
  280. }
  281. if (hidTel && hidCallID) {
  282. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateGJ', {
  283. callid: hidTel,
  284. "token": $.cookie("token")
  285. }, function (result) {
  286. result = JSON.parse(result);
  287. if (result.state.toLowerCase() == "success") { }
  288. })
  289. }
  290. $("#top-search li i").removeClass("active");
  291. $(".Logout").addClass("active");
  292. $(".SayBusy").addClass("active");
  293. $(".MakeCall").addClass("active");
  294. if(window.frames['iframe'+ hidCallID +'']){
  295. window.frames['iframe'+ hidCallID +''].$(".td-call").hide();
  296. }
  297. }
  298. if(data.State == '2') {
  299. $(".hwzt").text('摘机等待拨号'); //左下角状态显示
  300. }
  301. if(data.State == '3') {
  302. $(".hwzt").text('正在拨号'); //左下角状态显示
  303. }
  304. if(data.State == '4') {
  305. $(".hwzt").text('呼出振铃'); //左下角状态显示
  306. }
  307. if(data.State == '5') {
  308. $(".hwzt").text('来电振铃'); //左下角状态显示
  309. //$(".fwzt").removeClass("bl").addClass("br");
  310. $(".fwzt").removeClass("br").addClass("bl");//20180509 by fanlongfei 增加话机状态灯
  311. $(".zxzt").removeClass("bl").addClass("br");//20180509 by fanlongfei 增加坐席状态灯
  312. if (hidTel && hidCallID) {
  313. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateZL', {
  314. callid: hidCallID,
  315. "token": $.cookie("token")
  316. }, function (result) {
  317. result = JSON.parse(result);
  318. if (result.state.toLowerCase() == "success") { }
  319. })
  320. }
  321. }
  322. if(data.State == '6') {
  323. $(".hwzt").text('通话中'); //左下角状态显示
  324. $(".fwzt").removeClass("bl").addClass("br");
  325. $(".zxzt").removeClass("bl").addClass("br");//20180509 by fanlongfei 增加坐席状态灯
  326. if(hidTel && hidCallID) {
  327. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateZJ', {
  328. callid: hidCallID,
  329. "token": $.cookie("token")
  330. }, function(result) {
  331. result = JSON.parse(result);
  332. if(result.state.toLowerCase() == "success") {}
  333. })
  334. }
  335. $("#top-search li i").removeClass("active");
  336. $(".DropCall").addClass("active");
  337. $(".Hold").addClass("active");
  338. $(".Transfer").addClass("active");
  339. $(".Meeting").addClass("active");
  340. var aaa=data.CallDirection;
  341. if(data.CallDirection=="in"){
  342. // if (objiframe.attr("data-id") == './callScreen/callScreen.html?tel=' + hidTel + '&CallID=' + hidCallID + '') {
  343. setTimeout(window.frames['iframe'+ hidCallID +''].calling(),500);/*2018-05-19 zhangshuangnan 修改 ps: 因软电话设置为 自动应答 通话时间不计时问题*/
  344. // }
  345. }
  346. }
  347. if(data.State == '7') {
  348. $(".hwzt").text('播放忙音中'); //左下角状态显示
  349. }
  350. if(data.State == '8') {
  351. $(".hwzt").text('移除IP分机'); //左下角状态显示
  352. }
  353. if(data.State == '9') {
  354. $(".hwzt").text('通话保持中'); //左下角状态显示
  355. }
  356. }
  357. //线路状态通知
  358. function AgentStateAgentBack(data){
  359. var objiframe = $("iframe:visible")
  360. if(data.State == '6') {
  361. $(".hwzt").text('通话中'); //左下角状态显示
  362. $(".fwzt").removeClass("bl").addClass("br");
  363. $(".zxzt").removeClass("bl").addClass("br");//20180509 by fanlongfei 增加坐席状态灯
  364. if(hidTel && hidCallID) {
  365. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateZJ', {
  366. callid: hidCallID,
  367. "token": $.cookie("token")
  368. }, function(result) {
  369. result = JSON.parse(result);
  370. if(result.state.toLowerCase() == "success") {}
  371. })
  372. }
  373. $("#top-search li i").removeClass("active");
  374. $(".DropCall").addClass("active");
  375. $(".Hold").addClass("active");
  376. $(".Transfer").addClass("active");
  377. $(".Meeting").addClass("active");
  378. var aaa=data.CallDirection;
  379. if(data.CallDirection=="in"){
  380. // if (objiframe.attr("data-id") == './callScreen/callScreen.html?tel=' + hidTel + '&CallID=' + hidCallID + '') {
  381. setTimeout(window.frames['iframe'+ hidCallID +''].calling(),500);/*2018-05-19 zhangshuangnan 修改 ps: 因软电话设置为 自动应答 通话时间不计时问题*/
  382. // }
  383. }
  384. }else{
  385. console.log('出错了!')
  386. }
  387. }
  388. function toDub(i) {
  389. return i < 10 ? "0" + i : "" + i;
  390. }
  391. //外呼
  392. function MakeCallBack() {
  393. $("#top-search li i").removeClass("active");
  394. $(".DropCall").addClass("active");
  395. layer.msg("呼叫成功");
  396. // alert('1');
  397. // window.frames[obj.attr("name")].calling();
  398. }
  399. //默认记忆上次是否签入,是否置忙置闲 0表示已签入 空闲,1表示签入置忙,2表示签出
  400. function SetStateCookie(state) {
  401. $.cookie("socket_state", state);
  402. }
  403. //置忙置闲
  404. function SetState(obj) {
  405. if(obj.State == '5') {
  406. $(".SayBusy").removeClass("active");
  407. $(".SayFree").addClass("active");
  408. $(".zxzt").removeClass("bl").addClass("br");
  409. $(".hwzt").text('置忙');
  410. SetStateCookie(1);
  411. }
  412. if(obj.State == '2') {
  413. $(".SayBusy").addClass("active");
  414. $(".SayFree").removeClass("active");
  415. $(".zxzt").removeClass("br").addClass("bl");
  416. $(".hwzt").text('空闲');
  417. SetStateCookie(0);
  418. }
  419. }
  420. function SetLogin(state) {
  421. if (state == 2) { return; }
  422. if (obj.AgentID) {
  423. obj.Type = "Login";
  424. Send();
  425. }
  426. if (state == 1) {
  427. setTimeout('SayBusy()', 500);
  428. }
  429. }
  430. //置忙
  431. function SayBusy() {
  432. if (obj.AgentID) {
  433. obj.Type = "SayBusy";
  434. Send();
  435. }
  436. }
  437. function SayBusy() {
  438. if (obj.AgentID) {
  439. obj.Type = "SayBusy";
  440. Send();
  441. }
  442. }
  443. //置忙
  444. function SayBusyBack() {
  445. $(".SayBusy").removeClass("active");
  446. $(".SayFree").addClass("active");
  447. }
  448. //坐席班长置闲
  449. function SayFreeBack() {
  450. $(".SayBusy").addClass("active");
  451. $(".SayFree").removeClass("active");
  452. $(".zxzt").removeClass("br").addClass("bl"); // 2018/05/09 by fanlongfei 增加坐席状态指示
  453. $(".hwzt").text('空闲');// 2018/05/09 by fanlongfei 增加坐席状态指示
  454. }
  455. //多方通话
  456. function MeetingBack() {
  457. }
  458. //转移
  459. function TransferBack() {
  460. $("#top-search li i").removeClass("active");
  461. $(".Logout").addClass("active");
  462. $(".SayBusy").addClass("active");
  463. $(".MakeCall").addClass("active");
  464. }
  465. //保持
  466. function HoldBack() {
  467. $(".Hold").removeClass("active");
  468. $(".Retrieve").addClass("active");
  469. }
  470. //接回
  471. function RetrieveBack() {
  472. $(".Hold").addClass("active");
  473. $(".Retrieve").removeClass("active");
  474. }
  475. //监测
  476. function SubScribeBack() {
  477. $('#content-main .J_iframeNew').each(function(i,n){
  478. if($(this).attr('data-id') == "./TelCall/SeatMonitor.html"){
  479. window.frames[$(this).attr("name")].Start();
  480. }
  481. })/*2018-05-24 zhangshuangnan 修改 解决通话中时 坐席监控状态不改变的问题*/
  482. }
  483. //取消监测
  484. function SubScribeCancelBack() {
  485. // var obj = $("iframe:visible")
  486. // if(obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  487. // window.frames[obj.attr("name")].();
  488. // }
  489. $('#content-main .J_iframeNew').each(function(i,n){
  490. if($(this).attr('data-id') == "./TelCall/SeatMonitor.html"){
  491. window.frames[$(this).attr("name")].Stop();
  492. }
  493. })/*2018-05-24 zhangshuangnan 修改 解决通话中时 坐席监控状态不改变的问题*/
  494. }
  495. //班长监测返回状态
  496. //坐席状态
  497. function AgentStateBack(data) {
  498. $('#content-main .J_iframeNew').each(function(i,n){
  499. if($(this).attr('data-id') == "./TelCall/SeatMonitor.html"){
  500. window.frames[$(this).attr("name")].UpdateAgentState(data.AgentID, data.State);
  501. }
  502. })/*2018-05-24 zhangshuangnan 修改 解决通话中时 坐席监控状态不改变的问题*/
  503. }
  504. //线路状态
  505. function LineStateBack(data) {
  506. $('#content-main .J_iframeNew').each(function(i,n){
  507. if($(this).attr('data-id') == "./TelCall/SeatMonitor.html"){
  508. window.frames[$(this).attr("name")].UpdateLineState(data.AgentID, data.State);
  509. }
  510. })/*2018-05-24 zhangshuangnan 修改 解决通话中时 坐席监控状态不改变的问题*/
  511. }
  512. //录音返回
  513. function RecordPathBack(data) {
  514. $(".hidCallID").val(data.CallID);
  515. //if ($(".hidTel").val() && $(".hidCallID").val()) {
  516. // $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateLY', { callid: $(".hidCallID").val(),path:data.RecPath, "token": $.cookie("token") }, function (result) {
  517. // result = JSON.parse(result);
  518. // if (result.state.toLowerCase() == "success") {
  519. // }
  520. // })
  521. //}
  522. if(hidTel) {
  523. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateLY', {
  524. callid: data.CallID,
  525. path: data.RecPath,
  526. "token": $.cookie("token")
  527. }, function(result) {
  528. result = JSON.parse(result);
  529. if(result.state.toLowerCase() == "success") {}
  530. })
  531. }
  532. }
  533. //获取当前的日期时间 格式“yyyy-MM-dd HH:mm:ss”
  534. function getNowFormatDate() {
  535. var date = new Date();
  536. var seperator1 = "-";
  537. var seperator2 = ":";
  538. var month = date.getMonth() + 1;
  539. var strDate = date.getDate();
  540. if(month >= 1 && month <= 9) {
  541. month = "0" + month;
  542. }
  543. if(strDate >= 0 && strDate <= 9) {
  544. strDate = "0" + strDate;
  545. }
  546. var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
  547. " " + date.getHours() + seperator2 + date.getMinutes() +
  548. seperator2 + date.getSeconds();
  549. return currentdate;
  550. }