简柏林 / thingskit-front · Commits

Commit 7341529a8de55a390b93f2551bc88c78b29ae5da

Authored by loveumiko
1 parent dc7c6718

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

Inline Side-by-side
Showing 63 changed files with 658 additions and 164 deletions
@@ -16,6 +16,7 @@ export const option: PublicPresetOptions = { @@ -16,6 +16,7 @@ export const option: PublicPresetOptions = {
16 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000', 16 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000',
17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
18 [ComponentConfigFieldEnum.SHOW_TIME]: false, 18 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  19 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
19 }; 20 };
20 21
21 export default class Config extends PublicConfigClass implements CreateComponentType { 22 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -36,6 +36,15 @@ @@ -36,6 +36,15 @@
36 component: 'Checkbox', 36 component: 'Checkbox',
37 defaultValue: option.showTime, 37 defaultValue: option.showTime,
38 }, 38 },
  39 + {
  40 + field: ComponentConfigFieldEnum.FONT_SIZE,
  41 + label: '文本字体大小',
  42 + component: 'InputNumber',
  43 + defaultValue: 14,
  44 + componentProps: {
  45 + min: 0,
  46 + },
  47 + },
39 ], 48 ],
40 showActionButtonGroup: false, 49 showActionButtonGroup: false,
41 labelWidth: 120, 50 labelWidth: 120,
@@ -24,6 +24,7 @@ @@ -24,6 +24,7 @@
24 showTime: boolean; 24 showTime: boolean;
25 status: IStatus; 25 status: IStatus;
26 time: number; 26 time: number;
  27 + fontSize?: number;
27 } 28 }
28 29
29 const props = defineProps<{ 30 const props = defineProps<{
@@ -53,7 +54,11 @@ @@ -53,7 +54,11 @@
53 const getDesign = computed(() => { 54 const getDesign = computed(() => {
54 const { persetOption = {}, option } = props.config; 55 const { persetOption = {}, option } = props.config;
55 const { dataSource } = option; 56 const { dataSource } = option;
56 - const { showDeviceName: presetShowDeviceName, showTime: persetShowTime } = persetOption; 57 + const {
  58 + showDeviceName: presetShowDeviceName,
  59 + showTime: persetShowTime,
  60 + fontSize: persetFontSize,
  61 + } = persetOption;
57 62
58 return { 63 return {
59 dataSource: dataSource?.map((item) => { 64 dataSource: dataSource?.map((item) => {
@@ -63,6 +68,7 @@ @@ -63,6 +68,7 @@
63 deviceName: deviceRename || deviceName, 68 deviceName: deviceRename || deviceName,
64 showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName, 69 showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName,
65 showTime: componentInfo.showTime ?? persetShowTime, 70 showTime: componentInfo.showTime ?? persetShowTime,
  71 + fontSize: componentInfo.fontSize || persetFontSize,
66 }; 72 };
67 }), 73 }),
68 }; 74 };
@@ -82,6 +88,7 @@ @@ -82,6 +88,7 @@
82 time: 1689574726, 88 time: 1689574726,
83 showDeviceName: true, 89 showDeviceName: true,
84 showTime: true, 90 showTime: true,
  91 + fontSize: 14,
85 }, 92 },
86 ]); 93 ]);
87 94
@@ -133,6 +140,7 @@ @@ -133,6 +140,7 @@
133 showTime: item.showTime, 140 showTime: item.showTime,
134 status: { text: '', color: '' }, 141 status: { text: '', color: '' },
135 time: 0, 142 time: 0,
  143 + fontSize: item.fontSize,
136 }; 144 };
137 }) as any; 145 }) as any;
138 const { data, update } = message; 146 const { data, update } = message;
@@ -163,7 +171,7 @@ @@ -163,7 +171,7 @@
163 <main :style="getScale" class="w-full h-full flex justify-center items-center"> 171 <main :style="getScale" class="w-full h-full flex justify-center items-center">
164 <div v-for="item in alarmStatusList" :key="item.id" class="flex flex-col items-center"> 172 <div v-for="item in alarmStatusList" :key="item.id" class="flex flex-col items-center">
165 <div class="flex justify-center items-center flex-col"> 173 <div class="flex justify-center items-center flex-col">
166 - <div class="text-gray-500 text-sm truncate" 174 + <div class="text-gray-500 truncate" :style="{ fontSize: item.fontSize + 'px' }"
167 >{{ 175 >{{
168 item.status.text 176 item.status.text
169 ? item.showDeviceName 177 ? item.showDeviceName
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 }, 21 },
22 { 22 {
23 field: ComponentConfigFieldEnum.FONT_SIZE, 23 field: ComponentConfigFieldEnum.FONT_SIZE,
24 - label: '字体大小', 24 + label: '文本字体大小',
25 component: 'InputNumber', 25 component: 'InputNumber',
26 defaultValue: 14, 26 defaultValue: 14,
27 }, 27 },
@@ -20,7 +20,6 @@ @@ -20,7 +20,6 @@
20 20
21 const getDesign = computed(() => { 21 const getDesign = computed(() => {
22 const { option, persetOption } = props.config; 22 const { option, persetOption } = props.config;
23 - console.log(props.config, 'props.config');  
24 const { 23 const {
25 attribute, 24 attribute,
26 attributeRename, 25 attributeRename,
@@ -36,7 +35,7 @@ @@ -36,7 +35,7 @@
36 const { fontSize } = componentInfo || {}; 35 const { fontSize } = componentInfo || {};
37 return { 36 return {
38 attribute: attributeRename || attributeName || attribute, 37 attribute: attributeRename || attributeName || attribute,
39 - fontSize: fontSize || persetFontSize, 38 + fontSize: fontSize || persetFontSize || 14,
40 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {}, 39 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
41 commandType, 40 commandType,
42 codeType, 41 codeType,
@@ -34,7 +34,7 @@ @@ -34,7 +34,7 @@
34 }, 34 },
35 { 35 {
36 field: ComponentConfigFieldEnum.FONT_SIZE, 36 field: ComponentConfigFieldEnum.FONT_SIZE,
37 - label: '字体大小', 37 + label: '文本字体大小',
38 component: 'InputNumber', 38 component: 'InputNumber',
39 defaultValue: option.fontSize, 39 defaultValue: option.fontSize,
40 }, 40 },
@@ -31,7 +31,6 @@ @@ -31,7 +31,6 @@
31 deviceCode, 31 deviceCode,
32 customCommand, 32 customCommand,
33 } = option; 33 } = option;
34 - console.log(props, 'option111');  
35 const { 34 const {
36 icon: presetIcon, 35 icon: presetIcon,
37 iconColor: presetIconColor, 36 iconColor: presetIconColor,
@@ -44,7 +43,7 @@ @@ -44,7 +43,7 @@
44 iconColor: iconColor || presetIconColor, 43 iconColor: iconColor || presetIconColor,
45 attribute: attributeRename || attributeName || attribute, 44 attribute: attributeRename || attributeName || attribute,
46 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {}, 45 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
47 - fontSize: fontSize || persetFontSize, 46 + fontSize: fontSize || persetFontSize || 14,
48 commandType, 47 commandType,
49 codeType, 48 codeType,
50 deviceCode, 49 deviceCode,
@@ -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
@@ -18,6 +18,12 @@ @@ -18,6 +18,12 @@
18 component: 'Checkbox', 18 component: 'Checkbox',
19 defaultValue: option.showDeviceName, 19 defaultValue: option.showDeviceName,
20 }, 20 },
  21 + {
  22 + field: ComponentConfigFieldEnum.FONT_SIZE,
  23 + label: '文本字体大小',
  24 + component: 'InputNumber',
  25 + defaultValue: option.fontSize,
  26 + },
21 ], 27 ],
22 showActionButtonGroup: false, 28 showActionButtonGroup: false,
23 labelWidth: 120, 29 labelWidth: 120,
@@ -19,7 +19,7 @@ @@ -19,7 +19,7 @@
19 const currentValue = ref(false); 19 const currentValue = ref(false);
20 20
21 const getDesign = computed(() => { 21 const getDesign = computed(() => {
22 - const { option } = props.config; 22 + const { option, persetOption } = props.config;
23 const { 23 const {
24 attribute, 24 attribute,
25 attributeRename, 25 attributeRename,
@@ -29,7 +29,10 @@ @@ -29,7 +29,10 @@
29 codeType, 29 codeType,
30 deviceCode, 30 deviceCode,
31 customCommand, 31 customCommand,
  32 + componentInfo,
32 } = option; 33 } = option;
  34 + const { fontSize: persetFontSize } = persetOption || {};
  35 + const { fontSize } = componentInfo || {};
33 return { 36 return {
34 attribute: attributeRename || attributeName || attribute, 37 attribute: attributeRename || attributeName || attribute,
35 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {}, 38 extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
@@ -37,6 +40,7 @@ @@ -37,6 +40,7 @@
37 codeType, 40 codeType,
38 deviceCode, 41 deviceCode,
39 customCommand, 42 customCommand,
  43 + fontSize: fontSize || persetFontSize || 14,
40 }; 44 };
41 }); 45 });
42 46
@@ -80,9 +84,11 @@ @@ -80,9 +84,11 @@
80 </div> 84 </div>
81 </label> 85 </label>
82 </div> 86 </div>
83 - <div class="text-center mt-2 text-gray-500" :style="getScale">{{  
84 - getDesign.attribute || '属性'  
85 - }}</div> 87 + <div
  88 + class="text-center mt-2 text-gray-500"
  89 + :style="{ ...getScale, fontSize: getDesign.fontSize + 'px' }"
  90 + >{{ getDesign.attribute || '属性' }}</div
  91 + >
86 </Spin> 92 </Spin>
87 </main> 93 </main>
88 </main> 94 </main>
@@ -13,8 +13,11 @@ export const option: PublicPresetOptions = { @@ -13,8 +13,11 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
14 [ComponentConfigFieldEnum.CONTROL_BAR_COLOR]: '#0072ff', 14 [ComponentConfigFieldEnum.CONTROL_BAR_COLOR]: '#0072ff',
15 [ComponentConfigFieldEnum.FONT_COLOR]: '#000000', 15 [ComponentConfigFieldEnum.FONT_COLOR]: '#000000',
  16 + [ComponentConfigFieldEnum.TEXT_COLOR]: '#000000',
16 [ComponentConfigFieldEnum.MIN_NUMBER]: 0, 17 [ComponentConfigFieldEnum.MIN_NUMBER]: 0,
17 [ComponentConfigFieldEnum.MAX_NUMBER]: 100, 18 [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  19 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
  20 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
18 }; 21 };
19 22
20 export default class Config extends PublicConfigClass implements CreateComponentType { 23 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -8,20 +8,39 @@ @@ -8,20 +8,39 @@
8 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ 8 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
9 schemas: [ 9 schemas: [
10 { 10 {
11 - field: ComponentConfigFieldEnum.CONTROL_BAR_COLOR,  
12 - label: '控制栏背景色', 11 + field: ComponentConfigFieldEnum.FONT_COLOR,
  12 + label: '数值字体颜色',
13 component: 'ColorPicker', 13 component: 'ColorPicker',
14 changeEvent: 'update:value', 14 changeEvent: 'update:value',
15 - defaultValue: option.controlBarColor, 15 + defaultValue: option.fontColor,
16 }, 16 },
17 { 17 {
18 - field: ComponentConfigFieldEnum.FONT_COLOR,  
19 - label: '数值字体颜色', 18 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  19 + label: '数值字体大小',
  20 + component: 'InputNumber',
  21 + defaultValue: option.fontSize,
  22 + },
  23 + {
  24 + field: ComponentConfigFieldEnum.TEXT_COLOR,
  25 + label: '文本字体颜色',
20 component: 'ColorPicker', 26 component: 'ColorPicker',
21 changeEvent: 'update:value', 27 changeEvent: 'update:value',
22 defaultValue: option.fontColor, 28 defaultValue: option.fontColor,
23 }, 29 },
24 { 30 {
  31 + field: ComponentConfigFieldEnum.FONT_SIZE,
  32 + label: '文本字体大小',
  33 + component: 'InputNumber',
  34 + defaultValue: option.fontSize,
  35 + },
  36 + {
  37 + field: ComponentConfigFieldEnum.CONTROL_BAR_COLOR,
  38 + label: '控制栏背景色',
  39 + component: 'ColorPicker',
  40 + changeEvent: 'update:value',
  41 + defaultValue: option.controlBarColor,
  42 + },
  43 + {
25 field: ComponentConfigFieldEnum.MIN_NUMBER, 44 field: ComponentConfigFieldEnum.MIN_NUMBER,
26 label: '最小值', 45 label: '最小值',
27 component: 'InputNumber', 46 component: 'InputNumber',
@@ -61,6 +80,7 @@ @@ -61,6 +80,7 @@
61 }; 80 };
62 }, 81 },
63 }, 82 },
  83 +
64 { 84 {
65 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, 85 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
66 label: '显示设备名称', 86 label: '显示设备名称',
@@ -43,8 +43,12 @@ @@ -43,8 +43,12 @@
43 fonColor: persetFontColor, 43 fonColor: persetFontColor,
44 minNumber: persetMinNumber, 44 minNumber: persetMinNumber,
45 maxNumber: persetMaxNumber, 45 maxNumber: persetMaxNumber,
  46 + textColor: persetTextColor,
  47 + valueSize: persetValueSize,
  48 + fontSize: persetFontSize,
46 } = persetOption || {}; 49 } = persetOption || {};
47 - const { controlBarColor, fontColor, minNumber, maxNumber } = componentInfo || {}; 50 + const { controlBarColor, fontColor, minNumber, maxNumber, textColor, valueSize, fontSize } =
  51 + componentInfo || {};
48 return { 52 return {
49 attribute: attributeRename || attributeName || attribute, 53 attribute: attributeRename || attributeName || attribute,
50 controlBarColor: controlBarColor ?? persetControlBarColor, 54 controlBarColor: controlBarColor ?? persetControlBarColor,
@@ -56,6 +60,9 @@ @@ -56,6 +60,9 @@
56 codeType, 60 codeType,
57 deviceCode, 61 deviceCode,
58 customCommand, 62 customCommand,
  63 + textColor: textColor || persetTextColor,
  64 + valueSize: valueSize || persetValueSize || 20,
  65 + fontSize: fontSize || persetFontSize || 14,
59 }; 66 };
60 }); 67 });
61 68
@@ -198,7 +205,7 @@ @@ -198,7 +205,7 @@
198 <Spin :spinning="loading" class="w-full h-full"> 205 <Spin :spinning="loading" class="w-full h-full">
199 <div class="flex flex-col" style="width: 80%"> 206 <div class="flex flex-col" style="width: 80%">
200 <span 207 <span
201 - :style="{ color: getDesign.fontColor }" 208 + :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
202 class="font-bold text-xl mt-3 truncate text-center" 209 class="font-bold text-xl mt-3 truncate text-center"
203 >{{ sliderValue }}</span 210 >{{ sliderValue }}</span
204 > 211 >
@@ -215,7 +222,7 @@ @@ -215,7 +222,7 @@
215 /> 222 />
216 223
217 <span 224 <span
218 - :style="{ color: getDesign.fontColor }" 225 + :style="{ color: getDesign.textColor, fontSize: getDesign.fontSize + 'px' }"
219 class="mt-3 truncate font-bold text-xs text-center" 226 class="mt-3 truncate font-bold text-xs text-center"
220 > 227 >
221 {{ getDesign.attribute || '属性' }} 228 {{ getDesign.attribute || '属性' }}
@@ -14,6 +14,7 @@ export const option: PublicPresetOptions = { @@ -14,6 +14,7 @@ export const option: PublicPresetOptions = {
14 [ComponentConfigFieldEnum.ICON]: 'shuiwen', 14 [ComponentConfigFieldEnum.ICON]: 'shuiwen',
15 [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF', 15 [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF',
16 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 16 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  17 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
17 }; 18 };
18 19
19 export default class Config extends PublicConfigClass implements CreateComponentType { 20 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -27,6 +27,12 @@ @@ -27,6 +27,12 @@
27 }, 27 },
28 }, 28 },
29 { 29 {
  30 + field: ComponentConfigFieldEnum.FONT_SIZE,
  31 + label: '文本字体大小',
  32 + component: 'InputNumber',
  33 + defaultValue: option.fontSize,
  34 + },
  35 + {
30 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, 36 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
31 label: '显示设备名称', 37 label: '显示设备名称',
32 component: 'Checkbox', 38 component: 'Checkbox',
@@ -52,10 +52,11 @@ @@ -52,10 +52,11 @@
52 fontColor: persetFontColor, 52 fontColor: persetFontColor,
53 icon: persetIcon, 53 icon: persetIcon,
54 iconColor: persetIconColor, 54 iconColor: persetIconColor,
  55 + fontSize: persetFontSize,
55 } = persetOption || {}; 56 } = persetOption || {};
56 return { 57 return {
57 dataSource: dataSource.map((item) => { 58 dataSource: dataSource.map((item) => {
58 - const { fontColor, icon, iconColor, unit, showDeviceName } = item.componentInfo; 59 + const { fontColor, icon, iconColor, unit, showDeviceName, fontSize } = item.componentInfo;
59 const { 60 const {
60 attribute, 61 attribute,
61 attributeRename, 62 attributeRename,
@@ -84,6 +85,7 @@ @@ -84,6 +85,7 @@
84 codeType, 85 codeType,
85 deviceCode, 86 deviceCode,
86 customCommand, 87 customCommand,
  88 + fontSize: fontSize || persetFontSize || 14,
87 }; 89 };
88 }), 90 }),
89 }; 91 };
@@ -150,15 +152,11 @@ @@ -150,15 +152,11 @@
150 :style="{ color: item.iconColor }" 152 :style="{ color: item.iconColor }"
151 /> 153 />
152 154
153 - <div  
154 - class="text-gray-500 truncate ml-6"  
155 - :style="{ fontSize: getRatio ? '18px' : getRatio * 18 + 'px' }"  
156 - >{{  
157 - `${item.deviceName} - ${  
158 - item.commandType ? CommandTypeEnumLIst[item.commandType].name : item.attributeName  
159 - }`  
160 - }}</div  
161 - > 155 + <div class="text-gray-500 truncate ml-6" :style="{ fontSize: item.fontSize + 'px' }">{{
  156 + `${item.deviceName} - ${
  157 + item.commandType ? CommandTypeEnumLIst[item.commandType].name : item.attributeName
  158 + }`
  159 + }}</div>
