简柏林 / thingskit-front · Commits

Commit 22a3c5631a6f14661bdfcad41d083428beee97df

Authored by loveumiko
1 parent 7c0ad6e8

fix: 看板组件样式放大缩小调整

Inline Side-by-side
Showing 5 changed files with 86 additions and 11 deletions
@@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 import { useDataFetch } from '../../../hook/socket/useSocket'; 9 import { useDataFetch } from '../../../hook/socket/useSocket';
10 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type'; 10 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  11 + import { useComponentScale } from '../../../hook/useComponentScale';
11 12
12 const props = defineProps<{ 13 const props = defineProps<{
13 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
@@ -91,6 +92,8 @@ @@ -91,6 +92,8 @@
91 }; 92 };
92 93
93 useDataFetch(props, updateFn); 94 useDataFetch(props, updateFn);
  95 +
  96 + const { getRatio } = useComponentScale(props);
94 </script> 97 </script>
95 98
96 <template> 99 <template>
@@ -134,15 +137,21 @@ @@ -134,15 +137,21 @@
134 137
135 <div 138 <div
136 class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center" 139 class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
137 - :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }" 140 + :style="{
  141 + color: getDesign.fontColor,
  142 + fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
  143 + }"
138 > 144 >
139 <div>{{ currentValue }}</div> 145 <div>{{ currentValue }}</div>
140 <div class="ml-1">{{ getDesign.unit }}</div> 146 <div class="ml-1">{{ getDesign.unit }}</div>
141 </div> 147 </div>
142 <div 148 <div
143 - class="text-gray-500 text-sm truncate" 149 + class="text-gray-500"
144 style="flex: 0 0 20px" 150 style="flex: 0 0 20px"
145 - :style="{ fontSize: getDesign.fontSize + 'px' }" 151 + :style="{
  152 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  153 + height: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  154 + }"
146 >{{ getDesign.attribute || '属性' }}</div 155 >{{ getDesign.attribute || '属性' }}</div
147 > 156 >
148 <UpdateTime v-show="getDesign.showTime" :time="time" /> 157 <UpdateTime v-show="getDesign.showTime" :time="time" />
@@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 import { useDataFetch } from '../../../hook/socket/useSocket'; 9 import { useDataFetch } from '../../../hook/socket/useSocket';
10 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type'; 10 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  11 + import { useComponentScale } from '../../../hook/useComponentScale';
11 12
12 const props = defineProps<{ 13 const props = defineProps<{
13 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
@@ -81,6 +82,8 @@ @@ -81,6 +82,8 @@
81 }; 82 };
82 83
83 useDataFetch(props, updateFn); 84 useDataFetch(props, updateFn);
  85 +
  86 + const { getRatio } = useComponentScale(props);
84 </script> 87 </script>
85 88
86 <template> 89 <template>
@@ -127,7 +130,10 @@ @@ -127,7 +130,10 @@
127 </svg> 130 </svg>
128 <div 131 <div
129 class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center" 132 class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
130 - :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }" 133 + :style="{
  134 + color: getDesign.fontColor,
  135 + fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
  136 + }"
131 > 137 >
132 <div>{{ currentValue }}</div> 138 <div>{{ currentValue }}</div>
133 <div class="ml-1">{{ getDesign.unit }}</div> 139 <div class="ml-1">{{ getDesign.unit }}</div>
@@ -135,7 +141,10 @@ @@ -135,7 +141,10 @@
135 <div 141 <div
136 class="text-gray-500" 142 class="text-gray-500"
137 style="flex: 0 0 20px" 143 style="flex: 0 0 20px"
138 - :style="{ fontSize: getDesign.fontSize + 'px', height: getDesign.fontSize + 'px' }" 144 + :style="{
  145 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  146 + height: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  147 + }"
139 >{{ getDesign.attribute || '属性' }}</div 148 >{{ getDesign.attribute || '属性' }}</div
140 > 149 >
141 <UpdateTime v-show="getDesign.showTime" :time="time" /> 150 <UpdateTime v-show="getDesign.showTime" :time="time" />
@@ -13,6 +13,8 @@ export const option: PublicPresetOptions = { @@ -13,6 +13,8 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.FONT_COLOR]: '#', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#',
14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
15 [ComponentConfigFieldEnum.SHOW_TIME]: false, 15 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  16 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
  17 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
