商丘市柘城县——前端

receiptDepartment.js 5.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. $(function() {
  2. laydate.render({
  3. elem: '#phone_time',
  4. range: '~',
  5. theme: '#114a97',
  6. done: function(value, date) {
  7. partTwo(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1]);
  8. partThree(value && value.split(' ~ ')[0]);
  9. }
  10. });
  11. Ajax();
  12. $("#dep").change(function() {
  13. partTwo($('#phone_time').val() && $('#phone_time').val().split(' ~ ')[0], $('#phone_time').val() && $('#phone_time').val().split(' ~ ')[1])
  14. })
  15. })
  16. //part 1 //工单状态统计 对接完毕
  17. var phoneTimeCount = echarts.init(document.getElementById('phoneTimeCount'));
  18. phoneTimeCount.setOption({
  19. color: ['#69e1a9', '#6a91e0', '#ceba5f', '#f06e84', '#569d4e', '#7d55ba', '#ce5aba', '#345cdd', '#569d4e'],
  20. tooltip: {
  21. trigger: 'axis',
  22. axisPointer: {
  23. type: 'cross',
  24. label: {
  25. show: true,
  26. backgroundColor: '#333'
  27. }
  28. }
  29. },
  30. grid: {
  31. left: '2%',
  32. right: '5%',
  33. bottom: '6%',
  34. containLabel: true
  35. },
  36. legend: {
  37. top: 'top',
  38. left: '180px',
  39. data: [],
  40. textStyle: {
  41. color: '#00e9ff'
  42. }
  43. },
  44. xAxis: {
  45. name: '月份',
  46. data: [],
  47. axisLine: {
  48. lineStyle: {
  49. color: '#3061a2'
  50. }
  51. },
  52. axisTick: {
  53. alignWithLabel: true,
  54. show: false
  55. },
  56. axisLabel: { //横轴字体颜色
  57. show: true,
  58. textStyle: {
  59. color: '#eff0f4'
  60. }
  61. }
  62. },
  63. yAxis: {
  64. name: '(数量)',
  65. splitLine: {
  66. show: false
  67. },
  68. axisLine: {
  69. lineStyle: {
  70. color: '#3061a2'
  71. }
  72. },
  73. axisLabel: { //横轴字体颜色
  74. show: true,
  75. textStyle: {
  76. color: '#eff0f4'
  77. }
  78. }
  79. },
  80. series: []
  81. });
  82. function partOne() {
  83. $.ajax({
  84. type: "get",
  85. url: huayi.config.callcenter_url + "info/GetStateCountMonthByDate",
  86. async: true,
  87. dataType: 'json',
  88. success: function(data) {
  89. if(data.state.toLowerCase() == 'success') {
  90. // layer.close(index);
  91. var con = data.data;
  92. // var jieDans = result.data.a;
  93. var counts = con.counts;
  94. var sers = [];
  95. $(counts).each(function(i, n) {
  96. var obj = {};
  97. obj.name = con.cols[i];
  98. obj.type = "line";
  99. obj.smooth = true;
  100. obj.showAllSymbol = true;
  101. obj.symbol = "emptyCircle";
  102. obj.symbolSize = 10;
  103. obj.data = n;
  104. sers.push(obj)
  105. });
  106. phoneTimeCount.setOption({
  107. xAxis: {
  108. data: con.months
  109. },
  110. legend: {
  111. data: con.cols
  112. },
  113. series: sers
  114. });
  115. }
  116. }
  117. });
  118. }
  119. //part 2 //各部门工单情况
  120. //部门下拉框
  121. $.getJSON(huayi.config.callcenter_url + "info/GetDeptList ", function(result) {
  122. if(result.state.toLowerCase() == "success") {
  123. goodslist = result.data;
  124. bindseat($("#dep"));
  125. }
  126. });
  127. //下拉框
  128. function bindseat(obj) {
  129. obj.empty();
  130. obj.append('<option value="" >请选择部门</option>');
  131. $(goodslist).each(function(i, n) {
  132. obj.append('<option value="' + n.F_DeptId + '">' + n.F_DeptName + '</option>');
  133. })
  134. }
  135. function partTwo(starts, ends) {
  136. $.ajax({
  137. type: "get",
  138. url: huayi.config.callcenter_url + "Info/GetDeptCountByDateNew",
  139. dataType: 'json',
  140. async: true,
  141. data: {
  142. start: starts,
  143. end: ends,
  144. deptid: $('#dep').val()
  145. },
  146. success: function(data) {
  147. if(data.state.toLowerCase() == 'success') {
  148. $('.thead tr').html('');
  149. $('#scroll_table tbody').html('');
  150. var con = data.data;
  151. var thead = con[0];
  152. $.each(thead, function(k, val) {
  153. $('<td>' + k + '</td>').appendTo('.thead tr');
  154. })
  155. $(con).each(function(j, n) {
  156. var str = '<tr>'
  157. $.each(thead, function(j, m) {
  158. console.log();
  159. $.each(n, function(k, val) {
  160. if(j == k) {
  161. if(val == '') {
  162. val = 0;
  163. }
  164. str += '<td>' + val + '</td>'
  165. }
  166. })
  167. })
  168. str += '</tr>';
  169. $('#scroll_table tbody').append(str);
  170. })
  171. $("#scroll_table").Scroll({
  172. line: 1,
  173. speed: 500,
  174. timer: 2000
  175. });
  176. }
  177. }
  178. });
  179. }
  180. // part3 工单处理时间分布
  181. var sitProportion = echarts.init(document.getElementById('sitProportion')); //坐席闲忙比例
  182. sitProportion.setOption({
  183. color: ['#4ab7c7', '#2484d9', '#2e39c1'],
  184. tooltip: {
  185. trigger: 'axis',
  186. axisPointer: {
  187. type: 'shadow',
  188. label: {
  189. show: true,
  190. backgroundColor: '#333'
  191. }
  192. },
  193. formatter: function(datas) {
  194. var res = datas[0].name + '<br/>',
  195. val;
  196. for(var i = 0, length = datas.length; i < length; i++) {
  197. // val = (datas[i].value) + '%';
  198. val = (datas[i].value);
  199. res += datas[i].seriesName + ':' + val + '<br/>';
  200. }
  201. return res;
  202. }
  203. },
  204. legend: {
  205. top: 'top',
  206. left: '165px',
  207. data: ['受理工单数', '处理工单数'],
  208. textStyle: {
  209. color: '#00e9ff'
  210. }
  211. },
  212. grid: {
  213. left: '2%',
  214. right: '5%',
  215. bottom: '5%',
  216. containLabel: true
  217. },
  218. xAxis: {
  219. name: '时',
  220. data: [],
  221. axisLine: {
  222. lineStyle: {
  223. color: '#3061a2'
  224. }
  225. },
  226. axisTick: {
  227. alignWithLabel: true,
  228. show: false
  229. },
  230. axisLabel: { //横轴字体颜色
  231. show: true,
  232. textStyle: {
  233. color: '#eff0f4'
  234. }
  235. }
  236. },
  237. yAxis: {
  238. name: '(数量)',
  239. splitLine: {
  240. show: false
  241. },
  242. axisLine: {
  243. lineStyle: {
  244. color: '#3061a2'
  245. }
  246. },
  247. axisLabel: { //横轴字体颜色
  248. show: true,
  249. textStyle: {
  250. color: '#eff0f4'
  251. }
  252. }
  253. },
  254. series: [{
  255. name: '受理工单数',
  256. type: 'bar',
  257. barGap: 0,
  258. data: []
  259. }, {
  260. name: '处理工单数',
  261. type: 'bar',
  262. data: []
  263. }]
  264. });
  265. function partThree(dates) {
  266. $.ajax({
  267. type: "get",
  268. url: huayi.config.callcenter_url + "info/GetDealCount24ByDate",
  269. dataType: 'json',
  270. async: true,
  271. data: {
  272. date: dates,
  273. },
  274. success: function(data) {
  275. if(data.state.toLowerCase() == 'success') {
  276. var con = data.data;
  277. sitProportion.setOption({
  278. xAxis: {
  279. data: con.hours
  280. },
  281. series: [{
  282. data: con.acounts
  283. }, {
  284. data: con.fcounts
  285. }]
  286. });
  287. }
  288. }
  289. });
  290. }
  291. function Ajax() {
  292. partOne()
  293. partTwo($('#phone_time').val() && $('#phone_time').val().split(' ~ ')[0], $('#phone_time').val() && $('#phone_time').val().split(' ~ ')[1]);
  294. partThree($('#phone_time').val() && $('#phone_time').val().split(' ~ ')[0], $('#phone_time').val() && $('#phone_time').val().split(' ~ ')[1]);
  295. }