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

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

See merge request yunteng/thingskit-front!941

@@ -3,14 +3,12 @@
 
   defineProps<{
     config: ComponentPropsConfigType;
+    getRatio?: string | number;
   }>();
 </script>
 
 <template>
-  <div
-    v-if="config.option?.componentInfo?.showDeviceName"
-    class="h-8 font-semibold w-1/2 overflow-hidden overflow-ellipsis whitespace-nowrap"
-  >
+  <div v-if="config.option?.componentInfo?.showDeviceName" class="h-6 font-semibold">
     {{ config.option.deviceRename || config.option.deviceName }}
   </div>
 </template>

@@ -11,7 +11,9 @@
 </script>
 
 <template>
-  <div class="flex p-5 justify-center items-center text-gray-400 text-xs w-full dark:text-light-50">
+  <div
+    class="flex p-2.5 justify-center items-center text-gray-400 text-xs w-full dark:text-light-50"
+  >
     <Tooltip :title="formatDate(time)">
       <div class="truncate px-1">
         <span>更新时间:</span>

@@ -43,6 +43,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -24,7 +24,7 @@
     showTime: boolean;
     status: IStatus;
     time: number;
-    fontSize?: number;
+    fontSize?: number | any;
   }
 
   const props = defineProps<{
@@ -140,7 +140,7 @@
         showTime: item.showTime,
         status: { text: '', color: '' },
         time: 0,
-        fontSize: item.fontSize,
+        fontSize: item.fontSize || 14,
       };
     }) as any;
     const { data, update } = message;
@@ -164,14 +164,16 @@
 
   useCustomDataFetch(props, transformMessage, updateFn);
 
-  const { getScale } = useComponentScale(props);
+  const { getScale, getRatio } = useComponentScale(props);
 </script>
 
 <template>
   <main :style="getScale" class="w-full h-full flex justify-center items-center">
     <div v-for="item in alarmStatusList" :key="item.id" class="flex flex-col items-center">
       <div class="flex justify-center items-center flex-col">
-        <div class="text-gray-500 truncate" :style="{ fontSize: item.fontSize + 'px' }"
+        <div
+          class="text-gray-500 truncate"
+          :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
           >{{
             item.status.text
               ? item.showDeviceName
@@ -180,7 +182,13 @@
               : '当前设备未发现告警'
           }}{{ item.status.text }}</div
         >
-        <div :class="item.status.color"></div>
+        <div
+          :class="item.status.color"
+          :style="{
+            height: (getRatio ? getRatio * 70 : 70) + 'px',
+            width: (getRatio ? getRatio * 70 : 70) + 'px',
+          }"
+        ></div>
       </div>
       <UpdateTime v-show="item.showTime" :time="item.time" />
     </div>
@@ -190,8 +198,6 @@
   .alarm_state_critical {
     background: #cf1322;
     box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #cf1322;
-    width: 60px;
-    height: 60px;
     border-radius: 50%;
     margin: 10px 0;
   }
@@ -199,8 +205,6 @@
   .alarm_state_major {
     background: #ff6e03;
     box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff6e03;
-    width: 60px;
-    height: 60px;
     border-radius: 50%;
     margin: 10px 0;
   }
@@ -208,8 +212,6 @@
   .alarm_state_minor {
     background: #ff0;
     box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff0;
-    width: 60px;
-    height: 60px;
     border-radius: 50%;
     margin: 10px 0;
   }
@@ -217,8 +219,6 @@
   .alarm_state_warning {
     background: #edf760;
     box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #edf760;
-    width: 60px;
-    height: 60px;
     border-radius: 50%;
     margin: 10px 0;
   }
@@ -226,8 +226,6 @@
   .alarm_state_other {
     background: #d3adf7;
     box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #d3adf7;
-    width: 60px;
-    height: 60px;
     border-radius: 50%;
     margin: 10px 0;
   }