162 </div> 160 </div>
163 161
164 <Switch 162 <Switch
@@ -13,6 +13,8 @@ export const option: PublicPresetOptions = { @@ -13,6 +13,8 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
14 [ComponentConfigFieldEnum.UNIT]: 'm', 14 [ComponentConfigFieldEnum.UNIT]: 'm',
15 [ComponentConfigFieldEnum.MAX_NUMBER]: 100, 15 [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  16 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
  17 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
16 [ComponentConfigFieldEnum.FONT_COLOR]: '#fff', 18 [ComponentConfigFieldEnum.FONT_COLOR]: '#fff',
17 [ComponentConfigFieldEnum.SHOW_TIME]: false, 19 [ComponentConfigFieldEnum.SHOW_TIME]: false,
18 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { 20 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 schemas: [ 10 schemas: [
11 { 11 {
12 field: ComponentConfigFieldEnum.FONT_COLOR, 12 field: ComponentConfigFieldEnum.FONT_COLOR,
13 - label: '字体颜色', 13 + label: '数值字体颜色',
14 component: 'ColorPicker', 14 component: 'ColorPicker',
15 changeEvent: 'update:value', 15 changeEvent: 'update:value',
16 defaultValue: option.fontColor, 16 defaultValue: option.fontColor,
@@ -50,6 +50,24 @@ @@ -50,6 +50,24 @@
50 defaultValue: option.unit, 50 defaultValue: option.unit,
51 }, 51 },
52 { 52 {
  53 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  54 + label: '数值字体大小',
  55 + component: 'InputNumber',
  56 + defaultValue: 14,
  57 + componentProps: {
  58 + min: 0,
  59 + },
  60 + },
  61 + {
  62 + field: ComponentConfigFieldEnum.FONT_SIZE,
  63 + label: '文本字体大小',
  64 + component: 'InputNumber',
  65 + defaultValue: 14,
  66 + componentProps: {
  67 + min: 0,
  68 + },
  69 + },
  70 + {
53 field: ComponentConfigFieldEnum.MAX_NUMBER, 71 field: ComponentConfigFieldEnum.MAX_NUMBER,
54 label: '最大值', 72 label: '最大值',
55 component: 'InputNumber', 73 component: 'InputNumber',
@@ -20,7 +20,8 @@ @@ -20,7 +20,8 @@
20 const getDesign = computed(() => { 20 const getDesign = computed(() => {
21 const { option, persetOption } = props.config; 21 const { option, persetOption } = props.config;
22 const { componentInfo, attribute, attributeName, attributeRename } = option; 22 const { componentInfo, attribute, attributeName, attributeRename } = option;
23 - const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {}; 23 + const { flowmeterConfig, unit, fontColor, showTime, maxNumber, valueSize, fontSize } =
  24 + componentInfo || {};
24 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; 25 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
25 const { 26 const {
26 flowmeterConfig: presetFlowmeterConfig, 27 flowmeterConfig: presetFlowmeterConfig,
@@ -28,6 +29,8 @@ @@ -28,6 +29,8 @@
28 fontColor: presetFontColor, 29 fontColor: presetFontColor,
29 showTime: persetShowTime, 30 showTime: persetShowTime,
30 maxNumber: persetMaxNumber, 31 maxNumber: persetMaxNumber,
  32 + valueSize: persetValueSize,
  33 + fontSize: persetFontSize,
31 } = persetOption || {}; 34 } = persetOption || {};
32 const { 35 const {
33 backgroundColor: presetBackgroundColor, 36 backgroundColor: presetBackgroundColor,
@@ -45,6 +48,8 @@ @@ -45,6 +48,8 @@
45 attribute: attributeRename || attributeName || attribute, 48 attribute: attributeRename || attributeName || attribute,
46 showTime: showTime ?? persetShowTime, 49 showTime: showTime ?? persetShowTime,
47 maxNumber: maxNumber ?? persetMaxNumber, 50 maxNumber: maxNumber ?? persetMaxNumber,
  51 + valueSize: valueSize || persetValueSize || 20,
  52 + fontSize: fontSize || persetFontSize || 14,
48 }; 53 };
49 }); 54 });
50 55
@@ -129,14 +134,17 @@ @@ -129,14 +134,17 @@
129 134
130 <div 135 <div
131 class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center" 136 class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
132 - :style="{ color: getDesign.fontColor }" 137 + :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
133 > 138 >
134 <div>{{ currentValue }}</div> 139 <div>{{ currentValue }}</div>
135 <div class="ml-1">{{ getDesign.unit }}</div> 140 <div class="ml-1">{{ getDesign.unit }}</div>
136 </div> 141 </div>
137 - <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{  
138 - getDesign.attribute || '属性'  
139 - }}</div> 142 + <div
  143 + class="text-gray-500 text-sm truncate"
  144 + style="flex: 0 0 20px"
  145 + :style="{ fontSize: getDesign.fontSize + 'px' }"
  146 + >{{ getDesign.attribute || '属性' }}</div
  147 + >
140 <UpdateTime v-show="getDesign.showTime" :time="time" /> 148 <UpdateTime v-show="getDesign.showTime" :time="time" />
141 </main> 149 </main>
142 </template> 150 </template>
@@ -14,6 +14,8 @@ export const option: PublicPresetOptions = { @@ -14,6 +14,8 @@ export const option: PublicPresetOptions = {
14 [ComponentConfigFieldEnum.SHOW_TIME]: false, 14 [ComponentConfigFieldEnum.SHOW_TIME]: false,
15 [ComponentConfigFieldEnum.UNIT]: 'm', 15 [ComponentConfigFieldEnum.UNIT]: 'm',
16 [ComponentConfigFieldEnum.MAX_NUMBER]: 100, 16 [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  17 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
  18 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
17 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: { 19 [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
18 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb', 20 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
19 [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2', 21 [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2',
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 schemas: [ 10 schemas: [
11 { 11 {
12 field: ComponentConfigFieldEnum.FONT_COLOR, 12 field: ComponentConfigFieldEnum.FONT_COLOR,
13 - label: '字体颜色', 13 + label: '数值字体颜色',
14 component: 'ColorPicker', 14 component: 'ColorPicker',
15 changeEvent: 'update:value', 15 changeEvent: 'update:value',
16 defaultValue: option.fontColor, 16 defaultValue: option.fontColor,
@@ -56,6 +56,24 @@ @@ -56,6 +56,24 @@
56 // defaultValue: 0, 56 // defaultValue: 0,
57 // }, 57 // },
58 { 58 {
  59 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  60 + label: '数值字体大小',
  61 + component: 'InputNumber',
  62 + defaultValue: 14,
  63 + componentProps: {
  64 + min: 0,
  65 + },
  66 + },
  67 + {
  68 + field: ComponentConfigFieldEnum.FONT_SIZE,
  69 + label: '文本字体大小',
  70 + component: 'InputNumber',
  71 + defaultValue: 14,
  72 + componentProps: {
  73 + min: 0,
  74 + },
  75 + },
  76 + {
59 field: ComponentConfigFieldEnum.MAX_NUMBER, 77 field: ComponentConfigFieldEnum.MAX_NUMBER,
60 label: '最大值', 78 label: '最大值',
61 component: 'InputNumber', 79 component: 'InputNumber',
@@ -20,7 +20,8 @@ @@ -20,7 +20,8 @@
20 const getDesign = computed(() => { 20 const getDesign = computed(() => {
21 const { option, persetOption } = props.config; 21 const { option, persetOption } = props.config;
22 const { componentInfo, attribute, attributeName, attributeRename } = option; 22 const { componentInfo, attribute, attributeName, attributeRename } = option;
23 - const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {}; 23 + const { flowmeterConfig, unit, fontColor, showTime, maxNumber, fontSize, valueSize } =
  24 + componentInfo || {};
24 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {}; 25 const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
25 const { 26 const {
26 flowmeterConfig: presetFlowmeterConfig, 27 flowmeterConfig: presetFlowmeterConfig,
@@ -28,6 +29,8 @@ @@ -28,6 +29,8 @@
28 fontColor: presetFontColor, 29 fontColor: presetFontColor,
29 showTime: persetShowTime, 30 showTime: persetShowTime,
30 maxNumber: persetMaxNumber, 31 maxNumber: persetMaxNumber,
  32 + fontSize: persetFontSize,
  33 + valueSize: persetValueSize,
31 } = persetOption || {}; 34 } = persetOption || {};
32 const { 35 const {
33 backgroundColor: presetBackgroundColor, 36 backgroundColor: presetBackgroundColor,
@@ -45,6 +48,8 @@ @@ -45,6 +48,8 @@
45 attribute: attributeRename || attributeName || attribute, 48 attribute: attributeRename || attributeName || attribute,
46 showTime: showTime ?? persetShowTime, 49 showTime: showTime ?? persetShowTime,
47 maxNumber: maxNumber ?? persetMaxNumber, 50 maxNumber: maxNumber ?? persetMaxNumber,
  51 + fontSize: fontSize || persetFontSize || 14,
  52 + valueSize: valueSize || persetValueSize || 20,
48 }; 53 };
49 }); 54 });
50 55
@@ -122,14 +127,17 @@ @@ -122,14 +127,17 @@
122 </svg> 127 </svg>
123 <div 128 <div
124 class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center" 129 class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
125 - :style="{ color: getDesign.fontColor }" 130 + :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
126 > 131 >
127 <div>{{ currentValue }}</div> 132 <div>{{ currentValue }}</div>
128 <div class="ml-1">{{ getDesign.unit }}</div> 133 <div class="ml-1">{{ getDesign.unit }}</div>
129 </div> 134 </div>
130 - <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{  
131 - getDesign.attribute || '属性'  
132 - }}</div> 135 + <div
  136 + class="text-gray-500"
  137 + style="flex: 0 0 20px"
  138 + :style="{ fontSize: getDesign.fontSize + 'px', height: getDesign.fontSize + 'px' }"
  139 + >{{ getDesign.attribute || '属性' }}</div
  140 + >
133 <UpdateTime v-show="getDesign.showTime" :time="time" /> 141 <UpdateTime v-show="getDesign.showTime" :time="time" />
134 </main> 142 </main>
135 </template> 143 </template>
@@ -27,6 +27,8 @@ export const option: PublicPresetOptions = { @@ -27,6 +27,8 @@ export const option: PublicPresetOptions = {
27 [ComponentConfigFieldEnum.UNIT]: '℃', 27 [ComponentConfigFieldEnum.UNIT]: '℃',
28 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 28 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
29 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5', 29 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
  30 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
  31 + [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
30 [ComponentConfigFieldEnum.GRADIENT_INFO]: [ 32 [ComponentConfigFieldEnum.GRADIENT_INFO]: [
31 { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST }, 33 { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST },
32 { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND }, 34 { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND },
@@ -43,26 +43,6 @@ @@ -43,26 +43,6 @@
43 changeEvent: 'update:value', 43 changeEvent: 'update:value',
44 defaultValue: GradientColor.SECOND, 44 defaultValue: GradientColor.SECOND,
45 }, 45 },
46 - // {  
47 - // field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,  
48 - // label: '仪表盘宽度',  
49 - // component: 'Slider',  
50 - // changeEvent: 'update:value',  
51 - // defaultValue: option.pointerColor,  
52 - // },  
53 - {  
54 - field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,  
55 - label: '显示设备名称',  
56 - component: 'Checkbox',  
57 - defaultValue: option.showDeviceName,  
58 - },  
59 - {  
60 - field: ComponentConfigFieldEnum.SHOW_TIME,  
61 - label: '显示时间',  
62 - component: 'Checkbox',  
63 - defaultValue: option.showTime,  
64 - },  
65 -  
66 { 46 {
67 field: ComponentConfigFieldEnum.UNIT, 47 field: ComponentConfigFieldEnum.UNIT,
68 label: '数值单位', 48 label: '数值单位',
@@ -70,6 +50,24 @@ @@ -70,6 +50,24 @@
70 defaultValue: option.unit, 50 defaultValue: option.unit,
71 }, 51 },
72 { 52 {
  53 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  54 + label: '数值字体大小',
  55 + component: 'InputNumber',
  56 + defaultValue: 14,
  57 + componentProps: {
  58 + min: 0,
  59 + },
  60 + },
  61 + {
  62 + field: ComponentConfigFieldEnum.FONT_SIZE,
  63 + label: '文本字体大小',
  64 + component: 'InputNumber',
  65 + defaultValue: 14,
  66 + componentProps: {
  67 + min: 0,
  68 + },
  69 + },
  70 + {
73 field: ComponentConfigFieldEnum.MAX_NUMBER, 71 field: ComponentConfigFieldEnum.MAX_NUMBER,
74 label: '最大值', 72 label: '最大值',
75 component: 'InputNumber', 73 component: 'InputNumber',
@@ -90,6 +88,18 @@ @@ -90,6 +88,18 @@
90 }; 88 };
91 }, 89 },
92 }, 90 },
  91 + {
  92 + field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
  93 + label: '显示设备名称',
  94 + component: 'Checkbox',
  95 + defaultValue: option.showDeviceName,
  96 + },
  97 + {
  98 + field: ComponentConfigFieldEnum.SHOW_TIME,
  99 + label: '显示时间',
  100 + component: 'Checkbox',
  101 + defaultValue: option.showTime,
  102 + },
93 ], 103 ],
94 showActionButtonGroup: false, 104 showActionButtonGroup: false,
95 labelWidth: 120, 105 labelWidth: 120,
@@ -120,13 +130,24 @@ @@ -120,13 +130,24 @@
120 showTime: item[ComponentConfigFieldEnum.SHOW_TIME], 130 showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
121 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR], 131 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
122 maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER], 132 maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
  133 + fontSize: item[ComponentConfigFieldEnum.FONT_SIZE],
  134 + valueSize: item[ComponentConfigFieldEnum.VALUE_SIZE],
123 } as ComponentInfo; 135 } as ComponentInfo;
124 }; 136 };
125 137
126 const setFormValues = (data: Recordable) => { 138 const setFormValues = (data: Recordable) => {
127 // return setFieldsValue(data); 139 // return setFieldsValue(data);
128 - const { gradientInfo, unit, fontColor, showDeviceName, pointerColor, showTime, maxNumber } =  
129 - data; 140 + const {
  141 + gradientInfo,
  142 + unit,
  143 + fontColor,
  144 + showDeviceName,
  145 + pointerColor,
  146 + showTime,
  147 + maxNumber,
  148 + fontSize,
  149 + valueSize,
  150 + } = data;
130 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 151 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
131 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 152 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
132 153
@@ -141,6 +162,8 @@ @@ -141,6 +162,8 @@
141 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color, 162 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
142 [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor, 163 [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor,
143 [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber, 164 [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
  165 + [ComponentConfigFieldEnum.FONT_SIZE]: fontSize,
  166 + [ComponentConfigFieldEnum.VALUE_SIZE]: valueSize,
144 }; 167 };
145 return setFieldsValue(value); 168 return setFieldsValue(value);
146 }; 169 };
@@ -32,6 +32,8 @@ @@ -32,6 +32,8 @@
32 gradientInfo: presetGradientInfo, 32 gradientInfo: presetGradientInfo,
33 showTime: persetShowTime, 33 showTime: persetShowTime,
34 maxNumber: persetMaxNumber, 34 maxNumber: persetMaxNumber,
  35 + fontSize: persetFontSize,
  36 + valueSize: persetValueSize,
35 } = persetOption || {}; 37 } = persetOption || {};
36 const { 38 const {
37 unit, 39 unit,
@@ -41,6 +43,8 @@ @@ -41,6 +43,8 @@
41 gradientInfo, 43 gradientInfo,
42 showTime, 44 showTime,
43 maxNumber, 45 maxNumber,
  46 + fontSize,
  47 + valueSize,
44 } = componentInfo || {}; 48 } = componentInfo || {};
45 return { 49 return {
46 unit: unit ?? presetUnit, 50 unit: unit ?? presetUnit,
@@ -51,6 +55,8 @@ @@ -51,6 +55,8 @@
51 gradientInfo: gradientInfo ?? presetGradientInfo, 55 gradientInfo: gradientInfo ?? presetGradientInfo,
52 showTime: showTime ?? persetShowTime, 56 showTime: showTime ?? persetShowTime,
53 maxNumber: maxNumber || persetMaxNumber, 57 maxNumber: maxNumber || persetMaxNumber,
  58 + fontSize: fontSize || persetFontSize || 14,
  59 + valueSize: valueSize || persetValueSize || 14,
54 }; 60 };
55 }); 61 });
56 62
@@ -66,7 +72,7 @@ @@ -66,7 +72,7 @@
66 }; 72 };
67 73
68 const options = (): EChartsOption => { 74 const options = (): EChartsOption => {
69 - const { unit, fontColor, pointerColor, gradientInfo, maxNumber } = unref(getDesign); 75 + const { unit, fontColor, pointerColor, gradientInfo, maxNumber, valueSize } = unref(getDesign);
70 76
71 const instrumentPanelColor = getStageColor(gradientInfo); 77 const instrumentPanelColor = getStageColor(gradientInfo);
72 // getStageColor(gradientInfo); 78 // getStageColor(gradientInfo);
@@ -108,7 +114,7 @@ @@ -108,7 +114,7 @@
108 //指针 114 //指针
109 show: true, 115 show: true,
110 icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', 116 icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
111 - width: 4 * unref(getRatio) ? 4 * unref(getRatio) : 4, 117 + width: unref(getRatio) ? 4 * unref(getRatio) : 4,
112 length: '100%', 118 length: '100%',
113 itemStyle: { 119 itemStyle: {
114 color: pointerColor, 120 color: pointerColor,
@@ -128,7 +134,7 @@ @@ -128,7 +134,7 @@
128 }, 134 },
129 detail: { 135 detail: {
130 valueAnimation: true, 136 valueAnimation: true,
131 - fontSize: 14 * unref(getRatio), 137 + fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
132 fontWeight: 'bolder', 138 fontWeight: 'bolder',
133 formatter: `{value} ${unit ?? ''}`, 139 formatter: `{value} ${unit ?? ''}`,
134 color: fontColor || 'inherit', 140 color: fontColor || 'inherit',
@@ -199,7 +205,7 @@ @@ -199,7 +205,7 @@
199 width: 4 * unref(getRatio), 205 width: 4 * unref(getRatio),
200 }, 206 },
201 detail: { 207 detail: {
202 - fontSize: 14 * unref(getRatio), 208 + fontSize: unref(getDesign).valueSize * unref(getRatio),
203 }, 209 },
204 }, 210 },
205 ], 211 ],
@@ -219,9 +225,11 @@ @@ -219,9 +225,11 @@
219 <div class="w-full h-full flex flex-1 flex-col justify-center items-center"> 225 <div class="w-full h-full flex flex-1 flex-col justify-center items-center">
220 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center"> 226 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
221 </div> 227 </div>
222 - <div class="text-gray-500 text-xs text-center truncate">{{  
223 - getDesign.attribute || '湿度'  
224 - }}</div> 228 + <div
  229 + class="text-gray-500 text-center truncate"
  230 + :style="{ fontSize: getDesign.fontSize + 'px' }"
  231 + >{{ getDesign.attribute || '湿度' }}</div
  232 + >
