安图前端代码

WorkSheetProcess.html 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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/layui/css/layui.css" />
  13. <link rel="stylesheet" href="./../js/select2/css/select2.min.css" />
  14. <link rel="stylesheet" href="./../css/init.css" />
  15. <style>
  16. .kpi-top {
  17. background: #f3f3f4;
  18. height: 60px;
  19. padding: 10px 20px;
  20. }
  21. .topCon {
  22. float: right;
  23. margin-right: 45px;
  24. }
  25. .kpi-content h2 {
  26. font-size: 18px;
  27. margin-bottom: 20px;
  28. }
  29. .kpi-content {
  30. width: 90%;
  31. margin: 20px auto 0 auto;
  32. }
  33. .select2-container--default .select2-selection--single{
  34. border-color: #e5e6e7;
  35. }
  36. </style>
  37. </head>
  38. <body class="gray-bg" style="background: #fefefe;">
  39. <div class="hwkpi">
  40. <div class="daoHang clearfix">
  41. <div class="dhLeft">
  42. <sapn><i class="syIcon"></i>位置:
  43. <a id="ReIndex" href="javaScript:;">首页</a>&gt;
  44. <a href="javaScript:;">报表分析</a>&gt;
  45. <a href="javaScript:;">业务数据分析</a>&gt;
  46. <a href="" class="nowPosition">工单处理效率</a>
  47. </sapn>
  48. </div>
  49. <div class="dhRight">
  50. <a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
  51. </div>
  52. </div>
  53. <div class="kpi-top clearfix">
  54. <div class="topCon">
  55. <div class="form-inline th-bar clearfix">
  56. <div class="time-box form-group">
  57. <i class="tub fa fa-calendar"></i>
  58. <input class="form-control" type="text" id="startTime" placeholder="请选择起止时间" style="width: 228px;">
  59. </div>
  60. <div class="time-box form-group">
  61. 部门:
  62. <select id="bumen">
  63. <option value="">请选择</option>
  64. </select>
  65. </div>
  66. <div class="form-group tool_bars pull-right">
  67. <button class="btns sear">搜索</button>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="kpi-content th-content">
  73. <div class="kpi-table">
  74. <h2 style="text-align: center;">工单处理效率</h2>
  75. <table class="layui-hide" id="t_callTotal"></table>
  76. </div>
  77. </div>
  78. </div>
  79. <script src="./../js/layui/layui.js"></script>
  80. <script src="./../js/select2/js/select2.min.js"></script>
  81. <script src="js/ReportFormGetDepart.js"></script>
  82. <script>
  83. var token = $.cookie("token");
  84. var stime = ''; //开始时间
  85. var endtime = ''; //结束时间
  86. $(function() {
  87. layui.use('laydate', function() {
  88. var laydate = layui.laydate;
  89. //日期
  90. laydate.render({
  91. elem: '#startTime',
  92. range: '~',
  93. theme: '#1ab394',
  94. calendar: 'true'
  95. });
  96. });
  97. helper.getDropList.getDept($('#bumen'));//获取部门
  98. getTableDataList(); //获取表格数据
  99. //搜索事件
  100. $(".sear").click(function() {
  101. getTableDataList(); //获取表格数据
  102. });
  103. });
  104. //加载表格
  105. function getTableDataList() {
  106. var loadindex = layer.load();
  107. layui.use('table', function() {
  108. var table = layui.table;
  109. //方法级渲染
  110. table.render({
  111. elem: '#t_callTotal',
  112. url: huayi.config.callcenter_url + "Business/GetWorkEfficiency",
  113. method: 'get', //如果无需自定义HTTP类型,可不加该参数
  114. skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格)
  115. even: true, //开启隔行背景
  116. size: 'lg', //sm,lg尺寸的表格
  117. cellMinWidth: 160,
  118. where: {
  119. starttime: $('#startTime').val() && $('#startTime').val().split(' ~ ')[0],
  120. endtime: $('#startTime').val() && $('#startTime').val().split(' ~ ')[1],
  121. dpt: $('#bumen').val(),
  122. token: token,
  123. }, //如果无需传递额外参数,可不加该参数
  124. //request: {}, //如果无需自定义请求参数,可不加该参数
  125. response: {
  126. statusName: 'state', //数据状态的字段名称,默认:code
  127. statusCode: 'success', //成功的状态码,默认:0
  128. msgName: 'message', //状态信息的字段名称,默认:msg
  129. //countName: 'total', //数据总数的字段名称,默认:count
  130. //dataName: 'rows', //数据列表的字段名称,默认:data
  131. }, //如果无需自定义数据响应名称,可不加该参数
  132. cols: [
  133. [{
  134. field: 'Date',
  135. title: '日期',
  136. align: 'center',
  137. fixed: true,
  138. //sort: true,
  139. width: 150,
  140. },
  141. {
  142. field: 'Count',
  143. title: '工单总量',
  144. align: 'center'
  145. },
  146. {
  147. field: 'TotalTime',
  148. title: '工单总用时/时',
  149. align: 'center'
  150. // templet: '<div><span class="color_73926">{{d.呼出通话总时长}}</span></div>',
  151. },
  152. {
  153. field: 'AvgTime',
  154. title: '工单平均用时/时',
  155. align: 'center',
  156. }
  157. ]
  158. ],
  159. height: 'full-190',
  160. done:function(){
  161. layer.close(loadindex);
  162. }
  163. });
  164. });
  165. }
  166. </script>
  167. </body>
  168. </html>