@@ -49,6 +49,13 @@ export const formSchemas = (): FormSchema[] => {
         };
       },
     },
+
+    // {
+    //   field: 'deviceIds',
+    //   label: '设备id',
+    //   show: false,
+    //   component: 'Input',
+    // },
     // {
     //   field: DataSourceField.DEVICE_PROFILE_ID,
     //   component: 'ApiSelect',
@@ -143,8 +150,10 @@ export const formSchemas = (): FormSchema[] => {
             return [];
           },
           onChange(_value, record: MasterDeviceList) {
+            console.log(record, 'record');
             setFieldsValue({
               [DataSourceField.DEVICE_NAME]: record?.label,
+              deviceIds: record?.id,
             });
           },
           placeholder: '请选择设备',

@@ -16,6 +16,7 @@
   import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
 
   import { getMessage } from '../config';
+  // import { defHttp } from '/@/utils/http/axios';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -105,6 +106,13 @@
     columns: alarmColumns,
   });
 
+  // const getAlarmList = (params) => {
+  //   return defHttp.post({
+  //     url: '/alarm/configuration/page',
+  //     params,
+  //   });
+  // };
+
   const getDesign = computed(() => {
     const { persetOption, option } = props.config;
     const { dataSource = [] } = option || {};
@@ -112,8 +120,15 @@
     return {
       dataSource: dataSource?.map((item) => {
         const { unit, showDeviceName } = item.componentInfo || {};
-        const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
-          item;
+        const {
+          attribute,
+          attributeName,
+          attributeRename,
+          deviceName,
+          deviceRename,
+          deviceId,
+          // deviceIds,
+        } = item;
         return {
           unit: unit ?? presetUnit,
           attribute,
@@ -123,6 +138,7 @@
           deviceName,
           deviceRename,
           id: deviceId,
+          // deviceIds,
         };
       }),
     };
@@ -167,6 +183,20 @@
   useCustomDataFetch(props, transformMessage, updateFn);
 
   onMounted(async () => {
+    // const deviceIds = unref(getDesign).dataSource.map((item) => item.deviceIds);
+    // let { startTs, endTs, time, pageSize }: any = unref(alarmForm) || {};
+    // if (!startTs || !endTs) {
+    //   startTs = Date.now() - time;
+    //   endTs = Date.now();
+    // }
+    // const values = {
+    //   deviceIds,
+    //   page: 1,
+    //   pageSize,
+    //   startTime: Number(startTs),
+    //   endTime: Number(endTs),
+    // };
+
     await nextTick();
     resize();
   });

@@ -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,13 +208,21 @@
       <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
             ref="sliderEl"
-            :style="{ '--slider-color': getDesign.controlBarColor }"
+            :style="{
+              '--slider-color': getDesign.controlBarColor,
+              '--slider-handle': (getRatio ? getRatio * 14 : 14) + 'px',
+              '--slider-height': (getRatio ? getRatio * 4 : 4) + 'px',
+              '--slider-top': -(getRatio ? getRatio * 5 : 5) + 'px',
+            }"
             class="no-drag"
             :value="sliderValue"
             :min="getDesign.minNumber"
@@ -225,8 +233,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>
@@ -238,6 +249,21 @@
 <style lang="less" scoped>
   :deep(.ant-slider-track) {
     background: var(--slider-color) !important;
+    height: var(--slider-height) !important;
+  }
+
+  :deep(.ant-slider-handle) {
+    height: var(--slider-handle) !important;
+    width: var(--slider-handle) !important;
+    margin-top: var(--slider-top) !important;
+  }
+
+  :deep(.ant-slider-step) {
+    height: var(--slider-height) !important;
+  }
+
+  :deep(.ant-slider-rail) {
+    height: var(--slider-height) !important;
   }
 
   :deep(.ant-spin-container) {

@@ -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>

@@ -56,6 +56,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -73,6 +74,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -8,6 +8,7 @@
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useComponentScale } from '../../../hook/useComponentScale';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -91,6 +92,8 @@
   };
 
   useDataFetch(props, updateFn);
