rpt_test.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Report Demo!</title>
  6. </head>
  7. <body>
  8. <!--
  9. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  10. -->
  11. <script src="/lib/jquery/jquery.min.js"></script>
  12. <script type="text/javascript" src="/web/maintain/report/js/jpc_output_value_define.js"></script>
  13. <script type="text/javascript" src="/web/maintain/report/js/jpc_output.js"></script>
  14. <table id="forPrintHide">
  15. <tr>
  16. <td width="5"></td>
  17. <td>
  18. <select name="select1" id="select_k1" onchange="ajaxCall()">
  19. <option value="2">07-1表</option>
  20. <option value="1">08-2表</option>
  21. <option value="3">计量-清单支付09表</option>
  22. </select>
  23. <select name="select2" id="select_k2" onchange="ajaxCall()">
  24. <option value="A4">A4</option>
  25. <option value="A3">A3</option>
  26. </select>
  27. </td>
  28. <td>
  29. <input type="button" value="显示报表" onclick="ajaxCall()"/>
  30. <input type="button" value="< 前一页" onclick="showPage(-1)"/>
  31. <input type="button" value="后一页 >" onclick="showPage(1)"/>
  32. <input type="button" value="打印" onclick="printCurrentPage()"/>
  33. <input type="button" value="Excel" onclick="getExcel()"/>
  34. </td>
  35. </tr>
  36. </table>
  37. <canvas id="myCanvas" width="2000" height="1280">
  38. </canvas>
  39. </body>
  40. <style>
  41. body {
  42. margin: 0px;
  43. padding: 0px;
  44. }
  45. #myCanvas {
  46. border: 0px solid #9C9898;
  47. }
  48. </style>
  49. <script>
  50. let currentPage = 1;
  51. let pageRst = null;
  52. let currentRptTpl = null;
  53. let maxPages = 20;
  54. let rpt_id = null;
  55. let rpt_size = null;
  56. function printCurrentPage() {
  57. if (currentRptTpl) {
  58. //$("table#forPrintHide").css
  59. $("table#forPrintHide").css("display","none");
  60. window.print();
  61. //$("canvas#myCanvas").printArea();
  62. }
  63. }
  64. function getScreenDPI() {
  65. let me = this, arrDPI = [];
  66. if (window.screen.deviceXDPI != undefined) {
  67. arrDPI.push(window.screen.deviceXDPI);
  68. arrDPI.push(window.screen.deviceYDPI);
  69. } else {
  70. let tmpNode = document.createElement("DIV");
  71. tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
  72. document.body.appendChild(tmpNode);
  73. arrDPI.push(parseInt(tmpNode.offsetWidth));
  74. arrDPI.push(parseInt(tmpNode.offsetHeight));
  75. tmpNode.parentNode.removeChild(tmpNode);
  76. }
  77. return arrDPI;
  78. }
  79. function setupReport() {
  80. let rst = false;
  81. let rpt = document.getElementById("select_k1");
  82. let size = document.getElementById("select_k2");
  83. if (rpt.selectedIndex >= 0 && size.selectedIndex >= 0) {
  84. rpt_id = rpt.options[rpt.selectedIndex].value;
  85. rpt_size = size.options[size.selectedIndex].value;
  86. rst = true;
  87. }
  88. return rst;
  89. }
  90. function showPage(pageStep, cv) {
  91. if (currentPage + pageStep >= 1 && currentPage + pageStep <= maxPages) {
  92. currentPage = currentPage + pageStep;
  93. let canvas = null;
  94. if (cv) {
  95. canvas = cv;
  96. } else canvas = document.getElementById("myCanvas");
  97. JpcCanvasOutput.cleanCanvas(canvas);
  98. JpcCanvasOutput.drawPageBorder(currentRptTpl, canvas, getScreenDPI());
  99. JpcCanvasOutput.drawToCanvas(pageRst, canvas, currentPage);
  100. }
  101. }
  102. function getDummyExcel() {
  103. let id = "dummy_request_id";
  104. let p1 = "dummy_paramm_2";
  105. let url = "/report_api/getDummyExcel/" + id + "/" + p1;
  106. window.location = url;//这里不能使用get方法跳转,否则下载不成功
  107. }
  108. function getExcel() {
  109. let rpt = document.getElementById("select_k1");
  110. let size = document.getElementById("select_k2");
  111. let rpt_name = rpt.options[rpt.selectedIndex].text;
  112. if (rpt.selectedIndex >= 0 && size.selectedIndex >= 0) {
  113. rpt_id = rpt.options[rpt.selectedIndex].value;
  114. rpt_size = size.options[size.selectedIndex].value;
  115. }
  116. let url = "/report_api/getExcel/" + rpt_id + "/" + rpt_size + "/" + rpt_name;
  117. window.location = url;//这里不能使用get方法跳转,否则下载不成功
  118. }
  119. function ajaxCall() {
  120. if (setupReport()) {
  121. let canvas = document.getElementById("myCanvas");
  122. canvas.style.cursor = "wait";
  123. $.ajax({
  124. type:"POST",
  125. url: 'report_api/getReport',
  126. data: {"ID": rpt_id, "pageSize": rpt_size},
  127. dataType: 'json',
  128. cache: false,
  129. timeout: 15000,
  130. success: function(result){
  131. canvas.style.cursor = "default";
  132. currentPage = 1;
  133. pageRst = result.data;
  134. if (pageRst) {
  135. maxPages = pageRst.items.length;
  136. currentRptTpl = pageRst;
  137. if (rpt_size === "A4") {
  138. canvas.width = 1200;
  139. canvas.height = 900;
  140. } else if (rpt_size === "A3") {
  141. canvas.width = 1880;
  142. canvas.height = 1200;
  143. }
  144. showPage(0, canvas);
  145. }
  146. },
  147. error: function(jqXHR, textStatus, errorThrown){
  148. canvas.style.cursor = "default";
  149. alert('error ' + textStatus + " " + errorThrown);
  150. }
  151. });
  152. }
  153. }
  154. </script>
  155. </html>