diff --git a/public/images/device/device-type-3.png b/public/images/device/device-type-3.png
new file mode 100644
index 00000000..3561237e
Binary files /dev/null and b/public/images/device/device-type-3.png differ
diff --git a/src/api/device/category.ts b/src/api/device/category.ts
index d18e3587..53c93ec4 100644
--- a/src/api/device/category.ts
+++ b/src/api/device/category.ts
@@ -16,7 +16,7 @@ export const queryTree = (params?: Record<string, any>) => server.post<CategoryI
  /**
   * 根据Id修改
   */
- export const updateTree = (data: any, id:string) => server.put(`/device/category/${id}`, data)
+ export const updateTree = (id:string,data: any,) => server.put(`/device/category/${id}`, data)
 
  /**
   * 根据Id删除数据
diff --git a/src/api/device/product.ts b/src/api/device/product.ts
index 11c70020..6ae11030 100644
--- a/src/api/device/product.ts
+++ b/src/api/device/product.ts
@@ -1,5 +1,5 @@
 import server from '@/utils/request'
-import { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
+import { DeviceMetadata, ProductItem, DepartmentItem  } from '@/views/device/Product/typings'
 
 /**
  * 根据条件查询产品（不带翻页）
@@ -40,13 +40,78 @@ export const detail = (id: string) => server.get<ProductItem>(`/device-product/$
 
 /**
  * 产品分类
- * @param data
+ * @param data 查询条件
  */
 export const category = (data: any) => server.post('/device/category/_tree', data)
 
+/**
+ * 获取网关类型
+ */
+ export const getProviders = () => server.get('/gateway/device/providers')
+
+ /**
+  * 查询所属部门
+  * @param params 查询条件
+  */
+ export const queryOrgThree = (params?: Record<string, any>) => server.post<DepartmentItem>('/organization/_all/tree', params)
+
+ /**
+  * 获取接入方式
+  * @param data 查询条件
+  */
+ export const queryGatewayList = (data: any) => server.post('/gateway/device/_query/no-paging', data)
+
+ /**
+  * 查询产品列表(分页)
+  * @param data 查询条件
+  */
+ export const queryProductList = (data: any) => server.post('/device-product/_query', data)
+
+ /**
+ * 启用产品
+ * @param productId 产品ID
+ * @param data 
+ * @returns 
+ */
+export const _deploy = (productId: string) => server.post(`/device-product/${productId}/deploy`)
+
+/**
+ * 禁用产品
+ * @param productId 产品ID
+ * @param data 
+ * @returns 
+ */
+export const _undeploy = (productId: string) => server.post(`/device-product/${productId}/undeploy`)
+
+/**
+ * 新增产品
+ * @param data 
+ * @returns 
+ */
+export const addProduct = (data:any) => server.post('/device-product',data)
+
+/**
+ * 修改产品
+ * @param id 产品ID
+ * @param data 
+ * @returns 
+ */
+export const editProduct = (data: any) => server.patch('/device-product', data)
+
+/**
+ * 删除产品
+ * @param id 产品ID
+ */
+export const deleteProduct = (id: string) => server.patch(`/device-product/${id}`)
+
+/**
+ * 检测产品Id唯一性
+ * @param id 产品ID
+ */
+ export const queryProductId = (id: string) => server.post(`/device-product/${id}/exists`)
 /**
  * 保存产品
  * @param data 产品信息
  * @returns 
  */
-export const saveProductMetadata = (data: Record<string, unknown>) => server.patch('/device-product', data)
\ No newline at end of file
+export const saveProductMetadata = (data: Record<string, unknown>) => server.patch('/device-product', data)
diff --git a/src/components/Layout/BasicLayout.tsx b/src/components/Layout/BasicLayout.tsx
index d091510a..18cfcdf2 100644
--- a/src/components/Layout/BasicLayout.tsx
+++ b/src/components/Layout/BasicLayout.tsx
@@ -7,21 +7,16 @@ import {
   provide
 } from 'vue'
 
-import type { DefineComponent, ExtractPropTypes, PropType, CSSProperties, Plugin, App } from 'vue'
+import type { ExtractPropTypes, PropType, CSSProperties} from 'vue'
 import { Layout } from 'ant-design-vue'
