diff --git a/front/src/api/file.js b/front/src/api/file.js
index 9777ab36..f0605011 100644
--- a/front/src/api/file.js
+++ b/front/src/api/file.js
@@ -46,3 +46,29 @@ export function correct(params) {
 export function paddleocr(params) {
   return axios.post('http://15.72.183.90:7008/paddleocr', params, config2)
 }
+
+// 能力云图-数据资源
+export function count() {
+  return axios.post(
+    'http://10.10.30.24:30058/share-portal/platform/index/abilityMarket/count',
+    config2
+  )
+}
+// 能力云图-数据资源-总数据数
+export function getRecord(params) {
+  return axios.get(
+    'http://10.134.135.24:30090/api/share-portal/platform/catalogue/query?serviceName=' +
+    params.serviceName +
+    '&orderField=' +
+    params.orderField +
+    '&orderType=' +
+    params.orderType +
+    '&pageNum=' +
+    params.pageNum +
+    '&pageSize=' +
+    params.pageSize +
+    '&serviceType=' +
+    params.serviceType,
+    config2
+  )
+}
diff --git a/front/src/assets/capabilityCloud/Knowledge-look.png b/front/src/assets/capabilityCloud/Knowledge-look.png
new file mode 100644
index 00000000..bad7219e
Binary files /dev/null and b/front/src/assets/capabilityCloud/Knowledge-look.png differ
diff --git a/front/src/assets/capabilityCloud/Knowledge-title.png b/front/src/assets/capabilityCloud/Knowledge-title.png
new file mode 100644
index 00000000..6b536f8b
Binary files /dev/null and b/front/src/assets/capabilityCloud/Knowledge-title.png differ
diff --git a/front/src/assets/capabilityCloud/Knowledge-up.png b/front/src/assets/capabilityCloud/Knowledge-up.png
new file mode 100644
index 00000000..7b086805
Binary files /dev/null and b/front/src/assets/capabilityCloud/Knowledge-up.png differ
diff --git a/front/src/assets/capabilityCloud/resources-left.png b/front/src/assets/capabilityCloud/resources-left.png
new file mode 100644
index 00000000..64d356c1
Binary files /dev/null and b/front/src/assets/capabilityCloud/resources-left.png differ
diff --git a/front/src/assets/capabilityCloud/resources-right.png b/front/src/assets/capabilityCloud/resources-right.png
new file mode 100644
index 00000000..792bd246
Binary files /dev/null and b/front/src/assets/capabilityCloud/resources-right.png differ
diff --git a/front/src/assets/capabilityCloud/resources-title.png b/front/src/assets/capabilityCloud/resources-title.png
new file mode 100644
index 00000000..a8503dac
Binary files /dev/null and b/front/src/assets/capabilityCloud/resources-title.png differ
diff --git a/front/src/views/capabilityCloud/components/DataResources.vue b/front/src/views/capabilityCloud/components/DataResources.vue
index f32f3f19..ff8faee2 100644
--- a/front/src/views/capabilityCloud/components/DataResources.vue
+++ b/front/src/views/capabilityCloud/components/DataResources.vue
@@ -6,7 +6,270 @@
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="data-resources">数据资源</div>
+  <div class="data-resources">
+    <div class="resources-top">
+      <span class="title">数据资源</span>
+    </div>
+    <div class="resources-bottom">
+      <div class="resources-left">
+        <div v-for="(item, index) in resourcesLeft" :key="index">
+          <h3>{{ item.name }}</h3>
+          <h2 class="num">{{ item.num || '0' }}</h2>
+        </div>
+        <img :src="leftImg" alt="" />
+      </div>
+      <div class="resources-right">
+        <div class="resources-right-title">
+          <h3>数据赋能排行</h3>
+        </div>
+        <div class="resources-right-table">
+          <a-table
+            :data-source="assignRankings"
+            :columns="columns"
+            :pagination="false"
+            bordered="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import { ref } from 'vue'
+  import { count, getRecord } from '@/api/file'
+  // import { abc } from './dataABC.json'
+  // 左侧数据
+  const resourcesLeft = ref([
+    {
+      name: '总数据数',
+      num: '',
+    },
+    {
+      name: '总申请次数',
+      num: '',
+    },
+    {
+      name: '满足率',
+      num: '',
+    },
+  ])
+  // 右侧数据
+  const assignRankings = ref([
+    {
+      index: '1',
+      name: '0',
+      operation: '0',
+    },
+    {
+      index: '2',
+      name: '0',
+      operation: '0',
+    },
+    {
+      index: '3',
+      name: '0',
+      operation: '0',
+    },
+    {
+      index: '4',
+      name: '0',
+      operation: '0',
+    },
+    {
+      index: '5',
+      name: '0',
+      operation: '0',
+    },
+  ])
+  const columns = ref([
+    {
+      title: 'Top',
+      dataIndex: 'index',
+      key: 'index',
+      width: '15%',
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      width: '55%',
+      ellipsis: true,
+    },
+    {
+      title: '应用数',
+      dataIndex: 'operation',
+      key: 'operation',
+      width: '30%',
+    },
+  ])
+  // 左侧图片
+  const leftImg = require('@/assets/capabilityCloud/resources-left.png')
+  // 请求左侧数据开始
+  const obj = {
+    serviceName: '',
+    orderField: 'updateTime',
+    orderType: 'desc',
+    pageNum: 1,
+    pageSize: 5,
+    serviceType: 'data',
+  }
+  getRecord(obj).then((res) => {
+    if (res.data.data) {
+      // res.data.data.list.forEach((val) => {
+      //   val.name = val.serviceName
+      //   val.createDate = val.updateTime
+      //   val.id = val.serviceId // "requestNum": 0, // "requestQuantity": 0, // "starNum": 4, // "shareStatus": "2"
+      // })
+      // resourceList.data = res.data.data.list || []
+      resourcesLeft.value[0].num = res.data.data.total || '0' // getShoppingCartList(resourceData.value.data.records)
+      console.log('数据资源~~~~~~~~~~~', resourcesLeft.value[0].num)
+    }
+  })
+  // 请求左侧数据结束
+  // 请求右侧数据开始
+  const contentData = ref([])
+  count().then((res) => {
+    contentData.value = res.data.data
+    console.log(contentData.value)
+    resourcesLeft.value[1].num = contentData.value.requestCount || '0'
+    resourcesLeft.value[2].num =
+      contentData.value.satisfactionRate + '%' || '0' + '%'
+    // 排行
+    for (let i = 1; i < 6; i++) {
+      assignRankings.value[i - 1].index = i
+      assignRankings.value[i - 1].name =
+        contentData.value.list[i - 1].resourceTop5.service_name || '0'
+      assignRankings.value[i - 1].opacity =
+        contentData.value.list[i - 1].resourceTop5.count || '0'
+    }
+  })
+  // 请求右侧数据结束
+</script>
+<style lang="less" scoped>
+  .data-resources {
+    width: 440px;
+    height: 465px;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    .resources-top {
+      height: 60px;
+      background: url('~@/assets/capabilityCloud/resources-title.png') no-repeat;
+      text-align: center;
+      font-size: 24px;
+    }
+    .resources-bottom {
+      width: 100%;
+      display: flex;
+      .resources-left {
+        width: 156px;
+        height: 275px;
+        background-image: linear-gradient(#214678, transparent);
+        text-align: center;
+        margin-left: 18px;
+        position: relative;
+        div {
+          margin: 0 10px;
+          border-bottom: 1px solid #1f557c;
+          h3 {
+            font-size: 16px;
+            color: #ffffff;
+            margin-bottom: 0px;
+            padding-top: 16px;
+          }
+          .num {
+            font-size: 28px;
+            color: #1ef6f5;
+            margin-bottom: 0px;
+          }
+        }
+        div:last-of-type {
+          border-bottom: none;
+        }
+        img {
+          width: 90%;
+          position: absolute;
+          left: 50%;
+          bottom: -138px;
+          margin-left: -45%;
+        }
+      }
+      .resources-right {
+        margin-left: 18px;
+        width: 235px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .resources-right-title {
+          width: 224px;
+          height: 100px;
+          text-align: center;
+          background: url('~@/assets/capabilityCloud/resources-right.png')
+            no-repeat center;
+          display: flex;
+          align-items: center;
+          h3 {
+            font-size: 18px;
+            color: #ffffff;
+            width: 100%;
+            height: 38px;
+            line-height: 38px;
+            background: linear-gradient(
+              to right,
+              rgba(0, 0, 0, 0) 0%,
+              #1b76cc 50%,
+              rgba(0, 0, 0, 0) 100%
+            );
+            text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
+          }
+        }
+        .resources-right-table {
+          width: 100%;
+          :deep(.ant-table-thead > tr > th) {
+            background-color: #1f557c;
+            border: none;
+            color: #1ef6f5;
+            height: 32px;
+            padding: 0;
+          }
+          :deep(.ant-table-row) {
+            height: 45px;
+          }
+          :deep(.ant-table-cell) {
+            text-align: center;
+            border-bottom: 1px solid #1f557c;
+            border-right: 1px solid #1f557c;
+            padding: 0;
+          }
+          :deep(.ant-table-cell:nth-child(1)) {
+            border-left: 1px solid #1f557c;
+          }
+          :deep(.ant-table-cell:nth-child(2)) {
+            text-align: left;
+            padding-left: 10px;
+          }
+          :deep(.ant-table-cell:nth-child(3)) {
+            color: #1ef6f5;
+          }
+          :deep(.ant-table-tbody) {
+            color: #ffffff;
+          }
+          :deep(.ant-table) {
+            border: none;
+            background: transparent;
+          }
+          :deep(.ant-table-content > table) {
+            border: none;
+          }
+          :deep(.ant-table-container) {
+            border: none;
+          }
+          :deep(.ant-table-cell-row-hover) {
+            background: transparent;
+            transition: all 0s;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/capabilityCloud/components/KnowledgeBase.vue b/front/src/views/capabilityCloud/components/KnowledgeBase.vue
index 28993044..89bcdf98 100644
--- a/front/src/views/capabilityCloud/components/KnowledgeBase.vue
+++ b/front/src/views/capabilityCloud/components/KnowledgeBase.vue
@@ -6,7 +6,87 @@
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="knowledge-base">知识库</div>
+  <div class="knowledge-base">
+    <div class="knowledge-top">
+      <span class="title">知识库</span>
+    </div>
+    <div class="knowledge-content">
+      <div v-for="(item, index) in contentBox" :key="index">
+        <img :src="item.photo" alt="" />
+        <h3>{{ item.name }}</h3>
+        <h3>{{ item.type }}</h3>
+        <h6 class="num">{{ item.num }}</h6>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import { ref } from 'vue'
+  import { KnowledgeBaseStatic } from '@/api/capabilityCloud'
+  const contentBoxData = ref([])
+  const contentBox = ref([
+    {
+      photo: require('@/assets/capabilityCloud/Knowledge-up.png'),
+      name: '知识库',
+      type: '上架总量',
+      num: '',
+    },
+    {
+      photo: require('@/assets/capabilityCloud/Knowledge-look.png'),
+      name: '知识库',
+      type: '浏览总量',
+      num: '',
+    },
+  ])
+  KnowledgeBaseStatic().then((res) => {
+    console.log(res.data.data)
+    contentBoxData.value = res.data.data
+    console.log(contentBoxData.value)
+    contentBox.value[0].num = contentBoxData.value[0].amount
+    contentBox.value[1].num = contentBoxData.value[1].amount
+  })
+</script>
+<style lang="less" scoped>
+  .knowledge-base {
+    width: 152px;
+    height: 465px;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    .knowledge-top {
+      height: 60px;
+      background: url('~@/assets/capabilityCloud/Knowledge-title.png') no-repeat;
+      text-align: center;
+      font-size: 24px;
+    }
+    .knowledge-content {
+      width: 100%;
+
+      div {
+        width: 118px;
+        height: 176px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-image: linear-gradient(#214678, transparent);
+        margin-bottom: 20px;
+        img {
+          margin: 27px 0 12px;
+        }
+        h3 {
+          font-size: 16px;
+          font-weight: normal;
+          color: #ffffff;
+          margin-bottom: 0px;
+        }
+        .num {
+          font-weight: 300;
+          font-size: 28px;
+          color: #1ef6f5;
+          margin-bottom: 27px;
+        }
+      }
+    }
+  }
+</style>