From b5b353ce72ccb30c76958ff632590fb1fb8805b5 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 12 Dec 2023 17:06:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=BB=E5=B8=83=E6=94=BE=E5=A4=A7?=
 =?UTF-8?q?=E7=BC=A9=E5=B0=8F=E5=85=B6=E8=A7=86=E5=9B=BE=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=B9=B6=E5=90=8C=E6=AF=94=E6=94=BE=E5=A4=A7=E7=BC=A9=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  |  8 ++++++-
 .../canvas/ComponentWrapper.vue               |  4 +++-
 .../data-visualization/canvas/Shape.vue       | 10 +++++++--
 .../custom-component/user-view/Component.vue  | 15 +++++++------
 .../views/components/ChartComponentG2Plot.vue | 13 +++++++-----
 .../views/components/ChartComponentS2.vue     | 21 ++++++++++++++++---
 .../views/chart/components/views/index.vue    | 17 ++++++++++++---
 7 files changed, 65 insertions(+), 23 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 a36fa7de9c..4575f25e47 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -137,6 +137,11 @@ const props = defineProps({
     default() {
       return {}
     }
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 1
   }
 })
 
@@ -191,7 +196,7 @@ const curComponentId = computed(() => {
 const { emitter } = useEmitt()
 
 const curScale = computed(() => {
-  return canvasStyleData.value.scale
+  return canvasStyleData.value.scale / 100
 })
 
 const pointShadowShow = computed(() => {
@@ -1269,6 +1274,7 @@ defineExpose({
       v-for="(item, index) in componentData"
       v-show="item.isShow"
       :canvas-id="canvasId"
+      :scale="curScale"
       :key="item.id"
       :default-style="item.style"
       :style="getShapeItemShowStyle(item)"
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 46cd03f741..3a75b7d178 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -164,6 +164,8 @@ const commonBackgroundSvgInner = computed(() => {
     return null
   }
 })
+
+const deepScale = computed(() => scale.value / 100)
 </script>
 
 <template>
@@ -210,7 +212,7 @@ const commonBackgroundSvgInner = computed(() => {
           :linkage="config?.linkage"
           :show-position="showPosition"
           :search-count="searchCount"
-          :scale="scale"
+          :scale="deepScale"
           :disabled="true"
         />
       </div>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index b6a1225466..74426f150a 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -204,10 +204,16 @@ const props = defineProps({
   canvasId: {
     type: String,
     default: 'canvas-main'
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 1
   }
 })
 
-const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId } = toRefs(props)
+const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId, scale } =
+  toRefs(props)
 const domId = ref('shape-id-' + element.value.id)
 const pointList = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']
 const pointList2 = ['r', 'l']
@@ -645,7 +651,7 @@ const componentBackgroundStyle = computed(() => {
       innerPadding,
       borderRadius
     } = element.value.commonBackground
-    const style = { padding: innerPadding + 'px', borderRadius: borderRadius + 'px' }
+    const style = { padding: innerPadding * scale.value + 'px', borderRadius: borderRadius + 'px' }
     let colorRGBA = ''
     if (backgroundColorSelect && backgroundColor) {
       colorRGBA = backgroundColor
diff --git a/core/core-frontend/src/custom-component/user-view/Component.vue b/core/core-frontend/src/custom-component/user-view/Component.vue
index 277c02415f..d9a6cad7dd 100644
--- a/core/core-frontend/src/custom-component/user-view/Component.vue
+++ b/core/core-frontend/src/custom-component/user-view/Component.vue
@@ -42,7 +42,7 @@ const props = defineProps({
   scale: {
     type: Number,
     required: false,
-    default: 100
+    default: 1
   },
   dvType: {
     type: String,
@@ -58,15 +58,14 @@ const props = defineProps({
 
 const { element, view, active, searchCount, scale } = toRefs(props)
 const autoStyle = computed(() => {
-  if (element.value.innerType === 'richText') {
-    const curScale = scale.value / 100
+  if (element.value.innerType === 'rich-text') {
     return {
       position: 'absolute',
-      height: 100 / curScale + '%!important',
-      width: 100 / curScale + '%!important',
-      left: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
-      top: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
-      transform: 'scale(' + curScale + ')'
+      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 + ')'
     } as CSSProperties
   } else {
     return {}
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
index c17cf91031..ee0981b213 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
@@ -13,6 +13,7 @@ import { defaultsDeep, cloneDeep } from 'lodash-es'
 import ChartError from '@/views/chart/components/views/components/ChartError.vue'
 import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
+import { deepCopy } from '@/utils/utils'
 
 const dvMainStore = dvMainStoreWithOut()
 const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@@ -34,7 +35,7 @@ const props = defineProps({
   scale: {
     type: Number,
     required: false,
-    default: 100
+    default: 1
   },
   terminal: {
     type: String,
@@ -113,11 +114,13 @@ const renderChart = async view => {
   curView = view
   // view 为引用对象 需要存库 view.data 直接赋值会导致保存不必要的数据
   // 与默认视图对象合并，方便增加配置项
-  const chart = { ...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)), data: chartData.value }
+  const chart = deepCopy({
+    ...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)),
+    data: chartData.value
+  })
   const chartView = chartViewManager.getChartView(view.render, view.type)
-  console.log('scale=' + scale.value)
-  recursionTransObj(customAttrTrans, chart.customAttr, scale.value / 100, terminal.value)
-  recursionTransObj(customStyleTrans, chart.customStyle, scale.value / 100, terminal.value)
+  recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
+  recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
   switch (chartView.library) {
     case ChartLibraryType.L7_PLOT:
       renderL7Plot(chart, chartView as L7PlotChartView<any, any>)
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 bb12e52c04..9c021aa1b6 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
@@ -22,6 +22,8 @@ import { ElPagination } from 'element-plus-secondary'
 import ChartError from '@/views/chart/components/views/components/ChartError.vue'
 import { defaultsDeep, cloneDeep } from 'lodash-es'
 import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
+import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
+import { deepCopy } from '@/utils/utils'
 
 const dvMainStore = dvMainStoreWithOut()
 const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@@ -39,12 +41,21 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'canvas'
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  terminal: {
+    type: String,
+    default: 'pc'
   }
 })
 
 const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick'])
 
-const { view, showPosition } = toRefs(props)
+const { view, showPosition, scale, terminal } = toRefs(props)
 
 const isError = ref(false)
 const errMsg = ref('')
@@ -113,10 +124,14 @@ const renderChart = (viewInfo: Chart, resetPageInfo: boolean) => {
     return
   }
   // view 为引用对象 需要存库 view.data 直接赋值会导致保存不必要的数据
-  const chart = {
+  const chart = deepCopy({
     ...defaultsDeep(viewInfo, cloneDeep(BASE_VIEW_CONFIG)),
     data: chartData.value
-  } as ChartObj
+  } as ChartObj)
+
+  recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
+  recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
+
   setupPage(chart, resetPageInfo)
   myChart?.destroy()
   const chartView = chartViewManager.getChartView(
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index c17da00d1f..3a3dc5edf3 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -93,11 +93,11 @@ const props = defineProps({
   scale: {
     type: Number,
     required: false,
-    default: 100
+    default: 1
   }
 })
 const dynamicAreaId = ref('')
-const { view, showPosition, element, active, searchCount } = toRefs(props)
+const { view, showPosition, element, active, searchCount, scale } = toRefs(props)
 
 const titleShow = computed(
   () =>
@@ -201,6 +201,10 @@ watch(
   { deep: true }
 )
 
+watch([() => scale.value], () => {
+  initTitle()
+})
+
 watch([() => searchCount.value], () => {
   // 内部计时器启动 忽略外部计时器
   if (!innerRefreshTimer) {
@@ -216,6 +220,12 @@ watch([() => resultMode.value], () => {
   queryData()
 })
 
+watch([() => scale.value], () => {
+  nextTick(() => {
+    chartComponent?.value?.renderChart(view.value)
+  })
+})
+
 watch([() => curComponent.value], () => {
   if (curComponent.value && curComponent.value.id === view.value.id) {
     state.initReady = false
@@ -233,7 +243,7 @@ const initTitle = () => {
     const customStyle = view.value.customStyle
     if (customStyle.text) {
       state.title_show = customStyle.text.show
-      state.title_class.fontSize = customStyle.text.fontSize + 'px'
+      state.title_class.fontSize = customStyle.text.fontSize * scale.value + 'px'
       state.title_class.color = customStyle.text.color
       state.title_class.textAlign = customStyle.text.hPosition
       state.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
@@ -634,6 +644,7 @@ const toolTip = computed(() => {
       />
       <chart-component-s2
         :view="view"
+        :scale="scale"
         :show-position="showPosition"
         v-else-if="showChartView(ChartLibraryType.S2)"
         ref="chartComponent"