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/bt.png b/front/src/assets/capabilityCloud/bt.png
new file mode 100644
index 00000000..5e75ec53
Binary files /dev/null and b/front/src/assets/capabilityCloud/bt.png differ
diff --git a/front/src/assets/capabilityCloud/jszyys.png b/front/src/assets/capabilityCloud/jszyys.png
new file mode 100644
index 00000000..b1adc77e
Binary files /dev/null and b/front/src/assets/capabilityCloud/jszyys.png differ
diff --git a/front/src/assets/capabilityCloud/pt_bg.png b/front/src/assets/capabilityCloud/pt_bg.png
new file mode 100644
index 00000000..c1acfaa1
Binary files /dev/null and b/front/src/assets/capabilityCloud/pt_bg.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/assets/capabilityCloud/select.png b/front/src/assets/capabilityCloud/select.png
new file mode 100644
index 00000000..b2d66308
Binary files /dev/null and b/front/src/assets/capabilityCloud/select.png differ
diff --git a/front/src/assets/capabilityCloud/select_sj.png b/front/src/assets/capabilityCloud/select_sj.png
new file mode 100644
index 00000000..4ca5b6b2
Binary files /dev/null and b/front/src/assets/capabilityCloud/select_sj.png differ
diff --git a/front/src/assets/capabilityCloud/top_bg.png b/front/src/assets/capabilityCloud/top_bg.png
new file mode 100644
index 00000000..3005bd0f
Binary files /dev/null and b/front/src/assets/capabilityCloud/top_bg.png differ
diff --git a/front/src/assets/capabilityCloud/tyyys.png b/front/src/assets/capabilityCloud/tyyys.png
new file mode 100644
index 00000000..d498103b
Binary files /dev/null and b/front/src/assets/capabilityCloud/tyyys.png differ
diff --git a/front/src/assets/capabilityCloud/zyys.png b/front/src/assets/capabilityCloud/zyys.png
new file mode 100644
index 00000000..dd8b0bbd
Binary files /dev/null and b/front/src/assets/capabilityCloud/zyys.png differ
diff --git a/front/src/assets/capabilityCloud/字体/DIN-Bold.otf b/front/src/assets/capabilityCloud/字体/DIN-Bold.otf
new file mode 100644
index 00000000..782e68e8
Binary files /dev/null and b/front/src/assets/capabilityCloud/字体/DIN-Bold.otf differ
diff --git a/front/src/assets/capabilityCloud/字体/SourceHanSansCN-Regular.otf b/front/src/assets/capabilityCloud/字体/SourceHanSansCN-Regular.otf
new file mode 100644
index 00000000..886f82f8
Binary files /dev/null and b/front/src/assets/capabilityCloud/字体/SourceHanSansCN-Regular.otf differ
diff --git a/front/src/assets/capabilityCloud/字体/腾祥智黑简-W5.ttf b/front/src/assets/capabilityCloud/字体/腾祥智黑简-W5.ttf
new file mode 100644
index 00000000..55bb8909
Binary files /dev/null and b/front/src/assets/capabilityCloud/字体/腾祥智黑简-W5.ttf differ
diff --git a/front/src/views/capabilityCloud/components/ApplicationResources.vue b/front/src/views/capabilityCloud/components/ApplicationResources.vue
index b2d5152a..9c6a325c 100644
--- a/front/src/views/capabilityCloud/components/ApplicationResources.vue
+++ b/front/src/views/capabilityCloud/components/ApplicationResources.vue
@@ -1,12 +1,383 @@
 <!--
  * @Author: hisense.liangjunhua
