From 902e3a7db2a970b1d586b60d45633282134be5ce Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 21 Nov 2024 18:28:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E3=80=81=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E6=9D=BF=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E5=AD=97=E4=BD=93=E6=9B=B4=E6=8D=A2=20#13408?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard-style/OverallSetting.vue        | 30 ++++++++++++++++++-
 .../visualization/CanvasBaseSetting.vue       | 25 +++++++++++++++-
 core/core-frontend/src/utils/canvasUtils.ts   |  1 +
 core/core-frontend/src/utils/style.ts         |  4 ++-
 .../editor/util/dataVisualization.ts          |  3 +-
 5 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
index 42940643b5..b800240ec2 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
@@ -23,6 +23,21 @@
         </color-button>
       </el-space>
     </el-form-item>
+    <el-form-item
+      v-if="dvInfo.type === 'dashboard'"
+      class="form-item"
+      :class="'form-item-' + themes"
+      label="仪表板字体选择"
+    >
+      <el-select :effect="themes" v-model="canvasStyleData.fontFamily" @change="styleChange">
+        <el-option
+          v-for="option in fontFamily"
+          :key="option.value"
+          :label="option.name"
+          :value="option.value"
+        />
+      </el-select>
+    </el-form-item>
     <el-form-item
       v-if="dvInfo.type === 'dashboard'"
       class="form-item"
@@ -225,6 +240,7 @@ import {
   LIGHT_THEME_DASHBOARD_BACKGROUND
 } from '@/utils/canvasStyle'
 import {
+  CHART_FONT_FAMILY,
   DEFAULT_COLOR_CASE_DARK,
   DEFAULT_COLOR_CASE_LIGHT,
   DEFAULT_TAB_COLOR_CASE_DARK,
@@ -245,8 +261,11 @@ import {
   COMMON_COMPONENT_BACKGROUND_DARK,
   COMMON_COMPONENT_BACKGROUND_LIGHT
 } from '@/custom-component/component-list'
-import { ElFormItem, ElIcon, ElMessage, ElSpace } from 'element-plus-secondary'
+import { ElFormItem, ElIcon, ElSpace } from 'element-plus-secondary'
 import Icon from '@/components/icon-custom/src/Icon.vue'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
+const appearanceStore = useAppearanceStoreWithOut()
+
 const snapshotStore = snapshotStoreWithOut()
 const props = defineProps({
   themes: {
@@ -254,6 +273,12 @@ const props = defineProps({
     default: 'light'
   }
 })
+const fontFamily = CHART_FONT_FAMILY.concat(
+  appearanceStore.fontList.map(ele => ({
+    name: ele.name,
+    value: ele.name
+  }))
+)
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
@@ -271,6 +296,9 @@ const onRefreshChange = val => {
   }
   themeChange()
 }
+const styleChange = () => {
+  snapshotStore.recordSnapshotCache('renderChart')
+}
 
 const themeChange = (modifyName?) => {
   if (modifyName === 'themeColor') {
diff --git a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
index 194d56025f..3f44404944 100644
--- a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
+++ b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
@@ -1,6 +1,21 @@
 <template>
   <div style="width: 100%" ref="bgForm">
     <el-form label-position="top" style="width: 100%; margin-bottom: 16px">
+      <el-form-item
+        class="form-item no-margin-bottom"
+        :class="'form-item-' + themes"
+        label="数据大屏字体选择"
+      >
+        <el-select :effect="themes" v-model="canvasStyleData.fontFamily" @change="onThemeChange">
+          <el-option
+            v-for="option in fontFamily"
+            :key="option.value"
+            :label="option.name"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+
       <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
         <el-checkbox
           size="small"
@@ -63,11 +78,19 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { ElFormItem, ElIcon } from 'element-plus-secondary'
 import Icon from '../icon-custom/src/Icon.vue'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
+import { CHART_FONT_FAMILY } from '@/views/chart/components/editor/util/chart'
 const snapshotStore = snapshotStoreWithOut()
 
 const dvMainStore = dvMainStoreWithOut()
 const { canvasStyleData } = storeToRefs(dvMainStore)
-
+const appearanceStore = useAppearanceStoreWithOut()
+const fontFamily = CHART_FONT_FAMILY.concat(
+  appearanceStore.fontList.map(ele => ({
+    name: ele.name,
+    value: ele.name
+  }))
+)
 const onThemeChange = () => {
   snapshotStore.recordSnapshotCache()
 }
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 9924511f20..2792e7622b 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -223,6 +223,7 @@ export function historyAdaptor(
   canvasVersion
 ) {
   //历史字段适配
+  canvasStyleResult['fontFamily'] = canvasStyleResult['fontFamily'] || 'PingFang'
   canvasStyleResult.dashboard['showGrid'] = canvasStyleResult.dashboard['showGrid'] || false
   canvasStyleResult.dashboard['matrixBase'] = canvasStyleResult.dashboard['matrixBase'] || 4
   canvasStyleResult.component['seniorStyleSetting'] =
diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts
index 3ab87550b5..41009e00cf 100644
--- a/core/core-frontend/src/utils/style.ts
+++ b/core/core-frontend/src/utils/style.ts
@@ -200,7 +200,8 @@ export function getCanvasStyle(canvasStyleData, canvasId = 'canvas-main') {
     backgroundColor,
     backgroundImageEnable,
     fontSize,
-    mobileSetting
+    mobileSetting,
+    fontFamily
   } = canvasStyleData
   const style = { fontSize: fontSize + 'px', color: canvasStyleData.color }
   if (isMainCanvas(canvasId)) {
@@ -225,6 +226,7 @@ export function getCanvasStyle(canvasStyleData, canvasId = 'canvas-main') {
         style['background'] = `url(${imgUrlTrans(background)}) no-repeat`
       }
     }
+    style['font-family'] = fontFamily
   }
 
   return style
diff --git a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts
index 69ab686328..379ae9d550 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts
@@ -102,7 +102,8 @@ export const DEFAULT_CANVAS_STYLE_DATA_BASE = {
   background: '',
   openCommonStyle: true,
   opacity: 1, // 废弃
-  fontSize: 14
+  fontSize: 14,
+  fontFamily: 'PingFang' //字体设置 默认PingFang
 }
 
 // 基础亮色主题