商丘12345 前端

sourceChannel.js 9.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461
  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. var mySwiper = new Swiper('.swiper1-container1', {
  10. // loop: true,
  11. // autoplay: {
  12. // delay: 60000,
  13. // },
  14. pagination: { /* 分页器*/
  15. el: '.swiper-pagination',
  16. clickable: true,
  17. },
  18. navigation: {
  19. nextEl: '.swiper-button-next',
  20. prevEl: '.swiper-button-prev',
  21. },
  22. followFinger : false,
  23. speed:800,
  24. on: {
  25. init: function() {
  26. swiperAnimateCache(this); //隐藏动画元素
  27. swiperAnimate(this); //初始化完成开始动画
  28. },
  29. transitionEnd: function() {
  30. swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
  31. },
  32. }
  33. })
  34. laydate.render({
  35. elem: '#time11',
  36. format: 'yyyy-MM-dd',
  37. theme: '#114a97',
  38. done: function(value, date) {
  39. var areaOneVal=$(".areaOne").val();
  40. partOne(value,areaOneVal)
  41. }
  42. });
  43. laydate.render({
  44. elem: '#time12',
  45. range: '~',
  46. format: 'yyyy-MM-dd',
  47. theme: '#114a97',
  48. done: function(value, date) {
  49. var areaOneVal=$(".areaOne").val();
  50. partTwo(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],areaOneVal)
  51. }
  52. });
  53. laydate.render({
  54. elem: '#time13',
  55. range: '~',
  56. theme: '#114a97',
  57. done: function(value, date) {
  58. var areaOneVal=$(".areaOne").val();
  59. partThree(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],areaOneVal)
  60. }
  61. });
  62. Ajax1();
  63. $(".areaOne").change(function() {
  64. var areaOneVal=$(this).val();
  65. var areaOneText=$(".areaOne").find("option:selected").text();
  66. helper.cookies.set("areaOneVal", areaOneVal, 7);
  67. helper.cookies.set("areaOneText", areaOneText, 7);
  68. partOne($('#time1').val(),areaOneVal);
  69. partTwo($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1],areaOneVal);
  70. partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal);
  71. // Ajax1()
  72. });
  73. })
  74. //区县筛选
  75. deprtment();
  76. function deprtment() {
  77. $.getJSON( huayi.config.callcenter_url +"CountyBranch/GetBranchListS", function(result) {
  78. if(result.state.toLowerCase() == "success") {
  79. goodslist = result.data;
  80. // 第五屏
  81. $(".areaOne").empty();
  82. $(goodslist).each(function(i, n) {
  83. $('<option value="' + n.F_Code
  84. + '">' + n.F_Name
  85. + '</option>').appendTo($(".areaOne"));
  86. });
  87. if (areaOneVal) {
  88. $(".areaOne").val(areaOneVal);
  89. }
  90. }
  91. });
  92. }
  93. //part 1 //受理群众区域统计 对接完毕
  94. var part_1 = echarts.init(document.getElementById('part_1'));
  95. part_1.setOption({
  96. color: ['#69e1a9', '#6a91e0', '#ceba5f', '#f06e84', '#569d4e', '#7d55ba', '#ce5aba', '#345cdd', '#569d4e'],
  97. tooltip: {
  98. trigger: 'axis',
  99. axisPointer: {
  100. type: 'cross',
  101. label: {
  102. show: true,
  103. backgroundColor: '#333'
  104. }
  105. }
  106. },
  107. grid: {
  108. left: '2%',
  109. right: '5%',
  110. bottom: '6%',
  111. containLabel: true
  112. },
  113. legend: {
  114. top: 'top',
  115. left: '180px',
  116. data: [],
  117. textStyle: {
  118. color: '#00e9ff'
  119. }
  120. },
  121. xAxis: {
  122. name: '时',
  123. data: [],
  124. axisLine: {
  125. lineStyle: {
  126. color: '#3061a2'
  127. }
  128. },
  129. axisTick: {
  130. alignWithLabel: true,
  131. show: false
  132. },
  133. axisLabel: { //横轴字体颜色
  134. show: true,
  135. textStyle: {
  136. color: '#eff0f4'
  137. }
  138. }
  139. },
  140. yAxis: {
  141. name: '(数量)',
  142. splitLine: {
  143. show: false
  144. },
  145. axisLine: {
  146. lineStyle: {
  147. color: '#3061a2'
  148. }
  149. },
  150. axisLabel: { //横轴字体颜色
  151. show: true,
  152. textStyle: {
  153. color: '#eff0f4'
  154. }
  155. }
  156. },
  157. series: []
  158. });
  159. function partOne(dates,areaOneVal) {
  160. $.ajax({
  161. type: "get",
  162. url: huayi.config.callcenter_url + "info/GetAreaCount24ByDate",
  163. async: true,
  164. dataType: "json",
  165. data: {
  166. date: dates,
  167. branchcode:areaOneVal
  168. },
  169. success: function(data) {
  170. if(data.state.toLowerCase() == "success") {
  171. // layer.close(index);
  172. var con = data.data;
  173. var part1Axis = con.hours;
  174. var sers = []
  175. $(con.cols).each(function(i, n) {
  176. var obj = {};
  177. obj.name = n;
  178. obj.type = "line";
  179. obj.smooth = true;
  180. obj.showAllSymbol = true;
  181. obj.symbol = "emptyCircle";
  182. obj.symbolSize = 10;
  183. obj.data = con.counts[i];
  184. sers.push(obj);
  185. })
  186. part_1.setOption({
  187. xAxis: {
  188. data: part1Axis
  189. },
  190. legend: {
  191. data: con.cols
  192. },
  193. series: sers
  194. });
  195. }
  196. }
  197. });
  198. }
  199. //part2 //渠道来源
  200. var source = echarts.init(document.getElementById('source'));
  201. source.setOption({
  202. tooltip: {
  203. trigger: 'axis',
  204. axisPointer: {
  205. type: false,
  206. label: {
  207. show: true,
  208. backgroundColor: '#030917'
  209. }
  210. },
  211. },
  212. // legend: {
  213. // top: 'top',
  214. // left: '180px',
  215. // data: [],
  216. // textStyle: {
  217. // color: '#00e9ff'
  218. // }
  219. // },
  220. xAxis: {
  221. // name: '时',
  222. data: [],
  223. axisLine: {
  224. lineStyle: {
  225. color: '#3061a2'
  226. }
  227. },
  228. axisTick: {
  229. alignWithLabel: true,
  230. show: false
  231. },
  232. axisLabel: { //横轴字体颜色
  233. show: true,
  234. textStyle: {
  235. color: '#eff0f4'
  236. }
  237. }
  238. },
  239. yAxis: {
  240. name: '数量',
  241. splitLine: {
  242. show: false
  243. },
  244. axisLine: {
  245. lineStyle: {
  246. color: '#3061a2'
  247. }
  248. },
  249. axisLabel: { //横轴字体颜色
  250. show: true,
  251. textStyle: {
  252. color: '#eff0f4'
  253. }
  254. }
  255. },
  256. series: [{
  257. name: '数量',
  258. type: 'bar',
  259. barWidth: 18,
  260. itemStyle: {
  261. normal: {
  262. color: function(params) {
  263. // build a color map as your need.
  264. var colorList = ['#368cab', '#54b793', '#4b6ab0', '#2531a9'];
  265. return colorList[params.dataIndex]
  266. }
  267. }
  268. },
  269. label: {
  270. normal: {
  271. show: true,
  272. position: 'top', //顶部数据显示位置
  273. textStyle: {
  274. color: '#fff' //顶部数据颜色
  275. },
  276. formatter: '{c}' // 这里是数据展示的时候显示的数据
  277. }
  278. },
  279. data: []
  280. }]
  281. });
  282. function partTwo(start, end,areaOneVal) {
  283. $.ajax({
  284. type: "get",
  285. url: huayi.config.callcenter_url + "info/GetSourcePercentByDate",
  286. dataType: 'json',
  287. async: true,
  288. data: {
  289. start: start,
  290. end: end,
  291. branchcode:areaOneVal
  292. },
  293. success: function(data) {
  294. if(data.state.toLowerCase() == "success") {
  295. // layer.close(index);
  296. var con = data.data;
  297. var qd_legend = [];
  298. var ser_data = [];
  299. $(con).each(function(i, n) {
  300. ser_data.push(n.Count)
  301. qd_legend.push(n.Source);
  302. })
  303. source.setOption({
  304. // legend: {
  305. // data: qd_legend
  306. // },
  307. xAxis: {
  308. data: qd_legend
  309. },
  310. series: {
  311. data: ser_data
  312. }
  313. })
  314. }
  315. }
  316. });
  317. }
  318. // part3 受理区域统计
  319. var part3 = echarts.init(document.getElementById('part3'));
  320. part3.setOption({
  321. color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e', '#7d55ba', '#ce5aba', '#355cdd', '#44c1c6', '#ceba5e', '#c64444'],
  322. title: {
  323. text: '各区县占比',
  324. x: 'center',
  325. y: '45%',
  326. textStyle: {
  327. fontWeight: 'normal',
  328. fontSize: 16,
  329. color: '#fff'
  330. }
  331. },
  332. tooltip: {
  333. trigger: 'item',
  334. formatter: "{a} <br/>{b} : {c} ({d}%)",
  335. axisPointer: {
  336. crossStyle: {
  337. color: '#fff'
  338. }
  339. }
  340. },
  341. // legend: {
  342. // // orient: 'vertical',
  343. // bottom: 'bottom',
  344. // data: [],
  345. // textStyle: {
  346. // color: '#fff'
  347. // }
  348. // },
  349. series: [{
  350. name: '数据',
  351. type: 'pie',
  352. radius: ['30%', '60%'],
  353. center: ['50%', '50%'],
  354. data: [],
  355. itemStyle: {
  356. emphasis: {
  357. shadowBlur: 10,
  358. shadowOffsetX: 0,
  359. shadowColor: 'rgba(0, 0, 0, 0.5)'
  360. },
  361. normal: {
  362. label: {
  363. show: true,
  364. // formatter: '{b} : {c} ({d}%)'
  365. formatter: '{d}%'
  366. },
  367. labelLine: {
  368. show: true
  369. }
  370. }
  371. },
  372. label: {
  373. normal: {
  374. textStyle: {
  375. color: '#fff'
  376. }
  377. }
  378. }
  379. }]
  380. });
  381. function partThree(start, end,areaOneVal) {
  382. // var index = layer.load(1, {
  383. // shade: [0.5, '#030303'] //0.1透明度的白色背景
  384. // });
  385. $.ajax({
  386. type: "get",
  387. url: huayi.config.callcenter_url + "info/GetAreaCountByDate",
  388. async: true,
  389. dataType: 'json',
  390. data: {
  391. start: start,
  392. end: end,
  393. branchcode:areaOneVal
  394. },
  395. success: function(data) {
  396. if(data.state.toLowerCase() == 'success') {
  397. // layer.close(index);
  398. $('.complaint_typeL').html('');
  399. $('.complaint_typeR').html('');
  400. var con = data.data;
  401. var part_1_legend = [];
  402. var part_1_ser = [];
  403. $(con).each(function(i, n) {
  404. part_1_legend.push(n.AreaName)
  405. var part_1_obj = {};
  406. part_1_obj.value = n.Count;
  407. part_1_obj.name = n.AreaName;
  408. part_1_ser.push(part_1_obj)
  409. if(n.AreaName.indexOf('城乡一体') != -1) {
  410. n.AreaName = "城乡示范"
  411. }
  412. var str = '<li>' +
  413. '<span class="type_name">' + n.AreaName + '</span> <span class="type_count">' + n.Count + '</span>' +
  414. '</li>'
  415. if(i <= 5) {
  416. $(str).appendTo('.complaint_typeL');
  417. } else if(i <= 11&&i >5){
  418. $(str).appendTo('.complaint_typeR');
  419. }
  420. })
  421. part3.setOption({
  422. // legend: {
  423. // selected: {
  424. // '当即办理': false
  425. // }
  426. // },
  427. series: [{
  428. data: part_1_ser
  429. }]
  430. })
  431. }
  432. }
  433. });
  434. }
  435. function Ajax1() {
  436. var areaOneVal = helper.cookies.get("areaOneVal");
  437. var areaOneText = helper.cookies.get("areaOneText");
  438. partOne($('#time1').val(),areaOneVal)
  439. partTwo($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1],areaOneVal);
  440. partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal)
  441. }