225 </div> 233 </div>
226 <UpdateTime v-if="getDesign.showTime" :time="time" /> 234 <UpdateTime v-if="getDesign.showTime" :time="time" />
227 </main> 235 </main>
@@ -26,6 +26,8 @@ export const option: PublicPresetOptions = { @@ -26,6 +26,8 @@ export const option: PublicPresetOptions = {
26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
27 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5', 27 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
28 [ComponentConfigFieldEnum.MAX_NUMBER]: 100, 28 [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  29 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
  30 + [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
29 [ComponentConfigFieldEnum.GRADIENT_INFO]: [ 31 [ComponentConfigFieldEnum.GRADIENT_INFO]: [
30 { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST }, 32 { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST },
31 { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND }, 33 { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND },
@@ -43,24 +43,6 @@ @@ -43,24 +43,6 @@
43 defaultValue: GradientColor.SECOND, 43 defaultValue: GradientColor.SECOND,
44 }, 44 },
45 { 45 {
46 - field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,  
47 - label: '显示进度条圆形',  
48 - component: 'Checkbox',  
49 - defaultValue: option.progressBarCircle,  
50 - },  
51 - {  
52 - field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,  
53 - label: '显示设备名称',  
54 - component: 'Checkbox',  
55 - defaultValue: option.showDeviceName,  
56 - },  
57 - {  
58 - field: ComponentConfigFieldEnum.SHOW_TIME,  
59 - label: '显示时间',  
60 - component: 'Checkbox',  
61 - defaultValue: option.showTime,  
62 - },  
63 - {  
64 field: ComponentConfigFieldEnum.MAX_NUMBER, 46 field: ComponentConfigFieldEnum.MAX_NUMBER,
65 label: '最大值', 47 label: '最大值',
66 component: 'InputNumber', 48 component: 'InputNumber',
@@ -81,6 +63,42 @@ @@ -81,6 +63,42 @@
81 }; 63 };
82 }, 64 },
83 }, 65 },
  66 + {
  67 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  68 + label: '数值字体大小',
  69 + component: 'InputNumber',
  70 + defaultValue: 14,
  71 + componentProps: {
  72 + min: 0,
  73 + },
  74 + },
  75 + {
  76 + field: ComponentConfigFieldEnum.FONT_SIZE,
  77 + label: '文本字体大小',
  78 + component: 'InputNumber',
  79 + defaultValue: 14,
  80 + componentProps: {
  81 + min: 0,
  82 + },
  83 + },
  84 + {
  85 + field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
  86 + label: '显示进度条圆形',
  87 + component: 'Checkbox',
  88 + defaultValue: option.progressBarCircle,
  89 + },
  90 + {
  91 + field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
  92 + label: '显示设备名称',
  93 + component: 'Checkbox',
  94 + defaultValue: option.showDeviceName,
  95 + },
  96 + {
  97 + field: ComponentConfigFieldEnum.SHOW_TIME,
  98 + label: '显示时间',
  99 + component: 'Checkbox',
  100 + defaultValue: option.showTime,
  101 + },
