12345市长热线标准版-前端

main.js 21KB

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