ZZDianXin_UI - 郑州电信 演示

City.html 5.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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="../js/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. .laydate-icon {
  47. font-size: 14px;
  48. }
  49. #ss_kssj{
  50. width: 240px;
  51. }
  52. </style>
  53. </head>
  54. <body class="gray-bg">
  55. <div class="wrapper wrapper-content animated fadeInRight">
  56. <div class="daoHang clearfix">
  57. <div class="dhLeft">
  58. <sapn><i class="syIcon"></i>位置:
  59. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  60. <a href="javaScript:;">外呼管理</a>&gt;
  61. <a href="javaScript:;">外呼报表</a>&gt;
  62. <a href="" style="color: #000;">乡镇或单位排名报表</a>
  63. </sapn>
  64. </div>
  65. </div>
  66. <div class="th-box">
  67. <div class="th-bar">
  68. <div class="seach-box fr">
  69. <ul>
  70. <li>任务列表:
  71. <select id="cljg" class="x-color select"></select>
  72. </li>
  73. <li style="position: relative;">
  74. <label for="">时间:</label>
  75. <i class="tub fa fa-calendar"></i>
  76. <input type="text" id="ss_kssj" class="photo laydate-icon" placeholder="请选择开始时间和结束时间" />
  77. </li>
  78. <li>
  79. <a class="sc_btn seach">搜索</a>
  80. </li>
  81. <li>
  82. <a class="sc_btn export">导出</a>
  83. </li>
  84. </ul>
  85. </div>
  86. </div>
  87. </div>
  88. <div style="width: 100%;padding: 10px;">
  89. <div class="table-head">
  90. <table id="Task" class="table table-hover table-striped table-bordered table-condensed">
  91. <colgroup>
  92. <col style="width: 80px;" />
  93. <col/>
  94. </colgroup>
  95. <thead>
  96. <tr>
  97. <td>排名</td>
  98. <td>乡镇或单位</td>
  99. <td>总数</td>
  100. </tr>
  101. </thead>
  102. </table>
  103. </div>
  104. <div class="table-body">
  105. <table class="thTable hwbb table table-hover table-striped table-bordered table-condensed">
  106. <colgroup>
  107. <col style="width: 80px;" />
  108. <col/>
  109. </colgroup>
  110. <tbody>
  111. </tbody>
  112. </table>
  113. </div>
  114. </div>
  115. </div>
  116. <script>
  117. $(document).ready(function() {
  118. /*var nt = helper.DateFormat.getNowDate();
  119. var pr = helper.DateFormat.getPreMonth(nt);
  120. var st = pr + ' ~ ' + nt;*/
  121. taskSelect();
  122. laydate.render({
  123. elem: '#ss_kssj',
  124. range: '~',
  125. //value: st,
  126. calendar: true,
  127. theme: '#1ab394',
  128. });
  129. getRankList()
  130. $(".seach").click(function() {
  131. getRankList();
  132. });
  133. $('#ReIndex').click(function() {
  134. top.home_index();
  135. });
  136. });
  137. //查询条件中获取任务列表
  138. function taskSelect() {
  139. $.ajax({
  140. type: "get",
  141. url: huayi.config.callcenter_url + "Questionnaire/GetTaskList",
  142. dataType: 'json',
  143. data: {
  144. token: $.cookie("token")
  145. },
  146. async: true,
  147. success: function(data) {
  148. if(data.state.toLowerCase() == "success") {
  149. var Count = data.data;
  150. if(Count.length > 0) {
  151. for(var i = 0; i < Count.length; i++) {
  152. $("<option value='" + Count[i].F_TaskID + "'>" + Count[i].F_TaskName + "</option>").appendTo($("#cljg"));
  153. }
  154. } else {
  155. $("<option value=''>--暂无数据--</option>").appendTo($("#cljg"));
  156. }
  157. }
  158. }
  159. });
  160. }
  161. //获取数据
  162. function getRankList() {
  163. /*var nt = helper.DateFormat.getNowDate();
  164. var pr = helper.DateFormat.getPreMonth(nt);
  165. var st = $("#ss_kssj").val() == "" ? pr : $("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[0];
  166. var et = $("#ss_kssj").val() == "" ? nt : $("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[1];*/
  167. $.ajax({
  168. type: "get",
  169. url: huayi.config.callcenter_url + "CallOutReport/GetRank",
  170. dataType: 'json',
  171. data: {
  172. taskid: $("#cljg").val(),//传任务id
  173. sdate: $("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[0],
  174. edate: $("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[1],
  175. token: $.cookie("token")
  176. },
  177. async: true,
  178. success: function(data) {
  179. $(".hwbb tbody").empty();
  180. var Count = data.data;
  181. var countLength = Count.length;
  182. for(var i = 0; i < countLength - 1; i++) {
  183. $('<tr>' +
  184. '<td>' + (i + 1) + ' </td>' +
  185. '<td>' + Count[i].xiangzhen + ' </td>' +
  186. '<td> ' + Count[i].zongshu + ' </td>' +
  187. '</tr>').appendTo(".hwbb tbody");
  188. }
  189. $('<tr>' +
  190. '<td colspan="2">' + Count[i].xiangzhen + ' </td>' +
  191. '<td> ' + Count[countLength - 1].zongshu + ' </td>' +
  192. '</tr>').appendTo(".hwbb tbody");
  193. }
  194. });
  195. }
  196. //导出功能
  197. $('.export').click(function() {
  198. dcexcel(this);
  199. })
  200. function dcexcel(obj) {
  201. var url = huayi.config.callcenter_url + "CallOutReport/GetRankExpt?token=" + $.cookie("token");
  202. url += "&taskid=" + $("#cljg").val() + "&sdate=" + ($("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[0]) + "&edate=" + ($("#ss_kssj").val() && $("#ss_kssj").val().split(' ~ ')[1]);
  203. obj.href = url;
  204. }
  205. </script>
  206. </body>
  207. </html>