diff --git a/src/api/oceanus.js b/src/api/oceanus.js
index 60aa291fe79c93edec80d8c79eeddfae57f5df3c..603577e82a21fc831c6029a948f6a2eb4e0bc747 100644
--- a/src/api/oceanus.js
+++ b/src/api/oceanus.js
@@ -6,8 +6,33 @@ function getOceanusTreeApi(data) {
 function addOceanusTreeApi(data) {
     return postReq('/oceanus/api/v1/categories', data);
 }
+function updateOceanusTreeApi(data) {
+    return putReq('/oceanus/api/v1/categories', data);
+}
+function delOceanusTreeApi(data) {
+    return putReq(`/oceanus/api/v1/categories/${data.categoryId}`, data);
+}
+function addAttributesApi(data) {
+    return postReq('/oceanus/api/v1/categories/attributes', data);
+}
+function updateAttributesApi(data) {
+    return putReq('/oceanus/api/v1/categories/attributes', data);
+}
+function movementAttributesApi(data) {
+    return putReq('/oceanus/api/v1/categories/attributes/movement', data);
+}
+
+function getEquipmentsTreeApi(data) {
+    return getReq(`/oceanus/api/v1/equipments/catalogs/${data.catalogId}`, data);
+}
 
 export default {
     getOceanusTree: getOceanusTreeApi,
     addOceanusTree: addOceanusTreeApi,
+    updateOceanusTree: updateOceanusTreeApi,
+    delOceanusTree: delOceanusTreeApi,
+    addAttributes: addAttributesApi,
+    updateAttributes: updateAttributesApi,
+    movementAttributes: movementAttributesApi,
+    getEquipmentsTree: getEquipmentsTreeApi,
 };
diff --git a/src/components/action_button/index.vue b/src/components/action_button/index.vue
index 9bd580d041555a596ac398cf814d3959c6f4b0e9..df1327062c59b4494c71538d30a02531bd92b208 100644
--- a/src/components/action_button/index.vue
+++ b/src/components/action_button/index.vue
@@ -6,7 +6,7 @@
                 v-if="btn.type === 'confirm'"
                 :cb="btn.after"
                 :title="btn.title"
-                :onOk="btn.onOk"
+                :onOk="() => btn.onOk && btn.onOk(row)"
                 :label="btn.label"
             />
             <a v-else @click="() => btn.click(row)" v-bind="btn.option">{{ btn.label }}</a>
@@ -23,7 +23,7 @@
                                 v-if="btn.type === 'confirm'"
                                 :cb="btn.after"
                                 :title="btn.title"
-                                :onOk="btn.onOk"
+                                :onOk="() => btn.onOk && btn.onOk(row)"
                                 :label="btn.label"
                             />
                             <a v-else @click="() => btn.click(row)" v-bind="btn.option">{{ btn.label }}</a>
@@ -77,10 +77,10 @@ export default {
             return url;
         },
         init() {
-            this.buttons.map(i => {
+            this.buttons.map((i) => {
                 i.__hidden__ = i.isHidden && i.isHidden(this.row);
             });
-            this.buttonsArr = this.buttons.filter(i => !i.__hidden__);
+            this.buttonsArr = this.buttons.filter((i) => !i.__hidden__);
         },
     },
 };
diff --git a/src/components/table/drawer.vue b/src/components/table/drawer.vue
index 96f313cc6b867ba72d2ec75688e724450e611c5d..04baaf6e167b702fbb244d144934e60ffc0e12bd 100644
--- a/src/components/table/drawer.vue
+++ b/src/components/table/drawer.vue
@@ -32,6 +32,7 @@ export default {
     props: {
         oncancel: Function,
         onOk: Function,
+        colesAfter: Function,
         value: Boolean,
         width: { type: Number, default: 600 },
     },
@@ -72,6 +73,7 @@ export default {
                 // TODO
             }
             this.loading = false;
+            this.colesAfter && this.colesAfter();
         },
     },
 };
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index b8055f064884e77ed2f32fbccfb7c26d06ea7c5a..dec57485c6b3a750067ade70db0364405871f6e4 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -15,7 +15,7 @@
             </div>
         </my-card>
 
-        <my-card class="tw-mt-3">
+        <my-card :class="$scopedSlots.search ? 'tw-mt-3' : ''">
             <a-space class="tw-mb-2.5">
                 <a-button v-if="addBtn" type="primary" key="add" v-bind="addBtn.options" @click="add">
                     {{ addBtn.text || '新建' }}
