diff --git a/src/views/dataBasePlatform/dataService/apiManagement/index.vue b/src/views/dataBasePlatform/dataService/apiManagement/index.vue
index 5a5903a..eba8b89 100644
--- a/src/views/dataBasePlatform/dataService/apiManagement/index.vue
+++ b/src/views/dataBasePlatform/dataService/apiManagement/index.vue
@@ -3,15 +3,37 @@
     <div class="dataTitle">API管理</div>
     <el-divider />
     <el-container class="dataContent">
-      <el-aside width="200px">接口目录</el-aside>
+      <el-aside width="250px" class="leftContent">
+        <div class="leftTitle">接口目录</div>
+        <el-row>
+          <el-input v-model="searchTree" style="width: 100%" placeholder="请输入关键字">
+            <template #suffix>
+              <el-icon class="el-input__icon searchBtn"><search /></el-icon>
+            </template>
+          </el-input>
+        </el-row>
+
+        <el-row class="treeBox">
+          <el-tree style="width: 100%" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"> </el-tree>
+        </el-row>
+      </el-aside>
       <el-main>
         <el-row class="dataTop">
-          <el-col :span="10">
-            <el-input v-model="qlCode" style="width: 320px" placeholder="请输入应用ID">
-              <template #suffix>
-                <el-icon class="el-input__icon searchBtn"><search /></el-icon>
-              </template>
-            </el-input>
+          <el-col :span="16" class="dataLeft">
+            <div class="dataBox">
+              API名称
+              <el-input v-model="qlCode" style="width: 200px" placeholder="请输入API名称">
+                <template #suffix>
+                  <el-icon class="el-input__icon searchBtn"><search /></el-icon>
+                </template>
+              </el-input>
+            </div>
+            <div>
+              状态
+              <el-select v-model="addForm.p1" style="width: 200px">
+                <el-option v-for="item in stateType" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
           </el-col>
           <el-col :span="7">
             <el-button type="primary" icon="search">查询</el-button>
@@ -38,18 +60,27 @@
              <div>{{ stationType.find(item => item.value == row.p1)?.label || row.p1 }}</div>
            </template> -->
           </el-table-column>
-          <el-table-column prop="p2" label="最后一次修改时间"> </el-table-column>
-          <el-table-column prop="p3" label="创建时间">
+          <el-table-column prop="p2" label="API名称"> </el-table-column>
+          <el-table-column prop="p3" label="请求方式">
             <!-- <template #default="{ row }">
              <div>{{ stateType.find(item => item.value == row.p3)?.label || row.p3 }}</div>
            </template> -->
           </el-table-column>
+          <el-table-column prop="p4" label="标签"> </el-table-column>
+          <el-table-column prop="p5" label="存放路径"> </el-table-column>
+          <el-table-column prop="p6" label="状态"> </el-table-column>
+          <el-table-column prop="p7" label="创建人"> </el-table-column>
+          <el-table-column prop="p8" label="创建时间" min-width="100"> </el-table-column>
+          <el-table-column prop="p9" label="标签"> </el-table-column>
 
-          <el-table-column label="操作" min-width="100">
+          <el-table-column label="操作" min-width="200">
             <template #default="{ row }">
               <div style="display: flex; justify-content: space-evenly">
-                <el-button link type="primary" icon="Edit" @click="addInfo(row)">编辑</el-button>
-                <el-button link type="danger" icon="Delete" @click="deleteInfo(row)">删除</el-button>
+                <el-button link type="primary" @click="addInfo(row)">编辑</el-button>
+                <el-button link type="primary">授权</el-button>
+                <el-button link type="primary">配置</el-button>
+                <el-button link type="primary">上线</el-button>
+                <el-button link type="danger" @click="deleteInfo(row)">删除</el-button>
               </div>
             </template>
           </el-table-column>
@@ -151,22 +182,17 @@
   {
     id: 1,
     value: 1,
-    label: '正常',
+    label: '待上线',
   },
   {
     id: 2,
     value: 2,
-    label: '损坏',
+    label: '已上线',
   },
   {
     id: 3,
     value: 3,
-    label: '使用中',
-  },
-  {
-    id: 4,
-    value: 4,
-    label: '在建',
+    label: '已下线',
   },
 ]);
 const stateType1 = ref([
@@ -231,6 +257,60 @@
 
 const { dialogConfig, addForm, rules } = toRefs(dataList);
 
+const searchTree = ref('');
+const treeData = [
+  {
+    label: '排水',
+    children: [
+      {
+        label: 'PS001',
+        children: [
+          // {
+          //   label: 'Level three 1-1-1',
+          // },
+        ],
+      },
+      {
+        label: 'PS002',
+        children: [
+          // {
+          //   label: 'Level three 1-1-1',
+          // },
+        ],
+      },
+    ],
+  },
+  {
+    label: '桥梁',
+    children: [
+      {
+        label: 'QL001',
+        children: [
+          // {
+          //   label: 'Level three 2-1-1',
+          // },
+        ],
+      },
+      {
+        label: 'QL002',
+        children: [
+          // {
+          //   label: 'Level three 2-2-1'1,
+          // },
+        ],
+      },
+    ],
+  },
+];
+
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+};
+
+const handleNodeClick = data => {
+  console.log(data);
+};
 // 新增和编辑
 const addInfo = row => {
   dialogConfig.value.open = true;
@@ -298,13 +378,13 @@
         date: '2022-06-01 12:00:00',
         name: '桥梁名称',
         p1: '1',
-        p2: '2022-06-01 12:00:00',
-        p3: '2022-06-01 12:00:00',
+        p2: '001',
+        p3: '002',
         p4: 1,
         p5: 1,
-        p6: '2022-06-01 12:00:00',
+        p6: '12',
         p7: '34',
-        p8: '124',
+        p8: '2022-06-01 12:00:00',
         p9: '',
         info: '',
         handlePicList: [],
@@ -315,13 +395,13 @@
         date: '2022-06-01 12:00:00',
         name: '桥梁名称',
         p1: '1',
-        p2: '2022-06-01 12:00:00',
-        p3: '2022-06-01 12:00:00',
+        p2: '20',
+        p3: '2022',
         p4: 1,
         p5: 1,
-        p6: '2022-06-01 12:00:00',
+        p6: '202',
         p7: '34',
-        p8: '124',
+        p8: '2022-06-01 12:00:00',
         p9: '',
         info: '',
         handlePicList: [],
@@ -366,6 +446,30 @@
       align-items: center;
       justify-content: space-between;
       margin-bottom: 10px;
+      .dataLeft {
+        display: flex;
+        .dataBox {
+          margin-right: 20px;
+        }
+      }
+    }
+    .leftContent {
+      border-right: 1px solid #ccc;
+      background-color: #fff;
+      padding: 5px 10px;
+      margin: 0;
+      .leftTitle {
+        text-align: center;
+        border: 1px solid #ccc;
+        border-radius: 10px;
+        margin-bottom: 10px;
+      }
+      .treeBox {
+        // border: 1px solid red;
+        margin-top: 10px;
+        height: calc(100% - 90px);
+        overflow-y: auto;
+      }
     }
   }
 }