diff --git a/front/src/views/capacityOnTheShelf/LayerServices.vue b/front/src/views/capacityOnTheShelf/LayerServices.vue
new file mode 100644
index 00000000..c6a7ae55
--- /dev/null
+++ b/front/src/views/capacityOnTheShelf/LayerServices.vue
@@ -0,0 +1,402 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-20 09:35:17
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-22 17:23:30
+ * @Description: 图层服务
+-->
+<template>
+  <div class="box">
+    <div class="header">能力上架申请</div>
+    <div class="top">
+      <div
+        v-for="(nav, index) in navList"
+        :key="nav"
+        :class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
+      >
+        <span class="bg-box">
+          <span>{{ index + 1 }}</span>
+        </span>
+        <span>{{ nav.name }}</span>
+        <div class="line" v-if="index !== navList.length - 1"></div>
+      </div>
+    </div>
+    <div class="vue-box">
+      <put-on-the-shelf
+        v-if="showView === '基本信息' && refData.name"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :imgList="imgList"
+        :externalField="[
+          '图层名称',
+          '图层描述',
+          '共享条件',
+          '共享类型',
+          '部门联系人',
+          '部门联系人电话',
+        ]"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '图层信息'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '应用场景'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :configure="yycj"
+      ></put-on-the-shelf>
+      <put-on-the-shelf
+        v-else-if="showView === '部署与使用'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+        :fileList="fileList"
+        :fileList2="fileList2"
+        :configure="bs"
+      ></put-on-the-shelf>
+    </div>
+    <div class="btn" :class="showView === '基本信息' ? 'first' : ''">
+      <button v-show="showView !== '基本信息'" @click="back()">上一步</button>
+      <button v-show="showView === '部署与使用'" @click="preview()">
+        预览
+      </button>
+      <button v-show="showView !== '部署与使用'" @click="next()">下一步</button>
+      <button v-show="showView === '部署与使用'" @click="submit()">提交</button>
+    </div>
+  </div>
+</template>
+<script setup>
+  import PutOnTheShelf from '@/views/capacityOnTheShelf/components/PutOnTheShelf.vue'
+  import { ref, onBeforeUnmount } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { getCategoryTree } from '@/api/personalCenter'
+  import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
+  import { getUser, getUserInfo } from '@/api/home'
+  import { message } from 'ant-design-vue'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
+  const showView = ref('基本信息')
+  const yycj = ref([
+    {
+      name: '应用场景',
+      list: [
+        {
+          name: '应用场景名称',
+          field: 'name',
+          type: 'input',
+          note1: '',
+        },
+        {
+          name: '应用场景描述',
+          field: 'desc',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '应用场景图片',
+          field: 'img',
+          type: 'image',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const bs = ref([
+    {
+      name: '常见问题',
+      list: [
+        {
+          name: '问题',
+          field: 'question',
+          type: 'textArea',
+          note1: '',
+        },
+        {
+          name: '答复',
+          field: 'answer',
+          type: 'textArea',
+          note1: '',
+        },
+      ],
+    },
+  ])
+  const navList = ref([])
+  const navList2 = ref([])
+  const fileList = ref({})
+  const fileList2 = ref({})
+  const imgList = ref({})
+  const videoList = ref({})
+  const data = ref({})
+  const refData = ref({})
+  const submitFlag = ref(true)
+  const dataFrom = ref({
+    infoList: [
+      {
+        attrType: '组件类型',
+        attrValue: '图层服务',
+        delFlag: 0,
+      },
+    ],
+    delFlag: 0,
+    type: '组件服务',
+    deptId: '',
+  })
+  getUser().then((res) => {
+    dataFrom.value.deptId = res.data.data.deptId
+  })
+  const back = () => {
+    navList.value.forEach((val, index) => {
+      if (val.key === showView.value && index > 0) {
+        showView.value = navList2.value[index - 1]
+        refData.value = data.value.filter(
+          (item) => item.name === showView.value
+        )[0]
+        console.log('表单数据=============>', dataFrom.value)
+      }
+    })
+  }
+  const next = () => {
+    let i = -1
+    navList.value.forEach((val, index) => {
+      if (val.key === showView.value && index < navList.value.length - 1) {
+        i = index + 1
+      }
+    })
+    if (i !== -1) {
+      showView.value = navList2.value[i]
+      refData.value = data.value.filter(
+        (item) => item.name === showView.value
+      )[0]
+      console.log('表单数据=============>', dataFrom.value, refData.value)
+    }
+  }
+  // 预览
+  const preview = () => {
+    dataFrom.value.infoList = dataFrom.value.infoList.filter(
+      (item) => item.attrValue !== ''
+    )
+    console.log('预览==============>', dataFrom.value)
+    window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
+    const newpage = router.resolve({
+      path: '/details',
+    })
+    window.open(newpage.href, '_blank')
+  }
+  const submit = () => {
+    console.log('提交数据=============>', dataFrom.value)
+    if (submitFlag.value) {
+      submitFlag.value = false
+      dataFrom.value.infoList = dataFrom.value.infoList.filter(
+        (item) => item.attrValue !== ''
+      )
+      shangjiainsert(dataFrom.value).then((res) => {
+        const instanceId = res.data.data
+        dataFrom.value.id = res.data.data
+        getUser().then((res6) => {
+          getUserInfo(res6.data.data.id).then((res2) => {
+            const deptId = res2.data.data.deptId
+            const userId = res2.data.data.id
+            const userName = res2.data.data.realName
+            const params = {
+              instanceId: instanceId,
+              deptId: deptId,
+              userId: userId,
+              userName: userName,
+              resourceDTO: [dataFrom.value],
+            }
+            shangjiaapply(params).then((res3) => {
+              console.log('res3', res3)
+              if (res3.data.code == 0) {
+                message.success('上架成功！')
+                submitFlag.value = true
+                window.setTimeout(() => {
+                  window.close()
+                }, 1000)
+              }
+            })
+          })
+        })
+      })
+    }
+  }
+  const init = () => {
+    getCategoryTree().then((res) => {
+      // console.clear()
+      res.data.data = res.data.data
+        .filter((item) => item.name === '组件服务一')[0]
+        .children.filter((item) => item.name === '图层服务')[0]
+      navList.value = []
+      navList2.value = []
+      res.data.data.children.forEach((val) => {
+        console.log(val)
+        navList.value.push({
+          name: val.name,
+          key: val.name,
+        })
+        navList2.value.push(val.name)
+      })
+      data.value = res.data.data.children
+      refData.value = data.value.filter(
+        (item) => item.name === showView.value
+      )[0]
+      console.log('所有编目结构==============>', res.data.data)
+    })
+  }
+  init()
+  mybus.on('chageDataFrom', (obj) => {
+    dataFrom.value.infoList = dataFrom.value.infoList.filter(
+      (item) => item.attrType !== obj.attrType
+    )
+    if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
+      obj.attrValue = ''
+    }
+    dataFrom.value.infoList.push(obj)
+    console.log('数据变更=================》', obj, dataFrom.value.infoList)
+  })
+  mybus.on('chageFileList', (obj) => {
+    fileList.value = obj
+  })
+  mybus.on('chageFileList2', (obj) => {
+    fileList2.value = obj
+  })
+  mybus.on('chageImgList', (obj) => {
+    imgList.value = obj
+  })
+  mybus.on('chageVideoList', (obj) => {
+    videoList.value = obj
+  })
+  //datafrom外面数据
+  mybus.on('chageDataFromDwon', (obj) => {
+    switch (obj.attrType) {
+      case '图层名称':
+        dataFrom.value.name = obj.attrValue
+        break
+      case '图层描述':
+        dataFrom.value.description = obj.attrValue
+        break
+      case '共享条件':
+        dataFrom.value.shareCondition = obj.attrValue
+        break
+      case '共享类型':
+        dataFrom.value.shareType = obj.attrValue
+        break
+      case '部门联系人':
+        dataFrom.value.deptContacts = obj.attrValue
+        break
+      case '部门联系人电话':
+        dataFrom.value.deptPhone = obj.attrValue
+        break
+      case '服务接口':
+        dataFrom.value.apiUrl = obj.attrValue
+        break
+      case '接口请求方式':
+        dataFrom.value.apiMethodType = obj.attrValue
+        break
+    }
+    // console.log('dataFrom.value', dataFrom.value)
+  })
+  onBeforeUnmount(() => {
+    mybus.off('chageDataFrom')
+    mybus.off('chageFileList')
+    mybus.off('chageFileList2')
+    mybus.off('chageImgList')
+    mybus.off('chageDataFromDwon')
+  })
+</script>
+<style lang="less" scoped>
+  .box {
+    position: relative;
+    top: 64px;
+    margin: 15px 400px;
+    padding: 10px;
+    background: #fff;
+    .header {
+      font-size: 28px;
+      font-weight: 600;
+    }
+    .vue-box {
+      padding: 0 100px;
+    }
+    .top {
+      margin: 10px 20px 0;
+      padding: 15px 30px;
+      background: #edf4fc;
+      display: flex;
+      justify-content: space-between;
+      div {
+        font-size: 18px;
+        color: #999;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .bg-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 45px;
+          height: 45px;
+          border-radius: 50%;
+          border: 1px solid rgb(214, 214, 214);
+          margin-right: 10px;
+          transition: all 0.3s ease;
+          span {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            border: 1px solid #999;
+          }
+        }
+        .line {
+          margin-left: 10px;
+          width: 130px;
+          height: 1px;
+          background: #999;
+        }
+      }
+      .finish {
+        color: #0087ff;
+        .bg-box {
+          background: #9ccefa;
+          color: #fff;
+          border: 1px solid #9ccefa;
+          span {
+            background: #0087ff;
+            border: 1px solid #0087ff;
+          }
+        }
+        .line {
+          background: #0087ff;
+        }
+      }
+    }
+    .btn {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 400px 0;
+      button {
+        cursor: pointer;
+        width: 80px;
+        height: 35px;
+        text-align: center;
+        color: #fff;
+        border: none;
+        border-radius: 6px;
+        background: #0087ff;
+      }
+      button:nth-of-type(1) {
+        color: #0087ff;
+        background: #e1edfa;
+      }
+      button:nth-of-type(2) {
+        background: #01c5dc;
+      }
+    }
+    .first {
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/front/src/views/newHome/components/WorkDynamics.vue b/front/src/views/newHome/components/WorkDynamics.vue
index a76e7c87..1bb82323 100644
--- a/front/src/views/newHome/components/WorkDynamics.vue
+++ b/front/src/views/newHome/components/WorkDynamics.vue
@@ -144,7 +144,7 @@
   let abilityToType = ref(['组件服务', '应用资源'])
   let componentType = ref([
     '智能算法',
-    'GIS图层',
+    '图层服务',
     '开发组件',
     '办公组件',
     '业务组件',
@@ -173,7 +173,8 @@
       } else if (
         componentTypeValue.value === '智能算法' ||
         componentTypeValue.value === '开发组件' ||
-        componentTypeValue.value === '业务组件'
+        componentTypeValue.value === '业务组件' ||
+        componentTypeValue.value === '图层服务'
       ) {
         snum.value = {
           abilityToType: abilityToTypeFunctionData.value,
diff --git a/front/src/views/personalCenter/components/MyPublish.vue b/front/src/views/personalCenter/components/MyPublish.vue
index e9c62e05..da9c0698 100644
--- a/front/src/views/personalCenter/components/MyPublish.vue
+++ b/front/src/views/personalCenter/components/MyPublish.vue
@@ -287,7 +287,8 @@
       } else if (
         componentTypeValue.value === '智能算法' ||
         componentTypeValue.value === '开发组件' ||
-        componentTypeValue.value === '业务组件'
+        componentTypeValue.value === '业务组件' ||
+        componentTypeValue.value === '图层服务'
       ) {
         snum.value = {
           abilityToType: abilityToTypeFunctionData.value,
@@ -315,7 +316,7 @@
   let abilityToType = ref(['组件服务', '应用资源'])
   let componentType = ref([
     '智能算法',
-    'GIS图层',
+    '图层服务',
     '开发组件',
     '办公组件',
     '业务组件',
diff --git a/front/src/views/personalCenter/components/TheNewRelease.vue b/front/src/views/personalCenter/components/TheNewRelease.vue
index 2cae2807..ee298aa3 100644
--- a/front/src/views/personalCenter/components/TheNewRelease.vue
+++ b/front/src/views/personalCenter/components/TheNewRelease.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-01 17:49:38
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-20 10:09:12
+ * @LastEditTime: 2022-06-22 17:01:25
  * @Description: 能力上架
 -->
 <template>
@@ -16,6 +16,7 @@
     <business-component
       v-else-if="type === 'business-component'"
     ></business-component>
+    <layer-services v-else-if="type === 'layer-services'"></layer-services>
   </div>
 </template>
 <script setup>
@@ -24,6 +25,7 @@
   import Application from '@/views/capacityOnTheShelf/Application'
   import DevelopmentComponents from '@/views/capacityOnTheShelf/DevelopmentComponents'
   import BusinessComponent from '@/views/capacityOnTheShelf/BusinessComponent'
+  import LayerServices from '@/views/capacityOnTheShelf/LayerServices'
   import { useRouter } from 'vue-router'
   import { ref } from 'vue'
   const router = useRouter()
@@ -40,6 +42,8 @@
       type.value = 'development-components'
     } else if (componentTypeValue === '业务组件') {
       type.value = 'business-component'
+    } else if (componentTypeValue === '图层服务') {
+      type.value = 'layer-services'
     }
   }
   window.sessionStorage.setItem('preview', JSON.stringify({}))