Нет описания

visitReport.html 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  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. <script src="../Script/Common/huayi.load.js"></script>
  8. <script src="../Script/Common/huayi.config.js"></script>
  9. <link href="../css/bootstrap.min.css" />
  10. <link href="../css/init.css" rel="stylesheet" />
  11. <link rel="stylesheet" href="../css/boot/bootstrap-table.css" />
  12. <style>
  13. .kpi-top {
  14. background: #f3f3f4;
  15. padding: 10px 20px;
  16. margin: 30px 0;
  17. }
  18. .topCon {
  19. float: left;
  20. margin-left: 70px;
  21. }
  22. .kpi-content h2 {
  23. font-size: 18px;
  24. margin-bottom: 20px;
  25. }
  26. .kpi-content {
  27. width: 90%;
  28. margin: 0 auto;
  29. }
  30. .kpi-table table {
  31. font-size: 12px;
  32. }
  33. .kpi-table table thead tr td {
  34. background: #1ab394;
  35. color: #fff;
  36. font-size: 14px;
  37. }
  38. #table1 thead tr{
  39. background-color: rgb(26,179,148);
  40. color: #fff;
  41. }
  42. </style>
  43. </head>
  44. <body class="gray-bg">
  45. <div class="hwkpi">
  46. <div class="daoHang clearfix">
  47. <div class="dhLeft">
  48. <sapn><i class="syIcon"></i>位置:
  49. <a id="ReIndex" href="javaScript:;">首页</a>&gt;
  50. <a href="javaScript:;">报表分析</a>&gt;
  51. <a href="javaScript:;">业务数据分析</a>&gt;
  52. <a href="" class="nowPosition">回访报表</a>
  53. </sapn>
  54. </div>
  55. </div>
  56. <div class="kpi-top clearfix form-inline">
  57. <div class="topCon">
  58. 查询日期:
  59. <input type="text" class="form-control" id="startTime" style="margin-right: 20px;"/>
  60. 工单类型:
  61. <select class="form-control" id="gdlx">
  62. <option value="0">请选择</option>
  63. <option value="1">咨询</option>
  64. <option value="2">投诉</option>
  65. <option value="3">抽检</option>
  66. <option value="4">建议及其他</option>
  67. </select>
  68. <button class="btns sear">搜索</button>
  69. </div>
  70. </div>
  71. <div class="kpi-content">
  72. <div class="kpi-table">
  73. <table id="table1" data-row-style="rowStyle" data-query-params="queryParams">
  74. <thead>
  75. <tr>
  76. <th data-field="评分维度" data-align="center">评分维度</th>
  77. <th data-field="非常满意(9-10)" data-align="center">非常满意(9-10)</th>
  78. <th data-field="满意(7-8)" data-align="center">满意(7-8)</th>
  79. <th data-field="一般(5-6)" data-align="center">一般(5-6)</th>
  80. <th data-field="不满意(5分以下)" data-align="center">不满意(5分以下)</th>
  81. </tr>
  82. </thead>
  83. </table>
  84. </div>
  85. </div>
  86. </div>
  87. <script src="../js/laydate/laydate.js"></script>
  88. <script>
  89. var token = $.cookie("token"),
  90. endtime='' , //结束时间
  91. stime='' ; //开始时间
  92. var $tableLeft1 = $('#table1');
  93. $(function() {
  94. laydate.render({
  95. elem: '#startTime',
  96. range: '~',
  97. theme: '#1ab394'
  98. });
  99. Ajax();
  100. //搜索事件
  101. $(".sear").click(function() {
  102. $('.thTable tbody').html('');
  103. Ajax();
  104. });
  105. });
  106. function Ajax() {
  107. //销毁表格
  108. $tableLeft1.bootstrapTable('destroy');
  109. //初始化表格,动态从服务器加载数据
  110. $tableLeft1.bootstrapTable({
  111. method: "get", //使用get请求到服务器获取数据
  112. url: huayi.config.callcenter_url + "WOReport/GetVisiteSatisfiedReport",
  113. contentType: 'application/x-www-form-urlencoded',
  114. striped: true, //表格显示条纹
  115. pagination: false, //启动分页
  116. pageSize: 10, //每页显示的记录数
  117. pageNumber: 1, //当前第几页
  118. pageList: [5, 30, 50, 100], //记录数可选列表
  119. search: false, //是否启用查询
  120. showColumns: false, //显示下拉框勾选要显示的列
  121. showRefresh: false, //显示刷新按钮
  122. sidePagination: "server", //表示服务端请求
  123. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  124. //设置为limit可以获取limit, offset, search, sort, order
  125. queryParamsType: "undefined",
  126. responseHandler: function(res) {
  127. //格式化数据
  128. return {
  129. // "total": res.total, //总页数
  130. "rows": res//数据
  131. };
  132. },
  133. queryParams: function queryParams(params) { //设置查询参数
  134. var param = {
  135. // export:0,
  136. stime:$('#startTime').val() && $('#startTime').val().split(' ~ ')[0],
  137. endtime:$('#startTime').val() && $('#startTime').val().split(' ~ ')[1],
  138. type:$('#gdlx').val(),
  139. token: token
  140. };
  141. return param;
  142. },
  143. onLoadSuccess: function() { //加载成功时执行
  144. // layer.msg("加载成功");
  145. },
  146. onLoadError: function() { //加载失败时执行
  147. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  148. }
  149. });
  150. }
  151. </script>
  152. </body>
  153. </html>