Aucune description

qualityControl.html 8.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>质检结果</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="../Script/Common/huayi.load.js"></script>
  8. <script src="../Script/Common/huayi.config.js"></script>
  9. <link href="../css/Table/table1.css" rel="stylesheet" />
  10. <link href="../css/init.css" rel="stylesheet" />
  11. <link href="../js/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
  12. <link href="../css/Quality/QualityCommon.css" rel="stylesheet" />
  13. </head>
  14. <body class="gray-bg">
  15. <div class="daoHang clearfix">
  16. <div class="dhLeft">
  17. <sapn><i class="syIcon"></i>位置:
  18. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  19. <a href="javaScript:;">质检管理</a>&gt;
  20. <a href="javascript:location.reload()" class="now_position">质检结果</a>
  21. </sapn>
  22. </div>
  23. </div>
  24. <div class="wrapper wrapper-content animated fadeInRight">
  25. <div class="th-box">
  26. <div class="form-inline th-bar clearfix">
  27. <div class="form-group">
  28. <select class="form-control selectpicker" id="usercode" data-live-search="true"></select>
  29. </div>
  30. <div class="form-group">
  31. <select class="form-control" id="calltype">
  32. <option value="">请选择呼叫方向</option>
  33. <option value="0">呼入</option>
  34. <option value="1">呼出</option>
  35. </select>
  36. </div>
  37. <div class="form-group time-box">
  38. <i class="tub fa fa-calendar"></i>
  39. <input class="form-control search_time" type="text" id="telTimes" placeholder="请选择通话时间">
  40. </div>
  41. <div class="form-group time-box">
  42. <i class="tub fa fa-search"></i>
  43. <input type="text" class="form-control" id="phone" placeholder="请输入电话号码">
  44. </div>
  45. <div class="form-group pull-right">
  46. <input type="button" class="btn_gray" id="sc_btns" value="搜索" />
  47. </div>
  48. </div>
  49. </div>
  50. <div style="width: 100%;padding: 10px;">
  51. <table id="goods" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  52. <thead>
  53. <tr>
  54. <th data-field="_bh" data-formatter="Code"></th>
  55. <th data-field="_callnumber">电话号码</th>
  56. <th data-field="_filepath" data-formatter="setCode">录音质检</th>
  57. <th data-field="_f_qcstate" data-formatter="quality">是否质检</th>
  58. <th data-field="_f_qcscore">质检得分</th>
  59. <th data-field="_calltype" data-formatter="call">呼叫方向</th>
  60. <th data-field="_callstate" data-formatter="states">呼叫状态</th>
  61. <th data-field="_usercode">坐席工号</th>
  62. <th data-field="_username">坐席姓名</th>
  63. <th data-field="_deptname" data-align="center">所属公司</th>
  64. <th data-field="_talkstarttime">通话开始时间</th>
  65. <th data-field="_talkendtime">通话结束时间</th>
  66. <th data-field="_talklongtime">通话时长(S)</th>
  67. <th data-field="_businesstype">按键</th>
  68. </tr>
  69. </thead>
  70. </table>
  71. </div>
  72. </div>
  73. <script src="../js/laydate/laydate.js"></script>
  74. <script src="../js/bootstrap-select/js/bootstrap-select.js"></script>
  75. <script src="../js/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
  76. <script src="../Script/Common/regexs.js"></script>
  77. <script>
  78. $(function() {
  79. var Phone; //电话
  80. var Usercode; //工号
  81. var Calltype; //=呼叫类型(呼入/呼出)
  82. var Starttime; //开始时间
  83. var Endtime; //结束时间
  84. laydate.render({
  85. elem: '#telTimes',
  86. range: '~',
  87. theme: '#249fea',
  88. });
  89. //获取坐席
  90. getSeatList();
  91. Finishs(Phone, Usercode, Calltype, Starttime, Endtime);
  92. //搜索 验证
  93. $("#sc_btns").click(function() {
  94. Phone = $('#phone').val(); //电话
  95. Usercode = $('#usercode').val(); //工号
  96. Calltype = $('#calltype').val(); //=呼叫类型(呼入/呼出)
  97. Starttime = $('#telTimes').val() && $('#telTimes').val().split(' ~ ')[0]; //开始时间
  98. Endtime = $('#telTimes').val() && $('#telTimes').val().split(' ~ ')[1]; //结束时间
  99. if(!regexs.phone.test($.trim(Phone))) {
  100. layer.confirm('请输入有效的电话号码!', {
  101. icon: 2,
  102. btn: ['确定'] //按钮
  103. });
  104. return;
  105. }
  106. Finishs(Phone, Usercode, Calltype, Starttime, Endtime);
  107. });
  108. });
  109. //格式化录音质检
  110. function setCode(val, row) {
  111. if(val) {
  112. return '<div class="imgs">' +
  113. '<img src="../img/vice.png" style="margin-right:5px;"onclick= "recordQualityResult(\'' + row._callrecordsid + ',' + row._callnumber + ',' + row._calltype + ',' + row._talkstarttime + ',' + row._talklongtime + ',' + row._usercode + ',' + row._username + ',' + val + ',' + row._callid + '\')"/>' +
  114. '<a title="操作" onclick= "Quality(\'' + row._callrecordsid + ',' + row._callnumber + ',' + row._calltype + ',' + row._talkstarttime + ',' + row._talklongtime + ',' + row._usercode + ',' + row._username + ',' + val + '\')"><i class="fa fa-cogs" aria-hidden="true"></i></a>' +
  115. '</div>';
  116. } else {
  117. return '-';
  118. }
  119. }
  120. //编号
  121. function Code(val, row, index) {
  122. return index + 1;
  123. }
  124. //格式化是否质检
  125. function quality(val) {
  126. if(val == 0) {
  127. return '<span class="state_audit state_audit_wait">未质检</span>';
  128. } else {
  129. return '<span class="state_audit state_audit_done">已质检</span>';
  130. }
  131. }
  132. //格式化呼出方向
  133. function call(val) {
  134. if(val == 0) {
  135. return '<div class="imgs">呼入' +
  136. '</div>';
  137. } else {
  138. return '<div class="imgs">呼出' +
  139. '</div>';
  140. }
  141. }
  142. //格式化接通状态
  143. function states(val) {
  144. if(val == 0) {
  145. return '<div class="imgs">未接通' +
  146. '</div>';
  147. } else {
  148. return '<div class="imgs">已接通' +
  149. '</div>';
  150. }
  151. }
  152. //录音质检
  153. function recordQualityResult(recordprams) {
  154. layer.open({
  155. type: 2,
  156. content: "../templateHtml/recordQualityResult.html?recordprams=" + recordprams,
  157. title: '录音质检',
  158. area: ['80%', '90%'], //宽高
  159. });
  160. }
  161. function Quality(recordprams) {
  162. layer.open({
  163. type: 2,
  164. content: "../templateHtml/recordQualityDetail.html?recordprams=" + recordprams,
  165. title: '录音质检',
  166. area: ['80%', '90%'], //宽高
  167. });
  168. }
  169. //获取质检列表
  170. function Finishs(Phone, Usercode, Calltype, Starttime, Endtime) {
  171. //销毁表格
  172. $('#goods').bootstrapTable('destroy');
  173. //初始化表格,动态从服务器加载数据
  174. $("#goods").bootstrapTable({
  175. method: "get", //使用get请求到服务器获取数据
  176. url: huayi.config.callcenter_url + "QCManage/GetYZJList", //获取数据的Servlet地址
  177. striped: true, //表格显示条纹
  178. pagination: true, //启动分页
  179. pageSize: 10, //每页显示的记录数
  180. pageNumber: 1, //当前第几页
  181. pageList: [5, 20, 50, 100], //记录数可选列表
  182. search: false, //是否启用查询
  183. showColumns: false, //显示下拉框勾选要显示的列
  184. showRefresh: false, //显示刷新按钮
  185. sidePagination: "server", //表示服务端请求
  186. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  187. //设置为limit可以获取limit, offset, search, sort, order
  188. queryParamsType: "undefined",
  189. queryParams: function queryParams(params) { //设置查询参数
  190. var param = {
  191. page: params.pageNumber,
  192. pagesize: params.pageSize,
  193. phone: Phone,
  194. usercode: Usercode,
  195. calltype: Calltype,
  196. starttime: Starttime,
  197. endtime: Endtime,
  198. token: $.cookie("token")
  199. };
  200. return param;
  201. },
  202. onLoadSuccess: function() { //加载成功时执行
  203. // layer.msg("加载成功");
  204. },
  205. onLoadError: function() { //加载失败时执行
  206. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  207. }
  208. });
  209. }
  210. //获取坐席下拉列表
  211. function getSeatList() {
  212. $.getJSON(huayi.config.callcenter_url + "UserAccount/GetUserCodeListByRole", {
  213. token: $.cookie("token")
  214. }, function(result) {
  215. if(result.state.toLowerCase() == "success") {
  216. var seatlist = result.data;
  217. $("#usercode").empty();
  218. $("#usercode").append('<option value=" ">请选择坐席工号</option>');
  219. $(seatlist).each(function(i, n) {
  220. $("#usercode").append('<option value="' + n.value + '">' + n.text + '</option>');
  221. })
  222. $('#usercode').selectpicker('refresh');
  223. }
  224. });
  225. }
  226. </script>
  227. </body>
  228. </html>