diff --git a/front/src/router/index.js b/front/src/router/index.js
index 4574c207..40584e34 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -376,6 +376,16 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  // 能力云图
+  {
+    path: '/capabilityCloud',
+    name: 'capabilityCloud',
+    component: () => import('@/views/capabilityCloud'),
+    meta: {
+      title: '能力云图',
+      icon: 'error-warning-line',
+    },
+  },
   // 赋能案例详情
   {
     path: '/AssignCaseDetailPage',
diff --git a/front/src/views/capabilityCloud/components/ApplicationResources.vue b/front/src/views/capabilityCloud/components/ApplicationResources.vue
new file mode 100644
index 00000000..b2d5152a
--- /dev/null
+++ b/front/src/views/capabilityCloud/components/ApplicationResources.vue
@@ -0,0 +1,12 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 10:16:46
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="application-resources">应用资源</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>
diff --git a/front/src/views/capabilityCloud/components/ComponentServices.vue b/front/src/views/capabilityCloud/components/ComponentServices.vue
new file mode 100644
index 00000000..f208b494
--- /dev/null
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@@ -0,0 +1,12 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 10:17:22
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="component-services">组件服务</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>
diff --git a/front/src/views/capabilityCloud/components/DataResources.vue b/front/src/views/capabilityCloud/components/DataResources.vue
new file mode 100644
index 00000000..f32f3f19
--- /dev/null
+++ b/front/src/views/capabilityCloud/components/DataResources.vue
@@ -0,0 +1,12 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 10:18:16
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="data-resources">数据资源</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>
diff --git a/front/src/views/capabilityCloud/components/Infrastructure.vue b/front/src/views/capabilityCloud/components/Infrastructure.vue
new file mode 100644
index 00000000..90a869ee
--- /dev/null
+++ b/front/src/views/capabilityCloud/components/Infrastructure.vue
@@ -0,0 +1,12 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 10:17:47
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="infrastructure">基础设施</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>
diff --git a/front/src/views/capabilityCloud/components/KnowledgeBase.vue b/front/src/views/capabilityCloud/components/KnowledgeBase.vue
new file mode 100644
index 00000000..28993044
--- /dev/null
+++ b/front/src/views/capabilityCloud/components/KnowledgeBase.vue
@@ -0,0 +1,12 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 10:18:49
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="knowledge-base">知识库</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>
diff --git a/front/src/views/capabilityCloud/components/PlatformOverview.vue b/front/src/views/capabilityCloud/components/PlatformOverview.vue
new file mode 100644
index 00000000..87203c02
--- /dev/null
+++ b/front/src/views/capabilityCloud/components/PlatformOverview.vue
@@ -0,0 +1,12 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:15:33
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 10:16:05
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="platform-overview">平台概览</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>
diff --git a/front/src/views/capabilityCloud/index.vue b/front/src/views/capabilityCloud/index.vue
new file mode 100644
index 00000000..107a6e73
--- /dev/null
+++ b/front/src/views/capabilityCloud/index.vue
@@ -0,0 +1,26 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-19 10:11:03
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-19 10:21:04
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div>
+    <platform-overview></platform-overview>
+    <application-resources></application-resources>
+    <component-services></component-services>
+    <infrastructure></infrastructure>
+    <data-resources></data-resources>
+    <knowledge-base></knowledge-base>
+  </div>
+</template>
+<script setup>
+  import PlatformOverview from '@/views/capabilityCloud/components/PlatformOverview.vue'
+  import ApplicationResources from '@/views/capabilityCloud/components/ApplicationResources.vue'
+  import ComponentServices from '@/views/capabilityCloud/components/ComponentServices.vue'
+  import Infrastructure from '@/views/capabilityCloud/components/Infrastructure.vue'
+  import DataResources from '@/views/capabilityCloud/components/DataResources.vue'
+  import KnowledgeBase from '@/views/capabilityCloud/components/KnowledgeBase.vue'
+</script>
+<style lang="less" scoped></style>
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
new file mode 100644
index 00000000..b3120f53
--- /dev/null
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -0,0 +1,560 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-17 14:11:08
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-17 19:17:49
+ * @Description: 上架
+-->
+<template>
+  <div class="put-on-the-shelf">
+    <div v-for="title in props.refData.children" :key="title.id">
+      <div class="top">
+        <div></div>
+        <div>{{ title.name }}</div>
+        <div></div>
+      </div>
+      <template v-if="title.isConfigure">
+        <div class="bottom">
+          <div class="items" v-if="data[title.name].length > 0">
+            <div
+              class="item"
+              v-for="(val, index) in data[title.name]"
+              :key="'key1' + val.name + index"
+            >
+              <p>
+                <span>{{ title.name }}-{{ index + 1 }}</span>
+                <span></span>
+              </p>
+              <p
+                v-for="attr in props.configure.filter(
+                  (item, index2) => item.name === title.name
+                )[0].list"
+                :key="'key2' + attr.name + index2"
+              >
+                <span>{{ attr.name }}</span>
+                <span v-if="attr.type === 'image'">
+                  <a-image :width="85" :height="60" :src="val.img" />
+                </span>
+                <span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
+              </p>
+              <div class="del">
+                <i class="delImg" @click="del(title.name, index)"></i>
+                <div @click="del(title.name, index)">删除</div>
+              </div>
+            </div>
+          </div>
+          <div class="add">添加更多{{ title.name }}</div>
+          <div
+            class="form"
+            v-for="(val, index) in props.configure.filter(
+              (item) => item.name === title.name
+            )[0].list"
+            :key="'key3' + val.name + index"
+          >
+            <span>{{ val.name }}</span>
+            <a-input
+              v-model:value="val.note1"
+              :maxlength="24"
+              :placeholder="'请填写' + val.name + ',不超过24个字符'"
+              v-if="val.type == 'input'"
+            />
+            <a-textarea
+              v-model:value="val.note1"
+              :showCount="true"
+              :maxlength="200"
+              :placeholder="'请填写' + val.name"
+              v-else-if="val.type == 'textArea'"
+            />
+            <a-input-number
+              v-model:value="val.note1"
+              :min="0"
+              :max="9999"
+              :step="0.01"
+              string-mode
+              :placeholder="'请填写' + val.name"
+              v-else-if="val.type == 'number'"
+            />
+            <a-radio-group
+              v-model:value="val.note1"
+              :options="val.options"
+              v-else-if="val.type == 'radio'"
+            />
+            <upload
+              :key="showKey"
+              type="图片"
+              btnName="上传图片"
+              :maxCount="1"
+              :data="val"
+              :list="[]"
+              tip="支持图片类型，大小不超过100M"
+              v-else-if="val.type == 'image'"
+            ></upload>
+          </div>
+          <div class="submit">
+            <a-button type="primary" @click="add(title.name)">提交</a-button>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="bottom">
+          <div class="form" v-for="item in title.children" :key="item.id">
+            <span>{{ item.name }}</span>
+            <a-input
+              v-if="item.type == 'input'"
+              v-model:value="item.note1"
+              :placeholder="'请输入' + item.name"
+            />
+            <a-radio-group
+              v-else-if="item.type == 'radio'"
+              v-model:value="item.note1"
+              :options="item.options"
+            />
+            <a-textarea
+              v-else-if="item.type == 'textArea'"
+              v-model:value="item.note1"
+              :showCount="true"
+              :maxlength="200"
+              :placeholder="'请输入' + item.name"
+            />
+            <upload
+              v-else-if="item.type == 'image'"
+              type="图片"
+              btnName="上传图片"
+              :maxCount="1"
+              :data="item"
+              :list="props.imgList"
+              tip="支持图片类型，大小不超过100M"
+            ></upload>
+            <upload
+              v-else-if="item.type == 'file'"
+              type="文件"
+              btnName="上传附件"
+              :maxCount="1"
+              :data="item"
+              :list="props.fileList"
+              tip="支持文件类型，大小不超过100M"
+            ></upload>
+            <upload
+              v-else-if="item.type == 'video'"
+              type="视频"
+              btnName="上传视频"
+              :maxCount="1"
+              :data="item"
+              :list="props.videoList"
+              tip="支持视频类型，大小不超过100M"
+            ></upload>
+            <a-select
+              v-else-if="item.type == 'select'"
+              style="width: 240px"
+              v-model:value="item.note1"
+              :placeholder="'请选择' + item.name"
+            >
+              <a-select-option
+                v-for="(itemSelect, indexSelect) in item.options"
+                :key="indexSelect"
+                :value="itemSelect.dictLabel"
+              >
+                {{ itemSelect.dictLabel }}
+              </a-select-option>
+            </a-select>
+            <div
+              v-else-if="item.type == 'checkBox'"
+              class="application-Area"
+              id="application-Area"
+              :key="showKey"
+            >
+              <div
+                v-for="(itemson, indexson) in item.options"
+                :key="indexson"
+                class="application-Area-son"
+                @click="ApplicationArea(item, itemson)"
+                :class="
+                  item.note2.indexOf(itemson.dictLabel) != -1
+                    ? 'application-Area-down'
+                    : ''
+                "
+              >
+                {{ itemson.dictLabel }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  import upload from '@/views/components/upload'
+  import { message } from 'ant-design-vue'
+  import { getCategoryTreePage } from '@/api/personalCenter'
+  const props = defineProps({
+    // 展示数据
+    refData: { type: Object, default: null },
+    // 表单数据
+    dataFrom: { type: Array, default: null },
+    // 文件回显
+    fileList: { type: Array, default: null },
+    // 图片回显
+    imgList: { type: Array, default: null },
+    // 视频回显
+    videoList: { type: Array, default: null },
+    // 外部字段
+    externalField: { type: Array, default: null },
+    // 多条的配置
+    configure: { type: Array, default: null },
+    // [{
+    //   name:'计费标准信息',
+    //   list:[
+    //     {
+    //       name:'计费方式',
+    //       type:'radio',
+    //       field:'type',
+    //       options:
+    //         {
+    //           name:'一次性买断',
+    //           value:'1'
+    //         },
+    //         {
+    //           name:'按调用次数',
+    //           value:'2'
+    //         },
+    //         {
+    //           name:'按并发路数',
+    //           value:'3'
+    //         },
+    //         {
+    //           name:'按年计费',
+    //           value:'4'
+    //         }
+    //       ],
+    //       note1:''
+    //     },
+    //     {
+    //       name:'计费标准',
+    //       field:'price',
+    //       type:'number',
+    //       company:'元',
+    //       note1: ''
+    //     },
+    //     {
+    //       name:'计费标准描述',
+    //       field:'desc',
+    //       type:'textArea',
+    //       note1:''
+    //     }
+    //   ]
+    // }]
+  })
+  console.log('props==========>', props)
+  const data = ref({
+    list: [],
+  })
+  const showKey = ref(0)
+  props.refData.children.map((item) => {
+    if (
+      props.configure &&
+      props.configure.filter((val) => val.name === item.name).length > 0
+    ) {
+      item.isConfigure = true
+      data.value[item.name] = []
+      console.log('item==========>', item, data.value)
+    } else {
+      item.isConfigure = false
+    }
+  })
+  let arr = props.refData.children.filter((item) => {
+    if (props.configure) {
+      if (!item.isConfigure) {
+        return item
+      }
+    } else {
+      return item
+    }
+  })
+  data.value.list = []
+  // 获取字典数据
+  arr.forEach((val) => {
+    val.children.forEach((item) => {
+      if (item.isLinkToDic === 'true' && item.linkValue) {
+        getCategoryTreePage({
+          page: 1,
+          limit: 20,
+          dictTypeId: item.linkValue,
+          deFlage: 0,
+        }).then((res) => {
+          if (item.type === 'radio') {
+            item.options = res.data.data.list.map((radio) => radio.dictLabel)
+          } else if (item.type === 'select' || item.type === 'checkBox') {
+            if (item.type === 'checkBox') {
+              if (!item.note2) {
+                item.note2 = []
+              }
+            }
+            item.options = res.data.data.list
+          }
+          data.value.list.push(item)
+        })
+      } else {
+        data.value.list.push(item)
+      }
+    })
+  })
+  if (props.dataFrom) {
+    console.log(props.dataFrom, data.value.list)
+    props.dataFrom.infoList.forEach((item) => {
+      if (
+        props.configure &&
+        props.configure.filter((val) => val.name === item.attrType).length > 0
+      ) {
+        data.value[item.attrType] = JSON.parse(item.attrValue)
+      } else if (item.attrType === '应用领域') {
+        props.refData.children.forEach((val) => {
+          val.children.forEach((child) => {
+            if (child.name === item.attrType) {
+              // 通过;分割成数组
+              child.note2 = item.attrValue.split(';')
+              showKey.value++
+              console.log('应用领域', item, item.attrValue.split(';'), child)
+            }
+          })
+        })
+        //  item.note1 = item.attrValue.split(';')
+      }
+    })
+  }
+  const add = (title) => {
+    let list = props.configure.filter((item) => item.name === title)[0].list
+    let flag = true
+    list.forEach((item) => {
+      console.log(item)
+      if (item.type !== 'number' && !item.note1.length > 0) {
+        flag = false
+      } else if (item.type === 'number' && !item.note1 > 0) {
+        flag = false
+      }
+    })
+    if (flag) {
+      let obj = {}
+      list.forEach((item) => {
+        obj[item.field] = item.note1
+      })
+      data.value[title].push(obj)
+      console.log(data.value[title])
+      mybus.emit('chageDataFrom', {
+        attrType: title,
+        attrValue: JSON.stringify(data.value[title]),
+        delFlag: 0,
+      })
+      list.forEach((item) => {
+        item.note1 = ''
+        showKey.value++
+      })
+    } else {
+      message.warning('请填写完整')
+    }
+  }
+  const del = (title, index) => {
+    data.value[title].splice(index, 1)
+    mybus.emit('chageDataFrom', {
+      attrType: title,
+      attrValue: JSON.stringify(data.value[title]),
+      delFlag: 0,
+    })
+  }
+  const ApplicationArea = (item, itemson) => {
+    console.log(item, itemson)
+    if (item.note2.indexOf(itemson.dictLabel) === -1) {
+      item.note2.push(itemson.dictLabel)
+    } else {
+      item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
+    }
+    mybus.emit('chageDataFrom', {
+      attrType: item.name,
+      attrValue: item.note2.join(';'),
+      delFlag: 0,
+    })
+  }
+  watch(data.value.list, (newProps, oldProps) => {
+    console.log(newProps, oldProps)
+    newProps.forEach((val) => {
+      console.log('数据发生改变==========>', val)
+      if (
+        props.configure &&
+        props.configure.filter((item) => item.name === val.name).length > 0
+      ) {
+        mybus.emit('chageDataFrom', {
+          attrType: val.name,
+          attrValue: val.note1,
+          delFlag: 0,
+        })
+      } else if (props.externalField.indexOf(val.name) > -1) {
+        mybus.emit('chageDataFromDwon', {
+          attrType: val.name,
+          attrValue: val.note1,
+          delFlag: 0,
+        })
+      } else {
+        if (val.name !== '应用领域') {
+          mybus.emit('chageDataFrom', {
+            attrType: val.name,
+            attrValue: val.note1,
+            delFlag: 0,
+          })
+        }
+      }
+    })
+  })
+</script>
+<style lang="less" scoped>
+  .put-on-the-shelf {
+    height: 680px;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 100px 25px;
+    & > div {
+      width: 100%;
+      margin-top: 60px;
+      .top {
+        color: #333333;
+        font-size: 22px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 25px;
+        div:first-child,
+        div:last-child {
+          width: 245px;
+          height: 1px;
+          background: #f0f0f0;
+        }
+        div:nth-child(2) {
+          margin: 0 30px;
+        }
+      }
+      .bottom {
+        margin-top: 25px;
+        .items {
+          background: #fafafa;
+          padding: 10px;
+          p {
+            display: flex;
+            justify-content: space-between;
+            span:nth-of-type(1) {
+              width: 200px;
+            }
+            span:nth-of-type(2) {
+              width: 100%;
+              font-weight: 600;
+            }
+          }
+          p:nth-of-type(1) > span:nth-of-type(1) {
+            font-size: 18px;
+            font-weight: 600;
+          }
+          .del {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            .delImg {
+              cursor: pointer;
+              display: inline-block;
+              width: 16px;
+              height: 18px;
+              background: url(~@/assets/home/sf_del.png) no-repeat;
+              margin-right: 5px;
+            }
+            div {
+              cursor: pointer;
+            }
+          }
+        }
+        .add {
+          margin-top: 10px;
+          font-size: 16px;
+          color: #007efb;
+        }
+        .form {
+          margin-top: 20px;
+          display: flex;
+          justify-content: flex-start;
+          span:first-child {
+            width: 120px;
+          }
+          :deep(.ant-input-textarea) {
+            width: 570px;
+          }
+          :deep(.ant-radio-group) {
+            width: 570px;
+          }
+          :deep(.ant-input-number) {
+            width: 200px;
+          }
+          :deep(.ant-input) {
+            resize: none;
+            width: 570px;
+          }
+          .ant-btn {
+            width: 100px;
+            height: 32px;
+            text-align: center;
+            background: #d9ebff;
+            color: #0087ff;
+            border: 1px solid #0087ff;
+            border-radius: 6px;
+          }
+        }
+        .submit {
+          margin-top: 40px;
+          display: flex;
+          justify-content: flex-end;
+          .ant-btn {
+            width: 80px;
+            height: 28px;
+            text-align: center;
+            background: #d9ebff;
+            color: #0087ff;
+            border: 1px solid #0087ff;
+            border-radius: 6px;
+          }
+        }
+      }
+    }
+    & > div:nth-of-type(1) {
+      margin-top: 0;
+    }
+  }
+  .application-Area {
+    width: 570px;
+    display: grid;
+    margin-top: -5px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    .application-Area-son {
+      cursor: pointer;
+      font-size: 14px;
+      width: 90px;
+      height: 26px;
+      border-radius: 13px;
+      color: #333333;
+      background: #f5f5f5;
+      border: 1px #cccccc solid;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 10px;
+      font-weight: 500;
+    }
+    .application-Area-down {
+      background: #0087ff;
+      color: #fff;
+    }
+  }
+  :deep(.ant-image-img) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+</style>
diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue
index e91115eb..84106d79 100644
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@@ -123,6 +123,7 @@
   const navList = ref([
     { name: '共享门户', key: 'home' },
     { name: '能力集市', key: 'DetailsPageconetent' },
+    { name: '能力云图', key: 'capabilityCloud' },
     { name: '能力统计', key: 'abilityStatistics' },
     { name: '开发指南', key: 'developmentGuide' },
     { name: '需求中心', key: 'demandCenter' },
@@ -178,6 +179,11 @@
           },
         })
         break
+      case '能力云图':
+        router.push({
+          path: '/capabilityCloud',
+        })
+        break
       case '开发指南':
         router.push({
           path: '/developmentGuide',