+
+  const { getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -134,15 +137,21 @@
 
     <div
       class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
-      :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+      :style="{
+        color: getDesign.fontColor,
+        fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
+      }"
     >
       <div>{{ currentValue }}</div>
       <div class="ml-1">{{ getDesign.unit }}</div>
     </div>
     <div
-      class="text-gray-500 text-sm truncate"
+      class="text-gray-500"
       style="flex: 0 0 20px"
-      :style="{ fontSize: getDesign.fontSize + 'px' }"
+      :style="{
+        fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        height: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+      }"
       >{{ getDesign.attribute || '属性' }}</div
     >
     <UpdateTime v-show="getDesign.showTime" :time="time" />

@@ -62,6 +62,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -79,6 +80,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -8,6 +8,7 @@
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useComponentScale } from '../../../hook/useComponentScale';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -81,6 +82,8 @@
   };
 
   useDataFetch(props, updateFn);
+
+  const { getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -127,7 +130,10 @@
     </svg>
     <div
       class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
-      :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+      :style="{
+        color: getDesign.fontColor,
+        fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
+      }"
     >
       <div>{{ currentValue }}</div>
       <div class="ml-1">{{ getDesign.unit }}</div>
@@ -135,7 +141,10 @@
     <div
       class="text-gray-500"
       style="flex: 0 0 20px"
-      :style="{ fontSize: getDesign.fontSize + 'px', height: getDesign.fontSize + 'px' }"
+      :style="{
+        fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        height: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+      }"
       >{{ getDesign.attribute || '属性' }}</div
     >
     <UpdateTime v-show="getDesign.showTime" :time="time" />

@@ -13,6 +13,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -20,6 +20,45 @@
         component: 'Checkbox',
       },
       {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          max: 100,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.SHOW_TIME,
         label: '显示时间',
         component: 'Checkbox',

@@ -8,6 +8,7 @@
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useComponentScale } from '../../../hook/useComponentScale';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -37,13 +38,20 @@
 
   const getDesign = computed(() => {
     const { persetOption, option } = props.config;
-    const { fontColor: presetFontColor, showTime: persetShowTime } = persetOption || {};
+    const {
+      fontColor: presetFontColor,
+      showTime: persetShowTime,
+      fontSize: persetFontSize,
+      valueSize: persetValueSize,
+    } = persetOption || {};
     const { componentInfo, attribute, attributeName, attributeRename } = option || {};
-    const { fontColor, showTime } = componentInfo || {};
+    const { fontColor, showTime, fontSize, valueSize } = componentInfo || {};
     return {
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
       showTime: showTime ?? persetShowTime,
+      fontSize: fontSize || persetFontSize || 14,
+      valueSize: valueSize || persetValueSize || 20,
     };
   });
 
@@ -58,6 +66,8 @@
   };
 
   useDataFetch(props, updateFn);
+
+  const { getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -252,15 +262,21 @@
     <div class="absolute w-full h-full flex justify-center items-center bg-transparent">
       <div
         class="transform translate-x-full text-lg text-gray-500"
-        :style="{ color: getDesign.fontColor }"
+        :style="{
+          color: getDesign.fontColor,
+          fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
+        }"
       >
         <span>{{ currentValue }}</span>
         <span>{{ '℃' }}</span>
       </div>
     </div>
-    <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
-      getDesign.attribute || '属性'
-    }}</div>
+    <div
+      class="text-gray-500"
+      style="flex: 0 0 20px"
+      :style="{ fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px' }"
+      >{{ getDesign.attribute || '属性' }}</div
+    >
     <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -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"

@@ -56,6 +56,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -73,6 +74,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -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>

@@ -70,6 +70,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -87,6 +88,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -49,6 +49,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -66,6 +67,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -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>

