Merge branch 'fix/data-board-attribute-name' into 'main_dev'

fix: 修复数据看板属性未使用物模型名称

See merge request yunteng/thingskit-front!702

@@ -3,7 +3,7 @@
   import { option } from './config';
   import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { Spin } from 'ant-design-vue';
-  import { ref } from 'vue';
+  import { computed, ref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
@@ -16,6 +16,14 @@
 
   const currentValue = ref(false);
 
+  const getDesign = computed(() => {
+    const { option } = props.config;
+    const { attribute, attributeRename, attributeName } = option;
+    return {
+      attribute: attributeRename || attributeName || attribute,
+    };
+  });
+
   const { sendCommand, loading } = useSendCommand();
   const handleChange = async (event: Event) => {
     const target = event.target as HTMLInputElement;
@@ -52,7 +60,9 @@
           <span class="on">ON</span>
           <span class="off">OFF</span>
         </label>
-        <div class="text-center mt-2 text-gray-700" :style="getScale"> 属性 </div>
+        <div class="text-center mt-2 text-gray-700" :style="getScale">
+          {{ getDesign.attribute || '属性' }}
+        </div>
       </Spin>
     </main>
   </main>

@@ -18,13 +18,13 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
     const { icon: presetIcon, iconColor: presetIconColor } = persetOption || {};
     const { icon, iconColor } = componentInfo || {};
     return {
       icon: icon ?? presetIcon,
       iconColor: iconColor || presetIconColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 

@@ -3,7 +3,7 @@
   import { option } from './config';
   import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { Spin } from 'ant-design-vue';
-  import { ref } from 'vue';
+  import { computed, ref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
@@ -16,6 +16,14 @@
 
   const currentValue = ref(false);
 
+  const getDesign = computed(() => {
+    const { option } = props.config;
+    const { attribute, attributeRename, attributeName } = option;
+    return {
+      attribute: attributeRename || attributeName || attribute,
+    };
+  });
+
   const { loading, sendCommand } = useSendCommand();
   const handleChange = async (event: Event) => {
     const target = event.target as HTMLInputElement;
@@ -51,7 +59,9 @@
             </div>
           </label>
         </div>
-        <div class="text-center mt-2 text-gray-500" :style="getScale">属性</div>
+        <div class="text-center mt-2 text-gray-500" :style="getScale">{{
+          getDesign.attribute || '属性'
+        }}</div>
       </Spin>
     </main>
   </main>

@@ -22,12 +22,12 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
     const { controlBarColor: persetControlBarColor, fonColor: persetFontColor } =
       persetOption || {};
     const { controlBarColor, fontColor } = componentInfo || {};
     return {
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
       controlBarColor: controlBarColor ?? persetControlBarColor,
       fontColor: fontColor ?? persetFontColor,
     };
@@ -87,7 +87,7 @@
             :style="{ color: getDesign.fontColor }"
             class="mt-3 truncate font-bold text-xs text-center"
           >
-            {{ getDesign.attribute || '设备1' }}
+            {{ getDesign.attribute || '属性' }}
           </span>
         </div>
       </Spin>

@@ -6,6 +6,7 @@
   import { ref } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -13,9 +14,11 @@
 
   const currentValue = ref(25);
 
+  const time = ref<Nullable<number>>(null);
+
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo } = option;
+    const { componentInfo, attribute, attributeName, attributeRename } = option;
     const { flowmeterConfig, unit, fontColor } = componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const {
@@ -36,6 +39,7 @@
       waveThird: waveThird ?? presetWaveThird,
       unit: unit ?? persetUnit,
       fontColor: fontColor ?? presetFontColor,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
@@ -62,7 +66,8 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
-    const [_, value] = latest;
+    const [timespan, value] = latest;
+    time.value = timespan;
     currentValue.value = Number(value);
   };
 
@@ -112,6 +117,10 @@
       <div>{{ currentValue }}</div>
       <div class="ml-1">{{ getDesign.unit }}</div>
     </div>
+    <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
+      getDesign.attribute || '属性'
+    }}</div>
+    <UpdateTime :time="time" />
   </main>
 </template>
 

@@ -6,6 +6,7 @@
   import { ref } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -13,9 +14,11 @@
 
   const currentValue = ref(25);
 
+  const time = ref<Nullable<number>>(null);
+
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo } = option;
+    const { componentInfo, attribute, attributeName, attributeRename } = option;
     const { flowmeterConfig, unit, fontColor } = componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const {
@@ -36,6 +39,7 @@
       waveThird: waveThird ?? presetWaveThird,
       unit: unit ?? persetUnit,
       fontColor: fontColor ?? presetFontColor,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
@@ -52,7 +56,8 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
-    const [_, value] = latest;
+    const [timespan, value] = latest;
+    time.value = timespan;
     currentValue.value = Number(value);
   };
 
@@ -105,6 +110,10 @@
       <div>{{ currentValue }}</div>
       <div class="ml-1">{{ getDesign.unit }}</div>
     </div>
+    <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
+      getDesign.attribute || '属性'
+    }}</div>
+    <UpdateTime :time="time" />
   </main>
 </template>
 

