diff --git a/src/frontend/devops-permission/src/css/svg/abnormal.svg b/src/frontend/devops-permission/src/css/svg/abnormal.svg
new file mode 100644
index 00000000000..c07caf86f2f
--- /dev/null
+++ b/src/frontend/devops-permission/src/css/svg/abnormal.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffe6e6" d="M1024 512A512 512 0 0 1 512 1024 512 512 0 0 1 0 512 512 512 0 0 1 1024 512z"/><path fill="#ea3636" d="M787.6923076923077 512A275.69230769230774 275.69230769230774 0 0 1 512 787.6923076923077 275.69230769230774 275.69230769230774 0 0 1 236.30769230769232 512 275.69230769230774 275.69230769230774 0 0 1 787.6923076923077 512z"/></svg>
\ No newline at end of file
diff --git a/src/frontend/devops-permission/src/css/svg/unknown.svg b/src/frontend/devops-permission/src/css/svg/unknown.svg
new file mode 100644
index 00000000000..2cf940fdc14
--- /dev/null
+++ b/src/frontend/devops-permission/src/css/svg/unknown.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#f0f1f5" d="M1024 512A512 512 0 0 1 512 1024 512 512 0 0 1 0 512 512 512 0 0 1 1024 512z"/><path fill="#979ba5" d="M787.6923076923077 512A275.69230769230774 275.69230769230774 0 0 1 512 787.6923076923077 275.69230769230774 275.69230769230774 0 0 1 236.30769230769232 512 275.69230769230774 275.69230769230774 0 0 1 787.6923076923077 512z"/></svg>
\ No newline at end of file
diff --git a/src/frontend/devops-permission/src/css/svg/warning.svg b/src/frontend/devops-permission/src/css/svg/warning.svg
new file mode 100644
index 00000000000..cee3d3497b2
--- /dev/null
+++ b/src/frontend/devops-permission/src/css/svg/warning.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ff9c01" d="M1024 512c0 282.8-229.2 512-512 512S0 794.8 0 512 229.2 0 512 0 1024 229.2 1024 512z" opacity=".16"/><path fill="#ff9c01" d="M787.7 512c0 152.3-123.4 275.7-275.7 275.7S236.3 664.3 236.3 512c0-152.3 123.5-275.7 275.8-275.6C664.3 236.4 787.7 359.8 787.7 512z"/></svg>
\ No newline at end of file
diff --git a/src/frontend/devops-permission/src/http/api.ts b/src/frontend/devops-permission/src/http/api.ts
index daa3db68905..59cb95d3788 100644
--- a/src/frontend/devops-permission/src/http/api.ts
+++ b/src/frontend/devops-permission/src/http/api.ts
@@ -106,7 +106,7 @@ export default {
     const query = new URLSearchParams({
       ...params,
     }).toString();
-    return fetch.get(`${apiPerfix}/auth/resource/member/${projectId}/etMemberGroupCount?${query}g`);
+    return fetch.get(`${apiPerfix}/auth/resource/member/${projectId}/getMemberGroupCount?${query}`);
   },
   /**
    * 获取项目成员有权限的用户组
@@ -191,4 +191,10 @@ export default {
   getMemberGroupDetails(projectId: string, resourceType: string, groupId: number) {
     return fetch.get(`${apiPerfix}/auth/resource/group/${projectId}/${resourceType}/${groupId}/getMemberGroupDetails`);
   },
+  /**
+   * 获取交接单列表
+   */
+  fetchHandoverOverviewList(params: any) {
+    return fetch.post(`${apiPerfix}/auth/handover/listHandoverOverviews`, params);
+  }
 }
diff --git a/src/frontend/devops-permission/src/views/my-permission/my-handover/index.vue b/src/frontend/devops-permission/src/views/my-permission/my-handover/index.vue
index 033d9afb4a3..8617860d6cd 100644
--- a/src/frontend/devops-permission/src/views/my-permission/my-handover/index.vue
+++ b/src/frontend/devops-permission/src/views/my-permission/my-handover/index.vue
@@ -31,10 +31,11 @@
     <bk-loading class="handover-table" :loading="isLoading">
       <bk-table
         ref="refTable"
