From b87630e364e56e285dcd1e6097f3b8942e07320e Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 23 Nov 2022 11:46:09 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=BF=87=E6=BB=A4?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=A1=A8=E6=A0=BC=E7=AD=89=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=9A=84=E8=87=AA=E9=80=82=E5=BA=94=E7=BC=A9=E6=94=BE=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E9=98=B2=E6=AD=A2=E7=BB=84=E4=BB=B6=E5=9C=A8?= =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E6=9D=BF=E4=B8=8D=E5=90=8C=E5=88=86=E8=BE=A8?= =?UTF-8?q?=E7=8E=87=E4=B8=8B=E7=BB=84=E4=BB=B6=E5=A4=A7=E5=B0=8F=E4=B8=8D?= =?UTF-8?q?=E9=80=82=E9=85=8D=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/editor/ComponentWrapper.vue | 6 +- .../canvas/components/editor/Preview.vue | 2 +- .../src/components/dataease/DeOutWidget.vue | 20 ++- .../chart/components/ChartComponentS2.vue | 61 +++++--- .../chart/components/table/TableNormal.vue | 145 +++++++++++------- 5 files changed, 160 insertions(+), 74 deletions(-) diff --git a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue index 45a0b017b1..4a757dd5fc 100644 --- a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue @@ -201,12 +201,16 @@ export default { componentActiveFlag() { return !this.mobileLayoutStatus && ((this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')) }, + scale() { + return Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) + }, curGap() { - return (this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0 + return ((this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0) * this.scale }, ...mapState([ 'mobileLayoutStatus', 'curComponent', + 'previewCanvasScale', 'componentGap' ]) }, diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue index 4ad3d7717a..7c523fe88c 100644 --- a/frontend/src/components/canvas/components/editor/Preview.vue +++ b/frontend/src/components/canvas/components/editor/Preview.vue @@ -552,7 +552,7 @@ export default { component.style[key] = this.format(component.style[key], this.scaleHeight) } if (this.needToChangeWidth.includes(key)) { - if (key === 'fontSize' && this.terminal === 'mobile') { + if (key === 'fontSize' && (this.terminal === 'mobile' || component.type === 'custom')) { // do nothing 移动端字符大小无需按照比例缩放，当前保持不变(包括 v-text 和 过滤组件) } else { component.style[key] = this.format(component.style[key], this.scaleWidth) diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue index 31025ae3f4..f12aae39d9 100644 --- a/frontend/src/components/dataease/DeOutWidget.vue +++ b/frontend/src/components/dataease/DeOutWidget.vue @@ -2,6 +2,7 @@
import inputStyleMixin from '@/components/widget/deWidget/inputStyleMixin' +import { mapState } from 'vuex' + export default { name: 'DeOutWidget', mixins: [inputStyleMixin], @@ -112,6 +115,18 @@ export default { } }, computed: { + scale() { + return this.previewCanvasScale.scalePointHeight + }, + autoStyle() { + return { + height: (100 / this.scale) + '%!important', + width: (100 / this.scale) + '%!important', + left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2 + top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2 + transform: 'scale(' + this.scale + ')' + } + }, sizeInfo() { let size if (this.duHeight > this.inputLargeSize) { @@ -133,7 +148,10 @@ export default { }, isFilterComponent() { return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(this.element.component) - } + }, + ...mapState([ + 'previewCanvasScale' + ]) }, watch: { 'element.style': { diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue index 45a26c20f4..d8e0a556c2 100644 --- a/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/frontend/src/views/chart/components/ChartComponentS2.vue @@ -55,25 +55,32 @@ /> - - {{ $t('chart.total') }} - {{ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) }} - {{ $t('chart.items') }} - - + + + {{ $t('chart.total') }} + {{ + chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) + }} + {{ $t('chart.items') }} + + +
@@ -87,6 +94,7 @@ import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/ch import TitleRemark from '@/views/chart/view/TitleRemark' import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart' import ChartTitleUpdate from './ChartTitleUpdate.vue' +import { mapState } from 'vuex' export default { name: 'ChartComponentS2', @@ -162,6 +170,18 @@ export default { }, computed: { + scale() { + return this.previewCanvasScale.scalePointWidth + }, + autoStyle() { + return { + height: (100 / this.scale) + '%!important', + width: (100 / this.scale) + '%!important', + left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2 + top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2 + transform: 'scale(' + this.scale + ')' + } + }, trackBarStyleTime() { return this.trackBarStyle }, @@ -173,7 +193,10 @@ export default { chartInfo() { const { id, title } = this.chart return { id, title } - } + }, + ...mapState([ + 'previewCanvasScale' + ]) }, watch: { chart: { diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue index 6533281768..7529b1efb1 100644 --- a/frontend/src/views/chart/components/table/TableNormal.vue +++ b/frontend/src/views/chart/components/table/TableNormal.vue @@ -44,23 +44,33 @@ v-show="showPage" class="table-page" > - - {{ $t('chart.total') }} - {{ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) }} - {{ $t('chart.items') }} - - + + + + {{ $t('chart.total') }} + {{ + chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) + }} + {{ $t('chart.items') }} + + + + + @@ -70,6 +80,7 @@ import { hexColorToRGBA } from '../../chart/util' import eventBus from '@/components/canvas/utils/eventBus' import { DEFAULT_SIZE } from '@/views/chart/chart/chart' +import { mapState } from 'vuex' export default { name: 'TableNormal', @@ -147,12 +158,27 @@ export default { } }, computed: { + scale() { + return this.previewCanvasScale.scalePointWidth + }, + autoStyle() { + return { + height: (100 / this.scale) + '%!important', + width: (100 / this.scale) + '%!important', + left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2 + top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2 + transform: 'scale(' + this.scale + ')' + } + }, bg_class() { return { background: hexColorToRGBA('#ffffff', 0), borderRadius: this.borderRadius } - } + }, + ...mapState([ + 'previewCanvasScale' + ]) }, watch: { chart: function() { @@ -473,38 +499,53 @@ export default {