diff --git a/back/src/assets/img/sj-jx.png b/back/src/assets/img/sj-jx.png
new file mode 100644
index 00000000..a5106273
Binary files /dev/null and b/back/src/assets/img/sj-jx.png differ
diff --git a/back/src/views/modules/myAgent/demo/Application-resources.vue b/back/src/views/modules/myAgent/demo/Application-resources.vue
index c060a4f5..bf310a87 100644
--- a/back/src/views/modules/myAgent/demo/Application-resources.vue
+++ b/back/src/views/modules/myAgent/demo/Application-resources.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">22222222222222</div>
+  <div class="wrapper"></div>
 </template>
 
 <script>
diff --git a/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue b/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
index 224c6d96..ce605fa9 100644
--- a/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
+++ b/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
@@ -3,13 +3,18 @@
     <el-form :model="dataView">
       <div v-for="(item, index) in dataView.children" :key="item">
         <div class="dataTitle">{{ item.name }}</div>
-        <el-form-item
-          v-for="itemson in item.children[0].children"
-          :key="itemson.name"
-          :label="itemson.name"
-        >
-          <el-input v-model="itemson.note1"></el-input>
-        </el-form-item>
+        <div v-for="itemson in item.children" :key="itemson.name">
+          <div class="dataTitleSon">{{ itemson.name }}</div>
+          <div class="dataContent">
+            <el-form-item
+              v-for="itemsonson in itemson.children"
+              :key="itemsonson.name"
+              :label="itemsonson.name"
+            >
+              <el-input v-model="itemsonson.note1"></el-input>
+            </el-form-item>
+          </div>
+        </div>
       </div>
     </el-form>
   </div>
