简柏林 / thingskit-front · Commits

Commit 5200cae09fcceb5a388bc6805f9000fb5dd6adce

Authored by xp.Huang
2 parents 94fd15fc 7341529a

Merge branch 'perf/add-board-fontsize-field' into 'main_dev' 

看板组件新增字体设置字段

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