商丘12345 前端

sourceChannel.js 9.0KB

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