From fb24f9157996b62be53540b367b8794d29fc8d39 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 12 Dec 2023 15:26:08 +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

---
 .../custom-component/user-view/Component.vue  |   1 +
 core/core-frontend/src/utils/sizeAdaptor.ts   | 125 ++++++++++++++++++
 .../views/components/ChartComponentG2Plot.vue |  15 ++-
 .../views/chart/components/views/index.vue    |   6 +
 4 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 core/core-frontend/src/utils/sizeAdaptor.ts

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 a9b9a17864..277c02415f 100644
--- a/core/core-frontend/src/custom-component/user-view/Component.vue
+++ b/core/core-frontend/src/custom-component/user-view/Component.vue
@@ -77,6 +77,7 @@ const autoStyle = computed(() => {
 <template>
   <div class="bash-shape" :style="autoStyle">
     <chart
+      :scale="scale"
       :active="active"
       :view="view"
       :element="element"
diff --git a/core/core-frontend/src/utils/sizeAdaptor.ts b/core/core-frontend/src/utils/sizeAdaptor.ts
new file mode 100644
index 0000000000..f83f0fdfdd
--- /dev/null
+++ b/core/core-frontend/src/utils/sizeAdaptor.ts
@@ -0,0 +1,125 @@
+import { getScaleValue, mobileSpecialProps } from '@/utils/canvasStyle'
+
+export const customAttrTrans = {
+  size: [
+    'barWidth',
+    'lineWidth',
+    'lineSymbolSize',
+    'funnelWidth', // 漏斗图 最大宽度
+    'tableTitleFontSize',
+    'tableItemFontSize',
+    'tableTitleHeight',
+    'tableItemHeight',
+    'dimensionFontSize',
+    'quotaFontSize',
+    'spaceSplit', // 间隔
+    'scatterSymbolSize', // 气泡大小，散点图
+    'radarSize', // 雷达占比
+    'quotaSuffixFontSize'
+  ],
+  label: ['fontSize'],
+  tooltip: {
+    textStyle: ['fontSize']
+  },
+  slider: ['fontSize'],
+  graphic: ['fontSize']
+}
+export const customStyleTrans = {
+  text: ['fontSize'],
+  legend: {
+    textStyle: ['fontSize']
+  },
+  xAxis: {
+    nameTextStyle: ['fontSize'],
+    axisLabel: ['fontSize'],
+    splitLine: {
+      lineStyle: ['width']
+    }
+  },
+  yAxis: {
+    nameTextStyle: ['fontSize'],
+    axisLabel: ['fontSize'],
+    splitLine: {
+      lineStyle: ['width']
+    }
+  },
+  yAxisExt: {
+    nameTextStyle: ['fontSize'],
+    axisLabel: ['fontSize'],
+    splitLine: {
+      lineStyle: ['width']
+    }
+  },
+  split: {
+    name: ['fontSize'],
+    axisLine: {
+      lineStyle: ['width']
+    },
+    axisTick: {
+      lineStyle: ['width']
+    },
+    axisLabel: ['margin', 'fontSize'],
+    splitLine: {
+      lineStyle: ['width']
+    }
+  }
+}
+
+export function recursionTransObj(template, infoObj, scale, terminal) {
+  for (const templateKey in template) {
+    // 如果是数组 进行赋值计算
+    if (template[templateKey] instanceof Array) {
+      template[templateKey].forEach(templateProp => {
+        if (infoObj[templateKey] && infoObj[templateKey][templateProp]) {
+          // 移动端特殊属性值设置
+          if (terminal === 'mobile' && mobileSpecialProps[templateProp] !== undefined) {
+            infoObj[templateKey][templateProp] = mobileSpecialProps[templateProp]
+          } else {
+            infoObj[templateKey][templateProp] = getScaleValue(
+              infoObj[templateKey][templateProp],
+              scale
+            )
+          }
+        }
+      })
+    } else if (typeof template[templateKey] === 'string') {
+      // 一级字段为字符串直接赋值
+      infoObj[templateKey] = getScaleValue(infoObj[templateKey], scale)
+    } else {
+      // 如果是对象 继续进行递归
+      if (infoObj[templateKey]) {
+        recursionTransObj(template[templateKey], infoObj[templateKey], scale, terminal)
+      }
+    }
+  }
+}
+
+export function recursionThemTransObj(template, infoObj, color) {
+  for (const templateKey in template) {
+    // 如果是数组 进行赋值计算
+    if (template[templateKey] instanceof Array) {
+      template[templateKey].forEach(templateProp => {
+        if (infoObj[templateKey]) {
+          infoObj[templateKey][templateProp] = color
+        }
+      })
+    } else if (typeof template[templateKey] === 'string') {
+      // 一级字段为字符串直接赋值
+      infoObj[templateKey] = color
+    } else {
+      // 如果是对象 继续进行递归
+      if (infoObj[templateKey]) {
+        recursionThemTransObj(template[templateKey], infoObj[templateKey], color)
+      }
+    }
+  }
+}
+
+export function componentScalePublic(chartInfo, heightScale, widthScale) {
+  const scale = Math.min(heightScale, widthScale)
+  // attr 缩放转换
+  recursionTransObj(this.customAttrTrans, chartInfo.customAttr, scale, null)
+  // style 缩放转换
+  recursionTransObj(this.customStyleTrans, chartInfo.customStyle, scale, null)
+  return chartInfo
+}
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 410f9dbfb6..c17cf91031 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
@@ -12,6 +12,7 @@ import { parseJson } from '@/views/chart/components/js/util'
 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'
 
 const dvMainStore = dvMainStoreWithOut()
 const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@@ -29,12 +30,21 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'canvas'
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 100
+  },
+  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('')
@@ -105,6 +115,9 @@ const renderChart = async view => {
   // 与默认视图对象合并，方便增加配置项
   const chart = { ...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)
   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/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index 26dcfd9da7..c17da00d1f 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -89,6 +89,11 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: false
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 100
   }
 })
 const dynamicAreaId = ref('')
@@ -617,6 +622,7 @@ const toolTip = computed(() => {
         :show-position="showPosition"
       />
       <chart-component-g2-plot
+        :scale="scale"
         :dynamic-area-id="dynamicAreaId"
         :view="view"
         :show-position="showPosition"