fix: 看板组件图标能使用自定义图标

@@ -71,9 +71,12 @@
         return false;
       }
     }
-
     if (file.size > props.maxSize) {
-      createMessage.warning(`文件大小超过${Math.floor(props.maxSize / 1024 / 1024)}mb`);
+      createMessage.warning(
+        `文件大小超过${Math.floor(
+          props.maxSize > 1024 * 1024 ? props.maxSize / 1024 / 1024 : props.maxSize / 1024
+        )}${props.maxSize > 1024 * 1024 * 1 ? 'mb' : 'kb'}`
+      );
       return false;
     }
     handleUpload(file);

@@ -30,7 +30,7 @@
               auth: 'api:yt:sceneLinkage:update',
               icon: 'clarity:note-edit-line',
               onClick: handleEdit.bind(null, record),
-              ifShow: record.status !== 1 && record.isEdge !== 1,
+              ifShow: record.status !== 1,
             },
           ]"
           :drop-down-actions="[
@@ -39,7 +39,7 @@
               auth: 'api:yt:sceneLinkage:delete',
               icon: 'ant-design:delete-outlined',
               color: 'error',
-              ifShow: record.status !== 1 && record.isEdge !== 1,
+              ifShow: record.status !== 1,
               popConfirm: {
                 title: '是否确认删除',
                 confirm: handleDeleteOrBatchDelete.bind(null, record),
@@ -56,7 +56,6 @@
             :loading="record.pendingStatus"
             checkedChildren="启用"
             unCheckedChildren="禁用"
-            :disabled="record.isEdge === 1"
             @change="(checked:boolean)=>statusChange(checked,record)"
           />
         </Authority>

@@ -56,7 +56,7 @@
 </script>
 
 <template>
-  <BasicModal @register="register" title="组件设置" @ok="handleOk">
+  <BasicModal @register="register" title="组件设置" @ok="handleOk" :width="700">
     <!--  -->
     <component ref="settingFormEl" :is="getSettingComponent" />
   </BasicModal>

@@ -29,6 +29,8 @@
   import { MessageAlert } from './components/MessageAlert';
   import { createSelectWidgetKeysContext, createSelectWidgetModeContext } from './useContext';
   import { useGetCategoryByComponentKey } from '../packages/hook/useGetCategoryByComponentKey';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 
   const props = defineProps<{
     layout: Layout[];
@@ -227,6 +229,20 @@
     return `${category} / ${componentConfig.title}`;
   });
 
+  const countElementOccurrences = (arr) => {
+    const countMap = {};
+
+    arr.forEach((element) => {
+      if (countMap[element]) {
+        countMap[element]++;
+      } else {
+        countMap[element] = 1;
+      }
+    });
+
+    return countMap;
+  };
+
   const handleSubmit = async () => {
     const validateResult = await validate();
     if (validateResult && !validateResult.flag) {
@@ -241,6 +257,59 @@
       }
     }
     const value = getFormValues();
