説明なし

sourceChannel.js 8.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
  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. $.ajax({
  136. type: "get",
  137. url: huayi.config.callcenter_url + "info/GetAreaCount24ByDate",
  138. async: true,
  139. dataType: "json",
  140. data: {
  141. date: dates,
  142. branchcode:areaOneVal
  143. },
  144. success: function(data) {
  145. if(data.state.toLowerCase() == "success") {
  146. // layer.close(index);
  147. var con = data.data;
  148. var part1Axis = con.hours;
  149. var sers = []
  150. $(con.cols).each(function(i, n) {
  151. var obj = {};
  152. obj.name = n;
  153. obj.type = "line";
  154. obj.smooth = true;
  155. obj.showAllSymbol = true;
  156. obj.symbol = "emptyCircle";
  157. obj.symbolSize = 10;
  158. obj.data = con.counts[i];
  159. sers.push(obj);
  160. })
  161. part_1.setOption({
  162. xAxis: {
  163. data: part1Axis
  164. },
  165. legend: {
  166. data: con.cols
  167. },
  168. series: sers
  169. });
  170. }
  171. }
  172. });
  173. }
  174. //part2 //渠道来源
  175. var source = echarts.init(document.getElementById('source'));
  176. source.setOption({
  177. tooltip: {
  178. trigger: 'axis',
  179. axisPointer: {
  180. type: false,
  181. label: {
  182. show: true,
  183. backgroundColor: '#030917'
  184. }
  185. },
  186. },
  187. // legend: {
  188. // top: 'top',
  189. // left: '180px',
  190. // data: [],
  191. // textStyle: {
  192. // color: '#00e9ff'
  193. // }
  194. // },
  195. xAxis: {
  196. // name: '时',
  197. data: [],
  198. axisLine: {
  199. lineStyle: {
  200. color: '#3061a2'
  201. }
  202. },
  203. axisTick: {
  204. alignWithLabel: true,
  205. show: false
  206. },
  207. axisLabel: { //横轴字体颜色
  208. show: true,
  209. textStyle: {
  210. color: '#eff0f4'
  211. }
  212. }
  213. },
  214. yAxis: {
  215. name: '数量',
  216. splitLine: {
  217. show: false
  218. },
  219. axisLine: {
  220. lineStyle: {
  221. color: '#3061a2'
  222. }
  223. },
  224. axisLabel: { //横轴字体颜色
  225. show: true,
  226. textStyle: {
  227. color: '#eff0f4'
  228. }
  229. }
  230. },
  231. series: [{
  232. name: '数量',
  233. type: 'bar',
  234. barWidth: 18,
  235. itemStyle: {
  236. normal: {
  237. color: function(params) {
  238. // build a color map as your need.
  239. var colorList = ['#368cab', '#54b793', '#4b6ab0', '#2531a9'];
  240. return colorList[params.dataIndex]
  241. }
  242. }
  243. },
  244. label: {
  245. normal: {
  246. show: true,
  247. position: 'top', //顶部数据显示位置
  248. textStyle: {
  249. color: '#fff' //顶部数据颜色
  250. },
  251. formatter: '{c}' // 这里是数据展示的时候显示的数据
  252. }
  253. },
  254. data: []
  255. }]
  256. });
  257. function partTwo(start, end,areaOneVal) {
  258. $.ajax({
  259. type: "get",
  260. url: huayi.config.callcenter_url + "info/GetSourcePercentByDate",
  261. dataType: 'json',
  262. async: true,
  263. data: {
  264. start: start,
  265. end: end,
  266. branchcode:areaOneVal
  267. },
  268. success: function(data) {
  269. if(data.state.toLowerCase() == "success") {
  270. // layer.close(index);
  271. var con = data.data;
  272. var qd_legend = [];
  273. var ser_data = [];
  274. $(con).each(function(i, n) {
  275. ser_data.push(n.Count)
  276. qd_legend.push(n.Source);
  277. })
  278. source.setOption({
  279. // legend: {
  280. // data: qd_legend
  281. // },
  282. xAxis: {
  283. data: qd_legend
  284. },
  285. series: {
  286. data: ser_data
  287. }
  288. })
  289. }
  290. }
  291. });
  292. }
  293. // part3 受理区域统计
  294. var part3 = echarts.init(document.getElementById('part3'));
  295. part3.setOption({
  296. color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e', '#7d55ba', '#ce5aba', '#355cdd', '#44c1c6', '#ceba5e', '#c64444'],
  297. title: {
  298. text: '各区县占比',
  299. x: 'center',
  300. y: '45%',
  301. textStyle: {
  302. fontWeight: 'normal',
  303. fontSize: 16,
  304. color: '#fff'
  305. }
  306. },
  307. tooltip: {
  308. trigger: 'item',
  309. formatter: "{a} <br/>{b} : {c} ({d}%)",
  310. axisPointer: {
  311. crossStyle: {
  312. color: '#fff'
  313. }
  314. }
  315. },
  316. // legend: {
  317. // // orient: 'vertical',
  318. // bottom: 'bottom',
  319. // data: [],
  320. // textStyle: {
  321. // color: '#fff'
  322. // }
  323. // },
  324. series: [{
  325. name: '数据',
  326. type: 'pie',
  327. radius: ['30%', '60%'],
  328. center: ['50%', '50%'],
  329. data: [],
  330. itemStyle: {
  331. emphasis: {
  332. shadowBlur: 10,
  333. shadowOffsetX: 0,
  334. shadowColor: 'rgba(0, 0, 0, 0.5)'
  335. },
  336. normal: {
  337. label: {
  338. show: true,
  339. // formatter: '{b} : {c} ({d}%)'
  340. formatter: '{d}%'
  341. },
  342. labelLine: {
  343. show: true
  344. }
  345. }
  346. },
  347. label: {
  348. normal: {
  349. textStyle: {
  350. color: '#fff'
  351. }
  352. }
  353. }
  354. }]
  355. });
  356. function partThree(start, end,areaOneVal) {
  357. // var index = layer.load(1, {
  358. // shade: [0.5, '#030303'] //0.1透明度的白色背景
  359. // });
  360. $.ajax({
  361. type: "get",
  362. url: huayi.config.callcenter_url + "info/GetAreaCountByDate",
  363. async: true,
  364. dataType: 'json',
  365. data: {
  366. start: start,
  367. end: end,
  368. branchcode:areaOneVal
  369. },
  370. success: function(data) {
  371. if(data.state.toLowerCase() == 'success') {
  372. // layer.close(index);
  373. $('.complaint_typeL').html('');
  374. $('.complaint_typeR').html('');
  375. var con = data.data;
  376. var part_1_legend = [];
  377. var part_1_ser = [];
  378. $(con).each(function(i, n) {
  379. part_1_legend.push(n.AreaName)
  380. var part_1_obj = {};
  381. part_1_obj.value = n.Count;
  382. part_1_obj.name = n.AreaName;
  383. part_1_ser.push(part_1_obj)
  384. if(n.AreaName.indexOf('城乡一体') != -1) {
  385. n.AreaName = "城乡示范"
  386. }
  387. var str = '<li>' +
  388. '<span class="type_name">' + n.AreaName + '</span> <span class="type_count">' + n.Count + '</span>' +
  389. '</li>'
  390. if(i <= 5) {
  391. $(str).appendTo('.complaint_typeL');
  392. } else if(i <= 11&&i >5){
  393. $(str).appendTo('.complaint_typeR');
  394. }
  395. })
  396. part3.setOption({
  397. // legend: {
  398. // selected: {
  399. // '当即办理': false
  400. // }
  401. // },
  402. series: [{
  403. data: part_1_ser
  404. }]
  405. })
  406. }
  407. }
  408. });
  409. }
  410. function Ajax() {
  411. var areaOneVal = helper.cookies.get("areaOneVal");
  412. var areaOneText = helper.cookies.get("areaOneText");
  413. partOne($('#time1').val(),areaOneVal)
  414. partTwo($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1],areaOneVal);
  415. partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal)
  416. }