Merge branch 'main_dev' into 'main'

Main dev

See merge request yunteng/thingskit-front!1449

+FROM nginx:latest
+
+COPY ./target/dist/ /usr/share/nginx/html/
+COPY default.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE  80
\ No newline at end of file

+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  192.168.1.48;
+    #charset koi8-r;
+    #access_log  /var/log/nginx/host.access.log  main;
+   
+	root    /usr/share/nginx/html; 
+	index  index.html index.htm;
+	try_files $uri $uri/ /index.html;
+    
+
+	
+	location /api/ {
+		proxy_pass http://192.168.1.48:8080;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection "Upgrade";
+		proxy_set_header Host $host;
+		proxy_cache_bypass $http_upgrade;
+	}
+	
+	location /yt/ {
+		proxy_pass http://192.168.1.48:8080;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection "Upgrade";
+		proxy_set_header Host $host;
+		proxy_cache_bypass $http_upgrade;
+	}
+	
+	location /upload/ {
+		proxy_pass http://192.168.1.48:8080;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection "Upgrade";
+		proxy_set_header Host $host;
+		proxy_cache_bypass $http_upgrade;
+	}
+	
+	#error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}
\ No newline at end of file

@@ -5,10 +5,13 @@ import { isString } from '/@/utils/is';
 import { OrderByEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
 
 // 获取设备配置，很多地方使用，不能修改这里
-export const getDeviceProfile = (deviceType?: string) => {
+export const getDeviceProfile = (deviceType?: string, isSceneLinkage?: Boolean) => {
   return defHttp.get<DeviceProfileModel[]>({
     url: '/device_profile/me/list',
-    params: { deviceType: isString(deviceType) ? deviceType : undefined },
+    params: {
+      deviceType: isString(deviceType) ? deviceType : undefined,
+      isSceneLinkage: isSceneLinkage ? isSceneLinkage : undefined,
+    },
   });
 };
 

@@ -9,12 +9,16 @@ enum OrderType {
   ASC = 'ASC',
   DESC = 'DESC',
 }
+enum SortProperty {
+  CREATEtIME = 'createdTime',
+}
 
 export interface BaseQueryParams {
   pageSize: number;
   page: number;
   orderFiled?: string;
   orderType?: OrderType;
+  sortProperty?: SortProperty;
 }
 
 export class BaseQueryRequest implements BaseQueryParams {

@@ -264,13 +264,16 @@ export const getGATEWAYdevice = async (params: {
   );
 };
 
-export const getGatewayDevice = (params: Record<'organizationId' | 'transportType', string>) => {
-  const { organizationId, transportType } = params;
+export const getGatewayDevice = (
+  params: Record<'organizationId' | 'transportType' | 'gatewayId', string>
+) => {
+  const { organizationId, transportType, gatewayId } = params;
   return defHttp.get<DeviceRecord[]>({
     url: DeviceManagerApi.GATEWAY_DEVICE,
     params: {
       organizationId,
       transportType,
+      gatewayId,
     },
   });
 };

@@ -124,6 +124,7 @@ export interface ProfileRecord {
   image: string;
   type: string;
   default: boolean;
+  isEdge?: boolean;
 
   checked?: boolean;
 }

@@ -7,6 +7,7 @@ export enum DeviceState {
   INACTIVE = 'INACTIVE',
   ONLINE = 'ONLINE',
   OFFLINE = 'OFFLINE',
+  ACTIVE = 'ACTIVE',
 }
 export enum DeviceTypeEnum {
   GATEWAY = 'GATEWAY',

@@ -102,3 +102,9 @@ export interface VideoChanneControlType {
   tbDeviceId?: string | number | object;
   channelId?: string | number | object;
 }
+
+export interface EzvizControlType {
+  entityId: string;
+  action: number;
+  controllingType: number;
+}

@@ -3,6 +3,7 @@ import {
   VideoChannelPlayAddressType,
   VideoChannelQueryParamsType,
   VideoChanneControlType,
+  EzvizControlType,
 } from './model/videoChannelModel';
 import { PaginationResult } from '/#/axios';
 import { defHttp } from '/@/utils/http/axios';
@@ -12,6 +13,7 @@ enum Api {
   GET_VIDEO_CONTROL_START = '/video/control/start',
   GET_VIDEO_CONTROL_STOP = '/video/control/stop',
   SET_VIDEO_CONTROL_CONTROL = '/video/control/control',
+  SET_EZVIZ_CONTROL = '/video/ezviz/controlling',
 }
 
 export const getVideoChannelList = (params: VideoChannelQueryParamsType) => {
@@ -43,3 +45,10 @@ export const setVideoControl = (tbDeviceId, channelId, params: VideoChanneContro
     params,
   });
 };
+
+export const setEzvizControl = (params: EzvizControlType) => {
+  return defHttp.get({
+    url: Api.SET_EZVIZ_CONTROL,
+    params,
+  });
+};

+import { EdgeInstanceItemType, QueryEdgeInstancePageParams } from './model/edgeInstance';
+import { PaginationResult } from '/#/axios';
+import { defHttp } from '/@/utils/http/axios';
+
+enum EdgeManageApi {
+  PAGE_LIST_GET = '/tenant/edgeInfos',
+  EDGE = '/edge',
+  EDGE_INFO = '/edge/info',
+  EDGE_EVENTS = '/events/EDGE',
+  EDGE_DEVICE_INFO = '/device/info',
+  EDGE_SYNC = '/edge/sync',
+  EDGE_DEVICE_DISTRIBUTION = '/tenant/deviceInfos',
+}
+
+//分页
+export const edgeInstancePage = (params: QueryEdgeInstancePageParams) => {
+  return defHttp.get<PaginationResult<EdgeInstanceItemType>>(
+    {
+      url: EdgeManageApi.PAGE_LIST_GET,
+      params,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+// 创建或编辑
+export const createOrEditEdgeInstance = (data: EdgeInstanceItemType) => {
+  return defHttp.post<EdgeInstanceItemType>(
+    {
+      url: EdgeManageApi.EDGE,
+      data,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+// 删除
+export const deleteEdgeInstance = (id: string) => {
+  return defHttp.delete(
+    {
+      url: `${EdgeManageApi.EDGE}/${id}`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+// 详情
+export const infoEdgeInstance = (id: string) => {
+  return defHttp.get(
+    {
+      url: `${EdgeManageApi.EDGE_INFO}/${id}`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+// 边缘事件
+export const edgeEventPage = (params: QueryEdgeInstancePageParams, id: string | undefined) => {
+  return defHttp.get(
+    {
+      url: `${EdgeManageApi.EDGE_EVENTS}/${id}`,
+      params,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+// 边缘设备
+export const edgeDevicePage = (params: QueryEdgeInstancePageParams, id: string | undefined) => {
+  return defHttp.get(
+    {
+      url: `${EdgeManageApi.EDGE}/${id}/devices`,
+      params,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+// 边缘设备详情
+export const infoEdgeDevice = (id: string) => {
+  return defHttp.get(
+    {
+      url: `${EdgeManageApi.EDGE_DEVICE_INFO}/${id}`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+// 边缘同步
+export const syncEdge = (id: string) => {
+  return defHttp.post(
+    {
+      url: `${EdgeManageApi.EDGE_SYNC}/${id}`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+//设备分配查询
+export const edgeDeviceDistributionPage = (params: QueryEdgeInstancePageParams) => {
+  return defHttp.get<PaginationResult<EdgeInstanceItemType>>(
+    {
+      url: EdgeManageApi.EDGE_DEVICE_DISTRIBUTION,
+      params,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+//设备分配给边缘
+export const edgeDeviceDistribution = (edgeId: string | undefined, deviceId: string) => {
+  return defHttp.post<PaginationResult<EdgeInstanceItemType>>(
+    {
+      url: `${EdgeManageApi.EDGE}/${edgeId}/device/${deviceId}`,
+      data: {
+        headers: {
+          normalizedNames: {},
+          lazyUpdate: null,
+        },
+        params: {
+          updates: null,
+          cloneFrom: null,
+          encoder: {},
+          map: null,
+          interceptorConfig: {
+            ignoreLoading: false,
+            ignoreErrors: false,
+            resendRequest: false,
+          },
+        },
+      },
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+//取消设备分配给边缘
+export const edgeDeviceDeleteDistribution = (edgeId: string | undefined, deviceId: string) => {
+  return defHttp.delete<PaginationResult<EdgeInstanceItemType>>(
+    {
+      url: `${EdgeManageApi.EDGE}/${edgeId}/device/${deviceId}`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};

+import {
+  Configuration,
+  ProvisionConfiguration,
+  TransportConfiguration,
+} from '../../device/model/deviceModel';
+import { ModelOfMatterParams } from '../../device/model/modelOfMatterModel';
+
+export type QueryEdgeInstancePageParams = {
+  name?: string;
+  tenantId?: string;
+  textSearch?: string;
+  page: number;
+  pageSize: number;
+  sortOrder?: string;
+  sortProperty?: string;
+};
+
+export interface EdgeInstanceItemType {
+  id?: {
+    entityType: string;
+    id: string;
+  };
+  createdTime?: number;
+  tenantId?: {
+    entityType: string;
+    id: string;
+  };
+  customerId?: {
+    entityType: string;
+    id: string;
+  };
+  rootRuleChainId?: {
+    entityType: string;
+    id: string;
+  };
+  name: string;
+  label: string;
+  additionalInfo: {
+    description: string;
+  };
+  status: number;
+  type: string;
+  routingKey: string;
+  secret: string;
+  active?: boolean;
+}
+
+export interface ProfileData {
+  configuration: Configuration;
+  transportConfiguration: TransportConfiguration;
+  provisionConfiguration: ProvisionConfiguration;
+  alarms?: any;
+  thingsModel?: ModelOfMatterParams[];
+}
+
+export interface EdgeDeviceItemType {
+  creator: string;
+  createTime: string;
+  codeType?: string;
+  code?: string;
+  name: string;
+  transportType: string;
+  provisionType: string;
+  deviceType: string;
+  deviceCount: number;
+  tbDeviceId: string;
+  tbProfileId: string;
+  defaultQueueName: string;
+  deviceInfo?: {
+    avatar: string;
+  };
+  image: string;
+  type: string;
+  default: boolean;
+  defaultRuleChainId: string;
+  profileId: string;
+  alias?: string;
+  brand?: string;
+  organizationId: string;
+  organizationDTO: {
+    name: string;
+  };
+  alarmStatus: number;
+  deviceProfile: {
+    default: boolean;
+    name: string;
+    transportType: string;
+    profileData: ProfileData;
+  };
+  customerAdditionalInfo?: {
+    isPublic?: boolean;
+  };
+  ifShowClass?: Boolean;
+  sip?: {
+    cameraCode: string;
+    localIp: string;
+    manufacturer: string;
+    streamMode: string;
+  };
+  customerName?: string;
+  gatewayId?: string;
+  id: {
+    entityType: string;
+    id: string;
+  };
+  createdTime: number;
+  additionalInfo: {
+    gateway: boolean;
+    overwriteActivityTime: boolean;
+    description: string;
+  };
+  tenantId: {
+    entityType: string;
+    id: string;
+  };
+  customerId: {
+    entityType: string;
+    id: string;
+  };
+  label: string;
+  deviceProfileId: {
+    entityType: string;
+    id: string;
+  };
+  deviceData: {
+    configuration: {
+      type: string;
+    };
+    transportConfiguration: {
+      type: string;
+    };
+  };
+  firmwareId: null;
+  softwareId: null;
+  externalId: null;
+  customerTitle: null;
+  customerIsPublic: boolean;
+  deviceProfileName: string;
+  active: boolean;
+  deviceState: string;
+  deviceToken?: string;
+  gatewayName?: string;
+  gatewayAlias?: string;
+  sn: string;
+}

@@ -3,8 +3,17 @@ import { FileUploadResponse } from '/@/api/oss/FileUploadResponse';
 
 enum Api {
   BaseUploadUrl = '/oss/upload',
+  BaseDeleteUrl = '/oss',
 }
 
 export const upload = (file) => {
   return defHttp.post<FileUploadResponse>({ url: Api.BaseUploadUrl, params: file });
 };
+
+export const deleteFilePath = (deleteFilePath?: string) => {
+  if (!deleteFilePath) return;
+  const deleteParams = `?deleteFilePath=${deleteFilePath}`;
+  return defHttp.delete({
+    url: `${Api.BaseDeleteUrl}${deleteParams}`,
+  });
+};

@@ -125,11 +125,16 @@ export const getAttribute = (orgId) => {
 export const byOrganizationIdGetMasterDevice = (params: {
   organizationId: string;
   deviceProfileId?: string;
+  isSceneLinkage?: Boolean;
 }) => {
-  const { organizationId, deviceProfileId } = params;
+  const { organizationId, deviceProfileId, isSceneLinkage } = params;
   return defHttp.get<DeviceModel[]>({
     url: `${ScreenManagerApi.MASTER_GET_DEVICE}`,
-    params: { deviceProfileId, organizationId },
+    params: {
+      deviceProfileId,
+      organizationId,
+      isSceneLinkage: isSceneLinkage ? isSceneLinkage : undefined,
+    },
   });
 };
 //TODO-fengtao

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.933" viewBox="0 0 16 15.933"><defs><style>.a{fill:#343c4c;}</style></defs><path class="a" d="M345.333,337.067h-2.667a1.337,1.337,0,0,0-1.333,1.333v2.667a1.337,1.337,0,0,0,1.333,1.333h2.667a1.337,1.337,0,0,0,1.333-1.333V338.4A1.337,1.337,0,0,0,345.333,337.067Zm0,4h-2.667V338.4h2.667Z" transform="translate(-335.999 -331.8)"/><path class="a" d="M15.333,8.533a.667.667,0,1,0,0-1.333H14V5.867h1.333A.63.63,0,0,0,16,5.2a.63.63,0,0,0-.667-.667H14A2.7,2.7,0,0,0,11.333,2V.667A.667.667,0,1,0,10,.667V2H8.667V.667a.667.667,0,0,0-1.333,0V2H6V.667A.63.63,0,0,0,5.333,0a.668.668,0,0,0-.667.667V2A2.7,2.7,0,0,0,2,4.533H.667A.63.63,0,0,0,0,5.2a.63.63,0,0,0,.667.667H2V7.2H.667a.667.667,0,0,0,0,1.333H2V9.867H.667a.667.667,0,1,0,0,1.333H2v.133A2.675,2.675,0,0,0,4.667,14v1.267a.63.63,0,0,0,.667.667A.63.63,0,0,0,6,15.267V14H7.333v1.267a.667.667,0,1,0,1.333,0V14H10v1.267a.667.667,0,1,0,1.333,0V14A2.675,2.675,0,0,0,14,11.333V11.2h1.333a.667.667,0,0,0,0-1.333H14V8.533h1.333Zm-2.667,2.8a1.337,1.337,0,0,1-1.333,1.333H4.667a1.337,1.337,0,0,1-1.333-1.333V4.667A1.337,1.337,0,0,1,4.667,3.333h6.667a1.337,1.337,0,0,1,1.333,1.333v6.667Z"/></svg>
\ No newline at end of file

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.873" viewBox="0 0 16 15.873"><defs><style>.a{fill:#343c4c;}</style></defs><g transform="translate(-75.041 -99.03)"><path class="a" d="M90.95,111.459l-1.7-11.191,0-.014a1.344,1.344,0,0,0-1.276-1.225H78.36a1.356,1.356,0,0,0-1.236,1.2l0,.011-2.049,11.425.011,0a2.32,2.32,0,0,0-.042.446v.384a2.4,2.4,0,0,0,2.4,2.4h11.2a2.4,2.4,0,0,0,2.4-2.4v-.384a2.4,2.4,0,0,0-.09-.658ZM78.292,100.645c.1-.389.256-.424.344-.434h9.108c.223,0,.3.335.317.416l1.38,9.1a2.292,2.292,0,0,0-1.065-.263H77.706a2.29,2.29,0,0,0-1.046.252ZM89.936,112.4a1.378,1.378,0,0,1-1.415,1.339H77.56a1.378,1.378,0,0,1-1.415-1.339v-.356a1.378,1.378,0,0,1,1.415-1.339H88.522a1.412,1.412,0,0,1,1.34.907l.066.418h.008v.369h0Z"/><path class="a" d="M160.413,229.5H158.5a.48.48,0,1,0,0,.96h1.916a.48.48,0,0,0,0-.96Zm1.964-3.83h5.032a1.864,1.864,0,0,0,1.391-.587,2.344,2.344,0,0,0,.522-1.826,2.536,2.536,0,0,0-1.747-1.987,2.511,2.511,0,0,0-2.416-2.261,2.382,2.382,0,0,0-1.789.835,1.835,1.835,0,0,0-1.685,1.245,2.49,2.49,0,0,0-1.953,2.063,1.87,1.87,0,0,0,.415,1.428A3.433,3.433,0,0,0,162.378,225.673Zm-1.514-2.45c.094-.792.66-1.029,1.454-1.287l.267-.089.054-.261a.852.852,0,0,1,.794-.719.616.616,0,0,1,.121.011l.291.048.167-.24a1.354,1.354,0,0,1,1.12-.617,1.509,1.509,0,0,1,1.414,1.559l0,.293.3.132c.7.31,1.293.614,1.352,1.244a1.34,1.34,0,0,1-.261,1.045.826.826,0,0,1-.652.267h-4.739a2.362,2.362,0,0,1-1.478-.708A.86.86,0,0,1,160.864,223.223Z" transform="translate(-81.382 -117.677)"/></g></svg>
\ No newline at end of file

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1722937185750" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5222" id="mx_n_1722937185750" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M0 0v1024a1024 1024 0 0 1 1024-1024H0z" p-id="5223" fill="#1890ff"></path></svg>

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:#343c4c;}</style></defs><g transform="translate(-562 -613)"><rect class="a" width="16" height="16" transform="translate(562 613)"/><g transform="translate(563.294 613)"><path class="b" d="M148.64,80.44H138.412a1.594,1.594,0,0,1-1.592-1.592V66.032a1.594,1.594,0,0,1,1.592-1.592h6.36a1.567,1.567,0,0,1,1.132.487l3.9,4.115a1.554,1.554,0,0,1,.428,1.073v8.733a1.594,1.594,0,0,1-1.592,1.592ZM138.412,65.714a.319.319,0,0,0-.318.318V78.848a.319.319,0,0,0,.318.318H148.64a.319.319,0,0,0,.318-.318V70.115a.285.285,0,0,0-.079-.2l-3.9-4.115a.287.287,0,0,0-.208-.089Z" transform="translate(-136.82 -64.44)"/><path class="b" d="M310.723,460.845h-6.046a.7.7,0,0,1-.7-.7v-5.04a.7.7,0,0,1,.7-.7h6.046a.7.7,0,0,1,.7.7v5.04a.7.7,0,0,1-.7.7Zm-5.787-.955h5.53v-4.524h-5.53Z" transform="translate(-300.992 -447.439)"/><path class="b" d="M426.518,592.369a.478.478,0,0,1-.478-.478v-2.774a.478.478,0,0,1,.955,0v2.774A.477.477,0,0,1,426.518,592.369Zm2.378,0a.478.478,0,0,1-.478-.478v-2.774a.478.478,0,0,1,.955,0v2.774A.478.478,0,0,1,428.9,592.369Z" transform="translate(-420.87 -579.27)"/></g></g></svg>
\ No newline at end of file

@@ -71,10 +71,10 @@
         if (!value) {
           return true;
         }
-        let { name } = props || {};
+        let { title } = props || {};
         value = value.toLowerCase();
-        name = name.toLowerCase();
-        return name.includes(value);
+        title = title.toLowerCase();
+        return title.includes(value);
       }
 
       async function fetch() {

@@ -21,7 +21,7 @@
   }
 
   const { prefixCls } = useDesign('api-upload');
-  const emit = defineEmits(['update:fileList', 'preview', 'download']);
+  const emit = defineEmits(['update:fileList', 'preview', 'download', 'delete']);
 
   const { createMessage } = useMessage();
 
@@ -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);
@@ -129,6 +132,7 @@
     const index = _fileList.findIndex((item) => item.uid === file.uid);
     ~index && _fileList.splice(index, 1);
     emit('update:fileList', _fileList);
+    emit('delete', file.url);
   };
 
   const handlePreview = (file: FileItem) => {

@@ -136,7 +136,8 @@ export interface FormSchema {
   helpMessage?:
     | string
     | string[]
-    | ((renderCallbackParams: RenderCallbackParams) => string | string[]);
+    | ((renderCallbackParams: RenderCallbackParams) => string | string[])
+    | Boolean;
   // BaseHelp component props
   helpComponentProps?: Partial<HelpComponentProps>;
   // Label width, if it is passed, the labelCol and WrapperCol configured by itemProps will be invalid

@@ -59,7 +59,7 @@
             </span>
           </Menu.Item>
           <Menu.Item :disabled="item.disabled" v-if="item.popconfirm">
-            <Popconfirm v-bind="item.popconfirm">
+            <Popconfirm :disabled="item.disabled" v-bind="item.popconfirm">
               <template v-if="item.popconfirm.icon" #icon>
                 <Icon :icon="item.popconfirm.icon" />
               </template>

@@ -4,6 +4,7 @@ const menuMap = new Map();
 
 menuMap.set('/visual/board/detail/:boardId/:boardName/:platform/:organizationId?', '/visual/board');
 menuMap.set('/rule/chain/:id', '/rule/chain');
+menuMap.set('/edge/edge_detail/:id', '/edge');
 
 export const useMenuActiveFix = (route: RouteLocationNormalizedLoaded) => {
   let flag = false;

@@ -2,10 +2,12 @@
   <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
     <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
       <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
-      <span :class="`${prefixCls}__info hidden md:block`">
-        <span :class="`${prefixCls}__name  `" class="truncate">
-          {{ getUserInfo.realName }}
-        </span>
+      <span :class="`${prefixCls}__info hidden md:block truncate`">
+        <Tooltip :trigger="['click']" :title="getUserInfo.realName">
+          <span :class="`${prefixCls}__name  `" class="truncate">
+            {{ getUserInfo.realName?.slice(0, 10) }}
+          </span>
+        </Tooltip>
       </span>
     </span>
 
@@ -53,7 +55,7 @@
 </template>
 <script lang="ts">
   // components
-  import { Dropdown, Menu } from 'ant-design-vue';
+  import { Dropdown, Menu, Tooltip } from 'ant-design-vue';
   import { defineComponent, computed, ref, reactive } from 'vue';
   import { useUserStore } from '/@/store/modules/user';
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
@@ -83,6 +85,7 @@
       LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
       PersonalChild: createAsyncComponent(() => import('../personal/index.vue')),
       AboutSoftwareModal,
+      Tooltip,
     },
     props: {
       theme: propTypes.oneOf(['dark', 'light']),

@@ -28,6 +28,7 @@ import { RouteRecordRaw } from 'vue-router';
 import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 import { createLocalStorage } from '/@/utils/cache/index';
 import { getEntitiesId } from '/@/api/dashboard/index';
+import { useRole } from '/@/hooks/business/useRole';
 
 interface PlatInfoType {
   id: string;
@@ -283,7 +284,10 @@ export const useUserStore = defineStore({
         title: t('sys.app.logoutTip'),
         content: t('sys.app.logoutMessage'),
         onOk: async () => {
-          await logoutApi(null, 'modal'); //新增退出登录接口
+          const { isPlatformAdmin } = useRole();
+          if (!isPlatformAdmin.value) {
+            await logoutApi(null, 'modal'); //新增退出登录接口
+          }
           await this.logout(true);
         },
       });

@@ -173,7 +173,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
         // authentication schemes，e.g: Bearer
         // authenticationScheme: 'Bearer',
         authenticationScheme: 'Bearer',
-        timeout: 10 * 1000,
+        timeout: 26 * 1000,
         // 基础接口地址
         // baseURL: globSetting.apiUrl,
         // 接口可能会有通用的地址部分，可以统一抽取出来

@@ -89,3 +89,18 @@ export const withInstall = <T>(component: T, alias?: string) => {
   };
   return component as T & Plugin;
 };
+
+// 字节单位转换
+export const formatSizeUnits = (bytes) => {
+  if (bytes < 100) {
+    return bytes;
+  } else if (bytes < 1024) {
+    return bytes + 'bytes';
+  } else if (bytes < 1048576) {
+    return (bytes / 1024).toFixed(2) + 'KB';
+  } else if (bytes < 1073741824) {
+    return (bytes / 1048576).toFixed(2) + 'MB';
+  } else {
+    return (bytes / 1073741824).toFixed(2) + 'GB';
+  }
+};

@@ -7,10 +7,10 @@ export const createOrganizationSearch = () => {
       if (!value) {
         return true;
       }
-      let { name } = props || {};
+      let { title } = props || {};
       value = value?.toLowerCase();
-      name = name?.toLowerCase();
-      return name.includes(value);
+      title = title?.toLowerCase();
+      return title.includes(value);
     },
   };
 };

@@ -247,11 +247,11 @@ export const alarmSchemasForm: FormSchema[] = [
       disabled: true,
     },
   },
-  {
-    field: 'details',
-    label: '详情',
-    component: 'InputTextArea',
-  },
+  // {
+  //   field: 'details',
+  //   label: '详情',
+  //   component: 'InputTextArea',
+  // },
 ];
 
 export function getAlarmStatus({

@@ -51,6 +51,7 @@
   import { useDrawer } from '/@/components/Drawer';
   import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
   import { buildUUID } from '/@/utils/uuid';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   export default defineComponent({
     name: 'ContactDrawer',
@@ -161,6 +162,11 @@
           } else {
             delete values.id;
           }
+
+          if (Reflect.has(values, 'deleteUrl') && values.deleteUrl) {
+            await deleteFilePath(values?.deleteUrl);
+            Reflect.deleteProperty(values, 'deleteUrl');
+          }
           let saveMessage = '添加成功';
           let updateMessage = '修改成功';
 

@@ -100,7 +100,6 @@
     AccessMode,
     PageMode,
     CameraPermission,
-    VideoPlatformEnum,
     accessModeConfig,
     getPlayUrl,
   } from './config.data';
@@ -199,14 +198,12 @@
       const handleViewVideo = (record: CameraRecord) => {
         const { videoPlatformDTO, params } = record;
         const { type } = videoPlatformDTO || {};
-
         openModal(true, {
           record: {
             id: record.id,
-            canControl:
-              [AccessMode.Streaming, AccessMode.GBT28181].includes(record.accessMode) &&
-              type !== VideoPlatformEnum.FLUORITE,
+            canControl: [AccessMode.Streaming, AccessMode.GBT28181].includes(record.accessMode),
             isGBT: record.accessMode === AccessMode.GBT28181,
+            videoPlatformType: type,
             channelId: params?.channelNo,
             tbDeviceId: params?.deviceId,
             getPlayUrl: async () => {

@@ -92,10 +92,11 @@
   const { getResult } = useFingerprint();
   const beforeVideoPlay = async (record: CameraRecordItem) => {
     if (isNullOrUnDef(record.accessMode)) return;
-    const { url, type } = await getPlayUrl(record);
+    const { url, type, withToken } = (await getPlayUrl(record)) || {};
     record.playSourceUrl = url;
     record.streamType = type;
     record.isTransform = true;
+    record.withToken = withToken;
   };
 
   const gridLayout = ref({ gutter: 1, column: 2 });

@@ -192,7 +192,7 @@ export const formSchema: QFormSchema[] = [
     component: 'ApiUpload',
     changeEvent: 'update:fileList',
     valueField: 'fileList',
-    componentProps: () => {
+    componentProps: ({ formModel }) => {
       return {
         listType: 'picture-card',
         maxFileLimit: 1,
@@ -214,10 +214,19 @@ export const formSchema: QFormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
+        onDelete(url: string) {
+          formModel.deleteUrl = url!;
+        },
       };
     },
   },
   {
+    field: 'deleteUrl',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
     field: 'name',
     label: '视频名字',
     required: true,
@@ -623,9 +632,7 @@ export const formGBTSchema: QFormSchema[] = [
   },
 ];
 
-export async function getPlayUrl(
-  params: CameraRecord
-): Promise<{ url: string; type: PlayerStreamType }> {
+export async function getPlayUrl(params: CameraRecord) {
   const { accessMode } = params;
   if (accessMode === AccessMode.ManuallyEnter) {
     const { videoUrl } = params;
@@ -635,7 +642,11 @@ export async function getPlayUrl(
       if (isRTSPPlay) {
         const { getResult } = useFingerprint();
         const fingerprint = await getResult();
-        return { url: getFlvPlayUrl(videoUrl, fingerprint.visitorId), type: 'flv' };
+        return {
+          url: getFlvPlayUrl(videoUrl, fingerprint.visitorId),
+          type: 'flv',
+          withToken: true,
+        };
       } else {
         return { url: videoUrl, type: 'auto' };
       }

@@ -52,6 +52,7 @@
   import { createPickerSearch } from '/@/utils/pickerSearch';
   import type { queryPageParams } from '/@/api/configuration/center/model/configurationCenterModal';
   import { getDeviceProfile } from '/@/api/alarm/position';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   export default defineComponent({
     name: 'ConfigurationDrawer',
@@ -263,6 +264,11 @@
             values.thumbnail = file.url || null;
           }
           setDrawerProps({ confirmLoading: true });
+
+          if (Reflect.has(values, 'deleteUrl') && values.deleteUrl) {
+            await deleteFilePath(values?.deleteUrl);
+            Reflect.deleteProperty(values, 'deleteUrl');
+          }
           let saveMessage = '添加成功';
           let updateMessage = '修改成功';
           values.defaultContent = getDefaultContent(values.platform);

@@ -6,6 +6,7 @@ import { useComponentRegister } from '/@/components/Form';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
 import { getDeviceProfile } from '/@/api/alarm/position';
 import { buildUUID } from '/@/utils/uuid';
+import { createPickerSearch } from '/@/utils/pickerSearch';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 export enum Platform {
@@ -90,7 +91,7 @@ export const formSchema: FormSchema[] = [
     component: 'ApiUpload',
     changeEvent: 'update:fileList',
     valueField: 'fileList',
-    componentProps: () => {
+    componentProps: ({ formModel }) => {
       return {
         listType: 'picture-card',
         maxFileLimit: 1,
@@ -112,10 +113,19 @@ export const formSchema: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
+        onDelete(url: string) {
+          formModel.deleteUrl = url!;
+        },
       };
     },
   },
   {
+    field: 'deleteUrl',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
     field: 'name',
     label: '组态名称',
     required: true,
@@ -210,14 +220,7 @@ export const formSchema: FormSchema[] = [
       labelField: 'name',
       valueField: 'id',
       placeholder: '请选择产品',
-      getPopupContainer: (triggerNode) => triggerNode.parentNode,
-      filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
-        let { label, value } = option;
-        label = label.toLowerCase();
-        value = value.toLowerCase();
-        inputValue = inputValue.toLowerCase();
-        return label.includes(inputValue) || value.includes(inputValue);
-      },
+      ...createPickerSearch(),
     },
     ifShow: ({ values }) => values['enableTemplate'] === 0,
   },

@@ -21,6 +21,7 @@
   import { buildUUID } from '/@/utils/uuid';
   import { getDeviceProfile } from '/@/api/alarm/position';
   import { PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from '../center/center.data';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   export default defineComponent({
     name: 'ConfigurationDrawer',
@@ -91,6 +92,10 @@
             const file = (values.thumbnail || []).at(0) || {};
             values.thumbnail = file.url || null;
           }
+          if (Reflect.has(values, 'deleteUrl') && values.deleteUrl) {
+            await deleteFilePath(values?.deleteUrl);
+            Reflect.deleteProperty(values, 'deleteUrl');
+          }
           setDrawerProps({ confirmLoading: true });
           let saveMessage = '添加成功';
           let updateMessage = '修改成功';

@@ -6,6 +6,7 @@ import { useComponentRegister } from '/@/components/Form';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
 import { getDeviceProfile } from '/@/api/alarm/position';
 import { Platform } from '../center/center.data';
+import { createPickerSearch } from '/@/utils/pickerSearch';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
@@ -79,7 +80,7 @@ export const formSchema: FormSchema[] = [
     component: 'ApiUpload',
     changeEvent: 'update:fileList',
     valueField: 'fileList',
-    componentProps: () => {
+    componentProps: ({ formModel }) => {
       return {
         listType: 'picture-card',
         maxFileLimit: 1,
@@ -101,9 +102,18 @@ export const formSchema: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
+        onDelete(url: string) {
+          formModel.deleteUrl = url!;
+        },
       };
     },
   },
+  {
+    field: 'deleteUrl',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
 
   {
     field: 'name',
@@ -131,6 +141,7 @@ export const formSchema: FormSchema[] = [
       mode: 'multiple',
       labelField: 'name',
       valueField: 'id',
+      ...createPickerSearch(),
     },
   },
   {

@@ -19,6 +19,7 @@
   import { saveOrUpdateBigScreenCenter } from '/@/api/bigscreen/center/bigscreenCenter';
   import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
   import { buildUUID } from '/@/utils/uuid';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   export default defineComponent({
     name: 'BigScreenDrawer',
@@ -67,6 +68,10 @@
             const file = (values.thumbnail || []).at(0) || {};
             values.thumbnail = file.url || null;
           }
+          if (Reflect.has(values, 'deleteUrl') && values.deleteUrl) {
+            await deleteFilePath(values?.deleteUrl);
+            Reflect.deleteProperty(values, 'deleteUrl');
+          }
           setDrawerProps({ confirmLoading: true });
           let saveMessage = '添加成功';
           let updateMessage = '修改成功';

@@ -56,7 +56,7 @@ export const formSchema: FormSchema[] = [
     component: 'ApiUpload',
     changeEvent: 'update:fileList',
     valueField: 'fileList',
-    componentProps: () => {
+    componentProps: ({ formModel }) => {
       return {
         listType: 'picture-card',
         maxFileLimit: 1,
@@ -80,9 +80,18 @@ export const formSchema: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
+        onDelete(url: string) {
+          formModel.deleteUrl = url!;
+        },
       };
     },
   },
+  {
+    field: 'deleteUrl',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
 
   {
     field: 'name',

@@ -48,7 +48,10 @@
     rowSelection: {
       type: 'checkbox',
       getCheckboxProps: (record: any) => {
-        return { disabled: !!record.status };
+        return {
+          disabled:
+            getAuthCache(USER_INFO_KEY).tenantId === record.tenantId ? !!record.status : true,
+        };
       },
     },
   });
@@ -86,12 +89,14 @@
 
   // 详情
   const registerDetailRecord = ref<any>({});
+  const isCurrentTenant = ref<Boolean>(false);
   const handleDetail = (record?: any) => {
     openDrawer(true);
     registerDetailRecord.value = {
       ...record,
       ifShowClass: true,
     };
+    isCurrentTenant.value = getAuthCache(USER_INFO_KEY).tenantId === record.tenantId;
   };
 
   // 状态->编辑
@@ -99,7 +104,7 @@
     switchLoading.value = true;
     await deviceProfileCategory({ ...record, status: e });
     switchLoading.value = false;
-    createMessage.success('操作成功');
+    createMessage.success(`${!e ? '禁用' : '启用'}成功`);
     handleReload();
   };
 
@@ -145,6 +150,7 @@
         <Switch
           @click="(e) => handleSwitch(e, record)"
           :loading="switchLoading"
+          :disabled="getAuthCache(USER_INFO_KEY).tenantId !== record.tenantId"
           v-model:checked="record.status"
           checked-children="启用"
           un-checked-children="禁用"
@@ -165,14 +171,17 @@
               label: '编辑',
               auth: 'api:yt:product:category:update',
               icon: 'clarity:note-edit-line',
-              ifShow: authBtn(role),
+              ifShow: authBtn(role) && getAuthCache(USER_INFO_KEY).tenantId === record.tenantId,
               onClick: handleEdit.bind(null, record),
             },
             {
               label: '删除',
               auth: 'api:yt:product:category:delete',
               icon: 'ant-design:delete-outlined',
-              ifShow: authBtn(role) && !record.status,
+              ifShow:
+                authBtn(role) &&
+                !record.status &&
+                getAuthCache(USER_INFO_KEY).tenantId === record.tenantId,
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
@@ -185,7 +194,10 @@
     </BasicTable>
     <classModal @register="registerModal" @handleReload="handleReload" />
     <BasicDrawer title="物模型" @register="registerDetailDrawer" width="60%" destroy-on-close>
-      <PhysicalModelManagementStep :record="registerDetailRecord" />
+      <PhysicalModelManagementStep
+        :isCurrentTenant="isCurrentTenant"
+        :record="registerDetailRecord"
+      />
     </BasicDrawer>
   </div>
 </template>

@@ -49,7 +49,7 @@ export const step1Schemas: FormSchema[] = [
     component: 'ApiUpload',
     changeEvent: 'update:fileList',
     valueField: 'fileList',
-    componentProps: () => {
+    componentProps: ({ formModel }) => {
       return {
         listType: 'picture-card',
         maxFileLimit: 1,
@@ -71,10 +71,19 @@ export const step1Schemas: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
+        onDelete(url: string) {
+          formModel.deleteUrl = url!;
+        },
       };
     },
   },
   {
+    field: 'deleteUrl',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
     field: 'alias',
     label: '别名 ',
     component: 'Input',
@@ -193,8 +202,29 @@ export const step1Schemas: FormSchema[] = [
     },
   },
   {
+    field: 'addressType',
+    label: '',
+    component: 'Input',
+    show: false,
+    defaultValue: 'HEX',
+  },
+  {
+    field: 'deviceState',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
     field: 'addressCode',
     label: '地址码',
+    dynamicDisabled({ values }) {
+      return (
+        values.isUpdate &&
+        values.deviceType === DeviceTypeEnum.SENSOR &&
+        values.deviceState === 'ONLINE' &&
+        values.transportType === TransportTypeEnum.TCP
+      );
+    },
     dynamicRules({ values }) {
       return [
         {
@@ -202,18 +232,31 @@ export const step1Schemas: FormSchema[] = [
             values?.transportType === TransportTypeEnum.TCP &&
             values?.tcpDeviceProtocol === TCPProtocolTypeEnum.MODBUS_RTU,
           message: '地址码范围为00~FF',
-          pattern: /^[0-9A-Fa-f]{1,2}$/,
+          pattern: values?.addressType === 'HEX' ? /^[0-9A-Fa-f]{2}$/ : /^[0-9A-Fa-f]{1,2}$/,
         },
       ];
     },
-    helpMessage: ['地址码范围为00~FF'],
+    helpMessage({ values }) {
+      return [
+        '地址码范围为00~FF',
+        values.transportType === TransportTypeEnum.TCP &&
+        values.deviceType === DeviceTypeEnum.SENSOR
+          ? 'tcp网关子设备在线时，不能修改设备标识或地址码'
+          : '',
+      ];
+    },
     component: 'HexInput',
     changeEvent: 'update:value',
     valueField: 'value',
-    componentProps: {
-      type: InputTypeEnum.HEX,
-      maxValue: parseInt('FF', 16),
-      placeholder: '请输入寄存器地址',
+    componentProps: ({ formModel }) => {
+      return {
+        type: InputTypeEnum.HEX,
+        maxValue: parseInt('FF', 16),
+        placeholder: '请输入寄存器地址',
+        onHexChange: (e) => {
+          formModel.addressType = e;
+        },
+      };
     },
     ifShow: ({ values }) => {
       return (
@@ -235,6 +278,22 @@ export const step1Schemas: FormSchema[] = [
         },
       ];
     },
+    dynamicDisabled({ values }) {
+      return (
+        values.isUpdate &&
+        values.deviceType === DeviceTypeEnum.SENSOR &&
+        values.deviceState === 'ONLINE' &&
+        values.transportType === TransportTypeEnum.TCP
+      );
+    },
+    helpMessage({ values }) {
+      return (
+        values.transportType === TransportTypeEnum.TCP &&
+        values.deviceType === DeviceTypeEnum.SENSOR
+          ? ['tcp网关子设备在线时，不能修改设备标识或地址码']
+          : false
+      ) as any;
+    },
     component: 'Input',
     componentProps: () => {
       return {
@@ -276,7 +335,7 @@ export const step1Schemas: FormSchema[] = [
     component: 'ApiSelect',
     ifShow: ({ values }) => values.deviceType === 'SENSOR',
     componentProps: ({ formModel, formActionType }) => {
-      const { transportType } = formModel;
+      const { transportType, deviceType, gatewayId } = formModel;
       const { setFieldsValue } = formActionType;
       if (!transportType) return {};
       return {
@@ -291,6 +350,7 @@ export const step1Schemas: FormSchema[] = [
         showSearch: true,
         params: {
           transportType,
+          gatewayId: deviceType === DeviceTypeEnum.SENSOR && gatewayId ? gatewayId : null,
         },
         placeholder: '请选择网关设备',
         valueField: 'tbDeviceId',

@@ -6,6 +6,7 @@ import { deviceProfile } from '/@/api/device/deviceManager';
 import { h } from 'vue';
 import { Tag, Tooltip } from 'ant-design-vue';
 import { handeleCopy } from '../../profiles/step/topic';
+import edgefornt from '/@/assets/icons/edgefornt.svg';
 
 export enum DeviceListAuthEnum {
   /**
@@ -84,8 +85,9 @@ export const columns: BasicColumn[] = [
     title: '别名/设备名称',
     width: 210,
     slots: { customRender: 'name', title: 'deviceTitle' },
+    className: 'device-name-edge',
     customRender: ({ record }) => {
-      return h('div', { style: 'display:flex;flex-direction:column' }, [
+      return h('div', { class: 'py-3 px-3.5' }, [
         record.alias &&
           h(
             'div',
@@ -118,6 +120,19 @@ export const columns: BasicColumn[] = [
             () => `${record.name}`
           )
         ),
+        record.isEdge
+          ? h('div', { class: 'absolute top-0 left-0', fill: '#1890ff' }, [
+              h('img', { src: edgefornt, class: 'w-12.5 h-12.5' }),
+              h(
+                'span',
+                {
+                  class:
+                    'absolute top-0.5 left-0.5 text-light-50 transform -rotate-45 translate-y-0 !text-10px',
+                },
+                '边'
+              ),
+            ])
+          : '',
       ]);
     },
   },
@@ -162,7 +177,9 @@ export const columns: BasicColumn[] = [
   {
     title: '最后断开时间',
     dataIndex: 'lastOfflineTime',
-    format: (text) => text && formatToDate(text, 'YYYY-MM-DD HH:mm:ss'),
+    format: (text) => {
+      return text ? formatToDate(text, 'YYYY-MM-DD HH:mm:ss') : '';
+    },
     width: 160,
   },
 ];

@@ -41,6 +41,7 @@
   import { Steps } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { credentialTypeEnum } from '../../config/data';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   export default defineComponent({
     name: 'DeviceModal',
@@ -161,8 +162,13 @@
                 avatar: stepRecord?.icon,
                 ...DeviceStep1Ref.value?.devicePositionState,
               },
+              alarmStatus: currentDeviceData?.alarmStatus,
             };
             validateNameLength(stepRecord.name);
+            if (Reflect.has(editData, 'deleteUrl')) {
+              await deleteFilePath(editData?.deleteUrl);
+              Reflect.deleteProperty(editData, 'deleteUrl');
+            }
             await createOrEditDevice(editData);
           } else {
             const stepRecord = unref(stepState);

@@ -401,16 +401,16 @@
       // 父组件调用更新字段值的方法
       function parentSetFieldsValue(data) {
         const { deviceInfo = {} } = data;
-        positionState.longitude = deviceInfo.longitude;
-        positionState.latitude = deviceInfo.latitude;
-        positionState.address = deviceInfo.address;
+        positionState.longitude = deviceInfo?.longitude;
+        positionState.latitude = deviceInfo?.latitude;
+        positionState.address = deviceInfo?.address;
         devicePositionState.value = { ...toRaw(positionState) };
-        devicePic.value = deviceInfo.avatar;
+        devicePic.value = deviceInfo?.avatar;
 
-        if (deviceInfo.avatar) {
+        if (deviceInfo?.avatar) {
           setFieldsValue({
             isUpdate: unref(isUpdate1),
-            icon: [{ uid: buildUUID(), name: 'name', url: deviceInfo.avatar } as FileItem],
+            icon: [{ uid: buildUUID(), name: 'name', url: deviceInfo?.avatar } as FileItem],
           });
         }
         setFieldsValue({

@@ -119,6 +119,7 @@
       ],
     };
   });
+  const cacheSearchValue = ref('');
 
   const [registerForm, { getFieldsValue }] = useForm({
     schemas: [
@@ -141,6 +142,8 @@
 
         pagination.current = 1;
 
+        cacheSearchValue.value = value;
+
         socketInfo.filterAttrKeys = value
           ? unref(socketInfo.rawDataSource)
               .filter(
@@ -161,6 +164,7 @@
     resetFunc: async () => {
       try {
         socketInfo.filterAttrKeys = [];
+        cacheSearchValue.value = '';
         handleFilterChange();
         unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
       } catch (error) {}
@@ -201,8 +205,15 @@
   const { createMessage } = useMessage();
 
   const setDataSource = () => {
+    const filterValueByCacheSearchValue = socketInfo.rawDataSource.filter(
+      (item) =>
+        item.key?.toUpperCase().includes(cacheSearchValue.value.toUpperCase()) ||
+        item.name?.toUpperCase().includes(cacheSearchValue.value.toUpperCase())
+    );
     socketInfo.dataSource = socketInfo.filterAttrKeys.length
       ? socketInfo.rawDataSource.filter((item) => socketInfo.filterAttrKeys.includes(item.key))
+      : filterValueByCacheSearchValue.length === 0
+      ? []
       : socketInfo.rawDataSource;
   };
 

 import { h } from 'vue';
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { Tag } from 'ant-design-vue';
+import { VideoPlatformEnum } from '/@/views/camera/manage/config.data';
 export type VideoCancelModalParamsType = {
   canControl?: boolean;
+  videoPlatformType: VideoPlatformEnum;
   isGBT?: boolean;
   tbDeviceId?: string;
   channelId?: string;
@@ -101,3 +103,25 @@ export const searchFormSchema: FormSchema[] | any = [
     },
   },
 ];
+
+export enum VideoControlEnum {
+  Up = 'UP',
+  Right = 'RIGHT',
+  Left = 'LEFT',
+  Down = 'DOWN',
+  ZoomIn = 'ZOOM_IN',
+  ZoomOut = 'ZOOM_OUT',
+}
+
+export enum EzvizVideoControlEnum {
+  UP,
+  DOWN,
+  LEFT,
+  RIGHT,
+  LEFT_UP,
+  LEFT_DOWN,
+  RIGHT_UP,
+  RIGHT_DOWN,
+  ZOOM_IN,
+  ZOOM_OUT,
+}

@@ -13,20 +13,14 @@
   } from '@ant-design/icons-vue';
   import { Button, Slider } from 'ant-design-vue';
   import { controlling } from '/@/api/camera/cameraManager';
-  import { setVideoControl } from '/@/api/device/videoChannel';
+  import { setEzvizControl, setVideoControl } from '/@/api/device/videoChannel';
   import XGPlayer from '/@/components/Video/src/XGPlayer.vue';
-  import PresetPlayer from 'xgplayer';
+  import { EzvizVideoControlEnum, VideoCancelModalParamsType, VideoControlEnum } from './config';
+  import { VideoPlatformEnum } from '/@/views/camera/manage/config.data';
 
   const props = defineProps<{
     playUrl?: string;
-    options?: {
-      canControl?: boolean;
-      isGBT?: boolean;
-      tbDeviceId?: string;
-      channelId?: string;
-      id?: string;
-      playerProps?: Recordable;
-    };
+    options?: VideoCancelModalParamsType;
   }>();
 
   const playerRef = ref<InstanceType<typeof XGPlayer>>();
@@ -64,12 +58,24 @@
     });
   };
 
+  const handleEzvizControl = (actionType: string, start: boolean) => {
+    const { id } = props.options || {};
+    const action = EzvizVideoControlEnum[actionType as VideoControlEnum];
+    setEzvizControl({ entityId: id!, action, controllingType: Number(!start) });
+  };
+
   //长按开始
   const moveStart = (action: string) => {
     if (unref(props.options?.isGBT)) {
       handleGBTControl(action, unref(sliderValue));
       return;
     }
+
+    if (props.options?.videoPlatformType === VideoPlatformEnum.FLUORITE) {
+      handleEzvizControl(action, true);
+      return;
+    }
+
     handleControl(0, action);
   };
 
@@ -79,6 +85,14 @@
       handleGBTControl('STOP', unref(sliderValue));
       return;
     }
+
+    if (props.options?.videoPlatformType === VideoPlatformEnum.FLUORITE) {
+      setTimeout(() => {
+        handleEzvizControl(action, false);
+      }, 1000);
+      return;
+    }
+
     handleControl(1, action);
   };
 
@@ -122,15 +136,15 @@
           <div>
             <Button
               class="left-top in-block"
-              @mousedown="moveStart('UP')"
-              @mouseup="moveStop('UP')"
+              @mousedown="moveStart(VideoControlEnum.Up)"
+              @mouseup="moveStop(VideoControlEnum.Up)"
             >
               <CaretUpOutlined class="icon-rotate child-icon" />
             </Button>
             <Button
               class="right-top in-block"
-              @mousedown="moveStart('RIGHT')"
-              @mouseup="moveStop('RIGHT')"
+              @mousedown="moveStart(VideoControlEnum.Right)"
+              @mouseup="moveStop(VideoControlEnum.Right)"
             >
               <CaretRightOutlined class="icon-rotate child-icon" />
             </Button>
@@ -138,15 +152,15 @@
           <div>
             <Button
               class="left-bottom in-block"
-              @mousedown="moveStart('LEFT')"
-              @mouseup="moveStop('LEFT')"
+              @mousedown="moveStart(VideoControlEnum.Left)"
+              @mouseup="moveStop(VideoControlEnum.Left)"
             >
               <CaretLeftOutlined class="icon-rotate child-icon" />
             </Button>
             <Button
               class="right-bottom in-block"
-              @mousedown="moveStart('DOWN')"
-              @mouseup="moveStop('DOWN')"
+              @mousedown="moveStart(VideoControlEnum.Down)"
+              @mouseup="moveStop(VideoControlEnum.Down)"
             >
               <CaretDownOutlined class="icon-rotate child-icon" />
             </Button>
@@ -161,16 +175,16 @@
       <div class="flex justify-center mt-8">
         <Button
           class="button-icon"
-          @mousedown="moveStart('ZOOM_IN')"
-          @mouseup="moveStop('ZOOM_IN')"
+          @mousedown="moveStart(VideoControlEnum.ZoomIn)"
+          @mouseup="moveStop(VideoControlEnum.ZoomIn)"
           style="border-radius: 50%"
         >
           <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" />
         </Button>
         <Button
           class="ml-10 button-icon"
-          @mousedown="moveStart('ZOOM_OUT')"
-          @mouseup="moveStop('ZOOM_OUT')"
+          @mousedown="moveStart(VideoControlEnum.ZoomOut)"
+          @mouseup="moveStop(VideoControlEnum.ZoomOut)"
           style="border-radius: 50%"
         >
           <ZoomOutOutlined style="color: #315a9c; font-size: 1.5rem" />

@@ -31,7 +31,6 @@
         options.value = null;
         setModalProps({ loading: true, loadingTip: '视频加载中...' });
         const { url, type } = await record.getPlayUrl();
-
         playUrl.value = url;
         options.value = record;
         options.value.playerProps = {

@@ -147,6 +147,8 @@
                 ? 'warning'
                 : record.deviceState == DeviceState.ONLINE
                 ? 'success'
+                : record.deviceState == DeviceState.ACTIVE
+                ? 'success'
                 : 'error'
             "
             class="ml-2"
@@ -156,6 +158,8 @@
                 ? '待激活'
                 : record.deviceState == DeviceState.ONLINE
                 ? '在线'
+                : record.deviceState == DeviceState.ACTIVE
+                ? '活动'
                 : '离线'
             }}
           </Tag>
@@ -231,7 +235,7 @@
                 ifShow: authBtn(role) && record.customerId === undefined,
                 color: 'error',
                 popConfirm: {
-                  title: '是否确认删除',
+                  title: !!record.isEdge ? '此设备来自边端，请谨慎删除' : '是否确认删除',
                   confirm: handleDelete.bind(null, record),
                 },
               },
@@ -707,4 +711,11 @@
       border-right: 30px solid transparent;
     }
   }
+
+  .device-name-edge {
+    width: 100%;
+    height: 100%;
+    padding: 0 !important;
+    position: relative;
+  }
 </style>

@@ -24,6 +24,7 @@
   import { BasicCardList, useCardList } from '/@/components/CardList';
   import { useRoute } from 'vue-router';
   import { ref } from 'vue';
+  import edgefornt from '/@/assets/icons/edgefornt.svg';
 
   defineProps<{
     mode: EnumTableCardMode;
@@ -154,7 +155,7 @@
       <template #renderItem="{ item }: BasicCardListRenderItem<ProfileRecord>">
         <Card hoverable>
           <template #cover>
-            <div class="h-full w-full !flex justify-center items-center text-center p-1">
+            <div class="h-full w-full !flex justify-center items-center text-center p-1 relative">
               <Image
                 @click.stop
                 wrapper-class-name="!w-32 !h-32 !flex !items-center overflow-hidden"
@@ -162,6 +163,13 @@
                 placeholder
                 :fallback="IMAGE_FALLBACK"
               />
+              <div v-if="item.isEdge" class="absolute top-0 left-0">
+                <img :src="edgefornt" />
+                <span
+                  class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1 translate-x-0.5"
+                  >边</span
+                >
+              </div>
             </div>
           </template>
           <template class="ant-card-actions" #actions>
@@ -199,7 +207,7 @@
                   auth: ProductPermission.DELETE,
                   icon: 'ant-design:delete-outlined',
                   popconfirm: {
-                    title: '是否确认删除操作?',
+                    title: !!item.isEdge ? '此产品来自边端，请谨慎删除' : '是否确认删除',
                     onConfirm: handleDelete.bind(null, [item.id]),
                     disabled: item.default || item.name == 'default',
                   },

@@ -20,7 +20,7 @@
         key="modelOfMatter"
         tab="物模型管理"
       >
-        <PhysicalModelManagementStep :record="record" />
+        <PhysicalModelManagementStep :record="record" :isCurrentTenant="true" />
       </Tabs.TabPane>
     </Tabs>
   </BasicDrawer>

@@ -86,6 +86,7 @@
   import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
   import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
   import { DeviceProfileDetail } from '/@/api/device/model/deviceConfigModel';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   const emits = defineEmits(['success', 'register']);
   const activeKey = ref('1');
@@ -188,6 +189,10 @@
     await getDeviceConfFormData();
     await getTransConfData();
     const isEmptyObj = isEmpty(transportConfData.profileData.transportConfiguration);
+    if (Reflect.has(postSubmitFormData.deviceConfData, 'deleteUrl') && values.deleteUrl.deleteUrl) {
+      await deleteFilePath(postSubmitFormData.deviceConfData?.deleteUrl);
+      Reflect.deleteProperty(postSubmitFormData.deviceConfData, 'deleteUrl');
+    }
     await deviceConfigAddOrEdit({
       ...postSubmitFormData.deviceConfData,
       ...{ transportType: !isEmptyObj ? transportTypeStr.value : 'DEFAULT' },

@@ -79,7 +79,7 @@
               icon: 'ant-design:delete-outlined',
               color: 'error',
               popConfirm: {
-                title: '是否确认删除',
+                title: !!record.isEdge ? '此设备来自边端，请谨慎删除' : '是否确认删除',
                 confirm: handleDeleteOrBatchDelete.bind(null, record),
               },
               ifShow: () => {

@@ -23,7 +23,7 @@
     }
   );
 
-  const emits = defineEmits(['update:value', 'change']);
+  const emits = defineEmits(['update:value', 'change', 'hexChange']);
 
   const typOptions = Object.values(InputTypeEnum).map((value) => ({ label: value, value }));
 
@@ -114,6 +114,10 @@
       ? getHexToDec(unref(getInputValue)!)
       : `${hexWithPrefix ? '0x' : ''}${Number(unref(getInputValue)).toString(16).toUpperCase()}`;
   });
+
+  const handleInputTypeChange = (e) => {
+    emits('hexChange', e);
+  };
 </script>
 
 <template>
@@ -124,6 +128,7 @@
       class="min-w-20"
       :options="typOptions"
       :disabled="disabled"
+      @change="handleInputTypeChange"
     />
     <Input v-bind="$attrs" v-model:value="getInputValue" class="!w-full" :disabled="disabled" />
     <div class="min-w-14 h-full px-2 flex-grow flex-shrink-0 text-center leading-8 bg-gray-200">

@@ -13,7 +13,13 @@
     <BasicForm @register="registerForm">
       <template #importType="{ model }">
         <RadioGroup v-model:value="model.importType">
-          <Authority :value="['api:yt:things_model:category:import', 'api:yt:things_model:import']">
+          <Authority
+            :value="
+              record?.ifShowClass
+                ? ['api:yt:things_model:category:import']
+                : ['api:yt:things_model:import']
+            "
+          >
             <Radio value="2">JSON导入</Radio>
           </Authority>
           <Authority :value="['api:yt:things_model:excel_import']">
@@ -80,10 +86,11 @@
         label: '导入类型',
         component: 'RadioGroup',
         slot: 'importType',
-        defaultValue: hasPermission([
-          'api:yt:things_model:category:import',
-          'api:yt:things_model:import',
-        ])
+        defaultValue: (
+          props.record?.ifShowClass
+            ? hasPermission(['api:yt:things_model:category:import'])
+            : hasPermission(['api:yt:things_model:import'])
+        )
           ? '2'
           : '1',
         helpMessage:

@@ -182,7 +182,7 @@ export const step1Schemas: FormSchema[] = [
     component: 'ApiUpload',
     changeEvent: 'update:fileList',
     valueField: 'fileList',
-    componentProps: () => {
+    componentProps: ({ formModel }) => {
       return {
         listType: 'picture-card',
         maxFileLimit: 1,
@@ -204,10 +204,19 @@ export const step1Schemas: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
+        onDelete(url: string) {
+          formModel.deleteUrl = url!;
+        },
       };
     },
   },
   {
+    field: 'deleteUrl',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
     field: 'deviceType',
     component: 'ApiRadioGroup',
     label: '设备类型',

@@ -8,7 +8,7 @@
     >
       <template #toolbar>
         <div class="flex-auto">
-          <div class="mb-2">
+          <div class="mb-2" v-if="isCurrentTenant">
             <Alert type="info" show-icon>
               <template #message>
                 <span v-if="!isShowBtn">
@@ -39,6 +39,7 @@
                 <Button type="primary" @click="handleExport" :loading="loading">导出物模型</Button>
               </Authority>
               <Authority
+                v-if="isCurrentTenant"
                 :value="[
                   'api:yt:things_model:import',
                   'api:yt:things_model:category:import',
@@ -47,12 +48,18 @@
               >
                 <Button type="primary" @click="handleSelectImport">导入物模型</Button>
               </Authority>
-              <Button type="primary" v-if="!isShowBtn" @click="handleEditPhysicalModel"
+              <Button
+                type="primary"
+                v-if="!isShowBtn && isCurrentTenant"
+                @click="handleEditPhysicalModel"
                 >编辑物模型</Button
               >
             </div>
             <div class="flex gap-2">
-              <Authority :value="[ModelOfMatterPermission.RELEASE]">
+              <Authority
+                v-if="!props.record.ifShowClass"
+                :value="[ModelOfMatterPermission.RELEASE]"
+              >
                 <Popconfirm
                   title="是否需要发布上线？"
                   ok-text="确定"
@@ -159,11 +166,12 @@
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { DeviceProfileDetail } from '/@/api/device/model/deviceConfigModel';
 
-  const { isPlatformAdmin, isSysadmin } = useRole();
+  const { isPlatformAdmin, isSysadmin, isTenantAdmin } = useRole();
   defineEmits(['register']);
 
   const props = defineProps<{
     record: DeviceProfileDetail;
+    isCurrentTenant: Boolean;
   }>();
 
   const { createMessage } = useMessage();
@@ -224,7 +232,8 @@
 
   const handleDeleteOrBatchDelete = async (record?: ModelOfMatterItemRecordType) => {
     const deleteFn =
-      props.record.ifShowClass && (unref(isPlatformAdmin) || unref(isSysadmin))
+      props.record.ifShowClass &&
+      (unref(isPlatformAdmin) || unref(isSysadmin) || unref(isTenantAdmin))
         ? deleteModelCategory
         : deleteModel;
 
@@ -265,7 +274,10 @@
   const handleSelectImport = () => {
     openModalSelect(true, {
       id: props.record.id,
-      isCateGory: (unref(isPlatformAdmin) || unref(isSysadmin)) && props.record.ifShowClass,
+      isCateGory:
+        unref(isPlatformAdmin) ||
+        unref(isSysadmin) ||
+        (unref(isTenantAdmin) && props.record.ifShowClass),
     });
   };
 

@@ -31,7 +31,7 @@
   import { DataActionModeEnum, DataActionModeNameEnum } from '/@/enums/toolEnum';
   import { DeviceProfileDetail } from '/@/api/device/model/deviceConfigModel';
 
-  const { isPlatformAdmin, isSysadmin } = useRole();
+  const { isPlatformAdmin, isSysadmin, isTenantAdmin } = useRole();
 
   const emit = defineEmits(['register', 'success']);
 
@@ -77,7 +77,9 @@
       const value = unref(objectModelElRef)!.getFieldsValue();
 
       const isCategoryAction =
-        (unref(isSysadmin) || unref(isPlatformAdmin)) && props.record.ifShowClass;
+        unref(isSysadmin) ||
+        unref(isPlatformAdmin) ||
+        (unref(isTenantAdmin) && props.record.ifShowClass);
 
       const submitFn =
         unref(openModalMode) === DataActionModeEnum.CREATE

+export { default as CardMode } from './index.vue';

+<script lang="ts" setup>
+  import { Button, Tooltip, Card, Popconfirm } from 'ant-design-vue';
+  import { AuthIcon, EnumTableCardMode } from '/@/components/Widget';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { BasicCardList, useCardList } from '/@/components/CardList';
+  import { useRoute } from 'vue-router';
+  import { ref } from 'vue';
+  import { HandleOperationEnum, HandleOperationNameEnum } from '../../config';
+  import { searchFormSchema } from '../EdgeInstance/config';
+  import { deleteEdgeInstance, edgeInstancePage } from '/@/api/edgeManage/edgeInstance';
+  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { EdgeInstanceFormDrawer } from '../EdgeInstance';
+  import { useDrawer } from '/@/components/Drawer';
+  import moment from 'moment';
+  import { isArray } from '/@/utils/is';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+  import edgeStatusIsOnlinePng from '/@/assets/images/edgeStatusIsOnline.png';
+  import edgeStatusIsOfflinePng from '/@/assets/images/edgeStatusIsOffline.png';
+  import { Image } from 'ant-design-vue';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  defineProps<{
+    mode: EnumTableCardMode;
+  }>();
+
+  defineEmits(['register']);
+
+  enum DropMenuEvent {
+    DELETE = 'delete',
+  }
+
+  const { createMessage } = useMessage();
+
+  const go = useGo();
+
+  const { query } = useRoute();
+
+  const disabledDeleteFlag = ref(true);
+
+  const [registerCardList, { reload, getSelectedRecords, clearSelectedKeys }] = useCardList({
+    api: async ({ page, pageSize, textSearch }) => {
+      const res = await edgeInstancePage({
+        page: page === 1 ? 0 : page,
+        pageSize,
+        textSearch,
+        sortProperty: 'createdTime',
+        sortOrder: 'DESC',
+      });
+      return {
+        total: res?.totalElements,
+        items: res?.data,
+      };
+    },
+    useSearchForm: true,
+    gutter: 4,
+    rowKey: 'routingKey', //id是对象
+    formConfig: {
+      schemas: searchFormSchema,
+      labelWidth: 100,
+      model: {
+        name: (query as Recordable)?.name ? decodeURIComponent((query as Recordable)?.name) : null,
+      },
+    },
+    selections: {
+      beforeSelectValidate: () => {
+        return true;
+      },
+      onSelect: (_record, _flag, allSelecteds) => {
+        disabledDeleteFlag.value = !allSelecteds.length;
+      },
+      onSelectAll: () => {
+        // 全选事件
+        disabledDeleteFlag.value = false;
+      },
+      onUnSelectAll: () => {
+        // 反选事件
+        disabledDeleteFlag.value = true;
+      },
+      onSelectToggle: (status: boolean) => {
+        // 全选是false,反选是true
+        if (!status) disabledDeleteFlag.value = false;
+        else disabledDeleteFlag.value = true;
+      },
+    },
+  });
+
+  const [registerEdgeInstanceFormDrawer, { openDrawer: openEdgeInstanceFormDrawer }] = useDrawer();
+
+  const handleEventIsSuccess = () => reload();
+
+  const handleGoDetail = (record: EdgeInstanceItemType | null) => {
+    go('/edge/edge_detail/' + record?.id?.id);
+  };
+
+  const handleOperationEvent = (
+    event: HandleOperationEnum,
+    record: EdgeInstanceItemType | null
+  ) => {
+    const isUpdate = event === HandleOperationEnum.CREATE ? false : true;
+    const isUpdateText =
+      event === HandleOperationEnum.CREATE
+        ? HandleOperationNameEnum.CREATE
+        : event === HandleOperationEnum.UPDATE
+        ? HandleOperationNameEnum.UPDATE
+        : HandleOperationNameEnum.VIEW;
+    if (event === HandleOperationEnum.VIEW) {
+    } else {
+      openEdgeInstanceFormDrawer(true, { isUpdate, record, isUpdateText, event });
+    }
+  };
+
+  const handleDelete = async (event: HandleOperationEnum, id?: string | null) => {
+    try {
+      if (event === HandleOperationEnum.BATCH_DELETE) {
+        const batchDeleteIds = getSelectedRecords().map(
+          (rowRecord: EdgeInstanceItemType) => rowRecord?.id?.id
+        );
+        if (isArray(batchDeleteIds) && batchDeleteIds.length === 0) return;
+        for (let item of batchDeleteIds) await deleteEdgeInstance(item!);
+      } else {
+        await deleteEdgeInstance(id!);
+      }
+      createMessage.success('删除成功');
+      clearSelectedKeys();
+      disabledDeleteFlag.value = true;
+      await reload();
+    } catch (error) {
+      throw error;
+    }
+  };
+</script>
+
+<template>
+  <section>
+    <BasicCardList @register="registerCardList">
+      <template #toolbar>
+        <Button type="primary" @click="handleOperationEvent(HandleOperationEnum.CREATE, null)"
+          >新增实例</Button
+        >
+        <Popconfirm
+          title="您确定要批量删除数据"
+          ok-text="确定"
+          cancel-text="取消"
+          @confirm="handleDelete(HandleOperationEnum.BATCH_DELETE, null)"
+          :disabled="disabledDeleteFlag"
+        >
+          <Button type="primary" danger :disabled="disabledDeleteFlag"> 批量删除 </Button>
+        </Popconfirm>
+      </template>
+      <template #renderItem="{ item }: BasicCardListRenderItem<EdgeInstanceItemType>">
+        <Card hoverable>
+          <template #cover>
+            <div class="w-full h-full !flex flex-col justify-between m-3">
+              <div class="!flex justify-between align-center text-center">
+                <Tooltip :title="item.name">
+                  <span class="truncate font-bold fill-dark-900 text-sm"> {{ item.name }} </span>
+                </Tooltip>
+                <div class="mr-6">
+                  <a-tag class="!flex items-center" :color="item.active ? '#E8FFEA' : '#FFECE8'">
+                    <template #icon>
+                      <template v-if="item.active">
+                        <Image :width="12" :height="12" :src="edgeStatusIsOnlinePng" />
+                      </template>
+                      <template v-else>
+                        <Image :width="12" :height="12" :src="edgeStatusIsOfflinePng" />
+                      </template>
+                    </template>
+                    <span class="ml-1" :style="{ color: item.active ? '#00B42A' : '#F53F3F' }">{{
+                      item.active ? '在线' : '离线'
+                    }}</span>
+                  </a-tag>
+                </div>
+              </div>
+              <div class="!flex justify-between align-center text-center">
+                <span class="truncate text-xs" style="color: #86909c">
+                  {{ moment(item.createdTime).format('YYYY-MM-DD HH:mm:ss') }}
+                </span>
+              </div>
+            </div>
+          </template>
+          <template class="ant-card-actions" #actions>
+            <Tooltip title="详情">
+              <AuthIcon
+                class="!text-lg"
+                icon="ant-design:eye-outlined"
+                @click.stop="handleGoDetail(item)"
+              />
+            </Tooltip>
+            <Tooltip title="编辑">
+              <AuthIcon
+                class="!text-lg"
+                icon="ant-design:form-outlined"
+                @click.stop="handleOperationEvent(HandleOperationEnum.UPDATE, item)"
+              />
+            </Tooltip>
+            <AuthDropDown
+              @click.stop
+              :trigger="['hover']"
+              :drop-menu-list="[
+                {
+                  text: '删除',
+                  event: DropMenuEvent.DELETE,
+                  icon: 'ant-design:delete-outlined',
+                  popconfirm: {
+                    title: '是否确认删除操作?',
+                    onConfirm: handleDelete.bind(null, HandleOperationEnum.DELETE, item?.id?.id),
+                  },
+                },
+              ]"
+            />
+          </template>
+          <Card.Meta>
+            <template #description>
+              <div class="truncate h-17 !flex justify-between flex-col">
+                <div class="truncate !flex">
+                  <span class="text-xs" style="color: #86909c">标签</span>
+                  <Tooltip :title="item.label">
+                    <span class="truncate ml-7.5 text-xs" style="color: #00b42a">{{
+                      item.label
+                    }}</span>
+                  </Tooltip>
+                </div>
+                <div class="truncate !flex">
+                  <span class="text-xs" style="color: #86909c">边缘类型</span>
+                  <Tooltip :title="item.type">
+                    <span style="color: #4e5969" class="truncate ml-7.5 text-xs">{{
+                      item.type
+                    }}</span>
+                  </Tooltip>
+                </div>
+                <div class="truncate !flex">
+                  <span class="text-xs" style="color: #86909c">描述</span>
+                  <Tooltip :title="item?.additionalInfo?.description">
+                    <span style="color: #4e5969" class="truncate ml-7.5 text-xs">
+                      {{ item?.additionalInfo?.description }}
+                    </span>
+                  </Tooltip>
+                </div>
+              </div>
+            </template>
+          </Card.Meta>
+        </Card>
+      </template>
+    </BasicCardList>
+    <EdgeInstanceFormDrawer
+      @register="registerEdgeInstanceFormDrawer"
+      @success="handleEventIsSuccess"
+    />
+  </section>
+</template>
+
+<style lang="less" scoped>
+  .profile-list:deep(.ant-image-img) {
+    @apply !w-full !h-full;
+  }
+
+  .profile-list:deep(.ant-card-body) {
+    @apply !p-4;
+  }
+
+  :deep(.ant-card-body) {
+    padding: 12px;
+  }
+</style>

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EdgeDeviceBasicInfo } from '../EdgeDeviceBasicInfo';
+  import { EdgeDeviceTabInfo } from '../EdgeDeviceTabInfo';
+  import { EdgeDeviceItemType, EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { infoEdgeDevice } from '/@/api/edgeManage/edgeInstance';
+  import { useRoute } from 'vue-router';
+  import { PageWrapper } from '/@/components/Page';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  const emits = defineEmits(['register', 'success']);
+
+  defineProps({
+    recordEdgeInstanceData: {
+      type: Object as PropType<EdgeInstanceItemType>,
+      default: () => {},
+    },
+  });
+
+  const route = useRoute();
+
+  const go = useGo();
+
+  const deviceId = ref(route.params?.id);
+
+  const edgeId = ref(route.params?.edgeId as string);
+
+  const recordData = ref<EdgeDeviceItemType>();
+
+  const handleEventIsSuccess = () => {
+    emits('success');
+  };
+
+  infoEdgeDevice(deviceId.value as string).then((res) => {
+    recordData.value = res;
+  });
+
+  function goBack() {
+    go('/edge/edge_detail/' + edgeId.value);
+  }
+</script>
+
+<template>
+  <PageWrapper :title="`边缘设备详情`" contentBackground @back="goBack">
+    <!-- 基础信息 -->
+    <div class="m-4">
+      <EdgeDeviceBasicInfo
+        :recordData="recordData"
+        :edgeId="edgeId"
+        @success="handleEventIsSuccess"
+      />
+    </div>
+    <!-- Tab信息 -->
+    <div>
+      <EdgeDeviceTabInfo v-if="recordData" :recordData="recordData" />
+    </div>
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped></style>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { Tag, Tooltip } from 'ant-design-vue';
+import { h } from 'vue';
+import { transformTime } from '/@/hooks/web/useDateToLocaleString';
+import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import { handeleCopy } from '/@/views/device/profiles/step/topic';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '设备状态',
+    dataIndex: 'deviceState',
+    width: 100,
+    customRender: ({ record }) => {
+      const color =
+        record.deviceState == DeviceState.INACTIVE
+          ? 'warning'
+          : record.deviceState == DeviceState.ONLINE
+          ? 'success'
+          : 'error';
+      const text =
+        record.deviceState == DeviceState.INACTIVE
+          ? '待激活'
+          : record.deviceState == DeviceState.ONLINE
+          ? '在线'
+          : '离线';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+  {
+    dataIndex: 'name',
+    title: '别名/设备名称',
+    width: 210,
+    slots: { customRender: 'name', title: 'deviceTitle' },
+    customRender: ({ record }) => {
+      return h('div', { style: 'display:flex;flex-direction:column' }, [
+        record.alias &&
+          h(
+            'div',
+            {
+              class: 'cursor-pointer truncate',
+            },
+            h(
+              Tooltip,
+              {
+                placement: 'topLeft',
+                title: `${record.alias}`,
+              },
+              () => `${record.alias}`
+            )
+          ),
+        h(
+          'div',
+          {
+            class: 'cursor-pointer text-blue-500 truncate',
+            onClick: () => {
+              handeleCopy(`${record.name}`);
+            },
+          },
+          h(
+            Tooltip,
+            {
+              placement: 'topLeft',
+              title: `${record.name}`,
+            },
+            () => `${record.name}`
+          )
+        ),
+      ]);
+    },
+  },
+  {
+    title: '所属产品',
+    width: 160,
+    dataIndex: 'deviceProfileName',
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationDTO.name',
+    width: 160,
+  },
+  {
+    title: '设备类型',
+    width: 100,
+    dataIndex: 'deviceType',
+    customRender: ({ record }) => {
+      const color = 'success';
+      const text =
+        record.deviceType === DeviceTypeEnum.GATEWAY
+          ? '网关设备'
+          : record.deviceType === DeviceTypeEnum.DIRECT_CONNECTION
+          ? '直连设备'
+          : '网关子设备';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+  {
+    title: '创建时间',
+    width: 120,
+    dataIndex: 'createdTime',
+    format: (_text: string, record: Recordable) => {
+      return transformTime(record.createdTime);
+    },
+  },
+];
+
+// 表格查询表单
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'textSearch',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入设备名称',
+    },
+  },
+];

+export { default as EdgeDevice } from './index.vue';
+export { default as EdgeDeviceDetail } from './EdgeDeviceDetailDrawer.vue';

+<script lang="ts" setup>
+  import { CSSProperties, h, ref } from 'vue';
+  import { EdgeDeviceItemType, EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { columns, searchFormSchema } from './config';
+  import { edgeDeviceDeleteDistribution, edgeDevicePage } from '/@/api/edgeManage/edgeInstance';
+  import { useModal } from '/@/components/Modal';
+  import { EdgeDeviceDistribution } from '../EdgeDeviceDistribution';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useRoute } from 'vue-router';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { Badge } from 'ant-design-vue';
+  import Icon from '/@/components/Icon';
+
+  defineEmits(['register']);
+
+  defineProps({
+    recordData: {
+      type: Object as PropType<EdgeInstanceItemType>,
+      default: () => {},
+    },
+  });
+
+  const route = useRoute();
+
+  const edgeId = ref(route.params?.id as string);
+
+  const go = useGo();
+
+  const { createMessage } = useMessage();
+
+  const [registerEdgeDeviceDistributionModal, { openModal }] = useModal();
+
+  const handleEventIsDistribution = () => {
+    openModal(true, {
+      record: 1,
+    });
+  };
+
+  const handleEventIsCancelDistribution = async (record: EdgeDeviceItemType) => {
+    await edgeDeviceDeleteDistribution(edgeId.value as string, record.id.id);
+    createMessage.success('取消分配成功');
+    reload();
+  };
+
+  const AlarmDetailActionButton = ({ hasAlarm }: { hasAlarm?: boolean }) =>
+    h(
+      Badge,
+      { offset: [0, -5] },
+      {
+        default: () => h('span', { style: { color: '#377dff' } }, '详情'),
+        count: () =>
+          h(
+            'div',
+            {
+              style: {
+                visibility: hasAlarm ? 'visible' : 'hidden',
+                width: '14px',
+                height: '14px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: '1px solid #f46161',
+                borderRadius: '50%',
+              } as CSSProperties,
+            },
+            h(Icon, { icon: 'mdi:bell-warning', color: '#f46161', size: 12 })
+          ),
+      }
+    );
+
+  const [registerTable, { reload }] = useTable({
+    title: '边缘设备',
+    columns,
+    api: async ({ page, pageSize, textSearch }) => {
+      const res = await edgeDevicePage(
+        {
+          page: page - 1 < 0 ? 0 : page - 1,
+          pageSize,
+          textSearch,
+          sortProperty: 'createdTime',
+          sortOrder: 'DESC',
+        },
+        edgeId.value as string
+      );
+      return {
+        total: res?.totalElements,
+        items: res?.data,
+      };
+    },
+    formConfig: {
+      labelWidth: 100,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'name',
+    actionColumn: {
+      width: 140,
+      title: '操作',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const handleEventIsSuccess = () => reload();
+
+  function handleGoDeviceDetail(record: Recordable) {
+    go(`/edge/edge_device/edge_device_detail/${record?.id?.id}/${edgeId.value}`);
+  }
+</script>
+
+<template>
+  <BasicTable :clickToRowSelect="false" @register="registerTable">
+    <template #toolbar>
+      <a-button type="primary" @click="handleEventIsDistribution"> 分配设备 </a-button>
+    </template>
+    <template #action="{ record }">
+      <TableAction
+        :actions="[
+          {
+            // label: '详情',
+            label: AlarmDetailActionButton({ hasAlarm: !!record.alarmStatus }),
+            icon: 'ant-design:eye-outlined',
+            onClick: handleGoDeviceDetail.bind(null, record),
+          },
+          {
+            label: '取消分配',
+            icon: 'mdi:account-arrow-left',
+            onClick: handleEventIsCancelDistribution.bind(null, record),
+          },
+        ]"
+      />
+    </template>
+  </BasicTable>
+  <EdgeDeviceDistribution
+    @register="registerEdgeDeviceDistributionModal"
+    :edgeId="edgeId"
+    @success="handleEventIsSuccess"
+  />
+</template>
+
+<style lang="less" scoped></style>

+import { findDictItemByCode } from '/@/api/system/dict';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { AlarmStatus } from '/@/enums/alarmEnum';
+import { alarmLevel } from '/@/views/device/list/config/detail.config';
+import { Tag } from 'ant-design-vue';
+import { h } from 'vue';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '告警状态',
+    dataIndex: 'status',
+    customRender({ record }: { record }) {
+      const flag = !!record.cleared;
+      return h(Tag, { color: flag ? 'green' : 'red' }, () => (flag ? '清除' : '激活'));
+    },
+    width: 90,
+  },
+  {
+    title: '告警设备',
+    dataIndex: 'deviceName',
+    customRender: ({ record }) => {
+      const { deviceAlias, deviceName } = record || {};
+      return deviceAlias || deviceName;
+    },
+  },
+  {
+    title: '告警场景',
+    dataIndex: 'type',
+  },
+  {
+    title: '告警级别',
+    dataIndex: 'severity',
+    format: (text) => alarmLevel(text),
+  },
+  {
+    title: '告警时间',
+    dataIndex: 'createdTime',
+  },
+  {
+    title: '告警详情',
+    dataIndex: 'details',
+    slots: { customRender: 'details' },
+  },
+];
+
+// 表格查询表单
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'status',
+    label: '告警/确认状态',
+    component: 'Cascader',
+    helpMessage: [
+      '激活未确认: 可以处理，清除',
+      '激活已确认: 只可清除，已经处理',
+      '清除未确认: 只可处理，已经清除',
+      '清除已确认: 不需要做处理和清除',
+    ],
+    colProps: { span: 6 },
+    componentProps: {
+      popupClassName: 'alarm-stauts-cascader',
+      options: [
+        {
+          value: '0',
+          label: '清除',
+          children: [
+            {
+              value: AlarmStatus.CLEARED_UN_ACK,
+              label: '清除未确认',
+            },
+            {
+              value: AlarmStatus.CLEARED_ACK,
+              label: '清除已确认',
+            },
+          ],
+        },
+        {
+          value: '1',
+          label: '激活',
+          children: [
+            {
+              value: AlarmStatus.ACTIVE_UN_ACK,
+              label: '激活未确认',
+            },
+            {
+              value: AlarmStatus.ACTIVE_ACK,
+              label: '激活已确认',
+            },
+          ],
+        },
+      ],
+      placeholder: '请选择告警/确认状态',
+    },
+  },
+  {
+    field: 'severity',
+    label: '告警级别',
+    component: 'ApiSelect',
+    colProps: { span: 6 },
+    componentProps: {
+      placeholder: '请选择告警级别',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'severity_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+];

+export { default as EdgeDeviceAlarm } from './index.vue';

+<script lang="ts" setup>
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { columns, searchFormSchema } from './config';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { Input, Button } from 'ant-design-vue';
+  import { ref, computed, nextTick } from 'vue';
+  import { EyeOutlined } from '@ant-design/icons-vue';
+  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { getDeviceAlarm, doBatchAckAlarm, doBatchClearAlarm } from '/@/api/device/deviceManager';
+  import { AlarmLogItem } from '/@/api/device/model/deviceConfigModel';
+  import { AlarmStatus } from '/@/enums/alarmEnum';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getDeviceDetail } from '/@/api/device/deviceManager';
+  import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
+  import {
+    operationBoolean,
+    operationNumber_OR_TIME,
+    operationString,
+  } from '/@/views/rule/linkedge/config/formatData';
+  import { clearOrAckAlarm } from '/@/api/device/deviceManager';
+
+  const props = defineProps({
+    recordData: {
+      type: Object as PropType<EdgeDeviceItemType>,
+      default: () => {},
+    },
+  });
+
+  defineEmits(['register']);
+
+  const outputData = ref<string>();
+
+  const { createMessage } = useMessage();
+
+  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, getRowSelection }] =
+    useTable({
+      columns,
+      api: getDeviceAlarm,
+      beforeFetch: (params) => {
+        const { status } = params;
+        const obj = {
+          ...params,
+          deviceId: props?.recordData?.id?.id,
+          ...{
+            status: status ? status.at(-1) : null,
+          },
+        };
+        return obj;
+      },
+      formConfig: {
+        labelWidth: 130,
+        schemas: searchFormSchema,
+      },
+      useSearchForm: true,
+      showIndexColumn: false,
+      clickToRowSelect: false,
+      showTableSetting: true,
+      bordered: true,
+      rowKey: 'id',
+      rowSelection: {
+        type: 'checkbox',
+        getCheckboxProps: (record: AlarmLogItem) => {
+          return {
+            disabled: record.status === AlarmStatus.CLEARED_ACK,
+          };
+        },
+      },
+      actionColumn: {
+        title: '操作',
+        slots: { customRender: 'action' },
+        fixed: 'right',
+      },
+    });
+
+  const [registerModal, { openModal, closeModal }] = useModal();
+
+  const findName = (item: Recordable, curr: Recordable) => {
+    return item.attribute.find((item) => item.identifier === curr?.key)?.name;
+  };
+
+  const findLogin = (curr: Recordable) => {
+    return [...operationNumber_OR_TIME, ...operationString, ...operationBoolean].find(
+      (item) => item.value === curr?.logic
+    )?.symbol;
+  };
+
+  const findAttribute = (item: Recordable, curr: Recordable) => {
+    item.attribute.find((findItem) => findItem.identifier === curr?.key);
+  };
+
+  const findValue = (item: Recordable, curr: Recordable) => {
+    return {
+      ['触发属性']: findName(item, curr),
+      ['触发条件']: `${findLogin(curr)}${curr?.logicValue}`,
+      ['触发值']: `${curr?.realValue}${
+        (findAttribute(item, curr) as any)?.detail?.dataType?.specs?.unit?.key ?? ''
+      }`,
+    };
+  };
+
+  const handleAlarmText = (text: string) => (text === 'triggerData' ? '触发器' : '执行条件');
+
+  const handleViewDetail = async (record: Recordable) => {
+    await nextTick();
+    const { details } = record;
+    if (!details) return;
+    const deviceIdKeys = Object.keys(details);
+    const dataFormat = await handleAlarmDetailFormat(deviceIdKeys);
+    const mapDataFormat = deviceIdKeys.map((deviceKey: string) => {
+      const findDataFormat = dataFormat.find(
+        (dataItem: Recordable) => dataItem.tbDeviceId === deviceKey
+      );
+      const dataKeys = Object.keys(details[deviceKey]);
+      const data: any = dataKeys.map((dataItem: string) => {
+        if (dataItem !== 'triggerData' && dataItem !== 'conditionData') {
+          return findValue(findDataFormat, details[deviceKey]);
+        } else {
+          return {
+            [handleAlarmText(dataItem)]: findValue(findDataFormat, details[deviceKey][dataItem]),
+          };
+        }
+      });
+      const objectDataFormat = data.reduce((acc: Recordable, curr: Recordable) => {
+        return {
+          ...acc,
+          ...curr,
+        };
+      });
+      return {
+        [findDataFormat.name]: objectDataFormat,
+      };
+    });
+    const objectDataFormats = mapDataFormat.reduce((acc: Recordable, curr: Recordable) => {
+      return {
+        ...acc,
+        ...curr,
+      };
+    });
+    outputData.value = JSON.stringify(objectDataFormats, null, 2);
+    openModal(true);
+  };
+
+  const handleAlarmDetailFormat = async (keys: string[]) => {
+    const temp: Recordable = [];
+    for (let item of keys) {
+      if (item === 'key' || item === 'data') return []; //旧数据则终止
+      const deviceDetailRes = await getDeviceDetail(item);
+      const { deviceProfileId } = deviceDetailRes;
+      if (!deviceProfileId) return [];
+      const attributeRes = await getAttribute(deviceProfileId);
+      const dataFormat: Recordable = handleDataFormat(deviceDetailRes, attributeRes);
+      temp.push(dataFormat);
+    }
+    return temp;
+  };
+
+  const handleDataFormat = (deviceDetail: Recordable, attributes: Recordable) => {
+    const { name, tbDeviceId, alias } = deviceDetail;
+    const attribute = attributes.map((item) => ({
+      identifier: item.identifier,
+      name: item.name,
+      detail: item.detail,
+    }));
+    return {
+      name: alias || name,
+      tbDeviceId,
+      attribute,
+    };
+  };
+
+  const handleEventIsDone = async (record: Recordable) => {
+    if (!record.id) return;
+    await clearOrAckAlarm(record.id, false);
+    createMessage.success('操作成功');
+    reload();
+  };
+
+  const handleEventIsClear = async (record: Recordable) => {
+    if (!record.id) return;
+    await clearOrAckAlarm(record.id, true);
+    createMessage.success('操作成功');
+    reload();
+  };
+
+  const getCanBatchClear = computed(() => {
+    const rowSelection = getRowSelection();
+    const getRows: AlarmLogItem[] = getSelectRows();
+    return !rowSelection.selectedRowKeys?.length || !getRows.every((item) => !item.cleared);
+  });
+
+  const getCanBatchAck = computed(() => {
+    const rowSelection = getRowSelection();
+    const getRows: AlarmLogItem[] = getSelectRows();
+    return !rowSelection.selectedRowKeys?.length || !getRows.every((item) => !item.acknowledged);
+  });
+
+  const handleBatchClear = async () => {
+    const ids = getSelectRows<AlarmLogItem>().map((item) => item.id);
+    if (!ids.length) return;
+    await doBatchClearAlarm(ids);
+    createMessage.success('操作成功');
+    clearSelectedRowKeys();
+    reload();
+  };
+
+  const handleBatchAck = async () => {
+    const ids = getSelectRows<AlarmLogItem>().map((item) => item.id);
+    if (!ids.length) return;
+    await doBatchAckAlarm(ids);
+    createMessage.success('操作成功');
+    clearSelectedRowKeys();
+    reload();
+  };
+</script>
+
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #details="{ record }">
+        <span class="cursor-pointer text-blue-500" @click="handleViewDetail(record)">
+          <EyeOutlined class="svg:text-blue-500" />
+          <span class="ml-2">查看告警详情</span>
+        </span>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '处理',
+              icon: 'ant-design:edit-outlined',
+              onClick: handleEventIsDone.bind(null, record),
+              ifShow: !record.acknowledged,
+            },
+            {
+              label: '清除',
+              icon: 'ant-design:close-circle-outlined',
+              onClick: handleEventIsClear.bind(null, record),
+              ifShow: !record.cleared,
+            },
+          ]"
+        />
+      </template>
+      <template #toolbar>
+        <a-button danger :disabled="getCanBatchClear" @click="handleBatchClear">
+          批量清除
+        </a-button>
+        <Button @click="handleBatchAck" type="primary" :disabled="getCanBatchAck">
+          <span>批量处理</span>
+        </Button>
+      </template>
+    </BasicTable>
+    <BasicModal title="告警详情" @register="registerModal" @ok="closeModal">
+      <Input.TextArea v-model:value="outputData" :autosize="true" />
+    </BasicModal>
+  </div>
+</template>
+
+<style>
+  .alarm-stauts-cascader {
+    .ant-cascader-menu {
+      height: fit-content;
+    }
+  }
+</style>

+import { Tag, Tooltip } from 'ant-design-vue';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import { DescItem } from '/@/components/Description/src/typing';
+import { formatToDateTime } from '/@/utils/dateUtil';
+import { CSSProperties, h } from 'vue';
+
+export const descSchema = (): DescItem[] => {
+  return [
+    {
+      field: 'name',
+      label: '设备名称',
+      render(val, data: Record<'alias' | 'name', string>) {
+        return h(Tooltip, { title: data.alias || val }, () =>
+          h('span', { style: { cursor: 'pointer' } as CSSProperties }, data.alias || val)
+        );
+      },
+    },
+    {
+      field: 'label',
+      label: '设备标签',
+      render: (text) => {
+        return text
+          ? h(
+              Tag,
+              {
+                color: '#00B42A',
+              },
+              text
+            )
+          : '';
+      },
+    },
+    {
+      field: 'gatewayName',
+      label: '所属网关',
+      render: (text) => {
+        return text
+          ? h(
+              Tag,
+              {
+                color: '#00B42A',
+              },
+              text
+            )
+          : '';
+      },
+    },
+    {
+      field: 'deviceProfileName',
+      label: '产品',
+    },
+    {
+      field: 'deviceType',
+      label: '设备类型',
+      render: (_, data) => {
+        const text =
+          data.deviceType === DeviceTypeEnum.GATEWAY
+            ? '网关设备'
+            : data.deviceType === DeviceTypeEnum.DIRECT_CONNECTION
+            ? '直连设备'
+            : '网关子设备';
+        return h(
+          'span',
+          {
+            style: { cursor: 'pointer' },
+          },
+          text
+        );
+      },
+    },
+    {
+      field: 'createdTime',
+      label: '创建时间',
+      render: (_, data) => {
+        return formatToDateTime(data.createdTime, 'YYYY-MM-DD HH:mm:ss');
+      },
+    },
+    {
+      field: 'additionalInfo.description',
+      label: '描述',
+    },
+  ];
+};

+export { default as EdgeDeviceBasicInfo } from './index.vue';

+<script lang="ts" setup>
+  import { Description, useDescription } from '/@/components/Description';
+  import { descSchema } from './config';
+  import type { PropType } from 'vue';
+  import { unref } from 'vue';
+  import edgeDevicePng from '/@/assets/images/edgeDevice.png';
+  import { Image, Popconfirm } from 'ant-design-vue';
+  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { getDeviceToken } from '/@/api/device/deviceManager';
+  import { useClipboard } from '@vueuse/core';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import ManageDeviceTokenModal from '/@/views/device/list/cpns/modal/ManageDeviceTokenModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { edgeDeviceDeleteDistribution } from '/@/api/edgeManage/edgeInstance';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  const emits = defineEmits(['success']);
+
+  const props = defineProps({
+    recordData: {
+      type: Object as PropType<EdgeDeviceItemType>,
+      default: () => {},
+    },
+    edgeId: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const CS = {
+    'word-break': 'break-all',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    '-webkit-line-clamp': 2,
+    '-webkit-box-orient': 'vertical',
+  };
+
+  const [register] = useDescription({
+    layout: 'vertical',
+    schema: descSchema(),
+    column: 5,
+  });
+
+  const { createMessage } = useMessage();
+
+  const go = useGo();
+
+  const { copied, copy } = useClipboard({ legacy: true });
+
+  const handleEventIsCopyDeviceToken = async () => {
+    if (!props?.recordData?.id?.id) return;
+    const token = await getDeviceToken(props?.recordData?.id?.id);
+    if (token.credentialsType === 'ACCESS_TOKEN') {
+      await copy(token.credentialsId);
+    } else {
+      await copy(token.credentialsValue);
+    }
+    if (unref(copied)) {
+      createMessage.success('复制成功');
+    }
+  };
+
+  const [registerModal, { openModal }] = useModal();
+
+  const handleEventIsManageDeviceToken = async () => {
+    if (!props?.recordData?.id?.id) return;
+    const token = await getDeviceToken(props?.recordData?.id?.id);
+    openModal(true, token);
+  };
+
+  const handleEventIsCancelDistribution = async () => {
+    await edgeDeviceDeleteDistribution(props.edgeId, props.recordData.id?.id);
+    createMessage.success('取消分配成功');
+    emits('success');
+    goBack();
+  };
+
+  function goBack() {
+    go('/edge/edge_device/' + props.edgeId);
+  }
+</script>
+
+<template>
+  <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
+    <a-col class="gutter-row" :span="3">
+      <div class="!flex flex-col justify-between items-center">
+        <div><Image :src="recordData?.deviceInfo?.avatar || edgeDevicePng" :width="180" /></div>
+        <div class="!flex flex-col mt-3">
+          <span style="color: #1d2129" class="font-bold">{{
+            recordData?.alias ? recordData?.alias : recordData?.name
+          }}</span>
+          <span style="color: #3d3d3d">边缘设备详情</span>
+        </div>
+      </div>
+    </a-col>
+    <a-col class="gutter-row" :span="21">
+      <div class="!flex flex-col justify-between">
+        <Description v-if="recordData" @register="register" :data="recordData" :contentStyle="CS" />
+        <div class="!flex mt-3">
+          <a-button type="primary" @click="handleEventIsCopyDeviceToken">复制访问令牌</a-button>
+          <a-button class="ml-4" type="primary" @click="handleEventIsManageDeviceToken"
+            >管理凭证</a-button
+          >
+          <Popconfirm
+            title="您是否要取消分配边缘"
+            ok-text="是"
+            cancel-text="否"
+            @confirm="handleEventIsCancelDistribution"
+          >
+            <a-button class="ml-4" type="primary">取消分配边缘</a-button>
+          </Popconfirm>
+        </div>
+      </div>
+    </a-col>
+  </a-row>
+  <ManageDeviceTokenModal @register="registerModal" />
+</template>
+
+<style lang="less" scoped>
+  :deep(.ant-image-img) {
+    height: 157px;
+  }
+</style>

+import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+import { getModelServices } from '/@/api/device/modelOfMatter';
+import { FormProps, FormSchema, useComponentRegister } from '/@/components/Form';
+import { validateTCPCustomCommand } from '/@/components/Form/src/components/ThingsModelForm';
+import { JSONEditor, JSONEditorValidator } from '/@/components/CodeEditor';
+import {
+  TransportTypeEnum,
+  CommandTypeNameEnum,
+  CommandTypeEnum,
+  ServiceCallTypeEnum,
+  CommandDeliveryWayEnum,
+  CommandDeliveryWayNameEnum,
+  TCPProtocolTypeEnum,
+} from '/@/enums/deviceEnum';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+
+export interface CommandDeliveryFormFieldType {
+  [CommandFieldsEnum.COMMAND_TYPE]: CommandTypeEnum;
+  [CommandFieldsEnum.TCP_COMMAND_VALUE]?: string;
+  [CommandFieldsEnum.COMAND_VALUE]?: string;
+  [CommandFieldsEnum.SERVICE]?: string;
+  [CommandFieldsEnum.MODEL_INPUT]?: ModelOfMatterParams;
+  [CommandFieldsEnum.CALL_TYPE]: CommandDeliveryWayEnum;
+}
+
+export enum CommandFieldsEnum {
+  COMMAND_TYPE = 'commandType',
+  TCP_COMMAND_VALUE = 'tcpCommandValue',
+  COMAND_VALUE = 'commandValue',
+  SERVICE = 'service',
+  MODEL_INPUT = 'modelInput',
+  CALL_TYPE = 'callType',
+
+  SERVICE_COMMAND = 'serviceCommand',
+
+  SERVICE_OBJECT_MODEL = 'serviceObjectModel',
+}
+
+useComponentRegister('JSONEditor', JSONEditor);
+
+export const CommandSchemas = (deviceRecord: EdgeDeviceItemType): FormSchema[] => {
+  const { deviceData, deviceProfileId, deviceType } = deviceRecord;
+
+  const isTCPTransport = deviceData.transportConfiguration.type === TransportTypeEnum.TCP;
+
+  const isTCPModbus =
+    isTCPTransport &&
+    deviceRecord.deviceProfile?.profileData?.transportConfiguration?.protocol ===
+      TCPProtocolTypeEnum.MODBUS_RTU;
+
+  return [
+    {
+      field: CommandFieldsEnum.COMMAND_TYPE,
+      component: 'RadioGroup',
+      label: '下发类型',
+      defaultValue: CommandTypeEnum.CUSTOM,
+      required: true,
+      componentProps: ({ formActionType }) => {
+        const { setFieldsValue } = formActionType;
+
+        const getOptions = () => {
+          const options = [{ label: CommandTypeNameEnum.CUSTOM, value: CommandTypeEnum.CUSTOM }];
+
+          if (isTCPModbus || (isTCPTransport && deviceType === DeviceTypeEnum.SENSOR))
+            return options;
+
+          options.push({ label: CommandTypeNameEnum.SERVICE, value: CommandTypeEnum.SERVICE });
+
+          return options;
+        };
+        return {
+          options: getOptions(),
+          onChange() {
+            setFieldsValue({
+              [CommandFieldsEnum.SERVICE]: null,
+              [CommandFieldsEnum.MODEL_INPUT]: null,
+              [CommandFieldsEnum.COMAND_VALUE]: null,
+              [CommandFieldsEnum.TCP_COMMAND_VALUE]: null,
+            });
+          },
+        };
+      },
+    },
+    {
+      field: CommandFieldsEnum.CALL_TYPE,
+      component: 'RadioGroup',
+      label: '单向/双向',
+      required: true,
+      defaultValue: CommandDeliveryWayEnum.ONE_WAY,
+      ifShow: ({ model }) => model[CommandFieldsEnum.COMMAND_TYPE] === CommandTypeEnum.CUSTOM,
+      componentProps: {
+        options: Object.keys(CommandDeliveryWayEnum).map((key) => ({
+          label: CommandDeliveryWayNameEnum[key],
+          value: CommandDeliveryWayEnum[key],
+        })),
+      },
+    },
+    {
+      field: CommandFieldsEnum.TCP_COMMAND_VALUE,
+      label: '命令',
+      required: true,
+      ifShow: ({ model }) =>
+        deviceData.transportConfiguration.type === TransportTypeEnum.TCP &&
+        model[CommandFieldsEnum.COMMAND_TYPE] === CommandTypeEnum.CUSTOM,
+      component: 'Input',
+      rules: [{ validator: validateTCPCustomCommand }],
+      componentProps: {
+        placeholder: '请输入命令',
+      },
+    },
+    {
+      field: CommandFieldsEnum.COMAND_VALUE,
+      label: '命令',
+      component: 'JSONEditor',
+      colProps: { span: 20 },
+      changeEvent: 'update:value',
+      valueField: 'value',
+      required: true,
+      rules: JSONEditorValidator(),
+      ifShow: ({ model }) =>
+        deviceData.transportConfiguration.type !== TransportTypeEnum.TCP &&
+        model[CommandFieldsEnum.COMMAND_TYPE] === CommandTypeEnum.CUSTOM,
+      componentProps: {
+        height: 250,
+      },
+    },
+    {
+      field: CommandFieldsEnum.SERVICE,
+      label: '服务',
+      component: 'ApiSelect',
+      required: true,
+      ifShow: ({ model }) => model[CommandFieldsEnum.COMMAND_TYPE] !== CommandTypeEnum.CUSTOM,
+      rules: [{ required: true, message: '请选择服务' }],
+      componentProps: ({ formActionType }) => {
+        const { setFieldsValue } = formActionType;
+        return {
+          api: getModelServices,
+          params: {
+            deviceProfileId: deviceProfileId.id,
+          },
+          valueField: 'identifier',
+          labelField: 'functionName',
+          getPopupContainer: () => document.body,
+          placeholder: '请选择服务',
+          onChange(
+            value: string,
+            options: ModelOfMatterParams & Record<'label' | 'value', string>
+          ) {
+            if (!value) return;
+            setFieldsValue({
+              [CommandFieldsEnum.CALL_TYPE]:
+                options.callType === ServiceCallTypeEnum.ASYNC
+                  ? CommandDeliveryWayEnum.ONE_WAY
+                  : CommandDeliveryWayEnum.TWO_WAY,
+              [CommandFieldsEnum.MODEL_INPUT]: null,
+              [CommandFieldsEnum.SERVICE_OBJECT_MODEL]: Object.assign(options, {
+                functionName: options.label,
+                identifier: options.value,
+              }),
+            });
+          },
+        };
+      },
+    },
+    {
+      field: CommandFieldsEnum.SERVICE_OBJECT_MODEL,
+      label: '服务物模型',
+      component: 'Input',
+      ifShow: false,
+    },
+    {
+      field: CommandFieldsEnum.MODEL_INPUT,
+      component: 'Input',
+      label: '输入参数',
+      changeEvent: 'update:value',
+      valueField: 'value',
+      ifShow: ({ model }) =>
+        model[CommandFieldsEnum.SERVICE] &&
+        model[CommandFieldsEnum.SERVICE_OBJECT_MODEL] &&
+        model[CommandFieldsEnum.COMMAND_TYPE] !== CommandTypeEnum.CUSTOM,
+      componentProps: {
+        formProps: {
+          wrapperCol: { span: 24 },
+        } as FormProps,
+      },
+      slot: 'serviceCommand',
+    },
+  ];
+};

+export { default as CommandDeliveryModal } from './index.vue';

+<template>
+  <BasicModal
+    title="命令下发"
+    :width="650"
+    @register="registerModal"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <BasicForm @register="registerForm">
+      <template #serviceCommand="{ field, model }">
+        <ThingsModelForm
+          :disabled="
+            deviceDetail?.deviceData?.transportConfiguration?.type === TransportTypeEnum.TCP
+          "
+          ref="thingsModelFormRef"
+          v-model:value="model[field]"
+          :key="model[CommandFieldsEnum.SERVICE_OBJECT_MODEL]?.identifier"
+          :inputData="model[CommandFieldsEnum.SERVICE_OBJECT_MODEL]?.functionJson?.inputData"
+          :transportType="deviceDetail?.deviceData?.transportConfiguration?.type"
+        />
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { nextTick, ref, unref } from 'vue';
+  import { BasicForm, ThingsModelForm, useForm } from '/@/components/Form';
+  import { CommandDeliveryFormFieldType, CommandFieldsEnum, CommandSchemas } from './config';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { CommandDeliveryWayEnum } from '/@/enums/deviceEnum';
+  import { CommandTypeEnum, RPCCommandMethodEnum, TransportTypeEnum } from '/@/enums/deviceEnum';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getDeviceActiveTime } from '/@/api/alarm/position';
+  import { RpcCommandType } from '/@/api/device/model/deviceConfigModel';
+  import { parseStringToJSON } from '/@/components/CodeEditor';
+  import { commandIssuanceApi } from '/@/api/device/deviceManager';
+  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+
+  defineEmits(['register']);
+
+  const thingsModelFormRef = ref<InstanceType<typeof ThingsModelForm>>();
+  const props = defineProps<{
+    deviceDetail: EdgeDeviceItemType;
+  }>();
+
+  const [registerModal, { setModalProps }] = useModalInner(
+    (params: ModalParamsType<EdgeDeviceItemType>) => {
+      const { record } = params;
+      setProps({
+        schemas: CommandSchemas(record),
+      });
+    }
+  );
+
+  const { createMessage } = useMessage();
+
+  const [registerForm, { setProps, getFieldsValue, validate, resetFields, clearValidate }] =
+    useForm({
+      labelWidth: 120,
+      baseColProps: { span: 20 },
+      labelAlign: 'right',
+      showSubmitButton: false,
+      showResetButton: false,
+    });
+
+  const handleCancel = async () => {
+    await resetFields();
+    await nextTick();
+    await clearValidate();
+  };
+
+  const handleValidate = async () => {
+    await validate();
+    await unref(thingsModelFormRef)?.validate?.();
+  };
+
+  const handleValidateDeviceActive = async (): Promise<boolean> => {
+    const result = await getDeviceActiveTime(unref(props.deviceDetail)!.id?.id);
+    const [firstItem] = result;
+    return !!firstItem.value;
+  };
+
+  const handleCommandParams = (
+    values: CommandDeliveryFormFieldType,
+    serviceCommand: Recordable
+  ) => {
+    const { commandType, service } = values;
+
+    const isTcpDevice =
+      unref(props.deviceDetail)?.deviceData?.transportConfiguration?.type === TransportTypeEnum.TCP;
+    if (commandType === CommandTypeEnum.CUSTOM) {
+      if (isTcpDevice) {
+        const value = values.tcpCommandValue;
+        return value?.replaceAll(/\s/g, '');
+      }
+      return parseStringToJSON(values.commandValue!).json;
+    } else {
+      if (isTcpDevice) return Reflect.get(serviceCommand, CommandFieldsEnum.SERVICE_COMMAND);
+      return {
+        [service!]: serviceCommand,
+      };
+    }
+  };
+
+  const handleOk = async () => {
+    await handleValidate();
+
+    try {
+      setModalProps({ loading: true, confirmLoading: true });
+
+      const values = getFieldsValue() as CommandDeliveryFormFieldType;
+      const { callType, commandType } = values;
+      const serviceCommand = unref(thingsModelFormRef)?.getFieldsValue() || {};
+
+      if (callType === CommandDeliveryWayEnum.TWO_WAY && !(await handleValidateDeviceActive())) {
+        createMessage.warn('当前设备不在线');
+        return;
+      }
+
+      const rpcCommands: RpcCommandType = {
+        additionalInfo: {
+          cmdType:
+            commandType === CommandTypeEnum.CUSTOM
+              ? CommandTypeEnum.CUSTOM
+              : CommandTypeEnum.SERVICE,
+        },
+        method: RPCCommandMethodEnum.THINGSKIT,
+        persistent: true,
+        params: handleCommandParams(values, serviceCommand),
+      };
+
+      await commandIssuanceApi(callType, unref(props.deviceDetail)!.id?.id, rpcCommands);
+
+      createMessage.success('命令下发成功');
+    } finally {
+      setModalProps({ loading: false, confirmLoading: false });
+    }
+  };
+</script>
+<style scoped lang="less"></style>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+import { Tag } from 'ant-design-vue';
+import { h } from 'vue';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '命令下发时间',
+    dataIndex: 'createTime',
+    format: (text) => {
+      return moment(text).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: '命令类型',
+    dataIndex: 'additionalInfo.cmdType',
+    format: (text) => {
+      return h(
+        Tag,
+        {
+          color: Number(text) === 1 ? 'green' : 'blue',
+        },
+        () => (Number(text) === 1 ? '服务' : '自定义')
+      ) as unknown as any;
+    },
+  },
+  {
+    title: '响应类型',
+    dataIndex: 'request.oneway',
+    format: (text) => {
+      return !text ? '双向' : '单向';
+    },
+  },
+  {
+    title: '命令状态',
+    dataIndex: 'status',
+    customRender: ({ text, record }) => {
+      return h(
+        Tag,
+        {
+          color:
+            text == 'EXPIRED'
+              ? 'red'
+              : text == 'DELIVERED'
+              ? 'blue'
+              : text == 'QUEUED'
+              ? '#00C9A7'
+              : text == 'TIMEOUT'
+              ? 'red'
+              : text == 'SENT'
+              ? '#00C9A7'
+              : text == 'FAILED'
+              ? 'red'
+              : text == 'SUCCESSFUL'
+              ? 'green'
+              : 'red',
+        },
+        () => record?.statusName
+      );
+    },
+  },
+  {
+    title: '响应内容',
+    dataIndex: 'response111',
+    slots: { customRender: 'responseContent' },
+  },
+  {
+    title: '命令内容',
+    dataIndex: 'request.body',
+    slots: { customRender: 'recordContent' },
+  },
+];
+
+// 表格查询表单
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'status',
+    label: '命令状态',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        {
+          label: '队列中',
+          value: 'QUEUED',
+        },
+        {
+          label: '已发送',
+          value: 'SENT',
+        },
+        {
+          label: '发送成功',
+          value: 'DELIVERED',
+        },
+
+        {
+          label: '响应成功',
+          value: 'SUCCESSFUL',
+        },
+        {
+          label: '超时',
+          value: 'TIMEOUT',
+        },
+        {
+          label: '已过期',
+          value: 'EXPIRED',
+        },
+        {
+          label: '响应失败',
+          value: 'FAILED',
+        },
+        {
+          label: '已删除',
+          value: 'DELETED',
+        },
+      ],
+      placeholder: '请选择命令状态',
+    },
+  },
+  {
+    field: 'sendTime',
+    label: '命令下发时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 10 },
+  },
+];

+export { default as EdgeDeviceCommand } from './index.vue';

+<script lang="ts" setup>
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { columns, searchFormSchema } from './config';
+  import { JsonPreview } from '/@/components/CodeEditor';
+  import { Button, Modal, Space } from 'ant-design-vue';
+  import { h } from 'vue';
+  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { deviceCommandRecordGetQuery } from '/@/api/device/deviceConfigApi';
+  import { useModal } from '/@/components/Modal';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { CommandDeliveryModal } from './CommandDeliveryModal';
+
+  const props = defineProps({
+    recordData: {
+      type: Object as PropType<EdgeDeviceItemType>,
+      default: () => {},
+    },
+  });
+
+  defineEmits(['register']);
+
+  const [registerCommandDeliverModal, { openModal }] = useModal();
+
+  const [registerTable] = useTable({
+    columns,
+    api: deviceCommandRecordGetQuery,
+    beforeFetch: (params) => {
+      return {
+        ...params,
+        tbDeviceId: props?.recordData?.id?.id,
+      };
+    },
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
+    },
+    useSearchForm: true,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+  });
+
+  const commonModalInfo = (title, value) => {
+    Modal.info({
+      title,
+      width: 600,
+      content: h(JsonPreview, { data: value }),
+    });
+  };
+
+  const handleRecordContent = (record) => {
+    if (!record?.request?.body) return;
+    if (Object.prototype.toString.call(record?.request?.body) !== '[object Object]') return;
+    const jsonParams = record?.request?.body?.params;
+    commonModalInfo('命令下发内容', jsonParams);
+  };
+
+  const handleRecordResponseContent = (record) => {
+    const jsonParams = record?.response;
+    commonModalInfo('响应内容', jsonParams);
+  };
+
+  const handleEventIsCommand = () => {
+    openModal(true, {
+      mode: DataActionModeEnum.READ,
+      record: props.recordData,
+    } as ModalParamsType<EdgeDeviceItemType>);
+  };
+</script>
+
+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
+      <template #toolbar>
+        <Space>
+          <Button type="primary" @click="handleEventIsCommand">命令下发</Button>
+        </Space>
+      </template>
+      <template #recordContent="{ record }">
+        <Button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </Button>
+      </template>
+      <template #responseContent="{ record }">
+        <div v-if="!record.request?.oneway">
+          <Button v-if="record?.response === null" type="text" class="ml-2"> 未响应 </Button>
+          <Button v-else type="link" class="ml-2" @click="handleRecordResponseContent(record)">
+            查看
+          </Button>
+        </div>
+        <div v-else>--</div>
+      </template>
+    </BasicTable>
+    <CommandDeliveryModal @register="registerCommandDeliverModal" :deviceDetail="recordData" />
+  </div>
+</template>

+export { default as EdgeDeviceDistribution } from './index.vue';

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="将设备分配给边缘"
+    :canFullscreen="false"
+    centered
+    :minHeight="300"
+    @ok="handleEventIsDistribution"
+    @cancel="handleEventIsCancel"
+    okText="分配"
+  >
+    <div class="!flex items-center gap-5">
+      <span>分配设备</span>
+      <Select
+        v-if="edgeId"
+        placeholder="请选择设备"
+        v-model:value="deviceIds"
+        class="!w-1/2"
+        :options="selectOptions"
+        v-bind="createPickerSearch()"
+        mode="multiple"
+        allowClear
+      />
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { edgeDeviceDistribution } from '/@/api/edgeManage/edgeInstance';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { onMounted, ref } from 'vue';
+  import { edgeDeviceDistributionPage } from '/@/api/edgeManage/edgeInstance';
+  import { Select } from 'ant-design-vue';
+  import { isArray } from '/@/utils/is';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+
+  const emits = defineEmits(['success', 'register']);
+
+  const { createMessage } = useMessage();
+
+  const props = defineProps({
+    edgeId: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const [registerModal, { closeModal }] = useModalInner((data) => {
+    const { _ } = data;
+    deviceIds.value = [];
+    handleGetDeviceDistributionList();
+  });
+
+  const selectOptions = ref<{ label: string; value: string }[]>([]);
+
+  const deviceIds = ref<string[]>([]);
+
+  const handleGetDeviceDistributionList = async () => {
+    const { data } = await edgeDeviceDistributionPage({ page: 0, pageSize: 50 });
+    selectOptions.value = data?.map((dataItem: Recordable) => ({
+      label: dataItem.alias || dataItem.name,
+      value: dataItem.id.id,
+    })) as { label: string; value: string }[];
+  };
+
+  onMounted(() => {
+    handleGetDeviceDistributionList();
+  });
+
+  const handleEventIsDistribution = async () => {
+    if (!props.edgeId) return;
+    if (!deviceIds.value) return createMessage.error('请选择设备');
+    if (isArray(deviceIds.value) && deviceIds.value.length === 0)
+      return createMessage.error('请选择设备');
+    for (let item of deviceIds.value) await edgeDeviceDistribution(props?.edgeId, item);
+    createMessage.success('分配成功');
+    handleEventIsCancel();
+    emits('success');
+    handleGetDeviceDistributionList();
+  };
+
+  const handleEventIsCancel = () => {
+    deviceIds.value.length = 0;
+    closeModal();
+  };
+</script>

+import moment from 'moment';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import {
+  EventType,
+  EventTypeColor,
+  EventTypeName,
+} from '/@/views/device/list/cpns/tabs/EventManage/config';
+import { Tag } from 'ant-design-vue';
+import { h } from 'vue';
+import { formatToDateTime } from '/@/utils/dateUtil';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '时间',
+    dataIndex: 'eventTime',
+    format(text) {
+      return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: '标识符',
+    dataIndex: 'eventIdentifier',
+  },
+  {
+    title: '事件名称',
+    dataIndex: 'eventName',
+  },
+  {
+    title: '事件类型',
+    dataIndex: 'eventType',
+    customRender({ text }) {
+      return h(
+        Tag,
+        {
+          color: EventTypeColor[text as EventType],
+        },
+        () => EventTypeName[text as EventType]
+      );
+    },
+  },
+  {
+    title: '输出参数',
+    dataIndex: 'outputParams',
+    slots: { customRender: 'outputParams' },
+  },
+];
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: 'eventIdentifier',
+    label: '标识符',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入标识符',
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'eventType',
+    label: '事件类型',
+    component: 'ApiSelect',
+    componentProps: {
+      placeholder: '请选择事件类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'event_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'dateRange',
+    label: '时间范围',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 10 },
+  },
+];

+export { default as EdgeDeviceEvent } from './index.vue';

+<script lang="ts" setup>
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { columns, formSchemas } from './config';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { Input } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { EventManageRequest } from '/@/api/device/model/eventManageModel';
+  import { getEventManageListRecord } from '/@/api/device/eventManage';
+  import { EyeOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps({
+    recordData: {
+      type: Object as PropType<EdgeDeviceItemType>,
+      default: () => {},
+    },
+  });
+
+  const outputData = ref<string>();
+
+  const [registerTable] = useTable({
+    columns,
+    api: getEventManageListRecord,
+    fetchSetting: {
+      totalField: 'totalElements',
+      listField: 'data',
+    },
+    beforeFetch: (params: EventManageRequest) => {
+      const page = params.page - 1 < 0 ? 0 : params.page - 1;
+      const _params = Object.keys(params)
+        .filter((key) => params[key])
+        .reduce((prev, next) => ({ ...prev, [next]: params[next] }), {});
+      return {
+        ..._params,
+        page,
+        startTime: params.startTime ? new Date(params.startTime).getTime() : params.startTime,
+        endTime: params.endTime ? new Date(params.endTime).getTime() : params.endTime,
+        tbDeviceId: props?.recordData?.id?.id,
+      };
+    },
+    formConfig: {
+      labelWidth: 80,
+      schemas: formSchemas,
+      fieldMapToTime: [['dateRange', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
+    },
+    useSearchForm: true,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+  });
+
+  const [registerModal, { openModal, closeModal }] = useModal();
+
+  const handleViewDetail = (record: Record<'eventValue', Recordable>) => {
+    outputData.value = JSON.stringify(record.eventValue, null, 2);
+    openModal(true);
+  };
+</script>
+
+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
+      <template #outputParams="{ record }">
+        <span class="cursor-pointer text-blue-500" @click="handleViewDetail(record)">
+          <EyeOutlined class="svg:text-blue-500" />
+          <span class="ml-2">详情</span>
+        </span>
+      </template>
+    </BasicTable>
+    <BasicModal title="输出参数" @register="registerModal" @ok="closeModal">
+      <Input.TextArea v-model:value="outputData" :autosize="true" />
+    </BasicModal>
+  </div>
+</template>

+<script lang="ts" setup>
+  import { computed, nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
+  import { getDeviceHistoryInfo } from '/@/api/alarm/position';
+  import { Empty, Spin } from 'ant-design-vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
+  import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
+  import {
+    defaultSchemas,
+    OrderByEnum,
+  } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
+  import TimePeriodForm from '/@/views/device/localtion/cpns/TimePeriodForm/TimePeriodForm.vue';
+  import { useGridLayout } from '/@/hooks/component/useGridLayout';
+  import { ColEx } from '/@/components/Form/src/types';
+  import { useHistoryData } from './hook/useHistoryData';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { useTable, BasicTable, BasicColumn, SorterResult } from '/@/components/Table';
+  import {
+    ModeSwitchButton,
+    TABLE_CHART_MODE_LIST,
+    EnumTableChartMode,
+  } from '/@/components/Widget';
+  import { SchemaFiled } from '/@/views/visual/palette/components/HistoryTrendModal/config';
+  import { DataTypeEnum } from '/@/enums/objectModelEnum';
+  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+
+  // interface DeviceDetail {
+  //   tbDeviceId: string;
+  //   deviceProfileId: string;
+  // }
+
+  const props = defineProps<{
+    deviceDetail: EdgeDeviceItemType;
+    attr?: string;
+  }>();
+
+  const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
+
+  const chartRef = ref();
+
+  const loading = ref(false);
+
+  const isNull = ref(false);
+
+  const historyData = ref<{ ts: number; value: string; name: string }[]>([]);
+
+  const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
+    useHistoryData();
+
+  const getIdentifierNameMapping = computed(() => {
+    const mapping = {};
+    unref(deviceAttrs).forEach((item) => {
+      const { identifier, name } = item;
+      mapping[identifier] = name;
+    });
+    return mapping;
+  });
+
+  function hasDeviceAttr() {
+    if (!unref(deviceAttrs).length) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  const sortOrder = ref<any>('descend');
+  const columns = computed<BasicColumn[]>(() => {
+    return [
+      {
+        title: '属性',
+        dataIndex: 'name',
+        format: (text) => {
+          return unref(getIdentifierNameMapping)[text];
+        },
+      },
+      {
+        title: '值',
+        dataIndex: 'value',
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'ts',
+        format: (val) => {
+          return formatToDateTime(val, 'YYYY-MM-DD HH:mm:ss');
+        },
+        sorter: true,
+        sortOrder: unref(sortOrder),
+        sortDirections: ['descend', 'ascend', 'descend'],
+      },
+    ];
+  });
+
+  const [registerTable, { setColumns }] = useTable({
+    showIndexColumn: false,
+    showTableSetting: false,
+    dataSource: historyData,
+    maxHeight: 300,
+    columns: unref(columns),
+    size: 'small',
+  });
+
+  const getTableList = async (orderBy?: OrderByEnum) => {
+    // 表单验证
+    await method.validate();
+    const value = method.getFieldsValue();
+    const searchParams = getSearchParams(value);
+
+    if (!hasDeviceAttr()) return;
+    // 发送请求
+    loading.value = true;
+    const res = await getDeviceHistoryInfo(
+      {
+        ...searchParams,
+        entityId: props.deviceDetail?.id?.id,
+      },
+      orderBy
+    );
+    historyData.value = getTableHistoryData(res);
+    loading.value = false;
+  };
+
+  const handleTableChange = async (_pag, _filters, sorter: SorterResult) => {
+    sortOrder.value = sorter.order;
+    await setColumns(unref(columns));
+    if (sorter.field == 'ts') {
+      if (sorter.order == 'descend') {
+        getTableList(OrderByEnum.DESC);
+      } else {
+        getTableList(OrderByEnum.ASC);
+      }
+    }
+  };
+
+  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const [register, method] = useTimePeriodForm({
+    schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
+    baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+    async submitFunc() {
+      // 表单验证
+      await method.validate();
+      const value = method.getFieldsValue();
+      const searchParams = getSearchParams(value);
+
+      if (!hasDeviceAttr()) return;
+      // 发送请求
+      loading.value = true;
+      const res = await getDeviceHistoryInfo(
+        {
+          ...searchParams,
+          entityId: props.deviceDetail?.id?.id,
+        },
+        searchParams.orderBy as OrderByEnum
+      );
+      historyData.value = getTableHistoryData(res);
+      loading.value = false;
+      // 判断数据对象是否为空
+      if (!Object.keys(res).length) {
+        isNull.value = false;
+        return;
+      } else {
+        isNull.value = true;
+      }
+
+      const selectedKeys = unref(deviceAttrs).find(
+        (item) => item.identifier === value[SchemaFiled.KEYS]
+      );
+
+      setOptions(setChartOptions(res, selectedKeys));
+    },
+  });
+
+  const getTableHistoryData = (record: Recordable<{ ts: number; value: string }[]>) => {
+    const keys = Object.keys(record);
+    const list = keys.reduce((prev, next) => {
+      const list = record[next].map((item) => {
+        return {
+          ...item,
+          name: next,
+        };
+      });
+      return [...prev, ...list];
+    }, []);
+    return list;
+  };
+
+  const getDeviceDataKey = async () => {
+    try {
+      await getDeviceAttribute(props.deviceDetail);
+      if (props.attr) {
+        method.setFieldsValue({ keys: props.attr });
+        const attrInfo = unref(deviceAttrs).find((item) => item.identifier === props.attr);
+        if (
+          [DataTypeEnum.STRING, DataTypeEnum.STRUCT].includes(
+            attrInfo?.detail.dataType.type as unknown as DataTypeEnum
+          )
+        ) {
+          mode.value = EnumTableChartMode.TABLE;
+        } else {
+          mode.value = EnumTableChartMode.CHART;
+        }
+      }
+    } catch (error) {}
+  };
+
+  const openHistoryPanel = async (orderBy = OrderByEnum.ASC) => {
+    await nextTick();
+    method.updateSchema({
+      field: 'keys',
+      componentProps: {
+        options: unref(deviceAttrs).map((item) => ({ label: item.name, value: item.identifier })),
+      },
+    });
+
+    method.setFieldsValue({
+      [SchemaFiled.START_TS]: 1 * 24 * 60 * 60 * 1000,
+      [SchemaFiled.LIMIT]: 7,
+      [SchemaFiled.AGG]: AggregateDataEnum.NONE,
+    });
+
+    if (!hasDeviceAttr()) return;
+
+    const keys = props.attr ? props.attr : unref(getDeviceKeys).join();
+
+    const res = await getDeviceHistoryInfo(
+      {
+        entityId: props.deviceDetail?.id?.id,
+        keys,
+        startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
+        endTs: Date.now(),
+        agg: AggregateDataEnum.NONE,
+        limit: 7,
+      },
+      orderBy
+    );
+    historyData.value = getTableHistoryData(res);
+
+    // 判断对象是否为空
+    if (!Object.keys(res).length) {
+      isNull.value = false;
+      return;
+    } else {
+      isNull.value = true;
+    }
+    const selectedKeys = unref(deviceAttrs).find((item) => item.identifier === props.attr);
+
+    setOptions(setChartOptions(res, selectedKeys));
+  };
+
+  const switchMode = async (flag: EnumTableChartMode) => {
+    mode.value = flag;
+  };
+
+  onMounted(async () => {
+    await getDeviceDataKey();
+    await openHistoryPanel();
+  });
+
+  onUnmounted(() => {
+    getInstance()?.clear();
+  });
+</script>
+
+<template>
+  <section class="flex flex-col p-4 h-full" style="background-color: #f0f2f5">
+    <section class="bg-white p-3 mb-4">
+      <TimePeriodForm @register="register" />
+    </section>
+    <section class="bg-white p-3">
+      <Spin :spinning="loading" :absolute="true">
+        <div
+          v-show="mode === EnumTableChartMode.CHART"
+          class="flex h-70px items-center justify-end p-2"
+        >
+          <ModeSwitchButton
+            v-model:value="mode"
+            :mode="TABLE_CHART_MODE_LIST"
+            @change="switchMode"
+          />
+        </div>
+        <div
+          v-show="isNull && mode === EnumTableChartMode.CHART"
+          ref="chartRef"
+          :style="{ height: '400px', width: '100%' }"
+        >
+        </div>
+        <Empty v-show="!isNull && mode === EnumTableChartMode.CHART" />
+
+        <BasicTable
+          @change="handleTableChange"
+          v-show="mode === EnumTableChartMode.TABLE"
+          @register="registerTable"
+        >
+          <template #toolbar>
+            <div class="flex h-70px items-center justify-end p-2">
+              <ModeSwitchButton
+                v-model:value="mode"
+                :mode="TABLE_CHART_MODE_LIST"
+                @change="switchMode"
+              />
+            </div>
+          </template>
+        </BasicTable>
+      </Spin>
+    </section>
+  </section>
+</template>
+
+<style scoped></style>

+import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
+import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+import { DataType, Specs } from '/@/api/device/model/modelOfMatterModel';
+import { TCPProtocolTypeEnum, TransportTypeEnum } from '/@/enums/deviceEnum';
+import { DataTypeEnum } from '/@/enums/objectModelEnum';
+import { isArray } from '/@/utils/is';
+
+export interface StructValueItemType extends BaseAdditionalInfo {
+  name: string;
+  key: string;
+  value?: string | number | boolean;
+}
+
+export interface BaseAdditionalInfo {
+  unit?: string;
+  boolClose?: string;
+  boolOpen?: string;
+  unitName?: string;
+}
+
+export interface SocketInfoDataSourceItemType extends BaseAdditionalInfo {
+  accessMode: string;
+  key: string;
+  name: string;
+  type: DataTypeEnum;
+  detail: DeviceModelOfMatterAttrs;
+  time?: number;
+  value?: string | number | boolean | Record<string, StructValueItemType>;
+  expand?: boolean;
+  showHistoryDataButton?: boolean;
+  rawValue?: any;
+  enum?: Record<string, string>;
+}
+
+export function buildTableDataSourceByObjectModel(
+  models: DeviceModelOfMatterAttrs[],
+  deviceDetail: EdgeDeviceItemType
+): SocketInfoDataSourceItemType[] {
+  const isTCPTransportType =
+    deviceDetail.deviceData.transportConfiguration.type === TransportTypeEnum.TCP;
+
+  const isModbusDevice =
+    isTCPTransportType &&
+    deviceDetail?.deviceProfile?.profileData?.transportConfiguration?.protocol ===
+      TCPProtocolTypeEnum.MODBUS_RTU;
+
+  function getAdditionalInfoByDataType(dataType?: DataType) {
+    const { specs, specsList, type } = dataType || {};
+    if (isArray(specs)) return {};
+    const { unit, boolClose, boolOpen, unitName } = (specs as Partial<Specs>) || {};
+    const result = { unit, boolClose, boolOpen, unitName };
+    if ((type == DataTypeEnum.ENUM && specsList && specsList.length) || isModbusDevice) {
+      Reflect.set(
+        result,
+        'enum',
+        (specsList || []).reduce((prev, next) => ({ ...prev, [next.value!]: next.name }), {})
+      );
+    }
+
+    if (isModbusDevice) {
+      result.boolClose = '关';
+      result.boolOpen = '开';
+    }
+
+    return result;
+  }
+
+  return models.map((item) => {
+    const { accessMode, identifier, name, detail } = item;
+    const { dataType } = detail;
+    const { type, specs } = dataType || {};
+
+    const res = {
+      accessMode,
+      name,
+      key: identifier,
+      type: type!,
+      detail: item,
+    };
+
+    if (isArray(specs) && type === DataTypeEnum.STRUCT) {
+      const value: Record<string, StructValueItemType> = specs
+        .filter((item) => item.dataType?.type !== DataTypeEnum.STRUCT)
+        .reduce((prev, next) => {
+          const { identifier, functionName, dataType } = next;
+          return {
+            ...prev,
+            [identifier]: {
+              key: identifier!,
+              name: functionName!,
+              type: dataType?.type,
+              ...getAdditionalInfoByDataType(dataType),
+            },
+          };
+        }, {});
+
+      Object.assign(res, { value });
+    } else {
+      Object.assign(res, getAdditionalInfoByDataType(dataType));
+    }
+    return res;
+  });
+}

+export { default as ObjectModelCommandDeliveryModal } from './index.vue';

+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { useGenerateFormSchemasByObjectModel } from './useGenerateFormSchemasByObjectModel';
+  import { ModalParamsType } from '/#/utils';
+  import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { CommandTypeEnum } from '/@/enums/deviceEnum';
+  import { DataTypeEnum, FunctionTypeEnum } from '/@/enums/objectModelEnum';
+  import { useCommandDelivery } from './useCommandDelivery';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+
+  defineEmits(['register']);
+  const props = defineProps<{ deviceId: string; deviceName: string }>();
+
+  const [registerForm, { setProps, getFieldsValue, resetFields, validate }] = useForm({
+    schemas: [],
+    showActionButtonGroup: false,
+    layout: 'vertical',
+  });
+
+  const { getFormByObjectModel } = useGenerateFormSchemasByObjectModel();
+
+  const currentParams = ref<{
+    deviceDetail: EdgeDeviceItemType;
+    objectModel: DeviceModelOfMatterAttrs;
+  }>();
+
+  const [register] = useModalInner(
+    async (params: {
+      record: ModalParamsType<{
+        objectModel: DeviceModelOfMatterAttrs;
+        deviceDetail: EdgeDeviceItemType;
+      }>;
+    }) => {
+      const { record } = params;
+      currentParams.value = record as unknown as {
+        objectModel: DeviceModelOfMatterAttrs;
+        deviceDetail: EdgeDeviceItemType;
+      };
+      const { objectModel, deviceDetail } = record;
+      const schemas = getFormByObjectModel(objectModel, deviceDetail);
+      setProps({ schemas });
+      resetFields();
+    }
+  );
+
+  const { createMessage } = useMessage();
+  const loading = ref(false);
+  const handleSend = async () => {
+    try {
+      loading.value = true;
+      if (!props.deviceId) return;
+
+      await validate();
+      const { deviceDetail, objectModel } = unref(currentParams) || {};
+
+      let value = getFieldsValue();
+      if (objectModel?.detail.dataType.type !== DataTypeEnum.STRUCT) {
+        value = value[objectModel!.identifier];
+      }
+
+      const { doCommandDelivery } = useCommandDelivery();
+
+      await doCommandDelivery({
+        deviceDetail,
+        objectModel: {
+          ...(objectModel || {}),
+          functionName: objectModel!.name,
+          identifier: objectModel!.identifier,
+          functionType: FunctionTypeEnum.PROPERTIES,
+          specs: objectModel?.detail,
+        },
+        cmdType: CommandTypeEnum.ATTRIBUTE,
+        value,
+      });
+
+      createMessage.success('属性下发成功');
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>
+
+<template>
+  <BasicModal
+    title="属性下发"
+    @register="register"
+    :min-height="60"
+    ok-text="属性下发"
+    wrap-class-name="model-of-matter-send-command-modal"
+    @ok="handleSend"
+    :ok-button-props="{ loading }"
+  >
+    <BasicForm @register="registerForm" class="dynamic-form" />
+  </BasicModal>
+</template>
+
+<style lang="less">
+  .model-of-matter-send-command-modal {
+    .dynamic-form {
+      .ant-input-number {
+        @apply !w-full;
+      }
+    }
+  }
+</style>

+import { ref } from 'vue';
+import { commandIssuanceApi, getDeviceDetail } from '/@/api/device/deviceManager';
+import { RpcCommandType } from '/@/api/device/model/deviceConfigModel';
+import { DeviceProfileModel } from '/@/api/device/model/deviceModel';
+import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+import { Tsl } from '/@/api/device/model/modelOfMatterModel';
+import { getModelTsl } from '/@/api/device/modelOfMatter';
+import {
+  CommandDeliveryWayEnum,
+  CommandTypeEnum,
+  RPCCommandMethodEnum,
+  ServiceCallTypeEnum,
+  TCPProtocolTypeEnum,
+  TransportTypeEnum,
+} from '/@/enums/deviceEnum';
+import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
+import { isFunction, isNullOrUnDef } from '/@/utils/is';
+import { getDeviceActiveTime } from '/@/api/alarm/position';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useCoverModbusCommand } from './useCoverModbusCommand';
+
+interface SetupType {
+  entityId: string;
+  transportType: TransportTypeEnum;
+  isTCPModbus: boolean;
+  deviceCode: string | undefined;
+  deviceDetail: EdgeDeviceItemType;
+  objectModel: Tsl | undefined;
+  identifier: string;
+}
+
+interface DoCommandDeliverParamsType {
+  value: any;
+  deviceDetail?: EdgeDeviceItemType;
+  deviceId?: string;
+  identifier?: string;
+  objectModel?: Tsl;
+  deviceProfileId?: string;
+  deviceProfileDetail?: DeviceProfileModel;
+  way?: CommandDeliveryWayEnum;
+  cmdType?: CommandTypeEnum;
+  transportType?: TransportTypeEnum;
+  beforeFetch?: (
+    rpcCommand: RpcCommandType,
+    setup: SetupType
+  ) =>
+    | { rpcCommand: RpcCommandType; way?: CommandDeliveryWayEnum }
+    | Promise<{ rpcCommand: RpcCommandType; way?: CommandDeliveryWayEnum }>;
+}
+
+export function useCommandDelivery() {
+  const loading = ref(false);
+  async function doSetup(params: DoCommandDeliverParamsType) {
+    let { deviceDetail, identifier, deviceProfileId, objectModel, transportType } = params;
+    const { deviceId } = params;
+
+    const entityId = deviceId || deviceDetail?.id?.id;
+    if (!entityId) {
+      throw new Error('not found entityId');
+    }
+
+    identifier = identifier || objectModel?.identifier;
+
+    if (!identifier) {
+      throw new Error('not found identifier');
+    }
+
+    transportType = transportType || (deviceDetail?.transportType as TransportTypeEnum);
+
+    if (
+      !transportType ||
+      (transportType === TransportTypeEnum.TCP && !deviceDetail) ||
+      !deviceDetail?.deviceProfile
+    ) {
+      deviceDetail = (await getDeviceDetail(entityId)) as any as EdgeDeviceItemType;
+      transportType = deviceDetail?.transportType as TransportTypeEnum;
+    }
+
+    const isTCPModbus =
+      transportType === TransportTypeEnum.TCP &&
+      deviceDetail?.deviceProfile?.profileData?.transportConfiguration?.protocol ===
+        TCPProtocolTypeEnum.MODBUS_RTU;
+
+    if (isTCPModbus && !objectModel?.extensionDesc) {
+      // deviceProfileId = deviceDetail?.deviceProfileId || deviceProfileId || deviceProfileDetail?.id;
+      deviceProfileId = deviceDetail?.deviceProfileId?.id;
+      if (!deviceProfileId) {
+        throw new Error('not found deviceProfile');
+      }
+
+      const objectModels = await getModelTsl({ deviceProfileId });
+      objectModel = objectModels.find((item) => item.identifier === identifier);
+    }
+
+    const deviceCode = deviceDetail?.code;
+
+    return {
+      entityId,
+      transportType,
+      isTCPModbus,
+      deviceCode,
+      deviceDetail,
+      objectModel,
+      identifier,
+    };
+  }
+
+  async function doCommandDelivery(params: DoCommandDeliverParamsType) {
+    try {
+      loading.value = true;
+
+      const setupResult = await doSetup(params);
+
+      const { entityId, transportType, isTCPModbus, deviceCode, objectModel, identifier } =
+        setupResult;
+
+      let command = params.value;
+
+      if (transportType === TransportTypeEnum.TCP) {
+        command = params.value;
+        if (isTCPModbus) {
+          const { doCoverCommand } = useCoverModbusCommand();
+          command = await doCoverCommand(params.value, objectModel!, deviceCode, entityId);
+        }
+      } else {
+        command = {
+          [identifier]: command,
+        };
+      }
+
+      let rpcCommand: RpcCommandType = {
+        persistent: true,
+        method: RPCCommandMethodEnum.THINGSKIT,
+        additionalInfo: {
+          cmdType: params.cmdType ?? CommandTypeEnum.API,
+        },
+        params: command,
+      };
+
+      let way = params.way ?? CommandDeliveryWayEnum.ONE_WAY;
+
+      if (objectModel?.functionType === FunctionTypeEnum.SERVICE) {
+        rpcCommand.additionalInfo.cmdType = CommandTypeEnum.SERVICE;
+        way =
+          objectModel.callType === ServiceCallTypeEnum.ASYNC
+            ? CommandDeliveryWayEnum.ONE_WAY
+            : CommandDeliveryWayEnum.TWO_WAY;
+      }
+
+      const sendApi = commandIssuanceApi;
+
+      if (params.beforeFetch && isFunction(params.beforeFetch)) {
+        const { rpcCommand: _rpcCommand, way: _way } = await params.beforeFetch(
+          rpcCommand,
+          setupResult
+        );
+        !isNullOrUnDef(rpcCommand) && (rpcCommand = _rpcCommand);
+        if (_way) way = _way;
+      }
+
+      if (way === CommandDeliveryWayEnum.TWO_WAY) {
+        const result = await getDeviceActiveTime(entityId);
+        const [firsetItem] = result || [];
+
+        if (!firsetItem.value) {
+          const { createMessage } = useMessage();
+          const message = '当前设备不在线';
+          createMessage.warning(message);
+          throw Error(message);
+        }
+      }
+      await sendApi(way, entityId, rpcCommand);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return {
+    loading,
+    doCommandDelivery,
+  };
+}

+import { useParseOriginalDataType } from './useParseOriginalDataType';
+import { getDeviceHistoryInfo } from '/@/api/alarm/position';
+import { getDeviceDetail } from '/@/api/device/deviceManager';
+import { ExtensionDesc, Specs, Tsl } from '/@/api/device/model/modelOfMatterModel';
+import { genModbusCommand } from '/@/api/task';
+import { GenModbusCommandType } from '/@/api/task/model';
+import { ModbusCRCEnum, OriginalDataTypeEnum } from '/@/enums/objectModelEnum';
+import { useBaseConversion } from '/@/hooks/business/useBaseConversion';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { isNullOrUnDef } from '/@/utils/is';
+import {
+  isFloatType,
+  isNumberType,
+  useParseOperationType,
+} from '/@/views/device/profiles/components/ObjectModelForm/ExtendDesc/useParseOperationType';
+
+const getFloatPart = (number: string | number) => {
+  const isLessZero = Number(number) < 0;
+  number = number.toString();
+  const floatPartStartIndex = number.indexOf('.');
+  const value = ~floatPartStartIndex
+    ? `${isLessZero ? '-' : ''}0.${number.substring(floatPartStartIndex + 1)}`
+    : '0';
+  return Number(value);
+};
+
+function getValueFromValueRange(value: number, valueRange?: Record<'min' | 'max', number>) {
+  const { min, max } = valueRange || {};
+  if (!isNullOrUnDef(min) && value < min) return min;
+  if (!isNullOrUnDef(max) && value > max) return max;
+  return value;
+}
+
+async function getCurrentBitCommand(entityId: string, objectModel: Tsl, value: number) {
+  const deviceDetail = await getDeviceDetail(entityId);
+  const thingsModels = deviceDetail.deviceProfile.profileData.thingsModel;
+
+  const { registerAddress } = objectModel.extensionDesc || {};
+
+  const bitsModel = thingsModels?.filter(
+    (item) =>
+      item.extensionDesc?.originalDataType === OriginalDataTypeEnum.BITS &&
+      item.extensionDesc.registerAddress === registerAddress
+  );
+
+  const valuePositionMap =
+    bitsModel?.reduce((prev, next) => {
+      return { ...prev, [next.identifier]: next.extensionDesc?.bitMask };
+    }, {} as Record<string, number>) || {};
+
+  const attrKeys = Object.keys(valuePositionMap);
+
+  const latestBitsValues = await getDeviceHistoryInfo({ entityId, keys: attrKeys.join(',') });
+
+  const binaryArr = Array.from({ length: 16 }, () => 0);
+
+  for (const key of attrKeys) {
+    const index = valuePositionMap[key];
+
+    if (!isNullOrUnDef(index)) {
+      const [latest] = latestBitsValues[key];
+      const { value } = latest;
+      binaryArr[index] = Number(value);
+    }
+  }
+
+  if (objectModel.extensionDesc?.bitMask) {
+    binaryArr[objectModel.extensionDesc.bitMask] = value;
+  }
+
+  return [parseInt(binaryArr.reverse().join(''), 2)];
+}
+
+export function useCoverModbusCommand() {
+  const { createMessage } = useMessage();
+
+  const doCoverCommand = async (
+    value: number,
+    objectModel: Tsl,
+    deviceAddressCode?: string,
+    entityId?: string
+  ) => {
+    if (!deviceAddressCode) {
+      const message = '当前设备未绑定设备地址码';
+      createMessage.warning(message);
+      throw new Error(message);
+    }
+
+    const {
+      registerAddress,
+      operationType,
+      scaling,
+      originalDataType,
+      bitMask,
+      registerCount: registerNumber,
+    } = objectModel.extensionDesc as Required<ExtensionDesc>;
+
+    const { writeRegisterAddress } = useParseOperationType(operationType);
+    const { unsigned, exchangeSortFlag, registerCount } =
+      useParseOriginalDataType(originalDataType);
+
+    const params: GenModbusCommandType = {
+      crc: ModbusCRCEnum.CRC_16_LOWER,
+      registerNumber: registerCount || registerNumber,
+      deviceCode: deviceAddressCode,
+      registerAddress: parseInt(registerAddress, 16),
+      method: writeRegisterAddress!,
+      registerValues: [value],
+    };
+
+    if (exchangeSortFlag) params.hexByteOrderEnum = exchangeSortFlag;
+
+    const { getRegisterValueByOriginalDataType } = useBaseConversion();
+
+    if (isNumberType(originalDataType)) {
+      let newValue = Math.trunc(value) * scaling + getFloatPart(value) * scaling;
+
+      newValue = unsigned ? newValue : Math.abs(newValue);
+
+      newValue = getValueFromValueRange(
+        newValue,
+        (objectModel.specs?.dataType.specs as Specs).valueRange
+      );
+
+      if (!isFloatType(originalDataType) && newValue % 1 !== 0) {
+        const message = `属性下发类型必须是整数,缩放因子为${scaling}`;
+        createMessage.warning(message);
+        throw Error(message);
+      }
+
+      value = newValue;
+    }
+
+    params.registerValues =
+      originalDataType === OriginalDataTypeEnum.BITS
+        ? await getCurrentBitCommand(entityId!, objectModel, value)
+        : getRegisterValueByOriginalDataType(value, originalDataType, {
+            bitMask,
+            registerNumber,
+          });
+
+    if (!params.method) {
+      const message = '物模型操作类型无法进行写入';
+      createMessage.warning(message);
+      throw Error(message);
+    }
+
+    return await genModbusCommand(params);
+  };
+
+  return {
+    doCoverCommand,
+  };
+}

+import { unref } from 'vue';
+import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
+import { DataType, Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+import { FormSchema } from '/@/components/Form';
+import { DataTypeEnum, OriginalDataTypeEnum } from '/@/enums/objectModelEnum';
+import { TCPProtocolTypeEnum } from '/@/enums/deviceEnum';
+import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+
+export interface BasicCreateFormParams {
+  identifier: string;
+  functionName: string;
+  dataType: DataType;
+}
+
+const validateDouble = (value: number, min?: number | string, max?: number | string) => {
+  min = Number(min) ?? Number.MIN_SAFE_INTEGER;
+  max = Number(max) ?? Number.MAX_SAFE_INTEGER;
+
+  return {
+    flag: value < min || value > max,
+    message: `取值范围在${min}~${max}之间`,
+  };
+};
+
+export const useGenerateFormSchemasByObjectModel = () => {
+  const createInputNumber = ({
+    identifier,
+    functionName,
+    dataType,
+  }: BasicCreateFormParams): FormSchema => {
+    const { specs, type } = dataType;
+    const { valueRange, step } = specs! as Partial<Specs>;
+    const { max, min } = valueRange || {};
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'InputNumber',
+      rules: [
+        {
+          type: 'number',
+          trigger: 'change',
+          validator: (_rule, value) => {
+            const { flag, message } = validateDouble(value, min, max);
+            if (flag) {
+              return Promise.reject(`${functionName}${message}`);
+            }
+            return Promise.resolve(value);
+          },
+        },
+      ],
+      componentProps: {
+        max: max ?? Number.MAX_SAFE_INTEGER,
+        min: min ?? Number.MIN_SAFE_INTEGER,
+        step,
+        placeholder: `请输入${functionName}`,
+        precision: type === DataTypeEnum.NUMBER_INT ? 0 : 2,
+      },
+    } as FormSchema;
+  };
+
+  const createInput = ({
+    identifier,
+    functionName,
+    dataType,
+  }: BasicCreateFormParams): FormSchema => {
+    const { specs } = dataType;
+    const { length = 10240 } = specs! as Partial<Specs>;
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'Input',
+      rules: [
+        {
+          type: 'string',
+          trigger: 'change',
+          validator: (_rule, value) => {
+            if (value?.length > length) {
+              return Promise.reject(`${functionName}数据长度应该小于${length}`);
+            }
+            return Promise.resolve(value);
+          },
+        },
+      ],
+      componentProps: {
+        maxLength: length,
+        placeholder: `请输入${functionName}`,
+      },
+    } as FormSchema;
+  };
+
+  const createSelect = ({
+    identifier,
+    functionName,
+    dataType,
+  }: BasicCreateFormParams): FormSchema => {
+    const { specs } = dataType;
+    const { boolClose, boolOpen } = specs! as Partial<Specs>;
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: `${boolClose}-0`, value: 0 },
+          { label: `${boolOpen}-1`, value: 1 },
+        ],
+        placeholder: `请选择${functionName}`,
+        getPopupContainer: () => document.body,
+      },
+    };
+  };
+
+  const createEnumSelect = ({
+    identifier,
+    functionName,
+    dataType,
+  }: BasicCreateFormParams): FormSchema => {
+    const { specsList } = dataType;
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'Select',
+      componentProps: {
+        options: specsList?.map((item) => ({ label: item.name, value: item.value })),
+        placeholder: `请选择${functionName}`,
+        getPopupContainer: () => document.body,
+      },
+    };
+  };
+
+  const createModbusValueInput = (objectModel: DeviceModelOfMatterAttrs): FormSchema => {
+    const { identifier, name, detail, extensionDesc } = objectModel;
+
+    const { dataType } = detail || {};
+    const { specs } = dataType || {};
+    const { valueRange } = specs as Specs;
+    const { max, min } = valueRange || {};
+
+    if (extensionDesc?.originalDataType === OriginalDataTypeEnum.BOOLEAN) {
+      const options = [
+        { label: '闭合', value: parseInt('FF00', 16) },
+        { label: '断开', value: parseInt('0000', 16) },
+      ];
+
+      return {
+        field: identifier,
+        label: name,
+        component: 'Select',
+        componentProps: () => {
+          return {
+            options,
+            placeholder: `请选择${name}`,
+            getPopupContainer: () => document.body,
+          };
+        },
+      };
+    }
+
+    const isStringType = extensionDesc?.originalDataType === OriginalDataTypeEnum.STRING;
+    return {
+      field: identifier,
+      label: name,
+      component: isStringType ? 'Input' : 'InputNumber',
+      rules: isStringType
+        ? []
+        : [
+            {
+              type: 'number',
+              validator: (_rule, value) => {
+                const { flag, message } = validateDouble(value, min, max);
+                if (flag) {
+                  return Promise.reject(`${name}${message}`);
+                }
+                return Promise.resolve(value);
+              },
+            },
+          ],
+      componentProps: {
+        max: max ?? Number.MAX_SAFE_INTEGER,
+        min: min ?? Number.MIN_SAFE_INTEGER,
+        placeholder: `请输入${name}`,
+        // precision: floatType.includes(extensionDesc!.originalDataType) ? 2 : 0,
+      },
+    };
+  };
+
+  const schemaMethod = {
+    [DataTypeEnum.BOOL]: createSelect,
+    [DataTypeEnum.NUMBER_DOUBLE]: createInputNumber,
+    [DataTypeEnum.NUMBER_INT]: createInputNumber,
+    [DataTypeEnum.STRING]: createInput,
+    [DataTypeEnum.ENUM]: createEnumSelect,
+  };
+
+  const getFormByObjectModel = (
+    objectModel: DeviceModelOfMatterAttrs,
+    deviceDetail: EdgeDeviceItemType
+  ): FormSchema[] => {
+    const { name, identifier, detail } = objectModel;
+
+    const isTCPModbusProduct =
+      unref(deviceDetail).deviceProfile?.profileData?.transportConfiguration?.protocol ===
+      TCPProtocolTypeEnum.MODBUS_RTU;
+
+    const { dataType } = detail;
+    const { type } = dataType || {};
+
+    if (isTCPModbusProduct) {
+      return [createModbusValueInput(objectModel)];
+    }
+
+    if (type === DataTypeEnum.STRUCT) {
+      return (dataType?.specs as StructJSON[]).map((item) => {
+        const { functionName, identifier, dataType } = item;
+        const { type } = dataType || {};
+
+        return schemaMethod[type!]?.({ identifier, functionName, dataType });
+      });
+    }
+
+    const result = schemaMethod[type!]?.({ identifier, functionName: name, dataType: dataType! });
+    return result ? [result] : [];
+  };
+
+  return { getFormByObjectModel };
+};

+import { OriginalDataTypeEnum } from '/@/enums/objectModelEnum';
+
+export type OriginalDataTypePrefixType<S = `${OriginalDataTypeEnum}`> = S extends string
+  ? S extends `${infer D}_${string}`
+    ? D
+    : S
+  : '';
+
+function getRegisterCount(originalDataType: OriginalDataTypeEnum) {
+  switch (originalDataType) {
+    case OriginalDataTypeEnum.INT16_AB:
+    case OriginalDataTypeEnum.INT16_BA:
+    case OriginalDataTypeEnum.UINT16_AB:
+    case OriginalDataTypeEnum.UINT16_BA:
+    case OriginalDataTypeEnum.BITS:
+    case OriginalDataTypeEnum.BOOLEAN:
+      return 1;
+
+    case OriginalDataTypeEnum.INT32_AB_CD:
+    case OriginalDataTypeEnum.INT32_BA_DC:
+    case OriginalDataTypeEnum.INT32_CD_AB:
+    case OriginalDataTypeEnum.INT32_DC_BA:
+    case OriginalDataTypeEnum.UINT32_AB_CD:
+    case OriginalDataTypeEnum.UINT32_BA_DC:
+    case OriginalDataTypeEnum.UINT32_CD_AB:
+    case OriginalDataTypeEnum.UINT32_DC_BA:
+      return 2;
+
+    case OriginalDataTypeEnum.FLOAT_AB_CD:
+    case OriginalDataTypeEnum.FLOAT_BA_DC:
+    case OriginalDataTypeEnum.FLOAT_CD_AB:
+    case OriginalDataTypeEnum.FLOAT_DC_BA:
+      return 2;
+
+    case OriginalDataTypeEnum.DOUBLE:
+      return 4;
+  }
+}
+
+export function useParseOriginalDataType(originalDataType: OriginalDataTypeEnum) {
+  const signedMatchRef = /^UN/;
+
+  const splitArray = originalDataType.split('_') as [OriginalDataTypePrefixType];
+
+  const [dataType] = splitArray;
+
+  const exchangeSortFlag = splitArray.slice(1).join('_');
+
+  return {
+    registerCount: getRegisterCount(originalDataType),
+    unsigned: !signedMatchRef.test(originalDataType),
+    dataType,
+    exchangeSortFlag: exchangeSortFlag || null,
+  };
+}

+<script lang="ts">
+  import { defineComponent, reactive } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { realTimeDataColumns } from './config';
+  import { useWebSocket } from '@vueuse/core';
+  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import type { socketDataType } from './types';
+  import { useGlobSetting } from '/@/hooks/setting';
+
+  export default defineComponent({
+    name: 'RealTimeData',
+    components: {
+      BasicTable,
+    },
+    props: {
+      deviceDetail: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props) {
+      const token: string = getAuthCache(JWT_TOKEN_KEY);
+      const { socketUrl } = useGlobSetting();
+      const state: any = reactive({
+        server: `${socketUrl}${token}`,
+        sendValue: JSON.stringify({
+          attrSubCmds: [],
+          tsSubCmds: [
+            {
+              entityType: 'DEVICE',
+              entityId: props.deviceDetail.tbDeviceId,
+              scope: 'LATEST_TELEMETRY',
+              cmdId: 1,
+            },
+          ],
+          historyCmds: [],
+          entityDataCmds: [],
+          entityDataUnsubscribeCmds: [],
+          alarmDataCmds: [],
+          alarmDataUnsubscribeCmds: [],
+          entityCountCmds: [],
+          entityCountUnsubscribeCmds: [],
+        }),
+        recordList: Array<socketDataType>(),
+      });
+      const { createMessage } = useMessage();
+      const [registerTable, { getForm, setTableData }] = useTable({
+        columns: realTimeDataColumns,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        dataSource: state.recordList,
+        useSearchForm: true,
+        formConfig: {
+          labelWidth: 100,
+          schemas: [
+            {
+              field: 'key',
+              label: '键/值',
+              component: 'Input',
+              colProps: { span: 6 },
+              componentProps: {
+                placeholder: '请输入 键/值',
+                maxLength: 255,
+              },
+            },
+          ],
+          // 自定义前端查询
+          submitFunc() {
+            const { getFieldsValue } = getForm();
+            const { key } = getFieldsValue();
+            if (!key) {
+              setTableData(state.recordList);
+              return;
+            }
+            let newRecordList = [];
+            let len = state.recordList.length;
+            for (let i = 0; i < len; i++) {
+              if (
+                state.recordList[i].key.indexOf(key) >= 0 ||
+                state.recordList[i].value.indexOf(key) >= 0
+              ) {
+                newRecordList.push(state.recordList[i] as any as never);
+              }
+            }
+            setTableData(newRecordList);
+          },
+          resetFunc() {
+            setTableData(state.recordList);
+          },
+        },
+      });
+
+      const { send, close } = useWebSocket(state.server, {
+        onConnected() {
+          send(state.sendValue);
+        },
+        onMessage(_, e) {
+          const { data } = JSON.parse(e.data);
+          const newArray: socketDataType[] = [];
+          for (const key in data) {
+            const [time, value] = data[key].flat(1);
+            let obj = {
+              key,
+              time,
+              value,
+            };
+            if (state.recordList.length === 0) {
+              state.recordList.unshift(obj);
+            } else {
+              newArray.push(obj);
+            }
+          }
+          newArray.forEach((item) => {
+            let flag = false;
+            state.recordList.forEach((item1) => {
+              if (item1.key === item.key) {
+                item1.value = item.value;
+                item1.time = item.time;
+                flag = true;
+              }
+            });
+            if (!flag) {
+              state.recordList.unshift(item);
+            }
+          });
+        },
+        onDisconnected() {
+          close();
+        },
+        onError() {
+          createMessage.error('webSocket连接超时,请联系管理员');
+        },
+      });
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>
+
+<template>
+  <div style="background-color: #f0f2f5">
+    <BasicTable @register="registerTable" />
+  </div>
+</template>

+import { BasicColumn } from '/@/components/Table';
+import { formatToDateTime } from '/@/utils/dateUtil';
+import { isNullOrUnDef } from '/@/utils/is';
+
+// 实时数据表格
+export const realTimeDataColumns: BasicColumn[] = [
+  {
+    title: '键',
+    dataIndex: 'name',
+    width: 100,
+  },
+  {
+    title: '值',
+    dataIndex: 'rawValue',
+    width: 160,
+    format(text) {
+      return isNullOrUnDef(text) ? '--' : text;
+    },
+  },
+  {
+    title: '最后更新时间',
+    dataIndex: 'time',
+    width: 120,
+    format: (text) => formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss'),
+  },
+];

+import { EChartsOption } from 'echarts';
+import moment from 'moment';
+import { computed, ref, unref } from 'vue';
+import { HistoryData } from '/@/api/alarm/position/model';
+import { getDeviceAttributes } from '/@/api/dataBoard';
+import { DeviceAttributeRecord } from '/@/api/dataBoard/model';
+import { dateUtil } from '/@/utils/dateUtil';
+import { isArray } from '/@/utils/is';
+import { DEFAULT_DATE_FORMAT } from '/@/views/visual/board/detail/config/util';
+import { QueryWay, SchemaFiled } from '/@/views/visual/palette/components/HistoryTrendModal/config';
+import { eChartOptions } from '/@/views/device/localtion/config.data';
+import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+
+// interface DeviceOption {
+//   deviceProfileId: string;
+// }
+
+export function useHistoryData() {
+  const deviceAttrs = ref<DeviceAttributeRecord[]>([]);
+
+  const getDeviceKeys = computed(() => {
+    return unref(deviceAttrs).map((item) => item.identifier);
+  });
+
+  const getDeviceAttribute = async (record: EdgeDeviceItemType) => {
+    try {
+      const { deviceProfileId } = record;
+      const { id } = deviceProfileId;
+      const list = (await getDeviceAttributes({ deviceProfileId: id })) || [];
+      deviceAttrs.value = isArray(list) ? list : [];
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  function getSearchParams(value: Partial<Record<SchemaFiled, string>>) {
+    const { startTs, endTs, interval, agg, limit, keys, way, deviceId, orderBy } = value;
+    const basicRecord = {
+      entityId: deviceId,
+      keys: keys ? keys : unref(getDeviceKeys).join(),
+      interval,
+      agg,
+      limit,
+      orderBy,
+    };
+    if (way === QueryWay.LATEST) {
+      return Object.assign(basicRecord, {
+        startTs: moment().subtract(startTs, 'ms').valueOf(),
+        endTs: Date.now(),
+      });
+    } else {
+      return Object.assign(basicRecord, {
+        startTs: moment(startTs).valueOf(),
+        endTs: moment(endTs).valueOf(),
+      });
+    }
+  }
+
+  function setChartOptions(
+    data: HistoryData,
+    keys?: DeviceAttributeRecord | DeviceAttributeRecord[]
+  ) {
+    const dataArray: [string, string, string][] = [];
+    for (const key in data) {
+      for (const item of data[key]) {
+        let { value } = item;
+        const { ts } = item;
+        const time = dateUtil(ts).format(DEFAULT_DATE_FORMAT);
+        value = Number(value).toFixed(2);
+        dataArray.push([time, value, key as string]);
+      }
+    }
+
+    keys = keys ? [keys as DeviceAttributeRecord] : unref(deviceAttrs);
+    const legend = keys.map((item) => item.name);
+
+    const series: EChartsOption['series'] = (keys as DeviceAttributeRecord[]).map((item) => {
+      return {
+        name: item.name,
+        type: 'line',
+        data: dataArray.filter((temp) => temp[2] === item.identifier),
+      };
+    });
+
+    return eChartOptions(series, legend);
+  }
+
+  return {
+    deviceAttrs,
+    getDeviceKeys,
+    getDeviceAttribute,
+    getSearchParams,
+    setChartOptions,
+  };
+}

+export { default as EdgeDevicePhysicalModel } from './index.vue';

+<script lang="ts" setup>
+  import { nextTick, onMounted, onUnmounted, reactive, ref, unref, computed } from 'vue';
+  import { List, Card, Tooltip, Space, PaginationProps } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { realTimeDataColumns } from './config';
+  import { useWebSocket } from '@vueuse/core';
+  import { getAuthCache } from '/@/utils/auth';
+  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import HistoryData from './HistoryData.vue';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { getDeviceAttrs } from '/@/api/device/deviceManager';
+  import { isArray, isNull, isNullOrUnDef, isObject } from '/@/utils/is';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { ModeSwitchButton, EnumTableCardMode } from '/@/components/Widget';
+  import { toRaw } from 'vue';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { ReadAndWriteEnum, TCPProtocolTypeEnum, TransportTypeEnum } from '/@/enums/deviceEnum';
+  import { ObjectModelCommandDeliveryModal } from './ObjectModelCommandDeliveryModal';
+  import { ModalParamsType } from '/#/utils';
+  import { AreaChartOutlined } from '@ant-design/icons-vue';
+  import { SvgIcon, Icon } from '/@/components/Icon';
+  import { DataTypeEnum } from '/@/enums/objectModelEnum';
+  import {
+    buildTableDataSourceByObjectModel,
+    SocketInfoDataSourceItemType,
+    StructValueItemType,
+  } from './ModelOfMatter.config';
+  import { useJsonParse } from '/@/hooks/business/useJsonParse';
+  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
+
+  interface ReceiveMessage {
+    data: {
+      [key: string]: [number, string][];
+    };
+  }
+
+  const props = defineProps<{
+    deviceDetail: EdgeDeviceItemType;
+  }>();
+
+  const grid = {
+    gutter: 8,
+    column: 3,
+  } as any;
+
+  const listElRef = ref<Nullable<ComponentElRef<HTMLDivElement>>>(null);
+
+  const token = getAuthCache(JWT_TOKEN_KEY);
+
+  const { socketUrl } = useGlobSetting();
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showSizeChanger: true,
+    showQuickJumper: true,
+    hideOnSinglePage: false,
+    showTotal: (total: number) => `共${total}条数据`,
+    onChange: handleFilterChange,
+    onShowSizeChange: handleFilterChange,
+  });
+
+  const socketInfo = reactive({
+    cmdId: 2,
+    origin: `${socketUrl}${token}`,
+    attr: undefined as string | undefined,
+    dataSource: [] as SocketInfoDataSourceItemType[],
+    rawDataSource: [] as SocketInfoDataSourceItemType[],
+    message: {} as ReceiveMessage['data'],
+    attrKeys: [] as string[],
+    filterAttrKeys: [] as string[],
+  });
+
+  function createUnsubscribeMessage(cmdId: number) {
+    return {
+      tsSubCmds: [
+        {
+          cmdId,
+          unsubscribe: true,
+        },
+      ],
+    };
+  }
+
+  const getSendValue = computed(() => {
+    return {
+      tsSubCmds: [
+        {
+          entityType: 'DEVICE',
+          entityId: props.deviceDetail?.id?.id,
+          scope: 'LATEST_TELEMETRY',
+          cmdId: socketInfo.cmdId,
+          type: 'TIMESERIES',
+        },
+      ],
+    };
+  });
+
+  const getFilterSendValue = computed(() => {
+    return {
+      tsSubCmds: [
+        {
+          entityType: 'DEVICE',
+          entityId: props.deviceDetail?.id?.id,
+          scope: 'LATEST_TELEMETRY',
+          cmdId: socketInfo.cmdId,
+          type: 'TIMESERIES',
+        },
+      ],
+    };
+  });
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: [
+      {
+        field: 'value',
+        label: '键/值',
+        component: 'Input',
+        colProps: { span: 6 },
+        componentProps: {
+          placeholder: '请输入键/值',
+        },
+      },
+    ],
+    labelWidth: 100,
+    compact: true,
+    showAdvancedButton: true,
+    submitFunc: async () => {
+      try {
+        const { value } = getFieldsValue() || {};
+
+        pagination.current = 1;
+
+        socketInfo.filterAttrKeys = value
+          ? unref(socketInfo.rawDataSource)
+              .filter(
+                (item) =>
+                  item.key?.toUpperCase().includes(value.toUpperCase()) ||
+                  item.name?.toUpperCase().includes(value.toUpperCase())
+              )
+              .map((item) => item.key)
+          : socketInfo.rawDataSource.map((item) => item.key);
+
+        await nextTick();
+        handleFilterChange();
+        unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
+      } catch (error) {}
+    },
+    resetFunc: async () => {
+      try {
+        socketInfo.filterAttrKeys = [];
+        handleFilterChange();
+        unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
+      } catch (error) {}
+    },
+  });
+
+  const [registerTable, { setTableData }] = useTable({
+    columns: realTimeDataColumns,
+    showTableSetting: true,
+    pagination: pagination as any,
+    bordered: true,
+    resizeHeightOffset: 16,
+    showIndexColumn: false,
+  });
+
+  function handleFilterChange(
+    page: number = pagination.current || 1,
+    pageSize: number = pagination.pageSize || 10
+  ) {
+    pagination.current = page;
+    pagination.pageSize = pageSize;
+    send(JSON.stringify(createUnsubscribeMessage(socketInfo.cmdId)));
+    socketInfo.cmdId = socketInfo.cmdId + 1;
+    send(JSON.stringify(unref(getFilterSendValue)));
+  }
+
+  const [registerModal, { openModal }] = useModal();
+
+  const mode = ref<EnumTableCardMode>(EnumTableCardMode.CARD);
+
+  const switchMode = async (value: EnumTableCardMode) => {
+    mode.value = value;
+    await nextTick();
+    unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
+    socketInfo.filterAttrKeys = [];
+  };
+
+  const { createMessage } = useMessage();
+
+  const setDataSource = () => {
+    socketInfo.dataSource = socketInfo.filterAttrKeys.length
+      ? socketInfo.rawDataSource.filter((item) => socketInfo.filterAttrKeys.includes(item.key))
+      : socketInfo.rawDataSource;
+  };
+
+  const { send, close, data, open } = useWebSocket(socketInfo.origin, {
+    immediate: false,
+    autoReconnect: true,
+    async onConnected() {
+      send(JSON.stringify(unref(getSendValue)));
+    },
+    async onMessage() {
+      try {
+        const value = JSON.parse(unref(data)) as ReceiveMessage;
+        if (value) {
+          const { data } = value;
+          const keys = Object.keys(data);
+          for (const key of keys) {
+            const item = socketInfo.rawDataSource.find((item) => item.key === key);
+            if (!item) continue;
+            const { type } = item;
+            const [firstItem] = data[key] || [];
+            const [time, value] = firstItem;
+            item.rawValue = value;
+            if (type === DataTypeEnum.STRUCT) {
+              const { flag, value: structJSON } = useJsonParse(value);
+              if (!flag || !isObject(item.value)) continue;
+              const structKeys = Object.keys(structJSON);
+              structKeys.forEach((key) => {
+                if ((item.value as Record<string, StructValueItemType>)?.[key]) {
+                  (item.value as Record<string, StructValueItemType>)[key].value = structJSON[key];
+                }
+              });
+              item.time = time;
+              continue;
+            }
+            item.value = value;
+            item.time = time;
+          }
+          setDataSource();
+          await nextTick();
+          unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
+        }
+      } catch (error) {}
+    },
+    onDisconnected() {
+      // close();
+    },
+    onError() {
+      createMessage.error('webSocket连接超时,请联系管理员');
+    },
+  });
+
+  function setTableModeData() {
+    setTableData(socketInfo.dataSource.filter((item) => !isNull(item.value)));
+  }
+
+  const handleShowDetail = (record: SocketInfoDataSourceItemType) => {
+    const { key } = record;
+    socketInfo.attr = key;
+    openModal(true);
+  };
+
+  const getIsModbusDevice = computed(
+    () =>
+      props.deviceDetail.deviceData.transportConfiguration.type === TransportTypeEnum.TCP &&
+      props.deviceDetail?.deviceProfile?.profileData?.transportConfiguration?.protocol ===
+        TCPProtocolTypeEnum.MODBUS_RTU
+  );
+
+  onMounted(async () => {
+    const { deviceProfileId } = props.deviceDetail;
+    const { id } = deviceProfileId;
+    const value = await getDeviceAttrs({ deviceProfileId: id });
+    socketInfo.attrKeys = isArray(value) ? value.map((item) => item.identifier) : [];
+    socketInfo.rawDataSource = buildTableDataSourceByObjectModel(
+      value as never as DeviceModelOfMatterAttrs[],
+      props.deviceDetail
+    );
+    setDataSource();
+    open();
+  });
+
+  const formatValue = (item: SocketInfoDataSourceItemType) => {
+    if (isNullOrUnDef(item) || isNullOrUnDef(item.value)) return '--';
+    if (unref(getIsModbusDevice) && item.type === DataTypeEnum.BOOL) {
+      const _result = Reflect.get(item.enum || {}, item.value as string);
+      return isNullOrUnDef(_result) ? item.value : _result;
+    }
+    switch (item.type) {
+      case DataTypeEnum.BOOL:
+        return !!Number(item.value) ? item.boolOpen : item.boolClose;
+      case DataTypeEnum.ENUM:
+        return item.enum?.[item.value as string];
+      default:
+        return item.value || '--';
+    }
+  };
+
+  const [register, { openModal: openSendCommandModal }] = useModal();
+  const handleSendCommandModal = (data: SocketInfoDataSourceItemType) => {
+    openSendCommandModal(true, {
+      mode: DataActionModeEnum.READ,
+      record: {
+        objectModel: toRaw(unref(data.detail)),
+        deviceDetail: props.deviceDetail as EdgeDeviceItemType,
+      },
+    } as ModalParamsType);
+  };
+
+  onMounted(() => {
+    const element = unref(listElRef)?.$el;
+    if (!element) return;
+    const totalHeight = document.documentElement.clientHeight;
+    const { top } = element?.getBoundingClientRect() || {};
+    const containerEl = element.querySelector('.ant-spin-container') as HTMLDivElement;
+    containerEl.style.height = `${totalHeight - top - 20 - 50}px`;
+    containerEl.style.overflowY = 'auto';
+    containerEl.style.overflowX = 'hidden';
+  });
+
+  onUnmounted(() => close());
+</script>
+
+<template>
+  <PageWrapper
+    dense
+    content-class="flex flex-col p-4 dark:text-gray-300 dark:bg-dark-700 bg-gray-100"
+  >
+    <section
+      class="flex flex-col justify-between w-full bg-light-50 pt-3 mb-4 dark:text-gray-300 dark:bg-dark-900"
+    >
+      <div class="flex-auto">
+        <BasicForm @register="registerForm" />
+      </div>
+    </section>
+    <section class="bg-light-50 !dark:text-gray-300 !dark:bg-dark-900">
+      <div
+        v-show="mode === EnumTableCardMode.CARD"
+        class="flex h-70px items-center justify-end p-2"
+      >
+        <ModeSwitchButton v-model:value="mode" @change="switchMode" />
+      </div>
+      <List
+        v-show="mode === EnumTableCardMode.CARD"
+        ref="listElRef"
+        class="list-mode !px-2"
+        :data-source="socketInfo.dataSource"
+        :grid="grid"
+        :pagination="pagination"
+      >
+        <template #renderItem="{ item }: { item: SocketInfoDataSourceItemType }">
+          <List.Item>
+            <Card class="shadow-md">
+              <template #title>
+                <span class="text-base font-normal mr-2">{{ item.name }}</span>
+              </template>
+              <template #extra>
+                <Space>
+                  <Tooltip
+                    :title="item.expand ? '收起' : '展开'"
+                    v-if="item.type === DataTypeEnum.STRUCT"
+                  >
+                    <Icon
+                      :icon="item.expand ? 'ant-design:up-outlined' : 'ant-design:down-outlined'"
+                      class="cursor-pointer svg:text-blue-500"
+                      @click="item.expand = !item.expand"
+                    />
+                  </Tooltip>
+                  <Tooltip title="属性下发">
+                    <SvgIcon
+                      name="send-command"
+                      prefix="iconfont"
+                      v-if="ReadAndWriteEnum.READ_AND_WRITE === item.accessMode"
+                      class="cursor-pointer text-lg text-blue-500"
+                      @click="handleSendCommandModal(item)"
+                    />
+                  </Tooltip>
+
+                  <Tooltip title="历史趋势">
+                    <AreaChartOutlined
+                      class="cursor-pointer text-lg svg:fill-blue-500"
+                      @click="handleShowDetail(item)"
+                    />
+                  </Tooltip>
+                </Space>
+              </template>
+              <section class="min-h-16 flex flex-col justify-between">
+                <div
+                  v-if="item.type !== DataTypeEnum.STRUCT"
+                  class="flex font-bold text-lg mb-4 gap-2"
+                >
+                  <Tooltip :title="formatValue(item) as any" placement="topLeft">
+                    <div class="truncate">{{ formatValue(item) }}</div>
+                  </Tooltip>
+                  <div class="text-xs flex items-center">{{ item.unitName }}</div>
+                </div>
+                <div
+                  class="mb-4 overflow-hidden flex flex-col gap-2 relative"
+                  v-if="item.type == DataTypeEnum.STRUCT && isObject(item.value)"
+                  :style="{ height: item.expand ? 'fit-content' : '28px' }"
+                >
+                  <div
+                    v-for="key in Object.keys(item.value)"
+                    :key="key"
+                    class="cursor-pointer flex justify-between items-center gap-2"
+                  >
+                    <div class="font-medium whitespace-nowrap">{{ item.value[key].name }}</div>
+                    <div class="flex-auto font-bold text-lg text-left ml-4 truncate">
+                      <Tooltip
+                        :title="formatValue(item.value[key] as SocketInfoDataSourceItemType) as any"
+                        placement="topLeft"
+                      >
+                        <span>
+                          {{ formatValue(item.value[key] as SocketInfoDataSourceItemType) }}
+                        </span>
+                      </Tooltip>
+                      <span class="text-xs font-normal ml-2">
+                        {{ item.value[key].unitName }}
+                      </span>
+                    </div>
+                  </div>
+                  <Tooltip title="点击展开">
+                    <div
+                      v-show="!item.expand"
+                      class="absolute top-2 right-0 text-blue-400 cursor-pointer text-xs"
+                      @click="item.expand = !item.expand"
+                    >
+                      更多
+                    </div>
+                  </Tooltip>
+                </div>
+                <div class="text-dark-800 text-xs">
+                  {{
+                    item.time && item?.rawValue
+                      ? formatToDateTime(item.time, 'YYYY-MM-DD HH:mm:ss')
+                      : '--'
+                  }}
+                </div>
+              </section>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <BasicTable
+      v-if="mode === EnumTableCardMode.TABLE"
+      @register="registerTable"
+      class="device-things-model-table-mode"
+    >
+      <template #toolbar>
+        <div
+          v-show="mode === EnumTableCardMode.TABLE"
+          class="flex h-70px items-center justify-end p-2"
+        >
+          <ModeSwitchButton v-model:value="mode" @change="switchMode" />
+        </div>
+      </template>
+    </BasicTable>
+    <BasicModal
+      @register="registerModal"
+      title="历史数据"
+      width="50%"
+      destroy-on-close
+      dialogClass="history-modal"
+    >
+      <HistoryData :deviceDetail="props.deviceDetail" :attr="socketInfo.attr" />
+    </BasicModal>
+    <ObjectModelCommandDeliveryModal
+      @register="register"
+      :deviceId="deviceDetail.id.id"
+      :device-name="deviceDetail.name"
+    />
+  </PageWrapper>
+</template>
+
+<style scoped lang="less">
+  .list-mode:deep(.ant-card-head) {
+    border-bottom: 0;
+  }
+
+  .list-mode:deep(.ant-card-body) {
+    padding-top: 0;
+  }
+
+  .list-mode:deep(.ant-card-head-title) {
+    height: 64px;
+    display: flex;
+    align-items: center;
+  }
+
+  .device-things-model-table-mode:deep(.ant-table-placeholder) {
+    height: auto;
+  }
+
+  .model-collapse {
+    border: none;
+
+    :deep(.ant-collapse-header) {
+      display: none;
+    }
+
+    :deep(.ant-collapse-item) {
+      border: none;
+    }
+
+    :deep(.ant-collapse-content) {
+      border: none;
+    }
+
+    :deep(.ant-collapse-content-box) {
+      padding: 0;
+    }
+  }
+</style>
+
+<style>
+  .history-modal .ant-input-number {
+    min-width: 0 !important;
+    width: 100% !important;
+  }
+</style>

+export interface DeviceType {
+  alarmStatus: number;
+  createTime: string;
+  creator: string;
+  deviceInfo: Object;
+  deviceProfile: Object;
+  deviceState: string;
+  deviceToken: string;
+  deviceType: string;
+  enabled: boolean;
+  id: string;
+  key: string;
+  label: string;
+  name: string;
+  organizationDTO: Object;
+  organizationId: string;
+  profileId: string;
+  tenantCode: string;
+  updateTime: string;
+}
+
+export interface socketDataType {
+  key: string;
+  value: string;
+  time: number;
+}

+import { DescItem } from '/@/components/Description/src/typing';
+
+export const descSchema = (): DescItem[] => {
+  return [
+    {
+      field: 'name',
+      label: '设备名称',
+    },
+    {
+      field: 'label',
+      label: '设备标签',
+    },
+    {
+      field: 'routingKey',
+      label: '边缘键',
+    },
+    {
+      field: 'secret',
+      label: '边缘密钥',
+    },
+    {
+      field: 'createdTime',
+      label: '创建时间',
+    },
+    {
+      field: 'additionalInfo.description',
+      label: '描述',
+    },
+  ];
+};

+export { default as EdgeDeviceTabInfo } from './index.vue';

+<script lang="ts" setup>
+  import { Tabs } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import type { PropType } from 'vue';
+  import { EdgeDevicePhysicalModel } from '../EdgeDevicePhysicalModel';
+  import { EdgeDeviceAlarm } from '../EdgeDeviceAlarm';
+  import { EdgeDeviceEvent } from '../EdgeDeviceEvent';
+  import { EdgeDeviceCommand } from '../EdgeDeviceCommand';
+  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
+
+  defineProps({
+    recordData: {
+      type: Object as PropType<EdgeDeviceItemType>,
+      default: () => {},
+    },
+  });
+
+  enum ActiveKey {
+    PHYSICALMODEL = 'PhysicalModel',
+    ALARM = 'Alarm',
+    COMMANDISSUANCERECORD = 'CommandIssuanceRecord',
+    EVENTMANAGEMENT = 'EventManagement',
+  }
+
+  const activeKey = ref(ActiveKey.PHYSICALMODEL);
+</script>
+
+<template>
+  <section class="w-full h-full p-1">
+    <main>
+      <Tabs
+        v-model:activeKey="activeKey"
+        type="card"
+        class="w-full h-full bg-light-50 !p-4 dark:bg-dark-900"
+      >
+        <Tabs.TabPane tab="物模型" :key="ActiveKey.PHYSICALMODEL">
+          <EdgeDevicePhysicalModel :deviceDetail="recordData" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="告警" :key="ActiveKey.ALARM">
+          <EdgeDeviceAlarm :recordData="recordData" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="命令下发" :key="ActiveKey.COMMANDISSUANCERECORD">
+          <EdgeDeviceCommand :recordData="recordData" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="事件管理" :key="ActiveKey.EVENTMANAGEMENT">
+          <EdgeDeviceEvent :recordData="recordData" />
+        </Tabs.TabPane>
+      </Tabs>
+    </main>
+  </section>
+</template>
+
+<style lang="less" scoped></style>

+import { Tag } from 'ant-design-vue';
+import { BasicColumn } from '/@/components/Table';
+import { formatToDateTime } from '/@/utils/dateUtil';
+import { h } from 'vue';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '事件时间',
+    dataIndex: 'createdTime',
+    format(text) {
+      return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: '服务器',
+    dataIndex: 'body.server',
+  },
+  {
+    title: '事件',
+    dataIndex: 'body.event',
+  },
+  {
+    title: '状态',
+    dataIndex: 'body.success',
+    customRender: ({ record }) => {
+      const color = record.body.success ? 'success' : 'error';
+      const text = record.body.success ? '成功' : '失败';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+  {
+    title: '错误',
+    dataIndex: 'error',
+    slots: { customRender: 'errorDetail' },
+  },
+];

+export { default as EdgeEvents } from './index.vue';

+<script lang="ts" setup>
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { columns } from './config';
+  import { edgeEventPage } from '/@/api/edgeManage/edgeInstance';
+  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { Input, Button } from 'ant-design-vue';
+  import { ref } from 'vue';
+
+  const props = defineProps({
+    recordData: {
+      type: Object as PropType<EdgeInstanceItemType>,
+      default: () => {},
+    },
+  });
+
+  const outputData = ref<string>();
+
+  const [registerTable] = useTable({
+    columns,
+    api: async ({ page, pageSize }) => {
+      const res = await edgeEventPage(
+        {
+          page: page - 1 < 0 ? 0 : page - 1,
+          pageSize,
+          tenantId: props?.recordData?.tenantId?.id,
+          sortOrder: 'DESC',
+          sortProperty: 'ts',
+        },
+        props?.recordData?.id?.id
+      );
+      return {
+        total: res?.totalElements,
+        items: res?.data,
+      };
+    },
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: true,
+    bordered: true,
+  });
+
+  const [registerModal, { openModal, closeModal }] = useModal();
+
+  const handleEventIsDetail = (record: Recordable) => {
+    outputData.value = record?.body?.error;
+    openModal(true);
+  };
+</script>
+
+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
+      <template #errorDetail="{ record }">
+        <Button
+          v-if="record?.body?.error"
+          type="link"
+          class="ml-2"
+          @click="handleEventIsDetail(record)"
+        >
+          查看
+        </Button>
+        <Button v-else type="link" class="ml-2"> - </Button>
+      </template>
+    </BasicTable>
+    <BasicModal title="详情" @register="registerModal" @ok="closeModal">
+      <Input.TextArea v-model:value="outputData" :autosize="true" />
+    </BasicModal>
+  </div>
+</template>

+<script lang="ts" setup>
+  import { nextTick, ref, unref, computed } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { FormFieldsEnum, formSchema } from './config';
+  import { HandleOperationEnum } from '../../config';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { createOrEditEdgeInstance } from '/@/api/edgeManage/edgeInstance';
+  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { buildUUID, randomString } from '/@/utils/uuid';
+  import { handeleCopy } from '/@/views/device/profiles/step/topic';
+
+  const emits = defineEmits(['success', 'register']);
+
+  const { createMessage } = useMessage();
+
+  const isUpdate = ref<Boolean>();
+
+  const isUpdateText = ref<String>();
+
+  const recordData = ref<EdgeInstanceItemType>();
+
+  const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
+    labelWidth: 120,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const cacheTitle = computed(() => (!unref(isUpdate) ? '新增实例' : '编辑实例'));
+
+  const handleCopyRoutingKey = (text: string) => handeleCopy(text);
+
+  const handleCopySecret = (text: string) => handeleCopy(text);
+
+  const setDefaultValue = (event: HandleOperationEnum) => {
+    if (event === HandleOperationEnum.CREATE) {
+      setFieldsValue({
+        [FormFieldsEnum.ROUTINGKEY]: buildUUID(),
+        [FormFieldsEnum.SECRET]: randomString(),
+      });
+    }
+  };
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    setDrawerProps({ loading: true });
+    await resetFields();
+    setDefaultValue(data.event);
+    isUpdate.value = data.isUpdate;
+    isUpdateText.value = data.isUpdateText;
+    recordData.value = data.record;
+    try {
+      await nextTick();
+      setFieldsValue(data.record);
+      setFieldsValue({
+        [FormFieldsEnum.DESCRIPTION]: data.record?.additionalInfo[FormFieldsEnum.DESCRIPTION],
+      });
+    } finally {
+      setDrawerProps({ loading: false });
+    }
+  });
+
+  const getValue = async () => {
+    const values = await validate();
+    if (!values) return;
+    const additionalInfo = {
+      description: values[FormFieldsEnum.DESCRIPTION],
+    };
+    const mergeValues = {
+      ...recordData.value,
+      ...values,
+      ...{ additionalInfo },
+    };
+    Reflect.deleteProperty(mergeValues, FormFieldsEnum.DESCRIPTION);
+    await createOrEditEdgeInstance(mergeValues);
+    createMessage.success(`${isUpdateText.value}成功`);
+    closeDrawer();
+    setTimeout(() => {
+      emits('success');
+    }, 500);
+  };
+
+  const handleSubmit = () => getValue();
+</script>
+
+<template>
+  <div>
+    <BasicDrawer
+      destroyOnClose
+      v-bind="$attrs"
+      showFooter
+      :title="cacheTitle"
+      width="30%"
+      :maskClosable="true"
+      @register="registerDrawer"
+      @ok="handleSubmit"
+    >
+      <BasicForm @register="registerForm">
+        <template #routingKey="{ model, field }">
+          <div class="!flex justify-between items-center gap-5">
+            <a-input disabled v-model:value="model[field]" />
+            <a-button type="link" @click="handleCopyRoutingKey(model[field])" class="cursor-pointer"
+              >复制</a-button
+            >
+          </div>
+        </template>
+        <template #secret="{ model, field }">
+          <div class="!flex justify-between items-center gap-5">
+            <a-input disabled v-model:value="model[field]" />
+            <a-button type="link" @click="handleCopySecret(model[field])" class="cursor-pointer"
+              >复制</a-button
+            >
+          </div>
+        </template>
+      </BasicForm>
+    </BasicDrawer>
+  </div>
+</template>
+
+<style lang="less" scoped></style>

+import { FormSchema } from '/@/components/Form';
+
+export enum FormFieldsEnum {
+  NAME = 'name',
+  LABEL = 'label',
+  ROUTINGKEY = 'routingKey',
+  SECRET = 'secret',
+  TYPE = 'type',
+  DESCRIPTION = 'description',
+  TEXTSEARCH = 'textSearch',
+}
+
+enum FormFieldsNameEnum {
+  NAME = '名称',
+  LABEL = '标签',
+  ROUTINGKEY = '边缘Key',
+  SECRET = '边缘密钥',
+  TYPE = '边缘类型',
+  DESCRIPTION = '描述',
+  TEXTSEARCH = '实例名称',
+}
+
+export const formSchema: FormSchema[] = [
+  {
+    field: FormFieldsEnum.NAME,
+    label: FormFieldsNameEnum.NAME,
+    component: 'Input',
+    required: true,
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入实例名称',
+    },
+  },
+  {
+    field: FormFieldsEnum.TYPE,
+    label: FormFieldsNameEnum.TYPE,
+    component: 'Input',
+    required: true,
+    defaultValue: 'default',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: FormFieldsEnum.ROUTINGKEY,
+    label: FormFieldsNameEnum.ROUTINGKEY,
+    slot: 'routingKey',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: FormFieldsEnum.SECRET,
+    label: FormFieldsNameEnum.SECRET,
+    slot: 'secret',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: FormFieldsEnum.LABEL,
+    label: FormFieldsNameEnum.LABEL,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入标签',
+    },
+  },
+  {
+    field: FormFieldsEnum.DESCRIPTION,
+    label: FormFieldsNameEnum.DESCRIPTION,
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入描述',
+    },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: FormFieldsEnum.TEXTSEARCH,
+    label: FormFieldsNameEnum.TEXTSEARCH,
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入实例名称',
+    },
+  },
+];

+export { default as EdgeInstanceDetailDrawer } from './index.vue';
+export { default as EdgeInstanceFormDrawer } from './EdgeInstanceFormDrawer.vue';

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { infoEdgeInstance } from '/@/api/edgeManage/edgeInstance';
+  import { EdgeInstanceBasicInfo } from '../EdgeInstanceBasicInfo';
+  import { EdgeInstanceTabInfo } from '../EdgeInstanceTabInfo';
+  import { useRoute } from 'vue-router';
+  import { PageWrapper } from '/@/components/Page';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  defineEmits(['register']);
+
+  defineOptions({ name: 'EdgeDetail' });
+
+  const route = useRoute();
+
+  const go = useGo();
+
+  const edgeId = ref(route.params?.id);
+
+  const recordData = ref<EdgeInstanceItemType>();
+
+  infoEdgeInstance(edgeId.value as string).then((res) => {
+    recordData.value = res;
+  });
+
+  function goBack() {
+    go('/edge/instance');
+  }
+</script>
+
+<template>
+  <PageWrapper :title="`边缘详情`" contentBackground @back="goBack">
+    <!-- 基础信息 -->
+    <div class="m-4">
+      <EdgeInstanceBasicInfo v-if="recordData" :recordData="recordData" />
+    </div>
+    <!-- Tab信息 -->
+    <div>
+      <EdgeInstanceTabInfo v-if="recordData" :recordData="recordData" />
+    </div>
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped></style>

+import { Tag } from 'ant-design-vue';
+import { h } from 'vue';
+import { DescItem } from '/@/components/Description/src/typing';
+import { handeleCopy } from '/@/views/device/profiles/step/topic';
+import { formatToDateTime } from '/@/utils/dateUtil';
+
+export const descSchema = (): DescItem[] => {
+  return [
+    {
+      field: 'name',
+      label: '边缘名称',
+    },
+    {
+      field: 'label',
+      label: '设备标签',
+      render: (text) => {
+        return text
+          ? h(
+              Tag,
+              {
+                color: '#00B42A',
+              },
+              text
+            )
+          : '';
+      },
+    },
+    {
+      field: 'active',
+      label: '状态',
+      render: (text) => {
+        const color = text ? 'success' : 'error';
+        const textStr = text ? ' 在线' : '离线';
+        return h(
+          Tag,
+          {
+            color,
+          },
+          textStr
+        );
+      },
+    },
+    {
+      field: 'routingKey',
+      label: '边缘键',
+      render: (text) => {
+        return h(
+          'span',
+          {
+            style: { cursor: 'pointer', color: '#165DFF' },
+            onClick: () => {
+              handeleCopy(text);
+            },
+          },
+          text
+        );
+      },
+    },
+    {
+      field: 'secret',
+      label: '边缘密钥',
+      render: (text) => {
+        return h(
+          'span',
+          {
+            style: { cursor: 'pointer', color: '#165DFF' },
+            onClick: () => {
+              handeleCopy(text);
+            },
+          },
+          text
+        );
+      },
+    },
+    {
+      field: 'createdTime',
+      label: '创建时间',
+      render: (_, data) => {
+        return formatToDateTime(data.createdTime, 'YYYY-MM-DD HH:mm:ss');
+      },
+    },
+    {
+      field: 'additionalInfo.description',
+      label: '描述',
+    },
+  ];
+};

+export { default as EdgeInstanceBasicInfo } from './index.vue';

+<script lang="ts" setup>
+  import { Description, useDescription } from '/@/components/Description';
+  import { descSchema } from './config';
+  import type { PropType } from 'vue';
+  import { ref } from 'vue';
+  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import edgeInstancePng from '/@/assets/images/edgeInstance.png';
+  import { Image } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { syncEdge } from '/@/api/edgeManage/edgeInstance';
+  // import { useGo } from '/@/hooks/web/usePage';
+
+  const props = defineProps({
+    recordData: {
+      type: Object as PropType<EdgeInstanceItemType>,
+      default: () => {},
+    },
+  });
+
+  defineEmits(['register']);
+
+  const CS = {
+    'max-width': '600px',
+    'word-break': 'break-all',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    '-webkit-line-clamp': 2,
+    '-webkit-box-orient': 'vertical',
+  };
+
+  const { createMessage } = useMessage();
+
+  // const go = useGo();
+
+  const loadStatus = ref(false);
+
+  const [register] = useDescription({
+    layout: 'vertical',
+    schema: descSchema(),
+    column: 5,
+  });
+
+  const handleEventIsSyncEdge = async () => {
+    loadStatus.value = true;
+    try {
+      if (!props.recordData?.id?.id) return;
+      await syncEdge(props.recordData?.id?.id);
+      createMessage.success('同步边缘处理成功');
+    } finally {
+      loadStatus.value = false;
+    }
+  };
+
+  // const handleEventIsOpenEdgeDevice = () => {
+  //   go('/edge/edge_device/' + props.recordData?.id?.id);
+  // };
+</script>
+
+<template>
+  <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
+    <a-col class="gutter-row" :span="3">
+      <div class="!flex flex-col justify-between items-center">
+        <div><Image :src="edgeInstancePng" :width="180" /></div>
+        <div class="!flex flex-col mt-3 justify-between">
+          <span style="color: #1d2129" class="truncate font-bold">{{ recordData?.name }}</span>
+          <span style="color: #3d3d3d">边缘详情</span>
+        </div>
+      </div>
+    </a-col>
+    <a-col class="gutter-row" :span="21">
+      <div class="!flex flex-col justify-between">
+        <Description v-if="recordData" @register="register" :data="recordData" :contentStyle="CS" />
+        <div class="!flex mt-3">
+          <a-button
+            :disabled="!recordData.active"
+            :loading="loadStatus"
+            type="primary"
+            @click="handleEventIsSyncEdge"
+            >同步边缘</a-button
+          >
+          <!-- <a-button class="ml-4" type="primary" @click="handleEventIsOpenEdgeDevice"
+            >边缘设备</a-button
+          > -->
+        </div>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped>
+  :deep(.ant-image-img) {
+    height: 157px;
+  }
+</style>

+import { DescItem } from '/@/components/Description/src/typing';
+
+export const descSchema = (): DescItem[] => {
+  return [
+    {
+      field: 'name',
+      label: '设备名称',
+    },
+    {
+      field: 'label',
+      label: '设备标签',
+    },
+    {
+      field: 'routingKey',
+      label: '边缘键',
+    },
+    {
+      field: 'secret',
+      label: '边缘密钥',
+    },
+    {
+      field: 'createdTime',
+      label: '创建时间',
+    },
+    {
+      field: 'additionalInfo.description',
+      label: '描述',
+    },
+  ];
+};

+export { default as EdgeInstanceTabInfo } from './index.vue';

+<script lang="ts" setup>
+  import { Tabs } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import { EdgeMonitoring } from '../EdgeMonitoring';
+  import { EdgeEvents } from '../EdgeEvents';
+  import { EdgeDevice } from '../EdgeDevice';
+  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import type { PropType } from 'vue';
+
+  defineProps({
+    recordData: {
+      type: Object as PropType<EdgeInstanceItemType>,
+      default: () => {},
+    },
+  });
+
+  enum ActiveKey {
+    EDGE_DEVICE = 'EdgeDevice',
+    EDGEMONITORING = 'EdgeMonitoring',
+    EDGEEVENTS = 'EdgeEvents',
+  }
+
+  const activeKey = ref(ActiveKey.EDGE_DEVICE);
+</script>
+
+<template>
+  <section class="w-full h-full p-1">
+    <main>
+      <Tabs
+        v-model:activeKey="activeKey"
+        type="card"
+        class="w-full h-full bg-light-50 !p-4 dark:bg-dark-900"
+      >
+        <Tabs.TabPane tab="边缘设备" :key="ActiveKey.EDGE_DEVICE">
+          <EdgeDevice
+            v-if="recordData"
+            :recordData="recordData"
+            class="p-4 bg-neutral-100 dark:bg-dark-700"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="边缘监控" :key="ActiveKey.EDGEMONITORING">
+          <EdgeMonitoring
+            v-if="recordData"
+            :recordData="recordData"
+            class="p-4 bg-fff dark:bg-dark-700"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="边缘事件" :key="ActiveKey.EDGEEVENTS">
+          <EdgeEvents :recordData="recordData" class="p-4 bg-neutral-100 dark:bg-dark-700" />
+        </Tabs.TabPane>
+      </Tabs>
+    </main>
+  </section>
+</template>
+
+<style lang="less" scoped></style>

+export { default as EdgeMonitoring } from './index.vue';

+<script lang="ts" setup>
+  import {
+    ref,
+    onMounted,
+    unref,
+    shallowReactive,
+    nextTick,
+    reactive,
+    computed,
+    onUnmounted,
+  } from 'vue';
+  import * as echarts from 'echarts';
+  import { Empty } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useWebSocket } from '@vueuse/core';
+  import { getAuthCache } from '/@/utils/auth';
+  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import moment from 'moment';
+  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
+  import { isArray, isNumber } from '/@/utils/is';
+  import { formatSizeUnits } from '/@/utils';
+  import cpuSvg from '/@/assets/icons/cpu.svg';
+  import diskSvg from '/@/assets/icons/disk.svg';
+  import memorySvg from '/@/assets/icons/memory.svg';
+
+  interface ChartInstance {
+    name: string;
+    currentValue: number;
+    totalKey: string;
+    totalCount: Recordable;
+    type: string;
+    text: string;
+    xAxisData: string[];
+    seriesData: number[];
+    icon: any;
+  }
+
+  enum DeviceInfoOfEdge {
+    CPU_USAGE_OF_EDGE = 'cpuUsageOfEdge',
+    DISC_USAGE_OF_EDGE = 'discUsageOfEdge',
+    MEMORY_USAGE_OF_EDGE = 'memoryUsageOfEdge',
+    CPU_COUNT_OF_EDGE = 'cpuCountOfEdge',
+    TOTAL_MEMORY_OF_EDGE = 'totalMemoryOfEdge',
+    TOTAL_DISC_SPACE_OF_EDGE = 'totalDiscSpaceOfEdge',
+  }
+
+  const props = defineProps({
+    recordData: {
+      type: Object as PropType<EdgeInstanceItemType>,
+      default: () => {},
+    },
+  });
+
+  const token = getAuthCache(JWT_TOKEN_KEY);
+
+  const { socketUrl } = useGlobSetting();
+
+  const socketInfo = reactive({
+    entityId: '',
+    origin: `${socketUrl}${token}`,
+  });
+
+  const { createMessage } = useMessage();
+
+  const getSendValue = computed(() => {
+    return {
+      tsSubCmds: [
+        {
+          entityId: '',
+          cmdId: 11,
+          entityType: 'EDGE',
+          keys: `${DeviceInfoOfEdge.CPU_USAGE_OF_EDGE},${DeviceInfoOfEdge.DISC_USAGE_OF_EDGE},${DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE},${DeviceInfoOfEdge.CPU_COUNT_OF_EDGE},${DeviceInfoOfEdge.TOTAL_MEMORY_OF_EDGE},${DeviceInfoOfEdge.TOTAL_DISC_SPACE_OF_EDGE}`,
+          startTs: moment(moment().subtract(1, 'minute')).valueOf(),
+          timeWindow: 3600000,
+          interval: 10000,
+          intervalType: 'MILLISECONDS',
+          // limit: 360,
+          timeZoneId: 'Asia/Shanghai',
+          agg: 'AVG',
+          unsubscribe: false,
+        },
+      ],
+    };
+  });
+
+  const chartInstance = ref<ChartInstance[]>([
+    {
+      name: 'CPU',
+      text: 'CPU使用率',
+      currentValue: 0,
+      totalKey: DeviceInfoOfEdge.CPU_COUNT_OF_EDGE,
+      totalCount: {},
+      type: DeviceInfoOfEdge.CPU_USAGE_OF_EDGE,
+      xAxisData: [],
+      seriesData: [],
+      icon: cpuSvg,
+    },
+    {
+      name: '内存',
+      text: '内存使用率',
+      currentValue: 0,
+      totalKey: DeviceInfoOfEdge.TOTAL_MEMORY_OF_EDGE,
+      totalCount: {},
+      type: DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE,
+      xAxisData: [],
+      seriesData: [],
+      icon: memorySvg,
+    },
+    {
+      name: '磁盘',
+      text: '磁盘使用率',
+      currentValue: 0,
+      totalKey: DeviceInfoOfEdge.TOTAL_DISC_SPACE_OF_EDGE,
+      totalCount: {},
+      type: DeviceInfoOfEdge.DISC_USAGE_OF_EDGE,
+      xAxisData: [],
+      seriesData: [],
+      icon: diskSvg,
+    },
+  ]);
+
+  const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
+
+  // const cacheUsedSpace = (total, percentage) => {
+  //   if (!total) return;
+  //   const takeValue = total.split('.')[0];
+  //   const takeUnit = total.split('.')[1];
+  //   return `${(takeValue * (percentage / 100)).toFixed(1)}${takeUnit}`;
+  // };
+
+  const { send, close, data, open } = useWebSocket(socketInfo.origin, {
+    immediate: false,
+    autoReconnect: true,
+    async onConnected() {
+      getSendValue.value.tsSubCmds[0].entityId = socketInfo.entityId;
+      send(JSON.stringify(unref(getSendValue)));
+    },
+    async onMessage() {
+      try {
+        const value = JSON.parse(unref(data)) as any;
+        if (value) {
+          const { data } = value;
+          const keys = Object.keys(data);
+          for (const key of keys) {
+            chartInstance.value.forEach((chartItem: ChartInstance) => {
+              if (chartItem.type === key) {
+                chartItem.xAxisData.push(moment(data[key][0][0]).format('HH:mm'));
+                // chartItem.seriesData = [];
+                chartItem.seriesData = data[key][0][1] ? [data[key][0][1]] : [];
+                chartItem.currentValue = Number(data[key][0][1]);
+              }
+              if (chartItem.totalKey === key) {
+                chartItem.totalCount.cpuTotal =
+                  key === DeviceInfoOfEdge.CPU_COUNT_OF_EDGE ? data[key][0][1] : 0;
+                chartItem.totalCount.totalDisc =
+                  key === DeviceInfoOfEdge.TOTAL_DISC_SPACE_OF_EDGE
+                    ? formatSizeUnits(Number(data[key][0][1]))
+                    : 0;
+                chartItem.totalCount.totalMemory =
+                  key === DeviceInfoOfEdge.TOTAL_MEMORY_OF_EDGE
+                    ? formatSizeUnits(Number(data[key][0][1]))
+                    : 0;
+              }
+            });
+          }
+          await nextTick();
+          handleRenderChartInstance(chartInstance.value);
+        }
+      } catch (error) {}
+    },
+    onDisconnected() {},
+    onError() {
+      createMessage.error('webSocket连接超时,请联系管理员');
+    },
+  });
+
+  function onResize(type) {
+    if (!chartsInstance[type]) return;
+    chartsInstance[type]?.resize();
+  }
+
+  const chartOption = {
+    series: [
+      {
+        data: [],
+        detail: {
+          formatter: `暂无数据`,
+        },
+        type: 'gauge',
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [0.2, '#739ded'],
+              [0.8, '#5f89d8'],
+              [1, '#377dff'],
+            ],
+          },
+        },
+        pointer: {
+          itemStyle: {
+            color: 'auto',
+          },
+        },
+        axisTick: {
+          distance: 0,
+          length: 8,
+          lineStyle: {
+            color: 'auto',
+          },
+        },
+        splitLine: {
+          distance: 0,
+          length: 10,
+          lineStyle: {
+            color: 'auto',
+            width: 3,
+          },
+        },
+        axisLabel: {
+          color: 'inherit',
+          distance: 15,
+          fontSize: 8,
+        },
+      },
+    ],
+  };
+  const pieOption = {
+    grid: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}<br/>{d}%',
+      textStyle: {
+        fontSize: 12,
+      },
+    },
+    title: {
+      text: '磁盘容量',
+      subtext: '暂无数据',
+      textStyle: {
+        fontSize: 12,
+        color: '#72767c',
+      },
+      subtextStyle: {
+        fontSize: 14,
+        color: '#000000',
+        fontWeight: 500,
+      },
+      textAlign: 'center',
+      left: '48.5%',
+      top: '44%',
+    },
+    legend: {
+      show: true,
+      icon: 'circle',
+
+      bottom: '0%',
+      data: [{ name: '磁盘已使用' }, { name: '磁盘剩余空间' }].map((item) => ({
+        name: item.name,
+      })),
+      formatter(name: string) {
+        return `{b_style|${name}} `;
+      },
+      textStyle: {
+        color: '#000',
+        rich: {
+          b_style: {
+            color: '#8d8ea0',
+            fontSize: 12,
+            padding: [0, 5, 0, 0],
+          },
+        },
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        // center: ['35%', '50%'],
+        radius: ['40%', '67%'],
+        startAngle: 30,
+        emphasis: {
+          scale: false,
+        },
+        label: {
+          position: 'outside',
+          alignTo: 'labelLine',
+          height: 0,
+          width: 0,
+          lineHeight: 0,
+          distanceToLabelLine: 75,
+          borderRadius: 3,
+          borderWidth: 1,
+          borderColor: 'none',
+          padding: [20, -15, 0, -10],
+          rich: {
+            a: {
+              padding: [0, -80, 55, -80],
+              fontSize: '12px',
+              color: '#000000',
+            },
+            b: {
+              padding: [20, -80, 40, -80],
+              fontSize: '12px',
+              color: '#72767c',
+            },
+          },
+          // formatter: (params: any) => {
+          //   const { data } = params;
+          //   const { value } = data || {};
+
+          //   const total = Number(totalCount.totalDisc?.split('.')[0] || 0);
+          //   const totalUnit = totalCount.totalDisc?.split('.')[1] || 0;
+
+          //   return `{a|${value && total ? value : ''}${value && total ? '%' : ''}} \n {b|${
+          //     total ? (total * (value / 100)).toFixed(1) : ''
+          //   }${total ? totalUnit : ''}}`;
+          // },
+        },
+        labelLine: {
+          show: false,
+          length: 5,
+          // align: 'bottom',
+          lineStyle: {
+            width: 1,
+          },
+        },
+        data: [
+          { name: '磁盘已使用', value: 0, itemStyle: { color: '#90b2f1' } },
+          { name: '磁盘剩余空间', value: 100, itemStyle: { color: '#377dff' } },
+        ],
+      },
+    ],
+  };
+
+  const handleRenderChartInstance = async (chartInstance: ChartInstance[]) => {
+    await nextTick();
+    if (!chartInstance) return;
+    if (isArray(chartInstance) && chartInstance.length <= 0) return;
+    for (const item of unref(chartInstance)) {
+      const { type, seriesData, currentValue, totalCount } = item;
+      // chartsInstance[type] = echarts.init(document.getElementById(`chart-${type}`) as HTMLElement);
+      if (type !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE) {
+        chartsInstance[type].setOption({
+          series: [
+            {
+              data: seriesData,
+              detail: {
+                formatter: `${isNumber(currentValue) ? '{value} %' : '暂无数据'}`,
+              },
+            },
+          ],
+        });
+      } else {
+        chartsInstance[type].setOption({
+          title: {
+            subtext: totalCount.totalDisc,
+          },
+          series: [
+            {
+              label: {
+                formatter: (params: any) => {
+                  const { data } = params;
+                  const { value } = data || {};
+
+                  const total = Number(totalCount.totalDisc?.split('.')[0] || 0);
+                  const totalUnit = totalCount.totalDisc?.split('.')[1] || 0;
+
+                  return `{a|${value && total ? value : ''}${value && total ? '%' : ''}} \n {b|${
+                    total ? (total * (value / 100)).toFixed(1) : ''
+                  }${total ? totalUnit : ''}}`;
+                },
+              },
+              data: [
+                { name: '磁盘已使用', value: currentValue, itemStyle: { color: '#90b2f1' } },
+                {
+                  name: '磁盘剩余空间',
+                  value: 100 - currentValue,
+                  itemStyle: { color: '#377dff' },
+                },
+              ],
+            },
+          ],
+        });
+      }
+
+      window.addEventListener('resize', () => onResize(type));
+    }
+  };
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+  });
+
+  onMounted(() => {
+    socketInfo.entityId = props.recordData?.id?.id as string;
+    if (socketInfo.entityId) {
+      open();
+      [
+        DeviceInfoOfEdge.CPU_USAGE_OF_EDGE,
+        DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE,
+        DeviceInfoOfEdge.DISC_USAGE_OF_EDGE,
+      ].forEach((item) => {
+        chartsInstance[item] = echarts.init(
+          document.getElementById(`chart-${item}`) as HTMLElement
+        );
+        if (item !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE) {
+          chartsInstance[item]?.setOption(chartOption);
+        } else {
+          chartsInstance[item]?.setOption(pieOption);
+        }
+      });
+    }
+  });
+
+  onUnmounted(() => close());
+</script>
+
+<template>
+  <div>
+    <a-row justify="space-around" align="middle" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
+      <a-col
+        class="gutter-row"
+        style="background: #f5f5f5; border-radius: 20px"
+        :span="7"
+        v-for="(item, index) in chartInstance"
+        :key="index"
+      >
+        <a-row align="middle">
+          <div class="!flex justify-between items-center font-bold fill-dark-900 p-2.5 mt-4">
+            <img :src="item.icon" />
+            <span class="ml-1">{{ item.text }}</span>
+            <!-- <span>{{ item.currentValue }}%</span>
+            <span v-if="item.type !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE"
+              >{{
+                item.type === DeviceInfoOfEdge.CPU_USAGE_OF_EDGE
+                  ? item.totalCount.cpuTotal
+                  : item.type === DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE
+                  ? item.totalCount.totalMemory
+                  : 0
+              }}{{ item.type === DeviceInfoOfEdge.CPU_USAGE_OF_EDGE ? 'cores' : '' }}</span
+            >
+            <span v-if="item.type === DeviceInfoOfEdge.DISC_USAGE_OF_EDGE" style="color: #d46b08"
+              >已用{{ cacheUsedSpace(item.totalCount.totalDisc, item.currentValue) }}</span
+            >
+            <span v-if="item.type === DeviceInfoOfEdge.DISC_USAGE_OF_EDGE" style="color: #1677ff"
+              >可用{{ item.totalCount.totalDisc }}</span
+            > -->
+          </div>
+        </a-row>
+        <a-row class="mt-8" justify="space-around" align="middle">
+          <div class="flex w-full justify-center relative">
+            <Empty
+              description="暂无数据"
+              class="text-dark-50 m-4 absolute"
+              :style="{ display: item.seriesData.length == 0 ? 'block' : 'none' }"
+            />
+            <div
+              :id="`chart-${item.type}`"
+              class="m-4 w-9/10 h-300px"
+              :style="{ opacity: item.seriesData.length > 0 ? 1 : 0 }"
+            ></div>
+          </div>
+        </a-row>
+      </a-col>
+    </a-row>
+  </div>
+</template>

+export enum PermissionEnum {
+  CREATE = 'api:yt:task_center:add:post',
+  UPDATE = 'api:yt:task_center:update:update',
+  START_TASK = 'api:yt:task_center:update:state',
+  DELETE = 'api:yt:task_center:delete',
+  ALLOW = 'api:yt:task_center:cancel:allow',
+  EXECUTE = 'api:yt:task_center:immediate:execute',
+  DETAIL = 'api:yt:task_center:get',
+}
+
+export enum HandleOperationEnum {
+  CREATE = 'create',
+  VIEW = 'view',
+  UPDATE = 'update',
+  BATCH_DELETE = 'batchDelete',
+  DELETE = 'singleDelete',
+}
+
+export enum HandleOperationNameEnum {
+  CREATE = '新增',
+  VIEW = '查看',
+  UPDATE = '编辑',
+  BATCH_DELETE = '批量删除',
+  DELETE = '删除',
+}

+<script lang="ts" setup>
+  import { EnumTableCardMode } from '/@/components/Widget';
+  import { CardMode } from './components/CardMode';
+</script>
+
+<template>
+  <section>
+    <CardMode :mode="EnumTableCardMode.CARD" />
+  </section>
+</template>

@@ -3,7 +3,12 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { ALG, formSchema, PackageField } from '../config/packageDetail.config';
   import { ref } from 'vue';
-  import { createOtaPackage, uploadOtaPackages, deleteOtaPackage } from '/@/api/ota';
+  import {
+    createOtaPackage,
+    uploadOtaPackages,
+    deleteOtaPackage,
+    getDeviceProfileInfo,
+  } from '/@/api/ota';
   import { CreateOtaPackageParams } from '/@/api/ota/model';
 
   interface FieldsValue extends CreateOtaPackageParams {
@@ -14,6 +19,8 @@
 
   const emit = defineEmits(['register', 'update:list']);
 
+  const defaultDeviceProfile = 'default';
+
   const loading = ref(false);
 
   const [registerModal, { changeLoading, closeModal }] = useModalInner();
@@ -72,6 +79,10 @@
     try {
       await validate();
       const value = getFieldsValue();
+      if (value[PackageField.DEVICE_PROFILE_INFO] === defaultDeviceProfile) {
+        const data = await getDeviceProfileInfo(defaultDeviceProfile);
+        value[PackageField.DEVICE_PROFILE_INFO] = data.id.id;
+      }
       value[PackageField.DEVICE_PROFILE_INFO] = {
         id: value[PackageField.DEVICE_PROFILE_INFO],
         entityType: 'DEVICE_PROFILE',

-import { getDeviceProfileInfo, getDeviceProfileInfos } from '/@/api/ota';
+import { getDeviceProfileInfos } from '/@/api/ota';
 
 import { FormSchema } from '/@/components/Form';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createPickerSearch } from '/@/utils/pickerSearch';
 
 export enum PackageField {
   TITLE = 'title',
@@ -107,39 +108,25 @@ export const formSchema: FormSchema[] = [
   {
     field: PackageField.DEVICE_PROFILE_INFO,
     label: '所属产品',
-    component: 'ApiSearchSelect',
+    component: 'ApiSelectScrollLoad',
     helpMessage: ['上传的包仅适用于具有所选配置文件的设备'],
     rules: [{ required: true, message: '所属产品为必填项' }],
     defaultValue: 'default',
-    componentProps: ({ formModel, formActionType }) => {
+    componentProps: () => {
       return {
         placeholder: '请选择所属产品',
-        showSearch: true,
         labelField: 'name',
         valueField: 'id',
+        pagination: { page: 0, pageSize: 10 },
         api: async (params: Recordable) => {
-          const data = await getDeviceProfileInfos(params);
-          return data.data.map((item) => ({
+          const { totalElements, data } = await getDeviceProfileInfos(params);
+          const dataList = data.map((item) => ({
             ...item,
             id: item.id.id,
           }));
+          return { items: dataList, total: totalElements };
         },
-        params: (textSearch: string) => {
-          return {
-            page: 0,
-            pageSize: 10,
-            textSearch,
-          };
-        },
-        queryApi: async (id = 'default') => {
-          const data = await getDeviceProfileInfo(id);
-
-          if (formModel[PackageField.DEVICE_PROFILE_INFO] === 'default' && id === 'default') {
-            formActionType.setFieldsValue({ [PackageField.DEVICE_PROFILE_INFO]: data.id.id });
-          }
-
-          return { ...data, id: data.id.id };
-        },
+        ...createPickerSearch(),
       };
     },
   },

@@ -13,7 +13,7 @@
   import { BasicTable, useTable } from '/@/components/Table';
   import { FETCH_SETTING } from '/@/components/Table/src/const';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { isFunction } from '/@/utils/is';
+  import { isArray, isFunction } from '/@/utils/is';
 
   interface DeviceModel extends RawDeviceModal {
     disabled?: boolean;
@@ -225,7 +225,7 @@
       return;
     }
     const { items } = await devicePage({ page: 1, pageSize: 10, ...params, selected: true });
-    selectedTotalList.value = items;
+    selectedTotalList.value = isArray(props.value) && props.value.length === 0 ? [] : items;
   });
 </script>
 

@@ -62,7 +62,7 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
   const flowActionType = useVueFlow({
     id,
     maxZoom: 1,
-    minZoom: 1,
+    minZoom: 0.5,
     panOnScroll: true,
     selectionMode: SelectionMode.Partial,
 

-import { h } from 'vue';
+import { h, unref } from 'vue';
 import { BasicColumn } from '/@/components/Table';
 import { dateUtil } from '/@/utils/dateUtil';
 import Icon from '/@/components/Icon';
 import { Modal } from 'ant-design-vue';
 import { JsonPreview } from '/@/components/CodeEditor';
+import { CopyOutlined } from '@ant-design/icons-vue';
+import { useClipboard } from '@vueuse/core';
+import { useMessage } from '/@/hooks/web/useMessage';
 
 const handleOpenJsonPreviewModal = (title: string, content: string) => {
   Modal.info({
@@ -13,6 +16,15 @@ const handleOpenJsonPreviewModal = (title: string, content: string) => {
   });
 };
 
+const { copy, copied } = useClipboard({ legacy: true });
+const { createMessage } = useMessage();
+
+async function copyText(text: string) {
+  await copy(text);
+
+  unref(copied) ? createMessage.success('复制成功') : createMessage.error('复制失败');
+}
+
 export const columns: BasicColumn[] = [
   {
     title: '事件时间',
@@ -34,13 +46,30 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '实体类型',
-    dataIndex: 'body.entityName',
+    dataIndex: 'body.entityType',
     ellipsis: true,
   },
   {
-    title: '消息ID',
+    title: '实体ID',
     dataIndex: 'body.entityId',
     ellipsis: true,
+    customRender: ({ text }: { text: string }) => {
+      return h('span', { class: 'flex items-center' }, [
+        h('span', { class: 'truncate' }, text),
+        h(CopyOutlined, { class: 'flex-shrink cursor-pointer', onClick: () => copyText(text) }),
+      ]);
+    },
+  },
+  {
+    title: '消息ID',
+    dataIndex: 'body.msgId',
+    ellipsis: true,
+    customRender: ({ text }: { text: string }) => {
+      return h('span', { class: 'flex items-center' }, [
+        h('span', { class: 'truncate' }, text),
+        h(CopyOutlined, { class: 'flex-shrink cursor-pointer', onClick: () => copyText(text) }),
+      ]);
+    },
   },
   {
     title: '消息类型',

@@ -80,7 +80,7 @@
 <template>
   <BasicDrawer
     v-model:visible="visible"
-    :width="!nodeData?.created ? '55%' : '40%'"
+    :width="!nodeData?.created ? '55%' : '50%'"
     showFooter
     showCancelBtn
     showOkBtn

@@ -21,7 +21,7 @@
 
 <template>
   <section>
-    <ApiSelect v-bind="$attrs">
+    <ApiSelect class="!w-56" v-bind="$attrs">
       <template #dropdownRender="{ menuNode }">
         <Options :menuNode="menuNode" />
         <Divider class="!my-2" />

@@ -217,7 +217,7 @@ export const getFormSchemas = (hasAlarmNotify: Ref<boolean>): FormSchema[] => {
         const { setFieldsValue } = formActionType;
         return {
           api: async () => {
-            return await getDeviceProfile(deviceType);
+            return await getDeviceProfile(deviceType, true);
           },
           labelField: 'name',
           valueField: 'id',
@@ -283,7 +283,10 @@ export const getFormSchemas = (hasAlarmNotify: Ref<boolean>): FormSchema[] => {
         return {
           api: async (params: Record<'organizationId' | 'deviceProfileId', string>) => {
             if (params.deviceProfileId && params.organizationId) {
-              const result = await byOrganizationIdGetMasterDevice(params);
+              const result = await byOrganizationIdGetMasterDevice({
+                ...params,
+                isSceneLinkage: true,
+              });
               if (result) {
                 return result.map((item) => ({
                   ...item,

@@ -147,7 +147,7 @@ export const getFormSchemas = (
         const { setFieldsValue } = formActionType;
         return {
           api: async () => {
-            return await getDeviceProfile(deviceType);
+            return await getDeviceProfile(deviceType, true);
           },
           labelField: 'name',
           valueField: 'id',
@@ -251,7 +251,10 @@ export const getFormSchemas = (
         return {
           api: async (params: Record<'organizationId' | 'deviceProfileId', string>) => {
             if (params.deviceProfileId && params.organizationId) {
-              const result = await byOrganizationIdGetMasterDevice(params);
+              const result = await byOrganizationIdGetMasterDevice({
+                ...params,
+                isSceneLinkage: true,
+              });
               if (result) {
                 return result.map((item) => ({
                   ...item,

@@ -143,7 +143,12 @@
             </div>
             <Tooltip title="删除">
               <Icon
-                v-if="!disabledDrawer && flipFlopListElRef.length > 1"
+                v-if="
+                  !disabledDrawer &&
+                  (type === FlipFlopComponentTypeEnum.FLIP_FLOP
+                    ? flipFlopListElRef.length > 1
+                    : true)
+                "
                 class="ml-2 cursor-pointer"
                 icon="fluent:delete-off-20-regular"
                 size="20"

@@ -17,4 +17,5 @@ export interface SceneLinkageDataType {
   name: string;
   description?: string;
   organizationId: string;
+  isSceneLinkage?: Boolean;
 }

+import { FileItem } from '../types';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 import type { FormSchema } from '/@/components/Form/index';
+import { createImgPreview } from '/@/components/Preview';
 export const schemas: FormSchema[] = [
   {
     field: 'name',
@@ -27,21 +30,99 @@ export const schemas: FormSchema[] = [
   },
   {
     field: 'logo',
-    component: 'Upload',
     label: 'APP Logo',
-    colProps: {
-      span: 24,
+    // component: 'Upload',
+    // colProps: {
+    //   span: 24,
+    // },
+    // slot: 'logoUpload',
+    helpMessage: ['支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过5M '],
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: ({ formModel }) => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        // showUploadList: true,
+        onDownload() {},
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+        onDelete(url: string) {
+          formModel.deleteLogoUrl = url!;
+        },
+      };
     },
-    slot: 'logoUpload',
   },
   {
-    field: 'background',
+    field: 'deleteLogoUrl',
+    label: '',
     component: 'Input',
+    show: false,
+  },
+  {
+    field: 'background',
     label: '登录页背景图片',
-    colProps: {
-      span: 24,
+    // component: 'Input',
+    // colProps: {
+    //   span: 24,
+    // },
+    // slot: 'bgUpload',
+    helpMessage: ['支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过5M'],
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: ({ formModel }) => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif,',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        // showUploadList: true,
+        onDownload() {},
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+        onDelete(url: string) {
+          formModel.deleteBackgroundUrl = url!;
+        },
+      };
     },
-    slot: 'bgUpload',
+  },
+  {
+    field: 'deleteBackgroundUrl',
+    label: '',
+    component: 'Input',
+    show: false,
   },
   {
     field: 'backgroundColor',

+import { FileItem } from '../types';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 import type { FormSchema } from '/@/components/Form/index';
+import { createImgPreview } from '/@/components/Preview';
 
 export const schemas: FormSchema[] = [
   {
@@ -28,30 +31,148 @@ export const schemas: FormSchema[] = [
   },
   {
     field: 'logo',
-    component: 'Upload',
     label: '平台Logo',
-    colProps: {
-      span: 24,
+    // component: 'Upload',
+    // colProps: {
+    //   span: 24,
+    // },
+    // slot: 'logoUpload',
+    helpMessage: ['支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过5M '],
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: ({ formModel }) => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        // showUploadList: true,
+        onDownload() {},
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+        onDelete(url: string) {
+          formModel.deleteLogoUrl = url!;
+        },
+      };
     },
-    slot: 'logoUpload',
+  },
+  {
+    field: 'deleteLogoUrl',
+    label: '',
+    component: 'Input',
+    show: false,
   },
   {
     field: 'icon',
-    component: 'Upload',
     label: '浏览器ico图标',
-    colProps: {
-      span: 24,
+    // component: 'Upload',
+    // colProps: {
+    //   span: 24,
+    // },
+    // slot: 'iconUpload',
+    helpMessage: ['支持.ICO格式，建议尺寸为16*16px '],
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: ({ formModel }) => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        maxSize: 500 * 1024,
+        accept: '.icon,.ico',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        // showUploadList: true,
+        onDownload() {},
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+        onDelete(url: string) {
+          formModel.deleteIconUrl = url!;
+        },
+      };
     },
-    slot: 'iconUpload',
   },
   {
-    field: 'background',
+    field: 'deleteIconUrl',
+    label: '',
     component: 'Input',
+    show: false,
+  },
+  {
+    field: 'background',
     label: '登录页背景图片',
-    colProps: {
-      span: 24,
+    // component: 'Input',
+    // colProps: {
+    //   span: 24,
+    // },
+    // slot: 'bgUpload',
+    helpMessage: ['支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M'],
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: ({ formModel }) => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif,.jfif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        // showUploadList: true,
+        onDownload() {},
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+        onDelete(url: string) {
+          formModel.deleteBackgroundUrl = url!;
+        },
+      };
     },
-    slot: 'bgUpload',
+  },
+  {
+    field: 'deleteBackgroundUrl',
+    label: '',
+    component: 'Input',
+    show: false,
   },
   {
     field: 'backgroundColor',

 import type { FormSchema } from '/@/components/Form/index';
 import { getAreaList } from '/@/api/oem/index';
 import { emailRule, phoneRule } from '/@/utils/rules';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import { FileItem } from '../types';
+import { createImgPreview } from '/@/components/Preview';
 
 export enum Level {
   PROVINCE = 'PROVINCE',
@@ -179,14 +182,53 @@ export const schemas: FormSchema[] = [
     rules: phoneRule,
   },
   {
-    field: 'qrcode',
+    field: 'qrCode',
     label: '联系我们',
     required: true,
-    component: 'Select',
+    // component: 'Select',
+    // slot: 'qrcode',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
     colProps: {
       span: 24,
     },
-    slot: 'qrcode',
+    helpMessage: ['支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M '],
+    componentProps: ({ formModel }) => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              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,
   },
   {
     field: 'id',

@@ -3,7 +3,7 @@
     <Card :bordered="false" class="card">
       <div style="margin-left: -40px">
         <BasicForm @register="registerForm">
-          <template #logoUpload>
+          <!-- <template #logoUpload>
             <ContentUploadText>
               <template #uploadImg>
                 <CustomUploadComp :imgUrl="logoPic" @setImg="handleSetLogoImgUrl" />
@@ -24,7 +24,7 @@
                 </div>
               </template>
             </ContentUploadText>
-          </template>
+          </template> -->
           <template #colorInput="{ model, field }"
             ><Input disabled v-model:value="model[field]">
               <template #prefix> <input type="color" v-model="model[field]" /> </template
@@ -41,6 +41,7 @@
                   :customRequest="customUploadHomeSwiper"
                   :before-upload="beforeUploadHomeSwiper"
                   @change="handleChange"
+                  :remove="handleRemove"
                 >
                   <div v-if="fileList.length < 5">
                     <div>
@@ -74,7 +75,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, unref, onMounted } from 'vue';
+  import { defineComponent, ref, onMounted, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { Loading } from '/@/components/Loading/index';
   import { Card, Upload, Input, Modal } from 'ant-design-vue';
@@ -86,7 +87,9 @@
   import { getAppDesign, updateAppDesign } from '/@/api/oem/index';
   import { Authority } from '/@/components/Authority';
   import ContentUploadText from './ContentUploadText.vue';
-  import { CustomUploadComp } from './customUplaod/index';
+  // import { CustomUploadComp } from './customUplaod/index';
+  import { buildUUID } from '/@/utils/uuid';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   export default defineComponent({
     components: {
@@ -99,7 +102,7 @@
       Modal,
       Authority,
       ContentUploadText,
-      CustomUploadComp,
+      // CustomUploadComp,
     },
     setup() {
       const loading = ref(false);
@@ -193,19 +196,42 @@
         }
       };
 
+      const deleteHomeUrl = ref<any[]>([]);
+      const handleRemove = (file: FileItem) => {
+        deleteHomeUrl.value.push(file.url);
+      };
+
       const handleUpdateInfo = async () => {
         try {
           const fieldValue = getFieldsValue();
+          if (Reflect.has(fieldValue, 'logo')) {
+            const file = (fieldValue.logo || []).at(0) || {};
+            fieldValue.logo = file.url || '';
+          }
+          if (Reflect.has(fieldValue, 'background')) {
+            const file = (fieldValue.background || []).at(0) || {};
+            fieldValue.background = file.url || '';
+          }
           // 做换字段
           const homeSwiper = fileList.value.map((item) => item.url);
           const rotation = homeSwiper.join(',');
 
           compState.value.loading = true;
+          if (Reflect.has(fieldValue, 'deleteLogoUrl') && fieldValue.deleteLogoUrl) {
+            await deleteFilePath(fieldValue?.deleteLogoUrl);
+            Reflect.deleteProperty(fieldValue, 'deleteLogoUrl');
+          }
+          if (Reflect.has(fieldValue, 'deleteBackgroundUrl') && fieldValue.deleteBackgroundUrl) {
+            await deleteFilePath(fieldValue?.deleteBackgroundUrl);
+            Reflect.deleteProperty(fieldValue, 'deleteBackgroundUrl');
+          }
+          if (unref(deleteHomeUrl)?.length) {
+            await Promise.all(unref(deleteHomeUrl).map((item) => deleteFilePath(item)));
+          }
           await updateAppDesign({
             ...fieldValue,
-            background: unref(bgPic),
-            icon: unref(bgPic),
-            logo: unref(logoPic),
+            background: fieldValue.background || '',
+            logo: fieldValue.logo || '',
             rotation,
           });
           compState.value.loading = false;
@@ -227,9 +253,15 @@
             status: 'done',
           });
         }
+        if (res.logo) {
+          res.logo = [{ uid: buildUUID(), name: 'name', url: res.logo } as FileItem];
+        }
+        if (res.background) {
+          res.background = [{ uid: buildUUID(), name: 'name', url: res.background } as FileItem];
+        }
         setFieldsValue(res);
-        logoPic.value = res.logo;
-        bgPic.value = res.background;
+        // logoPic.value = res.logo;
+        // bgPic.value = res.background;
         if (arr[0]?.url === '') return;
         fileList.value = arr;
       });
@@ -252,8 +284,8 @@
             });
           }
           setFieldsValue(res);
-          logoPic.value = res.logo;
-          bgPic.value = res.background;
+          // logoPic.value = res.logo;
+          // bgPic.value = res.background;
           if (arr[0]?.url === '') return;
           fileList.value = arr;
         } catch (e) {
@@ -271,8 +303,8 @@
         customUploadHomeSwiper,
         beforeUploadHomeSwiper,
         handleChange,
-        logoPic,
-        bgPic,
+        // logoPic,
+        // bgPic,
         previewVisible,
         previewImage,
         loading,
@@ -280,6 +312,7 @@
         handleResetInfo,
         handleSetBgImgUrl,
         handleSetLogoImgUrl,
+        handleRemove,
       };
     },
   });

@@ -74,13 +74,13 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, onMounted, unref } from 'vue';
+  import { defineComponent, ref, onMounted } from 'vue';
   import { Card, Upload, Input, Spin } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { schemas } from '../config/CVIDraw.config';
   import { Loading } from '/@/components/Loading/index';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import type { FileItem } from '/@/components/Upload/src/typing';
+  // import type { FileItem } from '/@/components/Upload/src/typing';
   import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index';
   import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
@@ -88,6 +88,9 @@
   import { Authority } from '/@/components/Authority';
   import ContentUploadText from './ContentUploadText.vue';
   import { CustomUploadComp } from './customUplaod/index';
+  import { buildUUID } from '/@/utils/uuid';
+  import { FileItem } from '../types';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   export default defineComponent({
     components: {
@@ -166,18 +169,42 @@
       const handleUpdateInfo = async () => {
         try {
           const fieldValue = getFieldsValue();
+          if (Reflect.has(fieldValue, 'logo')) {
+            const file = (fieldValue.logo || []).at(0) || {};
+            fieldValue.logo = file.url || null;
+          }
+          if (Reflect.has(fieldValue, 'icon')) {
+            const file = (fieldValue.icon || []).at(0) || {};
+            fieldValue.icon = file.url || null;
+          }
+          if (Reflect.has(fieldValue, 'background')) {
+            const file = (fieldValue.background || []).at(0) || {};
+            fieldValue.background = file.url || null;
+          }
           compState.value.loading = true;
-          const newFieldValue = {
+          if (Reflect.has(fieldValue, 'deleteLogoUrl') && fieldValue.deleteLogoUrl) {
+            await deleteFilePath(fieldValue?.deleteLogoUrl);
+            Reflect.deleteProperty(fieldValue, 'deleteLogoUrl');
+          }
+          if (Reflect.has(fieldValue, 'deleteIconUrl') && fieldValue.deleteIconUrl) {
+            await deleteFilePath(fieldValue?.deleteIconUrl);
+            Reflect.deleteProperty(fieldValue, 'deleteIconUrl');
+          }
+          if (Reflect.has(fieldValue, 'deleteBackgroundUrl') && fieldValue.deleteBackgroundUrl) {
+            await deleteFilePath(fieldValue?.deleteBackgroundUrl);
+            Reflect.deleteProperty(fieldValue, 'deleteBackgroundUrl');
+          }
+
+          await updatePlatForm({
             ...fieldValue,
-            logo: unref(logoPic),
-            icon: unref(iconPic),
-            background: unref(bgPic),
-          };
-          await updatePlatForm(newFieldValue);
+            logo: fieldValue.logo || '',
+            icon: fieldValue.icon || '',
+            background: fieldValue.background || '',
+          });
           compState.value.loading = false;
           createMessage.success('保存信息成功');
 
-          setPlatFormInfo(newFieldValue);
+          setPlatFormInfo(fieldValue);
         } catch (e) {
           createMessage.error('保存信息失败');
         }
@@ -197,6 +224,15 @@
 
       onMounted(async () => {
         const res = await getPlatForm();
+        if (res.logo) {
+          res.logo = [{ uid: buildUUID(), name: 'name', url: res.logo }] as any;
+        }
+        if (res.icon) {
+          res.icon = [{ uid: buildUUID(), name: 'name', url: res.icon }] as any;
+        }
+        if (res.background) {
+          res.background = [{ uid: buildUUID(), name: 'name', url: res.background }] as any;
+        }
         setFieldsValue(res);
         logoPic.value = res.logo;
         iconPic.value = res.icon;

@@ -2,7 +2,7 @@
   <div class="card">
     <Card :bordered="false" class="card">
       <BasicForm @register="registerForm">
-        <template #qrcode>
+        <!-- <template #qrcode>
           <ContentUploadText>
             <template #uploadImg>
               <CustomUploadComp :imgUrl="qrcodePic" @setImg="handleSetCodeImgUrl" />
@@ -11,7 +11,7 @@
               <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M </div>
             </template>
           </ContentUploadText>
-        </template>
+        </template> -->
         <template #customProv>
           <BasicForm @register="registerCustomForm" />
         </template>
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, onMounted, ref, computed, watch } from 'vue';
+  import { defineComponent, onMounted, ref, computed } from 'vue';
   import { Card } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { schemas, provSchemas } from '../config/enterPriseInfo.config';
@@ -43,8 +43,11 @@
   import { Authority } from '/@/components/Authority';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
-  import ContentUploadText from './ContentUploadText.vue';
-  import { CustomUploadComp } from './customUplaod/index';
+  // import ContentUploadText from './ContentUploadText.vue';
+  // import { CustomUploadComp } from './customUplaod/index';
+  import { buildUUID } from '/@/utils/uuid';
+  import { FileItem } from '../types';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   export default defineComponent({
     components: {
@@ -52,8 +55,8 @@
       BasicForm,
       Loading,
       Authority,
-      ContentUploadText,
-      CustomUploadComp,
+      // ContentUploadText,
+      // CustomUploadComp,
     },
     setup() {
       const userInfo: any = getAuthCache(USER_INFO_KEY);
@@ -73,11 +76,8 @@
         loading: false,
         tip: '拼命加载中...',
       });
-      const [
-        registerForm,
-        { getFieldsValue, setFieldsValue, validate, clearValidate, validateFields },
-      ] = useForm({
-        labelWidth: 80,
+      const [registerForm, { getFieldsValue, setFieldsValue, validate, clearValidate }] = useForm({
+        labelWidth: 90,
         schemas,
         showResetButton: false,
         showSubmitButton: false,
@@ -100,26 +100,30 @@
 
       const { createMessage } = useMessage();
 
-      const qrcodePic = ref();
-      const handleSetCodeImgUrl = (d) => {
-        qrcodePic.value = d;
-      };
-      watch(
-        () => qrcodePic.value,
-        (newValue) => {
-          if (!newValue) validateFields(['qrcode']);
-          else clearValidate('qrcode');
-        }
-      );
+      // const qrcodePic = ref();
+      // const handleSetCodeImgUrl = (d) => {
+      //   qrcodePic.value = d;
+      // };
+      // watch(
+      //   () => qrcodePic.value,
+      //   (newValue) => {
+      //     if (!newValue) validateFields(['qrcode']);
+      //     else clearValidate('qrcode');
+      //   }
+      // );
       // 更新
       const handleUpdateInfo = async () => {
         try {
           const fieldsValue = getFieldsValue();
           const { nameTown } = getNameTown();
+          if (Reflect.has(fieldsValue, 'qrCode')) {
+            const file = (fieldsValue.qrCode || []).at(0) || {};
+            fieldsValue.qrCode = file.url || null;
+          }
           const newFieldValue: any = {
             ...fieldsValue,
             codeTown: nameTown,
-            qrCode: qrcodePic.value,
+            // qrCode: qrcodePic.value,
           };
           delete newFieldValue.nameProv;
           delete newFieldValue.nameCity;
@@ -139,9 +143,9 @@
             'id',
           ];
           if (newFieldValue.qrCode == undefined || newFieldValue.qrCode == '') {
-            validateArray.push('qrcode');
+            validateArray.push('qrCode');
           } else {
-            const findExistIndex = validateArray.findIndex((o) => o == 'qrcode');
+            const findExistIndex = validateArray.findIndex((o) => o == 'qrCode');
             if (findExistIndex !== -1) {
               validateArray.splice(findExistIndex, 1);
             }
@@ -158,6 +162,10 @@
           const values = await validate(validateArray);
           if (!values) return;
           compState.value.loading = true;
+          if (Reflect.has(newFieldValue, 'deleteUrl') && newFieldValue.deleteUrl) {
+            await deleteFilePath(newFieldValue?.deleteUrl);
+            Reflect.deleteProperty(newFieldValue, 'deleteUrl');
+          }
           await updateEnterPriseDetail(newFieldValue);
           createMessage.success('更新信息成功');
           setEnterPriseInfo(newFieldValue);
@@ -189,19 +197,22 @@
           });
           setFieldsValue({ nameCountry: codeCountry });
         }
-        setFieldsValue(res);
-        qrcodePic.value = res.qrCode;
+        if (res.qrCode) {
+          res.qrCode = [{ uid: buildUUID(), name: 'name', url: res.qrCode } as FileItem];
+        }
+        setFieldsValue({ ...res, qrcode: res.qrCode });
+        // qrcodePic.value = res.qrCode;
       });
 
       return {
         registerForm,
         compState,
-        qrcodePic,
         handleUpdateInfo,
         registerCustomForm,
         loading,
         isWhereAdmin,
-        handleSetCodeImgUrl,
+        // qrcodePic,
+        // handleSetCodeImgUrl,
       };
     },
   });

 export interface FileItem {
+  size: number;
   uid: string;
   name?: string;
   status?: string;

@@ -65,8 +65,22 @@ export const formSchema: FormSchema[] = [
     label: t('routes.common.common.sort'), //排序
     component: 'InputNumber',
     required: true,
+    dynamicRules: () => {
+      return [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (Number(value) < -2147483648 || Number(value) > 2147483647) {
+              return Promise.reject('取值范围是-2147483648到2147483647');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
     componentProps: {
-      maxLength: 32,
+      min: -2147483648,
+      max: 2147483647,
     },
   },
   {

@@ -9,7 +9,7 @@ import {
 import { PollCommandInput, ModeEnum } from '../PollCommandInput';
 import { DeviceProfileModel } from '/@/api/device/model/deviceModel';
 import { JSONEditorValidator } from '/@/components/CodeEditor/src/JSONEditor';
-import { BooleanStringEnum, TimeUnitEnum, TimeUnitNameEnum } from '/@/enums/toolEnum';
+import { TimeUnitEnum, TimeUnitNameEnum } from '/@/enums/toolEnum';
 import { dateUtil } from '/@/utils/dateUtil';
 import { ProductPicker, validateProductPicker } from '../ProductPicker';
 import { useGlobSetting } from '/@/hooks/setting';
@@ -386,16 +386,15 @@ export const formSchemas: FormSchema[] = [
     component: 'RadioGroup',
     label: '时间单位',
     ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.POLL,
-    defaultValue:
-      disabledTaskCenterExecuteIntervalUnitSecond === BooleanStringEnum.TRUE
-        ? TimeUnitEnum.MINUTE
-        : TimeUnitEnum.SECOND,
+    defaultValue: disabledTaskCenterExecuteIntervalUnitSecond
+      ? TimeUnitEnum.MINUTE
+      : TimeUnitEnum.SECOND,
     componentProps: () => {
       const options = [
         { label: TimeUnitNameEnum.MINUTE, value: TimeUnitEnum.MINUTE },
         { label: TimeUnitNameEnum.HOUR, value: TimeUnitEnum.HOUR },
       ];
-      if (disabledTaskCenterExecuteIntervalUnitSecond === BooleanStringEnum.FALSE) {
+      if (!disabledTaskCenterExecuteIntervalUnitSecond) {
         options.unshift({ label: TimeUnitNameEnum.SECOND, value: TimeUnitEnum.SECOND });
       }
       return {

@@ -65,7 +65,7 @@
         unref(getRecord).id,
         !unref(getRecord).state ? StateEnum.ENABLE : StateEnum.CLOSE
       );
-      createMessage.success('更新状态成功');
+      createMessage.success(`${unref(getRecord).state ? '禁用' : '启用'}成功`);
       props.reload?.();
     } catch (error) {
       throw error;

@@ -423,7 +423,7 @@ export const speedSchema: FormSchema[] = [
     label: '传输租户信息',
     colProps: { span: 12 },
     component: 'CreateSpeed',
-    defaultValue: '0',
+    // defaultValue: '0',
     changeEvent: 'update:value',
     componentProps: {
       placeholder: '请输入（请输入数字）',
@@ -432,7 +432,6 @@ export const speedSchema: FormSchema[] = [
   },
   {
     field: 'transportDeviceMsgRateLimit',
-    defaultValue: '0',
     label: '传输设备信息',
     colProps: { span: 12 },
     component: 'CreateSpeed',
@@ -443,7 +442,6 @@ export const speedSchema: FormSchema[] = [
   },
   {
     field: 'transportTenantTelemetryMsgRateLimit',
-    defaultValue: '0',
     label: '传输租户遥测消息',
     colProps: { span: 12 },
     component: 'CreateSpeed',
@@ -454,7 +452,6 @@ export const speedSchema: FormSchema[] = [
   },
   {
     field: 'transportDeviceTelemetryMsgRateLimit',
-    defaultValue: '0',
     label: '传输设备遥测消息',
     colProps: { span: 12 },
     component: 'CreateSpeed',
@@ -492,6 +489,7 @@ export const speedSchema: FormSchema[] = [
       placeholder: '请输入（请输入数字）',
       title: '租户REST请求',
     },
+    defaultValue: '',
   },
   {
     field: 'customerServerRestLimitsConfiguration',
@@ -502,6 +500,7 @@ export const speedSchema: FormSchema[] = [
       placeholder: '请输入（请输入数字）',
       title: '客户REST请求',
     },
+    defaultValue: '',
   },
   {
     field: 'tenantEntityExportRateLimit',
@@ -532,6 +531,7 @@ export const speedSchema: FormSchema[] = [
       placeholder: '请输入（请输入数字）',
       title: '会话WS更新',
     },
+    defaultValue: '',
   },
   {
     field: 'cassandraQueryTenantRateLimitsConfiguration',
@@ -542,6 +542,7 @@ export const speedSchema: FormSchema[] = [
       placeholder: '请输入（请输入数字）',
       title: '租户Cassandra查询',
     },
+    defaultValue: '',
   },
   {
     field: 'tenantNotificationRequestsRateLimit',

@@ -182,9 +182,9 @@
           createdTime: isUpdate ? unref(createTime) : Date.now(),
         };
 
-        const defaultInfo = {
-          default: unref(isUpdate) ? isDefault.value : false,
-        };
+        // const defaultInfo = {
+        //   default: unref(isUpdate) ? isDefault.value : false,
+        // };
         Object.assign(
           postAllData,
           {
@@ -192,8 +192,8 @@
           },
           getValuesFormData,
           id,
-          createTime1,
-          defaultInfo
+          createTime1
+          // defaultInfo
         );
         if (!unref(isUpdate)) {
           delete postAllData.id;
@@ -206,14 +206,14 @@
           if (!unref(isUpdate)) {
             await getAllFieldsFunc();
             // return;
-            await saveTenantProfileApi(postAllData);
+            await saveTenantProfileApi({ ...postAllData, isolatedTbRuleEngine: null });
             createMessage.success('租户配置新增成功');
             closeDrawer();
             emit('success');
             resetFields();
           } else {
             await getAllFieldsFunc(true);
-            await saveTenantProfileApi(postAllData);
+            await saveTenantProfileApi({ ...postAllData, isolatedTbRuleEngine: null });
             createMessage.success('租户配置编辑成功');
             closeDrawer();
             emit('success');

@@ -20,6 +20,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
   import { buildUUID } from '/@/utils/uuid';
+  import { deleteFilePath } from '/@/api/oss/ossFileUploader';
 
   export default defineComponent({
     name: 'TenantDrawer',
@@ -102,6 +103,10 @@
               entityType: 'TENANT_PROFILE',
             },
           };
+          if (Reflect.has(values, 'deleteUrl') && values.deleteUrl) {
+            await deleteFilePath(values?.deleteUrl);
+            Reflect.deleteProperty(values, 'deleteUrl');
+          }
           await updateOrCreateTenant(req);
           emit('success');
           createMessage.success(`${unref(isUpdate) ? '编辑' : '新增'}成功`);

@@ -83,7 +83,7 @@ export const tenantFormSchema: FormSchema[] = [
     component: 'ApiUpload',
     changeEvent: 'update:fileList',
     valueField: 'fileList',
-    componentProps: () => {
+    componentProps: ({ formModel }) => {
       return {
         listType: 'picture-card',
         maxFileLimit: 1,
@@ -105,10 +105,19 @@ export const tenantFormSchema: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
+        onDelete(url: string) {
+          formModel.deleteUrl = url!;
+        },
       };
     },
   },
   {
+    field: 'deleteUrl',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
     field: 'name',
     label: '租户名称',
     required: true,

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

@@ -62,29 +62,31 @@
     };
   });
 
-  const sendValue = ref(0);
-  const handleChange = async (value: number) => {
-    sendValue.value = value;
-  };
+  // const sendValue = ref(0);
+  const isChangeValue = ref<number | string>(); //保留以前的值 报错的时候要取以前的值
+  const handleChange = async () => {};
 
   const { loading, doControlSendCommand } = useControlComand();
 
-  const handleAfterChange = () => {
+  const handleAfterChange = (value) => {
     if (unref(getDesign).password) {
-      openModal(true, { password: unref(getDesign).password });
+      openModal(true, { password: unref(getDesign).password, value: value });
       unref(sliderElRef)?.blur();
       return;
     }
-    handleSendCommand();
+    handleSendCommand(value);
   };
 
-  const handleSendCommand = async () => {
+  const handleSendCommand = async (value) => {
     if (props.config.option.mode === ComponentMode.SELECT_PREVIEW) return;
-    const value = unref(sendValue);
     const { option } = props.config || {};
     const result = await doControlSendCommand(option, value);
     unref(sliderElRef)?.blur();
-    sliderValue.value = result ? value : unref(sliderValue);
+    sliderValue.value = result ? value : unref(isChangeValue);
+
+    if (result) {
+      isChangeValue.value = sliderValue.value;
+    }
   };
 
   const { getNumberValue } = useReceiveValue();
@@ -94,6 +96,7 @@
     const [name, value] = latest;
     if (!name && !value) return;
     sliderValue.value = getNumberValue(value);
+    isChangeValue.value = getNumberValue(value);
   };
 
   useDataFetch(props, updateFn);
@@ -125,7 +128,7 @@
               '--slider-top': -(getRatio ? getRatio * 5 : 5) + 'px',
             }"
             class="no-drag"
-            :value="sliderValue"
+            v-model:value="sliderValue"
             :min="getDesign.minNumber"
             :max="getDesign.maxNumber"
             @change="handleChange"

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

@@ -56,7 +56,7 @@
       createMessage.warning('操作密码不正确');
       return;
     }
-    emit('success', unref(persetData));
+    emit('success', unref(persetData).value);
     closeModal();
   };
 </script>

@@ -30,16 +30,17 @@
       const { config } = props;
       const { option } = config;
       const { videoConfig, uuid } = option || {};
-      const { type, url } = await getPlayUrl({
-        id: videoConfig?.id,
-        accessMode: videoConfig?.accessMode,
-        playProtocol: videoConfig?.playProtocol,
-        videoUrl: videoConfig?.videoUrl,
-        params: {
-          deviceId: videoConfig?.deviceId,
-          channelNo: videoConfig?.channelId,
-        },
-      } as unknown as CameraRecord);
+      const { type, url } =
+        (await getPlayUrl({
+          id: videoConfig?.id,
+          accessMode: videoConfig?.accessMode,
+          playProtocol: videoConfig?.playProtocol,
+          videoUrl: videoConfig?.videoUrl,
+          params: {
+            deviceId: videoConfig?.deviceId,
+            channelNo: videoConfig?.channelId,
+          },
+        } as unknown as CameraRecord)) || {};
       playType.value = type;
       playUrl.value = url;
       if (!uuid) return;

@@ -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,11 +82,18 @@
     <DeviceName :config="config" />
     <div class="flex flex-1 flex-col justify-center items-center">
       <SvgIcon
-        :name="isOpenClose ? getDesign.icon : getDesign.iconClose"
+        v-if="getDesign.defaultCustom !== 'custom'"
+        :name="getDesign.iconClose"
         prefix="iconfont"
         :size="getRatio ? getRatio * 70 : 70"
         :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }"
       />
+      <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"
         :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: [
@@ -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');

@@ -48,6 +48,8 @@ export interface UploadFileParams {
 export interface PaginationResult<T = Recordable> {
   items: T[];
   total: number;
+  totalElements?: number;
+  data?: T[];
 }
 
 export interface TBPaginationResult<T = Recordable> {