fix:基础组件添加字体类型

1 year ago · a5034def77
parent b8b5e503a6
commit a5034def77
9 changed files with 58 additions and 47 deletions
--- a/data-room-ui/packages/BasicComponents/CurrentTime/index.vue
+++ b/data-room-ui/packages/BasicComponents/CurrentTime/index.vue
@ -19,7 +19,9 @@
          'px;color:' +
          config.customize.color +
          ';font-weight:' +
-          config.customize.fontWeight
+          config.customize.fontWeight+
+          ';font-family:' +
+          config.customize.fontFamily
      "
    >
      {{ nowTime }}
@ -101,6 +103,7 @@ export default {

 <style lang="scss" scoped>
@import "../../BasicComponents/fonts/index.css";
+@import "../../assets/fonts/numberFont/stylesheet.css";
 .bs-design-wrap{
  width: 100%;
 }
--- a/data-room-ui/packages/BasicComponents/CurrentTime/setting.vue
+++ b/data-room-ui/packages/BasicComponents/CurrentTime/setting.vue
@ -66,6 +66,23 @@
            placeholder="请输入字体权重"
          />
        </el-form-item>
+        <el-form-item
+          label="字体类型"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.fontFamily"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+          >
+            <el-option
+              v-for="item in fontFamilyList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
        <el-form-item
          label="字体颜色"
          label-width="100px"
@ -102,6 +119,7 @@ import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import fontList from 'data-room-ui/js/utils/fontList'
 export default {
  name: 'CurrentTimeSetting',
  components: {
@ -112,6 +130,7 @@ export default {
  },
  data () {
    return {
+      fontFamilyList: fontList,
      activeName: 'data',
      dateFormatList: [
        { label: '年-月-日 时:分:秒', value: 'YYYY-MM-DD HH:mm:ss' },
--- a/data-room-ui/packages/BasicComponents/CurrentTime/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/CurrentTime/settingConfig.js
@ -29,6 +29,7 @@ const customConfig = {
  customize: {
    fontSize: 28,
    fontWeight: 700,
+    fontFamily: '', // 字体类型
    color: 'rgb(155 159 172)'
  }

--- a/data-room-ui/packages/BasicComponents/Numbers/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Numbers/setting.vue
@ -105,6 +105,7 @@ import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetti
 import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import fontList from 'data-room-ui/js/utils/fontList'
 export default {
  name: 'TextSetting',
  components: {
@ -116,27 +117,7 @@ export default {
  },
  data () {
    return {
-      fontFamilyList: [
-        {
-          label: '默认',
-          value: ''
-        },
-        {
-          label: '时钟加粗倾斜',
-          value: 'ds-digitalbold_italic'
-        },
-        {
-          label: '时钟加粗正常',
-          value: 'ds-digitalbold'
-        },
-        {
-          label: '时钟倾斜',
-          value: 'ds-digitalitalic'
-        },
-        {
-          label: '时钟正常',
-          value: 'ds-digitalnormal'
-        }],
+      fontFamilyList: fontList,
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
--- a/data-room-ui/packages/BasicComponents/Texts/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Texts/setting.vue
@ -102,6 +102,7 @@ import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetti
 import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import fontList from 'data-room-ui/js/utils/fontList'
 export default {
  name: 'TextSetting',
  components: {
@ -113,27 +114,7 @@ export default {
  },
  data () {
    return {
-      fontFamilyList: [
-        {
-          label: '默认',
-          value: ''
-        },
-        {
-          label: '时钟加粗倾斜',
-          value: 'ds-digitalbold_italic'
-        },
-        {
-          label: '时钟加粗正常',
-          value: 'ds-digitalbold'
-        },
-        {
-          label: '时钟倾斜',
-          value: 'ds-digitalitalic'
-        },
-        {
-          label: '时钟正常',
-          value: 'ds-digitalnormal'
-        }],
+      fontFamilyList: fontList,
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
--- a/data-room-ui/packages/BasicComponents/TimeCountDown/index.vue
+++ b/data-room-ui/packages/BasicComponents/TimeCountDown/index.vue
@ -23,7 +23,9 @@
          'px;color:' +
          config.customize.color +
          ';font-weight:' +
-          config.customize.fontWeight
+          config.customize.fontWeight +
+          ';font-family:' +
+          config.customize.fontFamily
      "
    >
      {{ dateDiff }}
@ -34,8 +36,8 @@
 <script>
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
-import cloneDeep from "lodash/cloneDeep";
-import {mapMutations, mapState} from "vuex";
+import cloneDeep from 'lodash/cloneDeep'
+import { mapMutations, mapState } from 'vuex'
 export default {
  name: 'TimeCountDown',
  mixins: [paramsMixins],
@ -161,6 +163,7 @@ export default {

 <style lang="scss" scoped>
@import "../../BasicComponents/fonts/index.css";
+@import "../../assets/fonts/numberFont/stylesheet.css";
 .bs-design-wrap{
  width: 100%;
 }
--- a/data-room-ui/packages/BasicComponents/TimeCountDown/setting.vue
+++ b/data-room-ui/packages/BasicComponents/TimeCountDown/setting.vue
@ -65,6 +65,23 @@
            placeholder="请输入字体权重"
          />
        </el-form-item>
+        <el-form-item
+          label="字体类型"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.fontFamily"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+          >
+            <el-option
+              v-for="item in fontFamilyList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
        <el-form-item
          label="字体颜色"
          label-width="100px"
@ -101,6 +118,7 @@ import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import fontList from 'data-room-ui/js/utils/fontList'
 export default {
  name: 'TimeCountDownSetting',
  components: {
@ -111,6 +129,7 @@ export default {
  },
  data () {
    return {
+      fontFamilyList: fontList,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
--- a/data-room-ui/packages/BasicComponents/TimeCountDown/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/TimeCountDown/settingConfig.js
@ -28,6 +28,7 @@ const customConfig = {
  customize: {
    fontSize: 28,
    fontWeight: 700,
+    fontFamily: '', // 字体类型
    color: 'rgb(155 159 172)'
  }

--- a/data-room-ui/packages/js/utils/themeFormatting.js
+++ b/data-room-ui/packages/js/utils/themeFormatting.js
@ -72,7 +72,10 @@ export function themeToSetting (chartList, type) {
 }
 // 对单个组件进行主题设置（从theme到Setting）
 function chartThemeToSetting (chart, type) {
-  chart.option.theme = type === 'dark' ? 'transparent' : 'light'
+  if (chart.option && chart.option.theme) {
+    chart.option.theme = type === 'dark' ? 'transparent' : 'light'
+  }
+
  if (chart.theme && chart.theme[type]) {
    // 如果是g2组件或者远程组件
    if (['customComponent', 'remoteComponent', 'echartsComponent'].includes(chart.type)) {