简柏林 / 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 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 9 import { useDataFetch } from '../../../hook/socket/useSocket';
10 10 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  11 + import { useComponentScale } from '../../../hook/useComponentScale';
11 12
12 13 const props = defineProps<{
13 14 config: ComponentPropsConfigType<typeof option>;
... ... @@ -91,6 +92,8 @@
91 92 };
92 93
93 94 useDataFetch(props, updateFn);
  95 +
  96 + const { getRatio } = useComponentScale(props);
94 97 </script>
95 98
96 99 <template>
... ... @@ -134,15 +137,21 @@
134 137
135 138 <div
136 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 145 <div>{{ currentValue }}</div>
140 146 <div class="ml-1">{{ getDesign.unit }}</div>
141 147 </div>
142 148 <div
143   - class="text-gray-500 text-sm truncate"
  149 + class="text-gray-500"
144 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 155 >{{ getDesign.attribute || '属性' }}</div
147 156 >
148 157 <UpdateTime v-show="getDesign.showTime" :time="time" />
... ...
... ... @@ -8,6 +8,7 @@
8 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 9 import { useDataFetch } from '../../../hook/socket/useSocket';
10 10 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  11 + import { useComponentScale } from '../../../hook/useComponentScale';
11 12
12 13 const props = defineProps<{
13 14 config: ComponentPropsConfigType<typeof option>;
... ... @@ -81,6 +82,8 @@
81 82 };
82 83
83 84 useDataFetch(props, updateFn);
  85 +
  86 + const { getRatio } = useComponentScale(props);
84 87 </script>
85 88
86 89 <template>
... ... @@ -127,7 +130,10 @@
127 130 </svg>
128 131 <div
129 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 138 <div>{{ currentValue }}</div>
133 139 <div class="ml-1">{{ getDesign.unit }}</div>
... ... @@ -135,7 +141,10 @@
135 141 <div
136 142 class="text-gray-500"
137 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 148 >{{ getDesign.attribute || '属性' }}</div
140 149 >
141 150 <UpdateTime v-show="getDesign.showTime" :time="time" />
... ...
... ... @@ -13,6 +13,8 @@ export const option: PublicPresetOptions = {
13 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#',
14 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
15 15 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  16 + [ComponentConfigFieldEnum.FONT_SIZE]: 14,
  17 + [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
16 18 };
17 19
18 20 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -20,6 +20,45 @@
20 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 62 field: ComponentConfigFieldEnum.SHOW_TIME,
24 63 label: '显示时间',
25 64 component: 'Checkbox',
... ...
... ... @@ -8,6 +8,7 @@
8 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 9 import { useDataFetch } from '../../../hook/socket/useSocket';
10 10 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  11 + import { useComponentScale } from '../../../hook/useComponentScale';
11 12
12 13 const props = defineProps<{
13 14 config: ComponentPropsConfigType<typeof option>;
... ... @@ -37,13 +38,20 @@
37 38
38 39 const getDesign = computed(() => {
39 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 47 const { componentInfo, attribute, attributeName, attributeRename } = option || {};
42   - const { fontColor, showTime } = componentInfo || {};
  48 + const { fontColor, showTime, fontSize, valueSize } = componentInfo || {};
43 49 return {
44 50 fontColor: fontColor ?? presetFontColor,
45 51 attribute: attributeRename || attributeName || attribute,
46 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 66 };
59 67
60 68 useDataFetch(props, updateFn);
  69 +
  70 + const { getRatio } = useComponentScale(props);
61 71 </script>
62 72
63 73 <template>
... ... @@ -252,15 +262,21 @@
252 262 <div class="absolute w-full h-full flex justify-center items-center bg-transparent">
253 263 <div
254 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 270 <span>{{ currentValue }}</span>
258 271 <span>{{ '℃' }}</span>
259 272 </div>
260 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 280 <UpdateTime v-show="getDesign.showTime" :time="time" />
265 281 </main>
266 282 </template>
... ...