fix: 看板组件样式调整

@@ -3,11 +3,12 @@
 
   defineProps<{
     config: ComponentPropsConfigType;
+    getRatio?: string | number;
   }>();
 </script>
 
 <template>
-  <div v-if="config.option?.componentInfo?.showDeviceName" class="h-8 font-semibold">
+  <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();
   });

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

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

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

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

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

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

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

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