123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- /**
- * Created by Tony on 2017/7/3.
- * 报表模板预览工具类
- */
- let preview_util = {
- offsetX: 0,
- offsetY: 0,
- clearCanvas: function (canvas) {
- if (canvas) {
- let ctx = canvas.getContext("2d");
- ctx.save();
- ctx.fillStyle="white";
- ctx.clearRect(0,0, canvas.width, canvas.height);
- ctx.restore();
- }
- },
- drawBorder: function (canvas) {
- let me = this;
- if (canvas) {
- let size = [];
- size[0] = canvas.width - 1;
- size[1] = canvas.height - 1;
- let ctx = canvas.getContext("2d");
- ctx.save();
- ctx.beginPath();
- ctx.translate(0.5,0.5);
- ctx.lineWidth = 1;
- ctx.moveTo(me.offsetX, me.offsetY);
- ctx.lineTo(size[0] + me.offsetX, me.offsetY);
- ctx.lineTo(size[0] + me.offsetX, size[1] + me.offsetY);
- ctx.lineTo(me.offsetX, size[1] + me.offsetY);
- ctx.lineTo(me.offsetX, me.offsetY);
- ctx.stroke();
- ctx.restore();
- ctx.fillStyle="black";
- ctx.fillRect(size[0] + me.offsetX,10 + me.offsetY,10,size[1]);
- ctx.fillRect(10 + me.offsetX,size[1] + me.offsetY,size[0],10);
- }
- },
- preview: function(canvas, rptTpl) {
- let me = this, resolution= [96,96], size = null, shrinkFactor = 1;
- if (!(rptTpl)) return;
- me.clearCanvas(canvas);
- let ctx = canvas.getContext("2d");
- let pageSize = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_PAGE_SIZE];
- let sizeIdx = JV.PAGES_SIZE_STR.indexOf(pageSize);
- if (sizeIdx >= 0) {
- size = JV.PAGES_SIZE[sizeIdx].concat([]);
- } else {
- size = JV.PAGES_SIZE[0].concat([]);
- }
- if (rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_LANDSCAPE || rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_LANDSCAPE_CHN) {
- let ts = size[0];
- size[0] = size[1];
- size[1] = ts;
- }
- if (size[0] > size[1]) {
- shrinkFactor = 1.0 * canvas.width / (size[0] * resolution[0]);
- } else {
- shrinkFactor = 1.0 * canvas.height / (size[1] * resolution[1]);
- }
- let private_translateUnit = function(unitStr) {
- let rst = 1.0;
- if (unitStr) {
- if (JV.MEASUREMENT.PIXEL.indexOf(unitStr) >= 0) {
- rst = 1.0;
- } else if (JV.MEASUREMENT.CM.indexOf(unitStr) >= 0) {
- rst = resolution[0] / 2.54;
- } else if (JV.MEASUREMENT.INCH.indexOf(unitStr) >= 0) {
- rst = resolution[0];
- }
- }
- return rst;
- };
- let private_getReportArea = function(rptTpl, unitFactor) {
- let rst = [];
- rst.push(unitFactor * rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_LEFT]);
- rst.push(unitFactor * rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_TOP]);
- rst.push(size[0] * resolution[0] - unitFactor * rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_RIGHT]);
- rst.push(size[1] * resolution[0] - unitFactor * rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_BOTTOM]);
- return rst;
- };
- let private_setupBandArea = function(band, parentArea) {
- let rstArea = [].concat(parentArea);
- switch (JV.LAYOUT.indexOf(band[JV.BAND_PROP_ALIGNMENT])) {
- case JV.LAYOUT_TOP:
- if (band[JV.PROP_CALCULATION] === JV.CAL_TYPE_ABSTRACT) {
- rstArea[JV.IDX_BOTTOM] = rstArea[JV.IDX_TOP] + unitFactor * parseFloat(band[JV.BAND_PROP_HEIGHT]);
- } else {
- rstArea[JV.IDX_BOTTOM] = rstArea[JV.IDX_TOP] + (rstArea[JV.IDX_BOTTOM] - rstArea[JV.IDX_TOP]) * parseFloat(band[JV.BAND_PROP_HEIGHT]) / 100;
- }
- parentArea[JV.IDX_TOP] = rstArea[JV.IDX_BOTTOM];
- break;
- case JV.LAYOUT_BOTTOM:
- if (band[JV.PROP_CALCULATION] === JV.CAL_TYPE_ABSTRACT) {
- rstArea[JV.IDX_TOP] = rstArea[JV.IDX_BOTTOM] - unitFactor * parseFloat(band[JV.BAND_PROP_HEIGHT]);
- } else {
- rstArea[JV.IDX_TOP] = rstArea[JV.IDX_BOTTOM] - (rstArea[JV.IDX_BOTTOM] - rstArea[JV.IDX_TOP]) * parseFloat(band[JV.BAND_PROP_HEIGHT]) / 100;
- }
- parentArea[JV.IDX_BOTTOM] = rstArea[JV.IDX_TOP];
- break;
- case JV.LAYOUT_LEFT:
- if (band[JV.PROP_CALCULATION] === JV.CAL_TYPE_ABSTRACT) {
- rstArea[JV.IDX_RIGHT] = rstArea[JV.IDX_LEFT] + unitFactor * parseFloat(band[JV.BAND_PROP_WIDTH]);
- } else {
- rstArea[JV.IDX_RIGHT] = rstArea[JV.IDX_LEFT] + (rstArea[JV.IDX_RIGHT] - rstArea[JV.IDX_LEFT]) * parseFloat(band[JV.BAND_PROP_WIDTH]) / 100;
- }
- parentArea[JV.IDX_LEFT] = rstArea[JV.IDX_RIGHT];
- break;
- case JV.LAYOUT_RIGHT:
- if (band[JV.PROP_CALCULATION] === JV.CAL_TYPE_ABSTRACT) {
- rstArea[JV.IDX_LEFT] = rstArea[JV.IDX_RIGHT] - unitFactor * parseFloat(band[JV.BAND_PROP_WIDTH]);
- } else {
- rstArea[JV.IDX_LEFT] = rstArea[JV.IDX_RIGHT] - (rstArea[JV.IDX_RIGHT] - rstArea[JV.IDX_LEFT]) * parseFloat(band[JV.BAND_PROP_WIDTH]) / 100;
- }
- parentArea[JV.IDX_RIGHT] = rstArea[JV.IDX_LEFT];
- break;
- }
- return rstArea;
- };
- let private_showBand = function (band, myArea, onlyMe, isHighlight) {
- //1. draw band border
- ctx.save();
- ctx.beginPath();
- ctx.translate(0.5,0.5);
- ctx.lineWidth = 1;
- if (isHighlight) {
- ctx.strokeStyle="#0000ff";
- } else {
- ctx.setLineDash([3, 6]);
- }
- ctx.moveTo((me.offsetX + myArea[JV.IDX_LEFT]) * shrinkFactor, (me.offsetY + myArea[JV.IDX_TOP]) * shrinkFactor );
- ctx.lineTo((me.offsetX + myArea[JV.IDX_RIGHT]) * shrinkFactor, (me.offsetY + myArea[JV.IDX_TOP]) * shrinkFactor);
- ctx.lineTo((me.offsetX + myArea[JV.IDX_RIGHT]) * shrinkFactor, (me.offsetY + myArea[JV.IDX_BOTTOM]) * shrinkFactor);
- ctx.lineTo((me.offsetX + myArea[JV.IDX_LEFT]) * shrinkFactor, (me.offsetY + myArea[JV.IDX_BOTTOM]) * shrinkFactor);
- ctx.lineTo((me.offsetX + myArea[JV.IDX_LEFT]) * shrinkFactor, (me.offsetY + myArea[JV.IDX_TOP]) * shrinkFactor);
- ctx.stroke();
- ctx.restore();
- //2. then draw sub bands border if have.
- if (band[JV.BAND_PROP_SUB_BANDS] && !onlyMe) {
- for (let subBand of band[JV.BAND_PROP_SUB_BANDS]) {
- if (!(subBand[JV.PROP_CALCULATION])) subBand[JV.PROP_CALCULATION] = JV.CAL_TYPE_ABSTRACT;
- let area = private_setupBandArea(band, myArea);
- private_showBand(subBand, area, false, false);
- }
- }
- };
- let unitFactor = private_translateUnit(rptTpl[JV.NODE_MAIN_INFO][JV.PROP_UNITS]),
- orgArea = private_getReportArea(rptTpl, unitFactor);
- for (let band of rptTpl[JV.NODE_BAND_COLLECTION]) {
- if (!(band[JV.PROP_CALCULATION])) band[JV.PROP_CALCULATION] = JV.CAL_TYPE_ABSTRACT;
- let area = private_setupBandArea(band, orgArea);
- //bandTreeOprObj.reportCfg.styles
- private_showBand(band, area, false, false);
- }
- if (bandTreeOprObj.currentNode) {
- //need to high-light the band?
- }
- },
- getPreviewPage: function(canvas) {
- if (zTreeOprObj.currentNode.refId) {
- let params = {}, me = this;
- params.rpt_tpl_id = zTreeOprObj.currentNode.refId;
- let pageSize = zTreeOprObj.currentNode.rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_PAGE_SIZE];
- if (!pageSize) pageSize = 'A4';
- params.pageSize = pageSize;
- CommonAjax.postEx("report_api/getPreviewPage", params, 10000, true, function(result){
- if (result) {
- if (pageSize === 'A4') {
- if (zTreeOprObj.currentNode.rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_PORTRAIT) {
- canvas.width = 825;
- canvas.height = 1150;
- } else {
- canvas.width = 1150;
- canvas.height = 825;
- }
- } else {
- if (zTreeOprObj.currentNode.rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_PORTRAIT) {
- canvas.width = 1150;
- canvas.height = 1650;
- } else {
- canvas.width = 1650;
- canvas.height = 1150;
- }
- }
- JpcCanvasOutput.cleanCanvas(canvas);
- JpcCanvasOutput.drawPageBorder(result, canvas, [96,96]);
- JpcCanvasOutput.highlightConflictArea(result, 1);
- JpcCanvasOutput.drawToCanvas(result, canvas, 1);
- } else {
- alert('preview error!');
- }
- }, null, null
- );
- }
- }
- };
|