商丘12345 前端

complaintsReport.js 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. var areaOneVal = helper.cookies.get("areaOneVal");
  2. var areaOneText = helper.cookies.get("areaOneText");
  3. if (areaOneVal) {
  4. var areaOneVal = helper.cookies.get("areaOneVal");
  5. } else{
  6. var areaOneVal="sqs12345"
  7. }
  8. $(function() {
  9. laydate.render({
  10. elem: '#time1',
  11. range: '~',
  12. format: 'yyyy-MM',
  13. type: 'month',
  14. theme: '#114a97',
  15. done: function(value, date) {
  16. var areaOneVal=$(".areaOne").val();
  17. partOne(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],areaOneVal)
  18. var start=value.split(' ~ ')[0];
  19. var end=value.split(' ~ ')[1];
  20. }
  21. });
  22. laydate.render({
  23. elem: '#time2',
  24. range: '~',
  25. format: 'yyyy-MM-dd',
  26. theme: '#114a97',
  27. done: function(value, date) {
  28. var areaOneVal=$(".areaOne").val();
  29. partTwo(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],areaOneVal)
  30. }
  31. });
  32. laydate.render({
  33. elem: '#time3',
  34. range: '~',
  35. theme: '#114a97',
  36. done: function(value, date) {
  37. var areaOneVal=$(".areaOne").val();
  38. partThree(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],areaOneVal)
  39. }
  40. });
  41. Ajax()
  42. $(".areaOne").change(function() {
  43. var areaOneVal=$(this).val();
  44. var areaOneText=$(".areaOne").find("option:selected").text();
  45. helper.cookies.set("areaOneVal", areaOneVal, 7);
  46. helper.cookies.set("areaOneText", areaOneText, 7);
  47. partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1],areaOneVal);
  48. partTwo($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1],areaOneVal);
  49. partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal);
  50. // Ajax()
  51. });
  52. })
  53. //区县筛选
  54. deprtment ();
  55. function deprtment () {
  56. $.getJSON( huayi.config.callcenter_url +"CountyBranch/GetBranchListS", function(result) {
  57. if(result.state.toLowerCase() == "success") {
  58. goodslist = result.data;
  59. // 第五屏
  60. $(".areaOne").empty();
  61. $(goodslist).each(function(i, n) {
  62. $('<option value="' + n.F_Code
  63. + '">' + n.F_Name
  64. + '</option>').appendTo($(".areaOne"));
  65. });
  66. if (areaOneVal) {
  67. $(".areaOne").val(areaOneVal);
  68. }
  69. }
  70. });
  71. }
  72. //part 1 //投诉类别月统计 对接完毕
  73. var part_1 = echarts.init(document.getElementById('part_1'));
  74. part_1.setOption({
  75. color: ['#69e1a9', '#6a91e0', '#ceba5f', '#f06e84', '#569d4e', '#7d55ba', '#ce5aba', '#345cdd', '#569d4e'],
  76. tooltip: {
  77. trigger: 'axis',
  78. axisPointer: {
  79. type: 'cross',
  80. label: {
  81. show: true,
  82. backgroundColor: '#333'
  83. }
  84. }
  85. },
  86. grid: {
  87. left: '2%',
  88. right: '5%',
  89. bottom: '6%',
  90. containLabel: true
  91. },
  92. legend: {
  93. top: 'top',
  94. left: '180px',
  95. data: [],
  96. textStyle: {
  97. color: '#00e9ff'
  98. }
  99. },
  100. xAxis: {
  101. name: '月份',
  102. data: [],
  103. axisLine: {
  104. lineStyle: {
  105. color: '#3061a2'
  106. }
  107. },
  108. axisTick: {
  109. alignWithLabel: true,
  110. show: false
  111. },
  112. axisLabel: { //横轴字体颜色
  113. show: true,
  114. textStyle: {
  115. color: '#eff0f4'
  116. }
  117. }
  118. },
  119. yAxis: {
  120. name: '(数量)',
  121. splitLine: {
  122. show: false
  123. },
  124. axisLine: {
  125. lineStyle: {
  126. color: '#3061a2'
  127. }
  128. },
  129. axisLabel: { //横轴字体颜色
  130. show: true,
  131. textStyle: {
  132. color: '#eff0f4'
  133. }
  134. }
  135. },
  136. series: []
  137. });
  138. function partOne(start, end,areaOneVal) {
  139. // var index = layer.load(1, {
  140. // shade: [0.5, '#030303'] //0.1透明度的白色背景
  141. // });
  142. $.ajax({
  143. type: "get",
  144. url: huayi.config.callcenter_url + "info/GetTypeCountMonthByDate",
  145. async: true,
  146. dataType: 'json',
  147. data: {
  148. start: start,
  149. end: end,
  150. branchcode:areaOneVal
  151. },
  152. success: function(data) {
  153. if(data.state.toLowerCase() == 'success') {
  154. // layer.close(index);
  155. var con = data.data;
  156. var counts = con.counts;
  157. var sers = [];
  158. $(counts).each(function(i, n) {
  159. var obj = {};
  160. obj.name = con.cols[i];
  161. obj.type = "line";
  162. obj.smooth = true;
  163. obj.showAllSymbol = true;
  164. obj.symbol = "emptyCircle";
  165. obj.symbolSize = 10;
  166. obj.data = n;
  167. sers.push(obj)
  168. });
  169. part_1.setOption({
  170. xAxis: {
  171. data: con.months
  172. },
  173. legend: {
  174. data: con.cols
  175. },
  176. series: sers
  177. });
  178. }
  179. }
  180. });
  181. }
  182. //part2 //投诉关键字统计
  183. function partTwo(starts, ends, areaOneVal) {
  184. $.ajax({
  185. type: "get",
  186. url: huayi.config.callcenter_url + "Info/GetKeyCountByDateNew",
  187. dataType: 'json',
  188. async: true,
  189. data: {
  190. start: starts,
  191. end: ends,
  192. branchcode:areaOneVal
  193. },
  194. success: function(data) {
  195. if(data.state.toLowerCase() == 'success') {
  196. $('.thead tr').html('');
  197. $('#scroll_table tbody').html('');
  198. var con = data.data;
  199. var thead = con[0];
  200. $.each(thead, function(k, val) {
  201. $('<td>' + k + '</td>').appendTo('.thead tr');
  202. })
  203. $(con).each(function(j, n) {
  204. var str = '<tr>'
  205. $.each(thead, function(j, m) {
  206. $.each(n, function(k, val) {
  207. if(j == k) {
  208. if(val == '') {
  209. val = 0;
  210. }
  211. str += '<td>' + val + '</td>'
  212. }
  213. })
  214. })
  215. str += '</tr>';
  216. $('#scroll_table tbody').append(str);
  217. })
  218. }
  219. }
  220. });
  221. }
  222. // part3 投诉分类统计
  223. var part3 = echarts.init(document.getElementById('part3'));
  224. part3.setOption({
  225. color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e'],
  226. tooltip: {
  227. trigger: 'item',
  228. formatter: "{a} <br/>{b} : {c} ({d}%)",
  229. axisPointer: {
  230. crossStyle: {
  231. color: '#fff'
  232. }
  233. }
  234. },
  235. // legend: {
  236. // // orient: 'vertical',
  237. // bottom: 'bottom',
  238. // data: [],
  239. // textStyle: {
  240. // color: '#fff'
  241. // }
  242. // },
  243. series: [{
  244. name: '数据',
  245. type: 'pie',
  246. radius: ['30%', '60%'],
  247. center: ['40%', '50%'],
  248. data: [],
  249. itemStyle: {
  250. emphasis: {
  251. shadowBlur: 10,
  252. shadowOffsetX: 0,
  253. shadowColor: 'rgba(0, 0, 0, 0.5)'
  254. },
  255. normal: {
  256. label: {
  257. show: true,
  258. // formatter: '{b} : {c} ({d}%)'
  259. formatter: '{d}%'
  260. },
  261. labelLine: {
  262. show: true
  263. }
  264. }
  265. },
  266. label: {
  267. normal: {
  268. textStyle: {
  269. color: '#fff'
  270. }
  271. }
  272. }
  273. }]
  274. });
  275. function partThree(start, end,areaOneVal) {
  276. // var index = layer.load(1, {
  277. // shade: [0.5, '#030303'] //0.1透明度的白色背景
  278. // });
  279. $.ajax({
  280. type: "get",
  281. url: huayi.config.callcenter_url + "info/GetTypeCountByDate",
  282. async: true,
  283. dataType: 'json',
  284. data: {
  285. start: start,
  286. end: end,
  287. branchcode:areaOneVal
  288. },
  289. success: function(data) {
  290. if(data.state.toLowerCase() == 'success') {
  291. // layer.close(index);
  292. $('.complaint_type').html('');
  293. var con = data.data;
  294. var part_1_legend = [];
  295. var part_1_ser = [];
  296. $(con).each(function(i, n) {
  297. part_1_legend.push(n.TypeName)
  298. var part_1_obj = {};
  299. part_1_obj.value = n.Count;
  300. part_1_obj.name = n.TypeName;
  301. part_1_ser.push(part_1_obj)
  302. $('<li>' +
  303. '<span class="type_name">' + n.TypeName + '</span> <span class="type_count">' + n.Count + '</span>' +
  304. '</li>').appendTo('.complaint_type')
  305. })
  306. part3.setOption({
  307. // legend: {
  308. // data: part_1_legend
  309. // },
  310. series: [{
  311. data: part_1_ser
  312. }]
  313. })
  314. }
  315. }
  316. });
  317. }
  318. //表格滚动
  319. var area = document.getElementById('scroll_table');
  320. var iliHeight = 34; //单行滚动的高度
  321. var speed = 20; //滚动的速度
  322. var time;
  323. var delay = 1000;
  324. area.scrollTop = 0;
  325. area.innerHTML += area.innerHTML; //克隆一份一样的内容
  326. function startScroll() {
  327. time = setInterval("scrollUp()", speed);
  328. area.scrollTop++;
  329. console.log(area.scrollTop);
  330. }
  331. function scrollUp() {
  332. if(area.scrollTop % iliHeight == 0) {
  333. clearInterval(time);
  334. setTimeout(startScroll, delay);
  335. } else {
  336. area.scrollTop++;
  337. if(area.scrollTop >= area.scrollHeight / 2) {
  338. area.scrollTop = 0;
  339. }
  340. }
  341. }
  342. setTimeout(startScroll, delay)
  343. function Ajax() {
  344. var areaOneVal = helper.cookies.get("areaOneVal");
  345. var areaOneText = helper.cookies.get("areaOneText");
  346. partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1],areaOneVal)
  347. partTwo($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1],areaOneVal);
  348. partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal)
  349. }