Nessuna descrizione

TelephoneDetails.js 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895
  1. var areaOneVal = helper.cookies.get("areaOneVal");
  2. var areaOneText = helper.cookies.get("areaOneText");
  3. // 如果浏览器不支持websocket,会使用这个flash自动模拟websocket协议,此过程对开发者透明
  4. WEB_SOCKET_SWF_LOCATION = "./js/websocket/WebSocketMain.swf";
  5. // 开启flash的websocket debug
  6. WEB_SOCKET_DEBUG = true;
  7. var ws, n = 0,
  8. timer;
  9. var lockReconnect = false; //避免重复连接
  10. var obj = {};
  11. var Statess;
  12. var cls = 0;
  13. var lasttime = new Date().getTime();
  14. var cons;
  15. var person='';
  16. if (areaOneVal) {
  17. var areaOneVal = helper.cookies.get("areaOneVal");
  18. } else{
  19. var areaOneVal="sqs12345"
  20. }
  21. //创建scoket连接
  22. function createWebSocket() {
  23. try {
  24. Connect();
  25. } catch (e) {
  26. reconnect();
  27. }
  28. }
  29. //连接
  30. function Connect() {
  31. // debugger
  32. ws = new WebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
  33. ws.onopen = function () {
  34. console.log(new Date() + " " + "建立连接");
  35. //心跳检测重置
  36. heartCheck.reset().start();
  37. cls = 0;
  38. // $(".Login").addClass("active");
  39. lasttime = new Date().getTime();
  40. join()
  41. SayBusy()
  42. //自动签入
  43. // if ($.cookie("socket_state") != null) {
  44. // SetLogin($.cookie("socket_state"));
  45. // }
  46. //$(".hwzt").text('连接成功!');
  47. };
  48. //接收到消息的回调方法
  49. ws.onmessage = function (evt) {
  50. //如果获取到消息,心跳检测重置
  51. //拿到任何消息都说明当前连接是正常的
  52. heartCheck.reset().start();
  53. var myDate = new Date();
  54. console.log(myDate + " receive " + evt.data);
  55. var data = JSON.parse(evt.data)[0];
  56. if (data) {
  57. var rlt = data.Result;
  58. var type = data.Type;
  59. if (rlt == true) {
  60. switch (type.toLowerCase()) {
  61. //case "heart": HeartBack(); break;//心跳
  62. case "login":
  63. LoginBack();
  64. break; //签入
  65. // case "logout":
  66. // LogoutBack();
  67. // break; //签出
  68. // case "dropcall":
  69. // DropCallBack();
  70. // break; //挂断
  71. case "makecall":
  72. MakeCallBack();
  73. break; //外呼
  74. case "setstate":
  75. SetState(data);
  76. break; //置忙置闲
  77. //case "saybusy": SayBusyBack(data); break;
  78. //case "sayfree": SayFreeBack(data); break;
  79. case "meeting":
  80. MeetingBack();
  81. break; //多方通话
  82. case "transfer":
  83. TransferBack();
  84. break; //转移
  85. case "hold":
  86. HoldBack();
  87. break; //保持
  88. case "retrieve":
  89. RetrieveBack();
  90. break; //接回
  91. // case "incoming":
  92. // IncomingBack(data);
  93. // break; //来电
  94. case "subscribe":
  95. SubScribeBack();
  96. break; //监测
  97. case "subscribecancel":
  98. SubScribeCancelBack();
  99. break; //停止监测
  100. case "agentstate":
  101. AgentStateBack(data);
  102. break; //坐席状态
  103. case "linestate":
  104. LineStateBack(data);
  105. break; //线路状态
  106. case "motorsetstate":
  107. SayFreeBack();
  108. break; //班长置闲
  109. // case "linestateagent":
  110. // LineStateAgentBack(data);
  111. // break; //线路状态通知
  112. case "agentstateagent":
  113. AgentStateAgentBack(data);
  114. break; //坐席状态通知
  115. //case "callid":
  116. // CallIDBack(data);
  117. // break; //获取callid
  118. //case "recordpath":
  119. // RecordPathBack(data);
  120. // break; //录音返回
  121. case "getagentlist":
  122. GetAgentListBack(data);
  123. break;//在线坐席信息
  124. case "confirmtransfer":
  125. ConfirmTransfer(data);
  126. break;//确认转移 取消转移
  127. case "consult":
  128. ConsultationCall();
  129. break;//协商呼叫
  130. }
  131. } else {
  132. if (rlt == false) {
  133. //layer.confirm('操作失败!', {
  134. // btn: ['确定']
  135. //});
  136. $(".hwzt").text('操作失败!');
  137. } else {
  138. $(".hwzt").text(rlt);
  139. //layer.confirm(rlt, {
  140. // btn: ['确定']
  141. //});
  142. if(type.toLowerCase()=='waitcount') {
  143. backstageQueue(data);
  144. }
  145. }
  146. }
  147. }
  148. };
  149. //连接关闭的回调方法
  150. ws.onclose = function (evt) {
  151. if (cls == 0) {
  152. cls = 1;
  153. //console.log("连接关闭!");
  154. //layer.confirm('连接关闭!', {
  155. // btn: ['确定']
  156. //});
  157. $(".hwzt").text('连接关闭!');
  158. $("#top-search li i").removeClass("active");
  159. reconnect();
  160. }
  161. };
  162. //连接发生错误的回调方法
  163. ws.onerror = function (evt) {
  164. //产生异常
  165. $(".hwzt").text('连接出现异常!');
  166. console.log(ws);
  167. if (ws == null || ws.readyState != ws.OPEN) {
  168. console.log(new Date() + "开始重连");
  169. reconnect();
  170. }
  171. };
  172. }
  173. //重连
  174. function reconnect() {
  175. if (lockReconnect) return;
  176. lockReconnect = true;
  177. //没连接上会一直重连,设置延迟避免请求过多
  178. setTimeout(function () {
  179. console.log(new Date() + " " + "重连中……");
  180. createWebSocket("ws://" + huayi.config.socket_ip + ":" + huayi.config.socket_port);
  181. lockReconnect = false;
  182. SayBusy()
  183. }, 2000);
  184. }
  185. //发送
  186. function Send() {
  187. if (ws.readyState != ws.OPEN) {
  188. reconnect();
  189. }
  190. if (ws.readyState == ws.OPEN) {
  191. console.log(new Date() + " send " + JSON.stringify(obj));
  192. ws.send(JSON.stringify(obj));
  193. }
  194. }
  195. //心跳检测
  196. var heartCheck = {
  197. timeout: 25000, //25秒
  198. timeoutObj: null,
  199. serverTimeoutObj: null,
  200. reset: function () {
  201. clearTimeout(this.timeoutObj);
  202. clearTimeout(this.serverTimeoutObj);
  203. return this;
  204. },
  205. start: function () {
  206. var self = this;
  207. this.timeoutObj = setTimeout(function () {
  208. //这里发送一个心跳,后端收到后,返回一个心跳消息,
  209. //onmessage拿到返回的心跳就说明连接正常
  210. obj.Type = "Heart";
  211. Send();
  212. self.serverTimeoutObj = setTimeout(function () { //如果超过一定时间还没重置,说明后端主动断开了
  213. ws.close(); //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
  214. }, self.timeout)
  215. }, this.timeout)
  216. }
  217. }
  218. // 签入
  219. function SayBusy() {
  220. obj.Type = "SayBusy";
  221. Send();
  222. console.log('置忙')
  223. }
  224. //签入
  225. function LoginBack() {
  226. obj.Type = "SayBusy";
  227. Send();
  228. console.log('置忙')
  229. }
  230. // 点击签入
  231. function join(){
  232. obj.Type ='Login',
  233. obj.AgentID='9898',
  234. obj.AgentExten='1015',
  235. obj.AgentType='0',
  236. obj.AgentGroup='364'
  237. // console.log(scoketDatas)
  238. Send()
  239. }
  240. //监测
  241. function SubScribeBack() {
  242. var obj = $("iframe:visible")
  243. if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  244. window.frames[obj.attr("name")].Start();
  245. }
  246. if (obj.attr("data-id") == "./TelCall/zxKong.html") {
  247. window.frames[obj.attr("name")].Start();
  248. }
  249. }
  250. //取消监测
  251. function SubScribeCancelBack() {
  252. // var obj = $("iframe:visible")
  253. // if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  254. // window.frames[obj.attr("name")].Stop();
  255. // }
  256. // if (obj.attr("data-id") == "./TelCall/zxKong.html") {
  257. // window.frames[obj.attr("name")].Stop();
  258. // }
  259. $('.yuan_one').addClass("lx")
  260. $('.yuan_two').addClass("lx")
  261. }
  262. //班长监测返回状态
  263. //坐席状态
  264. function AgentStateBack(data) {
  265. $('.yuan_one').removeClass("lx")
  266. $('.yuan_two').removeClass("lx")
  267. $(cons).each(function (i, n) {
  268. if(n.F_UserCode==data.AgentID){
  269. if(data.State=='0'){
  270. $('.yuan_one').eq(i).addClass("lx")
  271. $('.yuan_two').eq(i).addClass("lx")
  272. }else if(data.State=='2'){
  273. $('.yuan_one').eq(i).addClass("kx")
  274. $('.yuan_two').eq(i).addClass("kx")
  275. }else if(data.State=='3'){
  276. $('.yuan_one').eq(i).addClass("hc")
  277. $('.yuan_two').eq(i).addClass("hc")
  278. }else if(data.State=='4'){
  279. $('.yuan_one').eq(i).addClass("hh")
  280. $('.yuan_two').eq(i).addClass("hh")
  281. }else if(data.State=='5'){
  282. $('.yuan_one').eq(i).addClass("ml")
  283. $('.yuan_two').eq(i).addClass("ml")
  284. }else if(data.State=='6'){
  285. $('.yuan_one').eq(i).addClass("zl")
  286. $('.yuan_two').eq(i).addClass("zl")
  287. }
  288. }
  289. })
  290. // var obj = $("iframe:visible")
  291. // if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  292. // window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
  293. // }
  294. // if (obj.attr("data-id") == "./TelCall/zxKong.html") {
  295. // window.frames[obj.attr("name")].UpdateAgentState(data.AgentID, data.State);
  296. // }
  297. }
  298. //线路状态
  299. function LineStateBack(data) {
  300. var obj = $("iframe:visible")
  301. if (obj.attr("data-id") == "./TelCall/SeatMonitor.html") {
  302. window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
  303. }
  304. if (obj.attr("data-id") == "./TelCall/zxKong.html") {
  305. window.frames[obj.attr("name")].UpdateLineState(data.AgentID, data.State);
  306. }
  307. }
  308. //后台排队
  309. function backstageQueue(data) {
  310. person=data.WaitCount
  311. console.log(person)
  312. // if (obj.attr("data-id") == "./widgets.html") {
  313. // window.frames[obj.attr("name")].realTimeMonitorQueue(data.WaitCount);
  314. // }
  315. }
  316. //坐席状态通知
  317. function AgentStateAgentBack(data) {
  318. var strr = '';
  319. console.log('坐席状态'+ data.State );
  320. switch (data.State+"") {
  321. case "0":
  322. strr = "离线";
  323. $(".zxzt").removeClass("br").removeClass("bl").removeClass("by");
  324. break; //离线
  325. case "1":
  326. break; //登录中
  327. case "2":
  328. strr = "空闲";
  329. $(".zxzt").removeClass("br").removeClass("by").addClass("bl");
  330. break; //空闲
  331. case "3":
  332. strr = "通话中";
  333. $(".zxzt").removeClass("bl").removeClass("by").addClass("br");
  334. break; //通话中
  335. case "4":
  336. strr = "话后处理中";
  337. $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
  338. break; //话后处理中
  339. case "5":
  340. strr = "忙碌";
  341. $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
  342. break; //小休
  343. case "6":
  344. strr = "振铃";
  345. break; //被请求
  346. case "7":
  347. strr = "注销";
  348. $(".zxzt").removeClass("br").removeClass("bl").removeClass("by");
  349. break; //注销
  350. }
  351. $(".hxzt").text(strr);
  352. }
  353. //置忙 置闲
  354. function SetState(obj) {
  355. if (obj.State == '5') {
  356. $(".SayBusy").removeClass("active");
  357. $(".SayFree").addClass("active");
  358. $(".zxzt").removeClass("bl").removeClass("br").addClass("by");
  359. $(".hwzt").text('忙碌');
  360. $("#isml").val(1);
  361. // SetStateCookie(1);
  362. }
  363. if (obj.State == '2') {
  364. $(".SayBusy").addClass("active");
  365. $(".SayFree").removeClass("active");
  366. $(".zxzt").removeClass("br").removeClass("by").addClass("bl");
  367. $(".hwzt").text('空闲');
  368. $("#isml").val(0);
  369. // SetStateCookie(0);
  370. }
  371. }
  372. $(function() {
  373. createWebSocket()
  374. SayBusy()
  375. laydate.render({
  376. elem: '#time1',
  377. range: '~',
  378. theme: '#114a97',
  379. done: function(value, date) {
  380. var areaOneVal=$(".areaOne").val();
  381. partOne(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],areaOneVal);
  382. }
  383. });
  384. laydate.render({
  385. elem: '#time2',
  386. theme: '#114a97',
  387. done: function(value, date) {
  388. var areaOneVal=$(".areaOne").val();
  389. partTwo(value,areaOneVal)
  390. }
  391. });
  392. laydate.render({
  393. elem: '#time3',
  394. theme: '#114a97',
  395. done: function(value, date) {
  396. var areaOneVal=$(".areaOne").val();
  397. partThree(value,areaOneVal)
  398. }
  399. });
  400. Ajax();
  401. $(".areaOne").change(function() {
  402. var areaOneVal=$(this).val();
  403. var areaOneText=$(".areaOne").find("option:selected").text();
  404. helper.cookies.set("areaOneVal", areaOneVal, 7);
  405. helper.cookies.set("areaOneText", areaOneText, 7);
  406. partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1],areaOneVal);
  407. partTwo($('#time2').val(),areaOneVal);
  408. partThree( $('#time3').val(),areaOneVal);
  409. // Ajax()
  410. });
  411. })
  412. // 跳轉
  413. $(".index").click(function(){
  414. window.open('detail.html','_self')
  415. })
  416. $(".second").click(function(){
  417. window.open('second.html','_self')
  418. })
  419. $(".third").click(function(){
  420. window.open('third.html','_self')
  421. })
  422. $(".fourth").click(function(){
  423. window.open('fourth.html','_self')
  424. })
  425. $(".nav_middle").click(function(){
  426. window.open('index.html','_self')
  427. })
  428. $("#department").click(function(){
  429. window.open('receiptDepartment.html','_self')
  430. })
  431. $("#sourceChannel").click(function(){
  432. window.open('sourceChannel.html','_self')
  433. })
  434. // $("#call").click(function(){
  435. // window.open('TelephoneDetails.html','_self')
  436. // })
  437. $("#complaint").click(function(){
  438. window.open('complaintsReport.html','_self')
  439. })
  440. //区县筛选
  441. //deprtment();
  442. function deprtment() {
  443. $.getJSON( huayi.config.callcenter_url +"CountyBranch/GetBranchListS", function(result) {
  444. if(result.state.toLowerCase() == "success") {
  445. goodslist = result.data;
  446. // 第五屏
  447. $(".areaOne").empty();
  448. $(goodslist).each(function(i, n) {
  449. $('<option value="' + n.F_Code
  450. + '">' + n.F_Name
  451. + '</option>').appendTo($(".areaOne"));
  452. });
  453. if (areaOneVal) {
  454. $(".areaOne").val(areaOneVal);
  455. }
  456. }
  457. });
  458. }
  459. // var sitProportion = echarts.init(document.getElementById('sitProportion')); //坐席闲忙比例
  460. // sitProportion.setOption({
  461. // color: ['#4ab7c7', '#2484d9', '#2e39c1'],
  462. // tooltip: {
  463. // trigger: 'axis',
  464. // axisPointer: {
  465. // type: 'shadow',
  466. // label: {
  467. // show: true,
  468. // backgroundColor: '#333'
  469. // }
  470. // },
  471. // formatter: function(datas) {
  472. // var res = datas[0].name + '<br/>',
  473. // val;
  474. // for(var i = 0, length = datas.length; i < length; i++) {
  475. // val = (datas[i].value) + '%';
  476. // res += datas[i].seriesName + ':' + val + '<br/>';
  477. // }
  478. // return res;
  479. // }
  480. // },
  481. // legend: {
  482. // top: 'top',
  483. // left: '135px',
  484. // data: ['置忙', '通话', '空闲'],
  485. // textStyle: {
  486. // color: '#00e9ff'
  487. // }
  488. // },
  489. // grid: {
  490. // left: '1%',
  491. // right: '3%',
  492. // bottom: '5%',
  493. // containLabel: true
  494. // },
  495. // xAxis: {
  496. // name: '时',
  497. // data: [],
  498. // axisLine: {
  499. // lineStyle: {
  500. // color: '#3061a2'
  501. // }
  502. // },
  503. // axisTick: {
  504. // alignWithLabel: true,
  505. // show: false
  506. // },
  507. // axisLabel: { //横轴字体颜色
  508. // show: true,
  509. // textStyle: {
  510. // color: '#eff0f4'
  511. // }
  512. // }
  513. // },
  514. // yAxis: {
  515. // name: '(比率)',
  516. // splitLine: {
  517. // show: false
  518. // },
  519. // axisLine: {
  520. // lineStyle: {
  521. // color: '#3061a2'
  522. // }
  523. // },
  524. // axisLabel: { //横轴字体颜色
  525. // show: true,
  526. // textStyle: {
  527. // color: '#eff0f4'
  528. // }
  529. // }
  530. // },
  531. // series: [{
  532. // name: '置忙',
  533. // type: 'bar',
  534. // data: []
  535. // }, {
  536. // name: '通话',
  537. // type: 'bar',
  538. // data: []
  539. // }, {
  540. // name: '空闲',
  541. // type: 'bar',
  542. // data: []
  543. // }]
  544. // });
  545. function partOne(starts, ends,areaOneVal) {
  546. $.ajax({
  547. type: "get",
  548. url: huayi.config.callcenter_url + "SeatMonitoring/getlist",
  549. async: true,
  550. dataType: 'json',
  551. data: {
  552. // start: starts,
  553. // end: ends,
  554. // branchcode:areaOneVal
  555. },
  556. success: function(data) {
  557. if(data.state.toLowerCase() == 'success') {
  558. // layer.close(index);
  559. cons = data.data;
  560. $(".users").html('')
  561. $(cons).each(function(i, n) {
  562. var str=' <li class="touxiang"><ol class="tx"><li class="person"><span class="yuan_one "></span><span class="yuan_two"></span></li><li class="userid">'+n.F_UserCode+'</li></ol></li>';
  563. var a=$(str)
  564. a.appendTo($(".users"))
  565. })
  566. }
  567. }
  568. });
  569. }
  570. // 开始检测
  571. $(".kqc").click(function () {
  572. // if (!$(this).hasClass("dis")) {
  573. $('.kqc').addClass('kqc_active')
  574. $('.jqc').removeClass('dis')
  575. $(cons).each(function (i, n) {
  576. obj.Type = "SubScribe";
  577. obj.SubParmer = n.F_WorkNumber * 1;
  578. obj.SubType = "0";//根据工号订阅坐席状态
  579. Send();
  580. obj.SubType = "1";//根据工号订阅线路状态
  581. Send();
  582. })
  583. //top.obj.Type = "SubScribe";
  584. //top.obj.SubParmer = "8003";
  585. //top.obj.SubType = "0";//根据工号订阅坐席状态
  586. //top.Send();
  587. //top.obj.SubType = "1";//根据工号订阅线路状态
  588. //top.Send();
  589. // }
  590. })
  591. //停止监测
  592. $(".jqc").click(function () {
  593. $('.kqc').removeClass('kqc_active')
  594. $('.jqc').addClass('dis')
  595. //$(user).each(function (i, n) {
  596. // obj.Type = "SubScribeCancel";
  597. // obj.SubParmer = n.F_WorkNumber;
  598. // obj.SubType = "0";//根据工号取消订阅坐席状态
  599. // Send();
  600. // obj.SubType = "1";//根据工号取消订阅线路状态
  601. // Send();
  602. //})
  603. obj.Type = "SubScribeCancel";
  604. obj.SubParmer = "-1";
  605. obj.SubType = "0";//根据工号取消订阅坐席状态
  606. Send();
  607. obj.SubType = "1";//根据工号取消订阅线路状态
  608. Send();
  609. })
  610. //part 2
  611. var phoneTimeCount = echarts.init(document.getElementById('phoneTimeCount'));
  612. phoneTimeCount.setOption({
  613. color: ['#ceba5f', '#4da991', '#f06e84', '#6a91e0'],
  614. tooltip: {
  615. trigger: 'axis',
  616. axisPointer: {
  617. type: 'cross',
  618. label: {
  619. show: true,
  620. backgroundColor: '#333'
  621. }
  622. }
  623. },
  624. grid: {
  625. left: '2%',
  626. right: '5%',
  627. bottom: '6%',
  628. containLabel: true
  629. },
  630. legend: {
  631. top: 'top',
  632. left: '180px',
  633. data: ["来电数量", "接通数量", "放弃数量", "黑名单拒接数量"],
  634. textStyle: {
  635. color: '#00e9ff'
  636. }
  637. },
  638. xAxis: {
  639. name: '时',
  640. data: [],
  641. axisLine: {
  642. lineStyle: {
  643. color: '#3061a2'
  644. }
  645. },
  646. axisTick: {
  647. alignWithLabel: true,
  648. show: false
  649. },
  650. axisLabel: { //横轴字体颜色
  651. show: true,
  652. textStyle: {
  653. color: '#eff0f4'
  654. }
  655. }
  656. },
  657. yAxis: {
  658. name: '数量',
  659. splitLine: {
  660. show: false
  661. },
  662. axisLine: {
  663. lineStyle: {
  664. color: '#3061a2'
  665. }
  666. },
  667. axisLabel: { //横轴字体颜色
  668. show: true,
  669. textStyle: {
  670. color: '#eff0f4'
  671. }
  672. }
  673. },
  674. series: []
  675. });
  676. function partTwo(dates,areaOneVal) {
  677. // var index = layer.load(1, {
  678. // shade: [0.5, '#030303'] //0.1透明度的白色背景
  679. // });
  680. $.ajax({
  681. type: "get",
  682. url: huayi.config.callcenter_url + "info/GetTelCount24ByDate",
  683. async: true,
  684. dataType: "json",
  685. data: {
  686. date: dates,
  687. branchcode:areaOneVal
  688. },
  689. success: function(data) {
  690. if(data.state.toLowerCase() == "success") {
  691. // layer.close(index);
  692. var con = data.data;
  693. phoneTimeCount.setOption({
  694. xAxis: {
  695. data: con.hours
  696. },
  697. series: [{
  698. name: "来电数量",
  699. type: "line",
  700. smooth: true,
  701. showAllSymbol: true,
  702. symbol: "emptyCircle",
  703. symbolSize: 10,
  704. data: con.rcounts
  705. }, {
  706. name: "接通数量",
  707. type: "line",
  708. smooth: true,
  709. showAllSymbol: true,
  710. symbol: "emptyCircle",
  711. symbolSize: 10,
  712. data: con.ccounts
  713. },
  714. {
  715. name: "放弃数量",
  716. type: "line",
  717. smooth: true,
  718. showAllSymbol: true,
  719. symbol: "emptyCircle",
  720. symbolSize: 10,
  721. data: con.gcounts
  722. },
  723. {
  724. name: "黑名单拒接数量",
  725. type: "line",
  726. smooth: true,
  727. showAllSymbol: true,
  728. symbol: "emptyCircle",
  729. symbolSize: 10,
  730. data: con.scounts
  731. }
  732. ]
  733. })
  734. }
  735. }
  736. });
  737. }
  738. //part3
  739. var todyPhoneCount = echarts.init(document.getElementById('todyPhoneCount'));
  740. todyPhoneCount.setOption({
  741. tooltip: {
  742. trigger: 'axis',
  743. axisPointer: {
  744. type: false,
  745. label: {
  746. show: true,
  747. backgroundColor: '#030917'
  748. }
  749. },
  750. },
  751. xAxis: {
  752. name: '类型',
  753. data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)","排队人数"],
  754. axisLine: {
  755. lineStyle: {
  756. color: '#3061a2'
  757. }
  758. },
  759. axisTick: {
  760. alignWithLabel: true,
  761. show: false
  762. },
  763. axisLabel: { //横轴字体颜色
  764. show: true,
  765. textStyle: {
  766. color: '#eff0f4'
  767. }
  768. }
  769. },
  770. yAxis: {
  771. name: '数量',
  772. splitLine: {
  773. show: false
  774. },
  775. axisLine: {
  776. lineStyle: {
  777. color: '#3061a2'
  778. }
  779. },
  780. axisLabel: { //横轴字体颜色
  781. show: true,
  782. textStyle: {
  783. color: '#eff0f4'
  784. }
  785. }
  786. },
  787. series: [{
  788. name: '数量',
  789. type: 'bar',
  790. barWidth: 18,
  791. itemStyle: {
  792. normal: {
  793. color: function(params) {
  794. // build a color map as your need.
  795. var colorList = [
  796. '#368cab', '#54b793', '#4b6ab0', '#2531a9','#a93d19'
  797. ];
  798. return colorList[params.dataIndex]
  799. }
  800. }
  801. },
  802. label: {
  803. normal: {
  804. show: true,
  805. position: 'top', //顶部数据显示位置
  806. textStyle: {
  807. color: '#fff' //顶部数据颜色
  808. },
  809. formatter: '{c}' // 这里是数据展示的时候显示的数据
  810. }
  811. },
  812. data: []
  813. }]
  814. });
  815. function partThree(dates,areaOneVal) {
  816. $.ajax({
  817. type: "get",
  818. url: huayi.config.callcenter_url + "info/GetTelCountByDate",
  819. async: true,
  820. dataType: "json",
  821. data: {
  822. date: dates,
  823. branchcode:areaOneVal
  824. },
  825. success: function(data) {
  826. if(data.state.toLowerCase() == "success") {
  827. // layer.close(index);
  828. var con = data.data;
  829. con.person=person
  830. console.log(con)
  831. todyPhoneCount.setOption({
  832. series: [{
  833. data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes,con.person]
  834. }]
  835. })
  836. }
  837. }
  838. });
  839. }
  840. function Ajax() {
  841. var areaOneVal = helper.cookies.get("areaOneVal");
  842. var areaOneText = helper.cookies.get("areaOneText");
  843. partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1],areaOneVal);
  844. partTwo($('#time2').val(),areaOneVal)
  845. partThree($('#time3').val(),areaOneVal);
  846. }