+    const { record } = value || {};
+    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
+      const dataSourceUrl = record.dataSource?.map(
+        (item) => item.componentInfo.customIcon?.[0].url
+      );
+
+      // 当前自定义组件取出要进行删除的图标url
+      const dataSourceDeleteUrl = unref(currentRecordIconUrl).filter(
+        (item) => !dataSourceUrl?.includes(item)
+      );
+
+      //查询外部所有组件的自定义图标的url
+      const oldDataSource = props.layout;
+      const customIconUrls = ref<any>([]);
+      oldDataSource?.forEach((item: any) => {
+        item.dataSource?.forEach((dataSource) => {
+          if (dataSource.componentInfo?.customIcon) {
+            dataSource.componentInfo?.customIcon.forEach((icon: FileItem) => {
+              customIconUrls.value.push(icon.url);
+            });
+          }
+        });
+      });
+      // const dataSourceDeleteUrl = record.dataSource?.map((item) => item.componentInfo.deleteUrl);
+
+      if (unref(customIconUrls) && unref(customIconUrls).length && dataSourceDeleteUrl?.length) {
+        // 判断外部所有组件是否有dataSourceDeleteUrl使用中的url
+        const deletePromise = unref(customIconUrls)?.filter((item) =>
+          dataSourceDeleteUrl?.includes(item)
+        );
+        const deleteUrlInfo = countElementOccurrences(deletePromise);
+        const deleteUrl = deletePromise?.filter((item) => deleteUrlInfo?.[item] == 1);
+        Promise.all(
+          deleteUrl.map((item) => {
+            deleteFilePath(item);
+          })
+        );
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(err);
+    }
+
     try {
       loading.value = true;
       unref(currentMode) === DataActionModeEnum.UPDATE

@@ -3,15 +3,68 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { createImgPreview } from '/@/components/Preview';
+  import { upload } from '/@/api/oss/ossFileUploader';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
       {
+        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.PASS_WORD,
+        label: '操作密码',
+        component: 'InputPassword',
+        defaultValue: '',
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        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() {
+              formModel[ComponentConfigFieldEnum.CUSTOM_ICON] = [];
+            },
+          };
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.ICON_COLOR,
         label: '图标颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         defaultValue: option.iconColor,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
       },
       {
         field: ComponentConfigFieldEnum.ICON,
@@ -19,6 +72,9 @@
         component: 'IconDrawer',
         changeEvent: 'update:value',
         defaultValue: option.icon,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
         componentProps({ formModel }) {
           const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
           return {
@@ -27,34 +83,51 @@
         },
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
-      },
-      {
-        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.CUSTOM_ICON,
+        label: '图标',
+        component: 'ApiUpload',
+        ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] === 'custom',
+        changeEvent: 'update:fileList',
+        valueField: 'fileList',
+        helpMessage: ['支持.svg格式，建议尺寸为32*32px，大小不超过50kb '],
+        componentProps: ({ formModel }) => {
+          return {
+            listType: 'picture-card',
+            maxFileLimit: 1,
+            maxSize: 50 * 1024,
+            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 {};
+              }
+            },
+            // showUploadList: true,
+            onDownload() {},
+            onPreview: (fileList: FileItem) => {
+              createImgPreview({ imageList: [fileList.url!] });
+            },
+
+            onDelete(url: string) {
+              formModel.deleteUrl = url!;
+            },
+          };
         },
       },
       {
-        field: ComponentConfigFieldEnum.PASS_WORD,
-        label: '操作密码',
-        component: 'InputPassword',
-        defaultValue: '',
+        field: 'deleteUrl',
+        label: '',
+        component: 'Input',
+        show: false,
       },
     ],
     showActionButtonGroup: false,

@@ -31,7 +31,7 @@
       fontSize: persetFontSize,
       password: persetPassword,
     } = persetOption || {};
-    const { icon, iconColor, fontSize, password } = componentInfo || {};
+    const { icon, iconColor, fontSize, password, customIcon, defaultCustom } = componentInfo || {};
 
     const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
     return {
@@ -41,6 +41,8 @@
       fontSize: fontSize || persetFontSize || 14,
       password: password || persetPassword,
       commandType,
+      defaultCustom: defaultCustom || 'default',
+      customIcon: customIcon || [],
     };
   });
 
@@ -81,10 +83,17 @@
     <main class="w-full h-full flex justify-around items-center" :style="getScale">
       <div class="flex flex-col justify-center items-center">
         <SvgIcon
-          :name="getDesign.icon"
+          v-if="getDesign.defaultCustom !== 'custom'"
+          :name="getDesign.icon!"
           prefix="iconfont"
-          :style="{ color: getDesign.iconColor }"
           :size="getRatio ? getRatio * 60 : 60"
+          :style="{ color: getDesign.iconColor }"
+        />
+        <img
+          v-else
+          :src="getDesign.customIcon[0]?.url"
+          :style="{ width: getRatio ? getRatio * 60 + 'px' : '60px' }"
+          :alt="getDesign.customIcon[0]?.name"
         />
         <span
           class="mt-3 truncate text-gray-500 text-center"

