Нет описания

zuoXiTable.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>坐席工作报表</title>
  7. <!--[if lt IE 9]>
  8. <meta http-equiv="refresh" content="0;ie.html" />
  9. <![endif]-->
  10. <script src="../Script/Common/huayi.load.js"></script>
  11. <script src="../Script/Common/huayi.config.js"></script>
  12. <link href="../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
  13. <link href="../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
  14. <link href="../css/animate.min.css" rel="stylesheet">
  15. <link href="../css/style.min862f.css?v=4.1.0" rel="stylesheet">
  16. <link rel="stylesheet" href="../css/laydate/need/laydate.css" />
  17. <link rel="stylesheet" href="../js/select2/css/select2.min.css" />
  18. <link rel="stylesheet" href="../css/init.css" />
  19. <style>
  20. .clearfix:after {
  21. content: "";
  22. display: block;
  23. clear: both;
  24. }
  25. .zxt-top {
  26. background: #f3f3f4;
  27. height: 60px;
  28. padding: 10px 20px;
  29. }
  30. .topCon {
  31. float: right;
  32. margin-right: 45px;
  33. }
  34. .topCon select {
  35. padding: 2px;
  36. height: 34px;
  37. border: 1px solid #ebebeb;
  38. outline: none;
  39. vertical-align: middle;
  40. }
  41. .topCon input {
  42. width: 200px;
  43. padding: 2px 2PX 2PX 10PX;
  44. height: 34px;
  45. border: 1px solid #ebebeb;
  46. outline: none;
  47. vertical-align: middle;
  48. }
  49. .zxt-content {
  50. width: 95%;
  51. margin: 0 auto;
  52. }
  53. .zxt-table table {
  54. font-size: 12px;
  55. }
  56. .zxt-table table thead tr td {
  57. background: #00a1cb;
  58. color: #fff;
  59. }
  60. #thead thead th {
  61. background: #00a0cd;
  62. color: #fff;
  63. }
  64. table thead,
  65. tbody tr {
  66. display: table;
  67. width: 100%;
  68. table-layout: fixed;
  69. }
  70. .table {
  71. margin-bottom: 0;
  72. }
  73. </style>
  74. </head>
  75. <body class="gray-bg" style="background: #fefefe;">
  76. <div class="zxtable wrapper wrapper-content animated fadeInRight">
  77. <div class="daoHang clearfix">
  78. <div class="dhLeft">
  79. <sapn><i class="syIcon"></i>位置:<a id="ReIndex" href="javaScript:;">首页</a>&gt;<a
  80. href="javaScript:;">报表管理</a>&gt;<a href="" class="nowPosition">坐席工作报表</a></sapn>
  81. </div>
  82. <div class="dhRight"><a href="" title="刷新"><i class="fa fa-refresh"></i></a></div>
  83. </div>
  84. <div class="toolBar clearfix">
  85. <div class="topCon">
  86. <!-- 部门:<select name="" id="bumen"></select> -->
  87. 开始时间:
  88. <input type="text" class="laydate-icon" id="startTime" autocomplete="off" />
  89. 结束时间:
  90. <input type="text" class="laydate-icon" id="endTime" autocomplete="off" />
  91. 月工作天数:
  92. <input type="text" id="dayss" style="width:150px;" />
  93. <button class="btns sear">搜索</button>
  94. <a class="btns export">导出</a>
  95. </div>
  96. </div>
  97. <!--<div class="zxt-top clearfix">
  98. <div class="topCon">
  99. </div>
  100. </div>-->
  101. <div class="zxt-content">
  102. <div class="zxt-table">
  103. <div style="width: 100%;padding: 10px;">
  104. <div class="table-head">
  105. <table id="thead" class="table table-hover table-striped table-bordered table-condensed">
  106. <colgroup>
  107. <col style="width: 150px;" />
  108. <col />
  109. </colgroup>
  110. <thead>
  111. <tr></tr>
  112. </thead>
  113. </table>
  114. </div>
  115. <div class="table-body">
  116. <table class="thTable table table-hover table-striped table-bordered table-condensed">
  117. <colgroup>
  118. <col style="width: 150px;" />
  119. <col />
  120. </colgroup>
  121. <tbody></tbody>
  122. </table>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <script src="../js/jquery.min.js?v=2.1.4"></script>
  129. <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  130. <script src="../js/jquery.cookie.js"></script>
  131. <script src="../css/laydate/laydate.js"></script>
  132. <script src="../js/select2/js/select2.min.js"></script>
  133. <script>
  134. $(function () {
  135. var token = $.cookie("token");
  136. laydate.skin('blue');
  137. laydate({
  138. elem: '#startTime',
  139. event: 'focus',
  140. istime: true,
  141. format: 'YYYY-MM-DD hh:mm:ss'
  142. });
  143. laydate({
  144. elem: '#endTime',
  145. event: 'focus',
  146. istime: true,
  147. format: 'YYYY-MM-DD hh:mm:ss'
  148. });
  149. var stime, //开始时间
  150. endtime, //结束时间
  151. dpt; //部门
  152. //部门下拉数据
  153. $("#bumen").select2({
  154. width: 'resolve',
  155. minimumResultsForSearch: -1,
  156. ajax: {
  157. type: "get",
  158. url: huayi.config.callcenter_url + "Department/GetDeptListtree",
  159. async: true,
  160. dataType: "json",
  161. data: function (params) {
  162. return {
  163. token: token,
  164. pid: params.id
  165. }
  166. },
  167. processResults: function (data) {
  168. return {
  169. results: data.data
  170. }
  171. },
  172. cache: true
  173. },
  174. placeholder: "请选择",
  175. });
  176. Ajax();
  177. //搜索事件
  178. $(".sear").click(function () {
  179. $('.thTable tbody').html('');
  180. stime = $('#startTime').val(); //开始时间
  181. endtime = $('#endTime').val(); //结束时间
  182. dpt = $('#bumen').val(); //部门
  183. if (stime != '' && endtime != '') {
  184. Ajax(stime, endtime, dpt);
  185. } else {
  186. Ajax();
  187. if (stime == '') {
  188. layer.confirm('请选择开始时间!', {
  189. btn: ['确定']
  190. });
  191. return;
  192. } else if (endtime == '') {
  193. layer.confirm('请选择结束时间!', {
  194. btn: ['确定']
  195. });
  196. return;
  197. }
  198. }
  199. });
  200. //导出
  201. $('.export').click(function () {
  202. stime = $('#startTime').val(); //开始时间
  203. endtime = $('#endTime').val(); //结束时间
  204. if (stime != '' && endtime != '') {
  205. dcexcel(this);
  206. } else {
  207. if (stime == '') {
  208. layer.confirm('请选择开始时间!', {
  209. btn: ['确定']
  210. });
  211. //return;
  212. } else if (endtime == '') {
  213. layer.confirm('请选择结束时间!', {
  214. btn: ['确定']
  215. });
  216. //return;
  217. }
  218. }
  219. })
  220. function dcexcel(obj) {
  221. var dpt = "";
  222. if ($("#bumen").val())
  223. dpt = $("#bumen").val();
  224. var url = huayi.config.callcenter_url + "ZuoXiWorkTotal/ExptList?token=" + $.cookie("token");
  225. url += "&stime=" + $("#startTime").val() + "&endtime=" + $("#endTime").val() + "&dpt=" + dpt +
  226. "&dayss=" + $("#dayss").val();
  227. obj.href = url;
  228. }
  229. //表头
  230. $.ajax({
  231. type: 'get',
  232. url: huayi.config.callcenter_url + "ZuoXiWorkTotal/GetColumnList",
  233. async: true,
  234. dataType: 'json',
  235. data: {
  236. token: token
  237. },
  238. success: function (res) {
  239. $('#thead thead tr').html('');
  240. var con = res.data;
  241. // console.log(con);
  242. for (var i = 0; i < con.length; i++) {
  243. if (con[i] !== "部门") {
  244. $('<th>' + con[i] + '</th>').appendTo('#thead thead tr')
  245. }
  246. }
  247. }
  248. })
  249. //表内数据
  250. function Ajax(stime, endtime, dpt, dayss) {
  251. $.ajax({
  252. type: "get",
  253. url: huayi.config.callcenter_url + "ZuoXiWorkTotal/GetDataList",
  254. async: true,
  255. dataType: 'json',
  256. data: {
  257. stime: stime,
  258. endtime: endtime,
  259. dpt: dpt,
  260. dayss: dayss,
  261. token: token
  262. },
  263. success: function (res) {
  264. var result = res.data;
  265. $('.thTable tbody').html('');
  266. if (result != null) {
  267. for (var i = 0; i < result.length; i++) {
  268. //$('<tr><td>' + result[i].部门 + '</td><td>' + result[i].坐席 + '</td><td>' + result[i].坐席工号 + '</td><td>' + result[i].呼入电话数 + '</td><td>' + result[i].坐席接通量 + '</td><td>' + result[i].呼损量 + '</td><td>' + result[i].接通率 + '</td><td>' + result[i].呼损率 + '</td><td>' + result[i].平均排队时间 + '</td><td>' + result[i].接听通话次数 + '</td><td>' + result[i].通话分钟数 + '</td><td>' + result[i].通话秒数 + '</td><td>' + result[i].平均接听通话秒数 + '</td><td>' + result[i].平均振铃秒数 + '</td><td>' + result[i].呼入占有率 + '</td><td>' + result[i].用户评价 + '</td><td>' + result[i].坐席登录次数 + '</td><td>' + result[i].登录时长分钟数 + '</td><td>' + result[i].工作时长分钟数 + '</td><td>' + result[i].平均每天工作时长 + '</td><td>' + result[i].置忙次数 + '</td><td>' + result[i].休息时长分钟数 + '</td><td>' + result[i].平均每天休息时长 + '</td><td>' + result[i].置忙平均休息分钟数 + '</td><td>' + result[i].质检平均成绩 + '</td></tr>').appendTo('.thTable tbody')
  269. $('<tr><td>' + result[i].坐席 +
  270. '</td><td>' + result[i].坐席工号 + '</td><td>' + result[i]
  271. .呼入电话数 + '</td><td>' + result[i].坐席接通量 + '</td><td>' +
  272. result[i].呼损量 + '</td><td>' + result[i].接通率 + '</td><td>' +
  273. result[i].呼损率 + '</td><td>' + result[i].平均排队时间 +
  274. '</td><td>' + result[i].接听通话次数 + '</td><td>' + result[i]
  275. .通话分钟数 + '</td><td>' + result[i].通话秒数 + '</td><td>' +
  276. result[i].平均接听通话秒数 + '</td><td>' + result[i].平均振铃秒数 +
  277. '</td><td>' + result[i].呼入占有率 + '</td><td>' + result[i]
  278. .用户评价 + '</td><td>' + result[i].坐席登录次数 + '</td><td>' +
  279. result[i].登录时长分钟数 + '</td><td>' + result[i].工作时长分钟数 +
  280. '</td><td>' + result[i].平均每天工作时长 + '</td><td>' + result[i]
  281. .置忙次数 + '</td><td>' + result[i].休息时长分钟数 + '</td><td>' +
  282. result[i].平均每天休息时长 + '</td><td>' + result[i].置忙平均休息分钟数 +
  283. '</td></tr>').appendTo('.thTable tbody')
  284. }
  285. }
  286. }
  287. });
  288. }
  289. })
  290. </script>
  291. </body>
  292. </html>