fix: 修改看板组件样式

@@ -14,7 +14,7 @@
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
-  const { getScale } = useComponentScale(props);
+  const { getScale, getRatio } = useComponentScale(props);
 
   const currentValue = ref(false);
 
@@ -73,7 +73,7 @@
     <DeviceName :config="config" class="text-center" />
     <main class="w-full h-full flex flex-col justify-center items-center">
       <Spin :spinning="loading">
-        <label class="sliding-switch" :style="getScale">
+        <label class="sliding-switch" :style="{ transform: `scale(${getRatio})` }">
           <input
             type="checkbox"
             :value="currentValue"
@@ -85,8 +85,11 @@
           <span class="off">OFF</span>
         </label>
         <div
-          class="text-center mt-2 text-gray-700"
-          :style="{ ...getScale, fontSize: getDesign.fontSize + 'px' }"
+          class="text-center text-gray-700"
+          :style="{
+            ...getScale,
+            fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+          }"
         >
           {{ getDesign.attribute || '属性' }}
         </div>
@@ -97,7 +100,15 @@
 
 <style scoped lang="less">
   :deep(.ant-spin-container) {
-    @apply !flex !flex-col justify-center items-center !flex-nowrap;
+    @apply !flex !flex-col !justify-evenly items-center !flex-nowrap;
+
+    width: 100%;
+    height: 100%;
+  }
+
+  :deep(.ant-spin-nested-loading) {
+    width: 100%;
+    height: 100%;
   }
 
   .sliding-switch {

@@ -75,28 +75,35 @@
   };
 
   useDataFetch(props, updateFn);
-  const { getScale } = useComponentScale(props);
+  const { getScale, getRatio } = useComponentScale(props);
 </script>
 
 <template>
   <main class="w-full h-full flex flex-col justify-center">
     <DeviceName :config="config" class="text-center" />
-    <main class="w-full h-full flex justify-center items-center" :style="getScale">
-      <div class="flex flex-col justify-center items-center mr-20">
+    <main class="w-full h-full flex justify-around items-center" :style="getScale">
+      <div class="flex flex-col justify-center items-center">
         <SvgIcon
           :name="getDesign.icon"
           prefix="iconfont"
           :style="{ color: getDesign.iconColor }"
-          :size="50"
+          :size="getRatio ? getRatio * 60 : 60"
         />
         <span
           class="mt-3 truncate text-gray-500 text-center"
-          :style="{ fontSize: getDesign.fontSize + 'px' }"
+          :style="{
+            fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+          }"
         >
           {{ getDesign.attribute || '属性' }}
         </span>
       </div>
-      <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
+      <Switch
+        :style="{ transform: ` scale(${getRatio})` }"
+        v-model:checked="checked"
+        :loading="loading"
+        @change="handleChange"
+      />
     </main>
   </main>
 </template>

@@ -14,7 +14,7 @@
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
-  const { getScale } = useComponentScale(props);
+  const { getScale, getRatio } = useComponentScale(props);
 
   const currentValue = ref(false);
 
@@ -72,7 +72,7 @@
     <DeviceName :config="config" class="text-center" />
     <main class="w-full h-full flex flex-col justify-center items-center">
       <Spin :spinning="loading" class="w-full h-full">
-        <div class="toggle-switch" :style="getScale">
+        <div class="toggle-switch" :style="{ transform: `scale(${getRatio})` }">
           <label class="switch">
             <input type="checkbox" :checked="currentValue" @change="handleChange" />
             <div class="button">
@@ -86,7 +86,10 @@
         </div>
         <div
           class="text-center mt-2 text-gray-500"
-          :style="{ ...getScale, fontSize: getDesign.fontSize + 'px' }"
+          :style="{
+            ...getScale,
+            fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+          }"
           >{{ getDesign.attribute || '属性' }}</div
         >
       </Spin>
@@ -96,7 +99,15 @@
 
 <style scoped>
   :deep(.ant-spin-container) {
-    @apply !flex !flex-col justify-center items-center;
+    @apply !flex !flex-col justify-evenly items-center;
+
+    width: 100%;
+    height: 100%;
+  }
+
+  :deep(.ant-spin-nested-loading) {
+    width: 100%;
+    height: 100%;
   }
 
   .toggle-switch {

@@ -198,7 +198,7 @@
   };
 
   useDataFetch(props, updateFn);