@@ -3,30 +3,13 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { createImgPreview } from '/@/components/Preview';
+  import { upload } from '/@/api/oss/ossFileUploader';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
       {
-        field: ComponentConfigFieldEnum.ICON_COLOR,
-        label: '图标颜色',
-        component: 'ColorPicker',
-        changeEvent: 'update:value',
-        defaultValue: option.iconColor,
-      },
-      {
-        field: ComponentConfigFieldEnum.ICON,
-        label: '图标',
-        component: 'IconDrawer',
-        changeEvent: 'update:value',
-        defaultValue: option.icon,
-        componentProps({ formModel }) {
-          const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
-          return {
-            color,
-          };
-        },
-      },
-      {
         field: ComponentConfigFieldEnum.FONT_SIZE,
         label: '文本字体大小',
         component: 'InputNumber',
@@ -45,16 +28,106 @@
         },
       },
       {
+        field: ComponentConfigFieldEnum.PASS_WORD,
+        label: '操作密码',
+        component: 'InputPassword',
+        defaultValue: '',
+      },
+      {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
       {
-        field: ComponentConfigFieldEnum.PASS_WORD,
-        label: '操作密码',
-        component: 'InputPassword',
-        defaultValue: '',
+        field: ComponentConfigFieldEnum.DEFAULT_CUSTOM,
+        label: '图标类型',
+        component: 'RadioGroup',
+        defaultValue: 'default',
+        componentProps: ({ formModel }) => {
+          return {
+            options: [
+              { label: '系统默认', value: 'default' },
+              { label: '自定义', value: 'custom' },
+            ],
+            onChange() {
+              formModel[ComponentConfigFieldEnum.CUSTOM_ICON] = [];
+            },
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.ICON_COLOR,
+        label: '图标颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.iconColor,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.ICON,
+        label: '图标',
+        component: 'IconDrawer',
+        changeEvent: 'update:value',
+        defaultValue: option.icon,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
+        componentProps({ formModel }) {
+          const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
+          return {
+            color,
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.CUSTOM_ICON,
+        label: '图标',
+        component: 'ApiUpload',
+        ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] === 'custom',
+        changeEvent: 'update:fileList',
+        valueField: 'fileList',
+        helpMessage: ['支持.svg格式，建议尺寸为32*32px，大小不超过50kb '],
+        componentProps: ({ formModel }) => {
+          return {
+            listType: 'picture-card',
+            maxSize: 50 * 1024,
+            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 {};
+              }
+            },
+            // showUploadList: true,
+            onDownload() {},
+            onPreview: (fileList: FileItem) => {
+              createImgPreview({ imageList: [fileList.url!] });
+            },
+
+            onDelete(url: string) {
+              formModel.deleteUrl = url!;
+            },
+          };
+        },
+      },
+      {
+        field: 'deleteUrl',
+        label: '',
+        component: 'Input',
+        show: false,
       },
     ],
     showActionButtonGroup: false,

@@ -38,8 +38,17 @@
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
-        const { fontColor, icon, iconColor, unit, showDeviceName, password, fontSize } =
-          item.componentInfo;
+        const {
+          fontColor,
+          icon,
+          iconColor,
+          unit,
+          showDeviceName,
+          password,
+          fontSize,
+          customIcon,
+          defaultCustom,
+        } = item.componentInfo;
         const {
           attribute,
           attributeRename,
@@ -76,6 +85,8 @@
           closeCommand,
           openService,
           closeService,
+          defaultCustom: defaultCustom || 'default',
+          customIcon: customIcon || [],
         } as SwitchItemType;
       }),
     };
@@ -128,11 +139,24 @@
       :key="item.id"
       class="flex justify-between items-center w-full px-4"
     >
-      <SvgIcon
+      <!-- <SvgIcon
         :name="item.icon!"
         prefix="iconfont"
         :size="getRatio ? 30 * getRatio : 30"
         :style="{ color: item.iconColor }"
+      /> -->
+      <SvgIcon
+        v-if="item.defaultCustom !== 'custom'"
+        :name="item.icon!"
+        prefix="iconfont"
+        :size="getRatio ? getRatio * 30 : 30"
+        :style="{ color: item.iconColor }"
+      />
+      <img
+        v-else
+        :src="item.customIcon[0]?.url"
+        :style="{ width: getRatio ? getRatio * 30 + 'px' : '30px' }"
+        :alt="item.customIcon[0]?.name"
       />
       <div
         class="text-gray-500 truncate mx-2"

