简柏林 / thingskit-front · Commits

Commit 95d8c5674dc00d6c741a384d15ca0da85110ab82

Authored by loveumiko
1 parent c64231b0

fix: 修改看板组件样式

Inline Side-by-side
Showing 12 changed files with 134 additions and 56 deletions
@@ -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,8 +208,11 @@ @@ -208,8 +208,11 @@
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
@@ -225,8 +228,11 @@ @@ -225,8 +228,11 @@
225 /> 228 />
226 229
227 <span 230 <span
228 - :style="{ color: getDesign.textColor, fontSize: getDesign.fontSize + 'px' }"  
229 - class="mt-3 truncate font-bold text-xs text-center" 231 + :style="{
  232 + color: getDesign.textColor,
  233 + fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
  234 + }"
  235 + class="mt-3 truncate font-bold text-center"
230 > 236 >
231 {{ getDesign.attribute || '属性' }} 237 {{ getDesign.attribute || '属性' }}
232 </span> 238 </span>
@@ -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>
@@ -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"
@@ -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>
@@ -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>
@@ -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"
@@ -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,21 +109,21 @@ @@ -108,21 +109,21 @@
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 text-sm"
  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}
@@ -130,12 +131,16 @@ @@ -130,12 +131,16 @@
130 ${item.attributeName || item.attribute || '温度'}` 131 ${item.attributeName || item.attribute || '温度'}`
131 }} 132 }}
132 </div> 133 </div>
133 - <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }" 134 + <span
  135 + class="text-lg"
  136 + :style="{
  137 + color: item.fontColor,
  138 + fontSize: (getRatios ? getRatios * item.valueSize : item.valueSize) + 'px',
  139 + }"
134 >{{ item.value }} {{ item.unit }}</span 140 >{{ item.value }} {{ item.unit }}</span
135 > 141 >
136 </div> 142 </div>
137 - <div>  
138 - <!-- <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" /> --> 143 + <div class="">
139 <Slider 144 <Slider
140 ref="sliderEl" 145 ref="sliderEl"
141 :style="{ '--slider-color': item.backgroundColor }" 146 :style="{ '--slider-color': item.backgroundColor }"
@@ -146,7 +151,6 @@ @@ -146,7 +151,6 @@
146 /> 151 />
147 </div> 152 </div>
148 </div> 153 </div>
149 - <!-- <UpdateTime :time="time" /> -->  
150 </main> 154 </main>
151 </template> 155 </template>
152 <style lang="less" scoped> 156 <style lang="less" scoped>
@@ -89,7 +89,7 @@ @@ -89,7 +89,7 @@
89 }; 89 };
90 90
91 useMultipleDataFetch(props, updateFn); 91 useMultipleDataFetch(props, updateFn);
92 - const { getRatio } = useComponentScale(props); 92 + const { getRatios } = useComponentScale(props);
93 </script> 93 </script>
94 94
95 <template> 95 <template>
@@ -105,18 +105,24 @@ @@ -105,18 +105,24 @@
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="getRatios ? 30 * getRatios : 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 text-sm ml-6"
  114 + :style="{ fontSize: (getRatios ? getRatios * 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 + class="text-lg"
  121 + :style="{
  122 + color: item.fontColor,
  123 + fontSize: (getRatios ? getRatios * item.valueSize : item.valueSize) + 'px',
  124 + }"
  125 + >
120 <span> {{ item.value || 0 }}</span> 126 <span> {{ item.value || 0 }}</span>
121 <span>{{ item.unit }} </span> 127 <span>{{ item.unit }} </span>
122 </span> 128 </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 };