- * @Date: 2022-06-19 10:15:33
+ * @Date: 2022-06-19 10:16:10
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 10:16:46
+ * @LastEditTime: 2022-06-19 17:02:39
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="application-resources">应用资源</div>
+  <div class="application-resources">
+    <div class="top"><span class="title">应用资源</span></div>
+    <div class="bottom">
+      <div class="left">
+        <div class="item">
+          <div class="img"></div>
+          <div class="content">
+            <div class="name">总应用数</div>
+            <div claSS="num">{{ num1 }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="img"></div>
+          <div class="content">
+            <div class="name">建设中应用数</div>
+            <div claSS="num">{{ num2 }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="img"></div>
+          <div class="content">
+            <div class="name">停用应用数</div>
+            <div claSS="num">{{ num3 }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="nav">
+          <div
+            :class="{ select: select == '委办局应用资源分布' }"
+            @click="selectNav('委办局应用资源分布')"
+          >
+            委办局应用资源分布
+            <i v-show="select == '委办局应用资源分布'"></i>
+          </div>
+          <div
+            :class="{ select: select == '区市应用资源排名' }"
+            @click="selectNav('区市应用资源排名')"
+          >
+            区市应用资源排名
+            <i v-show="select == '区市应用资源排名'"></i>
+          </div>
+        </div>
+        <div class="echarts-box2" id="echarts-box2"></div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import * as echarts from 'echarts'
+  import { ref, onMounted } from 'vue'
+  import {
+    applicationNum,
+    districtResourceRank,
+    cityResourceRank,
+  } from '@/api/capabilityCloud'
+  const num1 = ref(0)
+  const num2 = ref(0)
+  const num3 = ref(0)
+  const select = ref('区市应用资源排名')
+  let myChart = null
+  const selectNav = (val) => {
+    select.value = val
+    switch (val) {
+      case '区市应用资源排名':
+        districtResourceRank().then((res) => {
+          res.data.data = res.data.data.splice(0, 5)
+          option.xAxis.data = []
+          option.series[0].data = []
+          option.series[1].data = []
+          option.yAxis[0].max = res.data.data[0].count * 1.5
+          res.data.data.forEach((val) => {
+            option.xAxis.data.push(val.deptName)
+            option.series[0].data.push(val.count)
+            option.series[1].data.push(val.count)
+          })
+          myChart.setOption(option)
+        })
+        break
+      case '委办局应用资源分布':
+        cityResourceRank().then((res) => {
+          res.data.data = res.data.data.splice(0, 5)
+          option.xAxis.data = []
+          option.series[0].data = []
+          option.series[1].data = []
+          option.yAxis[0].max = res.data.data[0].count * 1.5
+          res.data.data.forEach((val) => {
+            option.xAxis.data.push(val.deptName)
+            option.series[0].data.push(val.count)
+            option.series[1].data.push(val.count)
+          })
+          myChart.setOption(option)
+        })
+        break
+    }
+  }
+  applicationNum().then((res) => {
+    num1.value =
+      res.data.data.filter((val) => val.type == '总应用数')[0].amount || 0
+    num2.value =
+      res.data.data.filter((val) => val.type == '建设中应用数')[0].amount || 0
+    num3.value =
+      res.data.data.filter((val) => val.type == '停用应用数')[0].amount || 0
+  })
+  const option = {
+    animation: true,
+    grid: {
+      top: '5%',
+      bottom: '15%',
+      right: '5%',
+    },
+    xAxis: {
+      data: [],
+      axisLine: {
+        show: true, //隐藏X轴轴线
+      },
+      axisTick: {
+        show: false, //隐藏X轴轴线
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(77, 128, 254, 0.2)',
+          width: 2,
+        },
+      },
+      axisLabel: {
+        show: true,
+        fontSize: 14,
+        textStyle: {
+          color: 'rgb(255,255,255,0.5)', //X轴文字颜色
+        },
+        // interval: 0,
+        // rotate: 30,
+        interval: 0,
+        formatter: function (value) {
+          var ret = '' //拼接加 返回的类目项
+          var maxLength = 6 //每项显示文字个数
+          var valLength = value.length //X轴类目项的文字个数
+          var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
+          if (rowN > 1) {
+            //如果类目项的文字大于3,
+            for (var i = 0; i < rowN; i++) {
+              var temp = '' //每次截取的字符串
+              var start = i * maxLength //开始截取的位置
+              var end = start + maxLength //结束截取的位置
+              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+              temp = value.substring(start, end) + '\n'
+              ret += temp //凭借最终的字符串
+            }
+            return ret
+          } else {
+            return value
+          }
+        },
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        gridIndex: 0,
+        min: 0,
+        max: 100,
+        interval: 25,
+        // splitNumber: 4,
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(77, 128, 254, 0.2)',
+            width: 2,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(77, 128, 254, 0.2)',
+          },
+        },
+        axisLabel: {
+          show: false,
+          margin: 14,
+          fontSize: 16,
+          textStyle: {
+            color: '#65D5FF',
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: '设备在线率',
+        type: 'bar',
+        barWidth: 30,
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(146, 225, 255, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 151, 251, 1)',
+              },
+            ]),
+            label: {
+              // 标签显示位置
+              show: true,
+              position: 'top', // insideTop 或者横向的 insideLeft
+              color: '#fff',
+            },
+          },
+        },
+        data: [],
+        z: 10,
+        zlevel: 0,
+      },
+      {
+        // 分隔
+        type: 'pictorialBar',
+        itemStyle: {
+          normal: {
+            color: '#0F375F',
+          },
+        },
+        symbolRepeat: 'fixed',
+        symbolMargin: 6,
+        symbol: 'rect',
+        symbolClip: true,
+        symbolSize: [32, 2],
+        symbolPosition: 'start',
+        symbolOffset: [1, 1],
+        data: [],
+        width: 2,
+        z: 0,
+        zlevel: 1,
+      },
+    ],
+    dataZoom: [
+      {
+        type: 'slider',
+        show: false,
+        xAxisIndex: [0],
+        endValue: 4,
+        startValue: 0,
+      },
+    ],
+  }
+
+  onMounted(() => {
+    const chart = document.getElementById('echarts-box2')
+    if (chart) {
+      myChart = echarts.init(chart)
+      myChart.setOption(option)
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    }
+    selectNav('委办局应用资源分布')
+  })
+</script>
+<style lang="less" scoped>
+  .application-resources {
+    width: 9.24rem;
+    height: 4.65rem;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      text-align: center;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.2rem;
+      .left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .item {
+          width: 2.6rem;
+          height: 1.12rem;
+          background: linear-gradient(
+            to bottom,
+            rgba(33, 54, 88, 0.5),
+            rgba(33, 54, 88, 0)
+          );
+          margin-top: 0.14rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .img {
+            width: 0.66rem;
+            height: 0.66rem;
+            margin-right: 0.26rem;
+          }
+          .content {
+            .name {
+              font-size: 16px;
+              color: #fff;
+            }
+            .num {
+              font-size: 32px;
+              color: #1ef6f5;
+            }
+          }
+        }
+        .item:nth-of-type(1) {
+          margin-top: 0;
+          .img {
+            background: url('~@/assets/capabilityCloud/zyys.png') no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .item:nth-of-type(2) .img {
+          background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
+          background-size: 100% 100%;
+          margin-left: 0.2rem;
+        }
+        .item:nth-of-type(3) .img {
+          background: url('~@/assets/capabilityCloud/tyyys.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .right {
+        width: 6.53rem;
+        height: 3.54rem;
+        over-flow: hidden;
+        position: relative;
+        .nav {
+          position: absolute;
+          z-index: 10;
+          top: 0.3rem;
+          left: 0;
+          display: flex;
+          justify-content: space-between;
+          padding: 0 1.5rem;
+          & > div {
+            cursor: pointer;
+            background: rgba(8, 153, 231, 0.3);
+            padding: 0.1rem 0.2rem;
+            margin-left: 0.1rem;
+            color: #fff;
+            position: relative;
+            i {
+              display: inline-block;
+              width: 100%;
+              height: 0.1rem;
+              background: url('~@/assets/capabilityCloud/select_sj.png')
+                no-repeat;
+              background-position: center;
+              position: absolute;
+              top: 0.4rem;
+              left: 0;
+            }
+          }
+          .select {
+            background: url(~@/assets/capabilityCloud/select.png) no-repeat;
+            background-size: 100%;
+          }
+        }
+        .echarts-box2 {
+          width: 6.53rem;
+          height: 4.04rem;
+        }
+      }
+    }
+  }
+</style>
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>
diff --git a/front/src/views/capabilityCloud/components/PlatformOverview.vue b/front/src/views/capabilityCloud/components/PlatformOverview.vue
index 87203c02..bc19501a 100644
--- a/front/src/views/capabilityCloud/components/PlatformOverview.vue
+++ b/front/src/views/capabilityCloud/components/PlatformOverview.vue
@@ -2,11 +2,235 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-19 10:15:33
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 10:16:05
+ * @LastEditTime: 2022-06-19 16:50:27
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="platform-overview">平台概览</div>
+  <div class="platform-overview">
+    <div class="top"><span class="title">平台概览</span></div>
+    <div class="bottom">
+      <div class="left">
+        <div class="item">
+          <div class="name">平台访问量</div>
+          <div claSS="num">{{ num1 }}</div>
+        </div>
+        <div class="item">
+          <div class="name">用户量</div>
+          <div claSS="num">{{ num2 }}</div>
+        </div>
+      </div>
+      <div class="right" :key="showKey">
+        <div class="title">浏览趋势</div>
+        <div class="echarts-box" id="echarts-box"></div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import * as echarts from 'echarts'
+  import * as moment from 'moment'
+  import { ref, onMounted } from 'vue'
+  import { wholeAmount, trafficStatistics } from '@/api/capabilityCloud'
+  const num1 = ref(0)
+  const num2 = ref(0)
+  const showKey = ref(0)
+  wholeAmount().then((res) => {
+    num1.value =
+      res.data.data.filter((val) => val.type == '平台访问量')[0].amount || 0
+    num2.value =
+      res.data.data.filter((val) => val.type == '用户量')[0].amount || 0
+  })
+  // 获取近七天日期
+  const getDate = () => {
+    const date = []
+    for (let i = 0; i < 7; i++) {
+      date.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
+    }
+    return date.reverse()
+  }
+  const dateList = getDate()
+  var charts = {
+    unit: '次',
+    names: ['浏览'],
+    lineX: dateList,
+    value: [[]],
+  }
+  var color = ['rgba(23, 255, 243']
+  var lineY = []
+
+  for (var i = 0; i < charts.names.length; i++) {
+    var x = i
+    if (x > color.length - 1) {
+      x = color.length - 1
+    }
+    var data = {
+      name: charts.names[i],
+      type: 'line',
+      color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+        {
+          offset: 0,
+          color: '#00b5ff',
+        },
+        {
+          offset: 1,
+          color: '#39da78',
+        },
+      ]),
+      smooth: true,
+      areaStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(33, 34, 35, 0.35)',
+              },
+              {
+                offset: 0.8,
+                color: color[x] + ', 0)',
+              },
+            ],
+            false
+          ),
+          shadowColor: 'rgba(0, 0, 0, 0.1)',
+          shadowBlur: 10,
+        },
+      },
+      symbol: 'circle',
+      symbolSize: 5,
+      data: charts.value[i],
+    }
+    lineY.push(data)
+  }
+  var option = {
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: charts.names,
+      textStyle: {
+        fontSize: 12,
+        color: 'rgb(0,253,255,0.6)',
+      },
+      right: '4%',
+    },
+    grid: {
+      top: '14%',
+      left: '4%',
+      right: '5%',
+      bottom: '12%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: charts.lineX,
+      axisLabel: {
+        textStyle: {
+          color: 'rgb(255,255,255,0.5)',
+        },
+      },
+    },
+    yAxis: {
+      name: charts.unit,
+      type: 'value',
+      axisLabel: {
+        formatter: '{value}',
+        textStyle: {
+          color: 'rgb(255,255,255,0.5)',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgb(23,255,243,0.3)',
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgb(255,255,255,0.5)',
+        },
+      },
+    },
+    series: lineY,
+  }
+  onMounted(() => {
+    trafficStatistics({
+      startDate: dateList[0],
+      endDate: dateList[dateList.length - 1],
+    }).then((res) => {
+      res.data.data.browseDayList.forEach((val, index) => {
+        charts.value[0].push(val[dateList[index]] + '')
+      })
+      const chart = document.getElementById('echarts-box')
+      if (chart) {
+        const myChart = echarts.init(chart)
+        myChart.setOption(option)
+        window.addEventListener('resize', function () {
+          myChart.resize()
+        })
+      }
+    })
+  })
+</script>
+<style lang="less" scoped>
+  .platform-overview {
+    width: 9.24rem;
+    height: 4.65rem;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      text-align: center;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.2rem;
+      .left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .item {
+          width: 1.94rem;
+          height: 1.94rem;
+          background: url('~@/assets/capabilityCloud/pt_bg.png') no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          .name {
+            font-size: 16px;
+            color: #fff;
+          }
+          .num {
+            font-size: 32px;
+            color: #fdc623;
+          }
+        }
+      }
+      .right {
+        width: 6.53rem;
+        height: 3.54rem;
+        position: relative;
+        .title {
+          font-size: 18px;
+          position: absolute;
+          top: 0;
+          left: 0.2rem;
+        }
+        .echarts-box {
+          width: 6.53rem;
+          height: 4.04rem;
+        }
+      }
+    }
+  }
+</style>