TASK #4784 + 全屏显示缩放功能

app/public/report/js/jpc_output.js

@@ -127,7 +127,7 @@ let JpcCanvasOutput = {
             return rst;
         }
         function private_drawText(val, area, font, control) {
-            let dftFontHeight = 12;
+            let dftFontHeight = 12 * me.scaleFactor;
             let output = [];
             if (font) {
                 dftFontHeight = parseFloat(font[JV.FONT_PROPS[1]]);
@@ -155,6 +155,7 @@ let JpcCanvasOutput = {
             inner_setupControl(area, dftFontHeight, output);
             let validAreaTxtWidth = area[JV.IDX_RIGHT] - JV.OUTPUT_OFFSET[JV.OFFSET_IDX_RIGHT] - area[JV.IDX_LEFT] - JV.OUTPUT_OFFSET[JV.OFFSET_IDX_LEFT];
             //let validAreaTxtHeight = area[JV.IDX_BOTTOM] - JV.OUTPUT_OFFSET[JV.OFFSET_IDX_BOTTOM] - area[JV.IDX_TOP] - JV.OUTPUT_OFFSET[JV.OFFSET_IDX_TOP];
+            validAreaTxtWidth = validAreaTxtWidth * me.scaleFactor;
             let validTxtLines = Math.floor((area[JV.IDX_BOTTOM] - area[JV.IDX_TOP]) / (dftFontHeight + JV.OUTPUT_OFFSET[JV.OFFSET_IDX_BOTTOM] + JV.OUTPUT_OFFSET[JV.OFFSET_IDX_TOP] + 4));
             if ( parseInt(font.FontAngle) !== 0) {
                 validAreaTxtWidth = area[JV.IDX_BOTTOM] - JV.OUTPUT_OFFSET[JV.OFFSET_IDX_BOTTOM] - area[JV.IDX_TOP] - JV.OUTPUT_OFFSET[JV.OFFSET_IDX_TOP];
@@ -198,9 +199,9 @@ let JpcCanvasOutput = {
                 }
                 ctx.beginPath();
                 ctx.moveTo(startX * me.scaleFactor, startY * me.scaleFactor);
-                ctx.lineWidth = 1;
+                ctx.lineWidth = 1 * me.scaleFactor;
                 ctx.strokeStyle = "BLACK";
-                ctx.lineTo(endX, endY);
+                ctx.lineTo(endX * me.scaleFactor, endY * me.scaleFactor);
                 ctx.stroke();
                 // ctx.restore();
             }
@@ -251,7 +252,7 @@ let JpcCanvasOutput = {
                             newArea[JV.IDX_BOTTOM] = Math.round(aH * (lIdx + 1) + baseTop);
                             ctx.translate(-output[0], -output[1]);
                             inner_setupControl(newArea, dftFontHeight, output);
-                            ctx.translate(output[0], output[1]);
+                            ctx.translate(output[0] * me.scaleFactor, output[1] * me.scaleFactor); // 这里的output已经重新设置过了，所以输出时需要缩放
                             if (font[JV.FONT_PROPS[5]] === 'T' && parseInt(font.FontAngle) === 0) {
                                 private_drawUnderline(actLines[lIdx]);
                             }
@@ -275,6 +276,7 @@ let JpcCanvasOutput = {
             if (control[JV.CONTROL_PROPS[JV.CONTROL_PROP_IDX_WRAP]] === 'T' && control[JV.CONTROL_PROPS[JV.CONTROL_PROP_IDX_SHRINK_FIRST]] !== 'T') {
                 let vals = [];
                 let validAreaTxtWidth = cell[JV.PROP_AREA][JV.PROP_RIGHT] - JV.OUTPUT_OFFSET[JV.OFFSET_IDX_RIGHT] - cell[JV.PROP_AREA][JV.PROP_LEFT] - JV.OUTPUT_OFFSET[JV.OFFSET_IDX_LEFT] - 1;
+                validAreaTxtWidth = validAreaTxtWidth * this.scaleFactor; // 本身的高度、宽度都得根据缩放系数来调整
                 for (let val of orgValues) {
                     let actW = ctx2D.measureText(val).width;
                     if (actW > (validAreaTxtWidth - 4)) {
@@ -389,7 +391,8 @@ let JpcCanvasOutput = {
             }
             ctx.moveTo((cell[JV.PROP_AREA][startP[0]] + me.offsetX) * me.scaleFactor, (cell[JV.PROP_AREA][startP[1]] + me.offsetY) * me.scaleFactor);
             if (destStyle[styleBorderDest] && parseFloat(destStyle[styleBorderDest][JV.PROP_LINE_WEIGHT]) !== 0.0) {
-                ctx.lineWidth = 1.0 * destStyle[styleBorderDest][JV.PROP_LINE_WEIGHT];
+                // ctx.lineWidth = 1.0 * destStyle[styleBorderDest][JV.PROP_LINE_WEIGHT];
+                ctx.lineWidth = me.scaleFactor * destStyle[styleBorderDest][JV.PROP_LINE_WEIGHT];
                 ctx.strokeStyle = destStyle[styleBorderDest][JV.PROP_COLOR];
                 ctx.lineTo((cell[JV.PROP_AREA][destP[0]] + me.offsetX) * me.scaleFactor, (cell[JV.PROP_AREA][destP[1]] + me.offsetY) * me.scaleFactor);
             }

app/public/report/js/rpt_main.js

@@ -559,11 +559,11 @@ let zTreeOprObj = {
                     me.currentPage = 1;
                     me.displayPageValue();
                     let size = JpcCanvasOutput.getReportSizeInPixel(me.currentRptPageRst, getScreenDPI());
-                    canvas.width = size[0] + 20;
+                    canvas.width = size[0] * JpcCanvasOutput.scaleFactor + 20;
                     if (size[1] > size[0]) {
-                        canvas.height = size[1] + 100;
+                        canvas.height = size[1] * JpcCanvasOutput.scaleFactor + 100;
                     } else {
-                        canvas.height = size[1] + 50;
+                        canvas.height = size[1] * JpcCanvasOutput.scaleFactor + 50;
                     }
                     // zTreeOprObj.resetESignature(zTreeOprObj.currentRptPageRst);
                     rptSignatureHelper.buildSelectableAccount();
@@ -621,6 +621,19 @@ let zTreeOprObj = {
     requestPrjFolderCommon: function () {
         //
     },
+    changePreviewScale: function(newScale = 1) {
+        const me = zTreeOprObj;
+        JpcCanvasOutput.scaleFactor = newScale;
+        const canvas = me.canvas;
+        const size = JpcCanvasOutput.getReportSizeInPixel(me.currentRptPageRst, getScreenDPI());
+        canvas.width = size[0] * newScale + 20;
+        if (size[1] > size[0]) {
+            canvas.height = size[1] * newScale + 100;
+        } else {
+            canvas.height = size[1] * newScale + 50;
+        }
+        me.showPage(me.currentPage, canvas);
+    },
     showPage: function (pageNum, canvas) {
         let me = zTreeOprObj;
         if (pageNum >= 1 && pageNum <= me.maxPages) {
@@ -676,15 +689,31 @@ let canvasOprObj = {
             let orgH = zTreeOprObj.canvas.height;
             let orgW = zTreeOprObj.canvas.width;
             zTreeOprObj.canvas = document.getElementById("fullScrCanvas");
-            zTreeOprObj.canvas.height = orgH;
-            zTreeOprObj.canvas.width = orgW;
-            zTreeOprObj.showPage(zTreeOprObj.currentPage, zTreeOprObj.canvas);
+            // zTreeOprObj.canvas.height = orgH;
+            // zTreeOprObj.canvas.width = orgW;
+            // zTreeOprObj.showPage(zTreeOprObj.currentPage, zTreeOprObj.canvas);
+            // zTreeOprObj.changePreviewScale(1);
+            this.fullScreenChangeScale(0);
             $("#btn_show_full_screen").trigger("click");
             $('#fullscreen').on('hide.bs.modal', function () {
                 zTreeOprObj.canvas = document.getElementById("rptCanvas");
-                zTreeOprObj.showPage(zTreeOprObj.currentPage, zTreeOprObj.canvas);
+                // zTreeOprObj.showPage(zTreeOprObj.currentPage, zTreeOprObj.canvas);
+                zTreeOprObj.changePreviewScale(1);
             });
         }
+    },
+    fullScreenChangeScale: function(newScaleFactor, dom) {
+        let rstScale = JpcCanvasOutput.scaleFactor + newScaleFactor;
+        let scaleBtn = document.getElementById("fullScreenScaleBtn");;
+        if (newScaleFactor === 0) {
+            rstScale = 1;
+        } else if (rstScale < 1) {
+            rstScale = 1;
+        } else if (rstScale > 2){
+            rstScale = 2;
+        }
+        scaleBtn.innerHTML = `${(rstScale * 100).toFixed(0)}%`;
+        zTreeOprObj.changePreviewScale(rstScale);
     }
 };
 

app/public/report/js/rpt_preview_common.js

@@ -10,6 +10,10 @@ let ROLE_REL_LIST = [];
 let current_stage_id = -1;
 let BGL_OBJ = null;
 let OSS_PATH = '';
+const PREVIEW_SVG_DATA = [];
+const PRINT_SVG_DATA = [];
+const ORG_PIXEL_SIZE = [];
+const ACT_AREA = [];
 // 设置Date对象Format函数
 // -- 打印预览需要重新设置一遍 ------------------------------------------------
 Date.prototype.Format = function(fmt) {
@@ -35,6 +39,7 @@ async function printPageLoading() {
         printPageDirectLoading();
     } else {
         let params = JSON.parse(sessionStorage.report_params);
+        params.pageSize = PAGE_SIZE;
         let _current_stage_status = parseInt(sessionStorage.current_stage_status);
         let closeWaterMark = parseInt(sessionStorage.closeWaterMark);
         let refRptTplIds = JSON.parse(sessionStorage.refRptTplIds);
@@ -87,11 +92,17 @@ async function printPageLoading() {
                         $(document).attr("title", pageData[JV.NODE_PAGE_INFO][JV.NODE_MAIN_INFO_RPT_NAME]);
                     }
                     let orgPixelSize = getPixelSize(pageData);
+                    ORG_PIXEL_SIZE.push(orgPixelSize);
                     let actArea = getActualArea(pageData);
-                    let svgArr = rptPrintHelper.buildSvgArr(pageData, actArea, G_OFFSET_X, G_OFFSET_Y, closeWaterMark);
+                    ACT_AREA.push(actArea);
+                    let svgArr = rptPrintHelper.buildSvgArr(pageData, actArea, G_OFFSET_X, G_OFFSET_Y, closeWaterMark, true);
+                    PREVIEW_SVG_DATA.push(svgArr);
+                    let actSvgArr = rptPrintHelper.buildSvgArr(pageData, actArea, G_OFFSET_X, G_OFFSET_Y, closeWaterMark, false);
+                    PRINT_SVG_DATA.push(actSvgArr);
                     restoreSignCells(pageData, dtlSignCells, null, null, isTextSignature, false);
-                    let orientation = "纵向";
-                    showPreviewData(svgArr, actArea, scaleFactor, sessionStorage.pageSize, orientation, orgPixelSize);
+                    // let orientation = "纵向";
+                    let orientation = "横向";
+                    showPreviewData(svgArr, actArea, scaleFactor, sessionStorage.pageSize, orientation, orgPixelSize, true);
                 }
                 // window.print();
             },
@@ -112,55 +123,21 @@ function printPageDirectLoading() {
     let pageData = JSON.parse(sessionStorage.report_direct_data);
     $(document).attr("title", pageData[JV.NODE_PAGE_INFO][JV.NODE_MAIN_INFO_RPT_NAME]);
     let orgPixelSize = getPixelSize(pageData);
+    ORG_PIXEL_SIZE.push(orgPixelSize);
     let actArea = getActualArea(pageData);
+    ACT_AREA.push(actArea);
     let closeWaterMark = parseInt(sessionStorage.closeWaterMark);
-    let svgArr = rptPrintHelper.buildSvgArr(pageData, actArea, G_OFFSET_X, G_OFFSET_Y, closeWaterMark);
-    let orientation = "纵向";
+    let svgArr = rptPrintHelper.buildSvgArr(pageData, actArea, G_OFFSET_X, G_OFFSET_Y, closeWaterMark, true);
+    PREVIEW_SVG_DATA.push(svgArr);
+    let actSvgArr = rptPrintHelper.buildSvgArr(pageData, actArea, G_OFFSET_X, G_OFFSET_Y, closeWaterMark, false);
+    PRINT_SVG_DATA.push(actSvgArr);
+    // let orientation = "纵向";
+    let orientation = "横向";
     let scaleFactor = 1;
-    showPreviewData(svgArr, actArea, scaleFactor, sessionStorage.pageSize, orientation, orgPixelSize);
+    showPreviewData(svgArr, actArea, scaleFactor, sessionStorage.pageSize, orientation, orgPixelSize, true);
 }
 
-function printPageLoading_bk() {
-    if (sessionStorage.multiRptsData) {
-        let multiRptData = JSON.parse(sessionStorage.multiRptsData);
-        let scaleFactor = parseInt(sessionStorage.scaleFactor);
-        let closeWaterMark = parseInt(sessionStorage.closeWaterMark);
-        for (let idx = 0; idx < multiRptData.length; idx++) {
-            let pageData = multiRptData[idx];
-            if (idx === 0) {
-                $(document).attr("title", pageData[JV.NODE_PAGE_INFO][JV.NODE_MAIN_INFO_RPT_NAME]);
-            }
-            let orgPixelSize = getPixelSize(pageData);
-            let actArea = getActualArea(pageData);
-            let svgArr = rptPrintHelper.buildSvgArr(pageData, actArea, G_OFFSET_X, G_OFFSET_Y, closeWaterMark);
-            //let orientation = (pageData[JV.NODE_PAGE_INFO][JV.NODE_PAGE_SIZE][0] < pageData[JV.NODE_PAGE_INFO][JV.NODE_PAGE_SIZE][1])?"纵向":"横向";
-            let orientation = "纵向";
-            // showPreviewData(svgArr, actArea, scaleFactor, sessionStorage.pageSize, orientation, orgPixelSize);
-            showPreviewData(svgArr, actArea, scaleFactor, sessionStorage.pageSize, orientation, orgPixelSize);
-        }
-        window.print();
-    } else if (sessionStorage.currentPageData) {
-        let pageData = JSON.parse(sessionStorage.currentPageData);
-        let scaleFactor = parseInt(sessionStorage.scaleFactor);
-        let orgPixelSize = getPixelSize(pageData);
-        let actArea = getActualArea(pageData);
-        let svgArr = rptPrintHelper.buildSvgArr(pageData, actArea, G_OFFSET_X, G_OFFSET_Y);
-        $(document).attr("title", pageData[JV.NODE_PAGE_INFO][JV.NODE_MAIN_INFO_RPT_NAME]);
-        //showPreviewData(svgArr, scaleFactor, sessionStorage.pageSize, sessionStorage.orientation);
-        showPreviewData(svgArr, actArea, scaleFactor, sessionStorage.pageSize, "纵向", orgPixelSize);
-        window.print();
-    } else if (sessionStorage.currentPageSvgData) {
-        let svgArr = JSON.parse(sessionStorage.currentPageSvgData);
-        let scaleFactor = 1;
-        //showPreviewData(svgArr, scaleFactor, sessionStorage.pageSize, sessionStorage.orientation);
-        showPreviewData(svgArr, null, scaleFactor, sessionStorage.pageSize, "纵向", null);
-        window.print();
-    } else {
-        //alert("没有报表数据！");
-    }
-}
-
-function showPreviewData(svgArr, actAreaArr, scaleFactor, pageSize, orientation, orgPixelSize) {
+function showPreviewData(svgArr, actAreaArr, scaleFactor, pageSize, orientation, orgPixelSize, keepOrgDirection = false) {
     let orgHeight = 793, orgWidth = 1122;
     let DFT_MARGIN = 2;
     getScreenDPI();
@@ -196,13 +173,13 @@ function showPreviewData(svgArr, actAreaArr, scaleFactor, pageSize, orientation,
         let paddingStr = '';
         if (actAreaArr) {
             paddingStr = `padding: ${actAreaArr[i].Top}px 0px 0px ${actAreaArr[i].Left}px`;
-            if (actAreaArr[i].Right > actAreaArr[i].Bottom) {
+            if (actAreaArr[i].Right > actAreaArr[i].Bottom && !keepOrgDirection) {
                 //横向，需要重新调整padding
                 paddingStr = `padding: ${actAreaArr[i].Left}px 0px 0px ${orgHeight - actAreaArr[i].Bottom}px`;
             }
             offsetWidth = actAreaArr[i].Left + (pageWidth - actAreaArr[i].Right) - DFT_MARGIN;
             offsetHeight = actAreaArr[i].Top + (pageHeight - actAreaArr[i].Bottom) - DFT_MARGIN;
-            if (orgPixelSize[0] > orgPixelSize[1]) {
+            if (orgPixelSize[0] > orgPixelSize[1] && !keepOrgDirection) {
                 //横向强制改纵向(系统是以纵向为准)，那么计算offset的方式会有所不同
                 offsetWidth = actAreaArr[i].Top + (pageWidth - actAreaArr[i].Bottom) - DFT_MARGIN;
                 //横向转纵向时，还得考虑左上角转右上角的Left与Top之间的差，否则坐标还是会有偏差
@@ -263,3 +240,15 @@ function printPage() {
     window.print();
 }
 
+function actualPrintPage() {
+    const allDivs = $('#print_preview_div').nextAll();
+    for (let idx = allDivs.length - 1; idx >= 0; idx--) {
+        allDivs[idx].remove();
+    }
+    PRINT_SVG_DATA.forEach((svgArr, index) => {
+        showPreviewData(svgArr, ACT_AREA[index], 1, sessionStorage.pageSize, '纵向', ORG_PIXEL_SIZE[index]);
+    });
+    $("#print_preview_div")[0].style.display = 'none';
+    window.print();
+}
+

app/public/report/js/rpt_print.js

@@ -56,7 +56,7 @@ let rptPrintHelper = {
         sessionStorage.rpt_name = '现场收方表';
         window.open('/individualReport/A4');
     },
-    buildSvgArr: function (pagesData, actAreaArr, offsetX, offsetY, closeWaterMark) {
+    buildSvgArr: function (pagesData, actAreaArr, offsetX, offsetY, closeWaterMark, keepOrgDirection = false) {
         let styles = pagesData[JV.NODE_STYLE_COLLECTION],
             fonts = pagesData[JV.NODE_FONT_COLLECTION],
             controls = pagesData[JV.NODE_CONTROL_COLLECTION]
@@ -65,7 +65,7 @@ let rptPrintHelper = {
         let canvas = document.getElementById("chkCanvas");
         let pixelSize = getPixelSize(pagesData);
         let isHtoV = false;
-        if (pixelSize[0] > pixelSize[1]) {
+        if (pixelSize[0] > pixelSize[1] && !keepOrgDirection) {
             // changeHtoV(pagesData, pixelSize);
             isHtoV = true;
         }

app/view/report/rpt_all_popup.ejs

@@ -721,6 +721,11 @@
                     <div class="panel">
                         <div class="panel-body">
                             <div class="input-group input-group-sm">
+                                <div class="btn-group" role="group">
+                                    <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="缩小" onclick="canvasOprObj.fullScreenChangeScale(-0.1, this)">-</button>
+                                    <button id="fullScreenScaleBtn" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="重置默认大小" onclick="canvasOprObj.fullScreenChangeScale(0, this)">100%</button>
+                                    <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="放大" onclick="canvasOprObj.fullScreenChangeScale(0.1, this)">+</button>
+                                </div>
                                 <div class="input-group-prepend">
                                     <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="首页" onclick="rptControlObj.firstPage(this)"><i class="fa fa-angle-double-left "></i></button>
                                     <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="上一页" onclick="rptControlObj.prePage(this)"><i class="fa fa-angle-left "></i></button>

app/view/report/rpt_print.ejs

@@ -15,7 +15,6 @@
     <!--
     <link rel="stylesheet" href="/public/css/bootstrap/bootstrap.min.css">
     -->
-
     <link rel="shortcut icon" href="/public/images/favicon.ico">
 </head>
 <style type="text/css">
@@ -71,29 +70,9 @@
     body {page: page}
     div {page: page}
 </style>
-<!--
-    .printPage {
-        page: page
-    }
-    @page {size: A4 landscape;}
-    div { page: page }
-@page {margin: auto;}
-@page horizon {size: A4 landscape;}
-@page vertical1 {size: A4 portrait;}
-    @page horizon1 {size: A4 landscape;}
-    @page vertical1 {size: A4 portrait;}
--->
-<body onload="printPageLoading()" onbeforeunload="printPageClosing()">
-    <canvas id="chkCanvas" style="display:none"></canvas>
-    <div class="panel-body" id="print_preview_div" style="display:block">
-        <button class="btn btn-outline-primary btn-sm" type="button" onclick="printPage()">
-            <i class="fa fa-print"></i>
-            打印 <span id="checkCountPrint" class="badge badge-primary"></span>
-        </button>
-    </div>
-</body>
 <SCRIPT type="text/javascript">
     const SCREEN_DPI = [];
+    const PAGE_SIZE = '<%- size %>';
     function getScreenDPI() {
         if (SCREEN_DPI.length === 0) {
             if (window.screen.deviceXDPI != undefined) {
@@ -111,4 +90,14 @@
         return SCREEN_DPI;
     }
 </SCRIPT>
+
+<body onload="printPageLoading()" onbeforeunload="printPageClosing()">
+    <canvas id="chkCanvas" style="display:none"></canvas>
+    <div class="panel-body" id="print_preview_div" style="display:block">
+        <button class="btn btn-outline-primary btn-sm" type="button" onclick="actualPrintPage()">
+            <i class="fa fa-print"></i>
+            打印 <span id="checkCountPrint" class="badge badge-primary"></span>
+        </button>
+    </div>
+</body>
 </html>