84 ], 102 ],
85 showActionButtonGroup: false, 103 showActionButtonGroup: false,
86 labelWidth: 120, 104 labelWidth: 120,
@@ -111,6 +129,8 @@ @@ -111,6 +129,8 @@
111 showTime: item[ComponentConfigFieldEnum.SHOW_TIME], 129 showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
112 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE], 130 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE],
113 maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER], 131 maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
  132 + valueSize: item[ComponentConfigFieldEnum.VALUE_SIZE],
  133 + fontSize: item[ComponentConfigFieldEnum.FONT_SIZE],
114 } as ComponentInfo; 134 } as ComponentInfo;
115 }; 135 };
116 136
@@ -124,6 +144,8 @@ @@ -124,6 +144,8 @@
124 progressBarCircle, 144 progressBarCircle,
125 showTime, 145 showTime,
126 maxNumber, 146 maxNumber,
  147 + valueSize,
  148 + fontSize,
127 } = data; 149 } = data;
128 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 150 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
129 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 151 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
@@ -139,6 +161,8 @@ @@ -139,6 +161,8 @@
139 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color, 161 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
140 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle, 162 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle,
141 [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber, 163 [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
  164 + [ComponentConfigFieldEnum.VALUE_SIZE]: valueSize,
  165 + [ComponentConfigFieldEnum.FONT_SIZE]: fontSize,
142 }; 166 };
143 return setFieldsValue(value); 167 return setFieldsValue(value);
144 }; 168 };
@@ -33,6 +33,8 @@ @@ -33,6 +33,8 @@
33 gradientInfo: presetGradientInfo, 33 gradientInfo: presetGradientInfo,
34 showTime: persetShowTime, 34 showTime: persetShowTime,
35 maxNumber: persetMaxNumber, 35 maxNumber: persetMaxNumber,
  36 + fontSize: persetFontSize,
  37 + valueSize: persetValueSize,
36 } = persetOption || {}; 38 } = persetOption || {};
37 const { 39 const {
38 unit, 40 unit,
@@ -43,6 +45,8 @@ @@ -43,6 +45,8 @@
43 instrumentPanelColor, 45 instrumentPanelColor,
44 showTime, 46 showTime,
45 maxNumber, 47 maxNumber,
  48 + fontSize,
  49 + valueSize,
46 } = componentInfo || {}; 50 } = componentInfo || {};
47 return { 51 return {
48 unit: unit ?? presetUnit, 52 unit: unit ?? presetUnit,
@@ -54,6 +58,8 @@ @@ -54,6 +58,8 @@
54 gradientInfo: gradientInfo ?? presetGradientInfo, 58 gradientInfo: gradientInfo ?? presetGradientInfo,
55 showTime: showTime ?? persetShowTime, 59 showTime: showTime ?? persetShowTime,
56 maxNumber: maxNumber || persetMaxNumber, 60 maxNumber: maxNumber || persetMaxNumber,
  61 + fontSize: fontSize || persetFontSize || 14,
  62 + valueSize: valueSize || persetValueSize || 14,
57 }; 63 };
58 }); 64 });
59 65
@@ -71,7 +77,8 @@ @@ -71,7 +77,8 @@
71 const titleValue = ref<number>(20); 77 const titleValue = ref<number>(20);
72 78
73 const options = (): EChartsOption => { 79 const options = (): EChartsOption => {
74 - const { unit, fontColor, progressBarCircle, gradientInfo, maxNumber } = unref(getDesign); 80 + const { unit, fontColor, progressBarCircle, gradientInfo, maxNumber, valueSize } =
  81 + unref(getDesign);
75 const instrumentPanelColor = getStageColor(gradientInfo); 82 const instrumentPanelColor = getStageColor(gradientInfo);
76 return { 83 return {
77 title: { 84 title: {
@@ -79,7 +86,7 @@ @@ -79,7 +86,7 @@
79 top: 'center', 86 top: 'center',
80 left: 'center', 87 left: 'center',
81 textStyle: { 88 textStyle: {
82 - fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14, 89 + fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
83 color: fontColor || '#65d3ff', 90 color: fontColor || '#65d3ff',
84 valueAnimation: true, 91 valueAnimation: true,
85 }, 92 },
@@ -210,7 +217,7 @@ @@ -210,7 +217,7 @@
210 ], 217 ],
211 title: { 218 title: {
212 textStyle: { 219 textStyle: {
213 - fontSize: 14 * unref(getRatio), 220 + fontSize: unref(getDesign).valueSize * unref(getRatio),
214 }, 221 },
215 }, 222 },
216 }); 223 });
@@ -229,9 +236,11 @@ @@ -229,9 +236,11 @@
229 <div class="flex w-full h-full flex-col justify-center items-center flex-1"> 236 <div class="flex w-full h-full flex-col justify-center items-center flex-1">
230 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex-col justify-center items-center flex"> 237 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex-col justify-center items-center flex">
231 </div> 238 </div>
232 - <div class="text-gray-500 text-xs text-center truncate">{{  
233 - getDesign.attribute || '湿度'  
234 - }}</div> 239 + <div
  240 + class="text-gray-500 text-center truncate"
  241 + :style="{ fontSize: getDesign.fontSize + 'px' }"
  242 + >{{ getDesign.attribute || '湿度' }}</div
  243 + >
235 </div> 244 </div>
236 <UpdateTime v-if="getDesign.showTime" :time="time" /> 245 <UpdateTime v-if="getDesign.showTime" :time="time" />
237 </main> 246 </main>
@@ -23,6 +23,8 @@ export const option: PublicPresetOptions = { @@ -23,6 +23,8 @@ export const option: PublicPresetOptions = {
23 [ComponentConfigFieldEnum.SHOW_TIME]: false, 23 [ComponentConfigFieldEnum.SHOW_TIME]: false,
24 [ComponentConfigFieldEnum.MAX_NUMBER]: 100, 24 [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
25 [ComponentConfigFieldEnum.UNIT]: 'kw', 25 [ComponentConfigFieldEnum.UNIT]: 'kw',
  26 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
  27 + [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
26 }; 28 };
27 29
28 export default class Config extends PublicConfigClass implements CreateComponentType { 30 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -22,18 +22,6 @@ @@ -22,18 +22,6 @@
22 defaultValue: option.unit, 22 defaultValue: option.unit,
23 }, 23 },
24 { 24 {
25 - field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,  
26 - label: '显示设备名称',  
27 - component: 'Checkbox',  
28 - defaultValue: option.showDeviceName,  
29 - },  
30 - {  
31 - field: ComponentConfigFieldEnum.SHOW_TIME,  
32 - label: '显示时间',  
33 - component: 'Checkbox',  
34 - defaultValue: option.showTime,  
35 - },  
36 - {  
37 field: ComponentConfigFieldEnum.MAX_NUMBER, 25 field: ComponentConfigFieldEnum.MAX_NUMBER,
38 label: '最大值', 26 label: '最大值',
39 component: 'InputNumber', 27 component: 'InputNumber',
@@ -54,6 +42,36 @@ @@ -54,6 +42,36 @@
54 }; 42 };
55 }, 43 },
56 }, 44 },
  45 + {
  46 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  47 + label: '数值字体大小',
  48 + component: 'InputNumber',
  49 + defaultValue: 14,
  50 + componentProps: {
  51 + min: 0,
  52 + },
  53 + },
  54 + {
  55 + field: ComponentConfigFieldEnum.FONT_SIZE,
  56 + label: '文本字体大小',
  57 + component: 'InputNumber',
  58 + defaultValue: 14,
  59 + componentProps: {
  60 + min: 0,
  61 + },
  62 + },
  63 + {
  64 + field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
  65 + label: '显示设备名称',
  66 + component: 'Checkbox',
  67 + defaultValue: option.showDeviceName,
  68 + },
  69 + {
  70 + field: ComponentConfigFieldEnum.SHOW_TIME,
  71 + label: '显示时间',
  72 + component: 'Checkbox',
  73 + defaultValue: option.showTime,
  74 + },
