Нет описания

trafficVolume.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  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/init.css" rel="stylesheet" />
  10. <!--<script src="../js/laydate/laydate.js"></script>-->
  11. <script src="../css/laydate/laydate.js"></script>
  12. <style>
  13. .Shows {
  14. display: block !important;
  15. }
  16. .complain {
  17. display: none;
  18. }
  19. .daoHang {
  20. margin-bottom: 15px;
  21. }
  22. #main1,
  23. #main2 {
  24. width: 788.8px;
  25. margin: 0 auto;
  26. -webkit-box-shadow: 1px 1px 9px 2px #D2D2D2;
  27. box-shadow: 1px 1px 9px 2px #D2D2D2;
  28. background-color: #fff;
  29. padding: 30px 60px 80px 60px;
  30. }
  31. .alignC {
  32. text-align: center;
  33. }
  34. .alignC h2 {
  35. font-family: "宋体";
  36. font-weight: bold;
  37. font-size: 22pt;
  38. letter-spacing: -1px;
  39. }
  40. .headerAlign h3 div:nth-of-type(1) {
  41. font-size: 14pt;
  42. padding-top: 20px;
  43. text-align: left;
  44. font-weight: normal;
  45. margin-left: 48px;
  46. }
  47. #main1 table,
  48. #main2 table {
  49. margin: 0 auto;
  50. width: 600px;
  51. border-collapse: collapse;
  52. font-size: 13pt;
  53. font-family: "仿宋";
  54. }
  55. #main1 table tr,
  56. #main2 table tr {
  57. min-height: 49px;
  58. }
  59. tbody td {
  60. min-width: 10%;
  61. padding: 6px 0 6px 0;
  62. }
  63. .alignC .tableHead {
  64. text-align: center;
  65. padding-left: 10px;
  66. font-weight: 600;
  67. }
  68. .alignC tr>td>span {
  69. display: inline-block;
  70. min-width: 90px;
  71. }
  72. .btn {
  73. margin-top: 4px;
  74. margin-bottom: 4px;
  75. background: #00a1cb;
  76. color: #fff;
  77. }
  78. .time-box {
  79. display: inline-block;
  80. position: relative;
  81. }
  82. .toolLeft input {
  83. padding-right: 30px;
  84. width: 200px;
  85. height: 34px;
  86. }
  87. .tub {
  88. position: absolute;
  89. right: 8px;
  90. top: 5px;
  91. font-size: 18px;
  92. color: #00a0ca;
  93. }
  94. #layui-laydate3 .layui-laydate-header {
  95. height: 31px;
  96. padding: 5px;
  97. }
  98. .laydate-theme-molv .layui-laydate-header i,
  99. .laydate-theme-molv .layui-laydate-header span {
  100. top: 2px;
  101. }
  102. .layui-laydate-header {
  103. padding: 0;
  104. }
  105. .laydate-theme-molv .layui-laydate-content {
  106. height: 195px;
  107. overflow: hidden;
  108. }
  109. .laydate-month-list>li {
  110. margin: 10px 0;
  111. }
  112. .laydate-footer-btns span:hover {
  113. color: #00a1cb;
  114. }
  115. </style>
  116. </head>
  117. <body class="gray-bg">
  118. <div class="wrapper wrapper-content animated fadeInRight">
  119. <div class="daoHang clearfix">
  120. <div class="dhLeft">
  121. <sapn>
  122. <i class="syIcon"></i>位置:
  123. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  124. <a href="javaScript:;">业务统计</a>&gt;
  125. <a href="" class="nowPosition">话务量报表</a>
  126. </sapn>
  127. </div>
  128. <div class="dhRight">
  129. <a href="" title="刷新"><i class="fa fa-refresh"></i></a>
  130. </div>
  131. </div>
  132. <div class="Content_box">
  133. <div class="complain Shows">
  134. <div class="tab-content">
  135. <div class="tab-pane fade active in" id="import_from_week">
  136. <div class="toolBar clearfix">
  137. <div class="toolLeft">
  138. 开始时间:
  139. <span class="time-box"><i class="tub fa fa-calendar"></i><input
  140. class="photo x-color inputs laydate-icon" type="text"
  141. id="startTimes_1" autocomplete="off" /></span> 结束时间:
  142. <span class="time-box"><i class="tub fa fa-calendar"></i><input
  143. class="photo x-color inputs laydate-icon" type="text" id="endTimes_1" autocomplete="off" /></span>
  144. 来源:
  145. <select class="select_" id="source"></select>
  146. <button class="btns search_1">查询</button>
  147. </div>
  148. </div>
  149. <div id="main1">
  150. <div class="alignC headerAlign">
  151. <br />
  152. <h2 style="margin-bottom: 15px;">安阳市12345政务服务热线话务量报表</h2>
  153. </div>
  154. <table id="weeklist" class="alignC" border="1" cellpadding="4" cellspacing="0"
  155. bordercolor="#cbcbcb">
  156. <tbody>
  157. <!--<tr>
  158. <td colspan="8" class="tableHead">
  159. 话务受理情况
  160. </td>
  161. </tr>-->
  162. <tr>
  163. <td>
  164. 电话总量
  165. </td>
  166. <td>
  167. <span id="dhcount">0</span>
  168. </td>
  169. <td>
  170. 来电总量
  171. </td>
  172. <td>
  173. <span id="ldcount">0</span>
  174. </td>
  175. </tr>
  176. <tr>
  177. <td>
  178. 接听量
  179. </td>
  180. <td>
  181. <span id="ldjtcount">0</span>
  182. </td>
  183. <td>
  184. 未接来电
  185. </td>
  186. <td>
  187. <span id="ldwjtcount">0</span>
  188. </td>
  189. </tr>
  190. <tr>
  191. <td>
  192. 呼出总量
  193. </td>
  194. <td>
  195. <span id="hccount">0</span>
  196. </td>
  197. <td>
  198. 呼出接通量
  199. </td>
  200. <td>
  201. <span id="hcjtcount">0</span>
  202. </td>
  203. </tr>
  204. <tr>
  205. <td>
  206. 呼出未接通量
  207. </td>
  208. <td>
  209. <span id="hcwjtcount">0</span>
  210. </td>
  211. <td>
  212. 放弃量
  213. </td>
  214. <td>
  215. <span id="ldfqcount">0</span>
  216. </td>
  217. </tr>
  218. <tr>
  219. <td>
  220. 接通率
  221. </td>
  222. <td>
  223. <span id="ldjtrate">0%</span>
  224. </td>
  225. <td>
  226. 呼损量
  227. </td>
  228. <td>
  229. <span id="ldhmdcount">0</span>
  230. </td>
  231. </tr>
  232. <tr>
  233. <td>
  234. 受理量
  235. </td>
  236. <td>
  237. <span id="ldslcount">0</span>
  238. </td>
  239. <td>
  240. 当即办理(直办)
  241. </td>
  242. <td>
  243. <span id="ldslblcount">0</span>
  244. </td>
  245. </tr>
  246. <tr>
  247. <td>
  248. 网络转办
  249. </td>
  250. <td>
  251. <span id="ldslzbcount">0</span>
  252. </td>
  253. <td>
  254. 网络转办办结量
  255. </td>
  256. <td>
  257. <span id="ldslzbwjcount">0</span>
  258. </td>
  259. </tr>
  260. </tbody>
  261. </table>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267. </div>
  268. <script>
  269. $(document).ready(function () {
  270. laydate.skin('blue');
  271. laydate({
  272. elem: '#startTimes_1',
  273. event: 'focus',
  274. istime: true,
  275. format: 'YYYY-MM-DD hh:mm:ss'
  276. });
  277. laydate({
  278. event: 'focus',
  279. istime: true,
  280. format: 'YYYY-MM-DD hh:mm:ss',
  281. elem: '#endTimes_1',
  282. });
  283. //来源
  284. LY($("#source"));
  285. initTableBrief();
  286. //搜索
  287. $(".search_1").click(function () {
  288. initTableBrief();
  289. });
  290. })
  291. //表格
  292. function initTableBrief() {
  293. $.getJSON(huayi.config.callcenter_url + 'DataAnalysis/GetTellReport', {
  294. sdate: $('#startTimes_1').val(), // 否 string 开始时间 (2017-10-01)
  295. edate: $('#endTimes_1').val(), // 否 string 结束时间(2017-10-31)
  296. source: $("#source").val(),
  297. token: $.cookie("token")
  298. }, function (result) {
  299. if (result.state.toLowerCase() == "success") {
  300. result = result.data.TellReport;
  301. if (result && result.length > 0) {
  302. var res = result[0];
  303. if (res) {
  304. $('#dhcount').text(res.dhcount);
  305. $('#ldcount').text(res.ldcount);
  306. $('#ldjtcount').text(res.ldjtcount);
  307. $('#ldwjtcount').text(res.ldwjtcount);
  308. $('#hccount').text(res.hccount);
  309. $('#hcjtcount').text(res.hcjtcount);
  310. $('#hcwjtcount').text(res.hcwjtcount);
  311. $('#ldfqcount').text(res.ldfqcount);
  312. $('#ldjtrate').text(res.ldjtrate);
  313. $('#ldhmdcount').text(res.ldhmdcount);
  314. $('#ldslcount').text(res.ldslcount);
  315. $('#ldslblcount').text(res.ldslblcount);
  316. $('#ldslzbcount').text(res.ldslzbcount);
  317. $('#ldslzbwjcount').text(res.ldslzbwjcount);
  318. }
  319. }
  320. }
  321. })
  322. }
  323. //来源
  324. function LY(obj) {
  325. obj.empty();
  326. obj.append(
  327. '<option selected="selected" value="">请选择</option>'
  328. );
  329. $.getJSON(
  330. huayi.config.callcenter_url +
  331. "Dictionary/GetDicValueListById", {
  332. token: $.cookie("token"),
  333. id: 1,
  334. },
  335. function (data) {
  336. if (data.state.toLowerCase() == "success") {
  337. var content = data.data;
  338. $(content).each(function (i, n) {
  339. $(
  340. "<option value='" +
  341. n.F_ValueId +
  342. "'>" +
  343. n.F_Value +
  344. "</option>"
  345. ).appendTo(obj);
  346. });
  347. }
  348. }
  349. );
  350. }
  351. </script>
  352. </body>
  353. </html>