Procházet zdrojové kódy

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

liu.shiyi před 1 rokem
rodič
revize
a5034def77

+ 4 - 1
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%;
 }

+ 19 - 0
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' },

+ 1 - 0
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)'
   }
 

+ 2 - 21
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' }

+ 2 - 21
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' }

+ 6 - 3
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%;
 }

+ 19 - 0
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

+ 1 - 0
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)'
   }
 

+ 4 - 1
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)) {