Merge branch 'perf/visual-board-structural' into 'main_dev'

perf: 看板优化选择结构体时新增结构体组件

See merge request yunteng/thingskit-front!1452

@@ -124,6 +124,10 @@
 
   const handleCopy = async (record: DataSourceType) => {
     const { key } = props.componentConfig || {};
+    if (key === 'ComponentStructural' && props.dataSource.length >= 1) {
+      createMessage.warning('结构体组件绑定的数据源不能超过1条');
+      return;
+    }
     if (key == 'HumidityComponent2' && props.dataSource.length >= 6) {
       createMessage.warning('绑定的数据源不能超过6条~');
       return;
@@ -145,8 +149,13 @@
     ]);
   };
 
-  const handleSetting = (record: DataSourceType) => {
-    openModal(true, { mode: DataActionModeEnum.UPDATE, record: record } as ModalParamsType);
+  const handleSetting = (record: DataSourceType, index: number) => {
+    const values = getFormValues();
+
+    openModal(true, {
+      mode: DataActionModeEnum.UPDATE,
+      record: { ...record, ...values[index] },
+    } as ModalParamsType);
   };
 
   const handleDelete = (record: DataSourceType) => {
@@ -208,7 +217,7 @@
           </Tooltip>
           <Tooltip title="设置" v-if="hasSettingDesignIcon">
             <SettingOutlined
-              @click="handleSetting(item)"
+              @click="handleSetting(item, index)"
               class="cursor-pointer text-lg !leading-32px"
             />
           </Tooltip>

@@ -5,8 +5,12 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { ConfigType, CreateComponentType } from '../../../packages/index.type';
   import { ref } from 'vue';
-  import { unref } from 'vue';
+  import { unref, nextTick } from 'vue';
   import { ModalParamsType } from '/#/utils';
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { createImgPreview } from '/@/components/Preview';
+  import { upload } from '/@/api/oss/ossFileUploader';
 
   const props = defineProps<{
     selectWidgetKeys: SelectedWidgetKeys;
@@ -30,9 +34,94 @@
   const currentEditRecord = ref<DataSourceType>({} as DataSourceType);
 
   const [register, { closeModal }] = useModalInner((data: ModalParamsType<DataSourceType>) => {
-    const { record } = data;
+    const { record }: any = data;
     currentEditRecord.value = record;
-    setFormValues(record.componentInfo || {});
+    if (record.structural?.length) {
+      record.structural.forEach((item, index) => {
+        nextTick(() => {
+          unref(settingFormEl)?.appendSchemaByField?.({
+            field: item + 'StructuralIcon',
+            label: record.structuralLabel[index] + '图标',
+            // labelWidth: '300',
+            component: 'IconDrawer',
+            changeEvent: 'update:value',
+            defaultValue: 'shuiwen',
+            ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom',
+            componentProps({ formModel }) {
+              const color = formModel[item + 'StructuralIconColor'];
+              return {
+                color,
+              };
+            },
+          });
+          unref(settingFormEl)?.appendSchemaByField?.({
+            field: item + 'StructuralIconColor',
+            label: record.structuralLabel[index] + '图标颜色',
+            component: 'ColorPicker',
+            changeEvent: 'update:value',
+            defaultValue: '#367bff',
+            ifShow: ({ model }) => {
+              return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+            },
+          });
+          unref(settingFormEl)?.appendSchemaByField?.({
+            field: item + 'StructuralCustomIcon',
+            label: record.structuralLabel[index] + '图标',
+            component: 'ApiUpload',
+            ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] === 'custom',
+            changeEvent: 'update:fileList',
+            valueField: 'fileList',
+            required: true,
+            helpMessage: ['支持.svg格式，建议尺寸为32*32px，大小不超过50kb '],
+            componentProps: ({ formModel, formActionType }) => {
+              const { setFieldsValue } = formActionType;
+              return {
+                maxSize: 50 * 1024,
+                listType: 'picture-card',
+                maxFileLimit: 1,
+                accept: '.svg',
+                api: async (file: File) => {
+                  try {
+                    const formData = new FormData();
+                    const { name } = file;
+                    formData.set('file', file);
+                    const { fileStaticUri, fileName } = await upload(formData);
+                    return {
+                      uid: fileStaticUri,
+                      name: name || fileName,
+                      url: fileStaticUri,
+                    } as FileItem;
+                  } catch (error) {
+                    return {};
+                  }
+                },
+                onDownload() {},
+                onPreview: (fileList: FileItem) => {
+                  createImgPreview({ imageList: [fileList.url!] });
+                },
+
+                onDelete(url: string) {
+                  // 去重 取要删除的自定义图标
+                  setFieldsValue({
+                    structuralDeleteUrl: [
+                      ...new Set([
+                        ...formModel.structuralDeleteUrl
+                          .split(',')
+                          ?.filter((item) => Boolean(item)),
+                        url!,
+                      ]),
+                    ].join(','),
+                  });
+                },
+              };
+            },
+          });
+        });
+      });
+    }
+    nextTick(() => {
+      setFormValues(record.componentInfo || {});
+    });
   });
 
   const getFormValues = () => {
@@ -43,9 +132,25 @@
     unref(settingFormEl)?.setFormValues(data || {});
   };
 
-  const handleOk = () => {
+  const handleOk = async () => {
     const { uuid } = unref(currentEditRecord);
+    await unref(settingFormEl)?.validate?.();
     emit('ok', { uuid, componentInfo: getFormValues() } as DataSourceType);
+    handleCancel();
+  };
+
+  const handleCancel = () => {
+    const { structural } = unref(currentEditRecord) || {};
+    if (structural?.length) {
+      structural.forEach((item) => {
+        unref(settingFormEl)?.removeSchemaByFiled?.([
+          item + 'StructuralIcon',
+          item + 'StructuralIconColor',
+          item + 'StructuralCustomIcon',
+          // item + 'StructuralDeleteUrl',
+        ]);
+      });
+    }
     closeModal();
   };
 
@@ -56,7 +161,13 @@
 </script>
 
 <template>
-  <BasicModal @register="register" title="组件设置" @ok="handleOk" :width="700">
+  <BasicModal
+    @register="register"
+    title="组件设置"
+    @ok="handleOk"
+    :width="700"
+    @cancel="handleCancel"
+  >
     <!--  -->
     <component ref="settingFormEl" :is="getSettingComponent" />
   </BasicModal>

 import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
 import { DataSource } from '../palette/types';
+import { FormSchema } from '/@/components/Form';
 
 export interface SelectedWidgetKeys {
   categoryKey: string;
@@ -21,5 +22,11 @@ export interface PublicFormInstaceType {
   getFormValues: () => Recordable;
   setFormValues: (data: Recordable) => void;
   resetFormValues: () => Promise<void>;
+  appendSchemaByField?: (
+    schema: FormSchema,
+    prefixField?: string | undefined,
+    first?: boolean | undefined
+  ) => Promise<void>;
+  removeSchemaByFiled?: (field: string | string[]) => Promise<void>;
   validate?: () => Promise<{ flag: boolean; errors: ValidateErrorEntity }>;
 }

@@ -122,6 +122,11 @@
 
   const handleNewRecord = () => {
     const { componentKey } = unref(selectWidgetKeys);
+
+    if (componentKey === 'ComponentStructural' && unref(dataSource).length >= 1) {
+      createMessage.warning('结构体组件绑定的数据源不能超过1条');
+      return;
+    }
     if (componentKey === 'HumidityComponent2' && unref(dataSource).length >= 6) {
       createMessage.warning('绑定的数据源不能超过6条');
       return;
@@ -258,22 +263,48 @@
     }
     const value = getFormValues();
     const { record } = value || {};
+    const { componentKey } = unref(selectWidgetKeys);
     try {
       const currentRecordIconUrl = ref<any>([]);
-      // 判断当前自定义组件表单以前的自定义图片呢url
-      currentRecord.value?.dataSource.forEach((item) => {
-        if (item.componentInfo?.customIcon) {
-          item.componentInfo?.customIcon?.forEach((icon: FileItem) => {
-            currentRecordIconUrl.value.push(icon.url);
-          });
-        }
-      });
+      // 判断当前自定义组件表单以前自定义图片的url
+      if (unref(currentRecord)?.dataSource) {
+        currentRecord.value?.dataSource?.forEach((item) => {
+          if (item.componentInfo?.customIcon || componentKey !== 'ComponentStructural') {
+            item.componentInfo?.customIcon?.forEach((icon: FileItem) => {
+              currentRecordIconUrl.value.push(icon.url);
+            });
+          }
+          // if (componentKey === 'ComponentStructural' && item?.StructuralDeleteUrl) {
+          //   currentRecordIconUrl.value.push(...item?.StructuralDeleteUrl?.split(','));
+
+          // }
+          for (const item1 in item.componentInfo) {
+            if (item1.includes('StructuralCustomIcon')) {
+              currentRecordIconUrl.value.push(item.componentInfo[item1]?.[0].url);
+            }
+          }
+        });
+      }
       // 取当前修改过后的自定义图片url
-      const dataSourceUrl = record.dataSource?.map(
-        (item) => item.componentInfo.customIcon?.[0].url
-      );
 
-      // 当前自定义组件取出要进行删除的图标url
+      const dataSourceUrl =
+        componentKey !== 'ComponentStructural'
+          ? record.dataSource?.map((item) => item.componentInfo.customIcon?.[0].url)
+          : [];
+
+      if (componentKey === 'ComponentStructural') {
+        record.dataSource?.forEach((item) => {
+          for (const item1 in item.componentInfo) {
+            if (item1.includes('StructuralCustomIcon')) {
+              dataSourceUrl?.push(item.componentInfo[item1]?.[0].url);
+            }
+          }
+        });
+      }
+
+      // StructuralCustomIcon
+
+      // 当前自定义组件取出要进行删除的图标url ->判断当前组件的自定义图标url是跟以前不一样  取出不一样的以前自定义组件的url进行删除
       const dataSourceDeleteUrl = unref(currentRecordIconUrl).filter(
         (item) => !dataSourceUrl?.includes(item)
       );
@@ -283,11 +314,18 @@
       const customIconUrls = ref<any>([]);
       oldDataSource?.forEach((item: any) => {
         item.dataSource?.forEach((dataSource) => {
-          if (dataSource.componentInfo?.customIcon) {
-            dataSource.componentInfo?.customIcon?.forEach((icon: FileItem) => {
+          if (dataSource.componentInfo?.customIcon || componentKey !== 'ComponentStructural') {
+            dataSource?.componentInfo?.customIcon?.forEach((icon: FileItem) => {
               customIconUrls.value.push(icon.url);
             });
           }
+          if (componentKey === 'ComponentStructural') {
+            for (const structural in dataSource?.componentInfo) {
+              if (structural?.includes('StructuralCustomIcon')) {
+                customIconUrls.value.push(dataSource?.componentInfo[structural]?.[0].url);
+              }
+            }
+          }
         });
       });
       // const dataSourceDeleteUrl = record.dataSource?.map((item) => item.componentInfo.deleteUrl);

+import cloneDeep from 'lodash-es/cloneDeep';
+import { ComponentStructuralConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+
+export const option: PublicPresetOptions = {
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+  [ComponentConfigFieldEnum.ICON]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = ComponentStructuralConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(ComponentStructuralConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  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,
+      appendSchemaByField,
+      removeSchemaByFiled,
+      validate,
+    },
+  ] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        valueField: 'value',
+        defaultValue: option.fontColor,
+      },
+      // {
+      //   field: ComponentConfigFieldEnum.UNIT,
+      //   label: '数值单位',
+      //   component: 'Input',
+      //   defaultValue: option.unit,
+      //   componentProps: {
+      //     placeholder: '请输入数值单位',
+      //   },
+      // },
+
+      {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 20,
+        componentProps: {
+          min: 0,
+          max: 100,
+          formatter: (e) => {
+            const value = e?.toString().replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          max: 100,
+          formatter: (e) => {
+            const value = e?.toString().replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+      {
+        field: ComponentConfigFieldEnum.DEFAULT_CUSTOM,
+        label: '图标类型',
+        component: 'RadioGroup',
+        defaultValue: 'default',
+        componentProps: ({ formModel }) => {
+          return {
+            options: [
+              { label: '系统默认', value: 'default' },
+              { label: '自定义', value: 'custom' },
+            ],
+            onChange() {
+              for (const item in formModel) {
+                if (item.includes('CustomIcon')) {
+                  formModel[item] = [];
+                }
+              }
+              formModel[ComponentConfigFieldEnum.CUSTOM_ICON] = [];
+            },
+          };
+        },
+      },
+      {
+        field: 'structuralDeleteUrl',
+        label: '删除图标存储地址',
+        component: 'Input',
+        defaultValue: '123',
+        show: false,
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+    appendSchemaByField,
+    removeSchemaByFiled,
+    validate,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>
+
+<style lang="less" scoped>
+  :deep(.ant-form-item-label) {
+    label {
+      span {
+        max-width: 120px !important;
+        text-overflow: ellipsis !important;
+        overflow: hidden;
+        vertical-align: middle;
+      }
+    }
+
+    :deep(.ant-form-item-label) {
+      span {
+        max-width: 120px !important;
+        text-overflow: ellipsis !important;
+        overflow: hidden;
+        vertical-align: middle;
+      }
+    }
+  }
+</style>

+<script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  // const props = defineProps<{
+  //   values: PublicComponentDataSourceProps;
+  // }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields, appendSchemaByField }] =
+    useForm({
+      labelWidth: 0,
+      showActionButtonGroup: false,
+      layout: 'horizontal',
+      labelCol: { span: 0 },
+      schemas: commonDataSourceSchemas(),
+    });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+    appendSchemaByField,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('ComponentStructural');
+export const ComponentStructuralConfig: ConfigType = {
+  ...componentKeys,
+  title: '结构体组件',
+  package: PackagesCategoryEnum.TEXT,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { ref, unref } from 'vue';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { SvgIcon } from '/@/components/Icon';
+  import { computed } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useThingsModelValueTransform } from '/@/views/visual/palette/hooks/useThingsModelValueTransform';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
+  import { isObject } from '/@/utils/is';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const currentValue = ref<string | number>(123);
+
+  const structuralData = ref<
+    {
+      label: string;
+      value: string | number;
+      icon: any;
+      iconColor: string;
+    }[]
+  >([{ label: '温度', value: 20, icon: 'shuiwen', iconColor: '#367bff' }]);
+
+  const time = ref<Nullable<number>>(null);
+
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
+  const getThingModelTsl = computed(() => {
+    const { option } = props.config;
+
+    const { deviceProfileId, attribute } = option;
+    return getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
+  });
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+    const {
+      iconColor: persetIconColor,
+      unit: perseUnit,
+      icon: persetIcon,
+      fontColor: persetFontColor,
+      valueSize: persetValueSize,
+      fontSize: persetFontSize,
+      showTime: persetShowTime,
+    } = persetOption;
+
+    const { componentInfo, attributeRename, structural, structuralLabel } = option;
+    const { functionName } = unref(getThingModelTsl) || {};
+
+    const {
+      icon,
+      iconColor,
+      fontColor,
+      showTime,
+      unit,
+      valueSize,
+      fontSize,
+      customIcon,
+      defaultCustom,
+    } = componentInfo || {};
+    return {
+      iconColor: iconColor || persetIconColor,
+      unit: unit ?? perseUnit,
+      icon: icon || persetIcon,
+      fontColor: fontColor || persetFontColor,
+      attribute: attributeRename || functionName,
+      valueSize: valueSize || persetValueSize || 20,
+      fontSize: fontSize || persetFontSize || 14,
+      showTime: showTime || persetShowTime,
+      defaultCustom: defaultCustom || 'default',
+      customIcon: customIcon || [],
+      structural: structural || [],
+      structuralLabel: structuralLabel || [],
+      componentInfo,
+    };
+  });
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    if (!latest.length) return;
+    const [timespan, value] = latest;
+
+    const { structuralLabel, structural, componentInfo } = unref(getDesign) || {};
+    const { defaultCustom } = componentInfo || {};
+
+    time.value = timespan;
+    if (structural?.length && structuralLabel?.length) {
+      const values = JSON.parse(value);
+      const newValues = isObject(values)
+        ? defaultCustom === 'custom'
+          ? structural.map((item, index) => {
+              const option = {
+                label: structuralLabel[index],
+                value: values[item],
+                icon: componentInfo[item + 'StructuralCustomIcon'],
+                // iconColor: componentInfo[item + 'CustomIconColor'],
+              };
+              return option;
+            })
+          : structural.map((item, index) => {
+              const option = {
+                label: structuralLabel[index],
+                value: values[item],
+                icon: componentInfo[item + 'StructuralIcon'],
+                iconColor: componentInfo[item + 'StructuralIconColor'],
+              };
+              return option;
+            })
+        : [];
+      structuralData.value = newValues;
+      return;
+    }
+
+    currentValue.value = useThingsModelValueTransform(
+      value,
+      unref(getThingModelTsl)?.specs?.dataType
+    );
+  };
+
+  useDataFetch(props, updateFn);
+
+  const { getScale, getRatio } = useComponentScale(props);
+</script>
+
+<template>
+  <main
+    :style="getScale"
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
+    <DeviceName :config="config" />
+    <!-- <div class="flex-1 flex justify-center items-center flex-col w-full">
+      <SvgIcon
+        v-if="getDesign.defaultCustom !== 'custom'"
+        :name="getDesign.icon!"
+        prefix="iconfont"
+        :size="getRatio ? getRatio * 70 : 70"
+        :style="{ color: getDesign.iconColor }"
+      />
+      <img
+        v-else
+        :src="getDesign.customIcon[0]?.url"
+        :style="{ width: getRatio ? getRatio * 70 + 'px' : '70px' }"
+        :alt="getDesign.customIcon[0]?.name"
+      />
+      <h1
+        class="font-bold m-2 truncate w-full text-center"
+        :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: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+        }"
+        >{{ getDesign.attribute || '温度' }}</div
+      >
+    </div> -->
+    <div class="flex flex-1 justify-center items-center w-full flex-wrap">
+      <div
+        v-for="item in structuralData"
+        :key="item.label"
+        class="flex-1 flex justify-center items-center flex-col w-full"
+      >
+        <SvgIcon
+          v-if="getDesign.defaultCustom !== 'custom'"
+          :name="item.icon || 'shuiwen'"
+          prefix="iconfont"
+          :size="getRatio ? (getRatio * 70) / structuralData?.length || 1 : 70"
+          :style="{ color: item.iconColor || '#367bff' }"
+        />
+        <img
+          v-else
+          :src="item.icon?.[0]?.url!"
+          :style="{
+            width: getRatio ? (getRatio * 70) / structuralData?.length + 'px' : '70px',
+            height: getRatio ? (getRatio * 70) / structuralData?.length + 'px' : '70px',
+          }"
+          :alt="item.icon?.[0]?.name!"
+        />
+        <h1
+          class="font-bold m-2 truncate w-full text-center"
+          :style="{
+            color: getDesign.fontColor,
+            fontSize:
+              (getRatio
+                ? (getRatio * getDesign.valueSize) / structuralData?.length || 1
+                : getDesign.valueSize) + 'px',
+          }"
+        >
+          <span> {{ item.value || 0 }}</span>
+          <span>{{ getDesign.unit }} </span>
+        </h1>
+        <div
+          class="text-gray-500 truncate text-center"
+          :style="{
+            fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
+            width: getRatio ? getRatio * 90 + 'px' : '90px',
+          }"
+          >{{ getDesign.attribute + '-' + item.label || '温度' }}</div
+        >
+      </div>
+    </div>
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
+  </main>
+</template>

@@ -2,6 +2,7 @@ import { TextComponent1Config } from './TextComponent1';
 import { TextComponent2Config } from './TextComponent2';
 import { TextComponent3Config } from './TextComponent3';
 import { TextComponent4Config } from './TextComponent4';
+import { ComponentStructuralConfig } from './ComponentStructural';
 import { ValueList1Config } from './ValueList1';
 import { ValueList2Config } from './ValueList2';
 
@@ -9,6 +10,7 @@ export const TextList = [
   TextComponent1Config,
   TextComponent2Config,
   TextComponent3Config,
+  ComponentStructuralConfig,
   TextComponent4Config,
   ValueList1Config,
   ValueList2Config,

@@ -43,6 +43,7 @@ export enum DataSourceField {
   ATTRIBUTE_RENAME = 'attributeRename',
   DEVICE_NAME = 'deviceName',
   DEVICE_RENAME = 'deviceRename',
+  STRUCTURAL_MORPHOLOGY = 'structural morphology',
 
   // COMMAND = 'command',
 
@@ -290,8 +291,9 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       colProps: { span: 8 },
       rules: [{ required: true, message: '请选择属性' }],
       ifShow: () => category !== CategoryEnum.MAP,
-      componentProps({ formModel }) {
+      componentProps({ formModel, formActionType }) {
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+        const { setFieldsValue } = formActionType;
         return {
           api: async () => {
             try {
@@ -334,12 +336,166 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
             } catch (error) {}
             return [];
           },
+
+          apiTreeSelectProps: {
+            params: { deviceProfileId },
+          },
           placeholder: '请选择属性',
+          onChange: (value: string, option: Record<'label' | 'value' | any, string>) => {
+            const { detail }: any = option || {};
+            if (value && detail?.dataType.type === 'STRUCT') {
+            }
+            setFieldsValue({
+              structuralOption:
+                value && detail?.dataType.type === 'STRUCT'
+                  ? JSON.stringify(detail?.dataType.specs)
+                  : null,
+            });
+          },
           ...createPickerSearch(),
         };
       },
     },
     {
+      field: 'structuralOption',
+      label: '存储结构体的数据进行选择操作',
+      component: 'Input',
+      ifShow: false,
+    },
+    {
+      field: 'structural',
+      label: '选择结构体',
+      colProps: { span: 8 },
+      ifShow: ({ model }) =>
+        model.structuralOption && unref(selectWidgetKeys).componentKey === 'ComponentStructural',
+      component: 'Select',
+      componentProps: ({ formModel, formActionType }) => {
+        const { setFieldsValue } = formActionType;
+        const { structuralOption } = formModel || {};
+        return {
+          mode: 'multiple',
+          getPopupContainer: () => document.body,
+          placeholder: '请选择结构体参数',
+          options: structuralOption
+            ? JSON.parse(structuralOption)?.map((item) => ({
+                label: item.functionName,
+                value: item.identifier,
+              }))
+            : [],
+          onChange(value, option) {
+            if (value?.length && option?.length) {
+              const array = new Map(option.map((item) => [item.value, item.label]));
+              const filteredLabels = value.map((value) => array.get(value) || '');
+              setFieldsValue({
+                structuralLabel: filteredLabels?.length ? filteredLabels : [],
+              });
+            }
+          },
+        };
+      },
+    },
+    {
+      field: 'structuralLabel',
+      label: '结构体名称',
+      colProps: { span: 8 },
+      ifShow: false,
+      component: 'Select',
+      componentProps: {
+        mode: 'multiple',
+        getPopupContainer: () => document.body,
+      },
+    },
+
+    // {
+    //   field: DataSourceField.ATTRIBUTE,
+    //   label: '属性',
+    //   component: 'ApiCascader',
+    //   colProps: { span: 8 },
+    //   ifShow: () => false,
+    //   changeEvent: 'update:value',
+    //   valueField: 'value',
+    //   componentProps: ({ formModel }) => {
+    //     const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+    //     return {
+    //       api: async () => {
+    //         try {
+    //           // if (deviceProfileId) {
+    //           //   const options = await getDeviceAttributes({
+    //           //     deviceProfileId,
+    //           //   });
+
+    //           //   const _options = options.map((item) => {
+    //           //     item = Object.assign(item, { functionName: item.name });
+    //           //     if (item.detail.dataType.type === DataTypeEnum.STRUCT) {
+    //           //       return Object.assign(item, { specs: item.detail.dataType.specs });
+    //           //     }
+    //           //     return item;
+    //           //   });
+    //           //   return _options;
+    //           // }
+    //           if (deviceProfileId) {
+    //             let option = await getDeviceAttribute({
+    //               deviceProfileId,
+    //               dataType:
+    //                 (isControlComponent(category!) &&
+    //                   unref(selectWidgetKeys).componentKey !==
+    //                     ControlComponentEnum.LATERAL_NUMERICAL_CONTROL) ||
+    //                 isBooleanComponent(unref(selectWidgetKeys))
+    //                   ? DataTypeEnum.BOOL
+    //                   : undefined,
+    //             });
+    //             if (isControlComponent(category)) {
+    //               // 过滤只读属性
+    //               option = option.filter(
+    //                 (item) => item.accessMode !== ObjectModelAccessModeEnum.READ
+    //               );
+    //             }
+    //             // 选择控制组件4的时候只能选择属性且是（int double类型）
+    //             if (
+    //               unref(selectWidgetKeys).componentKey ===
+    //               ControlComponentEnum.LATERAL_NUMERICAL_CONTROL
+    //             ) {
+    //               // setFieldsValue({
+    //               //   [DataSourceField.COMMAND_TYPE]: CommandTypeEnum.ATTRIBUTE.toString(),
+    //               // });
+    //               return option.filter(
+    //                 (item) =>
+    //                   item.detail.dataType.type === DataTypeEnum.NUMBER_INT ||
+    //                   item.detail.dataType.type == DataTypeEnum.NUMBER_DOUBLE
+    //               );
+    //             }
+    //             const _options = option.map((item) => {
+    //               item = Object.assign(item, { functionName: item.name });
+    //               if (item.detail.dataType.type === DataTypeEnum.STRUCT) {
+    //                 return Object.assign(item, { specs: item.detail.dataType.specs });
+    //               }
+    //               return item;
+    //             });
+    //             return _options;
+    //           }
+    //         } catch (error) {}
+    //         return [];
+    //       },
+    //       placeholder: '请选择属性',
+    //       showSearch: {
+    //         filter: (inputValue: string, path) => {
+    //           return path.some(
+    //             (option) => option.functionName.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
+    //           );
+    //         },
+    //         matchInputWidth: true,
+    //       },
+    //       changeOnSelect: true,
+    //       dropdownMatchSelectWidth: true,
+    //       // getPopupContainer: () => document.body,
+
+    //       getPopupContainer: (triggerNode) => triggerNode.parentNode,
+
+    //       fieldNames: { label: 'functionName', value: 'identifier', children: 'specs' },
+    //     };
+    //   },
+    // },
+    {
       field: DataSourceField.LONGITUDE_IDENTIFIER,
       label: '经度',
       component: 'ApiCascader',