Нет описания

riTongHuaTime.html 7.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  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. <link rel="stylesheet" href="js/select2/css/select2.min.css" />
  11. <script src="Script/Common/huayi.load.js"></script>
  12. <script src="Script/Common/huayi.config.js"></script>
  13. <link rel="stylesheet" href="./js/layui-v2.5.5/layui/css/layui.css" />
  14. <link rel="stylesheet" href="css/init.css" />
  15. <style>
  16. .zxt-top {
  17. background: #f3f3f4;
  18. height: 60px;
  19. padding: 10px 20px;
  20. }
  21. .topCon {
  22. float: right;
  23. margin-right: 45px;
  24. }
  25. .zxt-content {
  26. width: 95%;
  27. margin: 0 auto;
  28. }
  29. </style>
  30. </head>
  31. <body class="gray-bg" style="background: #fefefe;">
  32. <div class="zxtable">
  33. <div class="daoHang clearfix">
  34. <div class="dhLeft">
  35. <sapn><i class="syIcon"></i>位置:
  36. <a id="ReIndex" href="javaScript:;">首页</a>&gt;
  37. <a href="javaScript:;">报表分析</a>&gt;
  38. <a href="javaScript:;">话务运营分析</a>&gt;
  39. <a href="" class="nowPosition">日通话时长统计</a>
  40. </sapn>
  41. </div>
  42. <div class="dhRight">
  43. <a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
  44. </div>
  45. </div>
  46. <div class="zxt-top clearfix">
  47. <div class="topCon">
  48. <div class="form-inline th-bar clearfix">
  49. <div class="time-box form-group">
  50. <i class="tub fa fa-calendar"></i>
  51. <input class="form-control" type="text" id="startTime" placeholder="请选择起止时间" style="width: 228px;">
  52. </div>
  53. <!--<div class="time-box form-group">
  54. 部门:
  55. <select id="bumen">
  56. <option value="">请选择</option>
  57. </select>
  58. </div>-->
  59. <div class="time-box form-group">
  60. <select name="" id="zuoxi" class="form-control"></select>
  61. </div>
  62. <div class="form-group tool_bars pull-right">
  63. <button class="btns sear">搜索</button>
  64. <a class="btns export">导出</a>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="zxt-content">
  70. <table class="layui-hide" id="t_callTotal" lay-filter="layuitableTotal"></table>
  71. </div>
  72. </div>
  73. <script src="js/layui-v2.5.5/layui/layui.js"></script>
  74. <script src="./js/select2/js/select2.min.js"></script>
  75. <script>
  76. var token = $.cookie("token");
  77. $(function() {
  78. bindseat(); //获取坐席
  79. layui.use('laydate', function() {
  80. var laydate = layui.laydate;
  81. //日期
  82. laydate.render({
  83. elem: '#startTime',
  84. range: '~',
  85. theme: '#1ab394',
  86. calendar: 'true'
  87. });
  88. });
  89. var myDate = new Date();
  90. $('#startTime').val(myDate.getFullYear() + "-" + turn(myDate.getMonth() + 1) + "-" + "01" + " ~ " + myDate.getFullYear() + "-" + turn(myDate.getMonth() + 1) + "-" + turn(myDate.getDate()));
  91. function turn(aa) {
  92. if(aa < 10) {
  93. aa = "0" + aa;
  94. }
  95. return aa;
  96. }
  97. //helper.getDropList.getDept($('#bumen'));//获取部门
  98. getTableDataList(); //获取表格数据
  99. //搜索事件
  100. $(".sear").click(function() {
  101. getTableDataList();
  102. });
  103. document.onkeydown = function (e) { // 回车提交表单
  104. var theEvent = window.event || e;
  105. var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
  106. if (code == 13) {
  107. getTableDataList();
  108. }
  109. }
  110. //导出
  111. $('.export').click(function() {
  112. dcexcel(this);
  113. })
  114. })
  115. //加载表格
  116. function getTableDataList() {
  117. var loadindex = layer.load();
  118. layui.use('table', function() {
  119. var table = layui.table;
  120. //方法级渲染
  121. table.render({
  122. elem: '#t_callTotal',
  123. url: huayi.config.callcenter_url + "DaysTalkTime/GetDataList",
  124. method: 'get', //如果无需自定义HTTP类型,可不加该参数
  125. skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格)
  126. even: true, //开启隔行背景
  127. size: 'lg', //sm,lg尺寸的表格
  128. where: {
  129. stime: $('#startTime').val() && $('#startTime').val().split(' ~ ')[0],
  130. etime: $('#startTime').val() && $('#startTime').val().split(' ~ ')[1],
  131. //dpt: $('#bumen').val(),
  132. usercode: $("#zuoxi option:selected").val(),
  133. token: token
  134. }, //如果无需传递额外参数,可不加该参数
  135. //request: {}, //如果无需自定义请求参数,可不加该参数
  136. response: {
  137. statusName: 'state', //数据状态的字段名称,默认:code
  138. statusCode: 'success', //成功的状态码,默认:0
  139. msgName: 'message', //状态信息的字段名称,默认:msg
  140. //countName: 'total', //数据总数的字段名称,默认:count
  141. //dataName: 'rows', //数据列表的字段名称,默认:data
  142. }, //如果无需自定义数据响应名称,可不加该参数
  143. cols: [
  144. [{
  145. field: '日期',
  146. title: '日期',
  147. align: 'center',
  148. fixed: true,
  149. sort: true,
  150. width: 150,
  151. }, {
  152. field: '呼入次数',
  153. title: '呼入次数',
  154. align: 'center',
  155. width: '',
  156. },
  157. {
  158. field: '呼入时长',
  159. title: '呼入时长',
  160. align: 'center',
  161. width: '',
  162. },
  163. {
  164. field: '呼出次数',
  165. title: '呼出次数',
  166. align: 'center',
  167. width: '',
  168. },
  169. {
  170. field: '呼出时长',
  171. title: '呼出时长',
  172. align: 'center',
  173. width: '',
  174. },
  175. {
  176. field: '呼出未接通次数',
  177. title: '呼出未接通次数',
  178. align: 'center',
  179. width: '',
  180. },
  181. {
  182. field: '振铃时长',
  183. title: '振铃时长',
  184. align: 'center',
  185. width: '',
  186. },
  187. {
  188. field: '通话总时长',
  189. title: '通话总时长',
  190. align: 'center',
  191. templet: '<div><span class="color_73926">{{d.通话总时长}}</span></div>',
  192. width: '',
  193. },
  194. {
  195. field: '平均通话总时长',
  196. title: '平均通话总时长',
  197. align: 'center',
  198. templet: '<div><span class="color_73926">{{d.平均通话总时长}}</span></div>',
  199. width: '',
  200. },
  201. ]
  202. ],
  203. height: 'full-150',
  204. done:function(){
  205. layer.close(loadindex);
  206. }
  207. });
  208. //监听行单击事件
  209. table.on('row(layuitableTotal)', function(obj){
  210. console.log(obj.tr) //得到当前行元素对象
  211. console.log(obj.data) //得到当前行数据
  212. var time = obj.data.日期;
  213. //修改工单
  214. layer.open({
  215. type: 2,
  216. title: '明细信息',
  217. maxmin: true, //开启最大化最小化按钮
  218. area: ['80%', '90%'],
  219. content: './ReportForm/dailyCallDurationDetail.html?time=' + time,
  220. });
  221. });
  222. });
  223. }
  224. //获取坐席
  225. function bindseat() {
  226. $.getJSON(huayi.config.callcenter_url + "UserAccount/GetSeatList", {
  227. token: token
  228. }, function(result) {
  229. if(result.state.toLowerCase() == "success") {
  230. seatlist = result.data;
  231. $("#zuoxi").empty();
  232. $("#zuoxi").append('<option value="">请选择坐席</option>');
  233. $(seatlist).each(function(i, n) {
  234. $("#zuoxi").append('<option value="' + n.F_UserCode + '">' + n.F_UserName + '</option>');
  235. })
  236. }
  237. });
  238. }
  239. function dcexcel(obj) {
  240. var stime = $('#startTime').val() && $('#startTime').val().split(' ~ ')[0];
  241. var etime = $('#startTime').val() && $('#startTime').val().split(' ~ ')[1];
  242. var url = huayi.config.callcenter_url + "DaysTalkTime/ExptList?token=" + token;
  243. url += "&stime=" + stime + "&etime=" + etime + "&usercode=" + $("#zuoxi option:selected").val();
  244. obj.href = url;
  245. }
  246. </script>
  247. </body>
  248. </html>