-  const { getScale } = useComponentScale(props);
+  const { getScale, getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -208,8 +208,11 @@
       <Spin :spinning="loading" class="w-full h-full">
         <div class="flex flex-col" style="width: 80%">
           <span
-            :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
-            class="font-bold text-xl mt-3 truncate text-center"
+            :style="{
+              color: getDesign.fontColor,
+              fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
+            }"
+            class="font-bold text-xl mt-3 text-center"
             >{{ sliderValue }}</span
           >
           <Slider
@@ -225,8 +228,11 @@
           />
 
           <span
-            :style="{ color: getDesign.textColor, fontSize: getDesign.fontSize + 'px' }"
-            class="mt-3 truncate font-bold text-xs text-center"
+            :style="{
+              color: getDesign.textColor,
+              fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+            }"
+            class="mt-3 truncate font-bold text-center"
           >
             {{ getDesign.attribute || '属性' }}
           </span>

@@ -148,21 +148,26 @@
         <SvgIcon
           :name="item.icon!"
           prefix="iconfont"
-          :size="getRatio ? 25 * getRatio : 25"
+          :size="getRatio ? 30 * getRatio : 30"
           :style="{ color: item.iconColor }"
         />
 
-        <div class="text-gray-500 truncate ml-6" :style="{ fontSize: item.fontSize + 'px' }">{{
-          `${item.deviceName} - ${
-            item.commandType ? CommandTypeEnumLIst[item.commandType].name : item.attributeName
-          }`
-        }}</div>
+        <div
+          class="text-gray-500 truncate ml-6"
+          :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
+          >{{
+            `${item.deviceName} - ${
+              item.commandType ? CommandTypeEnumLIst[item.commandType].name : item.attributeName
+            }`
+          }}</div
+        >
       </div>
 
       <Switch
         v-model:checked="item.checked"
         :loading="loading"
         @change="handleChange(index, item.checked)"
+        :style="{ transform: `scale(${getRatio || 1})` }"
       />
     </div>
   </main>

@@ -74,7 +74,7 @@
 
   useDataFetch(props, updateFn);
 
-  const { getScale } = useComponentScale(props);
+  const { getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -86,7 +86,10 @@
       <DeviceName class="text-center" :config="config" />
 
       <div class="flex-1 flex justify-center items-center">
-        <div class="flex px-4 items-center transform scale-75" :style="getScale">
+        <div
+          class="flex px-4 items-center transform scale-75"
+          :style="{ transform: `scale(${getRatio})` }"
+        >
           <Space
             justify="end"
             class="justify-end"

@@ -83,8 +83,8 @@
           min: 0,
           max: maxNumber,
           center: ['50%', '60%'],
-          startAngle: 150,
-          endAngle: 30,
+          startAngle: 155,
+          endAngle: 25,
           progress: {
             // 进度条
             show: true,
@@ -221,13 +221,15 @@
     class="w-full h-full flex flex-col justify-center items-center"
     :class="!getDesign.showTime && 'p-5'"
   >
-    <DeviceName :config="config" />
+    <DeviceName :config="config" class="mt-1" />
     <div class="w-full h-full flex flex-1 flex-col justify-center items-center">
       <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
       </div>
       <div
         class="text-gray-500 text-center truncate"
-        :style="{ fontSize: getDesign.fontSize + 'px' }"
+        :style="{
+          fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        }"
         >{{ getDesign.attribute || '湿度' }}</div
       >
     </div>

@@ -217,9 +217,13 @@
     <div class="flex flex-1 flex-col justify-center items-center w-full h-full">
       <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
       </div>
-      <div class="text-gray-500 text-center" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
-        getDesign.attribute || '速度'
-      }}</div>
+      <div
+        class="text-gray-500 text-center"
+        :style="{
+          fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        }"
+        >{{ getDesign.attribute || '速度' }}</div
+      >
     </div>
     <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>

@@ -107,7 +107,7 @@
             width: '60%',
             lineHeight: 10,
             borderRadius: 8,
-            offsetCenter: [0, '40%'],
+            offsetCenter: [0, '50%'],
             fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
             fontWeight: 'bolder',
             formatter: `{value} ${unit ?? ''}`,
@@ -240,7 +240,7 @@
   >
     <DeviceName :config="config" />
     <div class="w-full h-full flex justify-center items-center flex-1 flex-col">
-      <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex justify-center items-center flex-col">
+      <div ref="chartRefEl" class="flex-1 w-full h-full flex justify-center items-center flex-col">
       </div>
       <div
         class="text-gray-500 text-center truncate"

