简柏林 / thingskit-front · Commits

Commit 77d15d7c56a201f2a80805a8a75a61e9b49acd34

Authored by loveumiko
1 parent 8eb71406

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

Inline Side-by-side
Showing 11 changed files with 45 additions and 12 deletions
@@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '../../../enum'; @@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '../../../enum';
11 11
12 export const option: PublicPresetOptions = { 12 export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  14 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
14 // [ComponentConfigFieldEnum.FONT_COLOR]: '#000', 15 // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
15 }; 16 };
16 17
@@ -19,6 +19,12 @@ @@ -19,6 +19,12 @@
19 component: 'Checkbox', 19 component: 'Checkbox',
20 defaultValue: option.showDeviceName, 20 defaultValue: option.showDeviceName,
21 }, 21 },
  22 + {
  23 + field: ComponentConfigFieldEnum.FONT_SIZE,
  24 + label: '字体大小',
  25 + component: 'InputNumber',
  26 + defaultValue: 14,
  27 + },
22 ], 28 ],
23 showActionButtonGroup: false, 29 showActionButtonGroup: false,
24 labelWidth: 120, 30 labelWidth: 120,
@@ -19,20 +19,24 @@ @@ -19,20 +19,24 @@
19 const currentValue = ref(false); 19 const currentValue = ref(false);
20 20
21 const getDesign = computed(() => { 21 const getDesign = computed(() => {
22 - // console.log(props.config, 'config');  
23 - const { option } = props.config; 22 + const { option, persetOption } = props.config;
  23 + console.log(props.config, 'props.config');
24 const { 24 const {
25 attribute, 25 attribute,
26 attributeRename, 26 attributeRename,
27 attributeName, 27 attributeName,
  28 + componentInfo,
28 commandType, 29 commandType,
29 extensionDesc, 30 extensionDesc,
30 codeType, 31 codeType,
31 deviceCode, 32 deviceCode,
32 customCommand, 33 customCommand,
33 } = option; 34 } = option;
  35 + const { fontSize: persetFontSize } = persetOption || {};
  36 + const { fontSize } = componentInfo || {};
34 return { 37 return {
35 attribute: attributeRename || attributeName || attribute, 38 attribute: attributeRename || attributeName || attribute,
  39 + fontSize: fontSize || persetFontSize,
36 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {}, 40 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
37 commandType, 41 commandType,
38 codeType, 42 codeType,
@@ -81,7 +85,10 @@ @@ -81,7 +85,10 @@
81 <span class="on">ON</span> 85 <span class="on">ON</span>
82 <span class="off">OFF</span> 86 <span class="off">OFF</span>
83 </label> 87 </label>
84 - <div class="text-center mt-2 text-gray-700" :style="getScale"> 88 + <div
  89 + class="text-center mt-2 text-gray-700"
  90 + :style="{ ...getScale, fontSize: getDesign.fontSize + 'px' }"
  91 + >
85 {{ getDesign.attribute || '属性' }} 92 {{ getDesign.attribute || '属性' }}
86 </div> 93 </div>
87 </Spin> 94 </Spin>
@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.ICON]: 'shuiwen', 13 [ComponentConfigFieldEnum.ICON]: 'shuiwen',
14 [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF', 14 [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF',
15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  16 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
16 }; 17 };
17 18
18 export default class Config extends PublicConfigClass implements CreateComponentType { 19 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -32,6 +32,12 @@ @@ -32,6 +32,12 @@
32 component: 'Checkbox', 32 component: 'Checkbox',
33 defaultValue: option.showDeviceName, 33 defaultValue: option.showDeviceName,
34 }, 34 },
  35 + {
  36 + field: ComponentConfigFieldEnum.FONT_SIZE,
  37 + label: '字体大小',
  38 + component: 'InputNumber',
  39 + defaultValue: option.fontSize,
  40 + },
35 ], 41 ],
36 showActionButtonGroup: false, 42 showActionButtonGroup: false,
37 labelWidth: 120, 43 labelWidth: 120,
@@ -31,14 +31,20 @@ @@ -31,14 +31,20 @@
31 deviceCode, 31 deviceCode,
32 customCommand, 32 customCommand,
33 } = option; 33 } = option;
34 - const { icon: presetIcon, iconColor: presetIconColor } = persetOption || {};  
35 - const { icon, iconColor } = componentInfo || {}; 34 + console.log(props, 'option111');
  35 + const {
  36 + icon: presetIcon,
  37 + iconColor: presetIconColor,
  38 + fontSize: persetFontSize,
  39 + } = persetOption || {};
  40 + const { icon, iconColor, fontSize } = componentInfo || {};
