Merge branch 'fix/DEFECT-1350' into 'main_dev'

fix: DEFECT-1350修复控制组件无法显示设备名称

See merge request yunteng/thingskit-front!647

@@ -7,9 +7,11 @@ import {
   PublicPresetOptions,
 } from '/@/views/visual/packages/index.type';
 import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
 
 export const option: PublicPresetOptions = {
-  componetDesign: false,
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -2,22 +2,22 @@
   import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { option } from './config';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
-      {
-        field: ComponentConfigFieldEnum.FONT_COLOR,
-        label: '数值字体颜色',
-        component: 'ColorPicker',
-        changeEvent: 'update:value',
-        componentProps: {
-          defaultValue: '#FD7347',
-        },
-      },
+      // {
+      //   field: ComponentConfigFieldEnum.FONT_COLOR,
+      //   label: '数值字体颜色',
+      //   component: 'ColorPicker',
+      //   changeEvent: 'update:value',
+      //   defaultValue: option.fontColor,
+      // },
       {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         component: 'Checkbox',
+        defaultValue: option.showDeviceName,
       },
     ],
     showActionButtonGroup: false,

@@ -6,6 +6,8 @@
   import { ref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
@@ -35,21 +37,24 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
-    <Spin :spinning="loading">
-      <label class="sliding-switch" :style="getScale">
-        <input
-          type="checkbox"
-          :value="currentValue"
-          :checked="currentValue"
-          @change="handleChange"
-        />
-        <span class="slider"></span>
-        <span class="on">ON</span>
-        <span class="off">OFF</span>
-      </label>
-      <div class="text-center mt-2 text-gray-700" :style="getScale"> 属性 </div>
-    </Spin>
+  <main class="w-full h-full flex flex-col justify-center">
+    <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">
+          <input
+            type="checkbox"
+            :value="currentValue"
+            :checked="currentValue"
+            @change="handleChange"
+          />
+          <span class="slider"></span>
+          <span class="on">ON</span>
+          <span class="off">OFF</span>
+        </label>
+        <div class="text-center mt-2 text-gray-700" :style="getScale"> 属性 </div>
+      </Spin>
+    </main>
   </main>
 </template>
 

@@ -8,6 +8,7 @@
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { unref } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -45,18 +46,21 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex justify-center items-center" :style="getScale">
-    <div class="flex flex-col justify-center items-center mr-20">
-      <SvgIcon
-        :name="getDesign.icon"
-        prefix="iconfont"
-        :style="{ color: getDesign.iconColor }"
-        :size="50"
-      />
-      <span class="mt-3 truncate text-gray-500 text-xs text-center">
-        {{ getDesign.attribute || '属性' }}
-      </span>
-    </div>
-    <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
+  <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">
+        <SvgIcon
+          :name="getDesign.icon"
+          prefix="iconfont"
+          :style="{ color: getDesign.iconColor }"
+          :size="50"
+        />
+        <span class="mt-3 truncate text-gray-500 text-xs text-center">
+          {{ getDesign.attribute || '属性' }}
+        </span>
+      </div>
+      <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
+    </main>
   </main>
 </template>

@@ -7,9 +7,11 @@ import {
   PublicPresetOptions,
 } from '/@/views/visual/packages/index.type';
 import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
 
 export const option: PublicPresetOptions = {
-  componetDesign: false,
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -2,22 +2,21 @@
   import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
-
+  import { option } from './config';
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
-      {
-        field: ComponentConfigFieldEnum.FONT_COLOR,
-        label: '数值字体颜色',
-        component: 'ColorPicker',
-        changeEvent: 'update:value',
-        componentProps: {
-          defaultValue: '#FD7347',
-        },
-      },
+      // {
+      //   field: ComponentConfigFieldEnum.FONT_COLOR,
+      //   label: '数值字体颜色',
+      //   component: 'ColorPicker',
+      //   changeEvent: 'update:value',
+      //   defaultValue: option.fontColor,
+      // },
       {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         component: 'Checkbox',
+        defaultValue: option.showDeviceName,
       },
     ],
     showActionButtonGroup: false,

@@ -6,6 +6,7 @@
   import { ref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -34,22 +35,25 @@
 </script>
 
 <template>
-  <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">
-        <label class="switch">
-          <input type="checkbox" :checked="currentValue" @change="handleChange" />
-          <div class="button">
-            <div class="light"></div>
-            <div class="dots"></div>
-            <div class="characters"></div>
-            <div class="shine"></div>
-            <div class="shadow"></div>
-          </div>
-        </label>
-      </div>
-      <div class="text-center mt-2 text-gray-500" :style="getScale">属性</div>
-    </Spin>
+  <main class="w-full h-full flex flex-col justify-center">
+    <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">
+          <label class="switch">
+            <input type="checkbox" :checked="currentValue" @change="handleChange" />
+            <div class="button">
+              <div class="light"></div>
+              <div class="dots"></div>
+              <div class="characters"></div>
+              <div class="shine"></div>
+              <div class="shadow"></div>
+            </div>
+          </label>
+        </div>
+        <div class="text-center mt-2 text-gray-500" :style="getScale">属性</div>
+      </Spin>
+    </main>
   </main>
 </template>