16 }; 18 };
17 19
18 export default class Config extends PublicConfigClass implements CreateComponentType { 20 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -20,6 +20,45 @@ @@ -20,6 +20,45 @@
20 component: 'Checkbox', 20 component: 'Checkbox',
21 }, 21 },
22 { 22 {
  23 + field: ComponentConfigFieldEnum.FONT_SIZE,
  24 + label: '文本字体大小',
  25 + component: 'InputNumber',
  26 + defaultValue: 14,
  27 + componentProps: {
  28 + min: 0,
  29 + max: 100,
  30 + formatter: (e) => {
  31 + const value = e.replace(/^0/g, '');
  32 + if (value) {
  33 + return value.replace(/^0/g, '');
  34 + } else {
  35 + return 0;
  36 + }
  37 + },
  38 + },
  39 + },
  40 + {
  41 + field: ComponentConfigFieldEnum.MAX_NUMBER,
  42 + label: '最大值',
  43 + component: 'InputNumber',
  44 + defaultValue: 100,
  45 + componentProps: ({ formActionType }) => {
  46 + const { setFieldsValue } = formActionType;
  47 + return {
  48 + placeholder: '请输入最大值',
  49 + min: 100,
  50 + onChange: async (e) => {
  51 + if (!e) {
  52 + await nextTick();
  53 + setFieldsValue({
  54 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  55 + });
  56 + }
  57 + },
  58 + };
  59 + },
  60 + },
  61 + {
23 field: ComponentConfigFieldEnum.SHOW_TIME, 62 field: ComponentConfigFieldEnum.SHOW_TIME,
24 label: '显示时间', 63 label: '显示时间',
25 component: 'Checkbox', 64 component: 'Checkbox',
@@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 import { useDataFetch } from '../../../hook/socket/useSocket'; 9 import { useDataFetch } from '../../../hook/socket/useSocket';
10 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type'; 10 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  11 + import { useComponentScale } from '../../../hook/useComponentScale';
11 12
12 const props = defineProps<{ 13 const props = defineProps<{
13 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
@@ -37,13 +38,20 @@ @@ -37,13 +38,20 @@
37 38
38 const getDesign = computed(() => { 39 const getDesign = computed(() => {
39 const { persetOption, option } = props.config; 40 const { persetOption, option } = props.config;
40 - const { fontColor: presetFontColor, showTime: persetShowTime } = persetOption || {}; 41 + const {
  42 + fontColor: presetFontColor,
  43 + showTime: persetShowTime,
  44 + fontSize: persetFontSize,
  45 + valueSize: persetValueSize,
  46 + } = persetOption || {};
41 const { componentInfo, attribute, attributeName, attributeRename } = option || {}; 47 const { componentInfo, attribute, attributeName, attributeRename } = option || {};
42 - const { fontColor, showTime } = componentInfo || {}; 48 + const { fontColor, showTime, fontSize, valueSize } = componentInfo || {};
43 return { 49 return {
44 fontColor: fontColor ?? presetFontColor, 50 fontColor: fontColor ?? presetFontColor,
45 attribute: attributeRename || attributeName || attribute, 51 attribute: attributeRename || attributeName || attribute,
46 showTime: showTime ?? persetShowTime, 52 showTime: showTime ?? persetShowTime,
  53 + fontSize: fontSize || persetFontSize || 14,
  54 + valueSize: valueSize || persetValueSize || 20,
47 }; 55 };
48 }); 56 });
49 57
@@ -58,6 +66,8 @@ @@ -58,6 +66,8 @@
58 }; 66 };
59 67
60 useDataFetch(props, updateFn); 68 useDataFetch(props, updateFn);
  69 +
  70 + const { getRatio } = useComponentScale(props);
61 </script> 71 </script>
62 72
63 <template> 73 <template>
@@ -252,15 +262,21 @@ @@ -252,15 +262,21 @@
252 <div class="absolute w-full h-full flex justify-center items-center bg-transparent"> 262 <div class="absolute w-full h-full flex justify-center items-center bg-transparent">
253 <div 263 <div
254 class="transform translate-x-full text-lg text-gray-500" 264 class="transform translate-x-full text-lg text-gray-500"
255 - :style="{ color: getDesign.fontColor }" 265 + :style="{
  266 + color: getDesign.fontColor,
  267 + fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
  268 + }"
256 > 269 >
257 <span>{{ currentValue }}</span> 270 <span>{{ currentValue }}</span>
258 <span>{{ '℃' }}</span> 271 <span>{{ '℃' }}</span>
259 </div> 272 </div>
260 </div> 273 </div>
261 - <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{  
262 - getDesign.attribute || '属性'  
263 - }}</div> 274 + <div
  275 + class="text-gray-500"
  276 + style="flex: 0 0 20px"
  277 + :style="{ fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px' }"
  278 + >{{ getDesign.attribute || '属性' }}</div
  279 + >
264 <UpdateTime v-show="getDesign.showTime" :time="time" /> 280 <UpdateTime v-show="getDesign.showTime" :time="time" />
265 </main> 281 </main>
266 </template> 282 </template>