郑州颐和随访系统UI

main.js 17KB

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