diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index 86d0f684..84363a19 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -199,7 +199,7 @@ export function getMyComment(params) {
 }
 export function demandComment(params) {
   return request({
-    url: '/demandComment/'+ params,
+    url: '/demandComment/' + params,
     method: 'get',
     params,
   })
@@ -260,3 +260,18 @@ export function filesUpload(data) {
     data,
   })
 }
+// 根据Id查询归属部门
+export function deptIdQuery(params) {
+  return request({
+    url: '/sys/dept/' + params,
+    method: 'get',
+  })
+}
+//能力下架分页
+export function AbilityToPullDownPages(params) {
+  return request({
+    url: '/processForm/tabilityapplication/in_use_page',
+    method: 'get',
+    params,
+  })
+}
diff --git a/front/src/assets/personalCenter/Capabilitydiagram.png b/front/src/assets/personalCenter/Capabilitydiagram.png
new file mode 100644
index 00000000..26506b21
Binary files /dev/null and b/front/src/assets/personalCenter/Capabilitydiagram.png differ
diff --git a/front/src/views/personalCenter/components/MyPublish.vue b/front/src/views/personalCenter/components/MyPublish.vue
index c17c215c..f802d426 100644
--- a/front/src/views/personalCenter/components/MyPublish.vue
+++ b/front/src/views/personalCenter/components/MyPublish.vue
@@ -168,11 +168,13 @@
     </a-modal>
     <a-modal
       v-model:visible="visible"
-      title="下架原因"
+      width="12.1rem"
       @ok="del()"
       @cancel="reason = ''"
+      footer="{}"
     >
-      <a-input v-model:value="reason" placeholder="请输入下架原因" />
+      <TheShelvesAbility v-if="visible" :delObj="delObj"></TheShelvesAbility>
+      <!-- <a-input v-model:value="reason" placeholder="请输入下架原因" /> -->
     </a-modal>
     <a-modal
       v-model:visible="visible2"
@@ -227,15 +229,17 @@
 </template>
 
 <script setup>
-  import { onMounted, reactive, ref } from 'vue'
+  import { onMounted, reactive, ref, onBeforeUnmount } from 'vue'
   import { useRouter } from 'vue-router'
   import { message } from 'ant-design-vue'
+  import mybus from '@/myplugins/mybus'
   // , reactive
   import { wodepage, undercarriage } from '@/api/personalCenter'
   import { getUserInfo } from '@/api/user'
   // TheNewRelease
   import TheNewRelease from '@/views/personalCenter/components/TheNewRelease'
   import PublishDetails from '@/views/personalCenter/components/PublishDetails'
+  import TheShelvesAbility from '@/views/personalCenter/components/TheShelvesAbility' //能力下架申请
   const router = useRouter()
   let tabList = ref([
     // '全部',
@@ -324,7 +328,6 @@
   ])
   let tabname = ref('组件服务')
   function tabqiehuan(item, index) {
-    // debugger
     tabIndex.value = index
     switch (item) {
       case '组件服务':
@@ -347,7 +350,6 @@
     }
   }
   function tabqiehuan2(item, index) {
-    // debugger
     if (index == tabIndex2.value) {
       tabIndex2.value = -1
       delFlag = ''
@@ -441,7 +443,6 @@
     path: '/nenglishangjia', // 跳转的页面路由
   })
   // const nenglishangjia = () => {
-  //   // debugger
   //   window.open(newpage.href, '_blank')
   //   // router.resolve('/nenglishangjia')
   // }
@@ -462,11 +463,30 @@
       ],
     }).then((res) => {
       console.log('下架结果', res)
+      if (res.data.data == '该资源已发起下架') {
+        message.error('该资源已发起下架,请耐心等待审批!')
+      } else {
+        message.success(`${delObj.value.name} 发起下架成功，请等待审批`)
+      }
       reason.value = ''
       visible.value = false
       getApplyList(tabname.value)
     })
   }
+  //退出申请按钮
+  mybus.on('Cancellation', (val) => {
+    visible.value = val
+  })
+  //提交申请按钮
+  mybus.on('Determine', (val) => {
+    delObj.value.name = val.title
+    reason.value = val.reason
+    del()
+  })
+  onBeforeUnmount(() => {
+    mybus.off('tabsChange')
+    mybus.off('Determine')
+  })
   const reason = ref('')
   const visible = ref(false)
   const delObj = ref({})