57 ], 75 ],
58 showActionButtonGroup: false, 76 showActionButtonGroup: false,
59 labelWidth: 120, 77 labelWidth: 120,
@@ -71,12 +89,14 @@ @@ -71,12 +89,14 @@
71 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 89 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
72 showTime: item[ComponentConfigFieldEnum.SHOW_TIME], 90 showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
73 maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER], 91 maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
  92 + fontSize: item[ComponentConfigFieldEnum.FONT_SIZE],
  93 + valueSize: item[ComponentConfigFieldEnum.VALUE_SIZE],
74 } as ComponentInfo; 94 } as ComponentInfo;
75 }; 95 };
76 96
77 const setFormValues = (data: Recordable) => { 97 const setFormValues = (data: Recordable) => {
78 // return setFieldsValue(data); 98 // return setFieldsValue(data);
79 - const { unit, fontColor, showDeviceName, showTime, maxNumber } = data; 99 + const { unit, fontColor, showDeviceName, showTime, maxNumber, fontSize, valueSize } = data;
80 100
81 const value = { 101 const value = {
82 [ComponentConfigFieldEnum.UNIT]: unit, 102 [ComponentConfigFieldEnum.UNIT]: unit,
@@ -84,6 +104,8 @@ @@ -84,6 +104,8 @@
84 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 104 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
85 [ComponentConfigFieldEnum.SHOW_TIME]: showTime, 105 [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
86 [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber, 106 [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
  107 + [ComponentConfigFieldEnum.FONT_SIZE]: fontSize,
  108 + [ComponentConfigFieldEnum.VALUE_SIZE]: valueSize,
87 }; 109 };
88 return setFieldsValue(value); 110 return setFieldsValue(value);
89 }; 111 };
@@ -31,6 +31,8 @@ @@ -31,6 +31,8 @@
31 gradientInfo: presetGradientInfo, 31 gradientInfo: presetGradientInfo,
32 showTime: persetShowTime, 32 showTime: persetShowTime,
33 maxNumber: persetMaxNumber, 33 maxNumber: persetMaxNumber,
  34 + fontSize: persetFontSize,
  35 + valueSize: persetValueSize,
34 } = persetOption || {}; 36 } = persetOption || {};
35 const { 37 const {
36 unit, 38 unit,
@@ -40,6 +42,8 @@ @@ -40,6 +42,8 @@
40 gradientInfo, 42 gradientInfo,
41 showTime, 43 showTime,
42 maxNumber, 44 maxNumber,
  45 + fontSize,
  46 + valueSize,
43 } = componentInfo || {}; 47 } = componentInfo || {};
44 return { 48 return {
45 unit: unit ?? presetUnit, 49 unit: unit ?? presetUnit,
@@ -50,11 +54,13 @@ @@ -50,11 +54,13 @@
50 gradientInfo: gradientInfo ?? presetGradientInfo, 54 gradientInfo: gradientInfo ?? presetGradientInfo,
51 showTime: showTime ?? persetShowTime, 55 showTime: showTime ?? persetShowTime,
52 maxNumber: maxNumber || persetMaxNumber, 56 maxNumber: maxNumber || persetMaxNumber,
  57 + fontSize: fontSize || persetFontSize || 14,
  58 + valueSize: valueSize || persetValueSize || 14,
53 }; 59 };
54 }); 60 });
55 61
56 const options = (): EChartsOption => { 62 const options = (): EChartsOption => {
57 - const { unit, fontColor, pointerColor, maxNumber } = unref(getDesign); 63 + const { unit, fontColor, pointerColor, maxNumber, valueSize } = unref(getDesign);
58 64
59 // getStageColor(gradientInfo); 65 // getStageColor(gradientInfo);
60 return { 66 return {
@@ -110,7 +116,7 @@ @@ -110,7 +116,7 @@
110 }, 116 },
111 detail: { 117 detail: {
112 valueAnimation: true, 118 valueAnimation: true,
113 - fontSize: unref(getRatio) ? 16 * unref(getRatio) : 16, 119 + fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
114 offsetCenter: [0, '70%'], 120 offsetCenter: [0, '70%'],
115 formatter: `{value} ${unit ?? ''}`, 121 formatter: `{value} ${unit ?? ''}`,
116 color: fontColor || 'inherit', 122 color: fontColor || 'inherit',
@@ -191,7 +197,7 @@ @@ -191,7 +197,7 @@
191 }, 197 },
192 }, 198 },
193 detail: { 199 detail: {
194 - fontSize: 16 * unref(getRatio), 200 + fontSize: unref(getDesign).valueSize * unref(getRatio),
195 }, 201 },
196 }, 202 },
197 ], 203 ],
@@ -211,7 +217,7 @@ @@ -211,7 +217,7 @@
211 <div class="flex flex-1 flex-col justify-center items-center w-full h-full"> 217 <div class="flex flex-1 flex-col justify-center items-center w-full h-full">
212 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center"> 218 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
213 </div> 219 </div>
214 - <div class="text-gray-500 text-xs text-center truncate">{{ 220 + <div class="text-gray-500 text-center" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
215 getDesign.attribute || '速度' 221 getDesign.attribute || '速度'
216 }}</div> 222 }}</div>
217 </div> 223 </div>
@@ -15,6 +15,8 @@ export const option: PublicPresetOptions = { @@ -15,6 +15,8 @@ export const option: PublicPresetOptions = {
15 [ComponentConfigFieldEnum.SHOW_TIME]: false, 15 [ComponentConfigFieldEnum.SHOW_TIME]: false,
16 [ComponentConfigFieldEnum.MAX_NUMBER]: 100, 16 [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
17 [ComponentConfigFieldEnum.UNIT]: '℃', 17 [ComponentConfigFieldEnum.UNIT]: '℃',
  18 + [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
  19 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
18 }; 20 };
19 21
20 export default class Config extends PublicConfigClass implements CreateComponentType { 22 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -53,6 +53,24 @@ @@ -53,6 +53,24 @@
53 }; 53 };
54 }, 54 },
55 }, 55 },
  56 + {
  57 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  58 + label: '数值字体大小',
  59 + component: 'InputNumber',
  60 + defaultValue: 14,
  61 + componentProps: {
  62 + min: 0,
  63 + },
  64 + },
  65 + {
  66 + field: ComponentConfigFieldEnum.FONT_SIZE,
  67 + label: '文本字体大小',
  68 + component: 'InputNumber',
  69 + defaultValue: 14,
  70 + componentProps: {
  71 + min: 0,
  72 + },
  73 + },
56 ], 74 ],
57 showActionButtonGroup: false, 75 showActionButtonGroup: false,
58 labelWidth: 120, 76 labelWidth: 120,
@@ -32,19 +32,23 @@ @@ -32,19 +32,23 @@
32 unit: presetUnit, 32 unit: presetUnit,
33 showTime: persetShowTime, 33 showTime: persetShowTime,
34 maxNumber: persetMaxNumber, 34 maxNumber: persetMaxNumber,
  35 + valueSize: persetValueSize,
  36 + fontSize: persetFontSize,
