简柏林 / thingskit-front · Commits

Commit 32a616b51d7668eddc130176c4c3b573234995b0

Authored by xp.Huang
2 parents abc8c20f 9498bd12

Merge branch 'fix/board-style-issues' into 'main_dev' 

fix: 优化看板组件放大缩小

See merge request yunteng/thingskit-front!941
Inline Side-by-side
Showing 45 changed files with 402 additions and 127 deletions
@@ -3,14 +3,12 @@ @@ -3,14 +3,12 @@
3 3
4 defineProps<{ 4 defineProps<{
5 config: ComponentPropsConfigType; 5 config: ComponentPropsConfigType;
  6 + getRatio?: string | number;
6 }>(); 7 }>();
7 </script> 8 </script>
8 9
9 <template> 10 <template>
10 - <div  
11 - v-if="config.option?.componentInfo?.showDeviceName"  
12 - class="h-8 font-semibold w-1/2 overflow-hidden overflow-ellipsis whitespace-nowrap"  
13 - > 11 + <div v-if="config.option?.componentInfo?.showDeviceName" class="h-6 font-semibold">
14 {{ config.option.deviceRename || config.option.deviceName }} 12 {{ config.option.deviceRename || config.option.deviceName }}
15 </div> 13 </div>
16 </template> 14 </template>
@@ -11,7 +11,9 @@ @@ -11,7 +11,9 @@
11 </script> 11 </script>
12 12
13 <template> 13 <template>
14 - <div class="flex p-5 justify-center items-center text-gray-400 text-xs w-full dark:text-light-50"> 14 + <div
  15 + class="flex p-2.5 justify-center items-center text-gray-400 text-xs w-full dark:text-light-50"
  16 + >
15 <Tooltip :title="formatDate(time)"> 17 <Tooltip :title="formatDate(time)">
16 <div class="truncate px-1"> 18 <div class="truncate px-1">
17 <span>更新时间:</span> 19 <span>更新时间:</span>
@@ -43,6 +43,7 @@ @@ -43,6 +43,7 @@
43 defaultValue: 14, 43 defaultValue: 14,
44 componentProps: { 44 componentProps: {
45 min: 0, 45 min: 0,
  46 + max: 100,
46 formatter: (e) => { 47 formatter: (e) => {
47 const value = e.replace(/^0/g, ''); 48 const value = e.replace(/^0/g, '');
48 if (value) { 49 if (value) {
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 showTime: boolean; 24 showTime: boolean;
25 status: IStatus; 25 status: IStatus;
26 time: number; 26 time: number;
27 - fontSize?: number; 27 + fontSize?: number | any;
28 } 28 }
29 29
30 const props = defineProps<{ 30 const props = defineProps<{
@@ -140,7 +140,7 @@ @@ -140,7 +140,7 @@
140 showTime: item.showTime, 140 showTime: item.showTime,
141 status: { text: '', color: '' }, 141 status: { text: '', color: '' },
142 time: 0, 142 time: 0,
143 - fontSize: item.fontSize, 143 + fontSize: item.fontSize || 14,
144 }; 144 };
145 }) as any; 145 }) as any;
146 const { data, update } = message; 146 const { data, update } = message;
@@ -164,14 +164,16 @@ @@ -164,14 +164,16 @@
164 164
165 useCustomDataFetch(props, transformMessage, updateFn); 165 useCustomDataFetch(props, transformMessage, updateFn);
166 166
167 - const { getScale } = useComponentScale(props); 167 + const { getScale, getRatio } = useComponentScale(props);
168 </script> 168 </script>
169 169
170 <template> 170 <template>
171 <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">
172 <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">
173 <div class="flex justify-center items-center flex-col"> 173 <div class="flex justify-center items-center flex-col">
174 - <div class="text-gray-500 truncate" :style="{ fontSize: item.fontSize + 'px' }" 174 + <div
  175 + class="text-gray-500 truncate"
  176 + :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
175 >{{ 177 >{{
176 item.status.text 178 item.status.text
177 ? item.showDeviceName 179 ? item.showDeviceName
@@ -180,7 +182,13 @@ @@ -180,7 +182,13 @@
180 : '当前设备未发现告警' 182 : '当前设备未发现告警'
181 }}{{ item.status.text }}</div 183 }}{{ item.status.text }}</div
182 > 184 >
183 - <div :class="item.status.color"></div> 185 + <div
  186 + :class="item.status.color"
  187 + :style="{
  188 + height: (getRatio ? getRatio * 70 : 70) + 'px',
  189 + width: (getRatio ? getRatio * 70 : 70) + 'px',
  190 + }"
  191 + ></div>
184 </div> 192 </div>
185 <UpdateTime v-show="item.showTime" :time="item.time" /> 193 <UpdateTime v-show="item.showTime" :time="item.time" />
186 </div> 194 </div>
@@ -190,8 +198,6 @@ @@ -190,8 +198,6 @@
190 .alarm_state_critical { 198 .alarm_state_critical {
191 background: #cf1322; 199 background: #cf1322;
192 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #cf1322; 200 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #cf1322;
193 - width: 60px;  
194 - height: 60px;  
195 border-radius: 50%; 201 border-radius: 50%;
196 margin: 10px 0; 202 margin: 10px 0;
197 } 203 }
@@ -199,8 +205,6 @@ @@ -199,8 +205,6 @@
199 .alarm_state_major { 205 .alarm_state_major {
200 background: #ff6e03; 206 background: #ff6e03;
201 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff6e03; 207 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff6e03;
202 - width: 60px;  
203 - height: 60px;  
204 border-radius: 50%; 208 border-radius: 50%;
205 margin: 10px 0; 209 margin: 10px 0;
206 } 210 }
@@ -208,8 +212,6 @@ @@ -208,8 +212,6 @@
208 .alarm_state_minor { 212 .alarm_state_minor {
209 background: #ff0; 213 background: #ff0;
210 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff0; 214 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff0;
211 - width: 60px;  
212 - height: 60px;  
213 border-radius: 50%; 215 border-radius: 50%;
214 margin: 10px 0; 216 margin: 10px 0;
215 } 217 }
@@ -217,8 +219,6 @@ @@ -217,8 +219,6 @@
217 .alarm_state_warning { 219 .alarm_state_warning {
218 background: #edf760; 220 background: #edf760;
219 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #edf760; 221 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #edf760;
220 - width: 60px;  
221 - height: 60px;  
222 border-radius: 50%; 222 border-radius: 50%;
223 margin: 10px 0; 223 margin: 10px 0;
224 } 224 }
@@ -226,8 +226,6 @@ @@ -226,8 +226,6 @@
226 .alarm_state_other { 226 .alarm_state_other {
227 background: #d3adf7; 227 background: #d3adf7;
228 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #d3adf7; 228 box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #d3adf7;
229 - width: 60px;  
230 - height: 60px;  
231 border-radius: 50%; 229 border-radius: 50%;
232 margin: 10px 0; 230 margin: 10px 0;
233 } 231 }
@@ -49,6 +49,13 @@ export const formSchemas = (): FormSchema[] => { @@ -49,6 +49,13 @@ export const formSchemas = (): FormSchema[] => {
49 }; 49 };
50 }, 50 },
51 }, 51 },
  52 +
  53 + // {
  54 + // field: 'deviceIds',
  55 + // label: '设备id',
  56 + // show: false,
  57 + // component: 'Input',
  58 + // },
