fix: 新增看板组件编辑时可以设置字体大小

@@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '../../../enum';
 
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
   // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
 };
 

@@ -19,6 +19,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -19,20 +19,24 @@
   const currentValue = ref(false);
 
   const getDesign = computed(() => {
-    // console.log(props.config, 'config');
-    const { option } = props.config;
+    const { option, persetOption } = props.config;
+    console.log(props.config, 'props.config');
     const {
       attribute,
       attributeRename,
       attributeName,
+      componentInfo,
       commandType,
       extensionDesc,
       codeType,
       deviceCode,
       customCommand,
     } = option;
+    const { fontSize: persetFontSize } = persetOption || {};
+    const { fontSize } = componentInfo || {};
     return {
       attribute: attributeRename || attributeName || attribute,
+      fontSize: fontSize || persetFontSize,
       extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
       commandType,
       codeType,
@@ -81,7 +85,10 @@
           <span class="on">ON</span>
           <span class="off">OFF</span>
         </label>
-        <div class="text-center mt-2 text-gray-700" :style="getScale">
+        <div
+          class="text-center mt-2 text-gray-700"
+          :style="{ ...getScale, fontSize: getDesign.fontSize + 'px' }"
+        >
           {{ getDesign.attribute || '属性' }}
         </div>
       </Spin>

@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON]: 'shuiwen',
   [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -32,6 +32,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '字体大小',
+        component: 'InputNumber',
+        defaultValue: option.fontSize,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -31,14 +31,20 @@
       deviceCode,
       customCommand,
     } = option;
-    const { icon: presetIcon, iconColor: presetIconColor } = persetOption || {};
-    const { icon, iconColor } = componentInfo || {};
+    console.log(props, 'option111');
+    const {
+      icon: presetIcon,
+      iconColor: presetIconColor,
+      fontSize: persetFontSize,
+    } = persetOption || {};
+    const { icon, iconColor, fontSize } = componentInfo || {};
 
     return {
       icon: icon ?? presetIcon,
       iconColor: iconColor || presetIconColor,
       attribute: attributeRename || attributeName || attribute,
       extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      fontSize: fontSize || persetFontSize,
       commandType,
       codeType,
       deviceCode,
@@ -84,7 +90,10 @@
           :style="{ color: getDesign.iconColor }"
           :size="50"
         />
-        <span class="mt-3 truncate text-gray-500 text-xs text-center">
+        <span
+          class="mt-3 truncate text-gray-500 text-center"
+          :style="{ fontSize: getDesign.fontSize + 'px' }"
+        >
           {{ getDesign.attribute || '属性' }}
         </span>
       </div>

@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('SwitchList');
 
 export const SwitchListConfig: ConfigType = {
   ...componentKeys,
-  title: '开关量控制列表',
+  title: '开关控制列表',
   package: PackagesCategoryEnum.CONTROL,
 };

@@ -146,7 +146,7 @@
         <SvgIcon
           :name="item.icon!"
           prefix="iconfont"
-          :size="getRatio ? 30 * getRatio : 30"
+          :size="getRatio ? 25 * getRatio : 25"
           :style="{ color: item.iconColor }"
         />
 

@@ -9,6 +9,7 @@
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useComponentScale } from '../../../hook/useComponentScale';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -84,6 +85,7 @@
   };
 
   useMultipleDataFetch(props, updateFn);
+  const { getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -99,16 +101,16 @@
         <SvgIcon
           :name="item.icon!"
           prefix="iconfont"
-          :size="40"
+          :size="getRatio ? 25 * getRatio : 25"
           :style="{ color: item.iconColor }"
         />
 
-        <div class="text-gray-500 text-lg truncate ml-6">{{
+        <div class="text-gray-500 truncate ml-6">{{
           item.deviceName + '-' + item.attributeName || '温度'
         }}</div>
       </div>
 
-      <h1 class="font-bold text-xl m-2 truncate" :style="{ color: item.fontColor }">
+      <h1 class="font-bold m-2 truncate" :style="{ color: item.fontColor }">
         <span> {{ item.value || 0 }}</span>
         <span>{{ item.unit }} </span>
       </h1>

 export enum ComponentConfigFieldEnum {
   FONT_COLOR = 'fontColor',
+  FONT_SIZE = 'fontSize',
+  VALUE_SIZE = 'valueSize', //数值大小
   UNIT = 'unit',
   POINTER_COLOR = 'pointerColor',
   INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor',

@@ -354,7 +354,6 @@ export const useDataFetch = (
   props: { config: ComponentPropsConfigType },
   updateFn: DataFetchUpdateFn
 ) => {
-  console.log(props, 'props');
   const getBindAttribute = computed(() => {
     const { config } = props;
     const { option } = config as ComponentPropsConfigType<Recordable, DataSource>;