diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index d6a61432..67079961 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -223,3 +223,11 @@ export function queryApplicationRelByResourceId(params) {
     params,
   })
 }
+// 获取关联组件列表
+export function queryResourceRelByKeyId(params) {
+  return request({
+    url: '/dataResourceRel/queryResourceRelByKeyId',
+    method: 'get',
+    params,
+  })
+}
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index 789dabd6..96eae8fe 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -79,6 +79,9 @@
             <a-button v-else-if="item.type == 'dialog'" @click="sourceClick">
               请选择来源应用
             </a-button>
+            <a-button v-else-if="item.type == 'dialog2'" @click="componentsClick">
+              请选择关联组件
+            </a-button>
             <a-select v-else-if="item.type == 'select'" style="width: 240px" v-model:value="item.note1"
               :placeholder="'请选择' + item.name">
               <a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
@@ -98,12 +101,12 @@
             </div>
           </div>
           <div class="AssociatedApplication">
-            <a-modal v-model:visible="visibleAssociatedApplication" title="关联应用" @ok="handleOk" @cancel="handleCancel"
-              style="width: 960px">
+            <a-modal v-model:visible="visibleAssociatedApplication" :title="titleName" @ok="handleOk"
+              @cancel="handleCancel" style="width: 960px">
               <div>
                 <a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys"
-                  :data-source="mockData" :titles="['未关联的应用名称', '已关联的应用名称']" :render="(item) => item.title"
-                  @change="handleChange" @selectChange="handleSelectChange" />
+                  :data-source="mockData" :titles="titles" :render="(item) => item.title" @change="handleChange"
+                  @selectChange="handleSelectChange" />
               </div>
             </a-modal>
           </div>
@@ -120,6 +123,7 @@ import { message } from 'ant-design-vue'
 import {
   getCategoryTreePage,
   queryApplicationRelByResourceId,
+  queryResourceRelByKeyId,
 } from '@/api/personalCenter'
 import { useRouter } from 'vue-router'
 
@@ -327,6 +331,8 @@ const ApplicationArea = (item, itemson) => {
 // 来源应用
 const visibleAssociatedApplication = ref(false)
 const mockData = ref([])
+const titles = ref(['未关联的应用名称', '已关联的应用名称'])
+const titleName = ref('关联应用')
 
 const sourceClick = () => {
   visibleAssociatedApplication.value = true
@@ -344,6 +350,28 @@ const sourceClick = () => {
     })
   })
 }
+// 关联组件
+const componentsClick = () => {
+  titles.value = ['未关联的组件名称', '已关联的组件名称']
+  titleName.value = '关联组件'
+
+  visibleAssociatedApplication.value = true
+  queryResourceRelByKeyId({
+    keyId: 0,
+    type: '组件服务',
+    referenceName: '',
+  }).then((res) => {
+    // console.log(res.data.data.notLinked)
+    res.data.data.notLinked.forEach((val, index) => {
+      // console.log(val, index)
+      mockData.value.push({
+        key: val.id,
+        title: val.name,
+        description: val.id,
+      })
+    })
+  })
+}
 const targetKeys = ref([])
 const selectedKeys = ref([])
 
@@ -362,7 +390,7 @@ const handleOk = (e) => {
   visibleAssociatedApplication.value = false
   // console.log('2222222222222', props.refData)
   data.value.list.map((item) => {
-    if (item.name === '来源应用') {
+    if (item.name === '来源应用' || item.name === '关联组件信息') {
       item.note1 = targetKeys.value + ''
     }
   })