@@ -60,6 +60,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -77,6 +78,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -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"

@@ -83,6 +83,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -100,6 +101,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -31,6 +31,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -61,7 +61,7 @@
 
   useDataFetch(props, updateFn);
 
-  const { getScale } = useComponentScale(props);
+  const { getScale, getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -77,12 +77,18 @@
         :style="{
           '--open-color': getDesign.openColor,
           '--close-color': getDesign.closeColor,
+          width: (getRatio ? getRatio * 70 : 70) + 'px',
+          height: (getRatio ? getRatio * 70 : 70) + 'px',
         }"
         :class="isOpenClose ? 'switch_open' : 'switch_close'"
       ></div>
-      <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
-        getDesign.attribute
-      }}</div>
+      <div
+        class="text-gray-500 truncate"
+        :style="{
+          fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        }"
+        >{{ getDesign.attribute }}</div
+      >
     </div>
     <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>
@@ -91,8 +97,6 @@
   .switch_open {
     background: var(--open-color);
     box-shadow: var(--open-color) 0 0 10px 3px;
-    width: 60px;
-    height: 60px;
     border-radius: 50%;
     margin: 10px 0;
   }
@@ -100,8 +104,6 @@
   .switch_close {
     background-color: var(--close-color);
     box-shadow: none;
-    width: 42.023px;
-    height: 42.023px;
     border-radius: 50%;
     margin: 10px 0;
   }

@@ -53,6 +53,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -8,6 +8,7 @@
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -58,6 +59,8 @@
   };
 
   useDataFetch(props, updateFn);
+
+  const { getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -67,12 +70,16 @@
       <SvgIcon
         :name="isOpenClose ? getDesign.icon : getDesign.iconClose"
         prefix="iconfont"
-        :size="60"
+        :size="getRatio ? getRatio * 70 : 70"
         :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }"
       />
-      <div class="text-gray-500 truncate m-2" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
-        getDesign.attribute || ''
-      }}</div>
+      <div
+        class="text-gray-500 truncate m-2"
+        :style="{
+          fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        }"
+        >{{ getDesign.attribute || '' }}</div
+      >
     </div>
     <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>

@@ -26,6 +26,7 @@
         defaultValue: 20,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -44,7 +44,7 @@
 
   useDataFetch(props, updateFn);
 
-  const { getScale } = useComponentScale(props);
+  const { getScale, getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -53,13 +53,18 @@
 
     <h1
       class="my-4 font-bold !my-2 truncate"
-      :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+      :style="{
+        color: getDesign.fontColor,
+        fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
+      }"
     >
       {{ currentValue || 0 }}
     </h1>
-    <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
-      getDesign.attribute || '温度'
-    }}</div>
+    <div
+      class="text-gray-500 truncate"
+      :style="{ fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px' }"
+      >{{ getDesign.attribute || '温度' }}</div
+    >
     <!-- <div v-if="config.option.componentInfo.showDeviceName">
       {{ config.option.deviceRename || config.option.deviceName }}
     </div> -->

@@ -26,6 +26,7 @@
         defaultValue: 20,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -43,6 +44,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -48,23 +48,29 @@
 
   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 items-center">
     <DeviceName :config="config" />
-
     <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
       <h1
         class="my-4 font-bold !my-2 truncate"
-        :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+        :style="{
+          color: getDesign.fontColor,
+          fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
+        }"
       >
         {{ currentValue || 0 }}
       </h1>
-      <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
-        getDesign.attribute || '温度'
-      }}</div>
+      <div
+        class="text-gray-500 truncate"
+        :style="{
+          fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        }"
+        >{{ getDesign.attribute || '温度' }}</div
+      >
     </div>
     <UpdateTime :time="time" />
   </main>

@@ -31,6 +31,7 @@
         defaultValue: 20,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -48,6 +49,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -55,7 +55,7 @@
 
   useDataFetch(props, updateFn);
 
