From 9da85995756042cf3e64854559d37e0768202331 Mon Sep 17 00:00:00 2001
From: xiongqian <2167232911@qq.com>
Date: Mon, 30 Jan 2023 17:19:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/device/device-type-3.png        | Bin 0 -> 1829 bytes
 src/api/device/category.ts                    |   2 +-
 src/api/device/product.ts                     |  73 ++-
 src/router/menu.ts                            |   7 +-
 .../Category/components/modifyModal/index.vue | 135 +++--
 src/views/device/Category/index.vue           |  46 +-
 src/views/device/Instance/index.vue           | 464 ++++++++++------
 src/views/device/Product/ChooseCard/index.vue | 313 +++++++++++
 src/views/device/Product/Save/index.vue       | 386 ++++++++++++++
 src/views/device/Product/index.vue            | 498 ++++++++++++++++++
 src/views/device/Product/typings.d.ts         |  12 +
 src/views/init-home/index.vue                 |   2 +-
 12 files changed, 1701 insertions(+), 237 deletions(-)
 create mode 100644 public/images/device/device-type-3.png
 create mode 100644 src/views/device/Product/ChooseCard/index.vue
 create mode 100644 src/views/device/Product/Save/index.vue
 create mode 100644 src/views/device/Product/index.vue

diff --git a/public/images/device/device-type-3.png b/public/images/device/device-type-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..3561237e70b88989cb0079de46a2a1befb57fc15
GIT binary patch
literal 1829
zcmV+=2io|FP)<h;3K|Lk000e1NJLTq001HY001Ni1^@s6>>lXf00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2D(W^K~#7FwV2y)
zTvrvwzqR){XD;!KlZo%CliEp|-l$7TQ7RRLcnlJ6c0fFU5aA_iM8iK29(W{3lsq6%
zA85JAMxaU{c&?}fa!^R{SZx$Li6^ngc6^)6ea_j7wP);lY>%hoiMphbX6EdD_V0Y_
zTl?(22~QE<yPoYULtTL4a>Yd7o47<-v>AjpVsxB6Z#h50;O7|X0UIs?=A?#xSXPl+
z?EoDJ!~%rUxfd$L&ncxBs8C9okXNzSm@5(24Gjh+=+^<J-@n{(>mc`T8D#YO#wjOo
zUsn#V`+nsPky~ig&H^dr41-l%tIDnSFLmB+<^G=uQuTqshyjI&oEc_+4K0KP(%Ktg
z>F5TS{OymTb7%)-^cp8zH}|>$A13mq8UZ}t@5H}&BDffF)##HVu1!n^;|*>#(29Td
zfHW}TY@?1BzN{`D^5_Z?;#>bQkh=58jQ(?$QwIg2dVu|mSRda!>%5VO@=rA3CF~P^
zz~eJ%zP1~vnW3v7-+CwaB?6rg6)Ms=*~p0JhH3CjKmFWM^aff8W@HM!`OP2x#XsA7
zZQIZaNdNAw=tuO!U$L95<o?W{52W*drQLjer%!$0s2|j)q1CYIYUCd_CgEs$O}zY_
zm>c~@RgrK1GW%U-O4=L(svwPKNvYM*v+80jy3+^kMtX(E|2A#jt^zoCo_&>o#zPo$
z>i3spzi{f>iW17IF+i%C|3a?FSG5Mh9ziR#6&0UxXO8h`8Dm<R2`1GIrnHQav~uxg
zJEuY4Pk~CsCCrz5a3l)EB0$JH*c)N?5#xTEQ4q@q_7BzpF>W_%>omE~{0q_l;Ks)x
zd{p@=zHr7tJS>Q!Od{4CXf4B-niaPeYXDMV@TwqK+OJPD5Tw-kjN5PG<zxk>lE-5|
z3Qv02G<8JwrmIk5Bn4n`qXwV^z(uVzr6O-Oo5-7j%q{ajd|!=y{mqd43L%v)V@+f(
z`!2jJqbE)<Oo(`lxkX9Ef~3LU2~ZKD#SFo7sSh5v2XdmD##UwiyLAsZ*$)i%dB|h~
ztY#`GhqM4G_=Yhr5G4U13qUmhV}QqbLaD+ydWZ!U{qh{`fpqaCyvT7RhI(-~4de<I
zNaNW7T?JYZARTd$6NoTv3%@1+>v>cGx;xNPGzD=uk57^dxR*H$o1UzgFTGwH@Yx=X
zXjCI#0wPihR`k3)@v1;XT*iq+&DgC*Q;-Gv+Ejcnc=_mjfKoAspc2M#uf`KmX6gZO
zq{CLwwhtgcy)lNPciPgXsSsei*;q}P?=5oYdQoBcqzgB62!TBI%v=d^nO8=JP#rD#
zpax;n@XTTHh~BD_+Q*jg!*zo1<2>3`WVjE5#WFIf$B0XD;I#N75!cn~v2k3?+bxPH
z-dha?X|i4*gd7XVHccIcayyDB($55cfmfQ1pOT6hI0D?3>ajkt)zjIbvApV6RjLo0
zhO{WOF6ry(uoWW;sZE85bju)~L!`6{J5Zq|`U+<5`FQV71$2aK>Db62Wy@KK5xNu3
z4uF*$A^imC3^N8gQT2)q+WbHTo<R^IdE@OK*Qp06%kt6~a*Sf%Aydk8_peXC(seP?
z6`&|)U0!#s8iU7<ihq`nSzJTB_ed=b%UMEf6JU4PS+!{BT?$k|A#jbOLL3A}%ff^=
zZLKzuUo=KV0$)^ArXaIax$HClH5pu;UFLJg`gJNCK2%MI^~Z+HAwxYii0Kqkd6{jk
z5A4fvS1eROKV2--TN^%Z)}XX3zEqK9J77e0LpZ$&A~s~R?!&z1s-V*X)Zgj$0;fLs
zpE;K+)7!B_I%WM~pTPnJet@$>=(IklpEG2&_oM=Tcf~i~Un%q7chf0Zk!v;)@y;>v
z!F^e>(e|3v?pusILc|3T?GvJ);lAbki~5S^@Q>|xYu2uWle+OS4{oP{KFs+1PQhTI
zQGZ3;DR$~JFj=4I!--2B=^Fg5*aDIyWyFB9jeuV1r@`Y1x*}#Avr9n>vgL!V6zl<z
zeUS*!XN+-u;>n52vFZBj`|oS6XI~Z9o@@qmZdkvR2=mp+JHd@rUp1UL6^r@7-K<SW
ztdvCe{ppFZm-oylO;<Rh*OxjRgkJ?a18n>Ske+GOPJ@OT0WfoKpgArI+}IDGC6I<d
zT-|WZHv_Q>h$DN&gLebU|9j$6&u5+v9PBip3KV_Q?nml@wm^(hF$(-XB3djfzPV+@
zR-(Q0kxfI_He@>Kso)F~cd?=6g91Di$W9>V0%=8ZX!OTck03s`7#*MT@Rad?2##oO
TVX3|?00000NkvXXu0mjfVDV!8

literal 0
HcmV?d00001

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 6f318dcf..17100b3f 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,6 +40,73 @@ 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)
\ No newline at end of file
+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`)
+ 
\ No newline at end of file
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 78683b84..fbc5fc7e 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -141,5 +141,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/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/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: [