35 } = persetOption || {}; 37 } = persetOption || {};
36 - const { unit, fontColor, showTime, maxNumber } = componentInfo || {}; 38 + const { unit, fontColor, showTime, maxNumber, valueSize, fontSize } = componentInfo || {};
37 return { 39 return {
38 unit: unit ?? presetUnit, 40 unit: unit ?? presetUnit,
39 fontColor: fontColor ?? presetFontColor, 41 fontColor: fontColor ?? presetFontColor,
40 attribute: attributeRename || attributeName || attribute, 42 attribute: attributeRename || attributeName || attribute,
41 showTime: persetShowTime || showTime, 43 showTime: persetShowTime || showTime,
42 maxNumber: maxNumber || persetMaxNumber, 44 maxNumber: maxNumber || persetMaxNumber,
  45 + valueSize: valueSize || persetValueSize || 14,
  46 + fontSize: fontSize || persetFontSize || 14,
43 }; 47 };
44 }); 48 });
45 49
46 const options = (): EChartsOption => { 50 const options = (): EChartsOption => {
47 - const { unit, fontColor, maxNumber } = unref(getDesign); 51 + const { unit, fontColor, maxNumber, valueSize } = unref(getDesign);
48 return { 52 return {
49 series: [ 53 series: [
50 { 54 {
@@ -104,7 +108,7 @@ @@ -104,7 +108,7 @@
104 lineHeight: 10, 108 lineHeight: 10,
105 borderRadius: 8, 109 borderRadius: 8,
106 offsetCenter: [0, '40%'], 110 offsetCenter: [0, '40%'],
107 - fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14, 111 + fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
108 fontWeight: 'bolder', 112 fontWeight: 'bolder',
109 formatter: `{value} ${unit ?? ''}`, 113 formatter: `{value} ${unit ?? ''}`,
110 color: fontColor || 'inherit', 114 color: fontColor || 'inherit',
@@ -200,7 +204,7 @@ @@ -200,7 +204,7 @@
200 series: [ 204 series: [
201 { 205 {
202 detail: { 206 detail: {
203 - fontSize: 14 * unref(getRatio), 207 + fontSize: unref(getDesign).valueSize * unref(getRatio),
204 }, 208 },
205 progress: { 209 progress: {
206 width: 24 * unref(getRatio), 210 width: 24 * unref(getRatio),
@@ -238,9 +242,11 @@ @@ -238,9 +242,11 @@
238 <div class="w-full h-full flex justify-center items-center flex-1 flex-col"> 242 <div class="w-full h-full flex justify-center items-center flex-1 flex-col">
239 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex justify-center items-center flex-col"> 243 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex justify-center items-center flex-col">
240 </div> 244 </div>
241 - <div class="text-gray-500 text-xs text-center truncate">{{  
242 - getDesign.attribute || '温度'  
243 - }}</div> 245 + <div
  246 + class="text-gray-500 text-center truncate"
  247 + :style="{ fontSize: getDesign.fontSize + 'px' }"
  248 + >{{ getDesign.attribute || '温度' }}</div
  249 + >
244 </div> 250 </div>
245 <UpdateTime v-show="getDesign.showTime" :time="time" /> 251 <UpdateTime v-show="getDesign.showTime" :time="time" />
246 </main> 252 </main>
@@ -31,6 +31,8 @@ export const option: PublicPresetOptions = { @@ -31,6 +31,8 @@ export const option: PublicPresetOptions = {
31 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 31 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
32 [ComponentConfigFieldEnum.SHOW_TIME]: false, 32 [ComponentConfigFieldEnum.SHOW_TIME]: false,
33 [ComponentConfigFieldEnum.MAX_NUMBER]: 100, 33 [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  34 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
  35 + [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
34 }; 36 };
35 37
36 export default class Config extends PublicConfigClass implements CreateComponentType { 38 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -77,16 +77,22 @@ @@ -77,16 +77,22 @@
77 }, 77 },
78 }, 78 },
79 { 79 {
80 - field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,  
81 - label: '显示设备名称',  
82 - component: 'Checkbox',  
83 - defaultValue: option.showDeviceName, 80 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  81 + label: '数值字体大小',
  82 + component: 'InputNumber',
  83 + defaultValue: 14,
  84 + componentProps: {
  85 + min: 0,
  86 + },
84 }, 87 },
85 { 88 {
86 - field: ComponentConfigFieldEnum.SHOW_TIME,  
87 - label: '显示时间',  
88 - component: 'Checkbox',  
89 - defaultValue: option.showTime, 89 + field: ComponentConfigFieldEnum.FONT_SIZE,
  90 + label: '文本字体大小',
  91 + component: 'InputNumber',
  92 + defaultValue: 14,
  93 + componentProps: {
  94 + min: 0,
  95 + },
90 }, 96 },
91 { 97 {
92 field: ComponentConfigFieldEnum.MAX_NUMBER, 98 field: ComponentConfigFieldEnum.MAX_NUMBER,
@@ -109,6 +115,18 @@ @@ -109,6 +115,18 @@
109 }; 115 };
110 }, 116 },
111 }, 117 },
  118 + {
  119 + field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
  120 + label: '显示设备名称',
  121 + component: 'Checkbox',
  122 + defaultValue: option.showDeviceName,
  123 + },
  124 + {
  125 + field: ComponentConfigFieldEnum.SHOW_TIME,
  126 + label: '显示时间',
  127 + component: 'Checkbox',
  128 + defaultValue: option.showTime,
  129 + },
112 ], 130 ],
113 showActionButtonGroup: false, 131 showActionButtonGroup: false,
114 labelWidth: 120, 132 labelWidth: 120,
@@ -142,11 +160,22 @@ @@ -142,11 +160,22 @@
142 showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 160 showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
143 showTime: value[ComponentConfigFieldEnum.SHOW_TIME], 161 showTime: value[ComponentConfigFieldEnum.SHOW_TIME],
144 maxNumber: value[ComponentConfigFieldEnum.MAX_NUMBER], 162 maxNumber: value[ComponentConfigFieldEnum.MAX_NUMBER],
  163 + valueSize: value[ComponentConfigFieldEnum.VALUE_SIZE],
  164 + fontSize: value[ComponentConfigFieldEnum.FONT_SIZE],
145 } as ComponentInfo; 165 } as ComponentInfo;
146 }; 166 };
147 167
148 const setFormValues = (data: ComponentInfo) => { 168 const setFormValues = (data: ComponentInfo) => {
149 - const { gradientInfo, unit, fontColor, showDeviceName, showTime, maxNumber } = data; 169 + const {
  170 + gradientInfo,
  171 + unit,
  172 + fontColor,
  173 + showDeviceName,
  174 + showTime,
  175 + maxNumber,
  176 + valueSize,
  177 + fontSize,
  178 + } = data;
150 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 179 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
151 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 180 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
152 const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD); 181 const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
@@ -156,6 +185,8 @@ @@ -156,6 +185,8 @@
156 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 185 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
157 [ComponentConfigFieldEnum.SHOW_TIME]: showTime, 186 [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
158 [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber, 187 [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
  188 + [ComponentConfigFieldEnum.VALUE_SIZE]: valueSize,
  189 + [ComponentConfigFieldEnum.FONT_SIZE]: fontSize,
159 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value, 190 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
160 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 191 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
161 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value, 192 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,
@@ -38,9 +38,12 @@ @@ -38,9 +38,12 @@
38 gradientInfo: presetGradientInfo, 38 gradientInfo: presetGradientInfo,
39 showTime: persetShowTime, 39 showTime: persetShowTime,
40 maxNumber: persetMaxNumber, 40 maxNumber: persetMaxNumber,
  41 + fontSize: persetFontSize,
  42 + valueSize: persetValueSize,
41 } = persetOption || {}; 43 } = persetOption || {};
42 44
43 - const { unit, fontColor, gradientInfo, showTime, maxNumber } = componentInfo || {}; 45 + const { unit, fontColor, gradientInfo, showTime, maxNumber, fontSize, valueSize } =
  46 + componentInfo || {};
44 return { 47 return {
45 unit: unit ?? presetUnit, 48 unit: unit ?? presetUnit,
46 fontColor: fontColor ?? presetFontColor, 49 fontColor: fontColor ?? presetFontColor,
@@ -48,6 +51,8 @@ @@ -48,6 +51,8 @@
48 attribute: attributeRename || attributeName || attribute, 51 attribute: attributeRename || attributeName || attribute,
49 showTime: showTime || persetShowTime, 52 showTime: showTime || persetShowTime,
50 maxNumber: maxNumber || persetMaxNumber, 53 maxNumber: maxNumber || persetMaxNumber,
  54 + fontSize: fontSize || persetFontSize || 14,
  55 + valueSize: valueSize || persetValueSize || 14,
51 }; 56 };
52 }); 57 });
53 58
@@ -57,7 +62,7 @@ @@ -57,7 +62,7 @@
57 }; 62 };
58 63
59 const options = (): EChartsOption => { 64 const options = (): EChartsOption => {
60 - const { gradientInfo, unit, fontColor, maxNumber } = unref(getDesign); 65 + const { gradientInfo, unit, fontColor, maxNumber, valueSize } = unref(getDesign);
61 const firstRecord = getGradient(Gradient.FIRST, gradientInfo); 66 const firstRecord = getGradient(Gradient.FIRST, gradientInfo);
62 const secondRecord = getGradient(Gradient.SECOND, gradientInfo); 67 const secondRecord = getGradient(Gradient.SECOND, gradientInfo);
63 const thirdRecord = getGradient(Gradient.THIRD, gradientInfo); 68 const thirdRecord = getGradient(Gradient.THIRD, gradientInfo);
@@ -122,7 +127,7 @@ @@ -122,7 +127,7 @@
122 formatter: `{value} ${unit ?? ''}`, 127 formatter: `{value} ${unit ?? ''}`,
123 color: fontColor || 'inherit', 128 color: fontColor || 'inherit',
124 offsetCenter: [0, '70%'], 129 offsetCenter: [0, '70%'],
125 - fontSize: unref(getRatio) ? unref(getRatio) * 14 : 14, 130 + fontSize: unref(getRatio) ? unref(getRatio) * valueSize : valueSize,
126 }, 131 },
127 data: [ 132 data: [
128 { 133 {
@@ -194,7 +199,7 @@ @@ -194,7 +199,7 @@
194 fontSize: 6 * unref(getRatio), 199 fontSize: 6 * unref(getRatio),
195 }, 200 },
196 detail: { 201 detail: {
197 - fontSize: 14 * unref(getRatio), 202 + fontSize: unref(getDesign).valueSize * unref(getRatio),
198 }, 203 },
199 }, 204 },
200 ], 205 ],
@@ -218,7 +223,10 @@ @@ -218,7 +223,10 @@
218 <div class="w-full h-full flex justify-center items-center flex-col flex-1"> 223 <div class="w-full h-full flex justify-center items-center flex-col flex-1">
219 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center"> 224 <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
220 </div> 225 </div>
221 - <div class="text-center text-gray-500 text-xs truncate"> 226 + <div
  227 + class="text-center text-gray-500 truncate"
  228 + :style="{ fontSize: getDesign.fontSize + 'px' }"
  229 + >
222 {{ getDesign.attribute || '速度' }} 230 {{ getDesign.attribute || '速度' }}
223 </div> 231 </div>
224 </div> 232 </div>
@@ -14,6 +14,7 @@ export const option: PublicPresetOptions = { @@ -14,6 +14,7 @@ export const option: PublicPresetOptions = {
14 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee', 14 [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee',
15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true, 15 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
16 [ComponentConfigFieldEnum.SHOW_TIME]: false, 16 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  17 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
17 }; 18 };
18 19
19 export default class Config extends PublicConfigClass implements CreateComponentType { 20 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -25,6 +25,15 @@ @@ -25,6 +25,15 @@
25 }, 25 },
26 }, 26 },
27 { 27 {
  28 + field: ComponentConfigFieldEnum.FONT_SIZE,
  29 + label: '文字字体的大小',
  30 + component: 'InputNumber',
  31 + defaultValue: 14,
  32 + componentProps: {
  33 + min: 0,
  34 + },
  35 + },
  36 + {
28 field: ComponentConfigFieldEnum.SHOW_TIME, 37 field: ComponentConfigFieldEnum.SHOW_TIME,
29 label: '显示时间', 38 label: '显示时间',
30 component: 'Checkbox', 39 component: 'Checkbox',
@@ -25,16 +25,18 @@ @@ -25,16 +25,18 @@
25 closeColor: persetCloseColor, 25 closeColor: persetCloseColor,
26 showDeviceName: persetShowDeviceName, 26 showDeviceName: persetShowDeviceName,
27 showTime: persetShowTime, 27 showTime: persetShowTime,
  28 + fontSize: persetFontSize,
28 } = persetOption || {}; 29 } = persetOption || {};
29 const { componentInfo, attribute, attributeName, attributeRename } = option; 30 const { componentInfo, attribute, attributeName, attributeRename } = option;
30 31
31 - const { openColor, closeColor, showDeviceName, showTime } = componentInfo || {}; 32 + const { openColor, closeColor, showDeviceName, showTime, fontSize } = componentInfo || {};
32 return { 33 return {
33 openColor: openColor ?? persetOpenColor, 34 openColor: openColor ?? persetOpenColor,
34 closeColor: closeColor ?? persetCloseColor, 35 closeColor: closeColor ?? persetCloseColor,
35 showDeviceName: showDeviceName ?? persetShowDeviceName, 36 showDeviceName: showDeviceName ?? persetShowDeviceName,
36 attribute: attributeRename || attributeName || attribute, 37 attribute: attributeRename || attributeName || attribute,
37 showTime: showTime ?? persetShowTime, 38 showTime: showTime ?? persetShowTime,
  39 + fontSize: fontSize || persetFontSize || 14,
38 }; 40 };
39 }); 41 });
40 42
@@ -78,7 +80,9 @@ @@ -78,7 +80,9 @@
78 }" 80 }"
79 :class="isOpenClose ? 'switch_open' : 'switch_close'" 81 :class="isOpenClose ? 'switch_open' : 'switch_close'"
80 ></div> 82 ></div>
81 - <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div> 83 + <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
  84 + getDesign.attribute
  85 + }}</div>
82 </div> 86 </div>
83 <UpdateTime v-if="getDesign.showTime" :time="time" /> 87 <UpdateTime v-if="getDesign.showTime" :time="time" />
84 </main> 88 </main>
@@ -16,6 +16,7 @@ export const option: PublicPresetOptions = { @@ -16,6 +16,7 @@ export const option: PublicPresetOptions = {
16 [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC', 16 [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC',
17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
18 [ComponentConfigFieldEnum.SHOW_TIME]: false, 18 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  19 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
19 }; 20 };
20 21
21 export default class Config extends PublicConfigClass implements CreateComponentType { 22 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -47,6 +47,15 @@ @@ -47,6 +47,15 @@
47 defaultValue: option.iconColorClose, 47 defaultValue: option.iconColorClose,
48 }, 48 },
49 { 49 {
  50 + field: ComponentConfigFieldEnum.FONT_SIZE,
  51 + label: '文本字体大小',
  52 + component: 'InputNumber',
  53 + defaultValue: 14,
  54 + componentProps: {
  55 + min: 0,
  56 + },
  57 + },
  58 + {
50 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, 59 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
51 label: '显示设备名称', 60 label: '显示设备名称',
52 component: 'Checkbox', 61 component: 'Checkbox',
@@ -26,11 +26,12 @@ @@ -26,11 +26,12 @@
26 iconClose: persetIconCLose, 26 iconClose: persetIconCLose,
27 iconColorClose: persetIconColorClose, 27 iconColorClose: persetIconColorClose,
28 showTime: persetShowTime, 28 showTime: persetShowTime,
  29 + fontSize: persetFontSize,
29 } = persetOption; 30 } = persetOption;
30 31
31 const { componentInfo, attributeName, attributeRename } = option; 32 const { componentInfo, attributeName, attributeRename } = option;
32 33
33 - const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, showTime } = 34 + const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, showTime, fontSize } =
34 componentInfo || {}; 35 componentInfo || {};
35 return { 36 return {
36 iconColor: iconColor || persetIconColor, 37 iconColor: iconColor || persetIconColor,
@@ -41,6 +42,7 @@ @@ -41,6 +42,7 @@
41 iconClose: iconClose || persetIconCLose, 42 iconClose: iconClose || persetIconCLose,
42 iconColorClose: iconColorClose || persetIconColorClose, 43 iconColorClose: iconColorClose || persetIconColorClose,
43 showTime: showTime ?? persetShowTime, 44 showTime: showTime ?? persetShowTime,
  45 + fontSize: fontSize || persetFontSize || 14,
44 }; 46 };
45 }); 47 });
46 48
@@ -68,7 +70,9 @@ @@ -68,7 +70,9 @@
68 :size="60" 70 :size="60"
69 :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }" 71 :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }"
70 /> 72 />
71 - <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '' }}</div> 73 + <div class="text-gray-500 truncate m-2" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
  74 + getDesign.attribute || ''
  75 + }}</div>
