Нет описания

complainProduct.html 6.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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. background: #F5F5F5;
  18. }
  19. .zxt-top {
  20. background: #FFFFFF;
  21. height: 60px;
  22. width: 95%;
  23. margin: 40px auto 0 auto;
  24. padding: 10px 20px;
  25. }
  26. .topCon {
  27. float: right;
  28. margin-right: 45px;
  29. }
  30. .zxt-content {
  31. width: 95%;
  32. margin: 0 auto;
  33. }
  34. .zxt-table {
  35. overflow-x: auto;
  36. }
  37. .zxt-table table {
  38. font-size: 12px;
  39. margin: 30px auto;
  40. max-width: 100%;
  41. background: #FFFFFF;
  42. }
  43. .header-num-date {
  44. position: relative;
  45. }
  46. .num-header {
  47. position: absolute;
  48. top: 10px;
  49. right: 10px;
  50. }
  51. .date-header {
  52. position: absolute;
  53. left: 10px;
  54. bottom: 10px;
  55. }
  56. </style>
  57. </head>
  58. <body class="gray-bg" style="background: #fefefe;">
  59. <div class="zxtable">
  60. <div class="daoHang clearfix">
  61. <div class="dhLeft">
  62. <sapn><i class="syIcon"></i>位置:
  63. <a id="ReIndex" href="javaScript:;">首页</a>&gt;
  64. <a href="javaScript:;">报表分析</a>&gt;
  65. <a href="javaScript:;">业务数据分析</a>&gt;
  66. <a href="" class="nowPosition">投诉产品分布表</a>
  67. </sapn>
  68. </div>
  69. <div class="dhRight">
  70. <a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
  71. </div>
  72. </div>
  73. <div class="zxt-top clearfix">
  74. <div class="topCon">
  75. <div class="form-inline th-bar clearfix">
  76. <div class="time-box form-group">
  77. <i class="tub fa fa-calendar"></i>
  78. <input class="form-control" type="text" id="startTime" placeholder="请选择起止时间" style="width: 228px;">
  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 zjTable">
  90. </table>
  91. </div>
  92. </div>
  93. </div>
  94. <script src="../../js/jquery.min.js"></script>
  95. <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
  96. <script src="../../js/jquery.cookie.js"></script>
  97. <script src="../../js/laydate/laydate.js"></script>
  98. <script src="../../js/select2/js/select2.min.js"></script>
  99. <script>
  100. $(function() {
  101. //日期
  102. laydate.render({
  103. elem: '#startTime',
  104. type: 'year',
  105. theme: '#1ab394',
  106. });
  107. var myDate = new Date();
  108. $('#startTime').val(myDate.getFullYear());
  109. function turn(aa) {
  110. if(aa < 10) {
  111. aa = "0" + aa;
  112. }
  113. return aa;
  114. }
  115. reportForm();
  116. //点击搜索事件
  117. $('.sear').click(function() {
  118. reportForm();
  119. })
  120. //按enter搜索
  121. document.onkeydown = function(e) { // 回车提交表单
  122. var theEvent = window.event || e;
  123. var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
  124. if(code == 13) {
  125. reportForm();
  126. }
  127. }
  128. //表格
  129. function reportForm() {
  130. $.ajax({
  131. type: "get",
  132. dataType: "json",
  133. url: huayi.config.callcenter_url + "Report/GetDateOfManufacture",
  134. async: true,
  135. data: {
  136. token: $.cookie("token"),
  137. year: $('#startTime').val(),
  138. isdc: 0,
  139. },
  140. success: function(data) {
  141. if(data.state.toLowerCase() == 'success') {
  142. var content = data.data;
  143. $('.table').html('');
  144. $('.table').append(
  145. '<tr>' +
  146. '<td rowspan="1" colspan="38" style="font-size: 16px; font-weight: 700">近三年投诉产品生产日期分布表</td>' +
  147. '</tr>' +
  148. '<tr>' +
  149. '<td rowspan="2" class="header-num-date"><div class="num-header">项目</div><div class="date-header">时间</div></td>' +
  150. '<td colspan="12">' + ($('#startTime').val() - 3) + '年</td>' +
  151. '<td colspan="12">' + ($('#startTime').val() - 2) + '年</td>' +
  152. '<td colspan="12">' + ($('#startTime').val() - 1) + '年</td>' +
  153. '<td rowspan="2">投诉起数</td>' +
  154. '</tr>' +
  155. '<tr>' +
  156. '<td>1月</td>' +
  157. '<td>2月</td>' +
  158. '<td>3月</td>' +
  159. '<td>4月</td>' +
  160. '<td>5月</td>' +
  161. '<td>6月</td>' +
  162. '<td>7月</td>' +
  163. '<td>8月</td>' +
  164. '<td>9月</td>' +
  165. '<td>10月</td>' +
  166. '<td>11月</td>' +
  167. '<td>12月</td>' +
  168. '<td>1月</td>' +
  169. '<td>2月</td>' +
  170. '<td>3月</td>' +
  171. '<td>4月</td>' +
  172. '<td>5月</td>' +
  173. '<td>6月</td>' +
  174. '<td>7月</td>' +
  175. '<td>8月</td>' +
  176. '<td>9月</td>' +
  177. '<td>10月</td>' +
  178. '<td>11月</td>' +
  179. '<td>12月</td>' +
  180. '<td>1月</td>' +
  181. '<td>2月</td>' +
  182. '<td>3月</td>' +
  183. '<td>4月</td>' +
  184. '<td>5月</td>' +
  185. '<td>6月</td>' +
  186. '<td>7月</td>' +
  187. '<td>8月</td>' +
  188. '<td>9月</td>' +
  189. '<td>10月</td>' +
  190. '<td>11月</td>' +
  191. '<td>12月</td>' +
  192. '</tr>'
  193. );
  194. // 年度质量投诉问题情况对比 Report/GetDateOfManufacture
  195. for(var i = 0; i < content.length; i++) {
  196. var html = '<tr>'
  197. for(const key in content[i]) {
  198. if(content[i].hasOwnProperty(key)) { // 过滤掉原型链上的属性
  199. html += '<td>' + content[i][key] + '</td>'
  200. // console.log(`Key: ${key}, Value: ${content[i][key]}`);
  201. }
  202. }
  203. html += '</tr>'
  204. $(".table").append(html)
  205. }
  206. } else {
  207. layer.msg(data.message);
  208. }
  209. }
  210. });
  211. }
  212. //导出
  213. $(".export").click(function() {
  214. var exportSttime = $('#startTime').val();
  215. var url = huayi.config.callcenter_url + "Report/GetDateOfManufacture?token=" + $.cookie("token");
  216. url += "&year=" + exportSttime + "&isdc=1";
  217. window.location.href = url;
  218. });
  219. })
  220. </script>
  221. </body>
  222. </html>