Нет описания

callCenterReceptionStatus.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  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 rel="stylesheet" href="../css/WorkOrder/Search.css" />
  10. <link rel="stylesheet" href="../css/init.css" />
  11. <link rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
  12. <link rel="stylesheet" href="../css/bootstrap-select.css" />
  13. <script src="../js/laydate/laydate.js"></script>
  14. <script src="../js/zTree/jquery.ztree.core.js"></script>
  15. <script src="../js/bootstrap-select.js"></script>
  16. <style>
  17. table td {
  18. word-break: break-all;
  19. word-wrap: break-word;
  20. }
  21. .Shows {
  22. display: block !important;
  23. }
  24. .complain {
  25. display: none;
  26. }
  27. .toolLeft input {
  28. width: 200px;
  29. }
  30. th {
  31. padding: 5px;
  32. text-align: center;
  33. }
  34. td {
  35. padding: 5px;
  36. }
  37. .Borders {
  38. border: 1px solid #d7d7d7;
  39. }
  40. .daoHang {
  41. margin-bottom: 15px;
  42. }
  43. .Content_box .title {
  44. font-size: 24px;
  45. text-align: center;
  46. }
  47. .Content_box h5 {
  48. font-size: 16px;
  49. text-align: center;
  50. }
  51. .select {
  52. width: 200px;
  53. height: 32px;
  54. border: 1px solid rgb(229, 230, 231);
  55. }
  56. .footerDataStatistics {
  57. /* padding: 0 0 0 20px; */
  58. margin: 10px 0 0 10px;
  59. font-size: 18px;
  60. }
  61. </style>
  62. </head>
  63. <body class="gray-bg">
  64. <div class="wrapper wrapper-content animated fadeInRight">
  65. <div class="daoHang clearfix">
  66. <div class="dhLeft">
  67. <sapn>
  68. <i class="syIcon"></i>位置:
  69. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  70. <a href="javaScript:;">业务统计</a>&gt;
  71. <a href="" class="nowPosition">督办报表</a>
  72. </sapn>
  73. </div>
  74. <div class="dhRight">
  75. <a href="" title="刷新"><i class="fa fa-refresh"></i></a>
  76. </div>
  77. </div>
  78. <div class="Content_box">
  79. <div class="complain Shows">
  80. <div class="toolBar clearfix">
  81. <div class="toolLeft">
  82. 开始日期:
  83. <input class="photo x-color inputs laydate-icon" type="text" id="squeryTime"
  84. autocomplete="off" />
  85. 结束时间:
  86. <input class="photo x-color inputs laydate-icon" type="text" id="equeryTime"
  87. autocomplete="off" />
  88. 坐席组:
  89. <select class="select_" id="agentGroup">
  90. <option value="">请选择</option>
  91. </select>
  92. 受话坐席:
  93. <select id="ZX" name="select" class="selectpicker show-tick" multiple data-live-search="true">
  94. <option value="">请选择坐席</option>
  95. </select>
  96. <button class="btns search">查询</button>
  97. <a class="btns" id="exportReport">导出</a>
  98. </div>
  99. </div>
  100. <div style="width: 100%;padding: 10px;">
  101. <table id="workorderlist" class="tables" data-row-style="rowStyle" data-query-params="queryParams"
  102. data-pagination="true">
  103. <thead>
  104. <tr>
  105. <th data-field="" data-formatter="serialNumber" data-align="center">序号</th>
  106. <th data-field="groupname" data-align="center">班组</th>
  107. <th data-field="username" data-align="center">坐席人员</th>
  108. <th data-field="telcount" data-align="center">通话量</th>
  109. <th data-field="hrcount" data-align="center">呼入接通量</th>
  110. <th data-field="hccount" data-align="center">呼出接通量</th>
  111. <th data-field="hcwjtcount" data-align="center">呼出未接通量</th>
  112. <th data-field="callTotal" data-align="center">来电总量</th>
  113. <th data-field="notConnectedAmount" data-align="center">未接通量</th>
  114. <th data-field="staybackDialQuantity" data-align="center">待回拨量</th>
  115. </tr>
  116. </thead>
  117. </table>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <script>
  123. $(document).ready(function () {
  124. laydate.render({
  125. elem: '#squeryTime',
  126. theme: '#00a1cb',
  127. type: 'datetime'
  128. });
  129. laydate.render({
  130. elem: '#equeryTime',
  131. theme: '#00a1cb',
  132. type: 'datetime'
  133. });
  134. initTable();
  135. //获取坐席组
  136. getAgentGroup($("#agentGroup"));
  137. //获取坐席
  138. getAgent($("#ZX"))
  139. });
  140. //表格
  141. function initTable() {
  142. //坐席
  143. var usercodeID = "";
  144. var usercode_ = $("#ZX").val(); //坐席
  145. if (usercode_ != null) {
  146. $(usercode_).each(function (i, n) {
  147. var obj1 = "";
  148. obj1 = n + ",";
  149. usercodeID += obj1;
  150. });
  151. usercodeID = usercodeID.slice(0, -1);
  152. } else {
  153. usercodeID = "";
  154. }
  155. $.ajax({
  156. url: huayi.config.callcenter_url + 'WorkOrderReport/CenterReception',
  157. type: 'get',
  158. data: {
  159. starttime: $('#squeryTime').val(),
  160. endtime: $('#equeryTime').val(),
  161. group: $("#agentGroup").val(), // 坐席组
  162. usercode: usercodeID, // 坐席工号
  163. token: $.cookie("token")
  164. },
  165. dataType: "json",
  166. async: true,
  167. success: function (returnValue) {
  168. var resultData = [];
  169. if (returnValue.data.CenterReception.length > 0) {
  170. resultData = returnValue.data.CenterReception;
  171. resultData[0].callTotal = returnValue.data.CenterReception1[0].telcount;
  172. resultData[0].notConnectedAmount = returnValue.data.CenterReception2[0].wjtcount;
  173. resultData[0].staybackDialQuantity = returnValue.data.CenterReception3[0].dhbcount;
  174. }
  175. $('#workorderlist').bootstrapTable('load', resultData);
  176. $('#workorderlist').bootstrapTable('mergeCells', {
  177. index: 0,
  178. field: 'callTotal',
  179. colspan: 0,
  180. rowspan: resultData.length
  181. });
  182. $('#workorderlist').bootstrapTable('mergeCells', {
  183. index: 0,
  184. field: 'notConnectedAmount',
  185. colspan: 0,
  186. rowspan: resultData.length
  187. });
  188. $('#workorderlist').bootstrapTable('mergeCells', {
  189. index: 0,
  190. field: 'staybackDialQuantity',
  191. colspan: 0,
  192. rowspan: resultData.length
  193. });
  194. }
  195. });
  196. $('#workorderlist').bootstrapTable('destroy').bootstrapTable({
  197. striped: true,
  198. pagination: false,
  199. });
  200. }
  201. //搜索
  202. $(".search").click(function () {
  203. initTable();
  204. });
  205. //编号
  206. function serialNumber(val, row, index) {
  207. return index + 1;
  208. }
  209. // 坐席组
  210. function getAgentGroup(obj) {
  211. obj.empty();
  212. obj.append(
  213. '<option selected="selected" value="">请选择</option>'
  214. );
  215. $.getJSON(
  216. huayi.config.callcenter_url +
  217. "Dictionary/GetDicValueListById", {
  218. token: $.cookie("token"),
  219. id: 2522,
  220. },
  221. function (data) {
  222. if (data.state.toLowerCase() == "success") {
  223. var content = data.data;
  224. $(content).each(function (i, n) {
  225. $(
  226. "<option value='" +
  227. n.F_Value +
  228. "'>" +
  229. n.F_Value +
  230. "</option>"
  231. ).appendTo(obj);
  232. });
  233. }
  234. }
  235. );
  236. }
  237. ///坐席
  238. function getAgent(obj) {
  239. obj.empty();
  240. $.getJSON(
  241. huayi.config.callcenter_url + "UserAccount/GetSeatList", {
  242. token: $.cookie("token"),
  243. },
  244. function (data) {
  245. if (data.state.toLowerCase() == "success") {
  246. var content = data.data;
  247. $(content).each(function (i, n) {
  248. $(
  249. "<option value='" +
  250. n.F_UserCode +
  251. "'>" +
  252. n.F_UserName +
  253. "</option>"
  254. ).appendTo(obj);
  255. });
  256. obj.selectpicker({
  257. noneSelectedText: "请选择", //默认显示内容
  258. });
  259. obj.selectpicker("refresh");
  260. }
  261. }
  262. );
  263. }
  264. //导出
  265. $('#exportReport').click(function () {
  266. dcexcelDispath(this);
  267. });
  268. function dcexcelDispath(obj) {
  269. //坐席
  270. var usercodeID = "";
  271. var usercode_ = $("#ZX").val(); //坐席
  272. if (usercode_ != null) {
  273. $(usercode_).each(function (i, n) {
  274. var obj1 = "";
  275. obj1 = n + ",";
  276. usercodeID += obj1;
  277. });
  278. usercodeID = usercodeID.slice(0, -1);
  279. } else {
  280. usercodeID = "";
  281. }
  282. var starttime = $('#squeryTime').val();
  283. var endtime = $('#equeryTime').val();
  284. var group = $("#agentGroup").val(); // 坐席组
  285. var url = huayi.config.callcenter_url + "WorkOrderReport/CenterReception?token=" + $.cookie("token");
  286. url += "&starttime=" + starttime + "&endtime=" + endtime + "&group=" + group + "&usercode=" + usercodeID + "&isExport=true";
  287. obj.href = url;
  288. }
  289. </script>
  290. </body>
  291. </html>