@@ -3,15 +3,68 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { createImgPreview } from '/@/components/Preview';
+  import { upload } from '/@/api/oss/ossFileUploader';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
       {
+        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.showTime,
+      },
+      {
+        field: ComponentConfigFieldEnum.DEFAULT_CUSTOM,
+        label: '图标类型',
+        component: 'RadioGroup',
+        defaultValue: 'default',
+        componentProps: ({ formModel }) => {
+          return {
+            options: [
+              { label: '系统默认', value: 'default' },
+              { label: '自定义', value: 'custom' },
+            ],
+            onChange() {
+              formModel[ComponentConfigFieldEnum.CUSTOM_ICON] = [];
+            },
+          };
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.ICON,
         label: '开启状态图标',
         component: 'IconDrawer',
         changeEvent: 'update:value',
         defaultValue: option.icon,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
         componentProps({ formModel }) {
           const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
           return {
@@ -24,6 +77,9 @@
         label: '开启图标颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
         defaultValue: option.iconColor,
       },
       {
@@ -32,6 +88,9 @@
         component: 'IconDrawer',
         changeEvent: 'update:value',
         defaultValue: option.iconClose,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
         componentProps({ formModel }) {
           const color = formModel[ComponentConfigFieldEnum.ICON_COLOR_CLOSE];
           return {
@@ -44,37 +103,84 @@
         label: '关闭图标颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
         defaultValue: option.iconColorClose,
       },
       {
-        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.CUSTOM_ICON,
+        label: '开启状态图标',
+        component: 'ApiUpload',
+        ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] === 'custom',
+        changeEvent: 'update:fileList',
+        valueField: 'fileList',
+        helpMessage: ['支持.svg格式，建议尺寸为32*32px，大小不超过50kb '],
+        componentProps: ({}) => {
+          return {
+            listType: 'picture-card',
+            maxSize: 50 * 1024,
+            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 {};
+              }
+            },
+            // showUploadList: true,
+            onDownload() {},
+            onPreview: (fileList: FileItem) => {
+              createImgPreview({ imageList: [fileList.url!] });
+            },
+          };
         },
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
-      },
-      {
-        field: ComponentConfigFieldEnum.SHOW_TIME,
-        label: '显示时间',
-        component: 'Checkbox',
-        defaultValue: option.showTime,
+        field: ComponentConfigFieldEnum.CUSTOM_ICON_CLOSE,
+        label: '关闭状态图标',
+        component: 'ApiUpload',
+        helpMessage: ['支持.svg格式，建议尺寸为32*32px，大小不超过50kb '],
+        ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] === 'custom',
+        changeEvent: 'update:fileList',
+        valueField: 'fileList',
+        componentProps: ({}) => {
+          return {
+            listType: 'picture-card',
+            maxSize: 0 * 1024,
+            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 {};
+              }
+            },
+            // showUploadList: true,
+            onDownload() {},
+            onPreview: (fileList: FileItem) => {
+              createImgPreview({ imageList: [fileList.url!] });
+            },
+          };
+        },
       },
     ],
     showActionButtonGroup: false,

@@ -32,8 +32,19 @@
 
     const { componentInfo, attributeName, attributeRename } = option;
 
-    const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, showTime, fontSize } =
-      componentInfo || {};
+    const {
+      icon,
+      iconColor,
+      fontColor,
+      unit,
+      iconClose,
+      iconColorClose,
+      showTime,
+      fontSize,
+      customIcon,
+      customIconClose,
+      defaultCustom,
+    } = componentInfo || {};
     return {
       iconColor: iconColor || persetIconColor,
       unit: unit ?? perseUnit,
@@ -44,6 +55,9 @@
       iconColorClose: iconColorClose || persetIconColorClose,
       showTime: showTime ?? persetShowTime,
       fontSize: fontSize || persetFontSize || 14,
+      defaultCustom: defaultCustom || 'default',
+      customIcon: customIcon || [],
+      customIconClose: customIconClose || [],
     };
   });
 
@@ -68,10 +82,17 @@
     <DeviceName :config="config" />
     <div class="flex flex-1 flex-col justify-center items-center">
       <SvgIcon
+        v-if="getDesign.defaultCustom !== 'custom'"
         :name="isOpenClose ? getDesign.icon : getDesign.iconClose"
         prefix="iconfont"
         :size="getRatio ? getRatio * 70 : 70"
