diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index 535992bc93..97b8daaff5 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -229,7 +229,7 @@ export default { const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth this.scaleWidth = (canvasWidth) * 100 / this.canvasStyleData.width // 获取宽度比 this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比 - this.$store.commit('setPreviewCanvasScale', (this.scaleWidth / 100), (this.scaleHeight / 100)) + this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) }) this.handleScaleChange() }, resetID(data) { diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index 5693a63d6c..8c67a62a75 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -1195,7 +1195,7 @@ export default { matrixStyleOriginWidth: this.matrixStyle.originWidth, matrixStyleOriginHeight: this.matrixStyle.originHeight }) - this.$store.commit('setPreviewCanvasScale', this.scalePointWidth, this.scalePointHeight) + this.$store.commit('setPreviewCanvasScale', { scaleWidth: this.scalePointWidth, scaleHeight: this.scalePointHeight }) } }, getShapeStyleIntDeDrag(style, prop) { diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue index 68f59f2b8c..80d9f9353e 100644 --- a/frontend/src/components/canvas/custom-component/UserView.vue +++ b/frontend/src/components/canvas/custom-component/UserView.vue @@ -316,6 +316,7 @@ export default { // 根据仪表板的缩放比例,修改视图内部参数 mergeScale() { const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient + console.log('scale:' + scale + ';this.previewCanvasScale:' + JSON.stringify(this.previewCanvasScale)) const customAttrChart = JSON.parse(this.sourceCustomAttrStr) const customStyleChart = JSON.parse(this.sourceCustomStyleStr) recursionTransObj(customAttrTrans, customAttrChart, scale, this.scaleCoefficientType) diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js index 08835b0b4b..96106289a4 100644 --- a/frontend/src/components/canvas/utils/style.js +++ b/frontend/src/components/canvas/utils/style.js @@ -94,8 +94,6 @@ export const customAttrTrans = { 'barWidth', 'lineWidth', 'lineSymbolSize', - 'pieInnerRadius', - 'pieOuterRadius', 'funnelWidth', // 漏斗图 最大宽度 'tableTitleFontSize', 'tableItemFontSize', diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index c46c7b479b..17c5ca0f0d 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -140,12 +140,12 @@ const data = { setCurCanvasScale(state, curCanvasScale) { state.curCanvasScale = curCanvasScale }, - setPreviewCanvasScale(state, scaleWidth, scaleHeight) { - if (scaleWidth) { - state.previewCanvasScale.scalePointWidth = scaleWidth + setPreviewCanvasScale(state, scale) { + if (scale.scaleWidth) { + state.previewCanvasScale.scalePointWidth = scale.scaleWidth } - if (scaleHeight) { - state.previewCanvasScale.scalePointHeight = scaleHeight + if (scale.scaleHeight) { + state.previewCanvasScale.scalePointHeight = scale.scaleHeight } }, setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) { diff --git a/frontend/src/views/panel/export/PDFPreExport.vue b/frontend/src/views/panel/export/PDFPreExport.vue index 99f410c3bf..ce37c512e2 100644 --- a/frontend/src/views/panel/export/PDFPreExport.vue +++ b/frontend/src/views/panel/export/PDFPreExport.vue @@ -4,11 +4,11 @@ style="height: 100%;width: 100%;" :element-loading-text="$t('panel.export_loading')" element-loading-spinner="el-icon-loading" - element-loading-background="rgba(0, 0, 0, 0.8)" + element-loading-background="rgba(0, 0, 0, 1)" > -
-
+
+
@@ -26,6 +26,7 @@ import { pdfTemplateReplaceAll } from '@/utils/StringUtils.js' export default { name: 'PDFPreExport', + components: { }, props: { // eslint-disable-next-line vue/require-default-prop panelName: { @@ -43,6 +44,7 @@ export default { }, data() { return { + toExport: false, exportLoading: false, activeName: '', templateContentChange: '', @@ -60,7 +62,26 @@ export default { } }, computed: { - + mainCanvasStyle() { + if (this.toExport) { + return { + width: '4096px' + } + } else { + return { + width: '100%' + } + } + }, + templateHtmlStyle() { + if (this.toExport) { + return { + fontSize: '48px!important' + } + } else { + return {} + } + } }, watch: { templateContent(newVal, oldVla) { @@ -92,19 +113,22 @@ export default { const _this = this _this.exportLoading = true setTimeout(() => { - html2canvas(document.getElementById('exportPdf')).then(function(canvas) { - _this.exportLoading = false - const contentWidth = canvas.width - const contentHeight = canvas.height - const pageData = canvas.toDataURL('image/jpeg', 1.0) - const lp = contentWidth > contentHeight ? 'l' : 'p' - const PDF = new JsPDF(lp, 'pt', [contentWidth, contentHeight]) - PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight) - PDF.save(_this.panelName + '.pdf') - _this.$emit('closePreExport') - } - ) - }, 50) + _this.toExport = true + setTimeout(() => { + html2canvas(document.getElementById('exportPdf')).then(function(canvas) { + _this.exportLoading = false + const contentWidth = canvas.width + const contentHeight = canvas.height + const pageData = canvas.toDataURL('image/jpeg', 1.0) + const lp = contentWidth > contentHeight ? 'l' : 'p' + const PDF = new JsPDF(lp, 'pt', [contentWidth, contentHeight]) + PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight) + PDF.save(_this.panelName + '.pdf') + _this.$emit('closePreExport') + } + ) + }, 1500) + }, 500) } } diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue index 7acb3533e6..9f9672ee49 100644 --- a/frontend/src/views/panel/list/PanelViewShow.vue +++ b/frontend/src/views/panel/list/PanelViewShow.vue @@ -4,7 +4,7 @@ style="height: 100%;width: 100%;" :element-loading-text="$t('panel.data_loading')" element-loading-spinner="el-icon-loading" - element-loading-background="rgba(0, 0, 0, 0.8)" + element-loading-background="rgba(0, 0, 0, 1)" > @@ -73,9 +73,10 @@ -
+ +
- +
@@ -129,6 +130,7 @@ import { starStatus, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine' import bus from '@/utils/bus' import { queryAll } from '@/api/panel/pdfTemplate' import ShareHead from '@/views/panel/GrantAuth/ShareHead' +import JsPDF from 'jspdf' export default { name: 'PanelViewShow', @@ -154,10 +156,27 @@ export default { pdfExportShow: false, snapshotInfo: '', showType: 0, - dataLoading: false + dataLoading: false, + exporting: false } }, computed: { + imageWrapperStyle() { + if (this.exporting) { + return { + width: '4096px', + height: '2160px' + } + } else { + return { + width: '100%', + height: '100%' + } + } + }, + showMainFlag() { + return this.showMain + }, panelInfo() { return this.$store.state.panel.panelInfo }, @@ -252,17 +271,24 @@ export default { }, downloadAsPDF() { + // this.pdfExportShow = true + // this.dataLoading = true + setTimeout(() => { - html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => { - const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量 - this.dataLoading = false - if (snapshot !== '') { - this.snapshotInfo = snapshot - this.pdfExportShow = true - } - }) - }, 50) + this.exporting = true + setTimeout(() => { + html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => { + const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量 + this.dataLoading = false + this.exporting = false + if (snapshot !== '') { + this.snapshotInfo = snapshot + this.pdfExportShow = true + } + }) + }, 1500) + }, 500) }, refreshTemplateInfo() { this.templateInfo = {}