Merge pull request #7424 from dataease/pr@dev-v2@refactor_scale

Pr@dev v2@refactor scale

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -207,11 +207,19 @@ const curComponentId = computed(() => {
 const { emitter } = useEmitt()
 
 const curScale = computed(() => {
-  return canvasStyleData.value.scale / 100
+  if (dashboardActive.value) {
+    return (canvasStyleData.value.scale * 1.5) / 100
+  } else {
+    return canvasStyleData.value.scale / 100
+  }
 })
 
 const curBaseScale = computed(() => {
-  return dvMainStore.canvasStyleData.scale / 100
+  if (dashboardActive.value) {
+    return (dvMainStore.canvasStyleData.scale * 1.5) / 100
+  } else {
+    return dvMainStore.canvasStyleData.scale / 100
+  }
 })
 
 const pointShadowShow = computed(() => {
@@ -1340,6 +1348,7 @@ defineExpose({
         v-else
         :is="findComponent(item.component)"
         :id="'component' + item.id"
+        :scale="curBaseScale"
         class="component"
         :is-edit="true"
         :style="getComponentStyle(item.style)"

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -126,6 +126,7 @@ const restore = () => {
       if (dashboardActive.value) {
         cellWidth.value = canvasWidth / pcMatrixCount.value.x
         cellHeight.value = canvasHeight / pcMatrixCount.value.y
+        scaleWidth.value = scaleWidth.value * 1.5
       } else {
         changeRefComponentsSizeWithScale(
           componentData.value,

core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue

@@ -2,7 +2,6 @@
   <div
     class="rich-main-class"
     :class="{ 'edit-model': canEdit }"
-    :style="autoStyle"
     @keydown.stop
     @keyup.stop
     @dblclick="setEdit"
@@ -141,16 +140,6 @@ const editStatus = computed(() => {
   return editMode.value === 'edit'
 })
 
-const autoStyle = computed(() => {
-  return {
-    height: 100 / scale.value + '%!important',
-    width: 100 / scale.value + '%!important',
-    left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
-    top: 50 * (1 - 1 / scale.value) + '%',
-    transform: 'scale(' + scale.value + ')'
-  }
-})
-
 watch(
   () => active.value,
   val => {

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -43,9 +43,14 @@ const props = defineProps({
     type: String,
     required: true,
     default: ''
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 1
   }
 })
-const { element, view } = toRefs(props)
+const { element, view, scale } = toRefs(props)
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
@@ -311,17 +316,21 @@ const labelStyle = computed(() => {
     color: customStyle.labelColor || '#1f2329'
   } as CSSProperties
 })
-const opacityStyle = computed(() => {
-  return element.value?.style?.opacity
-    ? ({
-        opacity: element.value.style.opacity
-      } as CSSProperties)
-    : {}
+const autoStyle = computed(() => {
+  return {
+    position: 'absolute',
+    height: 100 / scale.value + '%!important',
+    width: 100 / scale.value + '%!important',
+    left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+    top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+    transform: 'scale(' + scale.value + ')',
+    opacity: element.value?.style?.opacity || 1
+  } as CSSProperties
 })
 </script>
 
 <template>
-  <div class="v-query-container" :style="opacityStyle">
+  <div class="v-query-container" :style="autoStyle">
     <p v-if="customStyle.titleShow" class="title" :style="titleStyle">
       {{ customStyle.title }}
     </p>

core/core-frontend/src/utils/canvasUtils.ts

@@ -11,6 +11,7 @@ import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
 import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump'
 import { getViewConfig } from '@/views/chart/components/editor/util/chart'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { toPercent } from '@/utils/translate'
 const dvMainStore = dvMainStoreWithOut()
 const { curBatchOptComponents, dvInfo, canvasStyleData, componentData, canvasViewInfo } =
   storeToRefs(dvMainStore)
@@ -145,10 +146,10 @@ export function canvasSave(callBack) {
       item.propValue.forEach(groupItem => {
         groupItem.linkageFilters = []
         // 计算groupStyle
-        groupItem.groupStyle.left = groupItem.style.left / groupStyle.width
-        groupItem.groupStyle.top = groupItem.style.top / groupStyle.height
-        groupItem.groupStyle.width = groupItem.style.width / groupStyle.width
-        groupItem.groupStyle.height = groupItem.style.height / groupStyle.height
+        groupItem.groupStyle.left = toPercent(groupItem.style.left / groupStyle.width)
+        groupItem.groupStyle.top = toPercent(groupItem.style.top / groupStyle.height)
+        groupItem.groupStyle.width = toPercent(groupItem.style.width / groupStyle.width)
+        groupItem.groupStyle.height = toPercent(groupItem.style.height / groupStyle.height)
       })
     } else if (item.component === 'DeTabs') {
       item.propValue.forEach(tabItem => {

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

@@ -341,6 +341,22 @@ onBeforeUnmount(() => {
   resizeObserver?.disconnect()
   clearInterval(scrollTimer)
 })
+
+const autoStyle = computed(() => {
+  return {
+    height: 100 / scale.value + '%!important',
+    width: 100 / scale.value + '%!important',
+    left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+    top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+    transform: 'scale(' + scale.value + ')'
+  }
+})
+
+const autoHeightStyle = computed(() => {
+  return {
+    height: 20 * scale.value + 8 + 'px'
+  }
+})
 </script>
 
 <template>
@@ -355,18 +371,20 @@ onBeforeUnmount(() => {
     <div v-if="!isError" class="canvas-content">
       <div style="height: 100%" :id="containerId"></div>
     </div>
-    <div class="table-page-info" v-if="showPage && !isError">
-      <div>共{{ state.pageInfo.total }}条</div>
-      <el-pagination
-        class="table-page-content"
-        layout="prev, pager, next"
-        v-model:page-size="state.pageInfo.pageSize"
-        v-model:current-page="state.pageInfo.currentPage"
-        :pager-count="5"
-        :total="state.pageInfo.total"
-        @update:current-page="handleCurrentChange"
-      />
-    </div>
+    <el-row :style="autoHeightStyle" v-if="showPage && !isError">
+      <div :style="autoStyle" class="table-page-info">
+        <div>共{{ state.pageInfo.total }}条</div>
+        <el-pagination
+          class="table-page-content"
+          layout="prev, pager, next"
+          v-model:page-size="state.pageInfo.pageSize"
+          v-model:current-page="state.pageInfo.currentPage"
+          :pager-count="5"
+          :total="state.pageInfo.total"
+          @update:current-page="handleCurrentChange"
+        />
+      </div>
+    </el-row>
     <chart-error v-if="isError" :err-msg="errMsg" />
   </div>
 </template>
@@ -387,6 +405,7 @@ onBeforeUnmount(() => {
   }
 }
 .table-page-info {
+  position: relative;
   margin: 4px;
   height: 20px;
   display: flex;