72 </div> 76 </div>
73 <UpdateTime v-show="getDesign.showTime" :time="time" /> 77 <UpdateTime v-show="getDesign.showTime" :time="time" />
74 </main> 78 </main>
@@ -12,6 +12,8 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; @@ -12,6 +12,8 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
12 export const option: PublicPresetOptions = { 12 export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.FONT_COLOR]: '#000', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  15 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
  16 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
15 }; 17 };
16 18
17 export default class Config extends PublicConfigClass implements CreateComponentType { 19 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -19,6 +19,24 @@ @@ -19,6 +19,24 @@
19 label: '显示设备名称', 19 label: '显示设备名称',
20 component: 'Checkbox', 20 component: 'Checkbox',
21 }, 21 },
  22 + {
  23 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  24 + label: '数值字体大小',
  25 + component: 'InputNumber',
  26 + defaultValue: 20,
  27 + componentProps: {
  28 + min: 0,
  29 + },
  30 + },
  31 + {
  32 + field: ComponentConfigFieldEnum.FONT_SIZE,
  33 + label: '文本字体大小',
  34 + component: 'InputNumber',
  35 + defaultValue: 14,
  36 + componentProps: {
  37 + min: 0,
  38 + },
  39 + },
22 ], 40 ],
23 showActionButtonGroup: false, 41 showActionButtonGroup: false,
24 labelWidth: 120, 42 labelWidth: 120,
@@ -17,13 +17,19 @@ @@ -17,13 +17,19 @@
17 const getDesign = computed(() => { 17 const getDesign = computed(() => {
18 const { persetOption = {}, option } = props.config; 18 const { persetOption = {}, option } = props.config;
19 19
20 - const { fontColor: persetFontColor } = persetOption; 20 + const {
  21 + fontColor: persetFontColor,
  22 + fontSize: persetFontSize,
  23 + valueSize: persetValueSize,
  24 + } = persetOption;
21 25
22 const { componentInfo, attribute, attributeRename, attributeName } = option; 26 const { componentInfo, attribute, attributeRename, attributeName } = option;
23 27
24 - const { fontColor } = componentInfo || {}; 28 + const { fontColor, fontSize, valueSize } = componentInfo || {};
25 return { 29 return {
26 fontColor: fontColor || persetFontColor, 30 fontColor: fontColor || persetFontColor,
  31 + fontSize: fontSize || persetFontSize || 14,
  32 + valueSize: valueSize || persetValueSize || 20,
27 attribute: attributeRename || attributeName || attribute, 33 attribute: attributeRename || attributeName || attribute,
28 }; 34 };
29 }); 35 });
@@ -45,10 +51,15 @@ @@ -45,10 +51,15 @@
45 <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center"> 51 <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
46 <DeviceName :config="config" /> 52 <DeviceName :config="config" />
47 53
48 - <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }"> 54 + <h1
  55 + class="my-4 font-bold !my-2 truncate"
  56 + :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
  57 + >
49 {{ currentValue || 0 }} 58 {{ currentValue || 0 }}
50 </h1> 59 </h1>
51 - <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div> 60 + <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
  61 + getDesign.attribute || '温度'
  62 + }}</div>
52 <!-- <div v-if="config.option.componentInfo.showDeviceName"> 63 <!-- <div v-if="config.option.componentInfo.showDeviceName">
53 {{ config.option.deviceRename || config.option.deviceName }} 64 {{ config.option.deviceRename || config.option.deviceName }}
54 </div> --> 65 </div> -->
@@ -12,6 +12,8 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; @@ -12,6 +12,8 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
12 export const option: PublicPresetOptions = { 12 export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.FONT_COLOR]: '#000', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  15 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
  16 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
15 }; 17 };
16 18
17 export default class Config extends PublicConfigClass implements CreateComponentType { 19 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -19,6 +19,24 @@ @@ -19,6 +19,24 @@
19 label: '显示设备名称', 19 label: '显示设备名称',
20 component: 'Checkbox', 20 component: 'Checkbox',
21 }, 21 },
  22 + {
  23 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  24 + label: '数值字体大小',
  25 + component: 'InputNumber',
  26 + defaultValue: 20,
  27 + componentProps: {
  28 + min: 0,
  29 + },
  30 + },
  31 + {
  32 + field: ComponentConfigFieldEnum.FONT_SIZE,
  33 + label: '文本字体大小',
  34 + component: 'InputNumber',
  35 + defaultValue: 14,
  36 + componentProps: {
  37 + min: 0,
  38 + },
  39 + },
22 ], 40 ],
23 showActionButtonGroup: false, 41 showActionButtonGroup: false,
24 labelWidth: 120, 42 labelWidth: 120,
@@ -19,14 +19,20 @@ @@ -19,14 +19,20 @@
19 const getDesign = computed(() => { 19 const getDesign = computed(() => {
20 const { persetOption = {}, option } = props.config; 20 const { persetOption = {}, option } = props.config;
21 21
22 - const { fontColor: persetFontColor } = persetOption; 22 + const {
  23 + fontColor: persetFontColor,
  24 + valueSize: persetValueSize,
  25 + fontSize: persetFontSize,
  26 + } = persetOption;
23 27
24 const { componentInfo, attribute, attributeName, attributeRename } = option; 28 const { componentInfo, attribute, attributeName, attributeRename } = option;
25 29
26 - const { fontColor } = componentInfo || {}; 30 + const { fontColor, valueSize, fontSize } = componentInfo || {};
27 31
28 return { 32 return {
29 fontColor: fontColor || persetFontColor, 33 fontColor: fontColor || persetFontColor,
  34 + valueSize: valueSize || persetValueSize || 20,
  35 + fontSize: fontSize || persetFontSize || 14,
30 attribute: attributeRename || attributeName || attribute, 36 attribute: attributeRename || attributeName || attribute,
31 }; 37 };
32 }); 38 });
@@ -50,10 +56,15 @@ @@ -50,10 +56,15 @@
50 <DeviceName :config="config" /> 56 <DeviceName :config="config" />
51 57
52 <div class="flex-1 flex justify-center items-center flex-col" :style="getScale"> 58 <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
53 - <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }"> 59 + <h1
  60 + class="my-4 font-bold !my-2 truncate"
  61 + :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
  62 + >
54 {{ currentValue || 0 }} 63 {{ currentValue || 0 }}
55 </h1> 64 </h1>
56 - <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div> 65 + <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
  66 + getDesign.attribute || '温度'
  67 + }}</div>
57 </div> 68 </div>
58 <UpdateTime :time="time" /> 69 <UpdateTime :time="time" />
59 </main> 70 </main>
@@ -15,6 +15,8 @@ export const option: PublicPresetOptions = { @@ -15,6 +15,8 @@ export const option: PublicPresetOptions = {
15 [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff', 15 [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
16 [ComponentConfigFieldEnum.FONT_COLOR]: '#000', 16 [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  18 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
  19 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
18 }; 20 };
19 21
20 export default class Config extends PublicConfigClass implements CreateComponentType { 22 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -23,6 +23,25 @@ @@ -23,6 +23,25 @@
23 placeholder: '请输入数值单位', 23 placeholder: '请输入数值单位',
24 }, 24 },
25 }, 25 },
  26 +
  27 + {
  28 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  29 + label: '数值字体大小',
  30 + component: 'InputNumber',
  31 + defaultValue: 20,
  32 + componentProps: {
  33 + min: 0,
  34 + },
  35 + },
  36 + {
  37 + field: ComponentConfigFieldEnum.FONT_SIZE,
  38 + label: '文本字体大小',
  39 + component: 'InputNumber',
  40 + defaultValue: 14,
  41 + componentProps: {
  42 + min: 0,
  43 + },
  44 + },
26 { 45 {
27 field: ComponentConfigFieldEnum.ICON_COLOR, 46 field: ComponentConfigFieldEnum.ICON_COLOR,
28 label: '图标颜色', 47 label: '图标颜色',
@@ -26,17 +26,21 @@ @@ -26,17 +26,21 @@
26 unit: perseUnit, 26 unit: perseUnit,
27 icon: persetIcon, 27 icon: persetIcon,
28 fontColor: persetFontColor, 28 fontColor: persetFontColor,
  29 + valueSize: persetValueSize,
  30 + fontSize: persetFontSize,
29 } = persetOption; 31 } = persetOption;
30 32
31 const { componentInfo, attribute, attributeRename, attributeName } = option; 33 const { componentInfo, attribute, attributeRename, attributeName } = option;
32 34
33 - const { icon, iconColor, fontColor, unit } = componentInfo || {}; 35 + const { icon, iconColor, fontColor, unit, valueSize, fontSize } = componentInfo || {};
34 return { 36 return {
35 iconColor: iconColor || persetIconColor, 37 iconColor: iconColor || persetIconColor,
36 unit: unit ?? perseUnit, 38 unit: unit ?? perseUnit,
37 icon: icon || persetIcon, 39 icon: icon || persetIcon,
38 fontColor: fontColor || persetFontColor, 40 fontColor: fontColor || persetFontColor,
39 attribute: attributeRename || attributeName || attribute, 41 attribute: attributeRename || attributeName || attribute,
  42 + valueSize: valueSize || persetValueSize || 20,
  43 + fontSize: fontSize || persetFontSize || 14,
40 }; 44 };
41 }); 45 });
42 46
@@ -64,11 +68,16 @@ @@ -64,11 +68,16 @@
64 :size="60" 68 :size="60"
65 :style="{ color: getDesign.iconColor }" 69 :style="{ color: getDesign.iconColor }"
66 /> 70 />
67 - <h1 class="font-bold text-xl m-2 truncate" :style="{ color: getDesign.fontColor }"> 71 + <h1
  72 + class="font-bold m-2 truncate"
  73 + :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
  74 + >
68 <span> {{ currentValue || 0 }}</span> 75 <span> {{ currentValue || 0 }}</span>
69 <span>{{ getDesign.unit }} </span> 76 <span>{{ getDesign.unit }} </span>
70 </h1> 77 </h1>
71 - <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div> 78 + <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
  79 + getDesign.attribute || '温度'
  80 + }}</div>