-        :data="tableData"
+        :data="handoverList"
         :columns="columns"
         height="100%"
         max-height="100%"
+        border="outer"
         show-overflow-tooltip
         :pagination="pagination"
         remote-pagination
@@ -78,13 +79,17 @@
 </template>
   
 
-<script lang="ts" setup>
-  import { ref, computed, h } from 'vue';
+<script setup>
+  import http from '@/http/api';
+  import { ref, computed, h, onMounted } from 'vue';
   import { useI18n } from 'vue-i18n';
+  import { Spinner  } from 'bkui-vue/lib/icon';
+  import abnormalIcon from '@/css/svg/abnormal.svg'
+  import unknownIcon from '@/css/svg/unknown.svg'
 
   const { t } = useI18n();
   const isLoading = ref(false);
-  const tableData = ref([]);
+  const handoverList = ref([]);
   const pagination = ref({
     count: 0,
     limit: 20,
@@ -94,8 +99,19 @@
   const searchValue = ref([]);
   const selectList = ref([]);
   const isSelectAll = ref(false);  // 选择全量数据
+  const userId = computed(() => window.top.userInfo.username);
   const columns = computed(() => {
-    const list = [
+    return [
+      ...(
+        !isGiven.value ? [
+          {
+            type: "selection",
+            maxWidth: 60,
+            minWidth: 60,
+            align: 'center'
+          }
+        ] : []
+      ),
       {
         label: t('单号'),
         field: "flowNo",
@@ -119,43 +135,48 @@
       },
       {
         label: t('移交详情'),
-        field: "handoverFrom",
-      },
-      {
-        label: t('提单人'),
-        field: "handoverTime",
-        render ({ cell, row }) {
-          return h(
-            'span',
-            [
-              cell
-            ]
-          );
-        },
+        field: 'title',
       },
+      ...(
+        !isGiven.value ? [
+          {
+            label: t('提单人'),
+            field: 'applicant',
+          },
+        ] : []
+      ),
       {
         label: t('提单时间'),
-        field: "handoverFrom",
+        field: 'handoverFrom',
       },
+      ...(
+        isGiven.value ? [
+          {
+            label: t('当前处理人'),
+            field: 'approver',
+          },
+        ] : []
+      ),
       {
         label: t('状态'),
-        field: "handoverFrom",
-      },
-      {
-        label: t('操作'),
-        field: "handoverFrom",
+        field: 'handoverStatus',
+        render ({ cell, row}) {
+          return h('div', { style: { 'display': 'flex' } },
+            cell === 'pending'
+            ? []
+            : []
+          )
+        }
       },
+      ...(
+        !isGiven.value ? [
+          {
+            label: t('操作'),
+            field: 'operation',
+          },
+        ] : []
+      )
     ]
- 
-    if (!isGiven.value) {
-      list.unshift({
-        type: "selection",
-        maxWidth: 60,
-        minWidth: 60,
-        align: 'center'
-      })
-    }
-    return list
   })
   const isEmpty = computed(() => !searchValue.value.length);
   const handoverTypeMap = computed(() => {
@@ -193,6 +214,29 @@
   const filterTips = computed(() => {
     return searchData.value.map(item => item.name).join(' / ');
   })
+  const fetchHandoverList = async () => {
+    try {
+      isLoading.value = true
+      const param = {
+        memberId: userId.value,
+        page: pagination.value.current,
+        pageSize: pagination.value.limit,
+      }
+      if (isGiven.value) {
+        param['applicant'] = userId.value
+      } else {
+        param['approver'] = userId.value
+      }
+      const res = await http.fetchHandoverOverviewList(param)
+      handoverList.value = res.records
+      pagination.value.current += 1
+      pagination.value.count = res.count
+    } catch (e) {
+      console.error(e)
+    } finally {
+      isLoading.value = false
+    }
+  }
   const handleChangeHandoverType = (value) => {
     isGiven.value = value;
   }
@@ -214,6 +258,10 @@
   const clearSearchValue = () => {
 
   }
+
+  onMounted(() => {
+    fetchHandoverList()
+  })
 </script>
 
 <style lang="scss">