36 41
37 return { 42 return {
38 icon: icon ?? presetIcon, 43 icon: icon ?? presetIcon,
39 iconColor: iconColor || presetIconColor, 44 iconColor: iconColor || presetIconColor,
40 attribute: attributeRename || attributeName || attribute, 45 attribute: attributeRename || attributeName || attribute,
41 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {}, 46 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
  47 + fontSize: fontSize || persetFontSize,
42 commandType, 48 commandType,
43 codeType, 49 codeType,
44 deviceCode, 50 deviceCode,
@@ -84,7 +90,10 @@ @@ -84,7 +90,10 @@
84 :style="{ color: getDesign.iconColor }" 90 :style="{ color: getDesign.iconColor }"
85 :size="50" 91 :size="50"
86 /> 92 />
87 - <span class="mt-3 truncate text-gray-500 text-xs text-center"> 93 + <span
  94 + class="mt-3 truncate text-gray-500 text-center"
  95 + :style="{ fontSize: getDesign.fontSize + 'px' }"
  96 + >
88 {{ getDesign.attribute || '属性' }} 97 {{ getDesign.attribute || '属性' }}
89 </span> 98 </span>
90 </div> 99 </div>
@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('SwitchList'); @@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('SwitchList');
5 5
6 export const SwitchListConfig: ConfigType = { 6 export const SwitchListConfig: ConfigType = {
7 ...componentKeys, 7 ...componentKeys,
8 - title: '开关量控制列表', 8 + title: '开关控制列表',
9 package: PackagesCategoryEnum.CONTROL, 9 package: PackagesCategoryEnum.CONTROL,
10 }; 10 };
@@ -146,7 +146,7 @@ @@ -146,7 +146,7 @@
146 <SvgIcon 146 <SvgIcon
147 :name="item.icon!" 147 :name="item.icon!"
148 prefix="iconfont" 148 prefix="iconfont"
149 - :size="getRatio ? 30 * getRatio : 30" 149 + :size="getRatio ? 25 * getRatio : 25"
150 :style="{ color: item.iconColor }" 150 :style="{ color: item.iconColor }"
151 /> 151 />
152 152
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 import { useReceiveValue } from '../../../hook/useReceiveValue'; 9 import { useReceiveValue } from '../../../hook/useReceiveValue';
10 import { useMultipleDataFetch } from '../../../hook/socket/useSocket'; 10 import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
11 import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type'; 11 import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  12 + import { useComponentScale } from '../../../hook/useComponentScale';
12 13
13 const props = defineProps<{ 14 const props = defineProps<{
14 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
@@ -84,6 +85,7 @@ @@ -84,6 +85,7 @@
84 }; 85 };
85 86
86 useMultipleDataFetch(props, updateFn); 87 useMultipleDataFetch(props, updateFn);
  88 + const { getRatio } = useComponentScale(props);
87 </script> 89 </script>
88 90
89 <template> 91 <template>
@@ -99,16 +101,16 @@ @@ -99,16 +101,16 @@
99 <SvgIcon 101 <SvgIcon
100 :name="item.icon!" 102 :name="item.icon!"
101 prefix="iconfont" 103 prefix="iconfont"
102 - :size="40" 104 + :size="getRatio ? 25 * getRatio : 25"
103 :style="{ color: item.iconColor }" 105 :style="{ color: item.iconColor }"
104 /> 106 />
105 107
106 - <div class="text-gray-500 text-lg truncate ml-6">{{ 108 + <div class="text-gray-500 truncate ml-6">{{
107 item.deviceName + '-' + item.attributeName || '温度' 109 item.deviceName + '-' + item.attributeName || '温度'
108 }}</div> 110 }}</div>
109 </div> 111 </div>
110 112
111 - <h1 class="font-bold text-xl m-2 truncate" :style="{ color: item.fontColor }"> 113 + <h1 class="font-bold m-2 truncate" :style="{ color: item.fontColor }">
112 <span> {{ item.value || 0 }}</span> 114 <span> {{ item.value || 0 }}</span>
113 <span>{{ item.unit }} </span> 115 <span>{{ item.unit }} </span>
114 </h1> 116 </h1>
1 export enum ComponentConfigFieldEnum { 1 export enum ComponentConfigFieldEnum {
2 FONT_COLOR = 'fontColor', 2 FONT_COLOR = 'fontColor',
  3 + FONT_SIZE = 'fontSize',
  4 + VALUE_SIZE = 'valueSize', //数值大小
3 UNIT = 'unit', 5 UNIT = 'unit',
4 POINTER_COLOR = 'pointerColor', 6 POINTER_COLOR = 'pointerColor',
5 INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor', 7 INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor',
@@ -354,7 +354,6 @@ export const useDataFetch = ( @@ -354,7 +354,6 @@ export const useDataFetch = (
354 props: { config: ComponentPropsConfigType }, 354 props: { config: ComponentPropsConfigType },
355 updateFn: DataFetchUpdateFn 355 updateFn: DataFetchUpdateFn
356 ) => { 356 ) => {
357 - console.log(props, 'props');  
358 const getBindAttribute = computed(() => { 357 const getBindAttribute = computed(() => {
359 const { config } = props; 358 const { config } = props;
360 const { option } = config as ComponentPropsConfigType<Recordable, DataSource>; 359 const { option } = config as ComponentPropsConfigType<Recordable, DataSource>;