-        :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }"
+        :style="{ color: getDesign.iconColor }"
+      />
+      <img
+        v-else
+        :src="isOpenClose ? getDesign.customIcon[0]?.url : getDesign.customIconClose[0]?.url"
+        :style="{ width: getRatio ? getRatio * 70 + 'px' : '70px' }"
+        :alt="getDesign.customIcon[0]?.name"
       />
       <div
         class="text-gray-500 truncate m-2"

@@ -3,6 +3,9 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { createImgPreview } from '/@/components/Preview';
+  import { upload } from '/@/api/oss/ossFileUploader';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
@@ -61,11 +64,37 @@
         },
       },
       {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        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() {
+              formModel[ComponentConfigFieldEnum.CUSTOM_ICON] = [];
+            },
+          };
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.ICON_COLOR,
         label: '图标颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         defaultValue: option.iconColor,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
       },
       {
         field: ComponentConfigFieldEnum.ICON,
@@ -73,6 +102,9 @@
         component: 'IconDrawer',
         changeEvent: 'update:value',
         defaultValue: option.icon,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
         componentProps({ formModel }) {
           const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
           return {
@@ -81,10 +113,50 @@
         },
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
+        field: ComponentConfigFieldEnum.CUSTOM_ICON,
+        label: '图标',
+        component: 'ApiUpload',
+        ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] === 'custom',
+        changeEvent: 'update:fileList',
+        valueField: 'fileList',
+        helpMessage: ['支持.svg格式，建议尺寸为32*32px，大小不超过50kb '],
+        componentProps: ({ formModel }) => {
+          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 {};
+              }
+            },
+            // showUploadList: true,
+            onDownload() {},
+            onPreview: (fileList: FileItem) => {
+              createImgPreview({ imageList: [fileList.url!] });
+            },
+            onDelete(url: string) {
+              formModel.deleteUrl = url!;
+            },
+          };
+        },
+      },
+      {
+        field: 'deleteUrl',
+        label: '',
+        component: 'Input',
+        show: false,
       },
     ],
     showActionButtonGroup: false,

@@ -31,7 +31,6 @@
 
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
-
     const {
       iconColor: persetIconColor,
       unit: perseUnit,
@@ -44,7 +43,8 @@
     const { componentInfo, attributeRename } = option;
     const { functionName } = unref(getThingModelTsl) || {};
 
-    const { icon, iconColor, fontColor, unit, valueSize, fontSize } = componentInfo || {};
+    const { icon, iconColor, fontColor, unit, valueSize, fontSize, customIcon, defaultCustom } =
+      componentInfo || {};
     return {
       iconColor: iconColor || persetIconColor,
       unit: unit ?? perseUnit,
@@ -53,6 +53,8 @@
       attribute: attributeRename || functionName,
       valueSize: valueSize || persetValueSize || 20,
       fontSize: fontSize || persetFontSize || 14,
+      defaultCustom: defaultCustom || 'default',
+      customIcon: customIcon || [],
     };
   });
 
@@ -78,11 +80,18 @@
     <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="{

@@ -3,6 +3,9 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { createImgPreview } from '/@/components/Preview';
+  import { upload } from '/@/api/oss/ossFileUploader';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
@@ -60,11 +63,37 @@
         },
       },
       {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        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() {
+              formModel[ComponentConfigFieldEnum.CUSTOM_ICON] = [];
+            },
+          };
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.ICON_COLOR,
         label: '图标颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         defaultValue: option.iconColor,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
       },
       {
         field: ComponentConfigFieldEnum.ICON,
@@ -72,6 +101,9 @@
         component: 'IconDrawer',
         changeEvent: 'update:value',
         defaultValue: option.icon,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
         componentProps({ formModel }) {
           const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
           return {
@@ -80,10 +112,50 @@
         },
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
+        field: ComponentConfigFieldEnum.CUSTOM_ICON,
+        label: '图标',
+        component: 'ApiUpload',
+        ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] === 'custom',
+        changeEvent: 'update:fileList',
+        valueField: 'fileList',
+        helpMessage: ['支持.svg格式，建议尺寸为32*32px，大小不超过50kb '],
+        componentProps: ({ formModel }) => {
+          return {
+            listType: 'picture-card',
+            maxSize: 50 * 1024,
+            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 {};
+              }
+            },
+            // showUploadList: true,
+            onDownload() {},
+            onPreview: (fileList: FileItem) => {
+              createImgPreview({ imageList: [fileList.url!] });
+            },
+            onDelete(url: string) {
+              formModel.deleteUrl = url!;
+            },
+          };
+        },
+      },
+      {
+        field: 'deleteUrl',
+        label: '',
+        component: 'Input',
+        show: false,
       },
     ],
     showActionButtonGroup: false,

