12345市长热线标准版-前端

main.js 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623
  1. 
  2. var ws, n = 0,
  3. timer;
  4. var lockReconnect = false; //避免重复连接
  5. var obj = {};
  6. var Statess;
  7. var cls = 0;
  8. var lasttime = new Date().getTime();
  9. //创建scoket连接
  10. function createWebSocket() {
  11. try {
  12. $("#top-search li i").removeClass("active");
  13. Connect();
  14. } catch (e) {
  15. reconnect();
  16. }
  17. }
  18. //连接
  19. function Connect() {
  20. ws = new WebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
  21. ws.onopen = function () {
  22. console.log(new Date() + " " + "建立连接");
  23. //心跳检测重置
  24. heartCheck.reset().start();
  25. cls = 0;
  26. $(".Login").addClass("active");
  27. lasttime = new Date().getTime();
  28. if ($.cookie("socket_state") != null) {
  29. SetLogin($.cookie("socket_state"));
  30. }
  31. //$(".hwzt").text('连接成功!');
  32. };
  33. //接收到消息的回调方法
  34. ws.onmessage = function (evt) {
  35. //如果获取到消息,心跳检测重置
  36. //拿到任何消息都说明当前连接是正常的
  37. heartCheck.reset().start();
  38. var myDate = new Date();
  39. console.log(myDate + " receive " + evt.data);
  40. var data = JSON.parse(evt.data)[0];
  41. if (data) {
  42. var rlt = data.Result;
  43. if (rlt == true) {
  44. var type = data.Type;
  45. switch (type.toLowerCase()) {
  46. //case "heart": HeartBack(); break;//心跳
  47. case "login":
  48. LoginBack();
  49. break; //签入
  50. case "logout":
  51. LogoutBack();
  52. break; //签出
  53. case "dropcall":
  54. DropCallBack();
  55. break; //挂断
  56. case "makecall":
  57. MakeCallBack();
  58. break; //外呼
  59. case "setstate":
  60. SetState(data);
  61. break; //置忙置闲
  62. //case "saybusy": SayBusyBack(data); break;
  63. //case "sayfree": SayFreeBack(data); break;
  64. case "meeting":
  65. MeetingBack();
  66. break; //多方通话
  67. case "transfer":
  68. TransferBack();
  69. break; //转移
  70. case "hold":
  71. HoldBack();
  72. break; //保持
  73. case "retrieve":
  74. RetrieveBack();
  75. break; //接回
  76. case "incoming":
  77. IncomingBack(data);
  78. break; //来电
  79. case "subscribe":
  80. SubScribeBack();
  81. break; //监测
  82. case "subscribecancel":
  83. SubScribeCancelBack();
  84. break; //停止监测
  85. case "agentstate":
  86. AgentStateBack(data);
  87. break; //坐席状态
  88. case "linestate":
  89. LineStateBack(data);
  90. break; //线路状态
  91. case "motorsetstate":
  92. SayFreeBack();
  93. break; //班长置闲
  94. case "linestateagent":
  95. LineStateAgentBack(data);
  96. break; //线路状态通知
  97. case "callid":
  98. CallIDBack(data);
  99. break; //获取callid
  100. case "recordpath":
  101. RecordPathBack(data);
  102. break; //录音返回
  103. // case "getagentList":
  104. case "getagentlist":
  105. whtp_sorket(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. function whtp_sorket(data) {
  124. console.log(data)
  125. $.ajax({
  126. type: "get",
  127. url: huayi.config.callcenter_url + "SeatMonitoring/GetAgentList",
  128. async: true,
  129. dataType: 'json',
  130. data: {
  131. "token": $.cookie("token")
  132. },
  133. success: function (result) {
  134. var user = result.data;
  135. $(user).each(function (j, m) {
  136. $(data.AgentList).each(function (k, g) {
  137. if (g.AgentID == m.UserCode) {
  138. g.userName = m.UserName;
  139. }
  140. })
  141. })
  142. $(data.AgentList).each(function (k, m) {
  143. var strr = '';
  144. switch (m.State) {
  145. case "0":
  146. strr = "离线";
  147. break; //离线
  148. case "1":
  149. break; //登录中
  150. case "2":
  151. strr = "空闲";
  152. break; //空闲
  153. case "3":
  154. strr = "通话中";
  155. break; //通话中
  156. case "4":
  157. strr = "话后处理中";
  158. break; //话后处理中
  159. case "5":
  160. strr = "忙碌";
  161. break; //小休
  162. case "6":
  163. strr = "振铃";
  164. break; //被请求
  165. case "7":
  166. strr = "注销";
  167. break; //注销
  168. }
  169. var html = '<tr fjh="' + m.AgentExten + '">' +
  170. '<td>' + m.userName + '</td>' //姓名
  171. +
  172. '<td>' + m.AgentID + '</td>' //工号
  173. +
  174. '<td>' + m.AgentExten + '</td>'//分机号
  175. +
  176. '<td class=" ' + m.UserCode + 'state">' + strr + '</td>' //状态
  177. +
  178. '</tr>';
  179. $(html).appendTo("#zxTable tbody");
  180. })
  181. }
  182. });
  183. }
  184. //连接关闭的回调方法
  185. ws.onclose = function (evt) {
  186. if (cls == 0) {
  187. cls = 1;
  188. //console.log("连接关闭!");
  189. //layer.confirm('连接关闭!', {
  190. // btn: ['确定']
  191. //});
  192. $(".hwzt").text('连接关闭!');
  193. $("#top-search li i").removeClass("active");
  194. reconnect();
  195. }
  196. };
  197. //连接发生错误的回调方法
  198. ws.onerror = function (evt) {
  199. //产生异常
  200. $(".hwzt").text('连接出现异常!');
  201. console.log(ws);
  202. if (ws == null || ws.readyState != ws.OPEN) {
  203. console.log(new Date() + "开始重连");
  204. reconnect();
  205. }
  206. };
  207. }
  208. //重连
  209. function reconnect() {
  210. if (lockReconnect) return;
  211. lockReconnect = true;
  212. //没连接上会一直重连,设置延迟避免请求过多
  213. setTimeout(function () {
  214. console.log(new Date() + " " + "重连中……");
  215. createWebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
  216. lockReconnect = false;
  217. }, 2000);
  218. }
  219. //发送
  220. function Send() {
  221. if (ws.readyState != ws.OPEN) {
  222. reconnect();
  223. }
  224. if (ws.readyState == ws.OPEN) {
  225. console.log(new Date() + " send " + JSON.stringify(obj));
  226. ws.send(JSON.stringify(obj));
  227. }
  228. }
  229. //心跳检测
  230. var heartCheck = {
  231. timeout: 25000, //25秒
  232. timeoutObj: null,
  233. serverTimeoutObj: null,
  234. reset: function () {
  235. clearTimeout(this.timeoutObj);
  236. clearTimeout(this.serverTimeoutObj);
  237. return this;
  238. },
  239. start: function () {
  240. var self = this;
  241. this.timeoutObj = setTimeout(function () {
  242. //这里发送一个心跳,后端收到后,返回一个心跳消息,
  243. //onmessage拿到返回的心跳就说明连接正常
  244. obj.Type = "Heart";
  245. Send();
  246. self.serverTimeoutObj = setTimeout(function () { //如果超过一定时间还没重置,说明后端主动断开了
  247. ws.close(); //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
  248. }, self.timeout)
  249. }, this.timeout)
  250. }
  251. }
  252. //签入
  253. function LoginBack() {
  254. $("#top-search li i").removeClass("active");
  255. $(".Logout").addClass("active");
  256. $(".SayBusy").addClass("active");
  257. $(".MakeCall").addClass("active");
  258. $(".zxzt").removeClass("br").addClass("bl");
  259. $(".fwzt").removeClass("br").addClass("bl");
  260. $(".hwzt").text('');
  261. if ($.cookie("socket_state") == null) {
  262. SetStateCookie(0);
  263. }
  264. }
  265. //签出
  266. function LogoutBack() {
  267. $("#top-search li i").removeClass("active");
  268. $(".Login").addClass("active");
  269. $(".zxzt").removeClass("bl").addClass("br");
  270. $(".fwzt").removeClass("bl").addClass("br");
  271. $(".hwzt").text('');
  272. SetStateCookie(2);
  273. }
  274. //来电
  275. function IncomingBack(data) {
  276. $(".ldhm").val(data.Number);
  277. $(".hidTel").val(data.Number);
  278. $(".tel").text(data.Number);
  279. $(".ldtime").text(getNowFormatDate());
  280. $(".thsc").text("00:00");
  281. $(".hidCallID").val(data.CallID);
  282. //获取电话所属地
  283. $.getJSON(huayi.config.callcenter_url + 'CallInScreen/GetPhoneLocation', {
  284. "tel": $(".hidTel").val(),
  285. "token": $.cookie("token")
  286. }, function (result) {
  287. if (result.state.toLowerCase() == "success") {
  288. $(".ldlocation").text(result.data[0].F_Name);
  289. $(".khgsd").text(result.data[0].F_Name);
  290. }
  291. })
  292. //获取客户信息
  293. $(".ttsdh").text($(".hidTel").val());
  294. $(".tsdh").val($(".hidTel").val());
  295. $.getJSON(huayi.config.callcenter_url + 'CallInScreen/GetCustomerByTel', {
  296. "tel": $(".hidTel").val(),
  297. "token": $.cookie("token")
  298. }, function (result) {
  299. if (result.state.toLowerCase() == "success") {
  300. if (result.data.length > 0) {
  301. $(".khmc").val(result.data[0].F_CustomerName);
  302. $(".tkhmc").text(result.data[0].F_CustomerName);
  303. $("#khid").val(result.data[0].F_CustomerId);
  304. $(".lxdh").val(result.data[0].F_Telephone);
  305. //$(".tsdh").val(result.data[0].F_Mobile);
  306. //$(".ttsdh").text(result.data[0].F_Mobile);
  307. $(".lxr").val(result.data[0].F_CustomerEName);
  308. $(".postcode").val(result.data[0].F_PostCode);
  309. $(".email").val(result.data[0].F_Email);
  310. }
  311. else {
  312. $(".khmc").val("");
  313. $(".tkhmc").text("");
  314. $("#khid").val("");
  315. $(".lxr").val("");
  316. $(".postcode").val("");
  317. $(".email").val("");
  318. }
  319. }
  320. })
  321. $('.maxOpen').trigger("click");
  322. $('.head-pic .lahei .la-before').show();
  323. //触发来电类型第一个 点击;
  324. $("#dicValueList li:first-child").find("label").trigger('click');
  325. $('.head-pic .lahei .la-after').hide();
  326. $(".Bacha").hide();
  327. }
  328. //挂断
  329. function DropCallBack() {
  330. $("#top-search li i").removeClass("active");
  331. $(".Logout").addClass("active");
  332. $(".SayBusy").addClass("active");
  333. $(".MakeCall").addClass("active");
  334. $(".td-call").hide();
  335. //$('.ldtp-con').css("display", 'none');
  336. }
  337. function LineStateAgentBack(data) {
  338. //0分机不可用,1空闲,2摘机等待拨号,3正在拨号,4呼出振铃,5来电振铃,6通话中,7播放忙音中,8移除IP分机,9通话保持中
  339. if (data.State == '0') {
  340. $(".hwzt").text('分机不可用'); //左下角状态显示
  341. }
  342. if (data.State == '1') {
  343. $(".hwzt").text('空闲'); //左下角状态显示
  344. $(".fwzt").removeClass("br").addClass("bl");
  345. clearInterval(timer);
  346. if ($(".hidTel").val() && $(".hidCallID").val()) {
  347. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateGJ', {
  348. callid: $(".hidCallID").val(),
  349. "token": $.cookie("token")
  350. }, function (result) {
  351. result = JSON.parse(result);
  352. if (result.state.toLowerCase() == "success") { }
  353. })
  354. }
  355. $("#top-search li i").removeClass("active");
  356. $(".Logout").addClass("active");
  357. $(".SayBusy").addClass("active");
  358. $(".MakeCall").addClass("active");
  359. $(".td-call").hide();
  360. $(".Bacha").show();
  361. //$(".hidTel").val("");
  362. //$(".hidCallID").val("");
  363. }
  364. if (data.State == '2') {
  365. $(".hwzt").text('摘机等待拨号'); //左下角状态显示
  366. }
  367. if (data.State == '3') {
  368. $(".hwzt").text('正在拨号'); //左下角状态显示
  369. }
  370. if (data.State == '4') {
  371. $(".hwzt").text('呼出振铃'); //左下角状态显示
  372. }
  373. if (data.State == '5') {
  374. $(".hwzt").text('来电振铃'); //左下角状态显示
  375. $(".fwzt").removeClass("bl").addClass("br");
  376. if ($(".hidTel").val() && $(".hidCallID").val()) {
  377. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateZL', {
  378. callid: $(".hidCallID").val(),
  379. "token": $.cookie("token")
  380. }, function (result) {
  381. result = JSON.parse(result);
  382. if (result.state.toLowerCase() == "success") { }
  383. })
  384. }
  385. }
  386. if (data.State == '6') {
  387. $(".hwzt").text('通话中'); //左下角状态显示
  388. $(".fwzt").removeClass("bl").addClass("br");
  389. if ($(".hidTel").val() && $(".hidCallID").val()) {
  390. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateZJ', {
  391. callid: $(".hidCallID").val(),
  392. "token": $.cookie("token")
  393. }, function (result) {
  394. result = JSON.parse(result);
  395. if (result.state.toLowerCase() == "success") { }
  396. })
  397. }
  398. $(".td-call").show();
  399. n = 0;
  400. $("#top-search li i").removeClass("active");
  401. $(".DropCall").addClass("active");
  402. $(".Hold").addClass("active");
  403. $(".Transfer").addClass("active");
  404. $(".Meeting").addClass("active");
  405. clearInterval(timer);
  406. timer = setInterval(function () {
  407. n++;
  408. var m = parseInt(n / 60 % 60);
  409. var s = parseInt(n % 60);
  410. $(".thsc").text(toDub(m) + ":" + toDub(s));
  411. }, 1000);
  412. }
  413. if (data.State == '7') {
  414. $(".hwzt").text('播放忙音中'); //左下角状态显示
  415. }
  416. if (data.State == '8') {
  417. $(".hwzt").text('移除IP分机'); //左下角状态显示
  418. }
  419. if (data.State == '9') {
  420. $(".hwzt").text('通话保持中'); //左下角状态显示
  421. }
  422. }
  423. function toDub(i) {
  424. return i < 10 ? "0" + i : "" + i;
  425. }
  426. //外呼
  427. function MakeCallBack() {
  428. $("#top-search li i").removeClass("active");
  429. $(".DropCall").addClass("active");
  430. $(".Meeting").addClass("active");
  431. }
  432. //默认记忆上次是否签入,是否置忙置闲 0表示已签入 空闲,1表示签入置忙,2表示签出
  433. function SetStateCookie(state) {
  434. $.cookie("socket_state", state);
  435. }
  436. //置忙置闲
  437. function SetState(obj) {
  438. if (obj.State == '5') {
  439. $(".SayBusy").removeClass("active");
  440. $(".SayFree").addClass("active");
  441. $(".zxzt").removeClass("bl").addClass("br");
  442. $(".hwzt").text('置忙');
  443. SetStateCookie(1);
  444. }
  445. if (obj.State == '2') {
  446. $(".SayBusy").addClass("active");
  447. $(".SayFree").removeClass("active");
  448. $(".zxzt").removeClass("br").addClass("bl");
  449. $(".hwzt").text('空闲');
  450. SetStateCookie(0);
  451. }
  452. }
  453. function SetLogin(state) {
  454. if (state == 2) { return; }
  455. if (obj.AgentID) {
  456. obj.Type = "Login";
  457. obj.AgentGroup = "364";
  458. obj.AgentType = "0";
  459. Send();
  460. }
  461. if (state == 1) {
  462. setTimeout('SayBusy()', 200);
  463. }
  464. }
  465. function SayBusy() {
  466. if (obj.AgentID) {
  467. obj.Type = "SayBusy";
  468. Send();
  469. }
  470. }
  471. //置忙
  472. function SayBusyBack() {
  473. $(".SayBusy").removeClass("active");
  474. $(".SayFree").addClass("active");
  475. }
  476. //置闲
  477. function SayFreeBack() {
  478. $(".SayBusy").addClass("active");
  479. $(".SayFree").removeClass("active");
  480. }
  481. //多方通话
  482. function MeetingBack() {
  483. }
  484. //转移
  485. function TransferBack() {
  486. $("#top-search li i").removeClass("active");
  487. $(".Logout").addClass("active");
  488. $(".SayBusy").addClass("active");
  489. $(".MakeCall").addClass("active");
  490. }
  491. //保持
  492. function HoldBack() {
  493. $(".Hold").removeClass("active");
  494. $(".Retrieve").addClass("active");
  495. }
  496. //接回
  497. function RetrieveBack() {
  498. $(".Hold").addClass("active");
  499. $(".Retrieve").removeClass("active");
  500. }
  501. //监测
  502. function SubScribeBack() {
  503. var obj = $("iframe:visible")
  504. if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  505. window.frames[obj.attr("name")].Start();
  506. }
  507. if (obj.attr("data-id") == "./TelCall/zxKong.html") {
  508. window.frames[obj.attr("name")].Start();
  509. }
  510. }
  511. //取消监测
  512. function SubScribeCancelBack() {
  513. var obj = $("iframe:visible")
  514. if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  515. window.frames[obj.attr("name")].Stop();
  516. }
  517. if (obj.attr("data-id") == "./TelCall/zxKong.html") {
  518. window.frames[obj.attr("name")].Stop();
  519. }
  520. }
  521. //班长监测返回状态
  522. //坐席状态
  523. function AgentStateBack(data) {
  524. var obj = $("iframe:visible")
  525. if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  526. window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
  527. }
  528. if (obj.attr("data-id") == "./TelCall/zxKong.html") {
  529. window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
  530. }
  531. }
  532. //线路状态
  533. function LineStateBack(data) {
  534. var obj = $("iframe:visible")
  535. if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  536. window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
  537. }
  538. if (obj.attr("data-id") == "./TelCall/zxKong.html") {
  539. window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
  540. }
  541. }
  542. //录音返回
  543. function RecordPathBack(data) {
  544. //if ($(".hidTel").val() && $(".hidCallID").val()) {
  545. // $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateLY', { callid: $(".hidCallID").val(),path:data.RecPath, "token": $.cookie("token") }, function (result) {
  546. // result = JSON.parse(result);
  547. // if (result.state.toLowerCase() == "success") {
  548. // }
  549. // })
  550. //}
  551. if ($(".hidTel").val()) {
  552. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateLY', {
  553. callid: data.CallID,
  554. path: data.RecPath,
  555. "token": $.cookie("token")
  556. }, function (result) {
  557. result = JSON.parse(result);
  558. if (result.state.toLowerCase() == "success") { }
  559. })
  560. }
  561. }
  562. //获取当前的日期时间 格式“yyyy-MM-dd HH:mm:ss”
  563. function getNowFormatDate() {
  564. var date = new Date();
  565. var seperator1 = "-";
  566. var seperator2 = ":";
  567. var month = date.getMonth() + 1;
  568. var strDate = date.getDate();
  569. if (month >= 1 && month <= 9) {
  570. month = "0" + month;
  571. }
  572. if (strDate >= 0 && strDate <= 9) {
  573. strDate = "0" + strDate;
  574. }
  575. var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
  576. " " + date.getHours() + seperator2 + date.getMinutes() +
  577. seperator2 + date.getSeconds();
  578. return currentdate;
  579. }