-import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'
-import { defaultSettingProps, defaultSettings } from './defaultSetting'
-import type { PureSettings } from './defaultSetting'
+import { defaultSettingProps } from './defaultSetting'
 import type { BreadcrumbProps, RouteContextProps } from './RouteContext'
 import type {
   BreadcrumbRender,
   CollapsedButtonRender, CustomRender,
-  FooterRender,
-  HeaderContentRender,
   HeaderRender,
   MenuContentRender,
   MenuExtraRender,
-  MenuFooterRender,
   MenuHeaderRender,
   MenuItemRender,
   RightContentRender,
diff --git a/src/components/Layout/components/Header/Header.tsx b/src/components/Layout/components/Header/Header.tsx
index f3ff3654..8d7de6d7 100644
--- a/src/components/Layout/components/Header/Header.tsx
+++ b/src/components/Layout/components/Header/Header.tsx
@@ -8,7 +8,6 @@ import { defaultSettingProps } from 'components/Layout/defaultSetting'
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import { CustomRender, MenuDataItem, ProProps, RightContentRender, WithFalse } from 'components/Layout/typings'
 import './index.less'
-import { omit } from 'lodash-es'
 import { RouteRecordRaw } from 'vue-router'
 import { clearMenuItem } from 'components/Layout/utils'
 
diff --git a/src/components/Layout/components/Header/index.tsx b/src/components/Layout/components/Header/index.tsx
index ad2a8461..c4bfc014 100644
--- a/src/components/Layout/components/Header/index.tsx
+++ b/src/components/Layout/components/Header/index.tsx
@@ -1,13 +1,8 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import PropTypes from 'ant-design-vue/es/_util/vue-types';
-import type { MenuDataItem, WithFalse, ProProps, CustomRender, RightContentRender } from '../../typings'
-import { siderMenuProps } from '../SiderMenu/SiderMenu'
-import { defaultSettingProps } from 'components/Layout/defaultSetting'
+import type { ExtractPropTypes } from 'vue'
 import Header, { headerProps } from './Header'
 import { useRouteContext } from 'components/Layout/RouteContext'
 import type { RouteRecordRaw } from 'vue-router'
 import { clearMenuItem } from 'components/Layout/utils'
-import DefaultSetting from '../../../../../config/config'
 import { Layout } from 'ant-design-vue'
 
 export const headerViewProps = {
diff --git a/src/components/Layout/components/PageContainer/index.tsx b/src/components/Layout/components/PageContainer/index.tsx
index e2763276..6ae909b1 100644
--- a/src/components/Layout/components/PageContainer/index.tsx
+++ b/src/components/Layout/components/PageContainer/index.tsx
@@ -195,6 +195,7 @@ const PageContainer = defineComponent({
       const extra = getSlotVNode<DefaultPropRender>(slots, props, 'extra');
       const extraContent = getSlotVNode<DefaultPropRender>(slots, props, 'extraContent');
       const subTitle = getSlotVNode<DefaultPropRender>(slots, props, 'subTitle');
+      const title = getSlotVNode<DefaultPropRender>(slots, props, 'title');
 
       // @ts-ignore
       return (
@@ -202,6 +203,7 @@ const PageContainer = defineComponent({
           {...props}
           prefixCls={undefined}
           ghost={ghost.value}
+          title={title}
           subTitle={subTitle}
           content={headerContent}
           // tags={tags}
diff --git a/src/components/Layout/components/SiderMenu/SiderMenu.tsx b/src/components/Layout/components/SiderMenu/SiderMenu.tsx
index 29587b4a..89496a93 100644
--- a/src/components/Layout/components/SiderMenu/SiderMenu.tsx
+++ b/src/components/Layout/components/SiderMenu/SiderMenu.tsx
@@ -18,10 +18,6 @@ import './SiderMenu.less'
 import { computed } from 'vue'
 import { omit } from 'lodash-es'
 
-export type PrivateSiderMenuProps = {
-  matchMenuKeys?: string[];
-}
-
 const { Sider } = Layout
 
 export const defaultRenderLogo = (logo?: CustomRender, logoStyle?: CSSProperties): CustomRender => {
@@ -89,7 +85,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) =
   const {
     collapsed,
     collapsedWidth = 48,
-    menuExtraRender = false,
     menuContentRender = false,
     collapsedButtonRender = defaultRenderCollapsedButton,
   } = props;
@@ -97,7 +92,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) =
   const context = useRouteContext();
   const sSideWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
 
-  const extraDom = menuExtraRender && menuExtraRender(props);
 
   const handleSelect = ($event: string[]) => {
     if (props.onSelect) {
diff --git a/src/components/PermissionButton/index.vue b/src/components/PermissionButton/index.vue
index 735fbf69..9ec5b437 100644
--- a/src/components/PermissionButton/index.vue
+++ b/src/components/PermissionButton/index.vue
@@ -4,14 +4,14 @@
       <a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
         <a-tooltip v-if="tooltip" v-bind="tooltip">
           <slot v-if="noButton"></slot>
-          <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+          <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
             <slot></slot>
             <template #icon>
               <slot name="icon"></slot>
             </template>
           </a-button>
         </a-tooltip>
-        <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+        <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
           <slot></slot>
           <template #icon>
             <slot name="icon"></slot>
@@ -22,7 +22,7 @@
     <template v-else-if="tooltip">
       <a-tooltip v-bind="tooltip">
         <slot v-if="noButton"></slot>
-        <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+        <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
           <slot></slot>
           <template #icon>
             <slot name="icon"></slot>
@@ -32,7 +32,7 @@
     </template>
     <template v-else>
       <slot v-if="noButton"></slot>
-      <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+      <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
         <slot></slot>
         <template #icon>
           <slot name="icon"></slot>
@@ -42,7 +42,7 @@
   </template>
   <a-tooltip v-else title="没有权限">
     <slot v-if="noButton"></slot>
-    <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+    <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
       <slot></slot>
       <template #icon>
         <slot name="icon"></slot>
@@ -54,6 +54,12 @@
 import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue'
 import { usePermissionStore } from '@/store/permission';
 
+interface PermissionButtonEmits {
+  (e: 'click', data: MouseEvent): void;
+}
+
+const emits = defineEmits<PermissionButtonEmits>()
+
 interface PermissionButtonProps extends ButtonProps {
   tooltip?: TooltipProps;
   popConfirm?: PopconfirmProps;
@@ -80,6 +86,9 @@ const _isPermission = computed(() =>
       : false
     : true
 )
+const handleClick = (e: MouseEvent) => {
+  emits('click', e)
+}
 </script>
 <style scoped lang="less">
 
diff --git a/src/router/index.ts b/src/router/index.ts
index af006514..91ae60a0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import menus, { LoginPath } from './menu'
-import { getToken } from '@/utils/comm'
+import { cleanToken, getToken } from '@/utils/comm'
 import { useUserInfo } from '@/store/userInfo'
 import { useSystem } from '@/store/system'
 
@@ -27,20 +27,25 @@ router.beforeEach((to, from, next) => {
       } else {
         const userInfo = useUserInfo()
         const system = useSystem()
-        if (!userInfo.$state.userInfos.username) {
-          userInfo.getUserInfo()
-          system.getSystemVersion().then((menuData: any[]) => {
-            menuData.forEach(r => {
-              router.addRoute('main', r)
-            })
-            const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
-            if(to.path === redirect) {
-              next({ ...to, replace: true })
-            } else {
-              next({ path: redirect })
-            }
-          })
 
+        if (!userInfo.userInfos.username) {
+          userInfo.getUserInfo().then(() => {
+            system.getSystemVersion().then((menuData: any[]) => {
+              menuData.forEach(r => {
+                router.addRoute('main', r)
+              })
+              const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
+              if(to.path === redirect) {
+                next({ ...to, replace: true })
+              } else {
+                next({ path: redirect })
+              }
+            })
+          }).catch(() => {
+            console.log('userInfo', userInfo)
+            cleanToken()
+            next({ path: LoginPath })
+          })
         } else {
           next()
         }
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 20a8ca67..e9288584 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -153,5 +153,10 @@ export default [
     {
       path: '/iot/device/Category',
         component: () => import('@/views/device/Category/index.vue')
-    }
+    } ,
+    // 产品
+     {
+      path: '/iot/device/Product',
+      component: () => import('@/views/device/Product/index.vue')
+     }
 ]
\ No newline at end of file
diff --git a/src/utils/comm.ts b/src/utils/comm.ts
index 3dd3d9fa..e7b4363f 100644
--- a/src/utils/comm.ts
+++ b/src/utils/comm.ts
@@ -1,7 +1,5 @@
 import type { Slots } from 'vue'
 import { TOKEN_KEY } from '@/utils/variable'
-import { Terms } from 'components/Search/types'
-import { urlReg } from '@/utils/regular'
 
 /**
  * 静态图片资源处理
@@ -40,6 +38,10 @@ export const getToken = () => {
   return LocalStore.get(TOKEN_KEY)
 }
 
+export const cleanToken = () => {
+  LocalStore.remove(TOKEN_KEY)
+}
+
 /**
  * TreeSelect过滤
  * @param value 过滤值
diff --git a/src/views/device/Category/components/modifyModal/index.vue b/src/views/device/Category/components/modifyModal/index.vue
index ea420fa9..371b7900 100644
--- a/src/views/device/Category/components/modifyModal/index.vue
+++ b/src/views/device/Category/components/modifyModal/index.vue
@@ -13,23 +13,24 @@
     >
         <a-form
             layout="vertical"
-            v-model="formModel"
-            :rules="rules"
             ref="formRef"
+            :rules="rules"
+            :model="formModel"
         >
-            <a-form-item label="名称" name="name" v-bind="validateInfos.name">
-                <a-input v-model:value="formModel.name" :maxlength="64" />
+            <a-form-item label="名称" name="name">
+                <a-input
+                    v-model:value="formModel.name"
+                    :maxlength="64"
+                    placeholder="请输入名称"
+                />
             </a-form-item>
-            <a-form-item
-                label="排序"
-                name="sortIndex"
-                v-bind="validateInfos.sortIndex"
-            >
+            <a-form-item label="排序" name="sortIndex">
                 <a-input-number
                     style="width: 100%"
                     id="inputNumber"
                     v-model:value="formModel.sortIndex"
                     :min="1"
+                    placeholder="请输入排序"
                 />
             </a-form-item>
             <a-form-item label="说明">
@@ -37,6 +38,7 @@
                     v-model:value="formModel.description"
                     show-count
                     :maxlength="200"
+                    placeholder="请输入说明"
                 />
             </a-form-item>
         </a-form>
@@ -44,10 +46,12 @@
 </template>
 <script setup lang="ts" name="modifyModal">
 import { PropType } from 'vue';
-import { Form } from 'ant-design-vue';
-import { queryTree } from '@/api/device/category';
+import { Form, message } from 'ant-design-vue';
+import { queryTree, saveTree, updateTree } from '@/api/device/category';
 import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
 import { list } from '@/api/iot-card/home';
+import { number } from 'echarts';
+
 const emits = defineEmits(['refresh']);
 const formRef = ref();
 const useForm = Form.useForm;
@@ -65,8 +69,8 @@ const props = defineProps({
         default: 0,
     },
     isChild: {
-        type: Boolean,
-        default: false,
+        type: Number,
+        default: 0,
     },
 });
 interface formState {
@@ -75,6 +79,11 @@ interface formState {
     description: string;
 }
 const listData = ref([]);
+const childArr = ref([]);
+const arr = ref([]);
+const updateObj = ref({});
+const addObj = ref({});
+const addParams = ref({});
 /**
  * 表单数据
  */
@@ -84,8 +93,8 @@ const formModel = ref<formState>({
     description: '',
 });
 const rules = ref({
-    name: [{ required: true, message: '请输入名称' }],
-    sortIndex: [{ required: true, message: '请输入排序' }],
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    sortIndex: [{ required: true, message: '请输入排序', trigger: 'blur' }],
 });
 const visible = ref(false);
 const { resetFields, validate, validateInfos } = useForm(
@@ -96,53 +105,99 @@ const { resetFields, validate, validateInfos } = useForm(
  * 提交数据
  */
 const submitData = async () => {
-    validate()
-        .then(async () => {})
-        .catch((error: ValidateErrorEntity<formState>) => {});
+    formRef.value.validate().then(async () => {
+        addParams.value = {};
+        if (props.isAdd === 0) {
+            if (props.isChild === 1) {
+                addParams.value = {
+                    ...formModel.value,
+                    sortIndex:
+                        childArr.value[childArr.value.length - 1].sortIndex + 1,
+                    parentId: addObj.value.id,
+                };
+            } else if (props.isChild === 2) {
+                addParams.value = {
+                    parentId: addObj.value.id,
+                    ...formModel.value,
+                    sortIndex: 1,
+                };
+            } else if (props.isChild === 3) {
+                addParams.value = {
+                    ...formModel.value,
+                    sortIndex: arr.value[arr.value.length - 1].sortIndex + 1,
+                };
+            }
+            const res = await saveTree(addParams.value);
+            if (res.status === 200) {
+                message.success('操作成功！');
+                visible.value = false;
+                emits('refresh');
+            } else {
+                message.error('操作失败！');
+            }
+        } else if (props.isAdd === 2) {
+            const id = updateObj.value.id;
+            const updateParams = {
+                ...formModel.value,
+                id: updateObj.value.id,
+                key: updateObj.value.key,
+                parentId: updateObj.value.parentId,
+            };
+            const res = await updateTree(id, updateParams);
+            if (res.status === 200) {
+                message.success('操作成功！');
+                visible.value = false;
+                emits('refresh');
+            } else {
+                message.error('操作失败！');
+            }
+        }
+    });
 };
 /**
  * 显示弹窗
  */
 const show = (row: any) => {
+    //新增
     if (props.isAdd === 0) {
-        //新增
-        if (props.isChild) {
-            //存在子类
+        if (props.isChild === 1) {
+            addObj.value = row;
             if (row.children && row.children.length > 0) {
-                let childArr = [];
-                childArr = row.children.sort(compare('sortIndex'));
+                childArr.value = row.children.sort(compare('sortIndex'));
                 formModel.value = {
                     name: '',
-                    sortIndex: childArr[childArr.length - 1].sortIndex + 1,
+                    sortIndex:
+                        childArr.value[childArr.value.length - 1].sortIndex + 1,
                     description: '',
                 };
-            } else {
+                visible.value = true;
+            }
+        } else if (props.isChild === 3) {
+            arr.value = listData.value.sort(compare('sortIndex'));
+            if (arr.value.length > 0) {
                 formModel.value = {
                     name: '',
-                    sortIndex: 1,
+                    sortIndex: arr.value[arr.value.length - 1].sortIndex + 1,
                     description: '',
                 };
             }
-        } else {
-            let arr = [];
-            arr = listData.value.sort(compare('sortIndex'));
-            if (arr.length > 0) {
-                formModel.value = {
-                    name: '',
-                    sortIndex: arr[arr.length - 1].sortIndex + 1,
-                    description: '',
-                };
+            visible.value = true;
+        } else if (props.isChild === 2) {
+            if (row.level === 5) {
+                message.warning('树形结构最多添加5层');
+                visible.value = false;
             } else {
+                addObj.value = row;
                 formModel.value = {
                     name: '',
                     sortIndex: 1,
                     description: '',
                 };
+                visible.value = true;
             }
         }
-
-        visible.value = true;
     } else if (props.isAdd === 2) {
+        updateObj.value = row;
         // 编辑
         formModel.value = {
             name: row.name,
@@ -152,10 +207,7 @@ const show = (row: any) => {
         visible.value = true;
     }
 };
-/**
- * 判断是新增还是编辑
- */
-const judgeIsAdd = () => {};
+
 /**
  * 排序
  */
@@ -183,7 +235,6 @@ const compare = (property: any) => {
         const res = await queryTree(params);
         if (res.status === 200) {
             listData.value = res.result;
-            console.log(listData.value, 'listData.value');
         }
     };
 /**
diff --git a/src/views/device/Category/index.vue b/src/views/device/Category/index.vue
index f97ba614..e8e28b13 100644
--- a/src/views/device/Category/index.vue
+++ b/src/views/device/Category/index.vue
@@ -1,7 +1,7 @@
 <!--产品分类 -->
 <template>
     <a-card class="product-category">
-        <Search :columns="query.columns" target="category" />
+        <Search :columns="query.columns" target="category" @search="search" />
         <JTable
             ref="tableRef"
             :columns="table.columns"
@@ -57,7 +57,7 @@
             :title="title"
             :isAdd="isAdd"
             :isChild="isChild"
-            @refresh="() => modifyRef.value?.reload()"
+            @refresh="refresh"
         />
     </a-card>
 </template>
@@ -73,34 +73,41 @@ const dataSource = ref([]);
 const currentForm = ref({});
 const title = ref('');
 const isAdd = ref(0);
-const isChild = ref(false);
+const isChild = ref(0);
 // 筛选
 const query = reactive({
     columns: [
         {
             title: '名称',
             dataIndex: 'name',
-            ellipsis: true,
+            key: 'name',
+            search: {
+                type: 'string',
+            },
         },
         {
             title: '排序',
             dataIndex: 'sortIndex',
-            valueType: 'digit',
-            sorter: true,
+            key: 'sortIndex',
+            search: {
+                type: 'number',
+            },
+            scopedSlots: true,
         },
         {
             title: '描述',
             key: 'description',
-            ellipsis: true,
             dataIndex: 'description',
-            filters: true,
-            onFilter: true,
+            search: {
+                type: 'string',
+            },
         },
         {
             title: '操作',
-            valueType: 'option',
-            width: 200,
+            key: 'action',
             fixed: 'right',
+            width: 250,
+            scopedSlots: true,
         },
     ],
     params: {
@@ -150,8 +157,12 @@ const getActions = (
             onClick: () => {
                 title.value = '新增子分类';
                 isAdd.value = 0;
-                isChild.value = true;
                 currentForm.value = {};
+                if (data.children && data.children.length > 0) {
+                    isChild.value = 1;
+                } else {
+                    isChild.value = 2;
+                }
                 nextTick(() => {
                     modifyRef.value.show(data);
                 });
@@ -187,6 +198,7 @@ const table = reactive({
             title: '排序',
             dataIndex: 'sortIndex',
             key: 'sortIndex',
+            scopedSlots: true,
         },
         {
             title: '说明',
@@ -207,13 +219,19 @@ const table = reactive({
     add: async () => {
         title.value = '新增分类';
         isAdd.value = 0;
-        isChild.value = false;
+        isChild.value = 3;
         nextTick(() => {
             modifyRef.value.show(currentForm.value);
         });
     },
+    /**
+     * 刷新表格数据
+     */
+    refresh: () => {
+        tableRef.value?.reload();
+    },
 });
-const { add, columns } = toRefs(table);
+const { add, columns, refresh } = toRefs(table);
 /**
  * 初始化
  */
diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue
index 2e1d2544..fcfed0f5 100644
--- a/src/views/device/Instance/index.vue
+++ b/src/views/device/Instance/index.vue
@@ -1,12 +1,12 @@
 <template>
-    <JTable 
-        ref="instanceRef" 
-        :columns="columns" 
-        :request="query" 
-        :defaultParams="{sorts: [{name: 'createTime', order: 'desc'}]}" 
+    <JTable
+        ref="instanceRef"
+        :columns="columns"
+        :request="query"
+        :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
         :rowSelection="{
             selectedRowKeys: _selectedRowKeys,
-            onChange: onSelectChange
+            onChange: onSelectChange,
         }"
         @cancelSelect="cancelSelect"
         :params="params"
@@ -17,37 +17,79 @@
                 <a-dropdown>
                     <a-button>批量操作 <AIcon type="DownOutlined" /></a-button>
                     <template #overlay>
-                    <a-menu>
-                        <a-menu-item>
-                            <a-button @click="exportVisible = true"><AIcon type="ExportOutlined" />批量导出设备</a-button>
-                        </a-menu-item>
-                        <a-menu-item>
-                            <a-button @click="importVisible = true"><AIcon type="ImportOutlined" />批量导入设备</a-button>
-                        </a-menu-item>
-                        <a-menu-item>
-                            <a-popconfirm @confirm="activeAllDevice" title="确认激活全部设备？">
-                                <a-button type="primary" ghost><AIcon type="CheckCircleOutlined" />激活全部设备</a-button>
-                            </a-popconfirm>
-                        </a-menu-item>
-                        <a-menu-item>
-                            <a-button @click="syncDeviceStatus" type="primary"><AIcon type="SyncOutlined" />同步设备状态</a-button>
-                        </a-menu-item>
-                        <a-menu-item v-if="_selectedRowKeys.length">
-                            <a-popconfirm @confirm="delSelectedDevice" title="已启用的设备无法删除，确认删除选中的禁用状态设备？">
-                                <a-button type="primary" danger><AIcon type="DeleteOutlined" />删除选中设备</a-button>
-                            </a-popconfirm>
-                        </a-menu-item>
-                        <a-menu-item v-if="_selectedRowKeys.length" title="确认激活选中设备?">
-                            <a-popconfirm @confirm="activeSelectedDevice" >
-                                <a-button type="primary"><AIcon type="CheckOutlined" />激活选中设备</a-button>
-                            </a-popconfirm>
-                        </a-menu-item>
-                        <a-menu-item v-if="_selectedRowKeys.length">
-                            <a-popconfirm @confirm="disabledSelectedDevice" title="确认禁用选中设备?">
-                                <a-button type="primary" danger><AIcon type="StopOutlined" />禁用选中设备</a-button>
-                            </a-popconfirm>
-                        </a-menu-item>
-                    </a-menu>
+                        <a-menu>
+                            <a-menu-item>
+                                <a-button @click="exportVisible = true"
+                                    ><AIcon
+                                        type="ExportOutlined"
+                                    />批量导出设备</a-button
+                                >
+                            </a-menu-item>
+                            <a-menu-item>
+                                <a-button @click="importVisible = true"
+                                    ><AIcon
+                                        type="ImportOutlined"
+                                    />批量导入设备</a-button
+                                >
+                            </a-menu-item>
+                            <a-menu-item>
+                                <a-popconfirm
+                                    @confirm="activeAllDevice"
+                                    title="确认激活全部设备？"
+                                >
+                                    <a-button type="primary" ghost
+                                        ><AIcon
+                                            type="CheckCircleOutlined"
+                                        />激活全部设备</a-button
+                                    >
+                                </a-popconfirm>
+                            </a-menu-item>
+                            <a-menu-item>
+                                <a-button
+                                    @click="syncDeviceStatus"
+                                    type="primary"
+                                    ><AIcon
+                                        type="SyncOutlined"
+                                    />同步设备状态</a-button
+                                >
+                            </a-menu-item>
+                            <a-menu-item v-if="_selectedRowKeys.length">
+                                <a-popconfirm
+                                    @confirm="delSelectedDevice"
+                                    title="已启用的设备无法删除，确认删除选中的禁用状态设备？"
+                                >
+                                    <a-button type="primary" danger
+                                        ><AIcon
+                                            type="DeleteOutlined"
+                                        />删除选中设备</a-button
+                                    >
+                                </a-popconfirm>
+                            </a-menu-item>
+                            <a-menu-item
+                                v-if="_selectedRowKeys.length"
+                                title="确认激活选中设备?"
+                            >
+                                <a-popconfirm @confirm="activeSelectedDevice">
+                                    <a-button type="primary"
+                                        ><AIcon
+                                            type="CheckOutlined"
+                                        />激活选中设备</a-button
+                                    >
+                                </a-popconfirm>
+                            </a-menu-item>
+                            <a-menu-item v-if="_selectedRowKeys.length">
+                                <a-popconfirm
+                                    @confirm="disabledSelectedDevice"
+                                    title="确认禁用选中设备?"
+                                >
+                                    <a-button type="primary" danger
+                                        ><AIcon
+                                            type="StopOutlined"
+                                        />禁用选中设备</a-button
+                                    >
+                                </a-popconfirm>
+                            </a-menu-item>
+                        </a-menu>
                     </template>
                 </a-dropdown>
             </a-space>
@@ -69,31 +111,44 @@
             >
                 <template #img>
                     <slot name="img">
-                        <img :src="getImage('/device/instance/device-card.png')" />
+                        <img
+                            :src="getImage('/device/instance/device-card.png')"
+                        />
                     </slot>
                 </template>
                 <template #content>
-                    <h3 class="card-item-content-title" @click.stop="handleView(slotProps.id)">{{ slotProps.name }}</h3>
+                    <h3
+                        class="card-item-content-title"
+                        @click.stop="handleView(slotProps.id)"
+                    >
+                        {{ slotProps.name }}
+                    </h3>
                     <a-row>
                         <a-col :span="12">
                             <div class="card-item-content-text">设备类型</div>
-                            <div>{{slotProps.deviceType.text}}</div>
+                            <div>{{ slotProps.deviceType.text }}</div>
                         </a-col>
                         <a-col :span="12">
                             <div class="card-item-content-text">产品名称</div>
-                            <div>{{slotProps.productName}}</div>
+                            <div>{{ slotProps.productName }}</div>
                         </a-col>
                     </a-row>
                 </template>
                 <template #actions="item">
-                    <a-tooltip v-bind="item.tooltip" :title="item.disabled && item.tooltip.title">
+                    <a-tooltip
+                        v-bind="item.tooltip"
+                        :title="item.disabled && item.tooltip.title"
+                    >
                         <a-popconfirm
                             v-if="item.popConfirm"
                             v-bind="item.popConfirm"
                             :disabled="item.disabled"
                         >
                             <a-button :disabled="item.disabled">
-                                <AIcon type="DeleteOutlined" v-if="item.key === 'delete'"  />
+                                <AIcon
+                                    type="DeleteOutlined"
+                                    v-if="item.key === 'delete'"
+                                />
                                 <template v-else>
                                     <AIcon :type="item.icon" />
                                     <span>{{ item.text }}</span>
@@ -101,8 +156,14 @@
                             </a-button>
                         </a-popconfirm>
                         <template v-else>
-                            <a-button :disabled="item.disabled" @click="item.onClick">
-                                <AIcon type="DeleteOutlined" v-if="item.key === 'delete'"  />
+                            <a-button
+                                :disabled="item.disabled"
+                                @click="item.onClick"
+                            >
+                                <AIcon
+                                    type="DeleteOutlined"
+                                    v-if="item.key === 'delete'"
+                                />
                                 <template v-else>
                                     <AIcon :type="item.icon" />
                                     <span>{{ item.text }}</span>
@@ -114,7 +175,10 @@
             </CardBox>
         </template>
         <template #state="slotProps">
-            <a-badge :text="slotProps.state.text" :status="statusMap.get(slotProps.state.value)" />
+            <a-badge
+                :text="slotProps.state === 1 ? ' 正常' : '禁用'"
+                :status="statusMap.get(slotProps.state)"
+            />
         </template>
         <template #action="slotProps">
             <a-space :size="16">
@@ -123,7 +187,11 @@
                     :key="i.key"
                     v-bind="i.tooltip"
                 >
-                    <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm" :disabled="i.disabled">
+                    <a-popconfirm
+                        v-if="i.popConfirm"
+                        v-bind="i.popConfirm"
+                        :disabled="i.disabled"
+                    >
                         <a-button
                             :disabled="i.disabled"
                             style="padding: 0"
@@ -149,43 +217,58 @@
         </template>
     </JTable>
     <Import v-if="importVisible" @close="importVisible = false" />
-    <Export v-if="exportVisible" @close="exportVisible = false" :data="params" />
-    <Process v-if="operationVisible" @close="operationVisible = false" :api="api" :type="type" />
+    <Export
+        v-if="exportVisible"
+        @close="exportVisible = false"
+        :data="params"
+    />
+    <Process
+        v-if="operationVisible"
+        @close="operationVisible = false"
+        :api="api"
+        :type="type"
+    />
     <Save v-if="visible" :data="current" />
 </template>
 
 <script setup lang="ts">
-import { query, _delete, _deploy, _undeploy, batchUndeployDevice, batchDeployDevice, batchDeleteDevice } from '@/api/device/instance'
-import type { ActionsType } from '@/components/Table/index.vue'
+import {
+    query,
+    _delete,
+    _deploy,
+    _undeploy,
+    batchUndeployDevice,
+    batchDeployDevice,
+    batchDeleteDevice,
+} from '@/api/device/instance';
+import type { ActionsType } from '@/components/Table/index.vue';
 import { getImage, LocalStore } from '@/utils/comm';
-import { message } from "ant-design-vue";
-import Import from './Import/index.vue'
-import Export from './Export/index.vue'
-import Process from './Process/index.vue'
-import Save from './Save/index.vue'
+import { message } from 'ant-design-vue';
+import Import from './Import/index.vue';
+import Export from './Export/index.vue';
+import Process from './Process/index.vue';
+import Save from './Save/index.vue';
 import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 
 const instanceRef = ref<Record<string, any>>({});
-const params = ref<Record<string, any>>({})
-const _selectedRowKeys = ref<string[]>([])
-const importVisible = ref<boolean>(false)
-const exportVisible = ref<boolean>(false)
-const visible = ref<boolean>(false)
-const current = ref<Record<string, any>>({})
-const operationVisible = ref<boolean>(false)
-const api = ref<string>('')
-const type = ref<string>('')
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const importVisible = ref<boolean>(false);
+const exportVisible = ref<boolean>(false);
+const visible = ref<boolean>(false);
+const current = ref<Record<string, any>>({});
+const operationVisible = ref<boolean>(false);
+const api = ref<string>('');
+const type = ref<string>('');
 
 const statusMap = new Map();
-statusMap.set('online', 'processing');
-statusMap.set('offline', 'error');
-statusMap.set('notActive', 'warning');
-
+statusMap.set(1, 'processing');
+statusMap.set(0, 'error');
 const columns = [
     {
         title: 'ID',
         dataIndex: 'id',
-        key: 'id'
+        key: 'id',
     },
     {
         title: '设备名称',
@@ -201,206 +284,237 @@ const columns = [
         title: '创建时间',
         dataIndex: 'createTime',
         key: 'createTime',
-        scopedSlots: true
+        scopedSlots: true,
     },
     {
         title: '状态',
         dataIndex: 'state',
         key: 'state',
-        scopedSlots: true
+        scopedSlots: true,
     },
     {
         title: '说明',
         dataIndex: 'describe',
-        key: 'describe'
+        key: 'describe',
     },
     {
         title: '操作',
         key: 'action',
         fixed: 'right',
         width: 250,
-        scopedSlots: true
-    }   
-]
+        scopedSlots: true,
+    },
+];
 
-const paramsFormat = (config: Record<string, any>, _terms: Record<string, any>, name?: string) => {
-    if (config?.terms && Array.isArray(config.terms) && config?.terms.length > 0) {
-      (config?.terms || []).map((item: Record<string, any>, index: number) => {
-        if (item?.type) {
-          _terms[`${name ? `${name}.` : ''}terms[${index}].type`] = item.type;
-        }
-        paramsFormat(item, _terms, `${name ? `${name}.` : ''}terms[${index}]`);
-      });
+const paramsFormat = (
+    config: Record<string, any>,
+    _terms: Record<string, any>,
+    name?: string,
+) => {
+    if (
+        config?.terms &&
+        Array.isArray(config.terms) &&
+        config?.terms.length > 0
+    ) {
+        (config?.terms || []).map(
+            (item: Record<string, any>, index: number) => {
+                if (item?.type) {
+                    _terms[`${name ? `${name}.` : ''}terms[${index}].type`] =
+                        item.type;
+                }
+                paramsFormat(
+                    item,
+                    _terms,
+                    `${name ? `${name}.` : ''}terms[${index}]`,
+                );
+            },
+        );
     } else if (!config?.terms && Object.keys(config).length > 0) {
-      Object.keys(config).forEach((key) => {
-        if (config[key]) {
-          _terms[`${name ? `${name}.` : ''}${key}`] = config[key];
-        }
-      });
+        Object.keys(config).forEach((key) => {
+            if (config[key]) {
+                _terms[`${name ? `${name}.` : ''}${key}`] = config[key];
+            }
+        });
     }
-  }
+};
 
 const handleParams = (config: Record<string, any>) => {
     const _terms: Record<string, any> = {};
     paramsFormat(config, _terms);
-    if(Object.keys(_terms._value).length && Object.keys(_terms).length) {
+    if (Object.keys(_terms._value).length && Object.keys(_terms).length) {
         const url = new URLSearchParams();
         Object.keys(_terms).forEach((key) => {
             url.append(key, _terms[key]);
         });
         return url.toString();
     } else {
-        return ''
+        return '';
     }
-  }
+};
 
 /**
  * 新增
  */
 const handleAdd = () => {
-    visible.value = true
-    current.value = {}
-}
+    visible.value = true;
+    current.value = {};
+};
 
 /**
  * 查看
  */
 const handleView = (id: string) => {
-    message.warn(id + '暂未开发')
-}
+    message.warn(id + '暂未开发');
+};
 
-const getActions = (data: Partial<Record<string, any>>, type: 'card' | 'table'): ActionsType[] => {
-    if(!data) return []
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
+    if (!data) return [];
     const actions = [
         {
             key: 'view',
-            text: "查看",
+            text: '查看',
             tooltip: {
-                title: '查看'
+                title: '查看',
             },
             icon: 'EyeOutlined',
             onClick: () => {
-                handleView(data.id)
-            }
+                handleView(data.id);
+            },
         },
         {
             key: 'edit',
-            text: "编辑",
+            text: '编辑',
             tooltip: {
-                title: '编辑'
+                title: '编辑',
             },
             icon: 'EditOutlined',
             onClick: () => {
-                visible.value = true
-                current.value = data
-            }
+                visible.value = true;
+                current.value = data;
+            },
         },
         {
             key: 'action',
-            text: data.state.value !== 'notActive' ? "禁用" : "启用",
+            text: data.state.value !== 'notActive' ? '禁用' : '启用',
             tooltip: {
-                title: data.state.value !== 'notActive' ? "禁用" : "启用",
+                title: data.state.value !== 'notActive' ? '禁用' : '启用',
             },
-            icon: data.state.value !== 'notActive' ? 'StopOutlined' : 'CheckCircleOutlined',
+            icon:
+                data.state.value !== 'notActive'
+                    ? 'StopOutlined'
+                    : 'CheckCircleOutlined',
             popConfirm: {
-                title: `确认${data.state.value !== 'notActive' ? "禁用" : "启用"}?`,
+                title: `确认${
+                    data.state.value !== 'notActive' ? '禁用' : '启用'
+                }?`,
                 onConfirm: async () => {
-                    let response = undefined
-                    if(data.state.value !== 'notActive') {
-                        response = await _undeploy(data.id)
+                    let response = undefined;
+                    if (data.state.value !== 'notActive') {
+                        response = await _undeploy(data.id);
                     } else {
-                        response = await _deploy(data.id)
+                        response = await _deploy(data.id);
                     }
-                    if(response && response.status === 200) {
-                        message.success('操作成功！')
-                        instanceRef.value?.reload()
+                    if (response && response.status === 200) {
+                        message.success('操作成功！');
+                        instanceRef.value?.reload();
                     } else {
-                        message.error('操作失败！')
+                        message.error('操作失败！');
                     }
-                }
-            }
+                },
+            },
         },
         {
             key: 'delete',
-            text: "删除",
+            text: '删除',
             disabled: data.state.value !== 'notActive',
             tooltip: {
-                title: data.state.value !== 'notActive' ? '已启用的设备不能删除' : '删除'
+                title:
+                    data.state.value !== 'notActive'
+                        ? '已启用的设备不能删除'
+                        : '删除',
             },
             popConfirm: {
                 title: '确认删除?',
                 onConfirm: async () => {
-                    const resp = await _delete(data.id)
-                    if(resp.status === 200) {
-                        message.success('操作成功！')
-                        instanceRef.value?.reload()
+                    const resp = await _delete(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        instanceRef.value?.reload();
                     } else {
-                        message.error('操作失败！')
+                        message.error('操作失败！');
                     }
-                }
+                },
             },
-            icon: 'DeleteOutlined'
-        }
-    ]
-    if(type === 'card') return actions.filter((i: ActionsType) => i.key !== 'view')
-    return actions
-}
+            icon: 'DeleteOutlined',
+        },
+    ];
+    if (type === 'card')
+        return actions.filter((i: ActionsType) => i.key !== 'view');
+    return actions;
+};
 
 const onSelectChange = (keys: string[]) => {
-    _selectedRowKeys.value = [...keys]
-}
+    _selectedRowKeys.value = [...keys];
+};
 
 const cancelSelect = () => {
-    _selectedRowKeys.value = []
-}
+    _selectedRowKeys.value = [];
+};
 
 const handleClick = (dt: any) => {
-    if(_selectedRowKeys.value.includes(dt.id)) {
-        const _index = _selectedRowKeys.value.findIndex(i => i === dt.id)
-        _selectedRowKeys.value.splice(_index, 1)
+    if (_selectedRowKeys.value.includes(dt.id)) {
+        const _index = _selectedRowKeys.value.findIndex((i) => i === dt.id);
+        _selectedRowKeys.value.splice(_index, 1);
     } else {
-        _selectedRowKeys.value = [..._selectedRowKeys.value, dt.id]
+        _selectedRowKeys.value = [..._selectedRowKeys.value, dt.id];
     }
-}
+};
 
 const activeAllDevice = () => {
-    type.value = 'active'
-    const activeAPI = `${BASE_API_PATH}/device-instance/deploy?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}&${handleParams(params)}`;
-    api.value = activeAPI
-    operationVisible.value = true
-}
+    type.value = 'active';
+    const activeAPI = `${BASE_API_PATH}/device-instance/deploy?:X_Access_Token=${LocalStore.get(
+        TOKEN_KEY,
+    )}&${handleParams(params)}`;
+    api.value = activeAPI;
+    operationVisible.value = true;
+};
 
 const syncDeviceStatus = () => {
-    type.value = 'sync'
-    const syncAPI = `${BASE_API_PATH}/device-instance/state/_sync?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}&${handleParams(params)}`;
-    api.value = syncAPI
-    operationVisible.value = true
-}
+    type.value = 'sync';
+    const syncAPI = `${BASE_API_PATH}/device-instance/state/_sync?:X_Access_Token=${LocalStore.get(
+        TOKEN_KEY,
+    )}&${handleParams(params)}`;
+    api.value = syncAPI;
+    operationVisible.value = true;
+};
 
 const delSelectedDevice = async () => {
-    const resp = await batchDeleteDevice(_selectedRowKeys.value)
-    if(resp.status === 200){
-        message.success('操作成功！')
-        _selectedRowKeys.value = []
-        instanceRef.value?.reload()
+    const resp = await batchDeleteDevice(_selectedRowKeys.value);
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        _selectedRowKeys.value = [];
+        instanceRef.value?.reload();
     }
-}
+};
 
 const activeSelectedDevice = async () => {
-    const resp = await batchDeployDevice(_selectedRowKeys.value)
-    if(resp.status === 200){
-        message.success('操作成功！')
-        _selectedRowKeys.value = []
-        instanceRef.value?.reload()
+    const resp = await batchDeployDevice(_selectedRowKeys.value);
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        _selectedRowKeys.value = [];
+        instanceRef.value?.reload();
     }
-}
+};
 
 const disabledSelectedDevice = async () => {
-    const resp = await batchUndeployDevice(_selectedRowKeys.value)
-    if(resp.status === 200){
-        message.success('操作成功！')
-        _selectedRowKeys.value = []
-        instanceRef.value?.reload()
+    const resp = await batchUndeployDevice(_selectedRowKeys.value);
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        _selectedRowKeys.value = [];
+        instanceRef.value?.reload();
     }
-}
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/src/views/device/Product/ChooseCard/index.vue b/src/views/device/Product/ChooseCard/index.vue
new file mode 100644
index 00000000..a60c1753
--- /dev/null
+++ b/src/views/device/Product/ChooseCard/index.vue
@@ -0,0 +1,313 @@
+<template>
+    <div class="card">
+        <div
+            class="card-warp"
+            :class="{ active: active ? 'active' : '' }"
+            @click="handleClick"
+        >
+            <div class="card-content">
+                <a-row :gutter="20">
+                    <a-col :span="10">
+                        <!-- 图片 -->
+                        <div class="card-item-avatar">
+                            <slot name="img"> </slot>
+                        </div>
+                    </a-col>
+                    <a-col :span="14">
+                        <!-- 内容 -->
+                        <slot name="content"></slot>
+                    </a-col>
+                </a-row>
+
+                <!-- 勾选 -->
+                <div v-if="active" class="checked-icon">
+                    <div>
+                        <CheckOutlined />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    SearchOutlined,
+    CheckOutlined,
+    DeleteOutlined,
+} from '@ant-design/icons-vue';
+import { StatusColorEnum } from '@/utils/consts.ts';
+import type { ActionsType } from '@/components/Table/index.vue';
+import { PropType } from 'vue';
+
+type EmitProps = {
+    // (e: 'update:modelValue', data: Record<string, any>): void;
+    (e: 'click', data: Record<string, any>): void;
+};
+
+type TableActionsType = Partial<ActionsType>;
+
+const emit = defineEmits<EmitProps>();
+
+const props = defineProps({
+    value: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => {},
+    },
+    active: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const handleClick = () => {
+    emit('click', props.value);
+};
+</script>
+
+<style lang="less" scoped>
+.card {
+    width: 100%;
+    background-color: #fff;
+    .checked-icon {
+        position: absolute;
+        right: -22px;
+        bottom: -22px;
+        z-index: 2;
+        width: 44px;
+        height: 44px;
+        color: #fff;
+        background-color: red;
+        background-color: #2f54eb;
+        transform: rotate(-45deg);
+
+        > div {
+            position: relative;
+            height: 100%;
+            transform: rotate(45deg);
+
+            > span {
+                position: absolute;
+                top: 6px;
+                left: 6px;
+                font-size: 12px;
+            }
+        }
+    }
+
+    .card-warp {
+        position: relative;
+        border: 1px solid #e6e6e6;
+        height: 66px;
+
+        &.hover {
+            cursor: pointer;
+            box-shadow: 0 0 24px rgba(#000, 0.1);
+        }
+
+        &.active {
+            position: relative;
+            border: 1px solid #2f54eb;
+        }
+
+        .card-content {
+            position: relative;
+            padding: 30px 12px 16px 30px;
+            overflow: hidden;
+            position: relative;
+            top: -16px;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 30px + 10px;
+                display: block;
+                width: 15%;
+                min-width: 64px;
+                height: 2px;
+                // background-image: url('/images/rectangle.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                content: ' ';
+            }
+
+            .card-item-avatar {
+                // position: relative;
+                // top: -16px;
+            }
+
+            .card-state {
+                position: absolute;
+                top: 30px;
+                right: -12px;
+                display: flex;
+                justify-content: center;
+                width: 100px;
+                padding: 2px 0;
+                background-color: rgba(#5995f5, 0.15);
+                transform: skewX(45deg);
+
+                &.success {
+                    background-color: @success-color-deprecated-bg;
+                }
+
+                &.warning {
+                    background-color: rgba(#ff9000, 0.1);
+                }
+
+                &.error {
+                    background-color: rgba(#e50012, 0.1);
+                }
+
+                .card-state-content {
+                    transform: skewX(-45deg);
+                }
+            }
+
+            :deep(.card-item-content-title) {
+                cursor: pointer;
+            }
+        }
+
+        .card-mask {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            color: #fff;
+            background-color: rgba(#000, 0);
+            visibility: hidden;
+            cursor: pointer;
+            transition: all 0.3s;
+
+            > div {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                padding: 0 !important;
+            }
+
+            &.show {
+                background-color: rgba(#000, 0.5);
+                visibility: visible;
+            }
+        }
+    }
+
+    &.item-active {
+        position: relative;
+        color: #2f54eb;
+
+        .checked-icon {
+            display: block;
+        }
+
+        .card-warp {
+            border: 1px solid #2f54eb;
+        }
+    }
+
+    .card-tools {
+        display: flex;
+        margin-top: 8px;
+
+        .card-button {
+            display: flex;
+            flex-grow: 1;
+
+            & > :deep(span, button) {
+                width: 100%;
+                border-radius: 0;
+            }
+
+            :deep(button) {
+                width: 100%;
+                border-radius: 0;
+                background: #f6f6f6;
+                border: 1px solid #e6e6e6;
+                color: #2f54eb;
+
+                &:hover {
+                    background-color: @primary-color-hover;
+                    border-color: @primary-color-hover;
+
+                    span {
+                        color: #fff !important;
+                    }
+                }
+
+                &:active {
+                    background-color: @primary-color-active;
+                    border-color: @primary-color-active;
+
+                    span {
+                        color: #fff !important;
+                    }
+                }
+            }
+
+            &:not(:last-child) {
+                margin-right: 8px;
+            }
+
+            &.delete {
+                flex-basis: 60px;
+                flex-grow: 0;
+
+                :deep(button) {
+                    background: @error-color-deprecated-bg;
+                    border: 1px solid @error-color-outline;
+
+                    span {
+                        color: @error-color !important;
+                    }
+
+                    &:hover {
+                        background-color: @error-color-hover;
+
+                        span {
+                            color: #fff !important;
+                        }
+                    }
+
+                    &:active {
+                        background-color: @error-color-active;
+
+                        span {
+                            color: #fff !important;
+                        }
+                    }
+                }
+            }
+
+            :deep(button[disabled]) {
+                background: @disabled-bg;
+                border-color: @disabled-color;
+
+                span {
+                    color: @disabled-color !important;
+                }
+
+                &:hover {
+                    background-color: @disabled-active-bg;
+                }
+
+                &:active {
+                    background-color: @disabled-active-bg;
+                }
+            }
+
+            // :deep(.ant-tooltip-disabled-compatible-wrapper) {
+            //     width: 100%;
+            // }
+        }
+    }
+}
+</style>
diff --git a/src/views/device/Product/Save/index.vue b/src/views/device/Product/Save/index.vue
new file mode 100644
index 00000000..1c928ba6
--- /dev/null
+++ b/src/views/device/Product/Save/index.vue
@@ -0,0 +1,386 @@
+<!-- 新增、编辑产品 -->
+<template>
+    <a-modal
+        :title="props.title"
+        :maskClosable="false"
+        destroy-on-close
+        v-model:visible="visible"
+        @ok="submitData"
+        @cancel="close"
+        okText="确定"
+        cancelText="取消"
+        v-bind="layout"
+        width="650px"
+    >
+        <div style="margin-top: 10px">
+            <a-form :layout="'vertical'">
+                <a-row type="flex">
+                    <a-col flex="180px">
+                        <a-form-item>
+                            <div class="upload-image-warp-logo">
+                                <div class="upload-image-border-logo">
+                                    <a-upload
+                                        name="file"
+                                        :action="FILE_UPLOAD"
+                                        :headers="headers"
+                                        :showUploadList="false"
+                                        :beforeUpload="beforeUpload"
+                                        @change="handleChange"
+                                        :accept="
+                                            imageTypes && imageTypes.length
+                                                ? imageTypes.toString()
+                                                : ''
+                                        "
+                                    >
+                                        <div class="upload-image-content-logo">
+                                            <div
+                                                class="loading-logo"
+                                                v-if="logoLoading"
+                                            >
+                                                <LoadingOutlined
+                                                    style="font-size: 28px"
+                                                />
+                                            </div>
+                                            <div
+                                                class="upload-image"
+                                                v-if="photoValue"
+                                                :style="
+                                                    photoValue
+                                                        ? `background-image: url(${photoValue});`
+                                                        : ''
+                                                "
+                                            ></div>
+                                            <div
+                                                v-if="photoValue"
+                                                class="upload-image-mask"
+                                            >
+                                                点击修改
+                                            </div>
+                                            <div v-else>
+                                                <div v-if="logoLoading">
+                                                    <LoadingOutlined
+                                                        style="font-size: 28px"
+                                                    />
+                                                </div>
+                                                <div v-else>
+                                                    <PlusOutlined
+                                                        style="font-size: 28px"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a-upload>
+                                    <div v-if="logoLoading">
+                                        <div class="upload-loading-mask">
+                                            <LoadingOutlined
+                                                v-if="logoLoading"
+                                                style="font-size: 28px"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </a-form-item>
+                    </a-col>
+                    <a-col flex="auto">
+                        <a-form-item>
+                            <template #label>
+                                <span>ID</span>
+                                <a-tooltip
+                                    title="若不填写，系统将自动生成唯一ID"
+                                >
+                                    <img
+                                        class="img-style"
+                                        :src="getImage('/init-home/mark.png')"
+                                    />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                v-model:value="modelRef.id"
+                                placeholder="请输入ID"
+                            />
+                        </a-form-item>
+                        <a-form-item label="名称">
+                            <a-input
+                                v-model:value="modelRef.name"
+                                placeholder="请输入名称"
+                            />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-form-item label="产品分类">
+                    <a-tree-select
+                        showSearch
+                        v-model:value="modelRef.productId"
+                        placeholder="请选择产品分类"
+                    >
+                    </a-tree-select>
+                </a-form-item>
+                <a-form-item label="设备类型">
+                    <a-row :span="24" :gutter="20">
+                        <a-col
+                            :span="8"
+                            v-for="item in deviceList"
+                            :key="item.value"
+                        >
+                            <ChooseCard
+                                :value="item"
+                                v-bind="item"
+                                @click="handleClick"
+                                :active="_selectedRowKeys.includes(item.value)"
+                            >
+                                <template #img>
+                                    <slot name="img">
+                                        <img
+                                            v-if="item.value === 'device'"
+                                            :src="
+                                                getImage('/device-type-1.png')
+                                            "
+                                        />
+                                        <img
+                                            v-if="
+                                                item.value === 'childrenDevice'
+                                            "
+                                            :src="
+                                                getImage('/device-type-2.png')
+                                            "
+                                        />
+                                        <img
+                                            v-if="item.value === 'gateway'"
+                                            :src="
+                                                getImage(
+                                                    '/device/device-type-3.png',
+                                                )
+                                            "
+                                        />
+                                    </slot>
+                                </template>
+                                <template #content>
+                                    <span
+                                        class="card-style"
+                                        :style="
+                                            _selectedRowKeys.includes(
+                                                item.value,
+                                            )
+                                                ? 'color: #10239e'
+                                                : ''
+                                        "
+                                        >{{
+                                            item.value === 'device'
+                                                ? '直连设备'
+                                                : item.value ===
+                                                  'childrenDevice'
+                                                ? '网关子设备'
+                                                : item.value === 'gateway'
+                                                ? '网关设备'
+                                                : ''
+                                        }}</span
+                                    >
+                                </template>
+                            </ChooseCard>
+                        </a-col>
+                    </a-row>
+                </a-form-item>
+                <a-form-item label="说明">
+                    <a-textarea
+                        v-model:value="modelRef.describe"
+                        placeholder="请输入说明"
+                    />
+                </a-form-item>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { queryTree } from '@/api/device/category';
+import { Form } from 'ant-design-vue';
+import { getImage } from '@/utils/comm.ts';
+import { message } from 'ant-design-vue';
+import ChooseCard from '../ChooseCard/index.vue';
+import { FILE_UPLOAD } from '@/api/comm';
+
+const emit = defineEmits(['close', 'save']);
+const props = defineProps({
+    title: {
+        type: String,
+        defult: '',
+    },
+    isAdd: {
+        type: Number,
+        default: 0,
+    },
+});
+const treeList = ref<Record<string, any>[]>([]);
+const visible = ref(false);
+const logoLoading = ref(false);
+const useForm = Form.useForm;
+const _selectedRowKeys = ref([]);
+const photoValue = ref('/images/device-product.png');
+const imageTypes = reactive([
+    'image/jpeg',
+    'image/png',
+    'image/jpg',
+    'image/jfif',
+    'image/pjp',
+    'image/pjpeg',
+]);
+const deviceList = ref([
+    {
+        label: '直连设备',
+        value: 'device',
+    },
+    {
+        label: '网关子设备',
+        value: 'childrenDevice',
+    },
+    {
+        label: '网关设备',
+        value: 'gateway',
+    },
+]);
+
+const modelRef = reactive({
+    id: '',
+    name: '',
+    classifiedId: '',
+    classifiedName: '',
+    deviceType: '',
+    describe: '',
+    photoUrl: '',
+});
+
+watch(
+    () => props.isAdd,
+    () => {
+        queryTree({ paging: false }).then((resp) => {
+            if (resp.status === 200) {
+                treeList.value = resp.result;
+            }
+        });
+    },
+    { immediate: true, deep: true },
+);
+/**
+ * 显示弹窗
+ */
+const show = () => {
+    visible.value = true;
+};
+
+/**
+ * 关闭弹窗
+ */
+const close = () => {
+    visible.value = false;
+};
+/**
+ * 卡片点击事件
+ */
+const handleClick = (dt: any) => {
+    _selectedRowKeys.value = dt;
+};
+/**
+ * 文件上传之前
+ */
+const beforeUpload = (file: any) => {
+    const isType: any = imageTypes.includes(file.type);
+    if (!isType) {
+        message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
+        return false;
+    }
+    const isSize = file.size / 1024 / 1024 < 4;
+    if (!isSize) {
+        message.error(`图片大小必须小于${4}M`);
+    }
+    return isType && isSize;
+};
+
+/**
+ * 文件改变事件
+ */
+const handleChange = (info: any) => {
+    if (info.file.status === 'uploading') {
+        logoLoading.value = true;
+    }
+    if (info.file.status === 'done') {
+        info.file.url = info.file.response?.result;
+        logoLoading.value = false;
+        logoLoading.value = info.file.response?.result;
+    }
+};
+defineExpose({
+    show: show,
+});
+</script>
+<style scoped lang="less">
+.card-style {
+    position: relative;
+    top: 8px;
+}
+.upload-image-warp-logo {
+    display: flex;
+    justify-content: flex-start;
+    .upload-image-border-logo {
+        position: relative;
+        overflow: hidden;
+        border: 1px dashed #d9d9d9;
+        transition: all 0.3s;
+        width: 160px;
+        height: 150px;
+        &:hover {
+            border: 1px dashed #1890ff;
+            display: flex;
+        }
+        .upload-image-content-logo {
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            width: 160px;
+            height: 150px;
+            padding: 8px;
+            background-color: rgba(0, 0, 0, 0.06);
+            cursor: pointer;
+            .loading-logo {
+                position: absolute;
+                top: 50%;
+            }
+            .loading-icon {
+                position: absolute;
+            }
+            .upload-image {
+                width: 100%;
+                height: 100%;
+                background-repeat: no-repeat;
+                background-position: 50%;
+                background-size: cover;
+            }
+            .upload-image-icon {
+                width: 100%;
+                height: 100%;
+                background-repeat: no-repeat;
+                background-position: 50%;
+                background-size: inherit;
+            }
+            .upload-image-mask {
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                top: 0;
+                left: 0;
+                display: none;
+                width: 100%;
+                height: 100%;
+                color: #fff;
+                font-size: 16px;
+                background-color: rgba(0, 0, 0, 0.35);
+            }
+            &:hover .upload-image-mask {
+                display: flex;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/device/Product/index.vue b/src/views/device/Product/index.vue
new file mode 100644
index 00000000..c5d6d505
--- /dev/null
+++ b/src/views/device/Product/index.vue
@@ -0,0 +1,498 @@
+<template>
+    <a-card class="device-product">
+        <Search :columns="query.columns" target="category" />
+        <JTable :columns="columns" :request="queryProductList" ref="tableRef">
+            <template #headerTitle>
+                <a-button type="primary" @click="add"
+                    ><plus-outlined />新增</a-button
+                >
+            </template>
+            <template #deviceType="slotProps">
+                <div>{{ slotProps.deviceType.text }}</div>
+            </template>
+            <template #card="slotProps">
+                <CardBox
+                    :value="slotProps"
+                    @click="handleClick"
+                    :actions="getActions(slotProps, 'card')"
+                    v-bind="slotProps"
+                    :active="_selectedRowKeys.includes(slotProps.id)"
+                    :status="slotProps.state"
+                    :statusText="slotProps.state === 1 ? '正常' : '禁用'"
+                    :statusNames="{
+                        1: 'success',
+                        0: 'error',
+                    }"
+                >
+                    <template #img>
+                        <slot name="img">
+                            <img :src="getImage('/device-product.png')" />
+                        </slot>
+                    </template>
+                    <template #content>
+                        <h3>{{ slotProps.name }}</h3>
+                        <a-row>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    设备类型
+                                </div>
+                                <div>直连设备</div>
+                            </a-col>
+                        </a-row>
+                    </template>
+                    <template #actions="item">
+                        <a-popconfirm
+                            v-if="item.popConfirm"
+                            v-bind="item.popConfirm"
+                        >
+                            <a-button :disabled="item.disabled">
+                                <DeleteOutlined v-if="item.key === 'delete'" />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </a-popconfirm>
+                        <template v-else>
+                            <a-button :disabled="item.disabled">
+                                <DeleteOutlined v-if="item.key === 'delete'" />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </template>
+                    </template>
+                </CardBox>
+            </template>
+            <template #state="slotProps">
+                <a-badge
+                    :text="slotProps.state === 1 ? '正常' : '禁用'"
+                    :status="statusMap.get(slotProps.state)"
+                />
+            </template>
+            <template #id="slotProps">
+                <a>{{ slotProps.id }}</a>
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+        <!-- 新增、编辑 -->
+        <Save ref="saveRef" />
+    </a-card>
+</template>
+
+<script setup lang="ts">
+import server from '@/utils/request';
+import type { ActionsType } from '@/components/Table/index.vue';
+import { getImage } from '@/utils/comm';
+import {
+    EditOutlined,
+    DeleteOutlined,
+    PlusOutlined,
+} from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
+import {
+    getProviders,
+    category,
+    queryOrgThree,
+    queryGatewayList,
+    queryProductList,
+    _deploy,
+    _undeploy,
+    deleteProduct,
+    addProduct,
+    editProduct,
+    queryProductId,
+} from '@/api/device/product';
+import { isNoCommunity } from '@/utils/utils';
+import { typeOptions } from '@/components/Search/util';
+import Save from './Save/index.vue';
+/**
+ * 表格数据
+ */
+const statusMap = new Map();
+statusMap.set(1, 'success');
+statusMap.set(0, 'error');
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        scopedSlots: true,
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+    },
+    {
+        title: '接入方式',
+        dataIndex: 'accessName',
+        key: 'accessName',
+    },
+    {
+        title: '设备类型',
+        dataIndex: 'deviceType',
+        key: 'deviceType',
+        scopedSlots: true,
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'describe',
+        key: 'describe',
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true,
+    },
+];
+
+const _selectedRowKeys = ref<string[]>([]);
+
+const onSelectChange = (keys: string[]) => {
+    _selectedRowKeys.value = [...keys];
+};
+
+const cancelSelect = () => {
+    _selectedRowKeys.value = [];
+};
+
+const handleClick = (dt: any) => {
+    if (_selectedRowKeys.value.includes(dt.id)) {
+        const _index = _selectedRowKeys.value.findIndex((i) => i === dt.id);
+        _selectedRowKeys.value.splice(_index, 1);
+    } else {
+        _selectedRowKeys.value = [..._selectedRowKeys.value, dt.id];
+    }
+};
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+        },
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+
+            icon: 'EditOutlined',
+        },
+        {
+            key: 'download',
+            text: '导出',
+            tooltip: {
+                title: '导出',
+            },
+
+            icon: 'icon-xiazai',
+        },
+        {
+            key: 'action',
+            text: data.state !== 0 ? '禁用' : '启用',
+            tooltip: {
+                title: data.state !== 0 ? '禁用' : '启用',
+            },
+            icon: data.state !== 0 ? 'StopOutlined' : 'CheckCircleOutlined',
+            popConfirm: {
+                title: `确认${data.state !== 0 ? '禁用' : '启用'}?`,
+                onConfirm: async () => {
+                    let response = undefined;
+                    if (data.state !== 0) {
+                        response = await _undeploy(data.id);
+                    } else {
+                        response = await _deploy(data.id);
+                    }
+                    if (response && response.status === 200) {
+                        message.success('操作成功！');
+                        tableRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            disabled: data.state !== 0,
+            tooltip: {
+                title: data.state !== 0 ? '已启用的设备不能删除' : '删除',
+            },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp = await deleteProduct(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        tableRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+};
+
+const add = () => {
+    saveRef.value.show();
+};
+
+// 筛选
+const listData = ref([]);
+const typeList = ref([]);
+const tableRef = ref<Record<string, any>>({});
+const query = reactive({
+    columns: [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            search: {
+                first: true,
+                type: 'string',
+            },
+        },
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            key: 'id',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '网关类型',
+            key: 'accessProvider',
+            dataIndex: 'accessProvider',
+            search: {
+                type: 'select',
+                options: async () => {
+                    return new Promise((res) => {
+                        getProviders().then((resp: any) => {
+                            listData.value = [];
+                            // const list = () => {
+                            if (isNoCommunity) {
+                                listData.value = (resp?.result || []).map(
+                                    (item: any) => ({
+                                        label: item.name,
+                                        value: item.id,
+                                    }),
+                                );
+                            } else {
+                                listData.value = (resp?.result || [])
+                                    .filter((i: any) =>
+                                        [
+                                            'mqtt-server-gateway',
+                                            'http-server-gateway',
+                                            'mqtt-client-gateway',
+                                            'tcp-server-gateway',
+                                        ].includes(i.id),
+                                    )
+                                    .map((item: any) => ({
+                                        label: item.name,
+                                        value: item.id,
+                                    }));
+                                // }
+                            }
+                            res(listData.value);
+                        });
+                    });
+                },
+            },
+        },
+        {
+            title: '接入方式',
+            key: 'accessName',
+            dataIndex: 'accessName',
+            search: {
+                type: 'select',
+                options: async () => {
+                    return new Promise((res) => {
+                        queryGatewayList({
+                            paging: false,
+                        }).then((resp: any) => {
+                            typeList.value = [];
+                            typeList.value = resp.result.map((item: any) => ({
+                                label: item.name,
+                                value: item.name,
+                            }));
+                            res(typeList.value);
+                        });
+                    });
+                },
+            },
+        },
+        {
+            title: '设备类型',
+            key: 'deviceType',
+            dataIndex: 'deviceType',
+            search: {
+                type: 'select',
+                options: [
+                    {
+                        label: '直连设备',
+                        value: 'device',
+                    },
+                    {
+                        label: '网关子设备',
+                        value: 'childrenDevice',
+                    },
+                    {
+                        label: '网关设备',
+                        value: 'gateway',
+                    },
+                ],
+            },
+        },
+        {
+            title: '状态',
+            key: 'state',
+            dataIndex: 'state',
+            search: {
+                type: 'select',
+                options: [
+                    {
+                        label: '正常',
+                        value: 1,
+                    },
+                    {
+                        label: '禁用',
+                        value: 0,
+                    },
+                ],
+            },
+        },
+        {
+            title: '说明',
+            key: 'describe',
+            dataIndex: 'describe',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '分类',
+            key: 'classified',
+            dataIndex: 'classifiedId',
+            search: {
+                type: 'treeSelect',
+                options: async () => {
+                    return new Promise((res) => {
+                        category({
+                            paging: false,
+                        }).then((resp) => {
+                            res(resp.result);
+                        });
+                    });
+                },
+            },
+        },
+        {
+            title: '所属部门',
+            key: 'id$dim-assets',
+            dataIndex: 'id$dim-assets',
+            search: {
+                first: true,
+                type: 'treeSelect',
+                options: async () => {
+                    return new Promise((res) => {
+                        queryOrgThree({ paging: false }).then((resp: any) => {
+                            const formatValue = (list: any[]) => {
+                                const _list: any[] = [];
+                                list.forEach((item) => {
+                                    if (item.children) {
+                                        item.children = formatValue(
+                                            item.children,
+                                        );
+                                    }
+                                    _list.push({
+                                        ...item,
+                                        value: JSON.stringify({
+                                            assetType: 'product',
+                                            targets: [
+                                                {
+                                                    type: 'org',
+                                                    id: item.id,
+                                                },
+                                            ],
+                                        }),
+                                    });
+                                });
+                                return _list;
+                            };
+                            res(formatValue(resp.result));
+                        });
+                    });
+                },
+            },
+        },
+        {
+            title: '操作',
+            key: 'action',
+            fixed: 'right',
+            width: 250,
+            scopedSlots: true,
+        },
+    ],
+});
+const saveRef = ref();
+</script>
+
+<style lang="less" scoped>
+.box {
+    padding: 20px;
+    background: #f0f2f5;
+}
+</style>
diff --git a/src/views/device/Product/typings.d.ts b/src/views/device/Product/typings.d.ts
index d7b9c831..3cdffb00 100644
--- a/src/views/device/Product/typings.d.ts
+++ b/src/views/device/Product/typings.d.ts
@@ -177,3 +177,15 @@ type ObserverMetadata = {
   subscribe: (data: any) => void;
   next: (data: any) => void;
 };
+
+// 部门
+export type DepartmentItem = {
+  id: string;
+  name: string;
+  path: string;
+  sortIndex: number;
+  level: number;
+  code: string;
+  parentId: string;
+  children: DepartmentItem[];
+};
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/Edit/index.vue b/src/views/device/components/Metadata/Base/Edit/index.vue
index 1f0f0de7..0df22ae5 100644
--- a/src/views/device/components/Metadata/Base/Edit/index.vue
+++ b/src/views/device/components/Metadata/Base/Edit/index.vue
@@ -114,6 +114,6 @@ const form = reactive({
   model: {}
 })
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 
 </style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/index.vue b/src/views/device/components/Metadata/Base/index.vue
index 35e9dfed..dd03ca7e 100644
--- a/src/views/device/components/Metadata/Base/index.vue
+++ b/src/views/device/components/Metadata/Base/index.vue
@@ -96,5 +96,5 @@ const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
   );
 };
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 </style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Cat/index.vue b/src/views/device/components/Metadata/Cat/index.vue
index c9fc1952..5936eb0d 100644
--- a/src/views/device/components/Metadata/Cat/index.vue
+++ b/src/views/device/components/Metadata/Cat/index.vue
@@ -140,7 +140,7 @@ watchEffect(() => {
   }
 })
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .cat-content {
   background: #F6F6F6;
 
diff --git a/src/views/device/components/Metadata/Import/index.vue b/src/views/device/components/Metadata/Import/index.vue
index fb6028bd..a5285c75 100644
--- a/src/views/device/components/Metadata/Import/index.vue
+++ b/src/views/device/components/Metadata/Import/index.vue
@@ -8,8 +8,8 @@
       </p>
     </div>
     <a-form layout="vertical" v-model="formModel">
-      <a-form-item label="导入方式" v-bind="validateInfos.type">
-        <a-select v-if="type === 'product'" v-model:value="formModel.type">
+      <a-form-item v-if="type === 'product'" label="导入方式" v-bind="validateInfos.type">
+        <a-select v-model:value="formModel.type">
           <a-select-option value="copy">拷贝产品</a-select-option>
           <a-select-option value="import">导入物模型</a-select-option>
         </a-select>
@@ -32,11 +32,19 @@
         </a-select>
       </a-form-item>
       <a-form-item label="文件上传" v-bind="validateInfos.upload" v-if="formModel.metadataType === 'file'">
-        <a-upload v-model:file-list="formModel.upload" name="files" :before-upload="beforeUpload" accept=".json"
-          :show-upload-list="false"></a-upload>
+        <a-input v-model:value="formModel.upload">
+          <template #addonAfter>
+            <label for="uploadFile"><upload-outlined/></label>
+          </template>
+        </a-input>
+        <a-upload v-model:file-list="fileList" name="files" :before-upload="beforeUpload" accept=".json"
+          :show-upload-list="false" :action="FILE_UPLOAD" @change="fileChange" :headers="{ 'X-Access-Token': token }">
+          <button id="uploadFile" style="display: none;"></button>
+        </a-upload>
       </a-form-item>
       <a-form-item label="物模型" v-bind="validateInfos.import" v-if="formModel.metadataType === 'script'">
         <!-- TODO代码编辑器 -->
+        <a-textarea v-model:value="formModel.import"></a-textarea>
       </a-form-item>
     </a-form>
   </a-modal>
@@ -46,13 +54,17 @@ import { useForm } from 'ant-design-vue/es/form';
 import { saveMetadata } from '@/api/device/instance'
 import { queryNoPagingPost, convertMetadata, modify } from '@/api/device/product'
 import type { DefaultOptionType } from 'ant-design-vue/es/select';
-import { UploadProps } from 'ant-design-vue/es';
+import type { UploadProps, UploadFile, UploadChangeParam } from 'ant-design-vue/es';
 import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
 import { message } from 'ant-design-vue/es';
 import { Store } from 'jetlinks-store';
 import { SystemConst } from '@/utils/consts';
 import { useInstanceStore } from '@/store/instance'
 import { useProductStore } from '@/store/product';
+import { UploadOutlined } from '@ant-design/icons-vue';
+import { FILE_UPLOAD } from '@/api/comm';
+import { LocalStore } from '@/utils/comm';
+import { TOKEN_KEY } from '@/utils/variable';
 
 const route = useRoute()
 const instanceStore = useInstanceStore()
@@ -79,6 +91,7 @@ const _visible = computed({
 })
 
 const close = () => {
+  console.log(1)
   emits('update:visible', false);
 }
 
@@ -132,6 +145,8 @@ const onSubmit = () => {
 
   })
 }
+const fileList = ref<UploadFile[]>([])
+const token = ref(LocalStore.get(TOKEN_KEY));
 
 const productList = ref<DefaultOptionType[]>([])
 
@@ -157,6 +172,11 @@ const beforeUpload: UploadProps['beforeUpload'] = file => {
     formModel.import = json.target?.result;
   };
 }
+const fileChange = (info: UploadChangeParam) => {
+  if (info.file.status === 'done') {
+    console.log(info)
+  }
+}
 
 const operateLimits = (mdata: DeviceMetadata) => {
   const obj: DeviceMetadata = { ...mdata };
@@ -257,7 +277,7 @@ const handleImport = async () => {
 
 // const showProduct = computed(() => formModel.type === 'copy')
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .import-content {
   background: rgb(236, 237, 238);
 
diff --git a/src/views/device/components/Metadata/index.vue b/src/views/device/components/Metadata/index.vue
index 772ea590..3493c164 100644
--- a/src/views/device/components/Metadata/index.vue
+++ b/src/views/device/components/Metadata/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='device-detail-metadata' style="position: relative;">
-    <div class="tips" style="width: 40%">
+    <div class="tips">
       <a-tooltip :title="instanceStore.detail?.independentMetadata && type === 'device'
       ? '该设备已脱离产品物模型，修改产品物模型对该设备无影响'
       : '设备会默认继承产品的物模型，修改设备物模型后将脱离产品物模型'">
@@ -14,16 +14,20 @@
         </div>
       </a-tooltip>
     </div>
-    <a-tabs class="metadataNav" destroyInactiveTabPane>
+    <a-tabs class="metadataNav" destroyInactiveTabPane type="card">
       <template #rightExtra>
         <a-space>
-          <PermissionButton v-if="type === 'device'" :hasPermission="`${permission}:update`"
-            :popConfirm="{ title: '确认重置？', onConfirm: resetMetadata, }" :tooltip="{ title: '重置后将使用产品的物模型配置' }"
-            key="reload">
+          <PermissionButton v-if="type === 'device' && instanceStore.detail?.independentMetadata"
+            :hasPermission="`${permission}:update`" :popConfirm="{ title: '确认重置？', onConfirm: resetMetadata, }"
+            :tooltip="{ title: '重置后将使用产品的物模型配置' }" key="reload">
             重置操作
           </PermissionButton>
-          <PermissionButton :isPermission="`${permission}:update`" @click="visible = true">快速导入</PermissionButton>
-          <PermissionButton :isPermission="`${permission}:update`" @click="cat = true">物模型TSL</PermissionButton>
+          <PermissionButton
+            :uhasPermission="`${permission}:update`"
+            @click="visible = true">快速导入</PermissionButton>
+          <PermissionButton 
+            :uhasPermission="`${permission}:update`" 
+            @click="cat = true">物模型TSL</PermissionButton>
         </a-space>
       </template>
 
@@ -40,11 +44,13 @@
         <BaseMetadata target={props.type} type="tags" :permission="permission" />
       </a-tab-pane>
     </a-tabs>
-    <Import :visible="visible" :type="type" @close="visible = false" />
-    <Cat :visible="cat" @close="cat = false" :type="type" />
+    {{ visible }}
+    <Import v-model:visible="visible" :type="type" @close="visible = false" />
+    <Cat v-model:visible="cat" @close="cat = false" :type="type" />
   </div>
 </template>
 <script setup lang="ts" name="Metadata">
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
 import PermissionButton from '@/components/PermissionButton/index.vue'
 import { deleteMetadata } from '@/api/device/instance.js'
 import { message } from 'ant-design-vue'
@@ -80,21 +86,20 @@ const resetMetadata = async () => {
   }
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .device-detail-metadata {
   .tips {
+    width: calc(100% - 670px);
     position: absolute;
     top: 12px;
     z-index: 1;
-    margin-left: 330px;
+    margin-left: 380px;
     font-weight: 100;
   }
 
   .metadataNav {
-    :global {
-      .ant-card-body {
-        padding: 0;
-      }
+    :deep(.ant-card-body) {
+      padding: 0;
     }
   }
 }
diff --git a/src/views/init-home/index.vue b/src/views/init-home/index.vue
index 20585ac9..896f2983 100644
--- a/src/views/init-home/index.vue
+++ b/src/views/init-home/index.vue
@@ -801,7 +801,7 @@ const rulesFrom = ref({
         {
             required: true,
             message: '请输入系统名称',
-            trigger: 'blur',
+            trigger: 'change',
         },
     ],
     headerTheme: [
diff --git a/src/views/notice/Config/SyncUser/index.vue b/src/views/notice/Config/SyncUser/index.vue
index f6f76166..1fc23686 100644
--- a/src/views/notice/Config/SyncUser/index.vue
+++ b/src/views/notice/Config/SyncUser/index.vue
@@ -1,103 +1,125 @@
 <template>
-    <a-modal
-        v-model:visible="_vis"
-        title="同步用户"
-        :footer="null"
-        @cancel="_vis = false"
-        width="80%"
-    >
-        <a-row :gutter="10">
-            <a-col :span="4">
-                <a-input
-                    v-model:value="deptName"
-                    @keyup.enter="getDepartment"
-                    allowClear
-                    placeholder="请输入部门名称"
-                    style="margin-bottom: 8px"
-                >
-                    <template #addonAfter>
-                        <AIcon
-                            type="SearchOutlined"
-                            style="cursor: pointer"
-                            @click="getDepartment"
-                        />
-                    </template>
-                </a-input>
-                <a-tree
-                    :tree-data="deptTreeData"
-                    :fieldNames="{ title: 'name', key: 'id' }"
-                    :selectedKeys="[deptId]"
-                    @select="onTreeSelect"
-                >
-                </a-tree>
-                <a-empty v-if="!deptTreeData.length" />
-            </a-col>
-            <a-col :span="20">
-                <JTable
-                    ref="tableRef"
-                    :columns="columns"
-                    :dataSource="dataSource"
-                    :loading="tableLoading"
-                    model="table"
-                >
-                    <template #headerTitle>
-                        <a-button type="primary" @click="handleAutoBind">
-                            自动绑定
-                        </a-button>
-                    </template>
-                    <template #status="slotProps">
-                        <a-space>
-                            <a-badge
-                                :status="slotProps.status.value"
-                                :text="slotProps.status.text"
-                            ></a-badge>
+    <div>
+        <a-modal
+            v-model:visible="_vis"
+            title="同步用户"
+            :footer="null"
+            @cancel="_vis = false"
+            width="80%"
+        >
+            <a-row :gutter="10">
+                <a-col :span="4">
+                    <a-input
+                        v-model:value="deptName"
+                        @keyup.enter="getDepartment"
+                        allowClear
+                        placeholder="请输入部门名称"
+                        style="margin-bottom: 8px"
+                    >
+                        <template #addonAfter>
                             <AIcon
-                                v-if="slotProps.status.value === 'error'"
-                                type="ExclamationCircleOutlined"
-                                style="color: #1d39c4; cursor: pointer"
-                                @click="handleError(slotProps.errorStack)"
+                                type="SearchOutlined"
+                                style="cursor: pointer"
+                                @click="getDepartment"
                             />
-                        </a-space>
-                    </template>
-                    <template #action="slotProps">
-                        <a-space :size="16">
-                            <a-tooltip
-                                v-for="i in getActions(slotProps, 'table')"
-                                :key="i.key"
-                                v-bind="i.tooltip"
-                            >
-                                <a-popconfirm
-                                    v-if="i.popConfirm"
-                                    v-bind="i.popConfirm"
-                                    :disabled="i.disabled"
+                        </template>
+                    </a-input>
+                    <a-tree
+                        :tree-data="deptTreeData"
+                        :fieldNames="{ title: 'name', key: 'id' }"
+                        :selectedKeys="[deptId]"
+                        @select="onTreeSelect"
+                    >
+                    </a-tree>
+                    <a-empty v-if="!deptTreeData.length" />
+                </a-col>
+                <a-col :span="20">
+                    <JTable
+                        ref="tableRef"
+                        :columns="columns"
+                        :dataSource="dataSource"
+                        :loading="tableLoading"
+                        model="table"
+                    >
+                        <template #headerTitle>
+                            <a-button type="primary" @click="handleAutoBind">
+                                自动绑定
+                            </a-button>
+                        </template>
+                        <template #status="slotProps">
+                            <a-space>
+                                <a-badge
+                                    :status="slotProps.status.value"
+                                    :text="slotProps.status.text"
+                                ></a-badge>
+                            </a-space>
+                        </template>
+                        <template #action="slotProps">
+                            <a-space :size="16">
+                                <a-tooltip
+                                    v-for="i in getActions(slotProps, 'table')"
+                                    :key="i.key"
+                                    v-bind="i.tooltip"
                                 >
-                                    <a-button
+                                    <a-popconfirm
+                                        v-if="i.popConfirm"
+                                        v-bind="i.popConfirm"
                                         :disabled="i.disabled"
+                                    >
+                                        <a-button
+                                            :disabled="i.disabled"
+                                            style="padding: 0"
+                                            type="link"
+                                            ><AIcon :type="i.icon"
+                                        /></a-button>
+                                    </a-popconfirm>
+                                    <a-button
                                         style="padding: 0"
                                         type="link"
-                                        ><AIcon :type="i.icon"
-                                    /></a-button>
-                                </a-popconfirm>
-                                <a-button
-                                    style="padding: 0"
-                                    type="link"
-                                    v-else
-                                    @click="i.onClick && i.onClick(slotProps)"
-                                >
-                                    <a-button
-                                        :disabled="i.disabled"
-                                        style="padding: 0"
-                                        type="link"
-                                        ><AIcon :type="i.icon"
-                                    /></a-button>
-                                </a-button>
-                            </a-tooltip>
-                        </a-space>
-                    </template>
-                </JTable>
-            </a-col>
-        </a-row>
-    </a-modal>
+                                        v-else
+                                        @click="
+                                            i.onClick && i.onClick(slotProps)
+                                        "
+                                    >
+                                        <a-button
+                                            :disabled="i.disabled"
+                                            style="padding: 0"
+                                            type="link"
+                                            ><AIcon :type="i.icon"
+                                        /></a-button>
+                                    </a-button>
+                                </a-tooltip>
+                            </a-space>
+                        </template>
+                    </JTable>
+                </a-col>
+            </a-row>
+        </a-modal>
+
+        <!-- 绑定用户 -->
+        <a-modal
+            v-model:visible="bindVis"
+            title="绑定用户"
+            :maskClosable="false"
+            :confirm-loading="confirmLoading"
+            @cancel="handleCancel"
+            @ok="handleBindSubmit"
+        >
+            <a-form layout="vertical">
+                <a-form-item label="用户" v-bind="validateInfos.userId">
+                    <a-select
+                        v-model:value="formData.userId"
+                        :options="allUserList"
+                        allowClear
+                        show-search
+                        option-filter-prop="children"
+                        :filter-option="filterOption"
+                        placeholder="请选择用户"
+                    />
+                </a-form-item>
+            </a-form>
+        </a-modal>
+    </div>
 </template>
 
 <script setup lang="ts" name="SyncUser">
@@ -106,6 +128,9 @@ import { PropType } from 'vue';
 import moment from 'moment';
 import { Modal, message } from 'ant-design-vue';
 import type { ActionsType } from '@/components/Table/index.vue';
+import { Form } from 'ant-design-vue';
+
+const useForm = Form.useForm;
 
 type Emits = {
     (e: 'update:visible', data: boolean): void;
@@ -220,8 +245,7 @@ const getActions = (
             },
             icon: 'EditOutlined',
             onClick: () => {
-                // visible.value = true;
-                // current.value = data;
+                handleBind(data);
             },
         },
         {
@@ -344,7 +368,17 @@ watch(
  * 绑定用户
  */
 const bindVis = ref(false);
-const formData = ref({});
+const confirmLoading = ref(false);
+const formData = ref({ userId: '' });
+const formRules = ref({
+    userId: [{ required: true, message: '请选择用户', trigger: 'change' }],
+});
+
+const { resetFields, validate, validateInfos, clearValidate } = useForm(
+    formData.value,
+    formRules.value,
+);
+
 const handleBind = (row: any) => {
     bindVis.value = true;
     formData.value = row;
@@ -352,22 +386,55 @@ const handleBind = (row: any) => {
 };
 
 /**
- * 查看错误信息
+ * 绑定用户, 用户下拉筛选
  */
-const handleError = (e: any) => {
-    Modal.info({
-        title: '错误信息',
-        content: JSON.stringify(e),
+const filterOption = (input: string, option: any) => {
+    return (
+        option.componentOptions.children[0].text
+            .toLowerCase()
+            .indexOf(input.toLowerCase()) >= 0
+    );
+};
+
+/**
+ * 绑定提交
+ */
+const handleBindSubmit = () => {
+    validate().then(async () => {
+        const params = {
+            // providerName: formData.value.thirdPartyUserName,
+            // thirdPartyUserId: formData.value.thirdPartyUserId,
+            userId: formData.value.userId,
+        };
+        confirmLoading.value = true;
+        if (props.data.type === 'dingTalk') {
+            configApi
+                .dingTalkBindUser([params], props.data.id)
+                .then(() => {
+                    message.success('操作成功');
+                    bindVis.value = false;
+                    getTableData();
+                })
+                .finally(() => {
+                    confirmLoading.value = false;
+                });
+        } else if (props.data.type === 'weixin') {
+            configApi
+                .weChatBindUser([params], props.data.id)
+                .then(() => {
+                    message.success('操作成功');
+                    bindVis.value = false;
+                    getTableData();
+                })
+                .finally(() => {
+                    confirmLoading.value = false;
+                });
+        }
     });
 };
-/**
- * 查看详情
- */
-const handleDetail = (e: any) => {
-    Modal.info({
-        title: '详情信息',
-        content: JSON.stringify(e),
-    });
+const handleCancel = () => {
+    bindVis.value = false;
+    resetFields()
 };
 </script>