@@ -40,7 +40,8 @@
 
     const { componentInfo, attribute, attributeRename } = option;
 
-    const { icon, iconColor, fontColor, unit, valueSize, fontSize } = componentInfo || {};
+    const { icon, iconColor, fontColor, unit, valueSize, fontSize, customIcon, defaultCustom } =
+      componentInfo || {};
     return {
       iconColor: iconColor || persetIconColor,
       unit: unit ?? perseUnit,
@@ -49,6 +50,8 @@
       attribute: attributeRename || unref(getThingModelTsl)?.functionName || attribute,
       valueSize: valueSize || persetValueSize || 20,
       fontSize: fontSize || persetFontSize || 14,
+      defaultCustom: defaultCustom || 'default',
+      customIcon: customIcon || [],
     };
   });
 
@@ -73,11 +76,18 @@
     <DeviceName :config="config" />
     <div :style="getScale" 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="my-4 font-bold !my-2 truncate w-full text-center"
         :style="{

@@ -4,6 +4,10 @@
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
 
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { createImgPreview } from '/@/components/Preview';
+  import { upload } from '/@/api/oss/ossFileUploader';
+
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
       {
@@ -60,11 +64,31 @@
         },
       },
       {
+        field: ComponentConfigFieldEnum.DEFAULT_CUSTOM,
+        label: '图标类型',
+        component: 'RadioGroup',
+        defaultValue: 'default',
+        componentProps: ({ formModel }) => {
+          return {
+            options: [
+              { label: '系统默认', value: 'default' },
+              { label: '自定义', value: 'custom' },
+            ],
+            onChange() {
+              formModel[ComponentConfigFieldEnum.CUSTOM_ICON] = [];
+            },
+          };
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.ICON_COLOR,
         label: '图标颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         defaultValue: option.iconColor,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
       },
       {
         field: ComponentConfigFieldEnum.ICON,
@@ -73,6 +97,9 @@
         changeEvent: 'update:value',
         valueField: 'value',
         defaultValue: option.icon,
+        ifShow: ({ model }) => {
+          return model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] !== 'custom';
+        },
         componentProps({ formModel }) {
           const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
           return {
@@ -80,6 +107,51 @@
           };
         },
       },
+      {
+        field: ComponentConfigFieldEnum.CUSTOM_ICON,
+        label: '图标',
+        component: 'ApiUpload',
+        ifShow: ({ model }) => model[ComponentConfigFieldEnum.DEFAULT_CUSTOM] === 'custom',
+        changeEvent: 'update:fileList',
+        valueField: 'fileList',
+        helpMessage: ['支持.svg格式，建议尺寸为32*32px，大小不超过50kb '],
+        componentProps: ({ formModel }) => {
+          return {
+            listType: 'picture-card',
+            maxSize: 50 * 1024,
+            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) {
+              formModel.deleteUrl = url!;
+            },
+          };
+        },
+      },
+      {
+        field: 'deleteUrl',
+        label: '',
+        component: 'Input',
+        show: false,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -35,7 +35,8 @@
 
     return {
       dataSource: dataSource.map((item) => {
-        const { fontColor, icon, iconColor, unit, valueSize, fontSize } = item.componentInfo;
+        const { fontColor, icon, iconColor, unit, valueSize, fontSize, customIcon, defaultCustom } =
+          item.componentInfo;
         const { attribute, attributeRename, deviceName, deviceRename, deviceId, deviceProfileId } =
           item;
         const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
@@ -50,6 +51,8 @@
           id: deviceId,
           valueSize: valueSize || persetValueSize || 20,
           fontSize: fontSize || persetFontSize || 14,
+          defaultCustom: defaultCustom || 'default',
+          customIcon: customIcon || [],
         };
       }),
     };
