简柏林 / thingskit-front · Commits

Commit 0203a98cb783b9cce8443d301f9d040b6015661e

Authored by loveumiko
1 parent cc8a9caa

fix: 看板组件样式调整

Inline Side-by-side
Showing 28 changed files with 156 additions and 55 deletions
@@ -3,11 +3,12 @@ @@ -3,11 +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 v-if="config.option?.componentInfo?.showDeviceName" class="h-8 font-semibold"> 11 + <div v-if="config.option?.componentInfo?.showDeviceName" class="h-6 font-semibold">
11 {{ config.option.deviceRename || config.option.deviceName }} 12 {{ config.option.deviceRename || config.option.deviceName }}
12 </div> 13 </div>
13 </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 });
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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">