diff --git a/src/api/oceanus.js b/src/api/oceanus.js
index b03b2e92caf9e40784d555fe960938dc7c822951..f4aebfa40864cd766f9c37076e4164ecc2726515 100644
--- a/src/api/oceanus.js
+++ b/src/api/oceanus.js
@@ -10,8 +10,13 @@ function updateOceanusTreeApi(data) {
     return putReq('/oceanus/api/v1/categories', data);
 }
 function delOceanusTreeApi(data) {
-    return putReq(`/oceanus/api/v1/categories/${data.categoryId}`, data);
+    return delReq(`/oceanus/api/v1/categories/${data.categoryId}`, data);
 }
+
+function getAttributesApi(data) {
+  return getReq('/oceanus/api/v1/categories/attributes', data);
+}
+
 function addAttributesApi(data) {
     return postReq('/oceanus/api/v1/categories/attributes', data);
 }
@@ -39,12 +44,32 @@ function delEquipmentsTreeApi(data) {
 function getEquipmentsInfoApi(data) {
     return getReq(`/oceanus/api/v1/equipments/${data.catalogValue}`);
 }
+function getEquipmentsAttributesApi(data) {
+  return getReq('/oceanus/api/v1/equipments/attributes', data);
+}
+
+function addEquipmentsAttributesApi(data) {
+  return postReq('/oceanus/api/v1/equipments/attributes', data);
+}
+
+function updateEquipmentsAttributesApi(data) {
+  return putReq('/oceanus/api/v1/equipments/attributes', data);
+}
+function topEquipmentsAttributesApi(data) {
+  return putReq(`/oceanus/api/v1/equipments/attributes/top/${data.instanceId}`,{});
+}
+function bottomEquipmentsAttributesApi(data) {
+  return putReq(`/oceanus/api/v1/equipments/attributes/bottom/${data.instanceId}`,{});
+}
+
+
 
 export default {
     getOceanusTree: getOceanusTreeApi,
     addOceanusTree: addOceanusTreeApi,
     updateOceanusTree: updateOceanusTreeApi,
     delOceanusTree: delOceanusTreeApi,
+    getAttributes:getAttributesApi,
     addAttributes: addAttributesApi,
     updateAttributes: updateAttributesApi,
     movementAttributes: movementAttributesApi,
@@ -53,4 +78,9 @@ export default {
     updateEquipmentsTree: updateEquipmentsTreeApi,
     delEquipmentsTree: delEquipmentsTreeApi,
     getEquipmentsInfo: getEquipmentsInfoApi,
+    getEquipmentsAttributes:getEquipmentsAttributesApi,
+    addEquipmentsAttributes:addEquipmentsAttributesApi,
+    updateEquipmentsAttributes:updateEquipmentsAttributesApi,
+    topEquipmentsAttributes:topEquipmentsAttributesApi,
+    bottomEquipmentsAttributes:bottomEquipmentsAttributesApi,
 };
diff --git a/src/components/popconfirm_delete/index.vue b/src/components/popconfirm_delete/index.vue
index db2347c45fd012c98ff47041c24da28c213b73e1..1ab9822a3366a3af572616cfc06c8aa9a856f697 100644
--- a/src/components/popconfirm_delete/index.vue
+++ b/src/components/popconfirm_delete/index.vue
@@ -46,10 +46,10 @@ export default {
                         await postReq(this.url.url, this.url?.data);
                         break;
                     case 'put':
-                        await putReq(this.url.url, this.url?.data);
+                        await putReq(this.url.url, {}, { data: this.url?.data });
                         break;
                     case 'del':
-                        await delReq(this.url.url, this.url?.data);
+                        await delReq(this.url.url, {}, { data: this.url?.data });
                         break;
                 }
             }
diff --git a/src/components/table/SimpleTable.vue b/src/components/table/SimpleTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f4824a54c8a9df8fcac2bef245bf6ec8b0393c41
--- /dev/null
+++ b/src/components/table/SimpleTable.vue
@@ -0,0 +1,112 @@
+<template>
+    <a-row :gutter="[24, 24]">
+        <a-col :span="24" v-if="$scopedSlots.search">
+            <slot name="search" />
+        </a-col>
+        <a-col :span="24">
+            <a-table
+                :dataSource="dataSource"
+                :loading="loading"
+                :pagination="pagination"
+                @change="pageChange"
+                v-bind="$attrs"
+                rowKey="key"
+            >
+                <slot />
+            </a-table>
+        </a-col>
+    </a-row>
+</template>
+
+<script>
+const initQuery = {
+    pageNum: 1,
+    pageSize: 10,
+    total: 0,
+};
+
+export default {
+    props: {
+        request: { type: Function, default: undefined },
+        otherParams: { type: Object, default: () => ({}) },
+        rowKey: String,
+    },
+    data() {
+        return {
+            loading: true,
+            dataSource: [],
+            params: {
+                ...initQuery,
+            },
+        };
+    },
+
+    computed: {
+        pagination() {
+            return {
+                current: this.params.pageNum,
+                pageSize: this.params.pageSize,
+                total: this.params.total,
+                showQuickJumper: true,
+            };
+        },
+    },
+
+    watch: {
+        otherParams: {
+            handler() {
+                this.refresh();
+            },
+            deep: true,
+            immediate: true,
+        },
+    },
+
+    mounted() {
+        this.getList({ ...this.params, ...this.otherParams });
+    },
+
+    methods: {
+        async getList(params) {
+            if (!this.request) return;
+            this.loading = true;
+            const data = await this.request(params);
+            const { records, total, pageNum } = data;
+            const newData = records.map((i) => ({
+                ...i,
+                key: i[this.rowKey],
+                editable: false,
+            }));
+            this.dataSource = newData;
+            this.params = {
+                ...this.params,
+                total,
+                pageNum,
+            };
+            this.loading = false;
+        },
+        refresh() {
+            const params = {
+                ...initQuery,
+                ...this.otherParams,
+            };
+            this.getList(params);
+        },
+        pageChange(pagination) {
+            const params = {
+                ...this.params,
+                ...this.otherParams,
+                pageNum: pagination.current,
+            };
+            this.getList(params);
+        },
+        getTableData() {
+            return this.dataSource;
+        },
+        setTableData(data) {
+            this.dataSource = data;
+        },
+    },
+};
+</script>
+
diff --git a/src/pages/oceanus/category/components/LeftTree.vue b/src/pages/oceanus/category/components/LeftTree.vue
index 33fd4eb80050d42c5de634d363f5d98a1ebfe67a..af073f179cf2e4ac1b15d4452f97a6b17b015e72 100644
--- a/src/pages/oceanus/category/components/LeftTree.vue
+++ b/src/pages/oceanus/category/components/LeftTree.vue
@@ -89,7 +89,7 @@ export default {
             this.expandedKeys = expandedKeys;
             this.selectedKeys = [treeObj.treeData[0]?.categoryId];
             this.selectedObj = treeObj.treeData[0];
-            this.$emit('change', treeObj.treeData[0]);
+            this.$emit('change', { categoryId: treeObj.treeData[0].categoryId });
         },
         async onSearch(searchText) {
             const dataList = this.treeObj.data;
@@ -110,7 +110,7 @@ export default {
                 const cueData = node.$props.dataRef;
                 this.selectedObj = cueData;
                 this.searchValue = undefined;
-                this.$emit('change', cueData);
+                this.$emit('change', { categoryId: cueData.categoryId });
             }
         },
         onExpand(expandedKeys) {
@@ -131,11 +131,11 @@ export default {
             delete data.children;
             this.view(data, 1);
         },
-        del() {
+        async del() {
             const categoryId = this.selectedObj?.categoryId;
-            if (categoryId) return;
+            if (!categoryId) return;
             try {
-                this.Api.delOceanusTree({ categoryId });
+                await Api.delOceanusTree({ categoryId });
                 this.$message.success('删除成功!');
                 this.init();
             } catch (e) {
diff --git a/src/pages/oceanus/category/components/RightTable.vue b/src/pages/oceanus/category/components/RightTable.vue
index 61a4a2ef8d573f472c3d9553d776f421969fc651..ce1d5430b8e659cdeb1ce0931a689cb44b875a94 100644
--- a/src/pages/oceanus/category/components/RightTable.vue
+++ b/src/pages/oceanus/category/components/RightTable.vue
@@ -1,51 +1,68 @@
 <template>
-    <my-table
-        :style="{ marginTop: 0 }"
-        url="/oceanus/api/v1/categories/attributes"
-        :tableParam="{ categoryId: tableParam.categoryId }"
-        rowKey="key"
-        ref="table"
-        :formatData="formatData"
-    >
-        <template v-if="tableParam.categoryId !== 1" #search="{ query }">
+    <my-card>
+        <Table :request="Api.getAttributes" rowKey="attributeId" ref="table" :otherParams="tableParam">
+            <!-- <template v-if="tableParam.categoryId !== 1" #search="{ query }">
             <my-form-item label="账号" :colAttr="{ span: 12 }">
                 <a-input placeholder="Basic usage" v-model="query.attributeName" />
             </my-form-item>
-        </template>
-        <template v-if="tableParam.categoryId !== 1" #buttons>
+        </template> -->
+            <!-- <template v-if="tableParam.categoryId !== 1" #buttons>
             <a-button type="primary" @click="onAddTableRow">新增</a-button>
-        </template>
-
-        <a-table-column title="属性名称">
-            <template #default="row">
-                <a-input v-if="row.editable" v-model="row.attributeName" />
-                <span v-else>
-                    {{ row.attributeName }}
-                </span>
-            </template>
-        </a-table-column>
-        <a-table-column title="操作" :width="180">
-            <template #default="row">
-                <ActionButton v-if="row.editable" :buttons="editButtons" :row="row" />
-                <ActionButton v-else :buttons="buttons" :row="row" />
+        </template> -->
+            <template #search>
+                <a-row>
+                    <a-col :span="12">
+                        <a-button type="link" @click="onAddTableRow">新增</a-button>
+                    </a-col>
+                    <a-col :span="12" class="tw-text-right">
+                        <a-input-search
+                            v-model="attributeName"
+                            :style="{ width: '80%' }"
+                            placeholder="请输入搜索内容"
+                            enter-button
+                            allowClear
+                            @search="onSearch"
+                        />
+                    </a-col>
+                </a-row>
             </template>
-        </a-table-column>
-    </my-table>
+
+            <a-table-column title="属性名称">
+                <template #default="row">
+                    <a-input v-if="row.editable" v-model="row.attributeName" />
+                    <span v-else>
+                        {{ row.attributeName }}
+                    </span>
+                </template>
+            </a-table-column>
+            <a-table-column title="操作" :width="180">
+                <template #default="row">
+                    <ActionButton v-if="row.editable" :buttons="editButtons" :row="row" />
+                    <ActionButton v-else :buttons="buttons" :row="row" />
+                </template>
+            </a-table-column>
+        </Table>
+    </my-card>
 </template>
 
 <script>
 import Api from '@/api/oceanus';
-import { formatObj } from '@/utils';
 import ActionButton from '@/components/action_button/index.vue';
+import Table from '@/components/table/SimpleTable.vue';
 
 export default {
-    components: { ActionButton },
+    components: { ActionButton, Table },
     props: {
         param: Object,
     },
     watch: {
-        param(val) {
-            this.tableParam = val;
+        param: {
+            handler(val) {
+                this.tableParam = { ...val };
+                this.attributeName = '';
+            },
+            deep: true,
+            immediate: true,
         },
     },
     data() {
@@ -100,12 +117,16 @@ export default {
                 },
             ],
             tableParam: {},
+            attributeName: '',
+            Api,
         };
     },
     methods: {
-        async formatData(data) {
-            const newData = await formatObj(data.records, { key: 'attributeId' });
-            return newData;
+        onSearch(val) {
+            this.tableParam = {
+                ...this.tableParam,
+                attributeName: val,
+            };
         },
         onAddTableRow() {
             const data = this.$refs['table']?.getTableData();
@@ -170,7 +191,7 @@ export default {
             this.$refs['table']?.setTableData(newData);
         },
         refreshTable() {
-            this.$refs['table']?.reset();
+            this.$refs['table']?.refresh();
         },
     },
 };
diff --git a/src/pages/oceanus/category/index.vue b/src/pages/oceanus/category/index.vue
index 28ab6a501cd23286b92ffdb8db611b9dfec5de60..1fd60b0132a029b1132ff7e03215fd6c398676b7 100644
--- a/src/pages/oceanus/category/index.vue
+++ b/src/pages/oceanus/category/index.vue
@@ -20,6 +20,11 @@ export default {
             treeVale: {},
         };
     },
+    watch: {
+        treeVale(val) {
+            console.log(val);
+        },
+    },
     methods: {},
 };
 </script>
diff --git a/src/pages/oceanus/equipment/Left/LeftTree.vue b/src/pages/oceanus/equipment/Left/LeftTree.vue
index 8c09151654e25040ff1c42189a26dede768b07b8..f1b35f1bbfc5d812e90f609300318c8e66b5a8d1 100644
--- a/src/pages/oceanus/equipment/Left/LeftTree.vue
+++ b/src/pages/oceanus/equipment/Left/LeftTree.vue
@@ -2,7 +2,7 @@
     <div>
         <my-card>
             <a-row :gutter="[16, 16]">
-                <a-col :span="24">
+                <!-- <a-col :span="24">
                     <a-select
                         show-search
                         v-model="searchValue"
@@ -16,22 +16,22 @@
                         @search="onSearch"
                         @change="onChange"
                     />
-                </a-col>
+                </a-col> -->
                 <a-col :span="24" class="tw-text-right">
                     <a-button-group>
-                        <a-dropdown :disabled="selectedKeys.length === 0">
+                        <a-dropdown :disabled="!treeNode">
                             <a-menu slot="overlay">
                                 <a-menu-item
                                     key="1"
                                     @click="addOrg"
-                                    :disabled="selectedObj.catalogType === 'EQUIPMENT'"
+                                    :disabled="!(treeNode && treeNode.dataRef.catalogType !== 'EQUIPMENT')"
                                     >新增组织
                                 </a-menu-item>
                                 <a-menu-item key="2" @click="addEqu">新增设备 </a-menu-item>
                             </a-menu>
                             <a-button type="primary" ghost>新增 <a-icon type="down" /></a-button>
                         </a-dropdown>
-                        <a-button
+                        <!-- <a-button
                             type="primary"
                             ghost
                             @click="edit"
@@ -39,13 +39,27 @@
                                 selectedKeys.length === 0 || selectedObj.catalogType === 'ORGANIZATION'
                             "
                             >编辑</a-button
-                        >
+                        > 
                         <a-button
                             type="primary"
                             ghost
                             @click="del"
                             :disabled="selectedKeys.length === 0 || selectedObj.catalogType === 'ROOTNODE'"
                             >删除</a-button
+                        > -->
+                        <a-button
+                            type="primary"
+                            ghost
+                            @click="edit"
+                            :disabled="!(treeNode && treeNode.dataRef.catalogType === 'EQUIPMENT')"
+                            >编辑</a-button
+                        >
+                        <a-button
+                            type="primary"
+                            ghost
+                            @click="del"
+                            :disabled="!(treeNode && treeNode.dataRef.catalogType !== 'ROOTNODE')"
+                            >删除</a-button
                         >
                     </a-button-group>
                 </a-col>
@@ -86,7 +100,6 @@ export default {
             replaceFields: { title: 'catalogName', key: 'catalogId', children: 'children' },
             treeData: [],
             selectedKeys: [],
-            selectedObj: {},
             allData: [],
             treeNode: undefined,
         };
@@ -112,7 +125,6 @@ export default {
             this.allData = [...this.allData, parentNode];
             this.treeNode = undefined;
             this.selectedKeys = [];
-            this.selectedObj = {};
         },
         onLoadData(treeNode) {
             return new Promise((resolve) => {
@@ -135,31 +147,29 @@ export default {
         },
         onChange(val) {
             const data = this.allData.find((i) => i.catalogId === val);
-            this.selectedObj = data;
             this.selectedKeys = [val];
             this.searchValue = val;
             this.$emit('change', data);
         },
         async onSelect(selectedKeys, { node }) {
-            console.log(node.dataRef);
             this.treeNode = node;
             this.selectedKeys = selectedKeys;
             let data = {};
             if (selectedKeys.length !== 0) {
                 const curData = node.dataRef;
-                this.selectedObj = curData;
                 this.searchValue = undefined;
                 if (curData.catalogType === 'EQUIPMENT') {
                     data = await Api.getEquipmentsInfo(curData);
-                    this.selectedObj = {
+                    Object.keys(data).forEach((key) => {
+                        node.dataRef[key] = data[key];
+                    });
+                    data = {
                         ...data,
                         catalogId: curData.catalogId,
                         catalogType: curData.catalogType,
                     };
-                    data = this.selectedObj;
+                    this.treeData = [...this.treeData];
                 }
-            } else {
-                this.selectedObj = {};
             }
             this.$emit('change', data);
         },
@@ -170,7 +180,8 @@ export default {
             });
         },
         addEqu() {
-            const { catalogId } = this.selectedObj;
+            const data = { ...this.treeNode.dataRef };
+            const { catalogId } = data;
             this.view({ parentCatalogId: catalogId, catalogType: 'EQUIPMENT' }, 0);
         },
         addOrg() {
@@ -180,24 +191,24 @@ export default {
             this.onLoadData(this.treeNode);
         },
         edit() {
+            const curData = { ...this.treeNode.dataRef };
             const data = {
-                ...this.selectedObj,
-                installTime:
-                    this.selectedObj.installTime && moment(this.selectedObj.installTime, 'YYYY-MM-DD'),
-                runTime: this.selectedObj.runTime && moment(this.selectedObj.runTime, 'YYYY-MM-DD'),
+                ...curData,
+                installTime: curData.installTime && moment(curData.installTime, 'YYYY-MM-DD'),
+                runTime: curData.runTime && moment(curData.runTime, 'YYYY-MM-DD'),
             };
             delete data.children;
             this.view(data, 1);
         },
         async del() {
-            if (isObjEmpty(this.selectedObj)) return;
+            const data = { ...this.treeNode.dataRef };
+            if (isObjEmpty(data)) return;
             try {
-                await Api.delEquipmentsTree(this.selectedObj);
+                await Api.delEquipmentsTree(data);
                 this.$message.success('删除成功!');
                 this.onLoadData(this.treeNode.$parent);
                 this.treeNode = undefined;
                 this.selectedKeys = [];
-                this.selectedObj = {};
             } catch (e) {
                 this.$message.warning('删除失败!');
             }
@@ -212,13 +223,13 @@ export default {
                 const { catalogId, catalogType } = catalogForm;
                 console.log(this.treeNode);
                 this.treeNode.dataRef.catalogName = equipmentName;
-                this.selectedObj = {
+                const newData = {
                     ...equipmentForm,
                     catalogId,
                     catalogType,
                 };
                 this.treeData = [...this.treeData];
-                this.$emit('change', this.selectedObj);
+                this.$emit('change', newData);
             }
         },
     },
diff --git a/src/pages/oceanus/equipment/Left/TreeDrawer.vue b/src/pages/oceanus/equipment/Left/TreeDrawer.vue
index 91a5a19b8aad12c61c5e6eefd341eb2b9f8734e5..71ef33ca253aa96f0c74f259a46d952e60fd0499 100644
--- a/src/pages/oceanus/equipment/Left/TreeDrawer.vue
+++ b/src/pages/oceanus/equipment/Left/TreeDrawer.vue
@@ -8,7 +8,7 @@
                 <a-input v-model="form.equipmentName" :disabled="isView" />
             </a-form-model-item>
             <a-form-model-item label="类别" prop="categoryId">
-                <a-tree-select :treeData="oceanusTreeList" v-model="form.categoryId" :disabled="isView" />
+                <a-tree-select :treeData="oceanusTreeList" v-model="form.categoryId" :disabled="type === 1" />
             </a-form-model-item>
             <a-form-model-item label="等级" prop="equipmentGrade">
                 <Select v-model="form.equipmentGrade" :options="equipmentGradeList" :disabled="isView" />
diff --git a/src/pages/oceanus/equipment/Right/RightBox.vue b/src/pages/oceanus/equipment/Right/RightBox.vue
index cb60040f3439242641ab13a4a295bcff7d6b8202..4704f5f1e707d10c067bb27af51ad9bc44feae5d 100644
--- a/src/pages/oceanus/equipment/Right/RightBox.vue
+++ b/src/pages/oceanus/equipment/Right/RightBox.vue
@@ -1,21 +1,48 @@
 <template>
     <my-card>
-        <a-tabs default-active-key="1" @change="callback">
-            <a-tab-pane key="1" tab="Tab 1"> Content of Tab Pane 1 </a-tab-pane>
-            <a-tab-pane key="2" tab="Tab 2" force-render> Content of Tab Pane 2 </a-tab-pane>
-            <a-tab-pane key="3" tab="Tab 3"> Content of Tab Pane 3 </a-tab-pane>
+        <a-tabs v-model="key">
+            <a-tab-pane key="1" tab="基本信息" :forceRender="true">
+                <TabOne v-if="key === '1'" :dataInfo="dataInfo" />
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="属性" :forceRender="true">
+                <TabTwo v-if="key === '2'" :dataInfo="dataInfo" />
+            </a-tab-pane>
+            <a-tab-pane key="3" tab="事件" :forceRender="true"> Content of Tab Pane 3 </a-tab-pane>
         </a-tabs>
     </my-card>
 </template>
 <script>
+import TabOne from './TabOne.vue';
+import TabTwo from './TabTwo.vue';
+
 export default {
+    components: { TabOne, TabTwo },
+    props: {
+        info: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
     data() {
-        return {};
+        return {
+            dataInfo: {},
+            key: '1',
+        };
     },
-    methods: {
-        callback(key) {
-            console.log(key);
+    watch: {
+        info: {
+            handler(val) {
+                this.dataInfo = val;
+                this.key = '1';
+            },
+            immediate: true,
+            deep: true,
         },
     },
+    methods: {
+        // callback(key) {
+        //     this.key = key;
+        // },
+    },
 };
 </script>
diff --git a/src/pages/oceanus/equipment/Right/TabOne.vue b/src/pages/oceanus/equipment/Right/TabOne.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9beb6511a71999427d4272ecc755d34f5034e114
--- /dev/null
+++ b/src/pages/oceanus/equipment/Right/TabOne.vue
@@ -0,0 +1,29 @@
+<template>
+    <a-descriptions :column="2">
+        <a-descriptions-item label="设备编码">{{ dataInfo.equipmentCode }}</a-descriptions-item>
+        <a-descriptions-item label="设备名称"> {{ dataInfo.equipmentName }} </a-descriptions-item>
+        <a-descriptions-item label="类别"> {{ dataInfo.categoryName }} </a-descriptions-item>
+        <a-descriptions-item label="等级"> {{ dataInfo.equipmentGradeName }} </a-descriptions-item>
+        <a-descriptions-item label="安装日期">
+            {{ dataInfo.installTime ? dataInfo.installTime.substring(0, 10) : '' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="运行日期">
+            {{ dataInfo.runTime ? dataInfo.runTime.substring(0, 10) : '' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="供应商">{{ dataInfo.supplier }}</a-descriptions-item>
+        <a-descriptions-item label="制造商">{{ dataInfo.manufacturer }} </a-descriptions-item>
+        <a-descriptions-item label="专业">{{ dataInfo.specialtyCodeName }} </a-descriptions-item>
+    </a-descriptions>
+</template>
+<script>
+export default {
+    props: {
+        dataInfo: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+
+    methods: {},
+};
+</script>
diff --git a/src/pages/oceanus/equipment/Right/TabTwo.vue b/src/pages/oceanus/equipment/Right/TabTwo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f80f7d6b7d499fe52db5687262f9deeb3d645696
--- /dev/null
+++ b/src/pages/oceanus/equipment/Right/TabTwo.vue
@@ -0,0 +1,241 @@
+<template>
+    <Table
+        ref="TableRef"
+        :request="Api.getEquipmentsAttributes"
+        rowKey="instanceId"
+        :otherParams="otherParams"
+    >
+        <template #search>
+            <a-row>
+                <a-col :span="12">
+                    <a-button type="link" @click="onAddRow">新增</a-button>
+                    <a-divider type="vertical" />
+                    <a-dropdown>
+                        <a-button type="link"> 过滤 <a-icon type="down" /> </a-button>
+                        <a-menu slot="overlay">
+                            <a-menu-item>
+                                <a @click="() => onChangeAttributeType('ALL')">全部</a>
+                            </a-menu-item>
+                            <a-menu-item>
+                                <a @click="() => onChangeAttributeType('SYSTEM')">系统</a>
+                            </a-menu-item>
+                            <a-menu-item>
+                                <a @click="() => onChangeAttributeType('CUSTOM')">自定义</a>
+                            </a-menu-item>
+                        </a-menu>
+                    </a-dropdown>
+                </a-col>
+                <a-col :span="12" class="tw-text-right">
+                    <a-input-search
+                        v-model="attributeName"
+                        :style="{ width: '80%' }"
+                        placeholder="请输入搜索内容"
+                        enter-button
+                        allowClear
+                        @search="onSearch"
+                    />
+                </a-col>
+            </a-row>
+        </template>
+        <a-table-column title="属性名称">
+            <template #default="row">
+                <a-input v-if="row.editable" v-model="row.attributeName" />
+                <span v-else>
+                    {{ row.attributeName }}
+                </span>
+            </template>
+        </a-table-column>
+        <a-table-column title="属性值">
+            <template #default="row">
+                <a-input v-if="row.editable" v-model="row.instanceValue" />
+                <span v-else>
+                    {{ row.instanceValue }}
+                </span>
+            </template>
+        </a-table-column>
+        <a-table-column title="属性类型" data-index="attributeTypeName" />
+        <a-table-column title="操作" :width="180">
+            <template #default="row">
+                <ActionButton v-if="row.editable" :buttons="editButtons" :row="row" />
+                <ActionButton v-else :buttons="buttons" :row="row" />
+            </template>
+        </a-table-column>
+    </Table>
+</template>
+<script>
+import ActionButton from '@/components/action_button/index.vue';
+import Api from '@/api/oceanus';
+import Table from '@/components/table/SimpleTable.vue';
+
+export default {
+    components: { Table, ActionButton },
+    props: {
+        dataInfo: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    watch: {
+        dataInfo: {
+            handler(val) {
+                const { equipmentId, categoryId } = val;
+                this.otherParams = {
+                    attributeType: 'ALL',
+                    equipmentId,
+                    categoryId,
+                };
+                this.attributeName = '';
+            },
+            deep: true,
+            immediate: true,
+        },
+    },
+    data() {
+        return {
+            Api,
+            attributeName: '',
+            otherParams: {},
+            buttons: [
+                {
+                    label: '编辑',
+                    click: this.onEditRow,
+                },
+                {
+                    type: 'confirm',
+                    url: (row) => ({
+                        url: '/oceanus/api/v1/equipments/attributes',
+                        method: 'del',
+                        data: {
+                            instanceIds: [row.instanceId],
+                        },
+                    }),
+                    after: () => this.refreshTable(),
+                    isHidden: (row) => {
+                        return row.attributeType === 'SYSTEM';
+                    },
+                },
+                {
+                    label: '置顶',
+                    click: async (row) => {
+                        const { instanceId } = row;
+                        try {
+                            await Api.topEquipmentsAttributes({ instanceId });
+                            this.refreshTable();
+                            this.$message.success('置顶成功!');
+                        } catch (e) {
+                            this.$message.warning('置顶失败!');
+                        }
+                    },
+                },
+                {
+                    label: '置底',
+                    click: async (row) => {
+                        const { instanceId } = row;
+                        try {
+                            await Api.bottomEquipmentsAttributes({ instanceId });
+                            this.refreshTable();
+                            this.$message.success('置顶成功!');
+                        } catch (e) {
+                            this.$message.warning('置顶失败!');
+                        }
+                    },
+                },
+            ],
+            editButtons: [
+                {
+                    label: '确定',
+                    click: this.onSubmitRow,
+                },
+                {
+                    type: 'confirm',
+                    label: '取消',
+                    title: '确认是否取消?',
+                    onOk: this.onCancelRow,
+                },
+            ],
+        };
+    },
+    mounted() {},
+
+    methods: {
+        onChangeAttributeType(val) {
+            this.otherParams = {
+                ...this.otherParams,
+                attributeType: val,
+            };
+        },
+        onSearch(val) {
+            this.otherParams = {
+                ...this.otherParams,
+                attributeName: val,
+            };
+        },
+        onAddRow() {
+            const data = this.$refs['TableRef']?.getTableData();
+            const isEdit = data.find((i) => i.action === 'add');
+            if (isEdit) return;
+            const obj = {
+                editable: true,
+                key: +new Date(),
+                attributeType: 'CUSTOM',
+                attributeName: '',
+                action: 'add',
+                equipmentId: this.dataInfo.equipmentId,
+                viewIndex: 0,
+            };
+            this.$refs['TableRef']?.setTableData([obj, ...data]);
+        },
+        async onSubmitRow(row) {
+            if (row.attributeName === '' || row.instanceValue === '') {
+                return this.$message.warning('请输入属性名称、属性值');
+            } else {
+                try {
+                    if (row.action === 'add') {
+                        await Api.addEquipmentsAttributes(row);
+                    }
+                    if (row.action === 'edit') {
+                        await Api.updateEquipmentsAttributes(row);
+                    }
+                    this.refreshTable();
+                    this.$message.success('提交成功!');
+                } catch (e) {
+                    this.$message.warning('保存失败!');
+                }
+            }
+        },
+        onEditRow(row) {
+            const data = this.$refs['TableRef']?.getTableData();
+            const newData = data.map((i) => {
+                const oData = { ...i };
+                if (i.key === row.key) {
+                    oData.editable = true;
+                    oData.action = 'edit';
+                }
+                return oData;
+            });
+            this.$refs['TableRef']?.setTableData(newData);
+        },
+        onCancelRow(row) {
+            const data = this.$refs['TableRef']?.getTableData();
+            if (row.action === 'add') {
+                const newData = data.filter((i) => i.key !== row.key);
+                this.$refs['TableRef']?.setTableData(newData);
+            }
+            if (row.action === 'edit') {
+                const newData = data.map((i) => {
+                    const data = { ...i };
+                    if (i.key === row.key) {
+                        data.editable = false;
+                        delete data.action;
+                    }
+                    return data;
+                });
+                this.$refs['TableRef']?.setTableData(newData);
+            }
+        },
+        refreshTable() {
+            this.$refs['TableRef']?.refresh();
+        },
+    },
+};
+</script>
diff --git a/src/pages/oceanus/equipment/index.vue b/src/pages/oceanus/equipment/index.vue
index b535b18ae908b141658cd40f590f6142ee63bc1b..95933e2ae1bb326b397ddc1bb345743f2d30038c 100644
--- a/src/pages/oceanus/equipment/index.vue
+++ b/src/pages/oceanus/equipment/index.vue
@@ -22,10 +22,6 @@ export default {
             isObjEmpty,
         };
     },
-    watch: {
-        treeVale(val) {
-            console.log(val);
-        },
-    },
+    watch: {},
 };
 </script>