@@ -89,11 +89,16 @@ export default {
         formatData: Function,
         noPage: Boolean,
         rowSelection: Object, //  radio  OR  checkbox
+        tableParam: {
+            type: Object,
+            default: () => ({}),
+        },
     },
     data() {
         return {
             initQuery: {
                 ...initQuery,
+                ...this.tableParam,
             },
             title: '新增',
             data: [],
@@ -126,6 +131,9 @@ export default {
         addVisible(val) {
             if (!val && this?.addBtn?.onCancel) this.addBtn.onCancel();
         },
+        tableParam(val) {
+            this.reset();
+        },
     },
     mounted() {
         this.getData();
@@ -165,14 +173,14 @@ export default {
         },
         async getDataNoPage() {
             const res = await request(this.url, METHOD.GET, this.queryForm);
-            if (this.formatData) this.data = this.formatData(res);
+            if (this.formatData) this.data = await this.formatData(res);
             else this.data = res;
         },
 
         async getDataWithPage() {
             const res = await request(this.url, METHOD.GET, { ...this.initQuery, ...this.queryForm });
             this.total = res.total;
-            if (this.formatData) this.data = this.formatData(res);
+            if (this.formatData) this.data = await this.formatData(res);
             else this.data = res.records;
         },
 
@@ -214,7 +222,7 @@ export default {
         },
         reset() {
             this.queryForm = {};
-            this.initQuery = { ...initQuery };
+            this.initQuery = { ...initQuery, ...this.tableParam };
             this.getData();
         },
         pageChange(page) {
@@ -236,6 +244,9 @@ export default {
         getTableData() {
             return this.data;
         },
+        setTableData(data) {
+            this.data = data;
+        },
     },
 };
 </script>
diff --git a/src/components/table/my_item.vue b/src/components/table/my_item.vue
index e27e74263dc0f1f5924634de8e53624ed86315da..4176eb52b471a8be5a116bc1e3c2754859308b4c 100644
--- a/src/components/table/my_item.vue
+++ b/src/components/table/my_item.vue
@@ -1,5 +1,5 @@
 <template>
-    <a-col v-bind="span">
+    <a-col v-bind="attr">
         <a-form-model-item v-bind="layout">
             <slot />
         </a-form-model-item>
@@ -8,9 +8,15 @@
 
 <script>
 export default {
+    props: {
+        colAttr: {
+            type: Object,
+            default: undefined,
+        },
+    },
     data() {
         return {
-            span: { xs: 24, sm: 24, lg: 12, xl: 6 },
+            attr: this.colAttr ? this.colAttr : { xs: 24, sm: 24, lg: 12, xl: 6 },
             layout: { labelCol: { span: 6 }, wrapperCol: { span: 18 }, ...this.$attrs },
         };
     },
diff --git a/src/pages/oceanus/category/components/LeftTree.vue b/src/pages/oceanus/category/components/LeftTree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33fd4eb80050d42c5de634d363f5d98a1ebfe67a
--- /dev/null
+++ b/src/pages/oceanus/category/components/LeftTree.vue
@@ -0,0 +1,149 @@
+<template>
+    <div>
+        <my-card>
+            <a-row :gutter="[16, 16]">
+                <a-col :span="24">
+                    <a-select
+                        show-search
+                        v-model="searchValue"
+                        placeholder="input search text"
+                        style="width: 100%"
+                        :default-active-first-option="false"
+                        :show-arrow="false"
+                        :filter-option="false"
+                        :not-found-content="null"
+                        :options="dataSource"
+                        @search="onSearch"
+                        @change="onChange"
+                    />
+                </a-col>
+
+                <a-col :span="24" class="tw-text-right">
+                    <a-button-group>
+                        <a-button type="primary" ghost @click="add">新增</a-button>
+                        <a-button type="primary" ghost @click="edit">编辑</a-button>
+                        <a-button type="primary" ghost @click="del">删除</a-button>
+                    </a-button-group>
+                </a-col>
+            </a-row>
+        </my-card>
+        <my-card class="tw-mt-2.5">
+            <a-row :gutter="[16, 16]">
+                <a-col :span="24">
+                    <a-tree
+                        :treeData="treeObj.treeData || []"
+                        :replaceFields="replaceFields"
+                        :expandedKeys="expandedKeys"
+                        :selectedKeys="selectedKeys"
+                        @select="onSelect"
+                        @expand="onExpand"
+                    />
+                </a-col>
+            </a-row>
+        </my-card>
+        <TreeDrawer ref="TreeDrawer" :refresh="init" />
+    </div>
+</template>
+
+<script>
+import Api from '@/api/oceanus';
+import { arrayToTree, formatObj } from '@/utils';
+import TreeDrawer from './TreeDrawer.vue';
+
+export default {
+    components: { TreeDrawer },
+    data() {
+        return {
+            searchValue: undefined,
+            treeObj: {},
+            replaceFields: { title: 'categoryName', key: 'categoryId', children: 'children' },
+            selectedKeys: [],
+            expandedKeys: [],
+            dataSource: [],
+            selectedObj: {},
+        };
+    },
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        async init() {
+            const data = await Api.getOceanusTree();
+            const expandedKeys = [];
+            const treeObj = new arrayToTree({
+                data: data,
+                rootValue: -1,
+                parentKey: 'parentCategoryId',
+                key: 'categoryId',
+            });
+            treeObj.data.map((i) => {
+                if (i.children) {
+                    expandedKeys.push(i.categoryId);
+                }
+            });
+            this.treeObj = treeObj;
+            this.expandedKeys = expandedKeys;
+            this.selectedKeys = [treeObj.treeData[0]?.categoryId];
+            this.selectedObj = treeObj.treeData[0];
+            this.$emit('change', treeObj.treeData[0]);
+        },
+        async onSearch(searchText) {
+            const dataList = this.treeObj.data;
+            const newData = dataList.filter((i) => i.categoryName.indexOf(searchText) != -1);
+            this.dataSource = await formatObj(newData, { label: 'categoryName', value: 'categoryId' });
+        },
+        onChange(val) {
+            const data = this.treeObj.data.find((i) => i.categoryId === val);
+            delete data.children;
+            this.selectedObj = data;
+            this.selectedKeys = [val];
+            this.searchValue = val;
+            this.$emit('change', data);
+        },
+        onSelect(selectedKeys, { node }) {
+            if (selectedKeys.length !== 0) {
+                this.selectedKeys = selectedKeys;
+                const cueData = node.$props.dataRef;
+                this.selectedObj = cueData;
+                this.searchValue = undefined;
+                this.$emit('change', cueData);
+            }
+        },
+        onExpand(expandedKeys) {
+            this.expandedKeys = expandedKeys;
+        },
+        async view(data = {}, type = 0) {
+            this.$refs['TreeDrawer']?.open();
+            this.$nextTick(() => {
+                this.$refs['TreeDrawer'].setData({ ...data }, type);
+            });
+        },
+        add() {
+            const { categoryId } = this.selectedObj;
+            this.view({ parentCategoryId: categoryId }, 0);
+        },
+        edit() {
+            const data = this.selectedObj;
+            delete data.children;
+            this.view(data, 1);
+        },
+        del() {
+            const categoryId = this.selectedObj?.categoryId;
+            if (categoryId) return;
+            try {
+                this.Api.delOceanusTree({ categoryId });
+                this.$message.success('删除成功!');
+                this.init();
+            } catch (e) {
+                this.$message.warning('删除失败!');
+            }
+        },
+    },
+};
+</script>
+<style scoped>
+</style>
diff --git a/src/pages/oceanus/category/components/OceanusTree.vue b/src/pages/oceanus/category/components/OceanusTree.vue
deleted file mode 100644
index 1723ec8a16b6211fdba03d8378e9aa27260369c5..0000000000000000000000000000000000000000
--- a/src/pages/oceanus/category/components/OceanusTree.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <Drawer ref="drawerRef" v-model="visible" :title="title">
-        <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm"></a-form-model>
-    </Drawer>
-</template>
-
-<script>
-import Drawer from '@/components/table/drawer.vue';
-import FormMixin from '@/components/FormMixin';
-import Api from '@/api/oceanus';
-
-export default {
-    components: { Drawer },
-    props: {
-        refresh: Function,
-    },
-    mixins: [FormMixin],
-    data() {
-        return {
-            visible: false,
-            form: {},
-            rules: {
-                loginId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
-            },
-            Api,
-        };
-    },
-    async mounted() {},
-    methods: {
-        open() {
-            this.form = {};
-            this.visible = true;
-        },
-
-        async onSubmit() {
-            this.visible = false;
-            this.refresh && this.refresh();
-        },
-    },
-};
-</script>
diff --git a/src/pages/oceanus/category/components/RightTable.vue b/src/pages/oceanus/category/components/RightTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61a4a2ef8d573f472c3d9553d776f421969fc651
--- /dev/null
+++ b/src/pages/oceanus/category/components/RightTable.vue
@@ -0,0 +1,179 @@
+<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-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>
+            <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>
+        </a-table-column>
+    </my-table>
+</template>
+
+<script>
+import Api from '@/api/oceanus';
+import { formatObj } from '@/utils';
+import ActionButton from '@/components/action_button/index.vue';
+
+export default {
+    components: { ActionButton },
+    props: {
+        param: Object,
+    },
+    watch: {
+        param(val) {
+            this.tableParam = val;
+        },
+    },
+    data() {
+        return {
+            buttons: [
+                {
+                    label: '编辑',
+                    click: this.onEditTableRow,
+                },
+                {
+                    type: 'confirm',
+                    url: (row) => `/oceanus/api/v1/categories/attributes/${row.attributeId}`,
+                    after: () => this.refreshTable(),
+                },
+                {
+                    label: '置顶',
+                    click: async (row) => {
+                        const { attributeId, categoryId } = row;
+                        try {
+                            await Api.movementAttributes({ attributeId, categoryId, moveType: 'TOP' });
+                            this.refreshTable();
+                            this.$message.success('置顶成功!');
+                        } catch (e) {
+                            this.$message.warning('置顶失败!');
+                        }
+                    },
+                },
+                {
+                    label: '置底',
+                    click: async (row) => {
+                        const { attributeId, categoryId } = row;
+                        try {
+                            await Api.movementAttributes({ attributeId, categoryId, moveType: 'BOTTOM' });
+                            this.refreshTable();
+                            this.$message.success('置顶成功!');
+                        } catch (e) {
+                            this.$message.warning('置顶失败!');
+                        }
+                    },
+                },
+            ],
+            editButtons: [
+                {
+                    label: '确定',
+                    click: this.onSubmitTableRow,
+                },
+                {
+                    type: 'confirm',
+                    label: '取消',
+                    title: '确认是否取消?',
+                    onOk: this.onCancelTableRow,
+                },
+            ],
+            tableParam: {},
+        };
+    },
+    methods: {
+        async formatData(data) {
+            const newData = await formatObj(data.records, { key: 'attributeId' });
+            return newData;
+        },
+        onAddTableRow() {
+            const data = this.$refs['table']?.getTableData();
+            const isEdit = data.find((i) => i.action === 'add');
+            if (isEdit) return;
+            const obj = {
+                editable: true,
+                key: +new Date(),
+                attributeName: '',
+                action: 'add',
+                categoryId: this.tableParam.categoryId,
+                viewIndex: 1,
+            };
+            this.$refs['table']?.setTableData([obj, ...data]);
+        },
+        onCancelTableRow(row) {
+            const data = this.$refs['table']?.getTableData();
+            if (row.action === 'add') {
+                const newData = data.filter((i) => i.key !== row.key);
+                this.$refs['table']?.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['table']?.setTableData(newData);
+            }
+        },
+        async onSubmitTableRow(row) {
+            if (row.attributeName === '') {
+                return this.$message.warning('请输入属性名称!');
+            } else {
+                try {
+                    if (row.action === 'add') {
+                        await Api.addAttributes(row);
+                    }
+                    if (row.action === 'edit') {
+                        await Api.updateAttributes(row);
+                    }
+                    this.refreshTable();
+                    this.$message.success('提交成功!');
+                } catch (e) {
+                    this.$message.warning('保存失败!');
+                }
+            }
+        },
+        onEditTableRow(row) {
+            const data = this.$refs['table']?.getTableData();
+            const newData = data.map((i) => {
+                const oData = { ...i };
+                if (i.key === row.key) {
+                    oData.editable = true;
+                    oData.action = 'edit';
+                }
+                return oData;
+            });
+            this.$refs['table']?.setTableData(newData);
+        },
+        refreshTable() {
+            this.$refs['table']?.reset();
+        },
+    },
+};
+</script>
+<style scoped>
+</style>
diff --git a/src/pages/oceanus/category/components/TreeDrawer.vue b/src/pages/oceanus/category/components/TreeDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..24d1f4fa5ebc9fe0fb68c7e7fcc1db3143e9e4bf
--- /dev/null
+++ b/src/pages/oceanus/category/components/TreeDrawer.vue
@@ -0,0 +1,54 @@
+<template>
+    <Drawer ref="drawerRef" v-model="visible" :title="title" :onOk="submit" :colesAfter="refresh">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
+            <a-form-model-item label="编码" prop="categoryCode">
+                <a-input v-model="form.categoryCode" :disabled="isView" />
+            </a-form-model-item>
+            <a-form-model-item label="名称" prop="categoryName">
+                <a-input v-model="form.categoryName" :disabled="isView" />
+            </a-form-model-item>
+            <a-form-model-item label="说明" prop="remark">
+                <a-textarea v-model="form.remark" :disabled="isView" :rows="4" />
+            </a-form-model-item>
+        </a-form-model>
+    </Drawer>
+</template>
+
+<script>
+import Drawer from '@/components/table/drawer.vue';
+import FormMixin from '@/components/FormMixin';
+import Api from '@/api/oceanus';
+
+export default {
+    components: { Drawer },
+    props: {
+        refresh: Function,
+    },
+    mixins: [FormMixin],
+    data() {
+        return {
+            visible: false,
+            form: {},
+            rules: {
+                categoryCode: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                categoryName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                remark: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+            },
+            Api,
+        };
+    },
+    async mounted() {},
+    methods: {
+        open() {
+            this.form = {};
+            this.visible = true;
+        },
+        add() {
+            return Api.addOceanusTree(this.form);
+        },
+        edit() {
+            return Api.updateOceanusTree(this.form);
+        },
+    },
+};
+</script>
diff --git a/src/pages/oceanus/category/index.vue b/src/pages/oceanus/category/index.vue
index b2c0440dfb378f4d96fe922685b7e99b1aa51808..28ab6a501cd23286b92ffdb8db611b9dfec5de60 100644
--- a/src/pages/oceanus/category/index.vue
+++ b/src/pages/oceanus/category/index.vue
@@ -1,91 +1,25 @@
 <template>
-    <a-row :gutter="24">
+    <a-row :gutter="10">
         <a-col :span="8">
-            <my-card>
-                <a-row :gutter="[16, 16]">
-                    <a-col :span="24">
-                        <a-input-search
-                            placeholder="input search text"
-                            style="width: 100%"
-                            @search="onSearch"
-                        />
-                    </a-col>
-                    <a-col :span="24">
-                        <a-button-group>
-                            <a-button type="link" @click="() => view()">新增</a-button>
-                            <a-button type="link">编辑</a-button>
-                            <a-button type="link">删除</a-button>
-                        </a-button-group>
-                    </a-col>
-                    <a-col :span="24">
-                        <a-tree
-                            :showLine="true"
-                            :treeData="treeData"
-                            :replaceFields="replaceFields"
-                            :expandedKeys="expandedKeys"
-                            @select="onSelect"
-                            @expand="onExpand"
-                        />
-                    </a-col>
-                </a-row>
-                <OceanusTreeDrawer ref="OceanusTreeDrawer" />
-            </my-card>
+            <LeftTree v-model="treeVale" />
         </a-col>
         <a-col :span="16">
-            <my-card></my-card>
+            <RightTable :param="treeVale" />
         </a-col>
     </a-row>
 </template>
 
 <script>
-import Api from '@/api/oceanus';
-import { arrayToTree } from '@/utils';
-import OceanusTreeDrawer from './components/OceanusTree.vue';
+import RightTable from './components/RightTable.vue';
+import LeftTree from './components/LeftTree.vue';
 
 export default {
-    components: { OceanusTreeDrawer },
+    components: { RightTable, LeftTree },
     data() {
         return {
-            treeData: [],
-            replaceFields: { title: 'categoryName', key: 'categoryId', children: 'children' },
-            selectedKeys: [],
-            expandedKeys: [],
+            treeVale: {},
         };
     },
-    async mounted() {
-        const expandedKeys = [];
-        const data = await Api.getOceanusTree();
-        const treeObj = new arrayToTree({
-            data: data,
-            rootValue: -1,
-            parentKey: 'parentCategoryId',
-            key: 'categoryId',
-        });
-        console.log(treeObj);
-        treeObj.data.map((i) => {
-            if (i.children) {
-                expandedKeys.push(i.categoryId);
-            }
-        });
-        this.treeData = treeObj.treeData;
-        this.expandedKeys = expandedKeys;
-    },
-    methods: {
-        onSearch(val) {},
-        onSelect(selectedKeys, info) {
-            console.log('selected', selectedKeys, info);
-        },
-        onExpand(expandedKeys) {
-            this.expandedKeys = expandedKeys;
-        },
-        async view(data = {}, type = 0) {
-            this.$refs['OceanusTreeDrawer']?.open();
-            this.$nextTick(() => {
-                this.$refs['OceanusTreeDrawer'].setData({ ...data }, type);
-            });
-        },
-    },
+    methods: {},
 };
 </script>
-<style scoped>
-</style>
diff --git a/src/pages/oceanus/equipment/components/LeftTree.vue b/src/pages/oceanus/equipment/components/LeftTree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e187473588e3ac4914af8a1580543dab8d3ce48
--- /dev/null
+++ b/src/pages/oceanus/equipment/components/LeftTree.vue
@@ -0,0 +1,167 @@
+<template>
+    <div>
+        <my-card>
+            <a-row :gutter="[16, 16]">
+                <a-col :span="24">
+                    <a-select
+                        show-search
+                        v-model="searchValue"
+                        placeholder="input search text"
+                        style="width: 100%"
+                        :default-active-first-option="false"
+                        :show-arrow="false"
+                        :filter-option="false"
+                        :not-found-content="null"
+                        :options="dataSource"
+                        @search="onSearch"
+                        @change="onChange"
+                    />
+                </a-col>
+                <a-col :span="24" class="tw-text-right">
+                    <a-button-group>
+                        <a-dropdown>
+                            <a-menu slot="overlay">
+                                <a-menu-item key="1" @click="addOrg">新增组织 </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
+                            type="primary"
+                            ghost
+                            @click="edit"
+                            :disabled="selectedObj.catalogType !== 'ORGANIZATION'"
+                            >编辑</a-button
+                        >
+                        <a-button type="primary" ghost @click="del">删除</a-button>
+                    </a-button-group>
+                </a-col>
+            </a-row>
+        </my-card>
+        <my-card class="tw-mt-2.5">
+            <a-row :gutter="[16, 16]">
+                <a-col :span="24">
+                    <a-tree
+                        :treeData="treeData"
+                        :replaceFields="replaceFields"
+                        :selectedKeys="selectedKeys"
+                        @select="onSelect"
+                        :load-data="onLoadData"
+                    />
+                </a-col>
+            </a-row>
+            <TreeDrawer ref="TreeDrawer" :refresh="init" />
+        </my-card>
+    </div>
+</template>
+
+<script>
+import Api from '@/api/oceanus';
+import { formatObj } from '@/utils';
+import TreeDrawer from './TreeDrawer.vue';
+
+export default {
+    components: { TreeDrawer },
+    data() {
+        return {
+            catalogId: -1,
+            searchValue: undefined,
+            dataSource: [],
+            replaceFields: { title: 'catalogName', key: 'catalogId', children: 'children' },
+            treeData: [],
+            selectedKeys: [],
+            selectedObj: {},
+            allData: [],
+        };
+    },
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    mounted() {
+        this.init(this.catalogId);
+    },
+    methods: {
+        async init(id) {
+            const data = await Api.getEquipmentsTree({ catalogId: id });
+            this.treeData = data;
+            this.selectedKeys = [data[0]?.catalogId];
+            this.selectedObj = data[0];
+            this.$emit('change', data[0]);
+            this.allData = [...this.allData, ...data];
+        },
+        onLoadData(treeNode) {
+            return new Promise((resolve) => {
+                if (treeNode.dataRef.children) {
+                    resolve();
+                    return;
+                }
+                Api.getEquipmentsTree({ catalogId: treeNode.dataRef.catalogId }).then((resp) => {
+                    if (resp.length === 0) {
+                        treeNode.dataRef.isLeaf = true;
+                    } else {
+                        this.allData = [...this.allData, ...resp];
+                        const newData = resp.map((i) => {
+                            return {
+                                ...i,
+                                isLeaf: i.catalogType !== 'ORGANIZATION',
+                            };
+                        });
+                        treeNode.dataRef.children = newData;
+                    }
+                    this.treeData = [...this.treeData];
+                    resolve();
+                });
+            });
+        },
+        async onSearch(searchText) {
+            const dataList = this.allData;
+            const newData = dataList.filter((i) => i.catalogName.indexOf(searchText) != -1);
+            this.dataSource = await formatObj(newData, { label: 'catalogName', value: 'catalogId' });
+        },
+        onChange(val) {
+            const data = this.allData.find((i) => i.catalogId === val);
+            this.selectedObj = data;
+            this.selectedKeys = [val];
+            this.searchValue = val;
+            this.$emit('change', data);
+        },
+        onSelect(selectedKeys, { node }) {
+            if (selectedKeys.length !== 0) {
+                this.selectedKeys = selectedKeys;
+                const cueData = node.$props.dataRef;
+                this.selectedObj = cueData;
+                this.searchValue = undefined;
+                this.$emit('change', cueData);
+            }
+        },
+        async view(data = {}, type = 0) {
+            this.$refs['TreeDrawer']?.open();
+            this.$nextTick(() => {
+                this.$refs['TreeDrawer'].setData({ ...data }, type);
+            });
+        },
+        addEqu() {
+            const { categoryId } = this.selectedObj;
+            this.view({ parentCategoryId: categoryId }, 0);
+        },
+        addOrg() {},
+        edit() {
+            const data = this.selectedObj;
+            delete data.children;
+            this.view(data, 1);
+        },
+        del() {
+            const categoryId = this.selectedObj?.categoryId;
+            if (categoryId) return;
+            try {
+                this.Api.delOceanusTree({ categoryId });
+                this.$message.success('删除成功!');
+                this.init();
+            } catch (e) {
+                this.$message.warning('删除失败!');
+            }
+        },
+    },
+};
+</script>
diff --git a/src/pages/oceanus/equipment/components/RightTable.vue b/src/pages/oceanus/equipment/components/RightTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61a4a2ef8d573f472c3d9553d776f421969fc651
--- /dev/null
+++ b/src/pages/oceanus/equipment/components/RightTable.vue
@@ -0,0 +1,179 @@
+<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-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>
+            <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>
+        </a-table-column>
+    </my-table>
+</template>
+
+<script>
+import Api from '@/api/oceanus';
+import { formatObj } from '@/utils';
+import ActionButton from '@/components/action_button/index.vue';
+
+export default {
+    components: { ActionButton },
+    props: {
+        param: Object,
+    },
+    watch: {
+        param(val) {
+            this.tableParam = val;
+        },
+    },
+    data() {
+        return {
+            buttons: [
+                {
+                    label: '编辑',
+                    click: this.onEditTableRow,
+                },
+                {
+                    type: 'confirm',
+                    url: (row) => `/oceanus/api/v1/categories/attributes/${row.attributeId}`,
+                    after: () => this.refreshTable(),
+                },
+                {
+                    label: '置顶',
+                    click: async (row) => {
+                        const { attributeId, categoryId } = row;
+                        try {
+                            await Api.movementAttributes({ attributeId, categoryId, moveType: 'TOP' });
+                            this.refreshTable();
+                            this.$message.success('置顶成功!');
+                        } catch (e) {
+                            this.$message.warning('置顶失败!');
+                        }
+                    },
+                },
+                {
+                    label: '置底',
+                    click: async (row) => {
+                        const { attributeId, categoryId } = row;
+                        try {
+                            await Api.movementAttributes({ attributeId, categoryId, moveType: 'BOTTOM' });
+                            this.refreshTable();
+                            this.$message.success('置顶成功!');
+                        } catch (e) {
+                            this.$message.warning('置顶失败!');
+                        }
+                    },
+                },
+            ],
+            editButtons: [
+                {
+                    label: '确定',
+                    click: this.onSubmitTableRow,
+                },
+                {
+                    type: 'confirm',
+                    label: '取消',
+                    title: '确认是否取消?',
+                    onOk: this.onCancelTableRow,
+                },
+            ],
+            tableParam: {},
+        };
+    },
+    methods: {
+        async formatData(data) {
+            const newData = await formatObj(data.records, { key: 'attributeId' });
+            return newData;
+        },
+        onAddTableRow() {
+            const data = this.$refs['table']?.getTableData();
+            const isEdit = data.find((i) => i.action === 'add');
+            if (isEdit) return;
+            const obj = {
+                editable: true,
+                key: +new Date(),
+                attributeName: '',
+                action: 'add',
+                categoryId: this.tableParam.categoryId,
+                viewIndex: 1,
+            };
+            this.$refs['table']?.setTableData([obj, ...data]);
+        },
+        onCancelTableRow(row) {
+            const data = this.$refs['table']?.getTableData();
+            if (row.action === 'add') {
+                const newData = data.filter((i) => i.key !== row.key);
+                this.$refs['table']?.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['table']?.setTableData(newData);
+            }
+        },
+        async onSubmitTableRow(row) {
+            if (row.attributeName === '') {
+                return this.$message.warning('请输入属性名称!');
+            } else {
+                try {
+                    if (row.action === 'add') {
+                        await Api.addAttributes(row);
+                    }
+                    if (row.action === 'edit') {
+                        await Api.updateAttributes(row);
+                    }
+                    this.refreshTable();
+                    this.$message.success('提交成功!');
+                } catch (e) {
+                    this.$message.warning('保存失败!');
+                }
+            }
+        },
+        onEditTableRow(row) {
+            const data = this.$refs['table']?.getTableData();
+            const newData = data.map((i) => {
+                const oData = { ...i };
+                if (i.key === row.key) {
+                    oData.editable = true;
+                    oData.action = 'edit';
+                }
+                return oData;
+            });
+            this.$refs['table']?.setTableData(newData);
+        },
+        refreshTable() {
+            this.$refs['table']?.reset();
+        },
+    },
+};
+</script>
+<style scoped>
+</style>
diff --git a/src/pages/oceanus/equipment/components/TreeDrawer.vue b/src/pages/oceanus/equipment/components/TreeDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..24d1f4fa5ebc9fe0fb68c7e7fcc1db3143e9e4bf
--- /dev/null
+++ b/src/pages/oceanus/equipment/components/TreeDrawer.vue
@@ -0,0 +1,54 @@
+<template>
+    <Drawer ref="drawerRef" v-model="visible" :title="title" :onOk="submit" :colesAfter="refresh">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
+            <a-form-model-item label="编码" prop="categoryCode">
+                <a-input v-model="form.categoryCode" :disabled="isView" />
+            </a-form-model-item>
+            <a-form-model-item label="名称" prop="categoryName">
+                <a-input v-model="form.categoryName" :disabled="isView" />
+            </a-form-model-item>
+            <a-form-model-item label="说明" prop="remark">
+                <a-textarea v-model="form.remark" :disabled="isView" :rows="4" />
+            </a-form-model-item>
+        </a-form-model>
+    </Drawer>
+</template>
+
+<script>
+import Drawer from '@/components/table/drawer.vue';
+import FormMixin from '@/components/FormMixin';
+import Api from '@/api/oceanus';
+
+export default {
+    components: { Drawer },
+    props: {
+        refresh: Function,
+    },
+    mixins: [FormMixin],
+    data() {
+        return {
+            visible: false,
+            form: {},
+            rules: {
+                categoryCode: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                categoryName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                remark: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+            },
+            Api,
+        };
+    },
+    async mounted() {},
+    methods: {
+        open() {
+            this.form = {};
+            this.visible = true;
+        },
+        add() {
+            return Api.addOceanusTree(this.form);
+        },
+        edit() {
+            return Api.updateOceanusTree(this.form);
+        },
+    },
+};
+</script>
diff --git a/src/pages/oceanus/equipment/index.vue b/src/pages/oceanus/equipment/index.vue
index c699d32707f22be7e73929acd7b28dbad67685f8..7acdd35b07429e638abdce4809deb3a9f1354107 100644
--- a/src/pages/oceanus/equipment/index.vue
+++ b/src/pages/oceanus/equipment/index.vue
@@ -1,7 +1,25 @@
 <template>
-    <div>equipment</div>
+    <a-row :gutter="10">
+        <a-col :span="8">
+            <LeftTree v-model="treeVale" />
+        </a-col>
+        <a-col :span="16">
+            <RightTable />
+        </a-col>
+    </a-row>
 </template>
 
 <script>
-export default {};
+import RightTable from './components/RightTable.vue';
+import LeftTree from './components/LeftTree.vue';
+
+export default {
+    components: { RightTable, LeftTree },
+    data() {
+        return {
+            treeVale: {},
+        };
+    },
+    methods: {},
+};
 </script>
diff --git a/src/pages/system/view/organization/usermanagement/User.vue b/src/pages/system/view/organization/usermanagement/User.vue
index 84ad601f4b3139f323bceface40586804c1f6752..3a418194d745387373192b2df6a0e6a2142ee88a 100644
--- a/src/pages/system/view/organization/usermanagement/User.vue
+++ b/src/pages/system/view/organization/usermanagement/User.vue
@@ -117,15 +117,17 @@ export default {
                     key: 'certificateId',
                 });
                 userCertificateList.map((i) => {
-                    const name = i.pictureUrl.split('/');
-                    const data = {
-                        uid: +new Date(),
-                        status: 'done',
-                        name: name[name.length - 1],
-                        url: i.pictureUrl,
-                        thumbUrl: 'http://platform.kuopu.net:9300/' + i.pictureUrl,
-                    };
-                    i.pictureUrl = [data];
+                    if (i.pictureUrl) {
+                        const name = i.pictureUrl.split('/');
+                        const data = {
+                            uid: +new Date(),
+                            status: 'done',
+                            name: name[name.length - 1],
+                            url: i.pictureUrl,
+                            thumbUrl: 'http://platform.kuopu.net:9300/' + i.pictureUrl,
+                        };
+                        i.pictureUrl = [data];
+                    }
                 });
                 this.$nextTick(() => {
                     this.$refs['form'].setData(
diff --git a/src/pages/system/view/organization/usermanagement/components/Certificate/CertificateItem.vue b/src/pages/system/view/organization/usermanagement/components/Certificate/CertificateItem.vue
index b1d964f8654969d62be4acafc898f8cbcdd65e0c..3ff2c93bc26fde1d1f75421acef5f1195786c929 100644
--- a/src/pages/system/view/organization/usermanagement/components/Certificate/CertificateItem.vue
+++ b/src/pages/system/view/organization/usermanagement/components/Certificate/CertificateItem.vue
@@ -1,7 +1,12 @@
 <template>
     <a-col :span="12">
         <a-card hoverable style="width: 100%">
-            <img class="tw-h-40" slot="cover" alt="example" :src="value.pictureUrl[0].thumbUrl" />
+            <img
+                class="tw-h-40"
+                slot="cover"
+                alt="example"
+                :src="value.pictureUrl && value.pictureUrl[0].thumbUrl"
+            />
             <template slot="actions" class="ant-card-actions">
                 <div class="tw-h-full" @click="onEdit">编辑</div>
                 <div class="tw-h-full">
@@ -35,6 +40,14 @@ export default {
     props: {
         value: Object,
     },
+    watch: {
+        value: {
+            handler(val) {
+                console.log(val);
+            },
+            deep: true,
+        },
+    },
     data() {
         return {};
     },
diff --git a/src/pages/system/view/organization/usermanagement/form.vue b/src/pages/system/view/organization/usermanagement/form.vue
index 39bed447315b571edd2dd1288f7bf5836c755ab6..67fb482dc1506c964e8f4e135af26e83931a486a 100644
--- a/src/pages/system/view/organization/usermanagement/form.vue
+++ b/src/pages/system/view/organization/usermanagement/form.vue
@@ -74,6 +74,7 @@ export default {
             this.current--;
         },
         async onSubmit() {
+            console.log(this.form);
             if (this.form.userJobRelationList.length === 0) {
                 this.$message.error('必须设置岗位!');
                 return;
@@ -81,9 +82,10 @@ export default {
             const userCertificateList = this.form.userCertificateList.map((i) => {
                 return {
                     ...i,
-                    pictureUrl: i.pictureUrl[0]?.url || undefined,
+                    pictureUrl: i.pictureUrl && (i.pictureUrl[0]?.url || undefined),
                 };
             });
+            console.log(userCertificateList);
             const userRoleRelationList = this.form.userRoleRelationList.map((i) => ({ roleId: i }));
             const data = { ...this.form, userRoleRelationList, userCertificateList };
             if (this.form.userId) {