From 06b4465522823cea8d2051bedcb4f3d23bd9f3b7 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 28 Dec 2023 09:46:01 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BC=A9=E6=94=BE=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  | 13 +++++-
 .../data-visualization/canvas/DePreview.vue   |  1 +
 .../rich-text/DeRichTextView.vue              | 11 -----
 .../custom-component/v-query/Component.vue    | 25 +++++++----
 .../views/components/ChartComponentS2.vue     | 43 +++++++++++++------
 5 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index e6cb00c61d..7b0dfbff02 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/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)"
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index d7bdb80ca0..684da1ad21 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/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,
diff --git a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
index ffbedeff26..9cf388cb59 100644
--- a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
+++ b/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 => {
diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue
index 9f13217ba1..52521852cb 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/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>
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index 6925449d80..afea752c4d 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/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;