refactor(仪表板): 优化仪表板过滤组件表格等组件的自适应缩放方式，防止组件在仪表板不同分辨率下组件大小不适配问题

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'
     ])
   },

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)

frontend/src/components/dataease/DeOutWidget.vue

@@ -2,6 +2,7 @@
   <div
     ref="myContainer"
     class="my-container"
+    :style="autoStyle"
   >
     <div
       ref="conditionMain"
@@ -60,6 +61,8 @@
 
 <script>
 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': {

frontend/src/views/chart/components/ChartComponentS2.vue

@@ -55,25 +55,32 @@
       />
       <el-row
         v-show="showPage"
-        class="table-page"
+        style="position: relative;"
       >
-        <span class="total-style">
+        <el-row
-          {{ $t('chart.total') }}
+          class="table-page"
-          <span>{{ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) }}</span>
+          :style="autoStyle"
-          {{ $t('chart.items') }}
+        >
-        </span>
+          <span class="total-style">
-        <el-pagination
+            {{ $t('chart.total') }}
-          small
+            <span>{{
-          :current-page="currentPage.page"
+              chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
-          :page-sizes="[10,20,50,100]"
+            }}</span>
-          :page-size="currentPage.pageSize"
+            {{ $t('chart.items') }}
-          :pager-count="5"
+          </span>
-          layout="prev, pager, next"
+          <el-pagination
-          :total="currentPage.show"
+            small
-          class="page-style"
+            :current-page="currentPage.page"
-          @current-change="pageClick"
+            :page-sizes="[10,20,50,100]"
-          @size-change="pageChange"
+            :page-size="currentPage.pageSize"
-        />
+            :pager-count="5"
+            layout="prev, pager, next"
+            :total="currentPage.show"
+            class="page-style"
+            @current-change="pageClick"
+            @size-change="pageChange"
+          />
+        </el-row>
       </el-row>
     </div>
   </div>
@@ -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: {

frontend/src/views/chart/components/table/TableNormal.vue

@@ -44,23 +44,33 @@
         v-show="showPage"
         class="table-page"
       >
-        <span class="total-style">
+        <el-row style="position: relative;width:100% ">
-          {{ $t('chart.total') }}
+          <el-row
-          <span>{{ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) }}</span>
+            class="table-page-inner"
-          {{ $t('chart.items') }}
+            :style="autoStyle"
-        </span>
+          >
-        <el-pagination
+            <span class="total-style">
-          small
+              {{ $t('chart.total') }}
-          :current-page="currentPage.page"
+              <span>{{
-          :page-sizes="[10,20,50,100]"
+                chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
-          :page-size="currentPage.pageSize"
+              }}</span>
-          :pager-count="5"
+              {{ $t('chart.items') }}
-          layout="prev, pager, next"
+            </span>
-          :total="currentPage.show"
+            <el-pagination
-          class="page-style"
+              small
-          @current-change="pageClick"
+              :current-page="currentPage.page"
-          @size-change="pageChange"
+              :page-sizes="[10,20,50,100]"
-        />
+              :page-size="currentPage.pageSize"
+              :pager-count="5"
+              layout="prev, pager, next"
+              :total="currentPage.show"
+              class="page-style"
+              @current-change="pageClick"
+              @size-change="pageChange"
+            />
+          </el-row>
+        </el-row>
+
       </el-row>
     </el-row>
   </div>
@@ -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 {
 </script>
 
 <style scoped>
-  .table-class ::v-deep .body--wrapper{
+.table-class ::v-deep .body--wrapper {
-    background: rgba(1,1,1,0);
+  background: rgba(1, 1, 1, 0);
-  }
+}
-  .table-class ::v-deep .elx-cell{
+
-    max-height: none!important;
+.table-class ::v-deep .elx-cell {
-    line-height: normal!important;
+  max-height: none !important;
-  }
+  line-height: normal !important;
-  .table-page{
+}
-    position: absolute;
+
-    bottom: 0;
+.table-page-inner {
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: flex-end;
+  justify-content: flex-end;
-    width: 100%;
+  width: 100%;
-    overflow: hidden;
+  overflow: hidden;
-  }
+}
-  .page-style{
+
-    margin-right: auto;
+.table-page {
-  }
+  position: absolute;
-  .total-style{
+  bottom: 0;
-    flex: 1;
+  display: flex;
-    font-size: 12px;
+  align-items: center;
-    color: #606266;
+  justify-content: flex-end;
-    white-space:nowrap;
+  width: 100%;
-  }
+  overflow: hidden;
-  .page-style ::v-deep .el-input__inner{
+}
-    height: 24px;
+
-  }
+.page-style {
-  .page-style ::v-deep button{
+  margin-right: auto;
-    background: transparent!important;
+}
-  }
+
-  .page-style ::v-deep li{
+.total-style {
-    background: transparent!important;
+  flex: 1;
-  }
+  font-size: 12px;
+  color: #606266;
+  white-space: nowrap;
+}
+
+.page-style ::v-deep .el-input__inner {
+  height: 24px;
+}
+
+.page-style ::v-deep button {
+  background: transparent !important;
+}
+
+.page-style ::v-deep li {
+  background: transparent !important;
+}
 </style>