Нет описания

ConnectLoss.js 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. var myChart;
  2. var tabIndex = 0;
  3. $(document).ready(function() {
  4. layui.use('laydate', function() {
  5. var laydate = layui.laydate;
  6. //日期
  7. laydate.render({
  8. elem: '#sc_times',
  9. range: "~",
  10. theme: '#249fea',
  11. });
  12. });
  13. //tab切换
  14. $('.hu-tab li').click(function() {
  15. $(this).addClass('active')
  16. .siblings().removeClass('active');
  17. tabIndex = $(this).index();
  18. $('.hu-content >div').eq(tabIndex).show()
  19. .siblings().hide();
  20. });
  21. //柱形图
  22. //基于准备好的dom,初始化echarts实例
  23. myChart = echarts.init(document.getElementById('huData'));
  24. var option = {
  25. tooltip: {
  26. trigger: 'axis',
  27. },
  28. legend: {
  29. data: ['接通次数', '呼损次数', '接通率', '呼损率'],
  30. bottom: 60
  31. },
  32. grid: {
  33. bottom: 180
  34. },
  35. dataZoom: [{ // 这个dataZoom组件,默认控制x轴。
  36. type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
  37. xAxisIndex: 0,
  38. start: 0, // 左边在 0% 的位置。
  39. end: 100, // 右边在 100% 的位置。
  40. bottom: 100,
  41. },
  42. ],
  43. xAxis: [{
  44. type: 'category',
  45. data: [],
  46. axisPointer: {
  47. type: ''
  48. },
  49. axisLabel: {
  50. rotate: 30,
  51. interval: 0
  52. }
  53. }],
  54. yAxis: [{
  55. type: 'value',
  56. name: '通话次数(次)',
  57. nameLocation: 'end',
  58. nameGap: 40,
  59. // min: 0,
  60. // max:300,
  61. interval: 50,
  62. axisLabel: {
  63. formatter: '{value} '
  64. }
  65. },
  66. {
  67. type: 'value',
  68. name: '百分比(%)',
  69. nameLocation: 'end',
  70. nameGap: 35,
  71. min: 0,
  72. max: 100,
  73. interval: 10,
  74. axisLabel: {
  75. formatter: '{value} '
  76. }
  77. }
  78. ],
  79. series: [{
  80. type: 'bar',
  81. name: '接通次数',
  82. data: []
  83. },
  84. {
  85. type: 'bar',
  86. name: '呼损次数',
  87. data: []
  88. },
  89. {
  90. type: 'line',
  91. name: '接通率',
  92. data: [],
  93. yAxisIndex: 1,
  94. },
  95. {
  96. type: 'line',
  97. name: '呼损率',
  98. data: [],
  99. yAxisIndex: 1,
  100. }
  101. ],
  102. color: ['#1ab394', '#fbbe5b', '#88ebc4', '#fa957f']
  103. }
  104. // 使用刚指定的配置项和数据显示图表。
  105. myChart.setOption(option);
  106. //搜索事件
  107. $("#sc_btns").click(function() {
  108. getDataList();
  109. });
  110. getDataList();
  111. })
  112. function getDataList() {
  113. var loadindex = layer.load();
  114. $.ajax({
  115. type:"get",
  116. url:huayi.config.callcenter_url + "callcenterapi/api/switchedlosscall/getdatalist",
  117. async:true,
  118. dataType:'json',
  119. data:{
  120. stime: $('#sc_times').val() && $('#sc_times').val().split(' ~ ')[0],
  121. endtime: $('#sc_times').val() && $('#sc_times').val().split(' ~ ')[1]
  122. },
  123. success:function(data){
  124. if(data.state.toLowerCase() == "success"){
  125. layui.use('table', function() {
  126. var table = layui.table;
  127. //方法级渲染
  128. table.render({
  129. elem: '#t_callTotal',
  130. skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格)
  131. even: true, //开启隔行背景
  132. size: 'lg', //sm,lg尺寸的表格
  133. cellMinWidth: 100,
  134. page: true,
  135. cols: [
  136. [{
  137. field: '日期',
  138. title: '日期',
  139. align: 'center',
  140. fixed: true,
  141. sort: true,
  142. width: 150,
  143. }, {
  144. field: '接通次数',
  145. title: '接通次数',
  146. align: 'center',
  147. width: '',
  148. },
  149. {
  150. field: '呼损次数',
  151. title: '呼损次数',
  152. align: 'center',
  153. width: '',
  154. },
  155. {
  156. field: '接通率',
  157. title: '接通率(%)',
  158. align: 'center',
  159. width: '',
  160. },
  161. {
  162. field: '呼损率',
  163. title: '呼损率(%)',
  164. align: 'center',
  165. width: '',
  166. },
  167. ]
  168. ],
  169. data: data.data,
  170. height: 'full-230'
  171. });
  172. });
  173. myChart.setOption({
  174. xAxis: {
  175. data: (function() {
  176. var res = [];
  177. for(var i = 0; i < data.data.length; i++) {
  178. res.push(data.data[i].日期);
  179. }
  180. return res;
  181. })(),
  182. },
  183. series: (function() {
  184. var sres = [],
  185. sres1 = [],
  186. sres2 = [],
  187. sres3 = [];
  188. var sobj = [{
  189. data: sres,
  190. },
  191. {
  192. data: sres1,
  193. },
  194. {
  195. data: sres2,
  196. },
  197. {
  198. data: sres3,
  199. },
  200. ];
  201. for(var i = 0; i < data.data.length; i++) {
  202. sres.push(data.data[i].接通次数);
  203. sres1.push(data.data[i].呼损次数);
  204. sres2.push(data.data[i].接通率);
  205. sres3.push(data.data[i].呼损率);
  206. }
  207. return sobj;
  208. })(),
  209. });
  210. }
  211. }
  212. }).then(function() {
  213. layer.close(loadindex);
  214. });
  215. }
  216. function getNowYear() {
  217. //获取当前年份
  218. var myDate = new Date();
  219. return myDate.getFullYear(); //获取完整的年份(4位,1970-????)
  220. }
  221. //导出
  222. function dcexcel(obj) {
  223. var beginyear=$('#sc_times').val() && $('#sc_times').val().split(' ~ ')[0];
  224. var endyear=$('#sc_times').val() && $('#sc_times').val().split(' ~ ')[1];
  225. var url=huayi.config.callcenter_url +"callcenterapi/api/switchedlosscall/exportexcel?stime="+ beginyear +"&endtime="+endyear ;
  226. obj.href = url;
  227. }