52 // { 59 // {
53 // field: DataSourceField.DEVICE_PROFILE_ID, 60 // field: DataSourceField.DEVICE_PROFILE_ID,
54 // component: 'ApiSelect', 61 // component: 'ApiSelect',
@@ -143,8 +150,10 @@ export const formSchemas = (): FormSchema[] => { @@ -143,8 +150,10 @@ export const formSchemas = (): FormSchema[] => {
143 return []; 150 return [];
144 }, 151 },
145 onChange(_value, record: MasterDeviceList) { 152 onChange(_value, record: MasterDeviceList) {
  153 + console.log(record, 'record');
146 setFieldsValue({ 154 setFieldsValue({
147 [DataSourceField.DEVICE_NAME]: record?.label, 155 [DataSourceField.DEVICE_NAME]: record?.label,
  156 + deviceIds: record?.id,
148 }); 157 });
149 }, 158 },
150 placeholder: '请选择设备', 159 placeholder: '请选择设备',
@@ -16,6 +16,7 @@ @@ -16,6 +16,7 @@
16 import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime'; 16 import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
17 17
18 import { getMessage } from '../config'; 18 import { getMessage } from '../config';
  19 + // import { defHttp } from '/@/utils/http/axios';
19 20
20 const props = defineProps<{ 21 const props = defineProps<{
21 config: ComponentPropsConfigType<typeof option>; 22 config: ComponentPropsConfigType<typeof option>;
@@ -105,6 +106,13 @@ @@ -105,6 +106,13 @@
105 columns: alarmColumns, 106 columns: alarmColumns,
106 }); 107 });
107 108
  109 + // const getAlarmList = (params) => {
  110 + // return defHttp.post({
  111 + // url: '/alarm/configuration/page',
  112 + // params,
  113 + // });
  114 + // };
  115 +
108 const getDesign = computed(() => { 116 const getDesign = computed(() => {
109 const { persetOption, option } = props.config; 117 const { persetOption, option } = props.config;
110 const { dataSource = [] } = option || {}; 118 const { dataSource = [] } = option || {};
@@ -112,8 +120,15 @@ @@ -112,8 +120,15 @@
112 return { 120 return {
113 dataSource: dataSource?.map((item) => { 121 dataSource: dataSource?.map((item) => {
114 const { unit, showDeviceName } = item.componentInfo || {}; 122 const { unit, showDeviceName } = item.componentInfo || {};
115 - const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =  
116 - item; 123 + const {
  124 + attribute,
  125 + attributeName,
  126 + attributeRename,
  127 + deviceName,
  128 + deviceRename,
  129 + deviceId,
  130 + // deviceIds,
  131 + } = item;
117 return { 132 return {
118 unit: unit ?? presetUnit, 133 unit: unit ?? presetUnit,
119 attribute, 134 attribute,
@@ -123,6 +138,7 @@ @@ -123,6 +138,7 @@
123 deviceName, 138 deviceName,
124 deviceRename, 139 deviceRename,
125 id: deviceId, 140 id: deviceId,
  141 + // deviceIds,
126 }; 142 };
127 }), 143 }),
128 }; 144 };
@@ -167,6 +183,20 @@ @@ -167,6 +183,20 @@
167 useCustomDataFetch(props, transformMessage, updateFn); 183 useCustomDataFetch(props, transformMessage, updateFn);
168 184
169 onMounted(async () => { 185 onMounted(async () => {
  186 + // const deviceIds = unref(getDesign).dataSource.map((item) => item.deviceIds);
  187 + // let { startTs, endTs, time, pageSize }: any = unref(alarmForm) || {};
  188 + // if (!startTs || !endTs) {
  189 + // startTs = Date.now() - time;
  190 + // endTs = Date.now();
  191 + // }
  192 + // const values = {
  193 + // deviceIds,
  194 + // page: 1,
  195 + // pageSize,
  196 + // startTime: Number(startTs),
  197 + // endTime: Number(endTs),
  198 + // };
  199 +
170 await nextTick(); 200 await nextTick();
171 resize(); 201 resize();
172 }); 202 });
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
15 }>(); 15 }>();
16 16
17 - const { getScale } = useComponentScale(props); 17 + const { getScale, getRatio } = useComponentScale(props);
18 18
19 const currentValue = ref(false); 19 const currentValue = ref(false);
20 20
@@ -73,7 +73,7 @@ @@ -73,7 +73,7 @@
73 <DeviceName :config="config" class="text-center" /> 73 <DeviceName :config="config" class="text-center" />
74 <main class="w-full h-full flex flex-col justify-center items-center"> 74 <main class="w-full h-full flex flex-col justify-center items-center">
75 <Spin :spinning="loading"> 75 <Spin :spinning="loading">
76 - <label class="sliding-switch" :style="getScale"> 76 + <label class="sliding-switch" :style="{ transform: `scale(${getRatio})` }">
77 <input 77 <input
78 type="checkbox" 78 type="checkbox"
79 :value="currentValue" 79 :value="currentValue"
@@ -85,8 +85,11 @@ @@ -85,8 +85,11 @@
85 <span class="off">OFF</span> 85 <span class="off">OFF</span>
86 </label> 86 </label>
87 <div 87 <div
88 - class="text-center mt-2 text-gray-700"  
89 - :style="{ ...getScale, fontSize: getDesign.fontSize + 'px' }" 88 + class="text-center text-gray-700"
  89 + :style="{
  90 + ...getScale,
  91 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  92 + }"
90 > 93 >
91 {{ getDesign.attribute || '属性' }} 94 {{ getDesign.attribute || '属性' }}
92 </div> 95 </div>
@@ -97,7 +100,15 @@ @@ -97,7 +100,15 @@
97 100
98 <style scoped lang="less"> 101 <style scoped lang="less">
99 :deep(.ant-spin-container) { 102 :deep(.ant-spin-container) {
100 - @apply !flex !flex-col justify-center items-center !flex-nowrap; 103 + @apply !flex !flex-col !justify-evenly items-center !flex-nowrap;
  104 +
  105 + width: 100%;
  106 + height: 100%;
  107 + }
  108 +
  109 + :deep(.ant-spin-nested-loading) {
  110 + width: 100%;
  111 + height: 100%;
101 } 112 }
102 113
103 .sliding-switch { 114 .sliding-switch {
@@ -75,28 +75,35 @@ @@ -75,28 +75,35 @@
75 }; 75 };
76 76
77 useDataFetch(props, updateFn); 77 useDataFetch(props, updateFn);
78 - const { getScale } = useComponentScale(props); 78 + const { getScale, getRatio } = useComponentScale(props);
79 </script> 79 </script>
80 80
81 <template> 81 <template>
82 <main class="w-full h-full flex flex-col justify-center"> 82 <main class="w-full h-full flex flex-col justify-center">
83 <DeviceName :config="config" class="text-center" /> 83 <DeviceName :config="config" class="text-center" />
84 - <main class="w-full h-full flex justify-center items-center" :style="getScale">  
85 - <div class="flex flex-col justify-center items-center mr-20"> 84 + <main class="w-full h-full flex justify-around items-center" :style="getScale">
  85 + <div class="flex flex-col justify-center items-center">
86 <SvgIcon 86 <SvgIcon
87 :name="getDesign.icon" 87 :name="getDesign.icon"
88 prefix="iconfont" 88 prefix="iconfont"
89 :style="{ color: getDesign.iconColor }" 89 :style="{ color: getDesign.iconColor }"
90 - :size="50" 90 + :size="getRatio ? getRatio * 60 : 60"
91 /> 91 />
92 <span 92 <span
93 class="mt-3 truncate text-gray-500 text-center" 93 class="mt-3 truncate text-gray-500 text-center"
94 - :style="{ fontSize: getDesign.fontSize + 'px' }" 94 + :style="{
  95 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  96 + }"