@@ -9,6 +9,7 @@
   import { ref, computed, unref, onMounted } from 'vue';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useComponentScale } from '../../../hook/useComponentScale';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -87,7 +88,7 @@
       }),
     };
   });
-  const percentList = ref(
+  const percentList = ref<any>(
     props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue
   );
 
@@ -108,21 +109,21 @@
   onMounted(() => {});
 
   useMultipleDataFetch(props, updateFn);
+  const { getRatios } = useComponentScale(props);
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center">
+  <main class="w-full h-full flex flex-col justify-evenly">
     <DeviceName :config="config" />
 
-    <div
-      v-for="item in percentList"
-      :key="item.id"
-      class="mt-2 flex flex-col ml-3 mr-3 items-stretch"
-    >
+    <div v-for="item in percentList" :key="item.id" class="flex flex-col ml-3 mr-3 items-stretch">
       <div class="flex justify-between">
         <div
-          class="text-gray-500 text-sm truncate"
-          :style="{ color: item.fontColor, fontSize: item.fontSize + 'px' }"
+          class="text-gray-500 text-sm"
+          :style="{
+            color: item.fontColor,
+            fontSize: (getRatios ? getRatios * item.fontSize : item.fontSize) + 'px',
+          }"
         >
           {{
             `${item.deviceName}
@@ -130,12 +131,16 @@
             ${item.attributeName || item.attribute || '温度'}`
           }}
         </div>
-        <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }"
+        <span
+          class="text-lg"
+          :style="{
+            color: item.fontColor,
+            fontSize: (getRatios ? getRatios * item.valueSize : item.valueSize) + 'px',
+          }"
           >{{ item.value }} {{ item.unit }}</span
         >
       </div>
-      <div>
-        <!-- <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" /> -->
+      <div class="">
         <Slider
           ref="sliderEl"
           :style="{ '--slider-color': item.backgroundColor }"
@@ -146,7 +151,6 @@
         />
       </div>
     </div>
-    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>
 <style lang="less" scoped>

@@ -89,7 +89,7 @@
   };
 
   useMultipleDataFetch(props, updateFn);
-  const { getRatio } = useComponentScale(props);
+  const { getRatios } = useComponentScale(props);
 </script>
 
 <template>
@@ -105,18 +105,24 @@
         <SvgIcon
           :name="item.icon!"
           prefix="iconfont"
-          :size="getRatio ? 25 * getRatio : 25"
+          :size="getRatios ? 30 * getRatios : 30"
           :style="{ color: item.iconColor }"
         />
 
         <div
-          class="text-gray-500 text-sm truncate ml-6"
-          :style="{ fontSize: item.fontSize + 'px' }"
+          class="text-gray-500 text-sm ml-6"
+          :style="{ fontSize: (getRatios ? getRatios * item.fontSize : item.fontSize) + 'px' }"
           >{{ item.deviceName + '-' + item.attributeName || '温度' }}</div
         >
       </div>
 
-      <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }">
+      <span
+        class="text-lg"
+        :style="{
+          color: item.fontColor,
+          fontSize: (getRatios ? getRatios * item.valueSize : item.valueSize) + 'px',
+        }"
+      >
         <span> {{ item.value || 0 }}</span>
         <span>{{ item.unit }} </span>
       </span>

@@ -30,6 +30,25 @@ export const useComponentScale = (props: { config: ComponentPropsConfigType }, o
     }
   });
 
+  // 数值列表等多个数据源使用的getRatios
+  const getRatios = computed(() => {
+    try {
+      const { option, attr } = props.config;
+      const { w, h } = attr;
+      const { widthPx, heightPx, itemHeightRatio } = option;
+
+      const currentW = (widthPx * 100) / 100;
+      const currentH = (heightPx * itemHeightRatio) / 100;
+
+      const widthScaleRatio = currentW / w;
+      const heightScaleRatio = currentH / h;
+
+      return Math.min(widthScaleRatio, heightScaleRatio);
+    } catch (error) {
+      return 1;
+    }
+  });
+
   const getScaleRadio = computed(() => {
     try {
       const { persetOption = {} } = props.config;
@@ -56,5 +75,5 @@ export const useComponentScale = (props: { config: ComponentPropsConfigType }, o
       onScale?.();
     });
 
-  return { getScale, getScaleRadio, getRatio, getContainerSize };
+  return { getScale, getScaleRadio, getRatio, getContainerSize, getRatios };
 };