@@ -44,6 +49,54 @@ export default {
           this.dataView = val.filter(
             (item) => item.name === this.dataForm.type + '一'
           )[0]
+          console.log(this.dataView)
+          console.log(this.dataForm)
+          // 应用描述
+          this.dataView.children[0].children[0].children[4].note1 =
+            this.dataForm.description
+          // 应用名称
+          this.dataView.children[0].children[0].children[0].note1 =
+            this.dataForm.name
+          this.dataForm.infoList.map((item, index) => {
+            this.dataView.children.map((itemView, indexView) => {
+              // console.log('itemView', itemView)
+              itemView.children.map((itemViewSon, indexViewSon) => {
+                // console.log('itemViewSon', itemViewSon)
+                itemViewSon.children.map((itemSon, indexSon) => {
+                  // console.log('itemSon', itemSon)
+                  if (itemSon.name.indexOf('描述') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.description
+                  } else if (itemSon.name.indexOf('名称') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.name
+                  } else if (itemSon.name.indexOf('共享条件') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.shareCondition
+                  } else if (itemSon.name.indexOf('共享方式') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.shareMode
+                  } else if (itemSon.name.indexOf('共享类型') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.shareType
+                  } else if (itemSon.name.indexOf('能力类型') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.type
+                  } else if (itemSon.name === item.attrType) {
+                    this.dataView.children[indexView].children[
+                      indexViewSon
+                    ].children[indexSon].note1 = item.attrValue
+                  }
+                })
+              })
+            })
+          })
         } else {
           const componentType = this.dataForm.infoList.filter(
             (item) => item.attrType === '组件类型'
@@ -93,6 +146,10 @@ export default {
                     this.dataView.children[indexView].children[0].children[
                       indexSon
                     ].note1 = this.dataForm.deptPhone
+                  } else if (itemSon.name.indexOf('接口请求方式') != -1) {
+                    this.dataView.children[indexView].children[0].children[
+                      indexSon
+                    ].note1 = this.dataForm.apiMethodType
                   } else if (itemSon.name === item.attrType) {
                     this.dataView.children[indexView].children[
                       indexViewSon
@@ -161,5 +218,31 @@ export default {
 </script>
 <style lang="scss" scoped>
 .wrapper {
+  .dataTitle {
+    text-align: center;
+    color: #333333;
+    font-size: 22px;
+    margin-bottom: 25px;
+  }
+  .dataTitleSon {
+    padding-left: 30px;
+    color: #333333;
+    font-size: 22px;
+    margin-bottom: 20px;
+    background: url('~@/assets/img/sj-jx.png') no-repeat;
+    background-position-x: 15px;
+  }
+  .dataContent {
+    display: grid;
+    grid-template-columns: repeat(3, 33%);
+  }
+  ::v-deep .el-form {
+  }
+  ::v-deep .el-form-item__content {
+    display: inline-block;
+    input {
+      width: 400px;
+    }
+  }
 }
 </style>
diff --git a/front/public/index.html b/front/public/index.html
index aad9b95e..fb8c764c 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-03-29 16:45:25
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-07-13 15:01:07
+ * @LastEditTime: 2022-07-13 18:01:36
  * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
diff --git a/front/public/static/config/location.js b/front/public/static/config/location.js
index 763b690a..a6a6e44f 100644
--- a/front/public/static/config/location.js
+++ b/front/public/static/config/location.js
@@ -31,6 +31,7 @@ if (newLocation === 'qingdao') {
     { name: '能力云图', key: 'capabilityCloud' },
     { name: '能力统计', key: 'abilityStatistics' },
     // { name: '开发指南', key: 'developmentGuide' },
+    { name: '指导手册', key: 'instructionManual' },
     { name: '需求中心', key: 'demandCenter' },
     // { name: '个人中心', key: 'personalCenter' },
     { name: '区市站点', key: 'mapTest' },
diff --git a/front/src/api/home.js b/front/src/api/home.js
index 198f1f38..de19b712 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -337,7 +337,6 @@ export function getApplyCameraList(id) {
   })
 }
 
-// 融合服务--start
 // 融合服务--列表
 export function getIntegrationServicesList(params) {
   return request({
@@ -355,4 +354,11 @@ export function getIntegrationDetail(id) {
   })
 }
 
-// 融合服务--end
+// 指导手册--左侧文档树
+export function getDevelopDocTree(params) {
+  return request({
+    url: '/resource/selectDevelopDoc',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file
diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index d9eb8e9b..b58168f4 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -14,6 +14,13 @@ export function getTabilityapplication(params) {
     params,
   })
 }
+export function getByApplyFlag(params) {
+  return request({
+    url: '/processForm/tabilityapplication/getByApplyFlag/' + params,
+    method: 'get',
+    // params,
+  })
+}
 
 // 查询申购车列表
 export function getSgcList(params) {
diff --git a/front/src/router/index.js b/front/src/router/index.js
index 1810bdec..b8702453 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -462,6 +462,15 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  {
+    path: '/instructionManual',
+    name: 'instructionManual',
+    component: () => import('@/views/instructionManual/index'),
+    meta: {
+      title: '指导手册',
+      icon: 'error-warning-line',
+    },
+  },
 ]
 export const asyncRoutes = [
   {
diff --git a/front/src/views/home/AbilityToApplyFor.vue b/front/src/views/home/AbilityToApplyFor.vue
index 57d4eabf..cc0393e2 100644
--- a/front/src/views/home/AbilityToApplyFor.vue
+++ b/front/src/views/home/AbilityToApplyFor.vue
@@ -5,44 +5,54 @@
       <span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
       <span class="btn" @click="falg = !falg" v-show="falg">收起</span>
     </div>
-    <div v-for="(item, index) in dataForm" :key="index" class="ability-to-apply-for-content">
+    <div
+      v-for="(item, index) in dataForm"
+      :key="index"
+      class="ability-to-apply-for-content"
+    >
       <div class="dep-name">
         <span></span>
         {{ item.deptName }}
       </div>
       <template v-for="val in item.arr" :key="val.resourceId">
         <div class="item">
-          <div class="tx" :class="
-            val.type == '基础设施'
-              ? 'sxt'
-              : val.componentType == '智能算法'
+          <div
+            class="tx"
+            :class="
+              val.type == '基础设施'
+                ? 'sxt'
+                : val.componentType == '智能算法'
                 ? 'znsf'
                 : val.componentType == '图层服务'
-                  ? 'tcfw'
-                  : val.componentType == '开发组件'
-                    ? 'kfzj'
-                    : val.componentType == '业务组件'
-                      ? 'ywzj'
-                      : ''
-          "></div>
+                ? 'tcfw'
+                : val.componentType == '开发组件'
+                ? 'kfzj'
+                : val.componentType == '业务组件'
+                ? 'ywzj'
+                : ''
+            "
+          ></div>
           <div class="text">
             <div class="name">
-              <span @click="
-                showItem(val.resourceId, val.type, val.delFlag, val.note1)
-              " style="cursor: pointer">
+              <span
+                @click="
+                  showItem(val.resourceId, val.type, val.delFlag, val.note1)
+                "
+                style="cursor: pointer"
+              >
                 {{ val.resourceName }}
               </span>
               <span>{{ val.type }}</span>
             </div>
             <div class="description">
               {{
-                  val.description ||
-                  (val.note1 &&
-                    JSON.parse(val.note1)[0].channelName +
+                val.description ||
+                (val.note1 &&
+                  JSON.parse(val.note1)[0].channelName +
                     '等' +
                     JSON.parse(val.note1).length +
                     '个摄像头') ||
-                  '--'
+                '--'
               }}
             </div>
           </div>
@@ -51,8 +61,17 @@
       </template>
     </div>
   </div>
-  <a-modal v-model:visible="videoVisible" title="已申请摄像头列表" @ok="videoVisible = false">
-    <a-table :columns="columns" :data-source="xVideoList" bordered :pagination="{ defaultPageSize: 6 }">
+  <a-modal
+    v-model:visible="videoVisible"
+    title="已申请摄像头列表"
+    @ok="videoVisible = false"
+  >
+    <a-table
+      :columns="columns"
+      :data-source="xVideoList"
+      bordered
+      :pagination="{ defaultPageSize: 6 }"
+    >
       <template #bodyCell="{ column, text }">
         <!-- <template>
         <a>{{ text }}</a>
@@ -63,201 +82,201 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
-import { message } from 'ant-design-vue'
-import { ref, defineProps } from 'vue'
-import mybus from '@/myplugins/mybus'
-const router = useRouter()
-const props = defineProps({
-  dataList: { type: Array, default: null },
-})
-const falg = ref(false)
-let dataForm = ref([])
-const videoVisible = ref(false)
-const xVideoList = ref([])
-
-const columns = ref([
-  {
-    title: '摄像头名称',
-    dataIndex: 'name',
-  },
-])
-// eslint-disable-next-line vue/no-setup-props-destructure
-dataForm.value = props.dataList
-console.log(dataForm.value)
-// const router = useRouter()
-// const arr =
-//   router.currentRoute.value.query.name instanceof Array
-//     ? router.currentRoute.value.query.name
-//     : [router.currentRoute.value.query.name]
-// const dataResourceId = router.currentRoute.value.query.resourceId
-
-// const depList = ref({
-//   Name: [],
-//   depID: [],
-// })
-//移除方法
-const removeFunction = (data) => {
-  dataForm.value.map((val) => {
-    if (val.arr.length > 1) {
-      val.arr = val.arr.filter((item) => item.id !== data.id)
-    } else {
-      message.error('至少需要提交一条能力申请！')
-    }
+  import { useRouter } from 'vue-router'
+  import { message } from 'ant-design-vue'
+  import { ref, defineProps } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const props = defineProps({
+    dataList: { type: Array, default: null },
   })
-  dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
-}
-// 详情
-const showItem = (id, type, delFlag, note1) => {
-  if (type == '基础设施') {
-    let arr = JSON.parse(note1)
-    xVideoList.value = []
-    arr.map((val) => {
-      xVideoList.value.push({ name: val.channelName, key: val.channelId })
+  const falg = ref(false)
+  let dataForm = ref([])
+  const videoVisible = ref(false)
+  const xVideoList = ref([])
+
+  const columns = ref([
+    {
+      title: '摄像头名称',
+      dataIndex: 'name',
+    },
+  ])
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  dataForm.value = props.dataList
+  console.log(dataForm.value)
+  // const router = useRouter()
+  // const arr =
+  //   router.currentRoute.value.query.name instanceof Array
+  //     ? router.currentRoute.value.query.name
+  //     : [router.currentRoute.value.query.name]
+  // const dataResourceId = router.currentRoute.value.query.resourceId
+
+  // const depList = ref({
+  //   Name: [],
+  //   depID: [],
+  // })
+  //移除方法
+  const removeFunction = (data) => {
+    dataForm.value.map((val) => {
+      if (val.arr.length > 1) {
+        val.arr = val.arr.filter((item) => item.id !== data.id)
+      } else {
+        message.error('至少需要提交一条能力申请！')
+      }
     })
-    videoVisible.value = true
-  } else {
-    if (delFlag == 0) {
-      window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
-      mybus.emit('tabsChange', { flag: id })
-      router.push({
-        path: '/details',
-        query: {
-          id: id,
-        },
+    dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
+  }
+  // 详情
+  const showItem = (id, type, delFlag, note1) => {
+    if (type == '基础设施') {
+      let arr = JSON.parse(note1)
+      xVideoList.value = []
+      arr.map((val) => {
+        xVideoList.value.push({ name: val.channelName, key: val.channelId })
       })
+      videoVisible.value = true
+    } else {
+      if (delFlag == 0) {
+        window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
+        mybus.emit('tabsChange', { flag: id })
+        router.push({
+          path: '/details',
+          query: {
+            id: id,
+          },
+        })
+      }
     }
   }
-}
 </script>
 
 <style scoped lang="less">
-.ability-to-apply-for {
-  height: 2.9rem;
-  overflow: hidden;
+  .ability-to-apply-for {
+    height: 2.9rem;
+    overflow: hidden;
 
-  .title {
-    font-size: 0.16rem;
-    color: #212121;
-    border-bottom: 0.01rem #dddee1 solid;
-    padding-bottom: 0.1rem;
-    margin-bottom: 0.2rem;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .ability-to-apply-for-content {
-    padding-right: 0.5rem;
-    position: relative;
-
-    .dep-name {
-      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;
-      }
-    }
-
-    .item {
+    .title {
+      font-size: 0.16rem;
+      color: #212121;
+      border-bottom: 0.01rem #dddee1 solid;
       padding-bottom: 0.1rem;
-      margin-bottom: 0.1rem;
-      border-bottom: 1px solid #dddee1;
-      display: flex;
-      align-items: center;
-
-      .text {
-        margin-left: 0.2rem;
-        width: 8.8rem;
-      }
-    }
-
-    .name {
       margin-bottom: 0.2rem;
+      display: flex;
+      justify-content: space-between;
+    }
 
-      span:first-child {
-        display: inline-block;
-        margin-right: 0.08rem;
-        font-size: 0.18rem;
-        color: #000000;
+    .ability-to-apply-for-content {
+      padding-right: 0.5rem;
+      position: relative;
+
+      .dep-name {
+        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;
+        }
       }
 
-      span:last-child {
-        display: inline-block;
-        padding: 0 0.05rem;
-        background: #00b8e6;
-        color: #fff;
+      .item {
+        padding-bottom: 0.1rem;
+        margin-bottom: 0.1rem;
+        border-bottom: 1px solid #dddee1;
+        display: flex;
+        align-items: center;
+
+        .text {
+          margin-left: 0.2rem;
+          width: 8.8rem;
+        }
       }
-    }
 
-    .description {
-      width: 8.8rem;
-      color: rgba(0, 0, 0, 0.45);
-    }
+      .name {
+        margin-bottom: 0.2rem;
 
-    .remove {
-      margin-left: 0.1rem;
-      width: 0.32rem;
-      height: 0.32rem;
-      background: url('~@/assets/home/remove.png') no-repeat;
-      background-size: cover;
-      cursor: pointer;
-    }
+        span:first-child {
+          display: inline-block;
+          margin-right: 0.08rem;
+          font-size: 0.18rem;
+          color: #000000;
+        }
 
-    .remove:hover {
-      background: url('~@/assets/home/remove-hover.png') no-repeat;
-      background-size: cover;
+        span:last-child {
+          display: inline-block;
+          padding: 0 0.05rem;
+          background: #00b8e6;
+          color: #fff;
+        }
+      }
+
+      .description {
+        width: 8.8rem;
+        color: rgba(0, 0, 0, 0.45);
+      }
+
+      .remove {
+        margin-left: 0.1rem;
+        width: 0.32rem;
+        height: 0.32rem;
+        background: url('~@/assets/home/remove.png') no-repeat;
+        background-size: cover;
+        cursor: pointer;
+      }
+
+      .remove:hover {
+        background: url('~@/assets/home/remove-hover.png') no-repeat;
+        background-size: cover;
+      }
     }
   }
-}
 
-.all {
-  height: unset;
-  min-height: 2.9rem;
-}
+  .all {
+    height: unset;
+    min-height: 2.9rem;
+  }
 
-.btn {
-  cursor: pointer;
-}
+  .btn {
+    cursor: pointer;
+  }
 
-.tx {
-  display: inline-block;
-  width: 0.8rem;
-  height: 0.8rem;
-  margin-left: 0.1rem;
-}
+  .tx {
+    display: inline-block;
+    width: 0.8rem;
+    height: 0.8rem;
+    margin-left: 0.1rem;
+  }
 
-.sxt {
-  background: url('~@/assets/home/sxt_square.png') no-repeat;
-  background-size: 100%;
-}
+  .sxt {
+    background: url('~@/assets/home/sxt_square.png') no-repeat;
+    background-size: 100%;
+  }
 
-.znsf {
-  background: url('~@/assets/home/znsf_square.png') no-repeat;
-  background-size: 100%;
-}
+  .znsf {
+    background: url('~@/assets/home/znsf_square.png') no-repeat;
+    background-size: 100%;
+  }
 
-.tcfw {
-  background: url('~@/assets/home/tcfw_square.png') no-repeat;
-  background-size: 100%;
-}
+  .tcfw {
+    background: url('~@/assets/home/tcfw_square.png') no-repeat;
+    background-size: 100%;
+  }
 
-.kfzj {
-  background: url('~@/assets/home/kfzj_square.png') no-repeat;
-  background-size: 100%;
-}
+  .kfzj {
+    background: url('~@/assets/home/kfzj_square.png') no-repeat;
+    background-size: 100%;
+  }
 
-.ywzj {
-  background: url('~@/assets/home/ywzj_square.png') no-repeat;
-  background-size: 100%;
-}
+  .ywzj {
+    background: url('~@/assets/home/ywzj_square.png') no-repeat;
+    background-size: 100%;
+  }
 </style>
diff --git a/front/src/views/home/apply.vue b/front/src/views/home/apply.vue
index 44123dad..f44f78aa 100644
--- a/front/src/views/home/apply.vue
+++ b/front/src/views/home/apply.vue
@@ -305,6 +305,7 @@
         unit: '',
         system: [],
         enclosure: '', //附件
+        enclosureName: '', //附件
       })
       const dataList = ref([])
       getUser().then((res) => {
@@ -538,6 +539,7 @@
         if (info.file.status === 'done') {
           message.success(`${info.file.name} 上传成功`)
           formName.enclosure = info.file.response.data
+          formName.enclosureName = info.file.name
         } else if (info.file.status === 'error') {
           message.error(`${info.file.name} 上传失败`)
         }
diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue
index 84655e1b..bc6b3ef4 100644
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@@ -136,6 +136,8 @@
   const select = ref(router.currentRoute.value.name)
   const mynoticeFlag = ref(false)
   const mynoticeData = ref([])
+  console.log('navListManagement------------>', navListManagement);
+  
   // eslint-disable-next-line no-undef
   const navList = ref(navListManagement.navList)
   const props = defineProps({
@@ -191,6 +193,11 @@
           path: '/developmentGuide',
         })
         break
+      case '指导手册':
+        router.push({
+          path: '/instructionManual',
+        })
+        break
       case '需求中心':
         router.push({
           path: '/demandCenter',
diff --git a/front/src/views/home/components/searchResultList.vue b/front/src/views/home/components/searchResultList.vue
index 5d0ab90e..47d0dd5f 100644
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@@ -620,9 +620,9 @@
       mybus.on('chongzhi', (typeObj) => {
         console.log('typeObj------------>', typeObj);
         if(!typeObj) {
-          selData.value = 'total'
+          selData.value = 'total';
         }
-        if(typeObj.type === '融合服务') {
+        if(typeObj && typeObj.type === '融合服务') {
           orderList.value = [
             {
               value: 'collectCount',
diff --git a/front/src/views/instructionManual/components/abilityDocTree.vue b/front/src/views/instructionManual/components/abilityDocTree.vue
new file mode 100644
index 00000000..45b5b671
--- /dev/null
+++ b/front/src/views/instructionManual/components/abilityDocTree.vue
@@ -0,0 +1,145 @@
+<template>
+    <div class="list-box">
+        <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
+            <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
+                <div :class="[clickData.title === item.title && item.isSelect ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']"
+                    class="list-text">
+                    {{ item.title }}
+                    <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
+                    <UpOutlined v-show="item.show && !judgeLeaf(item)" />
+                </div>
+            </a-tooltip>
+            <div style="margin-left:10px" v-if="!judgeLeaf(item) && item.show">
+                <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
+                    :level="newLevel + 1">
+                </abilityDocTree>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { defineComponent, onMounted, ref, watch, defineProps, nextTick } from 'vue';
+import { getDevelopDocTree } from '@/api/home'
+import { message } from 'ant-design-vue'
+import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+
+const props = defineProps({
+    dataList: {
+        type: Array,
+        default: () => []
+    },
+    selectName: {
+        type: String,
+        default: ''
+    },
+    level: {
+        type: Number,
+        default: 1
+    },
+    clickData: {
+        type: Object,
+        default: () => { title: '' }
+    },
+})
+
+// 数组
+const newDataList = ref(props.dataList)
+// 级别
+const newLevel = ref(props.level)
+
+const newClickData = ref(props.clickData)
+
+// 判断是不是叶子节点
+const judgeLeaf = (item) => {
+    if (item.children && item.children.length > 0) {
+        return false
+    } else {
+        return true
+    }
+}
+
+const showChildren = (item) => {
+    if (!item.children) {
+        if (newClickData.value.title !== '') {
+            handleTreeItem(item)
+        } else {
+            handleTreeItem({ title: '' })
+        }
+        item.isSelect = !item.isSelect;
+    }
+
+    if (item.children && item.children.length > 0) {
+        item.show = !item.show;
+    }
+}
+
+watch(
+    () => props.dataList,
+    (val) => {
+        if (val) {
+            newDataList.value = val
+        }
+    }
+)
+
+watch(
+    () => props.clickData,
+    (val) => {
+        if (val) {
+            newClickData.value = val
+        }
+    }
+)
+
+const emit = defineEmits(['treeClick'])
+const handleTreeItem = (item) => {
+    emit('tree-click', item);
+}
+
+</script>
+<style lang="less" scoped>
+.list-text {
+    font-size: 16px;
+    color: #333;
+    padding: 10px 0;
+    cursor: pointer;
+    padding-left: 10px;
+    border-bottom: 1px solid #ccc;
+    overflow: hidden;
+    /*文本不会换行*/
+    white-space: nowrap;
+    /*当文本溢出包含元素时，以省略号表示超出的文本*/
+    text-overflow: ellipsis;
+
+    &:hover {
+        color: #0058e1;
+    }
+}
+
+.normal {
+    color: #333;
+}
+
+.parent {
+    margin-bottom: 10px;
+    background: rgba(0, 135, 225, 0.1);
+    color: #333;
+
+    // margin-bottom: 10px;
+
+    &:hover {
+        color: #fff;
+        background: #0058e1;
+    }
+}
+
+.leaf {
+    font-size: 14px;
+    color: #555;
+}
+
+.select {
+    color: #0058e1;
+    font-weight: 600;
+}
+</style>
diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
new file mode 100644
index 00000000..5e2e9c6f
--- /dev/null
+++ b/front/src/views/instructionManual/index.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="father">
+    <home-header></home-header>
+    <div id="container" class="content">
+      <div class="left">
+        <div class="first-title-text" @click="showManual" :style="{ color: showManualFlag ? '#0058e1' : '' }">新手指引</div>
+        <div class="first-title-text" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档
+        </div>
+        <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
+      </div>
+      <div class="right">
+        <div v-if="showManualFlag">新手指引</div>
+        <div v-else>
+          <!-- 技术文档 -->
+          <iframe name="iframeName" width="1000" height="800" id="iframeId" :frameborder="0"
+            :src="clickData.doc"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import HomeHeader from '@/views/home/components/header'
+import abilityDocTree from './components/abilityDocTree'
+import { selectOne } from '@/api/home'
+import { ref, reactive, onMounted, nextTick, watch } from 'vue'
+import { useStore } from 'vuex'
+import { Empty, message } from 'ant-design-vue'
+import { getDevelopDocTree } from '@/api/home'
+
+const showManualFlag = ref(false)
+const showManual = () => {
+  showManualFlag.value = !showManualFlag.value
+}
+
+const clickData = ref({})
+const treeClick = (item) => {
+  showManualFlag.value = false;
+  console.log('item---treeClick--------->', item);
+  clickData.value = item;
+}
+let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
+
+const treeArray = ref([])
+const getTreeData = () => {
+  getDevelopDocTree({}).then((res) => {
+    console.log('res------文档树------>', res);
+    if (res.data.code !== 0) {
+      return message.error(res.data.msg)
+    }
+    treeArray.value = res.data.data || [];
+  }).catch((err) => {
+    message.error(err)
+  });
+}
+
+onMounted(() => {
+  getTreeData()
+  // loadPage()
+
+})
+
+var x = document.getElementById("iframeId");
+console.log('x------------>', x);
+
+watch(
+  () => clickData.value,
+  (val) => {
+    if (val) {
+      console.log('val-watch---clickData-------->', val);
+
+      // clickData.value = val
+      loadPage()
+    }
+  },
+  {
+    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
+    //那么首次执行，val为默认值,preVal为undefined
+    // immediate: true,
+    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
+    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
+    deep: true,
+  }
+)
+
+
+// window.onload = () => loadPage()
+
+
+
+
+const loadPage = () => {
+  console.log('2222----onload-------->', 2222);
+  if (!clickData.value.doc) {
+    return;
+  }
+
+  // var _iframe = document.getElementById('iframeId').contentWindow.document.getElementsByTagName('aside')//iframe下的id
+  // console.log('_iframe------------>', _iframe);
+
+  var x = document.getElementById("iframeId");
+  console.log('x------------>', x);
+
+  if (x) {
+    var y = (x.contentWindow || x.contentDocument);
+    if (y.document) {
+      y = y.document;
+    }
+    let asideDom = y.body.getElementsByClassName('.aside') && y.body.getElementsByClassName('.aside')[0]
+    if (asideDom) {
+      asideDom.style.right = 0;
+    }
+    console.log('asideDom------------>', asideDom);
+
+    let contentDom = y.body.getElementsByClassName('.content') && y.body.getElementsByClassName('.content')[0];
+    console.log('contentDom------------>', contentDom);
+    if (contentDom) {
+      contentDom.style.left = 0
+      contentDom.style.right = '16rem'
+    }
+
+    //id和class获取方式有一点点区别
+    // y.getElementById('元素id').style.fontSize = '12px'
+  }
+}
+
+</script>
+
+<style scoped lang="less">
+.father {
+  // overflow: hidden;
+  height: 100%;
+}
+
+.first-title-text {
+  cursor: pointer;
+  font-size: 18px;
+  color: #333;
+  padding-bottom: 10px;
+
+  &:hover {
+    color: #0058e1;
+  }
+}
+
+.content {
+  width: 1240px;
+  display: flex;
+  justify-content: flex-start;
+  margin: 0 auto;
+  margin-top: 84px;
+}
+
+.left {
+  width: 240px;
+  padding: 20px;
+  height: 600px;
+  margin-right: 20px;
+  background: rgba(244, 245, 248, 0.8);
+  overflow-y: auto;
+}
+
+.right {
+  width: 880px;
+}
+
+.sidebar {
+  right: 0 !important;
+}
+
+.content {
+  right: 16rem !important;
+  left: 0 !important;
+}
+</style>
diff --git a/front/src/views/personalCenter/components/AbilityApplication.vue b/front/src/views/personalCenter/components/AbilityApplication.vue
new file mode 100644
index 00000000..2afbf921
--- /dev/null
+++ b/front/src/views/personalCenter/components/AbilityApplication.vue
@@ -0,0 +1,322 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-07-12 09:42:44
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-13 15:56:51
+ * @Description:我的申请 能力申请 查看详情
+-->
+<template>
+  <div class="top">
+    <div class="title">基本信息</div>
+    <div class="main">
+      <div>
+        <p class="item">
+          <span>申请标题：{{ props.refObj.title }}</span>
+          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
+          <span>应用系统：{{ props.refObj.applicationSystem }}</span>
+        </p>
+        <p class="item">
+          <span>申请人信息：{{ props.refObj.user }}</span>
+          <span>电话：{{ props.refObj.phone }}</span>
+          <span>单位：{{ props.refObj.unit }}</span>
+        </p>
+        <p>
+          <span>应用场景：{{ props.refObj.applicationScene.join('；') }}</span>
+        </p>
+        <p>
+          <span>应用背景：{{ props.refObj.applicationBackground }}</span>
+        </p>
+        <p>
+          <span>期望效果：{{ props.refObj.effectWish }}</span>
+        </p>
+        <p v-if="props.refObj.enclosure">
+          <span>
+            申请单附件：
+            <span class="enclosure">
+              {{ props.refObj.enclosureName || '--' }}
+              <span class="btn">预览</span>
+            </span>
+          </span>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="bottom">
+    <div class="title">申请能力</div>
+    <div class="main">
+      <div class="item" v-for="(item, index) in showArr" :key="item + index">
+        <div class="deptName">
+          <span class="img"></span>
+          <span>{{ item.name }}</span>
+        </div>
+        <div class="oddNumbers">子单号：{{ item.instanceId }}</div>
+        <div class="box" v-if="item.list.length > 0">
+          <div class="ability" v-for="val in item.list" :key="val.id">
+            <div
+              class="left"
+              :class="
+                val.type == '应用资源'
+                  ? 'yyzy'
+                  : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                    )[0].attrValue == '智能算法'
+                  ? 'znsf'
+                  : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                    )[0].attrValue == '图层服务'
+                  ? 'tcfw'
+                  : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                    )[0].attrValue == '开发组件'
+                  ? 'kfzj'
+                  : val.infoList.filter(
+                      (val2) => val2.attrType == '组件类型'
+                    )[0].attrValue == '业务组件'
+                  ? 'ywzj'
+                  : 'yyzy'
+              "
+            ></div>
+            <div class="right">
+              <div class="ability-top">
+                <div class="name">
+                  {{ val.name }}
+                  <span class="type">
+                    {{
+                      val.type == '应用资源'
+                        ? '应用资源'
+                        : val.infoList.filter(
+                            (val2) => val2.attrType == '组件类型'
+                          )[0].attrValue == '智能算法'
+                        ? '智能算法'
+                        : val.infoList.filter(
+                            (val2) => val2.attrType == '组件类型'
+                          )[0].attrValue == '图层服务'
+                        ? '图层服务'
+                        : val.infoList.filter(
+                            (val2) => val2.attrType == '组件类型'
+                          )[0].attrValue == '开发组件'
+                        ? '开发组件'
+                        : val.infoList.filter(
+                            (val2) => val2.attrType == '组件类型'
+                          )[0].attrValue == '业务组件'
+                        ? '业务组件'
+                        : '--'
+                    }}
+                  </span>
+                </div>
+                <div class="btn">技术文档</div>
+              </div>
+              <div class="ability-bottom">
+                <div class="dec">资源描述：{{ val.description }}</div>
+                <div class="result">申请结果：{{ val.content || '--' }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="box" v-if="item.list2.length > 0">
+          <div class="ability" v-for="val in item.list2" :key="val.channelId">
+            <div class="left sxt"></div>
+            <div class="right">
+              <div class="ability-top">
+                <div class="name">
+                  {{ val.channelName }}
+                  <span class="type">基础设施</span>
+                </div>
+              </div>
+              <div class="ability-bottom">
+                <div class="dec">位置：{{ val.nodeName }}</div>
+                <!-- <div class="result">申请结果：{{ val.content || '--' }}</div> -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  const props = defineProps({
+    refObj: { type: Object, default: null },
+  })
+  const showArr = ref([])
+  console.log(props.refObj, '=====================================')
+  if (props.refObj.resourceApplication) {
+    showArr.value = []
+    for (const key in props.refObj.resourceApplication) {
+      if (props.refObj.resourceApplication[key].length > 0) {
+        let obj = { name: '', instanceId: '', list: [], list2: [] }
+        obj.name = key
+        props.refObj.resourceApplication[key].map((item) => {
+          obj.instanceId = item.instanceId
+          if (item.resources.length > 0) {
+            item.resources.map((val) => {
+              obj.list.push(val)
+            })
+          } else {
+            item.camera.map((val) => {
+              obj.list2.push(val)
+            })
+          }
+        })
+        showArr.value.push(obj)
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .title {
+    font-size: 0.18rem;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    border-left: 0.06rem #0058e1 solid;
+  }
+  .top {
+    margin-bottom: 0.1rem;
+    .main {
+      background: #eee;
+      padding: 0.2rem 0.2rem 0.1rem;
+      p {
+        display: flex;
+        justify-content: space-between;
+        & > span {
+          width: 100%;
+        }
+        .enclosure {
+          width: 95%;
+          padding: 0.05rem 0.1rem;
+          background: #ddd;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 0.05rem;
+        }
+        .btn:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+      }
+      .item {
+        span {
+          width: 2.5rem;
+        }
+      }
+    }
+  }
+  .bottom {
+    .main {
+      .item {
+        border-top: 1px #eee solid;
+        .deptName {
+          color: #0058e1;
+          font-size: 0.16rem;
+          margin-top: 0.1rem;
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.05rem;
+            height: 0.05rem;
+            border-radius: 0.05rem;
+            background: #0058e1;
+            margin-right: 0.1rem;
+          }
+        }
+        .oddNumbers {
+          margin: 0.1rem 0 0 0.15rem;
+        }
+        .box {
+          margin-left: 0.1rem;
+          .ability {
+            height: 1.3rem;
+            display: flex;
+            border-bottom: 1px #eee solid;
+            padding: 0.1rem 0;
+            .left {
+              display: inline-block;
+              width: 1.1rem;
+              height: 1.1rem;
+              margin-left: 0.1rem;
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .sxt {
+              background: url('~@/assets/home/sxt_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .yyzy {
+              background: url('~@/assets/home/yyzy_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .znsf {
+              background: url('~@/assets/home/znsf_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .tcfw {
+              background: url('~@/assets/home/tcfw_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .kfzj {
+              background: url('~@/assets/home/kfzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+
+            .ywzj {
+              background: url('~@/assets/home/ywzj_square.png') no-repeat;
+              background-size: 100%;
+            }
+            .btn {
+              cursor: pointer;
+              color: #0087ff;
+              align-self: flex-end;
+              padding: 5px 10px;
+              border: 1px #0087ff solid;
+              border-radius: 0.2rem;
+            }
+            .right {
+              flex: 1;
+              margin-left: 0.15rem;
+              .ability-top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .name {
+                  .type {
+                    background: #0087ff;
+                    color: #fff;
+                    padding: 2px 10px;
+                    border-radius: 10px;
+                    margin-left: 0.1rem;
+                  }
+                }
+              }
+              .ability-bottom {
+                margin-top: 0.15rem;
+                // display: flex;
+                // justify-content: space-between;
+                .dec {
+                  width: 7rem;
+                  height: 0.44rem;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                }
+                .result:hover {
+                  color: #0058e1;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/personalCenter/components/ApplyDetails.vue b/front/src/views/personalCenter/components/ApplyDetails.vue
index cdbe8189..977986a6 100644
--- a/front/src/views/personalCenter/components/ApplyDetails.vue
+++ b/front/src/views/personalCenter/components/ApplyDetails.vue
@@ -1,506 +1,21 @@
 <template>
   <div class="form-container">
-    <!-- <div class="title">基础信息</div> -->
-    <!-- <a-form
-      v-if="props.processDefinitionName == '能力申请流程'"
-      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="user"
-          :rules="[{ required: true, message: '请输入申请人' }]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请人"
-            v-model:value="formName.user"
-          />
-        </a-form-item>
-
-        <a-form-item
-          style="margin: 0 22px"
-          label="申请人电话"
-          name="phone"
-          :rules="[
-            {
-              required: true,
-              pattern: /^1[3456789]\d{9}$/,
-              message: '请输入正确的电话号码',
-            },
-          ]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请人电话"
-            v-model:value="formName.phone"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="申请单位"
-          name="unit"
-          :rules="[{ required: true, message: '请输入申请单位' }]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请单位"
-            v-model:value="formName.unit"
-          />
-        </a-form-item>
-      </div>
-
-      <div class="title">更多申请信息</div>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="申请应用"
-        name="system"
-        :rules="[{ required: true, message: '请输入申请应用' }]"
-      >
-        <a-input
-          disabled="true"
-          style="width: 350px; background-color: #f5f5f5"
-          v-model:value="formName.system"
-        />
-      </a-form-item>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="应用场景"
-        name="scene"
-        :rules="[{ required: true, message: '请输入应用场景' }]"
-      >
-        <a-textarea
-          style="
-            width: 500px;
-            height: 150px;
-            font-size: 16px;
-            line-height: 24px;
-            color: #333;
-            border: 1px solid #e0e0e0;
-            resize: none;
-            border-radius: 6px;
-            padding: 10px;
-          "
-          disabled="true"
-          v-model:value="formName.scene"
-        />
-      </a-form-item>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="申请依据"
-        name="basis"
-        :rules="[{ required: true, message: '请输入申请依据' }]"
-      >
-        <a-textarea
-          style="
-            width: 500px;
-            height: 150px;
-            font-size: 16px;
-            line-height: 24px;
-            color: #333;
-            border: 1px solid #e0e0e0;
-            border-radius: 6px;
-            padding: 10px;
-            resize: none;
-          "
-          disabled="true"
-          v-model:value="formName.basis"
-        />
-      </a-form-item>
-
-      <a-form-item
-        v-if="formName.enclosure"
-        style="color: #666; font-size: 16px"
-        label="附件下载"
-      >
-        <button
-          style="
-            width: 100px;
-            height: 30px;
-            margin-right: 10px;
-            background: rgb(237, 244, 252);
-            color: rgb(0, 135, 255);
-            font-size: 14px;
-            border-radius: 6px;
-            border: 1px solid rgb(187, 211, 239);
-            padding: 0px;
-            text-align: center;
-            cursor: pointer;
-          "
-          @click="downloadFile(formName.enclosure, '申请附件')"
-        >
-          下载
-        </button>
-      </a-form-item>
-    </a-form>
-    <a-form
-      v-if="props.processDefinitionName == '能力需求申请'"
-      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="applyUserName"
-          :rules="[{ required: true, message: '请输入申请人' }]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请人"
-            v-model:value="formName.applyUserName"
-          />
-        </a-form-item>
-
-        <a-form-item
-          style="margin: 0 22px"
-          label="申请人电话"
-          name="applyUserPhone"
-          :rules="[
-            {
-              required: true,
-              pattern: /^1[3456789]\d{9}$/,
-              message: '请输入正确的电话号码',
-            },
-          ]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请人电话"
-            v-model:value="formName.applyUserPhone"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="申请单位"
-          name="applyUserDeptName"
-          :rules="[{ required: true, message: '请输入申请单位' }]"
-        >
-          <a-input
-            disabled="true"
-            placeholder="请输入申请单位"
-            v-model:value="formName.applyUserDeptName"
-          />
-        </a-form-item>
-      </div>
-
-      <div class="title">需求信息</div>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="需求标题"
-        name="demandSubject"
-        :rules="[{ required: true, message: '请输入需求标题' }]"
-      >
-        <a-input
-          disabled="true"
-          style="width: 350px"
-          v-model:value="formName.demandSubject"
-        />
-      </a-form-item>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="需求类型"
-        name="请选择需求类型"
-      >
-        <a-select
-          disabled="true"
-          ref="select"
-          v-model:value="formName.detailsType"
-          @focus="focus"
-          style="width: 200px"
-        >
-          <a-select-option value="基础设施">基础设施</a-select-option>
-          <a-select-option value="数据资源">数据资源</a-select-option>
-          <a-select-option value="组件服务">组件服务</a-select-option>
-          <a-select-option value="应用资源">应用资源</a-select-option>
-          <a-select-option value="知识库">知识库</a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <a-form-item
-        label="应用领域"
-        name="detailsField"
-        style="width: 350px"
-        :rules="[{ required: true, message: '请输入应用领域' }]"
-      >
-        <a-input
-          disabled="true"
-          placeholder="请输入应用领域"
-          v-model:value="formName.detailsField"
-        />
-      </a-form-item>
-
-      <a-form-item
-        style="margin-bottom: 10px"
-        label="需求描述"
-        name="demandDetails"
-        :rules="[{ required: true, message: '请输入需求描述' }]"
-      >
-        <a-textarea
-          disabled="true"
-          style="
-            width: 500px;
-            height: 150px;
-            font-size: 16px;
-            line-height: 24px;
-            color: #333;
-            border: 1px solid #e0e0e0;
-            border-radius: 6px;
-            padding: 10px;
-            resize: none;
-          "
-          v-model:value="formName.demandDetails"
-        />
-      </a-form-item>
-      <a-form-item
-        v-if="formName.enclosure"
-        style="color: #666; font-size: 16px"
-        label="附件下载"
-      >
-        <button
-          style="
-            width: 100px;
-            height: 30px;
-            margin-right: 10px;
-            background: rgb(237, 244, 252);
-            color: rgb(0, 135, 255);
-            font-size: 14px;
-            border-radius: 6px;
-            border: 1px solid rgb(187, 211, 239);
-            padding: 0px;
-            text-align: center;
-            cursor: pointer;
-          "
-          @click="downloadFile(formName.enclosure, '申请附件')"
-        >
-          下载
-        </button>
-      </a-form-item>
-    </a-form>
-    <a-form
-      v-if="props.processDefinitionName == '能力资源上架'"
-      ref="formRef"
-      :model="dataForm.data"
-      name="basic"
-      :label-col="{ style: { width: '106px', height: '50px' } }"
-      :wrapper-col="{ style: { width: '230px' } }"
-      labelAlign="left"
-      autocomplete="off"
-    >
-      <div v-if="shifoushizujian">
-        <a-form-item label="应用名称">
-          <a-input
-            v-model:value="dataForm.data.name"
-            disabled="true"
-            placeholder="应用名称"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="应用描述">
-          <a-input
-            v-model:value="dataForm.data.description"
-            disabled="true"
-            placeholder="应用描述"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="部门联系人">
-          <a-input
-            v-model:value="dataForm.data.deptContacts"
-            disabled="true"
-            placeholder="部门联系人"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享类型">
-          <a-input
-            v-model:value="dataForm.data.shareType"
-            disabled="true"
-            placeholder="共享类型"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享方式">
-          <a-input
-            v-model:value="dataForm.data.shareMode"
-            disabled="true"
-            placeholder="共享方式"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享条件">
-          <a-input
-            v-model:value="dataForm.data.shareCondition"
-            disabled="true"
-            placeholder="共享方条件"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="访问地址">
-          <a-input
-            v-model:value="dataForm.data.link"
-            disabled="true"
-            placeholder="访问地址"
-          ></a-input>
-        </a-form-item>
-      </div>
-      <div v-if="!shifoushizujian">
-        <a-form-item label="组件名称" v-if="algorithmShow">
-          <a-input
-            v-model:value="dataForm.data.name"
-            disabled="true"
-            placeholder="组件名称"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="算法名称" v-if="nameNotShow">
-          <a-input
-            v-model:value="dataForm.data.name"
-            disabled="true"
-            placeholder="算法名称"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="应用描述" v-if="algorithmShow">
-          <a-input
-            v-model:value="dataForm.data.description"
-            disabled="true"
-            placeholder="应用描述"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="算法描述" v-if="nameNotShow">
-          <a-input
-            v-model:value="dataForm.data.description"
-            disabled="true"
-            placeholder="算法描述"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="部门联系人">
-          <a-input
-            v-model:value="dataForm.data.deptContacts"
-            disabled="true"
-            placeholder="部门联系人"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享类型">
-          <a-input
-            v-model:value="dataForm.data.shareType"
-            disabled="true"
-            placeholder="共享类型"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享方式">
-          <a-input
-            v-model="dataForm.data.shareMode"
-            disabled="true"
-            placeholder="共享方式"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="共享条件">
-          <a-input
-            v-model:value="dataForm.data.shareCondition"
-            disabled="true"
-            placeholder="共享方条件"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="服务接口">
-          <a-input
-            v-model:value="dataForm.data.apiUrl"
-            disabled="true"
-            placeholder="服务接口"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="接口请求方式">
-          <a-input
-            v-model:value="dataForm.data.apiMethodType"
-            disabled="true"
-            placeholder="接口请求方式"
-          ></a-input>
-        </a-form-item>
-      </div>
-      <div class="yingyongzujian">
-        <a-form-item
-          v-for="item in dataForm.data.infoList"
-          :key="item.index"
-          :label="item.attrType"
-          disabled="true"
-        >
-          <a-input
-            v-model:value="item.attrValue"
-            :placeholder="item.attrType"
-            disabled="true"
-          ></a-input>
-        </a-form-item>
-        <a-form-item
-          v-if="dataForm.data.enclosure"
-          style="color: #666; font-size: 16px"
-          label="附件下载"
-        >
-          <button
-            style="
-              width: 100px;
-              height: 30px;
-              margin-right: 10px;
-              background: rgb(237, 244, 252);
-              color: rgb(0, 135, 255);
-              font-size: 14px;
-              border-radius: 6px;
-              border: 1px solid rgb(187, 211, 239);
-              padding: 0px;
-              text-align: center;
-              cursor: pointer;
-            "
-            @click="downloadFile(dataForm.data.enclosure, '申请附件')"
-          >
-            下载
-          </button>
-        </a-form-item>
-      </div>
-    </a-form>
-    <a-form
-      v-if="props.processDefinitionName == '能力资源下架'"
-      ref="formRef"
-      :model="dataForm.data"
-      name="basic"
-      :label-col="{ style: { width: '106px', height: '50px' } }"
-      :wrapper-col="{ style: { width: '230px' } }"
-      labelAlign="left"
-      autocomplete="off"
-    >
-      <div>
-        <a-form-item label="申请人">
-          <a-input
-            v-model:value="dataForm.data.undercarriageUserName"
-            disabled="true"
-            placeholder="申请人"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="下架原因">
-          <a-input
-            v-model:value="dataForm.data.undercarriageReason"
-            disabled="true"
-            placeholder="下架原因"
-          ></a-input>
-        </a-form-item>
-      </div>
-    </a-form> -->
-    <div class="title">流程图</div>
+    <AbilityApplication :refObj="refObj"></AbilityApplication>
+    <!-- <div class="title">流程图</div>
     <div>
       <img :src="getResourceURL()" alt="" />
+    </div> -->
+    <div>
+      <div class="title">审批详情</div>
+      <template v-for="item in dataSource.data" :key="item">
+        <div class="oddNumbers">子单号:{{ item[0] }}</div>
+        <a-table :dataSource="item[1]" :columns="columns" />
+      </template>
     </div>
-    <div class="title">流转详情</div>
-    <a-table :dataSource="dataSource.data" :columns="columns" />
   </div>
 </template>
-
 <script setup>
+  import AbilityApplication from './AbilityApplication.vue'
   import { onMounted, reactive, defineProps, ref } from 'vue'
   import Cookies from 'js-cookie'
   // import { baseURL } from '@/config'
@@ -513,6 +28,29 @@
     getTaskVariables,
   } from '@/api/personalCenter'
   import { selectOneDel } from '@/api/home'
+  const props = defineProps({
+    processDefinitionName: { type: String, default: null },
+    businessKey: { type: String, default: null },
+    processInstanceId: { type: String, default: null },
+    resourceId: { type: String, default: null },
+    refObj: { type: Object, default: null },
+  })
+  const refObj = ref({})
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  refObj.value = props.refObj
+  //流转详情
+  const dataSource = reactive({ data: [] })
+  // console.log(props.refObj, '---------------------------------------')
+  if (props.refObj.resourceApplication) {
+    dataSource.data = []
+    for (const key in props.refObj.resourceApplication) {
+      if (props.refObj.resourceApplication[key].length > 0) {
+        props.refObj.resourceApplication[key].map((item) => {
+          dataSource.data.push([item.instanceId, item.taskHandleDetailInfo])
+        })
+      }
+    }
+  }
   const downloadFile = (path, name) => {
     const xhr = new XMLHttpRequest()
     xhr.open('get', path)
@@ -539,7 +77,6 @@
       }
     }
   }
-
   //表单信息
   const formName = reactive({
     user: '',
@@ -555,8 +92,6 @@
   let nameNotShow = ref('')
   let algorithmShow = ref('')
   const dataForm = reactive({ data: {} })
-  //流转详情
-  const dataSource = reactive({ data: [] })
   const columns = [
     {
       title: '任务名称',
@@ -589,13 +124,6 @@
       key: 'durationInSeconds',
     },
   ]
-
-  const props = defineProps({
-    processDefinitionName: { type: String, default: null },
-    businessKey: { type: String, default: null },
-    processInstanceId: { type: String, default: null },
-    resourceId: { type: String, default: null },
-  })
   const getInfo = () => {
     console.log(props.processInstanceId, '============================')
     if (props.processDefinitionName == '能力申请') {
@@ -678,8 +206,8 @@
   }
 
   onMounted(() => {
-    getInfo()
-    getLiuZhuanInfo()
+    // getInfo()
+    // getLiuZhuanInfo()
   })
 
   const getResourceURL = () => {
@@ -695,38 +223,27 @@
 
 <style scoped lang="less">
   .form-container {
+    height: 6rem;
+    overflow-y: scroll;
     padding: 20px 20px 30px 20px;
     .title {
-      font-size: 20px;
+      font-size: 18px;
       color: #000;
       font-weight: bold;
       margin-bottom: 20px;
+      padding-left: 10px;
+      margin-top: 10px;
+      border-left: 6px #0058e1 solid;
     }
   }
-  .base-info {
-    display: flex;
+  :deep(.ant-table-thead) > tr > .ant-table-cell {
+    background: #0087ff;
+    color: #fff;
+    border: none;
+    text-align: center;
+    font-size: 16px;
   }
-  .yingyongzujian :deep(.ant-form-item-label > label) {
-    white-space: normal;
-  }
-  :deep(.ant-form-item-label) {
-    label {
-      color: #666;
-      font-size: 16px;
-      &::after {
-        content: '';
-      }
-    }
-  }
-  :deep(.ant-form-item-required) {
-    &::before {
-      font-size: 8px;
-      margin-right: 10px;
-    }
-  }
-
-  :deep(.ant-input) {
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
+  .oddNumbers {
+    margin-bottom: 0.05rem;
   }
 </style>
diff --git a/front/src/views/personalCenter/components/MyApply.vue b/front/src/views/personalCenter/components/MyApply.vue
index 3b50a675..8e13ed69 100644
--- a/front/src/views/personalCenter/components/MyApply.vue
+++ b/front/src/views/personalCenter/components/MyApply.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="on-the-right-side-of-the-list">
     <div class="title">我的申请</div>
-    <div class="sousuokuang">
+    <!-- <div class="sousuokuang">
       <a-input-search
         v-model:value="name"
         placeholder="请输入关键词"
@@ -17,10 +17,20 @@
       >
         重置
       </a-button>
-    </div>
+    </div> -->
     <div class="tab">
-      <span>排序</span>
-
+      <span>类型</span>
+      <div
+        :class="typeIndex == index ? 'tabclass' : ' '"
+        @click="changeType(item, index)"
+        v-for="(item, index) in typeList"
+        :key="index"
+      >
+        {{ item }}
+      </div>
+    </div>
+    <!-- <div class="tab">
+      <span>筛选</span>
       <div
         :class="tabIndex == index ? 'tabclass' : ' '"
         @click="tabqiehuan(item, index)"
@@ -37,7 +47,7 @@
           {{ item }}
         </template>
       </div>
-    </div>
+    </div> -->
     <div v-if="contentList.data.length > 0">
       <div class="content">
         <div
@@ -45,37 +55,46 @@
           v-for="item in contentList.data"
           :key="item.index"
         >
+          <div class="content-body-title">
+            <span>申请单号：{{ item.applyNumber || '--' }}</span>
+            <div></div>
+          </div>
           <a-tooltip>
-            <template #title>{{ item.name }}</template>
+            <template #title>
+              {{ item.cameraList ? item.system : item.title }}
+            </template>
             <div class="content-body-title">
               <span
-                v-if="item.name === '申请摄像头列表' && item.ended"
+                v-if="item.cameraList && item.ended"
                 @click="showVideoList(item)"
               >
-                名称：{{ item.name }}
+                名称：{{ item.cameraList ? item.system : item.title }}
+              </span>
+              <span v-else>
+                名称：{{ item.cameraList ? item.system : item.title }}
               </span>
-              <span v-else>名称：{{ item.name }}</span>
               <div></div>
             </div>
           </a-tooltip>
-          <div class="content-body-content">
+          <!-- <div class="content-body-content">
             <p class="content-body-content-son">
               流程类型：{{ item.processDefinitionName }}
             </p>
-          </div>
+          </div> -->
           <div class="content-body-content">
             <p class="content-body-content-son">
               审核结果：{{
-                item.ended ? '审核完成' : item.backToFirst ? '被终止' : '审核中'
+                // item.ended ? '审核完成' : item.backToFirst ? '被终止' : '审核中'
+                item.approveStatus
               }}
             </p>
           </div>
-          <div class="content-body-content" v-if="item.currentTaskList">
+          <!-- <div class="content-body-content" v-if="item.currentTaskList">
             <p class="content-body-content-son" v-if="!item.backToFirst">
               当前节点：{{ item.currentTaskList[0].taskName }}
             </p>
-          </div>
-          <div v-else>
+          </div> -->
+          <div>
             <p
               class="content-body-content-son"
               v-if="item.name === '申请摄像头列表'"
@@ -111,36 +130,42 @@
                 复制
               </a-button>
             </p>
-            <p class="content-body-content-son" v-else>
-              <span>申请结果：{{ item.comment || '暂无' }}</span>
-              <a-button
-                type="primary"
-                size="small"
-                @click="copyComment(item.comment)"
+            <template v-else>
+              <p
+                class="content-body-content-son"
+                v-if="item.approveStatus == '通过'"
               >
-                复制
-              </a-button>
-            </p>
+                <span>申请结果：{{ item.comment || '暂无' }}</span>
+                <a-button
+                  v-if="item.comment"
+                  type="primary"
+                  size="small"
+                  @click="copyComment(item.comment)"
+                >
+                  复制
+                </a-button>
+              </p>
+            </template>
           </div>
           <!-- <div class="content-body-title"></div>
           <div class="content-body-content">
             <p class="content-body-content-son"></p>
             <div></div>
           </div> -->
-          <div class="content-body-bottom" v-if="item.currentTaskList">
+          <!-- <div class="content-body-bottom" v-if="item.currentTaskList">
             <div>申请日期：{{ item.currentTaskList[0].createTime }}</div>
             <div>审批人：{{ item.currentTaskList[0].assigneeName }}</div>
           </div>
           <div class="content-body-bottom" v-else>
             <div>申请日期：{{ item.startTime }}</div>
             <div></div>
-          </div>
+          </div> -->
           <div class="button-box">
-            <div class="button" @click="showDetail(item)">查看流程</div>
+            <div class="button" @click="showDetail(item)">查看详情</div>
             <!-- <div class="button" @click="showAdd(item)" v-if="item.backToFirst">
               修改
             </div> -->
-            <div
+            <!-- <div
               v-if="
                 !(
                   (item.processDefinitionName == '能力需求申请' ||
@@ -164,7 +189,7 @@
               "
             >
               查看详情
-            </div>
+            </div> -->
             <!-- <div
               class="button button-state"
               :class="{
@@ -225,6 +250,7 @@
           size="small"
           pageSize="4"
           :total="total"
+          :current="page"
           @change="handleCurrentChange"
           @showSizeChange="handlePageSizeChange"
           :showSizeChanger="false"
@@ -233,8 +259,9 @@
     </div>
     <a-empty v-else />
     <a-modal
+      bodyStyle="padding:0.1rem 0"
       v-model:visible="detailsVisible"
-      title="申请流程"
+      title="申请详情"
       style="width: 900px"
       :footer="null"
       destroyOnClose="true"
@@ -245,6 +272,7 @@
         :businessKey="businessKey"
         :processInstanceId="processInstanceId"
         :resourceId="resourceId"
+        :refObj="refObj"
       ></apply-details>
     </a-modal>
     <a-modal
@@ -282,6 +310,8 @@
   import {
     getMyProcessInstancePage,
     getTaskHandleDetailInfo,
+    getTabilityapplication,
+    getByApplyFlag,
     // getProcDefBizRoute,
   } from '@/api/personalCenter'
   import {
@@ -294,11 +324,20 @@
   import { message } from 'ant-design-vue'
   import ApplyDetails from '@/views/personalCenter/components/ApplyDetails'
   const router = useRouter()
+  let typeList = ref([
+    '能力申请',
+    '能力评价',
+    '能力上架',
+    '能力下架',
+    '能力需求',
+    '需求评论',
+  ])
   let tabList = ref(['全部', '审核中', '审核完成'])
   const contentList = reactive({ data: [] })
   // const contentListClone = reactive({ data: [] })
   // let contentListLength = contentList.length
   let tabIndex = ref(0)
+  let typeIndex = ref(0)
   const videoVisible = ref(false)
   const columns = ref([
     {
@@ -328,6 +367,12 @@
         break
     }
   }
+  // 选择类型
+  const changeType = (item, index) => {
+    console.log(item, index)
+    typeIndex.value = index
+    getApplyList()
+  }
   let name = ref('')
   const detailsVisible = ref(false)
   const businessKey = ref('')
@@ -339,14 +384,18 @@
   const delObj = ref({})
   const taskId = ref('')
   const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
+  const refObj = ref({})
   const showDetail = (item) => {
     console.log('showDetail', item)
     // getProcDefBizRoute(item.processDefinitionId)
-    detailsVisible.value = true
-    processDefinitionName.value = item.processDefinitionName
-    businessKey.value = item.businessKey
-    processInstanceId.value = item.processInstanceId
-    resourceId.value = item.resourceId
+    getByApplyFlag(item.applyFlag).then((res) => {
+      refObj.value = res.data.data
+      detailsVisible.value = true
+      processDefinitionName.value = item.processDefinitionName
+      businessKey.value = item.businessKey
+      processInstanceId.value = item.instanceId
+      resourceId.value = item.resourceId
+    })
   }
   const showVideoList = (item) => {
     console.log('显示列表', item)
@@ -446,7 +495,7 @@
       }
     })
   }
-  initNum()
+  // initNum()
   const total = ref('')
   const page = ref('1')
   const ended = ref('')
@@ -460,41 +509,64 @@
     getApplyList(name.value)
   }
   const getApplyList = () => {
+    contentList.data = []
+    total.value = 0
     const params = {
       page: page.value,
       limit: 4,
-      ended: ended.value,
-      name: name.value,
+      // ended: ended.value,
+      // name: name.value,
     }
-    console.log('==============>', ended.value)
-    getMyProcessInstancePage(params).then((res) => {
-      initNum(name.value)
-      console.log(res.data.data.list)
-      contentList.data = res.data.data.list
-      total.value = res.data.data.total
-      if (contentList.data && contentList.data.length > 0) {
-        contentList.data.map((item) => {
-          const param = {
-            page: 1,
-            limit: 4,
-            processInstanceId: item.processInstanceId,
-          }
-          getTaskHandleDetailInfo(qs.stringify(param)).then((res) => {
-            console.log('申请结果', res.data.data, res.data.data[0].comment)
-            const result = res.data.data
-            if (result && result.length > 2) {
-              item.comment =
-                result[0].comment.length > result[1].comment.length
-                  ? result[0].comment
-                  : result[1].comment
-            } else {
-              item.comment = result[0].comment
-            }
-          })
-          return item
-        })
+    if (typeIndex.value == 0) {
+      getTabilityapplication(params).then((res) => {
+        console.log('获取我的申请===============>', res.data.data)
+        contentList.data = res.data.data.list
+        total.value = res.data.data.total
+      })
+    } else if (typeIndex.value !== 1) {
+      switch (typeIndex.value) {
+        case 2:
+          params.processDefinitionKey = 'resourcemountapply'
+          break
+        case 3:
+          params.processDefinitionKey = 'resourcundercarriageapply'
+          break
+        case 4:
+          params.processDefinitionKey = 'abilitydemandapply'
+          break
+        case 5:
+          params.processDefinitionKey = 'comment_review'
+          break
       }
-    })
+      getMyProcessInstancePage(params).then((res) => {
+        // initNum(name.value)
+        console.log(res.data.data.list)
+        contentList.data = res.data.data.list
+        total.value = res.data.data.total
+        if (contentList.data && contentList.data.length > 0) {
+          contentList.data.map((item) => {
+            const param = {
+              page: 1,
+              limit: 4,
+              processInstanceId: item.processInstanceId,
+            }
+            getTaskHandleDetailInfo(qs.stringify(param)).then((res) => {
+              console.log('申请结果', res.data.data, res.data.data[0].comment)
+              const result = res.data.data
+              if (result && result.length > 2) {
+                item.comment =
+                  result[0].comment.length > result[1].comment.length
+                    ? result[0].comment
+                    : result[1].comment
+              } else {
+                item.comment = result[0].comment
+              }
+            })
+            return item
+          })
+        }
+      })
+    }
   }
   const handleCurrentChange = (val) => {
     page.value = val
@@ -611,8 +683,10 @@
       font-size: 14px;
       color: #999999;
       div {
-        width: 70px;
+        // width: 70px;
+        padding: 5px 10px;
         height: 24px;
+        line-height: 14px;
         border: 1px solid #cccccc;
         border-radius: 12px;
         margin-left: 10px;