95 > 97 >
96 {{ getDesign.attribute || '属性' }} 98 {{ getDesign.attribute || '属性' }}
97 </span> 99 </span>
98 </div> 100 </div>
99 - <Switch v-model:checked="checked" :loading="loading" @change="handleChange" /> 101 + <Switch
  102 + :style="{ transform: ` scale(${getRatio})` }"
  103 + v-model:checked="checked"
  104 + :loading="loading"
  105 + @change="handleChange"
  106 + />
100 </main> 107 </main>
101 </main> 108 </main>
102 </template> 109 </template>
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
15 }>(); 15 }>();
16 16
17 - const { getScale } = useComponentScale(props); 17 + const { getScale, getRatio } = useComponentScale(props);
18 18
19 const currentValue = ref(false); 19 const currentValue = ref(false);
20 20
@@ -72,7 +72,7 @@ @@ -72,7 +72,7 @@
72 <DeviceName :config="config" class="text-center" /> 72 <DeviceName :config="config" class="text-center" />
73 <main class="w-full h-full flex flex-col justify-center items-center"> 73 <main class="w-full h-full flex flex-col justify-center items-center">
74 <Spin :spinning="loading" class="w-full h-full"> 74 <Spin :spinning="loading" class="w-full h-full">
75 - <div class="toggle-switch" :style="getScale"> 75 + <div class="toggle-switch" :style="{ transform: `scale(${getRatio})` }">
76 <label class="switch"> 76 <label class="switch">
77 <input type="checkbox" :checked="currentValue" @change="handleChange" /> 77 <input type="checkbox" :checked="currentValue" @change="handleChange" />
78 <div class="button"> 78 <div class="button">
@@ -86,7 +86,10 @@ @@ -86,7 +86,10 @@
86 </div> 86 </div>
87 <div 87 <div
88 class="text-center mt-2 text-gray-500" 88 class="text-center mt-2 text-gray-500"
89 - :style="{ ...getScale, fontSize: getDesign.fontSize + 'px' }" 89 + :style="{
  90 + ...getScale,
  91 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  92 + }"
90 >{{ getDesign.attribute || '属性' }}</div 93 >{{ getDesign.attribute || '属性' }}</div
91 > 94 >
92 </Spin> 95 </Spin>
@@ -96,7 +99,15 @@ @@ -96,7 +99,15 @@
96 99
97 <style scoped> 100 <style scoped>
98 :deep(.ant-spin-container) { 101 :deep(.ant-spin-container) {
99 - @apply !flex !flex-col justify-center items-center; 102 + @apply !flex !flex-col justify-evenly items-center;
  103 +
  104 + width: 100%;
  105 + height: 100%;
  106 + }
  107 +
  108 + :deep(.ant-spin-nested-loading) {
  109 + width: 100%;
  110 + height: 100%;
100 } 111 }
101 112
102 .toggle-switch { 113 .toggle-switch {
@@ -198,7 +198,7 @@ @@ -198,7 +198,7 @@
198 }; 198 };
199 199
200 useDataFetch(props, updateFn); 200 useDataFetch(props, updateFn);
201 - const { getScale } = useComponentScale(props); 201 + const { getScale, getRatio } = useComponentScale(props);
202 </script> 202 </script>
203 203
204 <template> 204 <template>
@@ -208,13 +208,21 @@ @@ -208,13 +208,21 @@
208 <Spin :spinning="loading" class="w-full h-full"> 208 <Spin :spinning="loading" class="w-full h-full">
209 <div class="flex flex-col" style="width: 80%"> 209 <div class="flex flex-col" style="width: 80%">
210 <span 210 <span
211 - :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"  
212 - class="font-bold text-xl mt-3 truncate text-center" 211 + :style="{
  212 + color: getDesign.fontColor,
  213 + fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
  214 + }"
  215 + class="font-bold text-xl mt-3 text-center"
213 >{{ sliderValue }}</span 216 >{{ sliderValue }}</span
214 > 217 >
215 <Slider 218 <Slider
216 ref="sliderEl" 219 ref="sliderEl"
217 - :style="{ '--slider-color': getDesign.controlBarColor }" 220 + :style="{
  221 + '--slider-color': getDesign.controlBarColor,
  222 + '--slider-handle': (getRatio ? getRatio * 14 : 14) + 'px',
  223 + '--slider-height': (getRatio ? getRatio * 4 : 4) + 'px',
  224 + '--slider-top': -(getRatio ? getRatio * 5 : 5) + 'px',
  225 + }"
218 class="no-drag" 226 class="no-drag"
219 :value="sliderValue" 227 :value="sliderValue"
220 :min="getDesign.minNumber" 228 :min="getDesign.minNumber"
@@ -225,8 +233,11 @@ @@ -225,8 +233,11 @@
225 /> 233 />
226 234
227 <span 235 <span
228 - :style="{ color: getDesign.textColor, fontSize: getDesign.fontSize + 'px' }"  
229 - class="mt-3 truncate font-bold text-xs text-center" 236 + :style="{
  237 + color: getDesign.textColor,
  238 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  239 + }"
  240 + class="mt-3 truncate font-bold text-center"