72 </div> 81 </div>
73 <UpdateTime :time="time" /> 82 <UpdateTime :time="time" />
74 </main> 83 </main>
@@ -15,6 +15,8 @@ export const option: PublicPresetOptions = { @@ -15,6 +15,8 @@ export const option: PublicPresetOptions = {
15 [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff', 15 [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
16 [ComponentConfigFieldEnum.FONT_COLOR]: '#000', 16 [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  18 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
  19 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
18 }; 20 };
19 21
20 export default class Config extends PublicConfigClass implements CreateComponentType { 22 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -24,6 +24,24 @@ @@ -24,6 +24,24 @@
24 }, 24 },
25 }, 25 },
26 { 26 {
  27 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  28 + label: '数值字体大小',
  29 + component: 'InputNumber',
  30 + defaultValue: 20,
  31 + componentProps: {
  32 + min: 0,
  33 + },
  34 + },
  35 + {
  36 + field: ComponentConfigFieldEnum.FONT_SIZE,
  37 + label: '文本字体大小',
  38 + component: 'InputNumber',
  39 + defaultValue: 14,
  40 + componentProps: {
  41 + min: 0,
  42 + },
  43 + },
  44 + {
27 field: ComponentConfigFieldEnum.ICON_COLOR, 45 field: ComponentConfigFieldEnum.ICON_COLOR,
28 label: '图标颜色', 46 label: '图标颜色',
29 component: 'ColorPicker', 47 component: 'ColorPicker',
@@ -23,17 +23,21 @@ @@ -23,17 +23,21 @@
23 unit: perseUnit, 23 unit: perseUnit,
24 icon: persetIcon, 24 icon: persetIcon,
25 fontColor: persetFontColor, 25 fontColor: persetFontColor,
  26 + valueSize: persetValueSize,
  27 + fontSize: persetFontSize,
26 } = persetOption; 28 } = persetOption;
27 29
28 const { componentInfo, attribute, attributeRename, attributeName } = option; 30 const { componentInfo, attribute, attributeRename, attributeName } = option;
29 31
30 - const { icon, iconColor, fontColor, unit } = componentInfo || {}; 32 + const { icon, iconColor, fontColor, unit, valueSize, fontSize } = componentInfo || {};
31 return { 33 return {
32 iconColor: iconColor || persetIconColor, 34 iconColor: iconColor || persetIconColor,
33 unit: unit ?? perseUnit, 35 unit: unit ?? perseUnit,
34 icon: icon || persetIcon, 36 icon: icon || persetIcon,
35 fontColor: fontColor || persetFontColor, 37 fontColor: fontColor || persetFontColor,
36 attribute: attributeRename || attributeName || attribute, 38 attribute: attributeRename || attributeName || attribute,
  39 + valueSize: valueSize || persetValueSize || 20,
  40 + fontSize: fontSize || persetFontSize || 14,
37 }; 41 };
38 }); 42 });
39 43
@@ -60,11 +64,16 @@ @@ -60,11 +64,16 @@
60 :size="60" 64 :size="60"
61 :style="{ color: getDesign.iconColor }" 65 :style="{ color: getDesign.iconColor }"
62 /> 66 />
63 - <h1 class="my-4 font-bold text-lg !my-2 truncate" :style="{ color: getDesign.fontColor }"> 67 + <h1
  68 + class="my-4 font-bold !my-2 truncate"
  69 + :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
  70 + >
64 <span>{{ currentValue || 0 }}</span> 71 <span>{{ currentValue || 0 }}</span>
65 <span>{{ getDesign.unit }}</span> 72 <span>{{ getDesign.unit }}</span>
66 </h1> 73 </h1>
67 - <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div> 74 + <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
  75 + getDesign.attribute || '温度'
  76 + }}</div>
68 </div> 77 </div>
69 </main> 78 </main>
70 </template> 79 </template>
@@ -16,7 +16,8 @@ export const option: PublicPresetOptions = { @@ -16,7 +16,8 @@ export const option: PublicPresetOptions = {
16 [ComponentConfigFieldEnum.UNIT]: '℃', 16 [ComponentConfigFieldEnum.UNIT]: '℃',
17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
18 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#377dff', 18 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#377dff',
19 - fontSize: '18px', 19 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
  20 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
20 }; 21 };
21 22
22 export default class Config extends PublicConfigClass implements CreateComponentType { 23 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -51,6 +51,24 @@ @@ -51,6 +51,24 @@
51 component: 'Input', 51 component: 'Input',
52 defaultValue: option.unit, 52 defaultValue: option.unit,
53 }, 53 },
  54 + {
  55 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  56 + label: '数值字体大小',
  57 + component: 'InputNumber',
  58 + defaultValue: 20,
  59 + componentProps: {
  60 + min: 0,
  61 + },
  62 + },
  63 + {
  64 + field: ComponentConfigFieldEnum.FONT_SIZE,
  65 + label: '文本字体大小',
  66 + component: 'InputNumber',
  67 + defaultValue: 14,
  68 + componentProps: {
  69 + min: 0,
  70 + },
  71 + },
54 // { 72 // {
55 // field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, 73 // field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
56 // label: '显示设备名称', 74 // label: '显示设备名称',
@@ -29,6 +29,7 @@ @@ -29,6 +29,7 @@
29 attributeName?: string; 29 attributeName?: string;
30 deviceRename?: string; 30 deviceRename?: string;
31 maxNumber?: number; 31 maxNumber?: number;
  32 + [key: string]: number | string | undefined;
32 } 33 }
33 34
34 const defaultValue: PercentType[] = [ 35 const defaultValue: PercentType[] = [
@@ -39,6 +40,8 @@ @@ -39,6 +40,8 @@
39 unit: '℃', 40 unit: '℃',
40 deviceName: '温湿度', 41 deviceName: '温湿度',
41 attribute: '温度', 42 attribute: '温度',
  43 + fontSize: 14,
  44 + valueSize: 20,
42 id: buildUUID(), 45 id: buildUUID(),
43 }, 46 },
44 { 47 {
@@ -60,10 +63,13 @@ @@ -60,10 +63,13 @@
60 fontColor: presetFontColor, 63 fontColor: presetFontColor,
61 backgroundColor: persetBackgroundColor, 64 backgroundColor: persetBackgroundColor,
62 maxNumber: persetMaxNumber, 65 maxNumber: persetMaxNumber,
  66 + valueSize: persetValueSize,
  67 + fontSize: persetFontSize,
63 } = persetOption || {}; 68 } = persetOption || {};
64 return { 69 return {
65 dataSource: dataSource.map((item) => { 70 dataSource: dataSource.map((item) => {
66 - const { unit, fontColor, backgroundColor, maxNumber } = item.componentInfo || {}; 71 + const { unit, fontColor, backgroundColor, maxNumber, valueSize, fontSize } =
  72 + item.componentInfo || {};
67 const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } = 73 const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
68 item; 74 item;
69 return { 75 return {
@@ -75,6 +81,8 @@ @@ -75,6 +81,8 @@
75 attributeName: attributeRename || attributeName, 81 attributeName: attributeRename || attributeName,
76 maxNumber: maxNumber || persetMaxNumber, 82 maxNumber: maxNumber || persetMaxNumber,
77 id: deviceId, 83 id: deviceId,
  84 + valueSize: valueSize || persetValueSize || 20,
  85 + fontSize: fontSize || persetFontSize || 14,
78 } as PercentType; 86 } as PercentType;
79 }), 87 }),
80 }; 88 };
@@ -112,14 +120,17 @@ @@ -112,14 +120,17 @@
112 class="mt-2 flex flex-col ml-3 mr-3 items-stretch" 120 class="mt-2 flex flex-col ml-3 mr-3 items-stretch"
113 > 121 >
114 <div class="flex justify-between"> 122 <div class="flex justify-between">
115 - <div class="text-gray-500 text-sm truncate" :style="{ color: item.fontColor }"> 123 + <div
  124 + class="text-gray-500 text-sm truncate"
  125 + :style="{ color: item.fontColor, fontSize: item.fontSize + 'px' }"
  126 + >
116 {{ 127 {{
117 `${item.deviceName} 128 `${item.deviceName}
118 - 129 -
119 ${item.attributeName || item.attribute || '温度'}` 130 ${item.attributeName || item.attribute || '温度'}`
120 }} 131 }}
121 </div> 132 </div>
122 - <span class="text-lg" :style="{ color: item.fontColor }" 133 + <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }"
123 >{{ item.value }} {{ item.unit }}</span 134 >{{ item.value }} {{ item.unit }}</span
124 > 135 >
125 </div> 136 </div>
@@ -16,6 +16,8 @@ export const option: PublicPresetOptions = { @@ -16,6 +16,8 @@ export const option: PublicPresetOptions = {
16 [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff', 16 [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
17 [ComponentConfigFieldEnum.FONT_COLOR]: '#000', 17 [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
18 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 18 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  19 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
  20 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
19 }; 21 };
20 22
21 export default class Config extends PublicConfigClass implements CreateComponentType { 23 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -23,6 +23,25 @@ @@ -23,6 +23,25 @@
23 placeholder: '请输入数值单位', 23 placeholder: '请输入数值单位',
24 }, 24 },
25 }, 25 },
  26 +
  27 + {
  28 + field: ComponentConfigFieldEnum.VALUE_SIZE,
  29 + label: '数值字体大小',
  30 + component: 'InputNumber',
  31 + defaultValue: 20,
  32 + componentProps: {
  33 + min: 0,
  34 + },
  35 + },
  36 + {
  37 + field: ComponentConfigFieldEnum.FONT_SIZE,
  38 + label: '文本字体大小',
  39 + component: 'InputNumber',
  40 + defaultValue: 14,
  41 + componentProps: {
  42 + min: 0,
  43 + },
  44 + },
26 { 45 {
27 field: ComponentConfigFieldEnum.ICON_COLOR, 46 field: ComponentConfigFieldEnum.ICON_COLOR,
28 label: '图标颜色', 47 label: '图标颜色',
@@ -25,10 +25,12 @@ @@ -25,10 +25,12 @@
25 fontColor: persetFontColor, 25 fontColor: persetFontColor,
26 icon: persetIcon, 26 icon: persetIcon,
27 iconColor: persetIconColor, 27 iconColor: persetIconColor,
  28 + valueSize: persetValueSize,
  29 + fontSize: persetFontSize,
28 } = persetOption || {}; 30 } = persetOption || {};
29 return { 31 return {
30 dataSource: dataSource.map((item) => { 32 dataSource: dataSource.map((item) => {
31 - const { fontColor, icon, iconColor, unit } = item.componentInfo; 33 + const { fontColor, icon, iconColor, unit, valueSize, fontSize } = item.componentInfo;
32 const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } = 34 const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
33 item; 35 item;
34 36
@@ -41,6 +43,8 @@ @@ -41,6 +43,8 @@
41 deviceName: deviceRename || deviceName, 43 deviceName: deviceRename || deviceName,
42 attributeName: attributeRename || attributeName, 44 attributeName: attributeRename || attributeName,
43 id: deviceId, 45 id: deviceId,
  46 + valueSize: valueSize || persetValueSize || 20,
  47 + fontSize: fontSize || persetFontSize || 14,
44 }; 48 };
45 }), 49 }),
46 }; 50 };
@@ -105,15 +109,17 @@ @@ -105,15 +109,17 @@
105 :style="{ color: item.iconColor }" 109 :style="{ color: item.iconColor }"
106 /> 110 />
107 111
108 - <div class="text-gray-500 truncate ml-6">{{  
109 - item.deviceName + '-' + item.attributeName || '温度'  
110 - }}</div> 112 + <div
  113 + class="text-gray-500 text-sm truncate ml-6"
  114 + :style="{ fontSize: item.fontSize + 'px' }"
  115 + >{{ item.deviceName + '-' + item.attributeName || '温度' }}</div
  116 + >
111 </div> 117 </div>
112 118
113 - <h1 class="font-bold m-2 truncate" :style="{ color: item.fontColor }"> 119 + <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }">
114 <span> {{ item.value || 0 }}</span> 120 <span> {{ item.value || 0 }}</span>
115 <span>{{ item.unit }} </span> 121 <span>{{ item.unit }} </span>
116 - </h1> 122 + </span>
117 </div> 123 </div>
118 <!-- <UpdateTime :time="time" /> --> 124 <!-- <UpdateTime :time="time" /> -->
119 </main> 125 </main>
1 export enum ComponentConfigFieldEnum { 1 export enum ComponentConfigFieldEnum {
2 - FONT_COLOR = 'fontColor',  
3 - FONT_SIZE = 'fontSize',  
4 - VALUE_SIZE = 'valueSize', //数值大小 2 + FONT_COLOR = 'fontColor', //数值字体颜色
  3 + VALUE_SIZE = 'valueSize', //数值字体大小
  4 + TEXT_COLOR = 'textColor', //文本字体颜色
  5 + FONT_SIZE = 'fontSize', //文本数值颜色
5 UNIT = 'unit', 6 UNIT = 'unit',
6 POINTER_COLOR = 'pointerColor', 7 POINTER_COLOR = 'pointerColor',
7 INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor', 8 INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor',
@@ -63,6 +63,8 @@ export interface ComponentInfo { @@ -63,6 +63,8 @@ export interface ComponentInfo {
63 progressBarCircle?: Boolean; 63 progressBarCircle?: Boolean;
64 lineColor?: string; 64 lineColor?: string;
65 maxNumber?: number; 65 maxNumber?: number;
  66 + fontSize?: string | number;
  67 + valueSize?: string | number;
66 [key: string]: any; 68 [key: string]: any;
67 } 69 }
68 70