diff --git a/front/src/views/personalCenter/components/TheShelvesAbility.vue b/front/src/views/personalCenter/components/TheShelvesAbility.vue
new file mode 100644
index 00000000..ce2a5e67
--- /dev/null
+++ b/front/src/views/personalCenter/components/TheShelvesAbility.vue
@@ -0,0 +1,475 @@
+<template>
+  <div class="TheShelvesAbility">
+    <div class="title-h1">能力下架申请</div>
+    <div class="title-h2">
+      <div class="title-left">下架能力</div>
+      <div class="title-right">展开</div>
+    </div>
+    <!-- 头部应用信息 -->
+    <div class="TheShelvesAbility-top">
+      <div class="deptName">
+        <span></span>
+        {{ name }}
+      </div>
+      <div class="data-list">
+        <div class="data-list-left"></div>
+        <div class="data-list-right">
+          <div class="data-list-right-titleAndDescription">
+            <div class="data-list-right-title">
+              <div class="title-left">
+                <span>{{ props.delObj.name }}</span>
+                <span>{{ props.delObj.type }}</span>
+              </div>
+              <div class="title-right">
+                <span>能力使用状态：</span>
+                <span v-if="dataList.tota > 0">正在被使用</span>
+                <span v-else>未使用</span>
+              </div>
+            </div>
+            <div class="data-list-right-description">
+              {{ props.delObj.name }}：{{ props.delObj.description }}
+            </div>
+          </div>
+          <div class="data-list-right-table">
+            <div class="data-list-right-table-title">
+              正在使用应用数：{{ dataList.total }}
+            </div>
+            <div class="data-list-right-table-list">
+              <div class="data-list-right-table-list-tab">
+                <span
+                  v-for="(item, index) in datalistrighttablelist"
+                  :key="`data-list-right-table-list-tab-${index}`"
+                >
+                  {{ item }}
+                </span>
+              </div>
+              <div
+                class="data-list-right-table-list-content"
+                v-if="dataList.tota > 0"
+              >
+                <div
+                  v-for="(item, index) in dataList.list"
+                  :key="`data-list-right-table-list-content-${index}`"
+                >
+                  <span>{{ item.applicationSystem }}</span>
+                  <span>{{ item.unit }}</span>
+                  <span>{{ item.user }}</span>
+                  <span>{{ item.phone }}</span>
+                </div>
+              </div>
+              <div v-else class="zanwu">暂无数据</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 底部用户基本信息 -->
+    <div class="TheShelvesAbility-bottom">
+      <a-form
+        ref="formRef"
+        :model="formName"
+        name="basic"
+        :label-col="{ style: { width: '106px' } }"
+        :wrapper-col="{ style: { width: '230px' } }"
+        labelAlign="left"
+        autocomplete="off"
+      >
+        <div class="base-info">
+          <a-form-item
+            label="申请标题"
+            name="title"
+            :rules="[{ required: true, message: '请输入申请标题' }]"
+          >
+            <a-input
+              placeholder="请输入能力申请标题"
+              v-model:value="formName.title"
+            />
+          </a-form-item>
+        </div>
+        <div class="base-info">
+          <a-form-item
+            label="申请人信息"
+            name="user"
+            :rules="[{ required: true, message: '请输入申请人' }]"
+          >
+            <a-input
+              placeholder="请输入申请人"
+              v-model:value="formName.user"
+              disabled
+            />
+          </a-form-item>
+
+          <a-form-item
+            style="margin: 0 22px"
+            label="电话"
+            name="phone"
+            :rules="[
+              {
+                required: true,
+                pattern: /^1[3456789]\d{9}$/,
+                message: '请输入正确的电话号码',
+              },
+            ]"
+          >
+            <a-input
+              placeholder="请输入申请人电话"
+              v-model:value="formName.phone"
+            />
+          </a-form-item>
+
+          <a-form-item
+            label="单位"
+            name="unit"
+            :rules="[{ required: true, message: '请输入单位' }]"
+          >
+            <a-input
+              placeholder="请输入单位"
+              v-model:value="formName.unit"
+              disabled
+            />
+          </a-form-item>
+        </div>
+        <a-form-item
+          style="color: #666; font-size: 16px"
+          label="申请单附件"
+          name="applyDoc"
+        >
+          <a-upload
+            v-model:file-list="formName.fileList"
+            name="file"
+            :action="`${baseURL}/upload`"
+            :headers="headers"
+            @change="handleChange"
+            :before-upload="beforeUpload"
+          >
+            <a-button
+              style="
+                width: 100px;
+                height: 30px;
+                margin-right: 10px;
+                background: #edf4fc;
+                color: #0087ff;
+                font-size: 14px;
+                border-radius: 6px;
+                border: 1px solid #bbd3ef;
+                padding: 0;
+                text-align: center;
+              "
+            >
+              <upload-outlined></upload-outlined>
+              文件上传
+            </a-button>
+            <span style="font-size: 14px; color: #999">
+              支持doc、docx、jpg、png、jpeg、pdf、xlxs、ppt类型文件
+            </span>
+          </a-upload>
+        </a-form-item>
+        <div>
+          <a-form-item
+            label="能力下架原因"
+            name="reason"
+            :rules="[{ required: true, message: '请输入能力下架原因' }]"
+          >
+            <a-input
+              placeholder="请输入能力下架原因"
+              v-model:value="formName.reason"
+            />
+          </a-form-item>
+        </div>
+        <div class="button-bottom">
+          <a-button
+            style="
+              width: 80px;
+              height: 38px;
+              margin-right: 20px;
+              background: #e1edfa;
+              color: #0087ff;
+              font-size: 14px;
+              border-radius: 6px;
+              border: none;
+              padding: 0;
+              text-align: center;
+            "
+            type="primary"
+            html-type="cancle"
+            @click="quxiao()"
+          >
+            退出申请
+          </a-button>
+          <a-button
+            style="
+              width: 80px;
+              height: 38px;
+              background: #0087ff;
+              color: #fff;
+              font-size: 14px;
+              border-radius: 6px;
+              border: none;
+              padding: 0;
+              text-align: center;
+            "
+            type="primary"
+            html-type="submit"
+            @click="queding()"
+          >
+            提交申请
+          </a-button>
+        </div>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import { message } from 'ant-design-vue'
+  import { deptIdQuery, AbilityToPullDownPages } from '@/api/personalCenter'
+  import { getUserInfo } from '@/api/user'
+  import mybus from '@/myplugins/mybus'
+  const baseURL = window.SITE_CONFIG.apiURL
+  const props = defineProps({
+    delObj: { type: Object, default: null },
+  })
+  let name = ref('')
+  const datalistrighttablelist = ref([
+    '赋能应用名称',
+    '应用归属部门',
+    '部门联系人',
+    '联系人电话',
+  ]) //初始化表头
+  let formName = ref({
+    title: '',
+    user: '',
+    phone: '',
+    unit: '',
+    reason: '',
+    fileList: [],
+  })
+  const dataList = ref({})
+  //初始化：获取部门名称
+  const dataFunction = () => {
+    let params = {
+      resourceId: props.delObj.id,
+    }
+    //初始化：获取部门名称
+    deptIdQuery(props.delObj.deptId).then((res) => {
+      name.value = res.data.data.name
+    })
+    //初始化：获取正在使用应用
+    AbilityToPullDownPages(params).then((res) => {
+      dataList.value = res.data.data
+    })
+    //初始化获取当前用户信息
+    getUserInfo().then((res) => {
+      formName.value.title = props.delObj.name
+      formName.value.user = res.data.data.realName
+      formName.value.phone = props.delObj.deptPhone
+      // formName.value.fileList = props.delObj.undercarriageEnclosure
+      deptIdQuery(res.data.data.deptId).then((resValue) => {
+        formName.value.unit = resValue.data.data.name
+      })
+    })
+    console.log('props.delObj', props.delObj)
+  }
+  watch(
+    () => props.delObj,
+    (val) => {
+      let params = {
+        resourceId: props.delObj.id,
+      }
+      deptIdQuery(props.delObj.deptId).then((res) => {
+        name.value = res.data.data.name
+      })
+      AbilityToPullDownPages(params).then((res) => {
+        dataList.value = res.data.data
+        console.log('props.delObj', props.delObj)
+      })
+      //初始化获取当前用户信息
+      getUserInfo().then((res) => {
+        formName.value.title = props.delObj.name
+        formName.value.user = res.data.data.realName
+        formName.value.phone = res.data.data.mobile
+        formName.value.fileList = props.delObj.undercarriageEnclosure
+        deptIdQuery(res.data.data.deptId).then((resValue) => {
+          formName.value.unit = resValue.data.data.name
+        })
+      })
+    },
+    { deep: true }
+  )
+  //取消按钮
+  const quxiao = () => {
+    mybus.emit('Cancellation', false)
+  }
+  //确定按钮
+  const queding = () => {
+    if (
+      formName.value.title == '' ||
+      formName.value.user == '' ||
+      formName.value.phone == '' ||
+      formName.value.unit == '' ||
+      formName.value.reason == ''
+    ) {
+      message.error('信息必填项请填写完整!')
+    } else {
+      // let dataFrom = props.delObj
+      // dataFrom.deptPhone = formName.value.phone
+      // dataFrom.name = formName.value.title
+      mybus.emit('Determine', formName.value)
+    }
+  }
+  //调用方法(调用的执行顺序)
+  const init = () => {
+    dataFunction()
+  }
+  init()
+</script>
+
+<style scoped lang="less">
+  .TheShelvesAbility {
+    .title-h1 {
+      font-size: 0.22rem;
+      line-height: 0.22rem;
+      margin-bottom: 0.25rem;
+      color: #212121;
+    }
+    .title-h2 {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.16rem;
+      color: #212121;
+      line-height: 0.16rem;
+      border-bottom: 0.01rem #dddee1 solid;
+      margin: 0 0.6rem 0.2rem 0.6rem;
+      padding-bottom: 0.1rem;
+    }
+    .TheShelvesAbility-top {
+      margin: 0 0.6rem 0 0.6rem;
+      .deptName {
+        color: #0558e1;
+        font-size: 0.22rem;
+        display: flex;
+        align-items: center;
+        line-height: 0.22rem;
+        margin-bottom: 0.2rem;
+        span {
+          display: inline-block;
+          width: 0.05rem;
+          height: 0.05rem;
+          background: #0558e1;
+          border-radius: 0.05rem;
+          margin-right: 0.05rem;
+        }
+      }
+      .data-list {
+        display: flex;
+        border-bottom: 1px solid #dddee1;
+        margin-bottom: 0.1rem;
+        .data-list-left {
+          width: 0.8rem;
+          height: 1.1rem;
+          background: url('~@/assets/personalCenter/Capabilitydiagram.png')
+            no-repeat;
+          background-size: 0.8rem 0.8rem;
+          background-position: center;
+          margin-left: 0.1rem;
+          padding-bottom: 0.3rem;
+        }
+        .data-list-right {
+          width: calc(100% - 0.83rem);
+          margin-left: 0.1rem;
+          padding-bottom: 0.2rem;
+          border-left: 1px solid #dddee1;
+          font-size: 0.18rem;
+          color: #000000;
+          .data-list-right-titleAndDescription {
+            padding-left: 0.1rem;
+            padding-right: 0.2rem;
+            border-bottom: 1px solid #dddee1;
+            padding-bottom: 0.1rem;
+            .data-list-right-title {
+              display: flex;
+              justify-content: space-between;
+              margin-bottom: 0.2rem;
+              .title-left {
+                span:first-child {
+                  font-weight: 600;
+                }
+                span:last-child {
+                  font-size: 0.14rem;
+                  display: inline-block;
+                  margin-left: 0.08rem;
+                  padding: 0 0.05rem;
+                  border-radius: 0.3rem;
+                  background: #00b8e6;
+                  color: #fff;
+                }
+              }
+            }
+          }
+          .data-list-right-table {
+            .data-list-right-table-title {
+              margin-left: 0.1rem;
+              margin-top: 0.2rem;
+              margin-bottom: 0.2rem;
+              font-size: 0.14rem;
+              display: inline-block;
+              margin-left: 0.08rem;
+              padding: 0 0.05rem;
+              border-radius: 0.3rem;
+              background: #00b8e6;
+              color: #fff;
+            }
+            .data-list-right-table-list {
+              padding: 0 0.05rem;
+              .data-list-right-table-list-tab {
+                display: grid;
+                grid-template-columns: repeat(4, 25%);
+                background: rgba(191, 191, 191, 0.1);
+                span {
+                  display: inline-block;
+                  text-align: center;
+                  padding: 0.05rem 0;
+                }
+              }
+              .data-list-right-table-list-content {
+                & > div {
+                  display: grid;
+                  grid-template-columns: repeat(4, 25%);
+                  span {
+                    display: inline-block;
+                    text-align: center;
+                    padding: 0.05rem 0;
+                  }
+                }
+                div:nth-child(even) {
+                  background: rgba(191, 191, 191, 0.1);
+                }
+                div:nth-child(odd) {
+                  span {
+                    padding: 0.2rem 0;
+                  }
+                }
+              }
+              .zanwu {
+                margin-top: 0.2rem;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+    .TheShelvesAbility-bottom {
+      margin: 0.5rem 0.6rem 0 0.6rem;
+      .base-info {
+        display: flex;
+        justify-content: space-between;
+      }
+      .button-bottom {
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+</style>