三元财务UI

businessReport.html 6.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  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 rel="stylesheet" href="../js/select2/css/select2.min.css" />
  13. <link rel="stylesheet" href="../js/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: none !important;
  23. margin-right: 45px;
  24. }
  25. .zxt-content {
  26. display: inline-block;
  27. width: 90%;
  28. margin: 20px 5%;
  29. }
  30. .select2-container--default .select2-selection--single{
  31. border-color: #e5e6e7;
  32. }
  33. </style>
  34. </head>
  35. <body class="gray-bg" style="background: #fefefe;">
  36. <div class="zxtable">
  37. <div class="daoHang clearfix">
  38. <div class="dhLeft">
  39. <sapn><i class="syIcon"></i>位置:
  40. <a id="ReIndex" href="javaScript:;">首页</a>&gt;
  41. <a href="javaScript:;">报表分析</a>&gt;
  42. <a href="javaScript:;">业务数据分析</a>&gt;
  43. <a href="" class="nowPosition">业务数据报表</a>
  44. </sapn>
  45. </div>
  46. <div class="dhRight">
  47. <a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
  48. </div>
  49. </div>
  50. <div class="zxt-top clearfix">
  51. <div class="topCon">
  52. <div class="form-inline th-bar clearfix">
  53. <div class="time-box form-group">
  54. <i class="tub fa fa-calendar"></i>
  55. <input class="form-control" type="text" id="startTime" placeholder="请选择起止时间" style="width: 228px;">
  56. </div>
  57. <div class="time-box form-group">
  58. 部门:
  59. <select id="bumen">
  60. <option value="">请选择</option>
  61. </select>
  62. </div>
  63. <div class="form-group tool_bars pull-right">
  64. <button class="btns sear">搜索</button>
  65. <a class="btns export">导出</a>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. <div class="zxt-content">
  71. <table class="layui-hide" id="t_callTotal"></table>
  72. </div>
  73. </div>
  74. <script src="../js/layui/layui.js"></script>
  75. <script src="../js/select2/js/select2.min.js"></script>
  76. <script>
  77. var token = $.cookie("token");
  78. var stime = ''; //开始时间
  79. var endtime = ''; //结束时间
  80. var dpt = ''; //部门
  81. $(function() {
  82. var regNum = /^[0-9]+$/;
  83. layui.use('laydate', function() {
  84. var laydate = layui.laydate;
  85. //日期
  86. laydate.render({
  87. elem: '#startTime',
  88. range: '~',
  89. theme: '#1ab394',
  90. calendar: 'true'
  91. });
  92. });
  93. getDept(); //获取部门下拉
  94. getTableDataList(); //获取表格数据
  95. //搜索事件
  96. $(".sear").click(function() {
  97. dpt = $('#bumen').val();
  98. dpt = dpt === null ? '' : dpt;
  99. stime = $('#startTime').val() && $('#startTime').val().split(' ~ ')[0];
  100. endtime = $('#startTime').val() && $('#startTime').val().split(' ~ ')[1];
  101. getTableDataList(); //获取表格数据
  102. });
  103. //导出
  104. $('.export').click(function() {
  105. dpt = $('#bumen').val();
  106. dpt = dpt === null ? '' : dpt;
  107. stime = $('#startTime').val() && $('#startTime').val().split(' ~ ')[0];
  108. endtime = $('#startTime').val() && $('#startTime').val().split(' ~ ')[1];
  109. dcexcel(this);
  110. });
  111. });
  112. function dcexcel(obj) {
  113. var url = huayi.config.callcenter_url + "WOReport/ExptList?token=" + token;
  114. url += "&stime=" + stime + "&endtime=" + endtime + "&deptid=" + dpt;
  115. obj.href = url;
  116. }
  117. //加载表格
  118. function getTableDataList() {
  119. layui.use('table', function() {
  120. var table = layui.table;
  121. $.ajax({
  122. type: "get",
  123. url: huayi.config.callcenter_url + "WOReport/GetDataList", // 数据接口
  124. data: {
  125. stime: stime, // 开始时间
  126. endtime: endtime, // 结束时间
  127. deptid: dpt, // 部门id
  128. token: token
  129. },
  130. async: true,
  131. success: function(r) {
  132. var obj = JSON.parse(r);
  133. var data = obj.data.dtNew;
  134. //方法级渲染
  135. table.render({
  136. elem: '#t_callTotal',
  137. skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格)
  138. even: true, //开启隔行背景
  139. size: 'md', //sm,lg,md尺寸的表格
  140. cellMinWidth: 160,
  141. data: data,
  142. page: true,
  143. cols: [
  144. [
  145. {
  146. field: '部门',
  147. title: '部门',
  148. align: 'center',
  149. fixed: true,
  150. //sort: true,
  151. width: 150,
  152. }, {
  153. field: '工号',
  154. title: '工号',
  155. align: 'center',
  156. width: '',
  157. },
  158. {
  159. field: '姓名',
  160. title: '姓名',
  161. align: 'center',
  162. width: '',
  163. },
  164. {
  165. field: '建单量',
  166. title: '建单量',
  167. align: 'center',
  168. width: '',
  169. },
  170. {
  171. field: '接单量',
  172. title: '接单量',
  173. align: 'center',
  174. width: '',
  175. },
  176. {
  177. field: '未处理量',
  178. title: '未处理量',
  179. align: 'center',
  180. width: '',
  181. },
  182. {
  183. field: '异常量',
  184. title: '异常量',
  185. align: 'center',
  186. width: '',
  187. },
  188. {
  189. field: '已处理量',
  190. title: '已处理量',
  191. align: 'center',
  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. });
  205. }
  206. });
  207. });
  208. }
  209. function getDept() {
  210. //部门下拉数据
  211. $("#bumen").select2({
  212. width: 'resolve',
  213. minimumResultsForSearch: -1,
  214. ajax: {
  215. type: "get",
  216. url: huayi.config.callcenter_url + "Department/GetDeptList",
  217. async: true,
  218. dataType: "json",
  219. data: function(params) {
  220. return {
  221. token: token,
  222. pid: params.id
  223. }
  224. },
  225. processResults: function(data) {
  226. return {
  227. results: data.data
  228. }
  229. },
  230. cache: true
  231. },
  232. placeholder: "请选择",
  233. });
  234. }
  235. </script>
  236. </body>
  237. </html>