@@ -67,6 +70,8 @@
       fontColor: '#357CFB',
       fontSize: 16,
       valueSize: 16,
+      defaultCustom: 'default',
+      customIcon: [],
     },
     {
       id: buildUUID(),
@@ -79,6 +84,8 @@
       fontColor: '#FFA000',
       fontSize: 16,
       valueSize: 16,
+      defaultCustom: 'default',
+      customIcon: [],
     },
   ]);
 
@@ -114,11 +121,24 @@
       class="flex justify-between items-center mt-2"
     >
       <div class="flex items-center">
-        <SvgIcon
+        <!-- <SvgIcon
           :name="item.icon!"
           prefix="iconfont"
           :size="getRatio ? 30 * getRatio : 30"
           :style="{ color: item.iconColor }"
+        /> -->
+        <SvgIcon
+          v-if="item.defaultCustom !== 'custom'"
+          :name="item.icon!"
+          prefix="iconfont"
+          :size="getRatio ? getRatio * 30 : 30"
+          :style="{ color: item.iconColor }"
+        />
+        <img
+          v-else
+          :src="item.customIcon[0]?.url"
+          :style="{ width: getRatio ? getRatio * 30 + 'px' : '30px' }"
+          :alt="item.customIcon[0]?.name"
         />
         <div
           class="text-gray-500 ml-6"

@@ -36,4 +36,8 @@ export enum ComponentConfigFieldEnum {
   MIN_NUMBER = 'minNumber',
   MAX_NUMBER = 'maxNumber',
   PASS_WORD = 'password', //操作密码
+  DEFAULT_CUSTOM = 'defaultCustom',
+  DEFAULT_CUSTOM_CLOSE = 'defaultCustomClose',
+  CUSTOM_ICON = 'customIcon',
+  CUSTOM_ICON_CLOSE = 'customIconClose',
 }

@@ -20,6 +20,8 @@
   import { useGetComponentConfig } from '../../../packages/hook/useGetComponetConfig';
   import { isBoolean } from '/@/utils/is';
   import { useApp } from '../../hooks/useApp';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   const props = defineProps<{
     sourceInfo: WidgetDataType;
@@ -74,8 +76,56 @@
     emit('update', toRaw(props.sourceInfo));
   }
 
+  const countElementOccurrences = (arr) => {
+    const countMap = {};
+
+    arr.forEach((element) => {
+      if (countMap[element]) {
+        countMap[element]++;
+      } else {
+        countMap[element] = 1;
+      }
+    });
+
+    return countMap;
+  };
+
   async function handleDelete() {
     try {
+      const { componentData: oldDataSource } = props.rawDataSource;
+      const customIconUrls = ref<any>([]);
+      oldDataSource?.forEach((item: any) => {
+        item.dataSource?.forEach((dataSource) => {
+          if (dataSource.componentInfo?.customIcon) {
+            dataSource.componentInfo?.customIcon.forEach((icon: FileItem) => {
+              customIconUrls.value.push(icon.url);
+            });
+          }
+        });
+      });
+
+      const { dataSource: deleteDataSource } = props.sourceInfo;
+      const dataSourceDeleteUrl = deleteDataSource.map(
+        (item) => item.componentInfo.customIcon?.[0].url
+      );
+
+      if (dataSourceDeleteUrl?.length) {
+        // 判断外部所有组件是否有dataSourceDeleteUrl使用中的url
+        const deletePromise = unref(customIconUrls)?.filter((item) =>
+          dataSourceDeleteUrl?.includes(item)
+        );
+
+        const deleteUrlInfo = countElementOccurrences(deletePromise);
+        const deleteUrl = deletePromise?.filter((item) => deleteUrlInfo?.[item] == 1);
+        Promise.all(
+          deleteUrl.map((item) => {
+            deleteFilePath(item);
+          })
+        );
+      }
+    } catch (err) {}
+
+    try {
       await deleteDataComponent({ dataBoardId: unref(boardId), ids: [props.sourceInfo.id] });
       createMessage.success('删除成功');
       emit('ok');