-  const { getScale } = useComponentScale(props);
+  const { getScale, getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -65,19 +65,26 @@
       <SvgIcon
         :name="getDesign.icon!"
         prefix="iconfont"
-        :size="60"
+        :size="getRatio ? getRatio * 70 : 70"
         :style="{ color: getDesign.iconColor }"
       />
       <h1
         class="font-bold m-2 truncate"
-        :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+        :style="{
+          color: getDesign.fontColor,
+          fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
+        }"
       >
         <span> {{ currentValue || 0 }}</span>
         <span>{{ getDesign.unit }} </span>
       </h1>
-      <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
-        getDesign.attribute || '温度'
-      }}</div>
+      <div
+        class="text-gray-500 truncate"
+        :style="{
+          fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        }"
+        >{{ getDesign.attribute || '温度' }}</div
+      >
     </div>
     <UpdateTime :time="time" />
   </main>

@@ -30,6 +30,7 @@
         defaultValue: 20,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -47,6 +48,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -51,7 +51,7 @@
 
   useDataFetch(props, updateFn);
 
-  const { getScale } = useComponentScale(props);
+  const { getScale, getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -61,19 +61,26 @@
       <SvgIcon
         :name="getDesign.icon!"
         prefix="iconfont"
-        :size="60"
+        :size="getRatio ? getRatio * 70 : 70"
         :style="{ color: getDesign.iconColor }"
       />
       <h1
         class="my-4 font-bold !my-2 truncate"
-        :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+        :style="{
+          color: getDesign.fontColor,
+          fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
+        }"
       >
         <span>{{ currentValue || 0 }}</span>
         <span>{{ getDesign.unit }}</span>
       </h1>
-      <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
-        getDesign.attribute || '温度'
-      }}</div>
+      <div
+        class="text-gray-500 truncate"
+        :style="{
+          fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        }"
+        >{{ getDesign.attribute || '温度' }}</div
+      >
     </div>
   </main>
 </template>

@@ -32,6 +32,7 @@
         defaultValue: 20,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {
@@ -49,6 +50,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -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,34 +109,43 @@
   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 flex w-7/10"
+          :style="{
+            color: item.fontColor,
+            fontSize: (getRatios ? getRatios * item.fontSize : item.fontSize) + 'px',
+          }"
         >
-          {{
+          <!-- {{
             `${item.deviceName}
             -
             ${item.attributeName || item.attribute || '温度'}`
-          }}
+          }} -->
+          <div class="max-w-4/6 overflow-ellipsis overflow-hidden whitespace-nowrap">{{
+            item.deviceName
+          }}</div>
+          <span>-</span>
+          <div>{{ item.attributeName || item.attribute || '温度' }}</div>
         </div>
-        <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }"
+        <span
+          class="text-lg max-w-3/10"
+          :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 +156,6 @@
         />
       </div>
     </div>
-    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>
 <style lang="less" scoped>

@@ -48,6 +48,7 @@
         defaultValue: 14,
         componentProps: {
           min: 0,
+          max: 100,
           formatter: (e) => {
             const value = e.replace(/^0/g, '');
             if (value) {

@@ -105,18 +105,23 @@
         <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 text-sm truncate ml-6"
-          :style="{ fontSize: item.fontSize + 'px' }"
+          class="text-gray-500 ml-6"
+          :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
           >{{ item.deviceName + '-' + item.attributeName || '温度' }}</div
         >
       </div>
 
-      <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }">
+      <span
+        :style="{
+          color: item.fontColor,
+          fontSize: (getRatio ? getRatio * 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 };
 };

@@ -149,7 +149,7 @@
 </script>
 
 <template>
-  <section class="p-5 flex flex-col w-full">
+  <section class="p-2.5 flex flex-col w-full">
     <main class="flex w-full h-full h-7">
       <Tooltip :title="sourceInfo.name">
         <div class="flex-1 w-full h-full flex text-lg justify-center font-semibold truncate">