安图前端代码

main.js 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  1. var ws, n = 0,
  2. timer;
  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. ws = new WebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
  12. Connect();
  13. } catch(e) {
  14. reconnect();
  15. }
  16. }
  17. //连接
  18. function Connect() {
  19. try {
  20. ws.onopen = function() {
  21. console.log(new Date() + " " + "建立连接");
  22. //心跳检测重置
  23. heartCheck.reset().start();
  24. cls = 0;
  25. $(".Login").addClass("active");
  26. //自动签入
  27. //lasttime = new Date().getTime();
  28. //obj.Type = "Login";
  29. //obj.AgentType = "0";
  30. Send();
  31. };
  32. //接收到消息的回调方法
  33. ws.onmessage = function(evt) {
  34. //如果获取到消息,心跳检测重置
  35. //拿到任何消息都说明当前连接是正常的
  36. heartCheck.reset().start();
  37. var myDate = new Date();
  38. console.log(myDate + " receive " + evt.data);
  39. var data = JSON.parse(evt.data)[0];
  40. if(data) {
  41. var rlt = data.Result;
  42. if(rlt == true) {
  43. var type = data.Type;
  44. switch(type.toLowerCase()) {
  45. //case "heart": HeartBack(); break;//心跳
  46. case "login":
  47. LoginBack();
  48. break; //签入
  49. case "logout":
  50. LogoutBack();
  51. break; //签出
  52. case "dropcall":
  53. DropCallBack();
  54. break; //挂断
  55. case "makecall":
  56. MakeCallBack();
  57. break; //外呼
  58. case "setstate":
  59. SetState(data);
  60. break; //置忙置闲
  61. //case "saybusy": SayBusyBack(data); break;
  62. //case "sayfree": SayFreeBack(data); break;
  63. case "meeting":
  64. MeetingBack();
  65. break; //多方通话
  66. case "transfer":
  67. TransferBack();
  68. break; //转移
  69. case "hold":
  70. HoldBack();
  71. break; //保持
  72. case "retrieve":
  73. RetrieveBack();
  74. break; //接回
  75. case "incoming":
  76. IncomingBack(data);
  77. break; //来电
  78. case "subscribe":
  79. SubScribeBack();
  80. break; //监测
  81. case "subscribecancel":
  82. SubScribeCancelBack();
  83. break; //停止监测
  84. case "agentstate":
  85. AgentStateBack(data);
  86. break; //坐席状态
  87. case "linestate":
  88. LineStateBack(data);
  89. break; //线路状态
  90. case "motorsetstate":
  91. SayFreeBack();
  92. break; //班长置闲
  93. case "linestateagent":
  94. LineStateAgentBack(data);
  95. break; //线路状态通知
  96. case "callid":
  97. CallIDBack(data);
  98. break; //获取callid
  99. case "recordpath":
  100. RecordPathBack(data);
  101. break; //录音返回
  102. }
  103. } else {
  104. if(rlt == false) {
  105. //layer.confirm('操作失败!', {
  106. // btn: ['确定']
  107. //});
  108. $(".hwzt").text('操作失败!');
  109. } else {
  110. $(".hwzt").text(rlt);
  111. //layer.confirm(rlt, {
  112. // btn: ['确定']
  113. //});
  114. }
  115. }
  116. }
  117. };
  118. //连接关闭的回调方法
  119. ws.onclose = function(evt) {
  120. if(cls == 0) {
  121. cls = 1;
  122. //console.log("连接关闭!");
  123. //layer.confirm('连接关闭!', {
  124. // btn: ['确定']
  125. //});
  126. $(".hwzt").text('连接关闭!');
  127. $("#top-search li i").removeClass("active");
  128. reconnect();
  129. }
  130. };
  131. //连接发生错误的回调方法
  132. ws.onerror = function(evt) {
  133. //产生异常
  134. $(".hwzt").text('连接出现异常!');
  135. console.log(ws);
  136. if(ws == null || ws.readyState != ws.OPEN) {
  137. console.log(new Date() + "开始重连");
  138. reconnect();
  139. }
  140. };
  141. } catch(ex) {
  142. $(".hwzt").text('连接关闭 try-catch!');
  143. $("#top-search li i").removeClass("active");
  144. reconnect();
  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. }
  201. //签出
  202. function LogoutBack() {
  203. $("#top-search li i").removeClass("active");
  204. $(".Login").addClass("active");
  205. $(".zxzt").removeClass("bl").addClass("br");
  206. $(".fwzt").removeClass("bl").addClass("br");
  207. $(".hwzt").text('');
  208. }
  209. //来电
  210. function IncomingBack(data) {
  211. var UserCode
  212. $(".hidTel").val(data.Number);
  213. $(".tel").text(data.Number);
  214. $("#zxdh_").val(data.Number);
  215. $("#tsdh").val(data.Number);
  216. $(".ldtime").text(getNowFormatDate());
  217. $(".thsc").text("00:00");
  218. //获取callid
  219. $.ajaxSettings.async = false;
  220. $.getJSON(huayi.config.callcenter_url + 'CallInScreen/GetCallIdByPhone', {
  221. "tel": $(".hidTel").val(),
  222. "token": $.cookie("token")
  223. }, function(result) {
  224. $.ajaxSettings.async = true;
  225. if(result.state.toLowerCase() == "success") {
  226. $(".hidCallID").val(result.data.CallId);
  227. }
  228. })
  229. //获取信息
  230. $.getJSON(huayi.config.callcenter_url + 'UserAccount/GetNowUser', {
  231. "token": $.cookie("token")
  232. }, function(result) {
  233. if(result.state.toLowerCase() == "success") {
  234. console.log(result);
  235. if(result.data.role) {
  236. console.log(result.data);
  237. UserCode = result.data.user.F_UserCode;
  238. }
  239. }
  240. })
  241. //获取电话所属地
  242. $.getJSON(huayi.config.callcenter_url + 'CallInScreen/GetPhoneLocation', {
  243. "tel": $(".hidTel").val(),
  244. "token": $.cookie("token")
  245. }, function(result) {
  246. if(result.state.toLowerCase() == "success") {
  247. $(".khgsd").text(result.data);
  248. // $(".ldlocation").text(result.data);
  249. }
  250. })
  251. //获取客户信息
  252. $(".ldtel").text($(".hidTel").val());
  253. $("#tsdh").val($(".hidTel").val());
  254. $(".ldtel1").val($(".hidTel").val());
  255. $.getJSON(huayi.config.callcenter_url + 'Customer/GetCustomerByTel', {
  256. "tel": $(".hidTel").val(),
  257. // "tel": '18839115206',
  258. "token": $.cookie("token")
  259. }, function(result) {
  260. if(result.state.toLowerCase() == "success") {
  261. if(result.data.length > 0) {
  262. // $("#zxr_").val(result.data[0].F_CustomerName);
  263. // $("#tskh").val(result.data[0].F_CustomerName);
  264. // $("#khid").val(result.data[0].F_CustomerId);
  265. // $(".khbh").val(result.data[0].F_CustomerCode);//客户编号
  266. $('.ldname').val(result.data.F_CustomerName);//客户姓名
  267. $(".ldtel1").val(result.data.F_Mobile);//联系电话
  268. $(".ldlocation").text(result.data.F_Province);//省份
  269. // $(".ldtel2").val(result.data[0].F_Mobile);
  270. // $(".ldtel3").val(result.data[0].F_ChargeTelephone);
  271. //客服部显示
  272. $("#callCustomer").val(result.data.F_CustomerName);//客户姓名
  273. $("#Tel").val(result.data.F_Mobile);//联系电话
  274. $("#lddep").val(result.data.F_CustomerIndustry );//来电单位
  275. //市场部显示
  276. $("#marketName").val(result.data.F_CustomerName);
  277. $("#marketTel").val(result.data.F_Mobile);
  278. $("#lddepr").val(result.data.F_CustomerIndustry);
  279. }
  280. }
  281. })
  282. var timestamp = Date.parse(new Date());
  283. //呼叫中心传入城管平台参数
  284. $.ajax({
  285. type: "get",
  286. url: 'http://61.54.5.100:8086/callcenter/PutTel?',
  287. async: true,
  288. dataType: 'json',
  289. data: {
  290. id: UserCode,
  291. tel: data.Number,
  292. time: timestamp
  293. },
  294. success: function(data) {}
  295. });
  296. loadOld();
  297. $('.maxOpen').trigger("click");
  298. $('.head-pic .lahei .la-before').show();
  299. $('.head-pic .lahei .la-after').hide();
  300. $(".Bacha").hide();
  301. }
  302. function CallIDBack(data) {
  303. //$(".hidCallID").val(data.CurrID);
  304. }
  305. //挂断
  306. function DropCallBack() {
  307. $("#top-search li i").removeClass("active");
  308. $(".Logout").addClass("active");
  309. $(".SayBusy").addClass("active");
  310. $(".MakeCall").addClass("active");
  311. $(".td-call").hide();
  312. //$('.ldtp-con').css("display", 'none');
  313. }
  314. function LineStateAgentBack(data) {
  315. //0分机不可用,1空闲,2摘机等待拨号,3正在拨号,4呼出振铃,5来电振铃,6通话中,7播放忙音中,8移除IP分机,9通话保持中
  316. if(data.State == '0') {
  317. $(".hwzt").text('分机不可用'); //左下角状态显示
  318. }
  319. if(data.State == '1') {
  320. $(".hwzt").text('空闲'); //左下角状态显示
  321. $(".fwzt").removeClass("br").addClass("bl");
  322. clearInterval(timer);
  323. if($(".hidTel").val() && $(".hidCallID").val()) {
  324. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateGJ', {
  325. callid: $(".hidCallID").val(),
  326. "token": $.cookie("token")
  327. }, function(result) {
  328. result = JSON.parse(result);
  329. if(result.state.toLowerCase() == "success") {}
  330. })
  331. }
  332. $("#top-search li i").removeClass("active");
  333. $(".Logout").addClass("active");
  334. $(".SayBusy").addClass("active");
  335. $(".MakeCall").addClass("active");
  336. $(".td-call").hide();
  337. $(".Bacha").show();
  338. //$(".hidTel").val("");
  339. //$(".hidCallID").val("");
  340. }
  341. if(data.State == '2') {
  342. $(".hwzt").text('摘机等待拨号'); //左下角状态显示
  343. }
  344. if(data.State == '3') {
  345. $(".hwzt").text('正在拨号'); //左下角状态显示
  346. }
  347. if(data.State == '4') {
  348. $(".hwzt").text('呼出振铃'); //左下角状态显示
  349. }
  350. if(data.State == '5') {
  351. $(".hwzt").text('来电振铃'); //左下角状态显示
  352. $(".fwzt").removeClass("bl").addClass("br");
  353. if($(".hidTel").val() && $(".hidCallID").val()) {
  354. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateZL', {
  355. callid: $(".hidCallID").val(),
  356. "token": $.cookie("token")
  357. }, function(result) {
  358. result = JSON.parse(result);
  359. if(result.state.toLowerCase() == "success") {}
  360. })
  361. }
  362. }
  363. if(data.State == '6') {
  364. $(".hwzt").text('通话中'); //左下角状态显示
  365. $(".fwzt").removeClass("bl").addClass("br");
  366. if($(".hidTel").val() && $(".hidCallID").val()) {
  367. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateZJ', {
  368. callid: $(".hidCallID").val(),
  369. "token": $.cookie("token")
  370. }, function(result) {
  371. result = JSON.parse(result);
  372. if(result.state.toLowerCase() == "success") {}
  373. })
  374. }
  375. $(".td-call").show();
  376. n = 0;
  377. $("#top-search li i").removeClass("active");
  378. $(".DropCall").addClass("active");
  379. $(".Hold").addClass("active");
  380. $(".Transfer").addClass("active");
  381. $(".Meeting").addClass("active");
  382. clearInterval(timer);
  383. timer = setInterval(function() {
  384. n++;
  385. var m = parseInt(n / 60 % 60);
  386. var s = parseInt(n % 60);
  387. $(".thsc").text(toDub(m) + ":" + toDub(s));
  388. }, 1000);
  389. }
  390. if(data.State == '7') {
  391. $(".hwzt").text('播放忙音中'); //左下角状态显示
  392. }
  393. if(data.State == '8') {
  394. $(".hwzt").text('移除IP分机'); //左下角状态显示
  395. }
  396. if(data.State == '9') {
  397. $(".hwzt").text('通话保持中'); //左下角状态显示
  398. }
  399. }
  400. function toDub(i) {
  401. return i < 10 ? "0" + i : "" + i;
  402. }
  403. //外呼
  404. function MakeCallBack() {
  405. $("#top-search li i").removeClass("active");
  406. $(".DropCall").addClass("active");
  407. }
  408. //置忙置闲
  409. function SetState(obj) {
  410. if(obj.State == '5') {
  411. $(".SayBusy").removeClass("active");
  412. $(".SayFree").addClass("active");
  413. $(".zxzt").removeClass("bl").addClass("br");
  414. $(".hwzt").text('置忙');
  415. }
  416. if(obj.State == '2') {
  417. $(".SayBusy").addClass("active");
  418. $(".SayFree").removeClass("active");
  419. $(".zxzt").removeClass("br").addClass("bl");
  420. $(".hwzt").text('空闲');
  421. }
  422. }
  423. //置忙
  424. function SayBusyBack() {
  425. $(".SayBusy").removeClass("active");
  426. $(".SayFree").addClass("active");
  427. }
  428. //置闲
  429. function SayFreeBack() {
  430. $(".SayBusy").addClass("active");
  431. $(".SayFree").removeClass("active");
  432. }
  433. //多方通话
  434. function MeetingBack() {
  435. }
  436. //转移
  437. function TransferBack() {
  438. $("#top-search li i").removeClass("active");
  439. $(".Logout").addClass("active");
  440. $(".SayBusy").addClass("active");
  441. $(".MakeCall").addClass("active");
  442. }
  443. //保持
  444. function HoldBack() {
  445. $(".Hold").removeClass("active");
  446. $(".Retrieve").addClass("active");
  447. }
  448. //接回
  449. function RetrieveBack() {
  450. $(".Hold").addClass("active");
  451. $(".Retrieve").removeClass("active");
  452. }
  453. //监测
  454. function SubScribeBack() {
  455. var obj = $("iframe:visible")
  456. if(obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  457. window.frames[obj.attr("name")].Start();
  458. }
  459. }
  460. //取消监测
  461. function SubScribeCancelBack() {
  462. var obj = $("iframe:visible")
  463. if(obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  464. window.frames[obj.attr("name")].Stop();
  465. }
  466. }
  467. //班长监测返回状态
  468. //坐席状态
  469. function AgentStateBack(data) {
  470. var obj = $("iframe:visible")
  471. if(obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  472. window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
  473. }
  474. }
  475. //线路状态
  476. function LineStateBack(data) {
  477. var obj = $("iframe:visible")
  478. if(obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  479. window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
  480. }
  481. }
  482. //录音返回
  483. function RecordPathBack(data) {
  484. //if ($(".hidTel").val() && $(".hidCallID").val()) {
  485. // $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateLY', { callid: $(".hidCallID").val(),path:data.RecPath, "token": $.cookie("token") }, function (result) {
  486. // result = JSON.parse(result);
  487. // if (result.state.toLowerCase() == "success") {
  488. // }
  489. // })
  490. //}
  491. if($(".hidTel").val()) {
  492. $.post(huayi.config.callcenter_url + 'CallInScreen/UpdateLY', {
  493. callid: data.CallID,
  494. path: data.RecPath,
  495. "token": $.cookie("token")
  496. }, function(result) {
  497. result = JSON.parse(result);
  498. if(result.state.toLowerCase() == "success") {}
  499. })
  500. }
  501. }
  502. //获取当前的日期时间 格式“yyyy-MM-dd HH:mm:ss”
  503. function getNowFormatDate() {
  504. var date = new Date();
  505. var seperator1 = "-";
  506. var seperator2 = ":";
  507. var month = date.getMonth() + 1;
  508. var strDate = date.getDate();
  509. if(month >= 1 && month <= 9) {
  510. month = "0" + month;
  511. }
  512. if(strDate >= 0 && strDate <= 9) {
  513. strDate = "0" + strDate;
  514. }
  515. var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
  516. " " + date.getHours() + seperator2 + date.getMinutes() +
  517. seperator2 + date.getSeconds();
  518. return currentdate;
  519. }