安图前端代码

WorkSheetProcess.html 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  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="form-group tool_bars pull-right">
  61. <button class="btns sear">搜索</button>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="kpi-content th-content">
  67. <div class="kpi-table">
  68. <h2 style="text-align: center;">工单处理效率</h2>
  69. <table class="layui-hide" id="t_callTotal"></table>
  70. </div>
  71. </div>
  72. </div>
  73. <script src="./../js/layui/layui.js"></script>
  74. <script src="./../js/select2/js/select2.min.js"></script>
  75. <script src="js/ReportFormGetDepart.js"></script>
  76. <script>
  77. var token = $.cookie("token");
  78. var stime = ''; //开始时间
  79. var endtime = ''; //结束时间
  80. $(function() {
  81. layui.use('laydate', function() {
  82. var laydate = layui.laydate;
  83. //日期
  84. laydate.render({
  85. elem: '#startTime',
  86. range: '~',
  87. theme: '#1ab394',
  88. calendar: 'true'
  89. });
  90. });
  91. getTableDataList(); //获取表格数据
  92. //搜索事件
  93. $(".sear").click(function() {
  94. getTableDataList(); //获取表格数据
  95. });
  96. });
  97. //加载表格
  98. function getTableDataList() {
  99. var loadindex = layer.load();
  100. layui.use('table', function() {
  101. var table = layui.table;
  102. //方法级渲染
  103. table.render({
  104. elem: '#t_callTotal',
  105. url: huayi.config.callcenter_url + "Business/GetWorkEfficiency",
  106. method: 'get', //如果无需自定义HTTP类型,可不加该参数
  107. skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格)
  108. even: true, //开启隔行背景
  109. size: 'lg', //sm,lg尺寸的表格
  110. cellMinWidth: 160,
  111. where: {
  112. starttime: $('#startTime').val() && $('#startTime').val().split(' ~ ')[0],
  113. endtime: $('#startTime').val() && $('#startTime').val().split(' ~ ')[1],
  114. token: token,
  115. }, //如果无需传递额外参数,可不加该参数
  116. //request: {}, //如果无需自定义请求参数,可不加该参数
  117. response: {
  118. statusName: 'state', //数据状态的字段名称,默认:code
  119. statusCode: 'success', //成功的状态码,默认:0
  120. msgName: 'message', //状态信息的字段名称,默认:msg
  121. //countName: 'total', //数据总数的字段名称,默认:count
  122. //dataName: 'rows', //数据列表的字段名称,默认:data
  123. }, //如果无需自定义数据响应名称,可不加该参数
  124. cols: [
  125. [{
  126. field: 'Date',
  127. title: '日期',
  128. align: 'center',
  129. fixed: true,
  130. //sort: true,
  131. width: 150,
  132. },
  133. {
  134. field: 'Count',
  135. title: '工单总量',
  136. align: 'center'
  137. },
  138. {
  139. field: 'TotalTime',
  140. title: '工单总用时/时',
  141. align: 'center'
  142. // templet: '<div><span class="color_73926">{{d.呼出通话总时长}}</span></div>',
  143. },
  144. {
  145. field: 'AvgTime',
  146. title: '工单平均用时/时',
  147. align: 'center',
  148. }
  149. ]
  150. ],
  151. height: 'full-190',
  152. done:function(){
  153. layer.close(loadindex);
  154. }
  155. });
  156. });
  157. }
  158. </script>
  159. </body>
  160. </html>