商丘市柘城县——前端

index.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  1. $(function() {
  2. var mySwiper = new Swiper('.swiper-container', {
  3. // loop: true,
  4. // autoplay: {
  5. // delay: 60000,
  6. // },
  7. pagination: { /* 分页器*/
  8. el: '.swiper-pagination',
  9. clickable: true,
  10. },
  11. navigation: {
  12. nextEl: '.swiper-button-next',
  13. prevEl: '.swiper-button-prev',
  14. },
  15. // followFinger : false,
  16. // speed:800,
  17. on: {
  18. init: function() {
  19. swiperAnimateCache(this); //隐藏动画元素
  20. swiperAnimate(this); //初始化完成开始动画
  21. },
  22. transitionEnd: function() {
  23. swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
  24. },
  25. }
  26. })
  27. Ajax();
  28. deprtment();// 第五屏部门下拉
  29. laydate.render({
  30. elem: '#time1',
  31. range: '~',
  32. format: 'yyyy-MM-dd',
  33. theme: '#114a97',
  34. done: function(value, date) {
  35. oneScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1])
  36. }
  37. });
  38. laydate.render({
  39. elem: '#time2',
  40. range: '~',
  41. format: 'yyyy-MM-dd',
  42. theme: '#114a97',
  43. done: function(value, date) {
  44. twoScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1])
  45. }
  46. });
  47. laydate.render({
  48. elem: '#time3',
  49. format: 'yyyy-MM-dd',
  50. theme: '#114a97',
  51. done: function(value) {
  52. threeScreen(value)
  53. }
  54. });
  55. laydate.render({
  56. elem: '#time4',
  57. range: '~',
  58. format: 'yyyy-MM-dd',
  59. theme: '#114a97',
  60. done: function(value, date) {
  61. fourScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1])
  62. }
  63. });
  64. laydate.render({
  65. elem: '#test6',
  66. range: '~',
  67. format: 'yyyy-MM-dd',
  68. theme: '#114a97',
  69. done: function(value, date) {
  70. fiveScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1])
  71. }
  72. });
  73. })
  74. var cityObj = {
  75. ele1: "xyx_count",
  76. ele2: "hc_count",
  77. ele3: "hh_count",
  78. ele4: "cjx_count",
  79. ele5: "sgx_count",
  80. ele6: "szx_count",
  81. ele7: "wjz_count",
  82. ele8: "xdpz_count",
  83. ele9: "wzz_count",
  84. ele10: "fjx_count",
  85. ele11: "wxz_count",
  86. ele12: "qgmx_count",
  87. ele13: "wzz_count1",
  88. ele14: "syz_count",
  89. ele15: "lhpz_count",
  90. ele16: "saz_count",
  91. ele17: "djbl_count"
  92. }
  93. var vars = {};
  94. getCountUp(cityObj)
  95. function getCountUp(obj1) {
  96. var options = {  
  97. useEasing: true,
  98.   useGrouping: true,
  99.   separator: ',',
  100.   decimal: '.',
  101. };
  102. $.each(obj1, function(k, v) {
  103. new CountUp(v, 0, 0, 0, 2, options).start()
  104. vars[v] = new CountUp(v, 0, 0, 0, 2, options)
  105. })
  106. }
  107. var myDate = new Date();
  108. function turn(aa) {
  109. if(aa < 10) {
  110. aa = "0" + aa;
  111. }
  112. return aa
  113. }
  114. // 第三屏 第四屏 发光外框 定时
  115. (function() {
  116. var i = 0;
  117. var length = $(".orderState_ul >li").length;
  118. var j = 0;
  119. var length_1 = $(".orderTtype_Con li").length;
  120. setInterval(function() {
  121. if(i == length) {
  122. i = 0;
  123. $(".orderState_ul >li").removeClass('active');
  124. }
  125. $(".orderState_ul >li").eq(i).addClass('active').siblings().removeClass('active');
  126. if(i == 5) {
  127. $(".orderState_ul >li").eq(4).removeClass('active');
  128. }
  129. i++;
  130. if(j == length_1) {
  131. j = 0;
  132. }
  133. $(".orderTtype_Con li").eq(j).addClass('active').siblings().removeClass('active');
  134. j++;
  135. }, 2000);
  136. })();
  137. //第一屏幕 开始
  138. function oneScreen(sd,ed) {
  139. // $('.gdmap-r ul').html('');
  140. // var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
  141. // });
  142. $.ajax({
  143. type: "get",
  144. url: huayi.config.callcenter_url + "info/GetAreaCountByDate",
  145. async: true,
  146. dataType: 'json',
  147. data: {
  148. start: sd,
  149. end: ed,
  150. },
  151. success: function(data) {
  152. if(data.state.toLowerCase() == 'success') {
  153. // layer.close(index);
  154. var con = data.data;
  155. $(con).each(function(i, n) {
  156. if(n.AreaName.indexOf('民权县') != -1) {
  157. vars.xyx_count.update(n.Count);
  158. }
  159. if(n.AreaName.indexOf('城关镇') != -1) {
  160. vars.hc_count.update(n.Count);
  161. }
  162. if(n.AreaName.indexOf('程庄镇') != -1) {
  163. vars.hh_count.update(n.Count);
  164. }
  165. if(n.AreaName.indexOf('孙六镇') != -1) {
  166. vars.qgmx_count.update(n.Count);
  167. }
  168. if(n.AreaName.indexOf('龙塘镇') != -1) {
  169. vars.wzz_count.update(n.Count);
  170. }
  171. if(n.AreaName.indexOf('白云寺镇') != -1) {
  172. vars.szx_count.update(n.Count);
  173. }
  174. if(n.AreaName.indexOf('双塔镇') != -1) {
  175. vars.sgx_count.update(n.Count);
  176. }
  177. if(n.AreaName.indexOf('人和镇') != -1) {
  178. vars.wjz_count.update(n.Count);
  179. }
  180. if(n.AreaName.indexOf('王桥镇') != -1) {
  181. vars.cjx_count.update(n.Count);
  182. }
  183. if(n.AreaName.indexOf('北关镇') != -1) {
  184. vars.xdpz_count.update(n.Count);
  185. }
  186. if(n.AreaName.indexOf('王庄镇') != -1) {
  187. vars.wxz_count.update(n.Count);
  188. }
  189. if(n.AreaName.indexOf('野岗乡') != -1) {
  190. vars.fjx_count.update(n.Count);
  191. }
  192. if(n.AreaName.indexOf('花园乡') != -1) {
  193. vars.wzz_count1.update(n.Count);
  194. }
  195. if(n.AreaName.indexOf('伯党乡') != -1) {
  196. vars.syz_count.update(n.Count);
  197. }
  198. if(n.AreaName.indexOf('胡集乡') != -1) {
  199. vars.lhpz_count.update(n.Count);
  200. }
  201. if(n.AreaName.indexOf('林七乡') != -1) {
  202. vars.saz_count.update(n.Count);
  203. }
  204. })
  205. }
  206. }
  207. });
  208. }
  209. //第二屏
  210. function twoScreen(sd,ed) {
  211. $.ajax({
  212. type: "get",
  213. url: huayi.config.callcenter_url + "info/GetSourceByDate",
  214. async: true,
  215. dataType: 'json',
  216. data: {
  217. start: sd,
  218. end: ed,
  219. },
  220. success: function(data) {
  221. if(data.state.toLowerCase() == 'success') {
  222. // layer.close(index);
  223. $('.orderSource ul li .rectangle').remove();
  224. var con = data.data;
  225. $(con).each(function(i, n) {
  226. if(!n.Percent) {
  227. n.Percent = '0.00%'
  228. }
  229. var str = '<div class="source_kuang rectangle">' +
  230. '<div class="pbout">' +
  231. '<div class="percent_box">' +
  232. '<div class="percent_out"></div> ' +
  233. ' <div class="percent_in"></div>' +
  234. ' <div class="percent_word"><p>' + n.Percent.split('%')[0] + '</p>%' +
  235. '</div>' +
  236. '</div>' +
  237. '</div>' +
  238. '<p class="num_word">' +
  239. '<span>' + n.Source + '</span><span>' + n.Count + '</span>' +
  240. '</p>' +
  241. '</div>'
  242. $('.orderSource ul li').eq(i).prepend(str)
  243. })
  244. }
  245. }
  246. });
  247. }
  248. //第三屏
  249. function threeScreen(sd) {
  250. $.ajax({
  251. type: "get",
  252. url: huayi.config.callcenter_url + "Info/GetTypeCountNew",
  253. async: true,
  254. dataType: 'json',
  255. data: {
  256. date: sd,
  257. },
  258. success: function(data) {
  259. if(data.state.toLowerCase() == 'success') {
  260. $('.orderTtype_Con ul').html('');
  261. // layer.close(index);
  262. var con = data.data;
  263. var img_name = '';
  264. $(con).each(function(i, n) {
  265. if(n.TypeName.indexOf('咨询') != -1) {
  266. img_name = 'order_ZX.png'
  267. }
  268. if(n.TypeName.indexOf('求助') != -1) {
  269. img_name = 'order_QZ.png'
  270. }
  271. if(n.TypeName.indexOf('投诉') != -1) {
  272. img_name = 'order_TS.png'
  273. }
  274. if(n.TypeName.indexOf('建议') != -1) {
  275. img_name = 'order_JY.png'
  276. }
  277. if(n.TypeName.indexOf('表扬') != -1) {
  278. img_name = 'order_BY.png'
  279. }
  280. if(n.TypeName.indexOf('其他') != -1) {
  281. img_name = 'order_QT.png'
  282. }
  283. $('<li>' +
  284. '<div class="typeWord">' + n.TypeName + '</div>' +
  285. '<img src="img/' + img_name + '" alt="" />' +
  286. '<p class="typeWord_line">数据展示</p>' +
  287. '<p class="order_count">' + n.DayCount + '</p>' +
  288. '<p class="typeWord_line">今日' + n.TypeName + '量</p>' +
  289. '<p class="order_count">' + n.MonthCount + '</p>' +
  290. '<p class="typeWord_line">本月' + n.TypeName + '量</p>' +
  291. '<p class="order_count">' + n.TotalCount + '</p>' +
  292. '<p class="typeWord_line">' + n.TypeName + '总量</p>' +
  293. '<div class="persent_box">' +
  294. '<div class="persent_kuang">' + n.Percent + '</div>' +
  295. '</div>' +
  296. '<p class="persent_word">总计类型占比</p>' +
  297. '</li>').appendTo('.orderTtype_Con ul');
  298. })
  299. }
  300. }
  301. });
  302. }
  303. //第四屏 数字滚动
  304. function fourScreen(sd,ed) {
  305. $.ajax({
  306. type: "get",
  307. url: huayi.config.callcenter_url + "Info/GetStateCountByMonth",
  308. async: true,
  309. dataType: 'json',
  310. data:{
  311. start: sd,
  312. end: ed,
  313. },
  314. success: function(data) {
  315. if(data.state.toLowerCase() == 'success') {
  316. // layer.close(index);
  317. var con = data.data;
  318. $(con).each(function(i, n) {
  319. if(n.Name.indexOf('延时审核') != -1) {
  320. $("#state_yssh").rollNum({
  321. deVal: n.Count
  322. });
  323. }
  324. if(n.Name.indexOf('已办理') != -1) {
  325. $("#state_ybl").rollNum({
  326. deVal: n.Count
  327. });
  328. }
  329. if(n.Name.indexOf('已回访') != -1) {
  330. $("#state_yhf").rollNum({
  331. deVal: n.Count
  332. });
  333. }
  334. if(n.Name.indexOf('重办中') != -1) {
  335. $("#state_cbz").rollNum({
  336. deVal: n.Count
  337. });
  338. }
  339. if(n.Name.indexOf('已结案') != -1) {
  340. $("#state_yja").rollNum({
  341. deVal: n.Count
  342. });
  343. }
  344. if(n.Name.indexOf('新工单') != -1) {
  345. $("#state_xzgd").rollNum({
  346. deVal: n.Count
  347. });
  348. }
  349. if(n.Name.indexOf('待交办') != -1) {
  350. $("#state_djb").rollNum({
  351. deVal: n.Count
  352. });
  353. }
  354. if(n.Name.indexOf('待查收') != -1) {
  355. $("#state_dcs").rollNum({
  356. deVal: n.Count
  357. });
  358. }
  359. if(n.Name.indexOf('退回审核') != -1) {
  360. $("#state_thsh").rollNum({
  361. deVal: n.Count
  362. });
  363. }
  364. if(n.Name.indexOf('办理中') != -1) {
  365. $("#state_blz").rollNum({
  366. deVal: n.Count
  367. });
  368. }
  369. });
  370. }
  371. }
  372. });
  373. }
  374. //第五屏js
  375. function fiveScreen(sd,ed) {
  376. keyWord(sd, ed);
  377. }
  378. $(".depart").change(function() {
  379. keyWordDetail($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(' ~ ')[1]);
  380. })
  381. //部门下拉框
  382. function deprtment () {
  383. $.getJSON( huayi.config.callcenter_url +"info/GetDeptList", function(result) {
  384. if(result.state.toLowerCase() == "success") {
  385. goodslist = result.data;
  386. $(".depart").empty();
  387. $('<option value="">请选择部门</option>').appendTo($(".depart"));
  388. $(goodslist).each(function(i, n) {
  389. $('<option value="' + n.F_DeptId
  390. + '">' + n.F_DeptName
  391. + '</option>').appendTo($(".depart"));
  392. })
  393. }
  394. });
  395. }
  396. // 左侧关键词
  397. function keyWord(sd, ed) {
  398. $.ajax({
  399. type: "get",
  400. url: huayi.config.callcenter_url + "info/GetKeyCountRankByDate",
  401. async: true,
  402. dataType: 'json',
  403. data: {
  404. start: sd,
  405. end: ed
  406. },
  407. success: function(data) {
  408. if(data.state.toLowerCase() == 'success') {
  409. var con = data.data;
  410. // $(".keyW_t").text(con[0].TypeName)
  411. $('.tagcloud').html('');
  412. $(con).each(function(k, j) {
  413. if(k < 12) {
  414. var strs = '<div index="'+j.Id+'" class="tagcloud_bj">' +
  415. '<p class="tag_title">' + j.TypeName + '</p>' +
  416. '<p class="imgs">' + j.Count + '</p>' +
  417. '</div>'
  418. $('.tagcloud').append(strs);
  419. }
  420. })
  421. $(".tagcloud div:first-child").removeClass("tagcloud_bj");
  422. $(".tagcloud div:first-child").addClass("tagcloud_bjShine");
  423. keyWordDetail(sd, ed);
  424. }
  425. }
  426. });
  427. }
  428. // 右侧部门
  429. function keyWordDetail(sd, ed) {
  430. $.ajax({
  431. type: "get",
  432. url: huayi.config.callcenter_url + "info/GetDeptKeyCountByDateNew",
  433. async: true,
  434. dataType: 'json',
  435. data: {
  436. start: sd,
  437. end: ed,
  438. deptid: $('.depart').val(),
  439. keyid: $(".tagcloud_bjShine").eq(0).attr("index")
  440. },
  441. success: function(data) {
  442. if(data.state.toLowerCase() == 'success') {
  443. $('.scroll_table tbody').html('');
  444. var con = data.data;
  445. $(con).each(function (j, n) {
  446. var rate = '';
  447. if (n.rate) { rate = n.rate;}
  448. var str = '<tr><td>' + n.deptname + '</td><td>' + n.acceptcount + '</td><td>' + rate + '</td></tr>'
  449. $('.scroll_table tbody').append(str);
  450. })
  451. $(".scroll_table").Scroll({
  452. line: 1,
  453. speed: 500,
  454. timer: 2000
  455. });
  456. }
  457. }
  458. });
  459. }
  460. $(".tagcloud").on("click","div",function(){
  461. $(".tagcloud div").addClass("tagcloud_bj");
  462. $(".tagcloud div").removeClass("tagcloud_bjShine");
  463. $(this).removeClass("tagcloud_bj");
  464. $(this).addClass("tagcloud_bjShine");
  465. keyWordDetail($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(' ~ ')[1]);
  466. });
  467. function Ajax() {
  468. oneScreen($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1])
  469. twoScreen($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1])
  470. threeScreen();
  471. fourScreen($('#time4').val() && $('#time4').val().split(' ~ ')[0], $('#time4').val() && $('#time4').val().split(' ~ ')[1])
  472. fiveScreen($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(' ~ ')[1])
  473. }