230 > 241 >
231 {{ getDesign.attribute || '属性' }} 242 {{ getDesign.attribute || '属性' }}
232 </span> 243 </span>
@@ -238,6 +249,21 @@ @@ -238,6 +249,21 @@
238 <style lang="less" scoped> 249 <style lang="less" scoped>
239 :deep(.ant-slider-track) { 250 :deep(.ant-slider-track) {
240 background: var(--slider-color) !important; 251 background: var(--slider-color) !important;
  252 + height: var(--slider-height) !important;
  253 + }
  254 +
  255 + :deep(.ant-slider-handle) {
  256 + height: var(--slider-handle) !important;
  257 + width: var(--slider-handle) !important;
  258 + margin-top: var(--slider-top) !important;
  259 + }
  260 +
  261 + :deep(.ant-slider-step) {
  262 + height: var(--slider-height) !important;
  263 + }
  264 +
  265 + :deep(.ant-slider-rail) {
  266 + height: var(--slider-height) !important;
241 } 267 }
242 268
243 :deep(.ant-spin-container) { 269 :deep(.ant-spin-container) {
@@ -148,21 +148,26 @@ @@ -148,21 +148,26 @@
148 <SvgIcon 148 <SvgIcon
149 :name="item.icon!" 149 :name="item.icon!"
150 prefix="iconfont" 150 prefix="iconfont"
151 - :size="getRatio ? 25 * getRatio : 25" 151 + :size="getRatio ? 30 * getRatio : 30"
152 :style="{ color: item.iconColor }" 152 :style="{ color: item.iconColor }"
153 /> 153 />
154 154
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> 155 + <div
  156 + class="text-gray-500 truncate ml-6"
  157 + :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
  158 + >{{
  159 + `${item.deviceName} - ${
  160 + item.commandType ? CommandTypeEnumLIst[item.commandType].name : item.attributeName
  161 + }`
  162 + }}</div
  163 + >
160 </div> 164 </div>
161 165
162 <Switch 166 <Switch
163 v-model:checked="item.checked" 167 v-model:checked="item.checked"
164 :loading="loading" 168 :loading="loading"
165 @change="handleChange(index, item.checked)" 169 @change="handleChange(index, item.checked)"
  170 + :style="{ transform: `scale(${getRatio || 1})` }"
166 /> 171 />
167 </div> 172 </div>
168 </main> 173 </main>
@@ -56,6 +56,7 @@ @@ -56,6 +56,7 @@
56 defaultValue: 14, 56 defaultValue: 14,
57 componentProps: { 57 componentProps: {
58 min: 0, 58 min: 0,
  59 + max: 100,
59 formatter: (e) => { 60 formatter: (e) => {
60 const value = e.replace(/^0/g, ''); 61 const value = e.replace(/^0/g, '');
61 if (value) { 62 if (value) {
@@ -73,6 +74,7 @@ @@ -73,6 +74,7 @@
73 defaultValue: 14, 74 defaultValue: 14,
74 componentProps: { 75 componentProps: {
75 min: 0, 76 min: 0,
  77 + max: 100,
76 formatter: (e) => { 78 formatter: (e) => {
77 const value = e.replace(/^0/g, ''); 79 const value = e.replace(/^0/g, '');
78 if (value) { 80 if (value) {
@@ -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" />
@@ -62,6 +62,7 @@ @@ -62,6 +62,7 @@
62 defaultValue: 14, 62 defaultValue: 14,
63 componentProps: { 63 componentProps: {
64 min: 0, 64 min: 0,
  65 + max: 100,
65 formatter: (e) => { 66 formatter: (e) => {
66 const value = e.replace(/^0/g, ''); 67 const value = e.replace(/^0/g, '');
67 if (value) { 68 if (value) {
@@ -79,6 +80,7 @@ @@ -79,6 +80,7 @@
79 defaultValue: 14, 80 defaultValue: 14,
80 componentProps: { 81 componentProps: {
81 min: 0, 82 min: 0,
  83 + max: 100,
82 formatter: (e) => { 84 formatter: (e) => {
83 const value = e.replace(/^0/g, ''); 85 const value = e.replace(/^0/g, '');
84 if (value) { 86 if (value) {
@@ -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>
@@ -74,7 +74,7 @@ @@ -74,7 +74,7 @@
74 74
75 useDataFetch(props, updateFn); 75 useDataFetch(props, updateFn);
76 76
77 - const { getScale } = useComponentScale(props); 77 + const { getRatio } = useComponentScale(props);
78 </script> 78 </script>
79 79
80 <template> 80 <template>
@@ -86,7 +86,10 @@ @@ -86,7 +86,10 @@
86 <DeviceName class="text-center" :config="config" /> 86 <DeviceName class="text-center" :config="config" />
87 87
88 <div class="flex-1 flex justify-center items-center"> 88 <div class="flex-1 flex justify-center items-center">
89 - <div class="flex px-4 items-center transform scale-75" :style="getScale"> 89 + <div
  90 + class="flex px-4 items-center transform scale-75"
  91 + :style="{ transform: `scale(${getRatio})` }"
  92 + >
90 <Space 93 <Space
91 justify="end" 94 justify="end"
92 class="justify-end" 95 class="justify-end"
@@ -56,6 +56,7 @@ @@ -56,6 +56,7 @@
56 defaultValue: 14, 56 defaultValue: 14,
57 componentProps: { 57 componentProps: {
58 min: 0, 58 min: 0,
  59 + max: 100,
59 formatter: (e) => { 60 formatter: (e) => {
60 const value = e.replace(/^0/g, ''); 61 const value = e.replace(/^0/g, '');
61 if (value) { 62 if (value) {
@@ -73,6 +74,7 @@ @@ -73,6 +74,7 @@
73 defaultValue: 14, 74 defaultValue: 14,
74 componentProps: { 75 componentProps: {
75 min: 0, 76 min: 0,
  77 + max: 100,
76 formatter: (e) => { 78 formatter: (e) => {
77 const value = e.replace(/^0/g, ''); 79 const value = e.replace(/^0/g, '');
78 if (value) { 80 if (value) {
@@ -83,8 +83,8 @@ @@ -83,8 +83,8 @@
83 min: 0, 83 min: 0,
84 max: maxNumber, 84 max: maxNumber,
85 center: ['50%', '60%'], 85 center: ['50%', '60%'],
86 - startAngle: 150,  
87 - endAngle: 30, 86 + startAngle: 155,
  87 + endAngle: 25,
88 progress: { 88 progress: {
89 // 进度条 89 // 进度条
90 show: true, 90 show: true,
@@ -221,13 +221,15 @@ @@ -221,13 +221,15 @@
221 class="w-full h-full flex flex-col justify-center items-center" 221 class="w-full h-full flex flex-col justify-center items-center"
222 :class="!getDesign.showTime && 'p-5'" 222 :class="!getDesign.showTime && 'p-5'"
223 > 223 >
224 - <DeviceName :config="config" /> 224 + <DeviceName :config="config" class="mt-1" />
225 <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">
226 <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">
227 </div> 227 </div>
228 <div 228 <div
229 class="text-gray-500 text-center truncate" 229 class="text-gray-500 text-center truncate"
230 - :style="{ fontSize: getDesign.fontSize + 'px' }" 230 + :style="{
  231 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  232 + }"
231 >{{ getDesign.attribute || '湿度' }}</div 233 >{{ getDesign.attribute || '湿度' }}</div
232 > 234 >
233 </div> 235 </div>
@@ -70,6 +70,7 @@ @@ -70,6 +70,7 @@
70 defaultValue: 14, 70 defaultValue: 14,
71 componentProps: { 71 componentProps: {
72 min: 0, 72 min: 0,
  73 + max: 100,
73 formatter: (e) => { 74 formatter: (e) => {
74 const value = e.replace(/^0/g, ''); 75 const value = e.replace(/^0/g, '');
75 if (value) { 76 if (value) {
@@ -87,6 +88,7 @@ @@ -87,6 +88,7 @@
87 defaultValue: 14, 88 defaultValue: 14,
88 componentProps: { 89 componentProps: {
89 min: 0, 90 min: 0,
  91 + max: 100,
90 formatter: (e) => { 92 formatter: (e) => {
91 const value = e.replace(/^0/g, ''); 93 const value = e.replace(/^0/g, '');
92 if (value) { 94 if (value) {
@@ -49,6 +49,7 @@ @@ -49,6 +49,7 @@
49 defaultValue: 14, 49 defaultValue: 14,
50 componentProps: { 50 componentProps: {
51 min: 0, 51 min: 0,
  52 + max: 100,
52 formatter: (e) => { 53 formatter: (e) => {
53 const value = e.replace(/^0/g, ''); 54 const value = e.replace(/^0/g, '');
54 if (value) { 55 if (value) {
@@ -66,6 +67,7 @@ @@ -66,6 +67,7 @@
66 defaultValue: 14, 67 defaultValue: 14,
67 componentProps: { 68 componentProps: {
68 min: 0, 69 min: 0,
  70 + max: 100,
69 formatter: (e) => { 71 formatter: (e) => {
70 const value = e.replace(/^0/g, ''); 72 const value = e.replace(/^0/g, '');
71 if (value) { 73 if (value) {
@@ -217,9 +217,13 @@ @@ -217,9 +217,13 @@
217 <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">
218 <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">
219 </div> 219 </div>
220 - <div class="text-gray-500 text-center" :style="{ fontSize: getDesign.fontSize + 'px' }">{{  
221 - getDesign.attribute || '速度'  
222 - }}</div> 220 + <div
  221 + class="text-gray-500 text-center"
  222 + :style="{
  223 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  224 + }"
  225 + >{{ getDesign.attribute || '速度' }}</div
  226 + >
223 </div> 227 </div>
224 <UpdateTime v-if="getDesign.showTime" :time="time" /> 228 <UpdateTime v-if="getDesign.showTime" :time="time" />
225 </main> 229 </main>
@@ -60,6 +60,7 @@ @@ -60,6 +60,7 @@
60 defaultValue: 14, 60 defaultValue: 14,
61 componentProps: { 61 componentProps: {
62 min: 0, 62 min: 0,
  63 + max: 100,
63 formatter: (e) => { 64 formatter: (e) => {
64 const value = e.replace(/^0/g, ''); 65 const value = e.replace(/^0/g, '');
65 if (value) { 66 if (value) {
@@ -77,6 +78,7 @@ @@ -77,6 +78,7 @@
77 defaultValue: 14, 78 defaultValue: 14,
78 componentProps: { 79 componentProps: {
79 min: 0, 80 min: 0,
  81 + max: 100,
80 formatter: (e) => { 82 formatter: (e) => {
81 const value = e.replace(/^0/g, ''); 83 const value = e.replace(/^0/g, '');
82 if (value) { 84 if (value) {
@@ -107,7 +107,7 @@ @@ -107,7 +107,7 @@
107 width: '60%', 107 width: '60%',
108 lineHeight: 10, 108 lineHeight: 10,
109 borderRadius: 8, 109 borderRadius: 8,
110 - offsetCenter: [0, '40%'], 110 + offsetCenter: [0, '50%'],
111 fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize, 111 fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
112 fontWeight: 'bolder', 112 fontWeight: 'bolder',
113 formatter: `{value} ${unit ?? ''}`, 113 formatter: `{value} ${unit ?? ''}`,
@@ -240,7 +240,7 @@ @@ -240,7 +240,7 @@
240 > 240 >
241 <DeviceName :config="config" /> 241 <DeviceName :config="config" />
242 <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">
243 - <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-full flex justify-center items-center flex-col">
244 </div> 244 </div>
245 <div 245 <div
246 class="text-gray-500 text-center truncate" 246 class="text-gray-500 text-center truncate"
@@ -83,6 +83,7 @@ @@ -83,6 +83,7 @@
83 defaultValue: 14, 83 defaultValue: 14,
84 componentProps: { 84 componentProps: {
85 min: 0, 85 min: 0,
  86 + max: 100,
86 formatter: (e) => { 87 formatter: (e) => {
87 const value = e.replace(/^0/g, ''); 88 const value = e.replace(/^0/g, '');
88 if (value) { 89 if (value) {
@@ -100,6 +101,7 @@ @@ -100,6 +101,7 @@
100 defaultValue: 14, 101 defaultValue: 14,
101 componentProps: { 102 componentProps: {
102 min: 0, 103 min: 0,
  104 + max: 100,
103 formatter: (e) => { 105 formatter: (e) => {
104 const value = e.replace(/^0/g, ''); 106 const value = e.replace(/^0/g, '');
105 if (value) { 107 if (value) {
@@ -31,6 +31,7 @@ @@ -31,6 +31,7 @@
31 defaultValue: 14, 31 defaultValue: 14,
32 componentProps: { 32 componentProps: {
33 min: 0, 33 min: 0,
  34 + max: 100,
34 formatter: (e) => { 35 formatter: (e) => {
35 const value = e.replace(/^0/g, ''); 36 const value = e.replace(/^0/g, '');
36 if (value) { 37 if (value) {
@@ -61,7 +61,7 @@ @@ -61,7 +61,7 @@
61 61
62 useDataFetch(props, updateFn); 62 useDataFetch(props, updateFn);
63 63
64 - const { getScale } = useComponentScale(props); 64 + const { getScale, getRatio } = useComponentScale(props);
65 </script> 65 </script>
66 66
67 <template> 67 <template>
@@ -77,12 +77,18 @@ @@ -77,12 +77,18 @@
77 :style="{ 77 :style="{
78 '--open-color': getDesign.openColor, 78 '--open-color': getDesign.openColor,
79 '--close-color': getDesign.closeColor, 79 '--close-color': getDesign.closeColor,
  80 + width: (getRatio ? getRatio * 70 : 70) + 'px',
  81 + height: (getRatio ? getRatio * 70 : 70) + 'px',
80 }" 82 }"
81 :class="isOpenClose ? 'switch_open' : 'switch_close'" 83 :class="isOpenClose ? 'switch_open' : 'switch_close'"
82 ></div> 84 ></div>
83 - <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{  
84 - getDesign.attribute  
85 - }}</div> 85 + <div
  86 + class="text-gray-500 truncate"
  87 + :style="{
  88 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  89 + }"
  90 + >{{ getDesign.attribute }}</div
  91 + >
86 </div> 92 </div>
87 <UpdateTime v-if="getDesign.showTime" :time="time" /> 93 <UpdateTime v-if="getDesign.showTime" :time="time" />
88 </main> 94 </main>
@@ -91,8 +97,6 @@ @@ -91,8 +97,6 @@
91 .switch_open { 97 .switch_open {
92 background: var(--open-color); 98 background: var(--open-color);
93 box-shadow: var(--open-color) 0 0 10px 3px; 99 box-shadow: var(--open-color) 0 0 10px 3px;
94 - width: 60px;  
95 - height: 60px;  
96 border-radius: 50%; 100 border-radius: 50%;
97 margin: 10px 0; 101 margin: 10px 0;
98 } 102 }
@@ -100,8 +104,6 @@ @@ -100,8 +104,6 @@
100 .switch_close { 104 .switch_close {
101 background-color: var(--close-color); 105 background-color: var(--close-color);
102 box-shadow: none; 106 box-shadow: none;
103 - width: 42.023px;  
104 - height: 42.023px;  
105 border-radius: 50%; 107 border-radius: 50%;
106 margin: 10px 0; 108 margin: 10px 0;
107 } 109 }
@@ -53,6 +53,7 @@ @@ -53,6 +53,7 @@
53 defaultValue: 14, 53 defaultValue: 14,
54 componentProps: { 54 componentProps: {
55 min: 0, 55 min: 0,
  56 + max: 100,
56 formatter: (e) => { 57 formatter: (e) => {
57 const value = e.replace(/^0/g, ''); 58 const value = e.replace(/^0/g, '');
58 if (value) { 59 if (value) {
@@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
8 import { useDataFetch } from '../../../hook/socket/useSocket'; 8 import { useDataFetch } from '../../../hook/socket/useSocket';
9 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type'; 9 import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 import { useReceiveValue } from '../../../hook/useReceiveValue'; 10 import { useReceiveValue } from '../../../hook/useReceiveValue';
  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>;
@@ -58,6 +59,8 @@ @@ -58,6 +59,8 @@
58 }; 59 };
59 60
60 useDataFetch(props, updateFn); 61 useDataFetch(props, updateFn);
  62 +
  63 + const { getRatio } = useComponentScale(props);
61 </script> 64 </script>
62 65
63 <template> 66 <template>
@@ -67,12 +70,16 @@ @@ -67,12 +70,16 @@
67 <SvgIcon 70 <SvgIcon
68 :name="isOpenClose ? getDesign.icon : getDesign.iconClose" 71 :name="isOpenClose ? getDesign.icon : getDesign.iconClose"
69 prefix="iconfont" 72 prefix="iconfont"
70 - :size="60" 73 + :size="getRatio ? getRatio * 70 : 70"
71 :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }" 74 :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }"
72 /> 75 />
73 - <div class="text-gray-500 truncate m-2" :style="{ fontSize: getDesign.fontSize + 'px' }">{{  
74 - getDesign.attribute || ''  
75 - }}</div> 76 + <div
  77 + class="text-gray-500 truncate m-2"
  78 + :style="{
  79 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  80 + }"
  81 + >{{ getDesign.attribute || '' }}</div
  82 + >
76 </div> 83 </div>
77 <UpdateTime v-show="getDesign.showTime" :time="time" /> 84 <UpdateTime v-show="getDesign.showTime" :time="time" />
78 </main> 85 </main>
@@ -26,6 +26,7 @@ @@ -26,6 +26,7 @@
26 defaultValue: 20, 26 defaultValue: 20,
27 componentProps: { 27 componentProps: {
28 min: 0, 28 min: 0,
  29 + max: 100,
29 formatter: (e) => { 30 formatter: (e) => {
30 const value = e.replace(/^0/g, ''); 31 const value = e.replace(/^0/g, '');
31 if (value) { 32 if (value) {
@@ -44,7 +44,7 @@ @@ -44,7 +44,7 @@
44 44
45 useDataFetch(props, updateFn); 45 useDataFetch(props, updateFn);
46 46
47 - const { getScale } = useComponentScale(props); 47 + const { getScale, getRatio } = useComponentScale(props);
48 </script> 48 </script>
49 49
50 <template> 50 <template>
@@ -53,13 +53,18 @@ @@ -53,13 +53,18 @@
53 53
54 <h1 54 <h1
55 class="my-4 font-bold !my-2 truncate" 55 class="my-4 font-bold !my-2 truncate"
56 - :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }" 56 + :style="{
  57 + color: getDesign.fontColor,
  58 + fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
  59 + }"
57 > 60 >
58 {{ currentValue || 0 }} 61 {{ currentValue || 0 }}
59 </h1> 62 </h1>
60 - <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{  
61 - getDesign.attribute || '温度'  
62 - }}</div> 63 + <div
  64 + class="text-gray-500 truncate"
  65 + :style="{ fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px' }"
  66 + >{{ getDesign.attribute || '温度' }}</div
  67 + >
63 <!-- <div v-if="config.option.componentInfo.showDeviceName"> 68 <!-- <div v-if="config.option.componentInfo.showDeviceName">
64 {{ config.option.deviceRename || config.option.deviceName }} 69 {{ config.option.deviceRename || config.option.deviceName }}
65 </div> --> 70 </div> -->
@@ -26,6 +26,7 @@ @@ -26,6 +26,7 @@
26 defaultValue: 20, 26 defaultValue: 20,
27 componentProps: { 27 componentProps: {
28 min: 0, 28 min: 0,
  29 + max: 100,
29 formatter: (e) => { 30 formatter: (e) => {
30 const value = e.replace(/^0/g, ''); 31 const value = e.replace(/^0/g, '');
31 if (value) { 32 if (value) {
@@ -43,6 +44,7 @@ @@ -43,6 +44,7 @@
43 defaultValue: 14, 44 defaultValue: 14,
44 componentProps: { 45 componentProps: {
45 min: 0, 46 min: 0,
  47 + max: 100,
46 formatter: (e) => { 48 formatter: (e) => {
47 const value = e.replace(/^0/g, ''); 49 const value = e.replace(/^0/g, '');
48 if (value) { 50 if (value) {
@@ -48,23 +48,29 @@ @@ -48,23 +48,29 @@
48 48
49 useDataFetch(props, updateFn); 49 useDataFetch(props, updateFn);
50 50
51 - const { getScale } = useComponentScale(props); 51 + const { getScale, getRatio } = useComponentScale(props);
52 </script> 52 </script>
53 53
54 <template> 54 <template>
55 <main class="w-full h-full flex flex-col justify-center items-center"> 55 <main class="w-full h-full flex flex-col justify-center items-center">
56 <DeviceName :config="config" /> 56 <DeviceName :config="config" />
57 -  
58 <div class="flex-1 flex justify-center items-center flex-col" :style="getScale"> 57 <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
59 <h1 58 <h1
60 class="my-4 font-bold !my-2 truncate" 59 class="my-4 font-bold !my-2 truncate"
61 - :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }" 60 + :style="{
  61 + color: getDesign.fontColor,
  62 + fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
  63 + }"
62 > 64 >
63 {{ currentValue || 0 }} 65 {{ currentValue || 0 }}
64 </h1> 66 </h1>
65 - <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{  
66 - getDesign.attribute || '温度'  
67 - }}</div> 67 + <div
  68 + class="text-gray-500 truncate"
  69 + :style="{
  70 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  71 + }"
  72 + >{{ getDesign.attribute || '温度' }}</div
  73 + >
68 </div> 74 </div>
69 <UpdateTime :time="time" /> 75 <UpdateTime :time="time" />
70 </main> 76 </main>
@@ -31,6 +31,7 @@ @@ -31,6 +31,7 @@
31 defaultValue: 20, 31 defaultValue: 20,
32 componentProps: { 32 componentProps: {
33 min: 0, 33 min: 0,
  34 + max: 100,
34 formatter: (e) => { 35 formatter: (e) => {
35 const value = e.replace(/^0/g, ''); 36 const value = e.replace(/^0/g, '');
36 if (value) { 37 if (value) {
@@ -48,6 +49,7 @@ @@ -48,6 +49,7 @@
48 defaultValue: 14, 49 defaultValue: 14,
49 componentProps: { 50 componentProps: {
50 min: 0, 51 min: 0,
  52 + max: 100,
51 formatter: (e) => { 53 formatter: (e) => {
52 const value = e.replace(/^0/g, ''); 54 const value = e.replace(/^0/g, '');
53 if (value) { 55 if (value) {
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 55
56 useDataFetch(props, updateFn); 56 useDataFetch(props, updateFn);
57 57
58 - const { getScale } = useComponentScale(props); 58 + const { getScale, getRatio } = useComponentScale(props);
59 </script> 59 </script>
60 60
61 <template> 61 <template>
@@ -65,19 +65,26 @@ @@ -65,19 +65,26 @@
65 <SvgIcon 65 <SvgIcon
66 :name="getDesign.icon!" 66 :name="getDesign.icon!"
67 prefix="iconfont" 67 prefix="iconfont"
68 - :size="60" 68 + :size="getRatio ? getRatio * 70 : 70"
69 :style="{ color: getDesign.iconColor }" 69 :style="{ color: getDesign.iconColor }"
70 /> 70 />
71 <h1 71 <h1
72 class="font-bold m-2 truncate" 72 class="font-bold m-2 truncate"
73 - :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }" 73 + :style="{
  74 + color: getDesign.fontColor,
  75 + fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
  76 + }"
74 > 77 >
75 <span> {{ currentValue || 0 }}</span> 78 <span> {{ currentValue || 0 }}</span>
76 <span>{{ getDesign.unit }} </span> 79 <span>{{ getDesign.unit }} </span>
77 </h1> 80 </h1>
78 - <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{  
79 - getDesign.attribute || '温度'  
80 - }}</div> 81 + <div
  82 + class="text-gray-500 truncate"
  83 + :style="{
  84 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  85 + }"
  86 + >{{ getDesign.attribute || '温度' }}</div
  87 + >
81 </div> 88 </div>
82 <UpdateTime :time="time" /> 89 <UpdateTime :time="time" />
83 </main> 90 </main>
@@ -30,6 +30,7 @@ @@ -30,6 +30,7 @@
30 defaultValue: 20, 30 defaultValue: 20,
31 componentProps: { 31 componentProps: {
32 min: 0, 32 min: 0,
  33 + max: 100,
33 formatter: (e) => { 34 formatter: (e) => {
34 const value = e.replace(/^0/g, ''); 35 const value = e.replace(/^0/g, '');
35 if (value) { 36 if (value) {
@@ -47,6 +48,7 @@ @@ -47,6 +48,7 @@
47 defaultValue: 14, 48 defaultValue: 14,
48 componentProps: { 49 componentProps: {
49 min: 0, 50 min: 0,
  51 + max: 100,
50 formatter: (e) => { 52 formatter: (e) => {
51 const value = e.replace(/^0/g, ''); 53 const value = e.replace(/^0/g, '');
52 if (value) { 54 if (value) {
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 51
52 useDataFetch(props, updateFn); 52 useDataFetch(props, updateFn);
53 53
54 - const { getScale } = useComponentScale(props); 54 + const { getScale, getRatio } = useComponentScale(props);
55 </script> 55 </script>
56 56
57 <template> 57 <template>
@@ -61,19 +61,26 @@ @@ -61,19 +61,26 @@
61 <SvgIcon 61 <SvgIcon
62 :name="getDesign.icon!" 62 :name="getDesign.icon!"
63 prefix="iconfont" 63 prefix="iconfont"
64 - :size="60" 64 + :size="getRatio ? getRatio * 70 : 70"
65 :style="{ color: getDesign.iconColor }" 65 :style="{ color: getDesign.iconColor }"
66 /> 66 />
67 <h1 67 <h1
68 class="my-4 font-bold !my-2 truncate" 68 class="my-4 font-bold !my-2 truncate"
69 - :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }" 69 + :style="{
  70 + color: getDesign.fontColor,
  71 + fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
  72 + }"
70 > 73 >
71 <span>{{ currentValue || 0 }}</span> 74 <span>{{ currentValue || 0 }}</span>
72 <span>{{ getDesign.unit }}</span> 75 <span>{{ getDesign.unit }}</span>
73 </h1> 76 </h1>
74 - <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{  
75 - getDesign.attribute || '温度'  
76 - }}</div> 77 + <div
  78 + class="text-gray-500 truncate"
  79 + :style="{
  80 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  81 + }"
  82 + >{{ getDesign.attribute || '温度' }}</div
  83 + >
77 </div> 84 </div>
78 </main> 85 </main>
79 </template> 86 </template>
@@ -32,6 +32,7 @@ @@ -32,6 +32,7 @@
32 defaultValue: 20, 32 defaultValue: 20,
33 componentProps: { 33 componentProps: {
34 min: 0, 34 min: 0,
  35 + max: 100,
35 formatter: (e) => { 36 formatter: (e) => {
36 const value = e.replace(/^0/g, ''); 37 const value = e.replace(/^0/g, '');
37 if (value) { 38 if (value) {
@@ -49,6 +50,7 @@ @@ -49,6 +50,7 @@
49 defaultValue: 14, 50 defaultValue: 14,
50 componentProps: { 51 componentProps: {
51 min: 0, 52 min: 0,
  53 + max: 100,
52 formatter: (e) => { 54 formatter: (e) => {
53 const value = e.replace(/^0/g, ''); 55 const value = e.replace(/^0/g, '');
54 if (value) { 56 if (value) {
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 import { ref, computed, unref, onMounted } from 'vue'; 9 import { ref, computed, unref, onMounted } from 'vue';
10 import { useMultipleDataFetch } from '../../../hook/socket/useSocket'; 10 import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
11 import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type'; 11 import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  12 + import { useComponentScale } from '../../../hook/useComponentScale';
12 13
13 const props = defineProps<{ 14 const props = defineProps<{
14 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
@@ -87,7 +88,7 @@ @@ -87,7 +88,7 @@
87 }), 88 }),
88 }; 89 };
89 }); 90 });
90 - const percentList = ref( 91 + const percentList = ref<any>(
91 props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue 92 props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue
92 ); 93 );
93 94
@@ -108,34 +109,43 @@ @@ -108,34 +109,43 @@
108 onMounted(() => {}); 109 onMounted(() => {});
109 110
110 useMultipleDataFetch(props, updateFn); 111 useMultipleDataFetch(props, updateFn);
  112 + const { getRatios } = useComponentScale(props);
111 </script> 113 </script>
112 114
113 <template> 115 <template>
114 - <main class="w-full h-full flex flex-col justify-center"> 116 + <main class="w-full h-full flex flex-col justify-evenly">
115 <DeviceName :config="config" /> 117 <DeviceName :config="config" />
116 118
117 - <div  
118 - v-for="item in percentList"  
119 - :key="item.id"  
120 - class="mt-2 flex flex-col ml-3 mr-3 items-stretch"  
121 - > 119 + <div v-for="item in percentList" :key="item.id" class="flex flex-col ml-3 mr-3 items-stretch">
122 <div class="flex justify-between"> 120 <div class="flex justify-between">
123 <div 121 <div
124 - class="text-gray-500 text-sm truncate"  
125 - :style="{ color: item.fontColor, fontSize: item.fontSize + 'px' }" 122 + class="text-gray-500 flex w-7/10"
  123 + :style="{
  124 + color: item.fontColor,
  125 + fontSize: (getRatios ? getRatios * item.fontSize : item.fontSize) + 'px',
  126 + }"
126 > 127 >
127 - {{ 128 + <!-- {{
128 `${item.deviceName} 129 `${item.deviceName}
129 - 130 -
130 ${item.attributeName || item.attribute || '温度'}` 131 ${item.attributeName || item.attribute || '温度'}`
131 - }} 132 + }} -->
  133 + <div class="max-w-4/6 overflow-ellipsis overflow-hidden whitespace-nowrap">{{
  134 + item.deviceName
  135 + }}</div>
  136 + <span>-</span>
  137 + <div>{{ item.attributeName || item.attribute || '温度' }}</div>
132 </div> 138 </div>
133 - <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }" 139 + <span
  140 + class="text-lg max-w-3/10"
  141 + :style="{
  142 + color: item.fontColor,
  143 + fontSize: (getRatios ? getRatios * item.valueSize : item.valueSize) + 'px',
  144 + }"
134 >{{ item.value }} {{ item.unit }}</span 145 >{{ item.value }} {{ item.unit }}</span
135 > 146 >
136 </div> 147 </div>
137 - <div>  
138 - <!-- <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" /> --> 148 + <div class="">
139 <Slider 149 <Slider
140 ref="sliderEl" 150 ref="sliderEl"
141 :style="{ '--slider-color': item.backgroundColor }" 151 :style="{ '--slider-color': item.backgroundColor }"
@@ -146,7 +156,6 @@ @@ -146,7 +156,6 @@
146 /> 156 />
147 </div> 157 </div>
148 </div> 158 </div>
149 - <!-- <UpdateTime :time="time" /> -->  
150 </main> 159 </main>
151 </template> 160 </template>
152 <style lang="less" scoped> 161 <style lang="less" scoped>
@@ -48,6 +48,7 @@ @@ -48,6 +48,7 @@
48 defaultValue: 14, 48 defaultValue: 14,
49 componentProps: { 49 componentProps: {
50 min: 0, 50 min: 0,
  51 + max: 100,
51 formatter: (e) => { 52 formatter: (e) => {
52 const value = e.replace(/^0/g, ''); 53 const value = e.replace(/^0/g, '');
53 if (value) { 54 if (value) {
@@ -105,18 +105,23 @@ @@ -105,18 +105,23 @@
105 <SvgIcon 105 <SvgIcon
106 :name="item.icon!" 106 :name="item.icon!"
107 prefix="iconfont" 107 prefix="iconfont"
108 - :size="getRatio ? 25 * getRatio : 25" 108 + :size="getRatio ? 30 * getRatio : 30"
109 :style="{ color: item.iconColor }" 109 :style="{ color: item.iconColor }"
110 /> 110 />
111 111
112 <div 112 <div
113 - class="text-gray-500 text-sm truncate ml-6"  
114 - :style="{ fontSize: item.fontSize + 'px' }" 113 + class="text-gray-500 ml-6"
  114 + :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
115 >{{ item.deviceName + '-' + item.attributeName || '温度' }}</div 115 >{{ item.deviceName + '-' + item.attributeName || '温度' }}</div
116 > 116 >
117 </div> 117 </div>
118 118
119 - <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }"> 119 + <span
  120 + :style="{
  121 + color: item.fontColor,
  122 + fontSize: (getRatio ? getRatio * item.valueSize : item.valueSize) + 'px',
  123 + }"
  124 + >
120 <span> {{ item.value || 0 }}</span> 125 <span> {{ item.value || 0 }}</span>
121 <span>{{ item.unit }} </span> 126 <span>{{ item.unit }} </span>
122 </span> 127 </span>
@@ -30,6 +30,25 @@ export const useComponentScale = (props: { config: ComponentPropsConfigType }, o @@ -30,6 +30,25 @@ export const useComponentScale = (props: { config: ComponentPropsConfigType }, o
30 } 30 }
31 }); 31 });
32 32
  33 + // 数值列表等多个数据源使用的getRatios
  34 + const getRatios = computed(() => {
  35 + try {
  36 + const { option, attr } = props.config;
  37 + const { w, h } = attr;
  38 + const { widthPx, heightPx, itemHeightRatio } = option;
  39 +
  40 + const currentW = (widthPx * 100) / 100;
  41 + const currentH = (heightPx * itemHeightRatio) / 100;
  42 +
  43 + const widthScaleRatio = currentW / w;
  44 + const heightScaleRatio = currentH / h;
  45 +
  46 + return Math.min(widthScaleRatio, heightScaleRatio);
  47 + } catch (error) {
  48 + return 1;
  49 + }
  50 + });
  51 +
33 const getScaleRadio = computed(() => { 52 const getScaleRadio = computed(() => {
34 try { 53 try {
35 const { persetOption = {} } = props.config; 54 const { persetOption = {} } = props.config;
@@ -56,5 +75,5 @@ export const useComponentScale = (props: { config: ComponentPropsConfigType }, o @@ -56,5 +75,5 @@ export const useComponentScale = (props: { config: ComponentPropsConfigType }, o
56 onScale?.(); 75 onScale?.();
57 }); 76 });
58 77
59 - return { getScale, getScaleRadio, getRatio, getContainerSize }; 78 + return { getScale, getScaleRadio, getRatio, getContainerSize, getRatios };
60 }; 79 };
@@ -149,7 +149,7 @@ @@ -149,7 +149,7 @@
149 </script> 149 </script>
150 150
151 <template> 151 <template>
152 - <section class="p-5 flex flex-col w-full"> 152 + <section class="p-2.5 flex flex-col w-full">
153 <main class="flex w-full h-full h-7"> 153 <main class="flex w-full h-full h-7">
154 <Tooltip :title="sourceInfo.name"> 154 <Tooltip :title="sourceInfo.name">
155 <div class="flex-1 w-full h-full flex text-lg justify-center font-semibold truncate"> 155 <div class="flex-1 w-full h-full flex text-lg justify-center font-semibold truncate">