三元财务UI

zhiJian.html 8.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  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/select2/css/select2.min.css" />
  13. <link rel="stylesheet" href="../css/init.css" />
  14. <style>
  15. .zxtable {
  16. font-size: 12px;
  17. }
  18. .zxt-top {
  19. background: #f3f3f4;
  20. height: 60px;
  21. padding: 10px 20px;
  22. }
  23. .topCon {
  24. float: right;
  25. margin-right: 45px;
  26. }
  27. .zxt-content {
  28. width: 90%;
  29. margin: 20px auto 0 auto;
  30. }
  31. .zxt-table {
  32. overflow-x: auto;
  33. }
  34. .zxt-table table {
  35. font-size: 12px;
  36. margin-top: 20px;
  37. width: 100%;
  38. max-width: 100%;
  39. }
  40. .zxt-table table thead tr td {
  41. background: #1ab394;
  42. color: #fff;
  43. }
  44. </style>
  45. </head>
  46. <body class="gray-bg" style="background: #fefefe;">
  47. <div class="zxtable">
  48. <div class="daoHang clearfix">
  49. <div class="dhLeft">
  50. <sapn><i class="syIcon"></i>位置:
  51. <a id="ReIndex" href="javaScript:;">首页</a>&gt;
  52. <a href="javaScript:;">报表分析</a>&gt;
  53. <a href="javaScript:;">员工考核分析</a>&gt;
  54. <a href="" class="nowPosition">质检数据报表</a>
  55. </sapn>
  56. </div>
  57. <div class="dhRight">
  58. <a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
  59. </div>
  60. </div>
  61. <div class="zxt-top clearfix">
  62. <div class="topCon">
  63. <!--部门:
  64. <select name="" id="bumen">
  65. </select>
  66. 开始时间:
  67. <input type="text" class="laydate-icon" id="startTime" /> 结束时间:
  68. <input type="text" class="laydate-icon" id="endTime" />
  69. <button class="btns sear">搜索</button>-->
  70. <!--<button class="btn daochu ">导出Excel</button>-->
  71. <div class="form-inline th-bar clearfix">
  72. <div class="time-box form-group">
  73. <i class="tub fa fa-calendar"></i>
  74. <input class="form-control" type="text" id="startTime" placeholder="请选择起止时间" style="width: 228px;">
  75. </div>
  76. <div class="time-box form-group">
  77. <select name="" id="bumen" class="form-control">
  78. </select>
  79. </div>
  80. <div class="form-group tool_bars pull-right">
  81. <button class="btns sear">搜索</button>
  82. <!--<a class="btns export">导出</a>-->
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="zxt-content">
  88. <div class="zxt-table">
  89. <table class="table table-bordered text-center table-hover zjTable">
  90. <thead>
  91. <tr class="one"></tr>
  92. <tr class="two"></tr>
  93. <tr class="three"></tr>
  94. <tr class="four"></tr>
  95. </thead>
  96. <tbody class="tbody">
  97. </table>
  98. </div>
  99. </div>
  100. </div>
  101. <script src="../js/jquery.min.js?v=2.1.4"></script>
  102. <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  103. <script src="../js/jquery.cookie.js"></script>
  104. <script src="../js/laydate/laydate.js"></script>
  105. <script src="../js/select2/js/select2.min.js"></script>
  106. <script>
  107. $(function() {
  108. var token = $.cookie("token");
  109. //日期
  110. laydate.render({
  111. elem: '#startTime',
  112. range: '~',
  113. theme: '#1ab394',
  114. });
  115. var expor;
  116. tbodyAjax();
  117. //点击搜索事件
  118. $('.sear').click(function() {
  119. tbodyAjax();
  120. })
  121. //表头
  122. $.ajax({
  123. type: "get",
  124. dataType: "json",
  125. url: huayi.config.callcenter_url + "QCResult/GetColumnList",
  126. async: true,
  127. data: {
  128. token: token,
  129. isext: expor
  130. },
  131. success: function(data) {
  132. var content = data.data;
  133. for(var i = 0; i < content.length; i++) {
  134. $('<td rowspan="' + content[i].Rowspan + '" colspan="' + content[i].Colspan + '">' + content[i].Qcname + '</td>').appendTo('.zjTable thead tr.one')
  135. if(content[i].Qcscore !== null) {
  136. $('<td>' + content[i].Qcscore + '</td>').appendTo('.zjTable thead tr.four')
  137. }
  138. if(content[i].Qclist !== null) {
  139. var twoCon = content[i].Qclist;
  140. //console.log(twoCon)
  141. for(var j = 0; j < twoCon.length; j++) {
  142. //console.log(twoCon[j].Qcname)
  143. $('<td rowspan="' + twoCon[j].Rowspan + '" colspan="' + twoCon[j].Colspan + '">' + twoCon[j].Qcname + '</td>').appendTo('.zjTable thead tr.two')
  144. if(twoCon[j].Qclist !== null) {
  145. var threeCon = twoCon[j].Qclist;
  146. //console.log(threeCon);
  147. for(var g = 0; g < threeCon.length; g++) {
  148. $('<td rowspan="' + threeCon[g].Rowspan + '" colspan="' + threeCon[g].Colspan + '">' + threeCon[g].Qcname + '</td>').appendTo('.zjTable thead tr.three')
  149. $('<td rowspan="' + threeCon[g].Rowspan + '" colspan="' + threeCon[g].Colspan + '">' + threeCon[g].Qcscore + '</td>').appendTo('.zjTable thead tr.four')
  150. }
  151. }
  152. }
  153. }
  154. }
  155. }
  156. });
  157. //表格数据
  158. function tbodyAjax() {
  159. $.ajax({
  160. type: "get",
  161. dataType: "json",
  162. url: huayi.config.callcenter_url + "QCResult/GetDataList",
  163. async: true,
  164. data: {
  165. token: token,
  166. stime: $('#startTime').val() && $('#startTime').val().split(' ~ ')[0],
  167. endtime: $('#startTime').val() && $('#startTime').val().split(' ~ ')[1],
  168. dpt: $('#bumen').val(),
  169. isext: expor
  170. },
  171. success: function(result) {
  172. var tbodyCon = result.data;
  173. $('.zjTable tbody').html('');
  174. for(var i = 0; i < tbodyCon.length; i++) {
  175. // $('<tr><td>' + tbodyCon[i].QCName + '</td><td>' + tbodyCon[i].UserName + '</td><td>' + tbodyCon[i].UserCode + '</td><td>' + tbodyCon[i].ZJCount + '</td><td>' + tbodyCon[i].Q2 + '</td><td>' + tbodyCon[i].Q4 + '</td><td>' + tbodyCon[i].Q5 + '</td><td>' + tbodyCon[i].Q6 + '</td><td>' + tbodyCon[i].Q8 + '</td><td>' + tbodyCon[i].Q9 + '</td><td>' + tbodyCon[i].Q10 + '</td><td>' + tbodyCon[i].df0 + '</td><td>' + tbodyCon[i].Q12 + '</td><td>' + tbodyCon[i].Q13 + '</td><td>' + tbodyCon[i].Q14 + '</td><td>' + tbodyCon[i].Q15 + '</td><td>' + tbodyCon[i].Q16 + '</td><td>' + tbodyCon[i].Q17 + '</td><td>' + tbodyCon[i].Q18 + '</td><td>' + tbodyCon[i].df1 + '</td><td>' + tbodyCon[i].Q19 + '</td><td>' + tbodyCon[i].Q20 + '</td><td>' + tbodyCon[i].Q21 + '</td><td>' + tbodyCon[i].Q22 + '</td><td>' + tbodyCon[i].Q23 + '</td><td>' + tbodyCon[i].Q24 + '</td><td>' + tbodyCon[i].Q25 + '</td><td>' + tbodyCon[i].Q26 + '</td><td>' + tbodyCon[i].df2 + '</td><td style="color:#e43926;font-weight: bold;">' + tbodyCon[i].AllScore + '</td></tr>').appendTo('.zjTable tbody')
  176. $('<tr><td>' + tbodyCon[i].QCName + '</td><td>' + tbodyCon[i].UserName + '</td><td>' + tbodyCon[i].UserCode + '</td><td>' + tbodyCon[i].ZJCount + '</td><td>' + tbodyCon[i].Q2 + '</td><td>' + tbodyCon[i].Q4 + '</td><td>' + tbodyCon[i].Q6 + '</td><td>' + tbodyCon[i].Q8 + '</td><td>' + tbodyCon[i].Q9 + '</td><td>' + tbodyCon[i].Q10 + '</td><td>' + tbodyCon[i].df0 + '</td><td>' + tbodyCon[i].Q12 + '</td><td>' + tbodyCon[i].Q13 + '</td><td>' + tbodyCon[i].Q14 + '</td><td>' + tbodyCon[i].Q15 + '</td><td>' + tbodyCon[i].Q16 + '</td><td>' + tbodyCon[i].Q17 + '</td><td>' + tbodyCon[i].Q18 + '</td><td>' + tbodyCon[i].df1 + '</td><td>' + tbodyCon[i].Q19 + '</td><td>' + tbodyCon[i].Q20 + '</td><td>' + tbodyCon[i].Q21 + '</td><td>' + tbodyCon[i].Q22 + '</td><td>' + tbodyCon[i].Q23 + '</td><td>' + tbodyCon[i].Q24 + '</td><td>' + tbodyCon[i].Q25 + '</td><td>' + tbodyCon[i].Q26 + '</td><td>' + tbodyCon[i].df2 + '</td><td style="color:#e43926;font-weight: bold;">' + tbodyCon[i].AllScore + '</td></tr>').appendTo('.zjTable tbody')
  177. }
  178. }
  179. });
  180. }
  181. //部门下拉框
  182. $("#bumen").select2({
  183. width: 'resolve',
  184. minimumResultsForSearch: -1,
  185. ajax: {
  186. type: "get",
  187. url: huayi.config.callcenter_url + "Department/GetDeptList",
  188. async: true,
  189. dataType: "json",
  190. data: function(params) {
  191. return {
  192. token: token,
  193. pid: params.id
  194. }
  195. },
  196. processResults: function(data) {
  197. return {
  198. results: data.data
  199. }
  200. },
  201. cache: true
  202. },
  203. placeholder: "请选择部门",
  204. });
  205. })
  206. </script>
  207. </body>
  208. </html>