@@ -6,6 +6,7 @@
   import { computed } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -13,6 +14,8 @@
 
   const currentValue = ref(50);
 
+  const time = ref<Nullable<number>>(null);
+
   const getValue = computed(() => {
     const maxHeight = 190;
     const minHeight = 15;
@@ -34,17 +37,19 @@
   const getDesign = computed(() => {
     const { persetOption, option } = props.config;
     const { fontColor: presetFontColor } = persetOption || {};
-    const { componentInfo } = option || {};
+    const { componentInfo, attribute, attributeName, attributeRename } = option || {};
     const { fontColor } = componentInfo || {};
     return {
       fontColor: fontColor ?? presetFontColor,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
-    const [_, value] = latest;
+    const [timespan, value] = latest;
+    time.value = timespan;
 
     currentValue.value = Number(value);
   };
@@ -247,6 +252,10 @@
         <span>{{ '℃' }}</span>
       </div>
     </div>
+    <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
+      getDesign.attribute || '属性'
+    }}</div>
+    <UpdateTime :time="time" />
   </main>
 </template>
 

@@ -6,6 +6,7 @@
   import { Space } from 'ant-design-vue';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -45,13 +46,13 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
     const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
     const { unit, fontColor } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
@@ -71,6 +72,8 @@
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center">
     <div class="flex flex-col w-full h-full">
+      <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">
           <Space

@@ -22,7 +22,7 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
     const {
       fontColor: presetFontColor,
       unit: presetUnit,
@@ -35,7 +35,7 @@
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
       pointerColor: pointerColor ?? presetPointerColor,
       instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
       gradientInfo: gradientInfo ?? presetGradientInfo,

@@ -100,7 +100,6 @@
       [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
       [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle,
     };
-    console.log(value, 'value');
     return setFieldsValue(value);
   };
 

@@ -22,7 +22,7 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
     const {
       fontColor: presetFontColor,
       unit: presetUnit,
@@ -36,7 +36,7 @@
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
       pointerColor: pointerColor ?? presetPointerColor,
       instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
       progressBarCircle: progressBarCircle ?? presetProgressBarCircle,

@@ -32,7 +32,8 @@
     return {
       dataSource: dataSource.map((item) => {
         const { unit, fontColor, showDeviceName } = item.componentInfo || {};
-        const { deviceName, deviceRename, attribute, attributeRename, deviceId } = item;
+        const { deviceName, deviceRename, attribute, attributeRename, deviceId, attributeName } =
+          item;
         // return {
         //   unit: unit ?? persetUnit,
         //   fontColor: fontColor ?? persetFontColor,
@@ -49,6 +50,7 @@
           showDeviceName: showDeviceName ?? presetShowDeviceName,
           deviceName,
           deviceRename,
+          attributeName,
           id: deviceId,
         };
       }),
@@ -151,10 +153,8 @@
   const series = ref(
     unref(getDesign).dataSource.map((item, index) => ({
       value: 30,
-      name: `${
-        item.showDeviceName
-          ? (item.deviceRename || item.deviceName) + '-' + (item.attributeRename || item.attribute)
-          : ''
+      name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
+        item.attributeRename || item.attributeName || item.attribute
       }`,
       attribute: item.attribute,
       id: item.id,
@@ -334,9 +334,6 @@
   <main class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <!-- <div class="text-gray-500 text-xs text-center truncate">{{
-      getDesign.attribute || '湿度'
-    }}</div> -->
     <UpdateTime :time="time" />
   </main>
 </template>

@@ -21,7 +21,7 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
     const {
       fontColor: presetFontColor,
       unit: presetUnit,
@@ -34,7 +34,7 @@
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
       pointerColor: pointerColor ?? presetPointerColor,
       instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
       gradientInfo: gradientInfo ?? presetGradientInfo,

@@ -25,13 +25,13 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
     const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
     const { unit, fontColor } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 

@@ -10,6 +10,7 @@
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useIntervalFn } from '@vueuse/core';
   import { nextTick } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -28,7 +29,7 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attributeRename, attribute } = option;
+    const { componentInfo, attributeRename, attribute, attributeName } = option;
 
     const {
       fontColor: presetFontColor,
@@ -41,7 +42,7 @@
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
       gradientInfo: gradientInfo ?? presetGradientInfo,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
@@ -204,6 +205,7 @@
 
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
     <div class="text-center text-gray-500 text-xs truncate">
       {{ getDesign.attribute || '速度' }}

@@ -24,13 +24,14 @@
       closeColor: persetCloseColor,
       showDeviceName: persetShowDeviceName,
     } = persetOption || {};
-    const { componentInfo } = option;
+    const { componentInfo, attribute, attributeName, attributeRename } = option;
 
     const { openColor, closeColor, showDeviceName } = componentInfo || {};
     return {
       openColor: openColor ?? persetOpenColor,
       closeColor: closeColor ?? persetCloseColor,
       showDeviceName: showDeviceName ?? persetShowDeviceName,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
@@ -60,6 +61,7 @@
 <template>
   <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" class="text-center" />
+
     <div
       :style="{
         '--open-color': getDesign.openColor,
@@ -67,6 +69,7 @@
       }"
       :class="isOpenClose ? 'switch_open' : 'switch_close'"
     ></div>
+    <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
     <UpdateTime :time="time" />
   </main>
 </template>

@@ -31,21 +31,14 @@
     return {
       dataSource: dataSource?.map((item) => {
         const { unit, fontColor, showDeviceName } = item.componentInfo || {};
-        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
-        // return {
-        //   unit: unit ?? presetUnit,
-        //   fontColor: fontColor ?? presetFontColor,
-        //   attribute,
-        //   attributeRename,
-        //   deviceName,
-        //   deviceRename,
-        //   showDeviceName: showDeviceName ?? presetShowDeviceName,
-        // };
+        const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
+          item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           attribute,
           attributeRename,
+          attributeName,
           showDeviceName: showDeviceName ?? presetShowDeviceName,
           deviceName,
           deviceRename,
@@ -58,10 +51,8 @@
   const series = ref(
     unref(getDesign).dataSource.map((item) => ({
       value: 0,
-      name: `${
-        item.showDeviceName
-          ? (item.deviceRename || item.deviceName) + '-' + (item.attributeRename || item.attribute)
-          : ''
+      name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
+        item.attributeRename || item.attributeName || item.attribute
       }`,
       attribute: item.attribute,
       id: item.id,
@@ -125,19 +116,9 @@
     chartInstance.value.setOption(options());
   };
 
-  // const randomFn = () => {
-  //   useIntervalFn(() => {
-  //     const value = (Math.random() * 100).toFixed(0);
-  //     unref(chartInstance)?.setOption({
-  //       series: [{ data: [{ value }] }, { data: [{ value }] }],
-  //     } as EChartsOption);
-  //   }, 3000);
-  // };
-
   const updateChart = (data: SeriesOption['data']) => {
     unref(chartInstance)?.setOption({
       series: [{ data }],
-      // color: unref(list).map((item) => item.title.color),
     } as EChartsOption);
   };
 
@@ -154,32 +135,12 @@
     });
 
     updateChart(unref(series));
-    // const { data = {} } = message;
-    // const { dataSource } = unref(getDesign);
-    // const series = dataSource.map((item) => {
-    //   const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;
-    //   const [latest] = data[attribute] || [];
-    //   const [_timespan, value] = latest || [];
-
-    //   return {
-    //     value,
-    //     name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
-    //     itemStyle: { color: fontColor },
-    //     tooltip: {
-    //       valueFormatter(value) {
-    //         return `${value} ${unit ?? ''}`;
-    //       },
-    //     },
-    //   } as SeriesOption['data'];
-    // });
-    // updateChart(series);
   };
 
   useMultipleDataFetch(props, updateFn);
 
   onMounted(() => {
     initial();
-    // !props.config.option.uuid && randomFn();
     !props.config.option.uuid;
   });
 

@@ -32,16 +32,8 @@
     return {
       dataSource: dataSource?.map((item) => {
         const { unit, fontColor, showDeviceName } = item.componentInfo || {};
-        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
-        // return {
-        //   unit: unit ?? presetUnit,
-        //   fontColor: fontColor ?? presetFontColor,
-        //   attribute,
-        //   attributeRename,
-        //   deviceName,
-        //   deviceRename,
-        //   showDeviceName: showDeviceName ?? presetShowDeviceName,
-        // };
+        const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
+          item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
@@ -50,6 +42,7 @@
           showDeviceName: showDeviceName ?? presetShowDeviceName,
           deviceName,
           deviceRename,
+          attributeName,
           id: deviceId,
         };
       }),
@@ -57,7 +50,6 @@
   });
 
   const options = (): EChartsOption => {
-    // getStageColor(gradientInfo);
     return {
       tooltip: {
         trigger: 'item',
@@ -112,19 +104,9 @@
     chartInstance.value.setOption(options());
   };
 
-  // const randomFn = () => {
-  //   useIntervalFn(() => {
-  //     const value = (Math.random() * 100).toFixed(0);
-  //     unref(chartInstance)?.setOption({
-  //       series: [{ data: [{ value }] }, { data: [{ value }] }],
-  //     } as EChartsOption);
-  //   }, 3000);
-  // };
-
   const updateChart = (data: SeriesOption['data']) => {
     unref(chartInstance)?.setOption({
       series: [{ data }],
-      // color: unref(list).map((item) => item.title.color),
     } as EChartsOption);
   };
   const { forEachGroupMessage } = useReceiveMessage();
@@ -133,10 +115,8 @@
   const series = ref(
     unref(getDesign).dataSource.map((item) => ({
       value: 0,
-      name: `${
-        item.showDeviceName
-          ? (item.deviceRename || item.deviceName) + '-' + (item.attributeRename || item.attribute)
-          : ''
+      name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
+        item.attributeRename || item.attributeName || item.attribute
       }`,
       itemStyle: { color: item.fontColor },
       attribute: item.attribute,
@@ -150,7 +130,6 @@
   );
 
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    // console.log(unref(series), 'series', unref(getDesign).dataSource);
     forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
       series.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
@@ -179,7 +158,6 @@
 
   onMounted(() => {
     initial();
-    // !props.config.option.uuid && randomFn();
     !props.config.option.uuid;
   });
 

@@ -3,7 +3,6 @@
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
   import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
-  import { computed } from 'vue';
   import { ref, onMounted, unref } from 'vue';
   import { useIntervalFn } from '@vueuse/core';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
@@ -15,23 +14,6 @@
 
   const isOpenClose = ref<boolean>(true);
 
-  const getDesign = computed(() => {
-    const { persetOption = {}, option } = props.config;
-    const {
-      openColor: persetOpenColor,
-      closeColor: persetCloseColor,
-      showDeviceName: persetShowDeviceName,
-    } = persetOption || {};
-    const { componentInfo } = option;
-
-    const { openColor, closeColor, showDeviceName } = componentInfo || {};
-    return {
-      openColor: openColor ?? persetOpenColor,
-      closeColor: closeColor ?? persetCloseColor,
-      showDeviceName: showDeviceName ?? persetShowDeviceName,
-    };
-  });
-
   const randomFn = () => {
     useIntervalFn(() => {
       isOpenClose.value = !unref(isOpenClose);
@@ -58,12 +40,10 @@
   <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" class="text-center" />
     <div
-      :style="{
-        '--open-color': getDesign.openColor,
-        '--close-color': getDesign.closeColor,
-      }"
+      style="--open-color: `${getDesign.openColor}`; --close-color: `${getDesign.closeColor}`"
       :class="isOpenClose ? 'switch_open' : 'switch_close'"
-    ></div>
+    >
+    </div>
   </main>
 </template>
 <style lang="less" scoped>

@@ -18,12 +18,12 @@
 
     const { fontColor: persetFontColor } = persetOption;
 
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
 
     const { fontColor } = componentInfo || {};
     return {
       fontColor: fontColor || persetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
@@ -46,7 +46,7 @@
     <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }">
       {{ currentValue || 0 }}
     </h1>
-    <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div>
+    <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
     <!-- <div v-if="config.option.componentInfo.showDeviceName">
       {{ config.option.deviceRename || config.option.deviceName }}
     </div> -->

@@ -20,13 +20,13 @@
 
     const { fontColor: persetFontColor } = persetOption;
 
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeName, attributeRename } = option;
 
     const { fontColor } = componentInfo || {};
 
     return {
       fontColor: fontColor || persetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
@@ -51,7 +51,7 @@
       <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }">
         {{ currentValue || 0 }}
       </h1>
-      <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div>
+      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
     </div>
     <UpdateTime :time="time" />
   </main>

@@ -27,7 +27,7 @@
       fontColor: persetFontColor,
     } = persetOption;
 
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
 
     const { icon, iconColor, fontColor, unit } = componentInfo || {};
     return {
@@ -35,7 +35,7 @@
       unit: unit ?? perseUnit,
       icon: icon || persetIcon,
       fontColor: fontColor || persetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
@@ -66,7 +66,7 @@
         <span> {{ currentValue || 0 }}</span>
         <span>{{ getDesign.unit }} </span>
       </h1>
-      <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div>
+      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
     </div>
     <UpdateTime :time="time" />
   </main>

@@ -24,7 +24,7 @@
       fontColor: persetFontColor,
     } = persetOption;
 
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename, attributeName } = option;
 
     const { icon, iconColor, fontColor, unit } = componentInfo || {};
     return {
@@ -32,7 +32,7 @@
       unit: unit ?? perseUnit,
       icon: icon || persetIcon,
       fontColor: fontColor || persetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName || attribute,
     };
   });
 
@@ -62,7 +62,7 @@
         <span>{{ currentValue || 0 }}</span>
         <span>{{ getDesign.unit }}</span>
       </h1>
-      <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div>
+      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
     </div>
   </main>
 </template>

@@ -30,6 +30,7 @@
     attributeRename?: string;
     deviceId?: string;
     deviceName?: string;
+    attributeName?: string;
     deviceRename?: string;
   }
 
@@ -65,7 +66,8 @@
     return {
       dataSource: dataSource.map((item) => {
         const { unit, fontColor, backgroundColor } = item.componentInfo || {};
-        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
+        const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
+          item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
@@ -74,6 +76,7 @@
           deviceRename,
           attribute,
           attributeRename,
+          attributeName,
           id: deviceId,
         } as PercentType;
       }),
@@ -112,11 +115,11 @@
       class="mt-2 flex flex-col ml-3 mr-3 items-stretch"
     >
       <div class="flex justify-between">
-        <div class="text-gray-500 text-lg truncate" :style="{ color: item.fontColor }">
+        <div class="text-gray-500 text-sm truncate" :style="{ color: item.fontColor }">
           {{
-            (item.deviceRename || item.deviceName) +
-              '-' +
-              (item.attributeRename || item.attribute) || '温度'
+            `${item.deviceRename || item.deviceName}
+            -
+            ${item.attributeRename || item.attributeName || item.attribute || '温度'}`
           }}
         </div>
         <span class="text-lg" :style="{ color: item.fontColor }"