feat：新增边缘管理

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

+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 { BaseQueryParams } from '../../base';
+import {
+  Configuration,
+  ProvisionConfiguration,
+  TransportConfiguration,
+} from '../../device/model/deviceModel';
+import { ModelOfMatterParams } from '../../device/model/modelOfMatterModel';
+
+export type QueryEdgeInstancePageParams = BaseQueryParams & {
+  name?: string;
+  tenantId?: string;
+  textSearch?: 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;
+  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;
+}

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

@@ -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';
+  }
+};

+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,
+      });
+      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">
+                <span class="truncate font-bold fill-dark-900 text-sm"> {{ item.name }} </span>
+                <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>
+                  <span class="truncate ml-7.5 text-xs" style="color: #00b42a">{{
+                    item.label
+                  }}</span>
+                </div>
+                <div class="truncate !flex">
+                  <span class="text-xs" style="color: #86909c">边缘类型</span>
+                  <span style="color: #4e5969" class="truncate ml-7.5 text-xs">{{
+                    item.type
+                  }}</span>
+                </div>
+                <div class="truncate !flex">
+                  <span class="text-xs" style="color: #86909c">描述</span>
+                  <span style="color: #4e5969" class="truncate ml-7.5 text-xs">
+                    {{ item?.additionalInfo?.description }}
+                  </span>
+                </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_device/' + 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 { 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 { PageWrapper } from '/@/components/Page';
+
+  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 [registerTable, { reload }] = useTable({
+    title: '边缘设备',
+    columns,
+    api: async ({ page, pageSize, textSearch }) => {
+      const res = await edgeDevicePage(
+        {
+          page: page - 1 < 0 ? 0 : page - 1,
+          pageSize,
+          textSearch,
+        },
+        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 goBack() {
+    go('/edge/edge_detail/' + edgeId.value);
+  }
+
+  function handleGoDeviceDetail(record: Recordable) {
+    go(`/edge/edge_device/edge_device_detail/${record?.id?.id}/${edgeId.value}`);
+  }
+</script>
+
+<template>
+  <PageWrapper :title="`边缘设备`" contentBackground @back="goBack">
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleEventIsDistribution"> 分配设备 </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              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"
+    />
+  </PageWrapper>
+</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="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,
+        },
+        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 { CopyOutlined } from '@ant-design/icons-vue';
+  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]" />
+            <CopyOutlined
+              @click="handleCopyRoutingKey(model[field])"
+              class="cursor-pointer"
+              style="font-size: 32px"
+            />
+          </div>
+        </template>
+        <template #secret="{ model, field }">
+          <div class="!flex justify-between items-center gap-5">
+            <a-input disabled v-model:value="model[field]" />
+            <CopyOutlined
+              @click="handleCopySecret(model[field])"
+              class="cursor-pointer"
+              style="font-size: 32px"
+            />
+          </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: 'Input',
+    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 h(
+          Tag,
+          {
+            color: '#00B42A',
+          },
+          text
+        );
+      },
+    },
+    {
+      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';