PingAnYeXianSZCG_Web 前端代码

City.html 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>乡镇排名报表查询</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link href="../css/init.css" rel="stylesheet" />
  8. <script src="../Script/Common/huayi.load.js"></script>
  9. <script src="../Script/Common/huayi.config.js"></script>
  10. <link href="../css/Table/table1.css" rel="stylesheet" />
  11. <script src="../css/laydate/laydate.js"></script>
  12. <style>
  13. .LY:hover {
  14. color: #fff;
  15. }
  16. .LY:active {
  17. color: #fff!important;
  18. }
  19. #Task thead td {
  20. color: #fff;
  21. background-color: #1ab394;
  22. text-align: center;
  23. }
  24. .table-head table thead {
  25. width: calc( 100% - 5px);
  26. }
  27. table thead,
  28. tbody tr {
  29. display: table;
  30. width: 100%;
  31. table-layout: fixed;
  32. text-align: center;
  33. }
  34. .table {
  35. margin-bottom: 0;
  36. }
  37. .table-body {
  38. width: 100%;
  39. height: 515px;
  40. overflow-y: scroll;
  41. overflow-x: scroll;
  42. }
  43. .sc_btn{
  44. line-height: 34px;
  45. }
  46. </style>
  47. </head>
  48. <body class="gray-bg">
  49. <div class="wrapper wrapper-content animated fadeInRight">
  50. <div class="daoHang clearfix">
  51. <div class="dhLeft">
  52. <sapn><i class="syIcon"></i>位置:
  53. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  54. <a href="javaScript:;">外呼管理</a>&gt;
  55. <a href="" style="color: #000;">乡镇排名报表查询</a>
  56. </sapn>
  57. </div>
  58. </div>
  59. <div class="th-box">
  60. <div class="th-bar">
  61. <div class="seach-box fr">
  62. <ul>
  63. <li>
  64. <label for="">开始时间:</label>
  65. <input type="text" id="ss_kssj" class="photo laydate-icon" />
  66. </li>
  67. <li>
  68. <label for="">结束时间:</label>
  69. <input type="text" id="ss_jssj" class="photo laydate-icon" />
  70. </li>
  71. <li>
  72. <a class="sc_btn seach">搜索</a>
  73. </li>
  74. <li>
  75. <a class="sc_btn export">导出</a>
  76. </li>
  77. </ul>
  78. </div>
  79. </div>
  80. </div>
  81. <div style="width: 100%;padding: 10px;">
  82. <div class="table-head">
  83. <table id="Task" class="table table-hover table-striped table-bordered table-condensed">
  84. <colgroup>
  85. <col style="width: 80px;" />
  86. <col/>
  87. </colgroup>
  88. <thead>
  89. <tr>
  90. <td>排名</td>
  91. <td>乡镇</td>
  92. <td>总数</td>
  93. <td>不安全</td>
  94. <td>指数</td>
  95. </tr>
  96. </thead>
  97. </table>
  98. </div>
  99. <div class="table-body">
  100. <table class="thTable hwbb table table-hover table-striped table-bordered table-condensed">
  101. <colgroup>
  102. <col style="width: 80px;" />
  103. <col/>
  104. </colgroup>
  105. <tbody>
  106. </tbody>
  107. </table>
  108. </div>
  109. <div>
  110. </div>
  111. </div>
  112. </div>
  113. <script>
  114. $(document).ready(function() {
  115. laydate.skin('molv');
  116. laydate({
  117. elem: '#ss_kssj',
  118. event: 'focus'
  119. });
  120. laydate({
  121. elem: '#ss_jssj',
  122. event: 'focus'
  123. });
  124. getBeforeDate();
  125. GetColumnList();
  126. $(".seach").click(function() {
  127. GetColumnList();
  128. });
  129. $('#ReIndex').click(function(){
  130. top.home_index();
  131. });
  132. });
  133. //任务查询获取表头
  134. function GetColumnList() {
  135. $(".hwbb tbody").empty();
  136. $.ajax({
  137. type: "get",
  138. url: huayi.config.callcenter_url + "/Questionnaire/GetRank",
  139. dataType: 'json',
  140. data: {
  141. startdate:$("#ss_kssj").val(),
  142. enddate:$("#ss_jssj").val(),
  143. token: $.cookie("token")
  144. },
  145. async: true,
  146. success: function(data) {
  147. $(".hwbb tbody").empty();
  148. var Count = data.data;
  149. //debugger;
  150. var countLength = Count.length;
  151. for(var i = 0; i < countLength-1; i++) {
  152. $('<tr>'+
  153. '<td>' + (i+1) + ' </td>' +
  154. '<td>' + Count[i].xiangzhen + ' </td>' +
  155. '<td> ' + Count[i].zongshu + ' </td>' +
  156. '<td> ' + Count[i].buanquan + ' </td>' +
  157. '<td> ' + Count[i].zhishu + '% </td>' +
  158. '</tr>').appendTo(".hwbb tbody");
  159. }
  160. $('<tr>'+
  161. '<td colspan="2">' + Count[i].xiangzhen + ' </td>' +
  162. '<td> ' + Count[countLength-1].zongshu + ' </td>' +
  163. '<td> ' + Count[countLength-1].buanquan + ' </td>' +
  164. '<td> ' + Count[countLength-1].zhishu + '% </td>' +
  165. '</tr>').appendTo(".hwbb tbody");
  166. console.log(Count)
  167. }
  168. });
  169. }
  170. //导出功能
  171. $('.export').click(function() {
  172. // var S= $("#ss_kssj").val();
  173. // var E=$("#ss_jssj").val()
  174. // if(!S&&!E){
  175. // layer.alert("选择时间");
  176. // }else{
  177. dcexcel(this);
  178. // }
  179. })
  180. function dcexcel(obj) {
  181. var url = huayi.config.callcenter_url + "/Questionnaire/GetRankExpt?token=" + $.cookie("token");
  182. url += "&startdate=" + $("#ss_kssj").val()+"&enddate="+$("#ss_jssj").val();
  183. obj.href = url;
  184. console.log(url);
  185. }
  186. //获取时间
  187. function getBeforeDate(n) {
  188. var n = n;
  189. var d = new Date();
  190. var year = d.getFullYear();
  191. var mon = d.getMonth() + 1;
  192. var day = d.getDate();
  193. if(day <= n) {
  194. if(mon > 1) {
  195. mon = mon - 1;
  196. } else {
  197. year = year - 1;
  198. mon = 12;
  199. }
  200. }
  201. d.setDate(d.getDate() - n);
  202. year = d.getFullYear();
  203. mon = d.getMonth() + 1;
  204. day = d.getDate();
  205. s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
  206. return s;
  207. }
  208. $("#ss_kssj").val(getBeforeDate(0));
  209. $("#ss_jssj").val(getBeforeDate(0));
  210. //音频
  211. </script>
  212. </body>
  213. </html>