diff --git a/front/src/api/capabilityCloud.js b/front/src/api/capabilityCloud.js
index 8bc42fa6..d0d921d4 100644
--- a/front/src/api/capabilityCloud.js
+++ b/front/src/api/capabilityCloud.js
@@ -49,4 +49,12 @@ export function assemblerBaseStatic() {
     method: 'get',
   })
 }
+//能力云图-组件服务排行
+export function componentServiceRank(params) {
+  return request({
+    url: '/census/center/v2/componentServiceRank',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/front/src/views/capabilityCloud/components/ComponentServices.vue b/front/src/views/capabilityCloud/components/ComponentServices.vue
index 2ae1c3c3..d6ca53e0 100644
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@@ -53,8 +53,18 @@
               <div
                 class="component-services-content-right-right-title-top-right"
               >
-                <div>周</div>
-                <div>月</div>
+                <div
+                  @click="timeSwitch('周')"
+                  :class="timeSwitchindex == '周' ? 'timeDown' : ''"
+                >
+                  周
+                </div>
+                <div
+                  @click="timeSwitch('月')"
+                  :class="timeSwitchindex == '月' ? 'timeDown' : ''"
+                >
+                  月
+                </div>
               </div>
             </div>
             <div class="component-services-content-right-right-title-bottom">
@@ -64,8 +74,20 @@
           <div class="callTheTrend" id="callTheTrend"></div>
           <div class="component-services-content-right-right-bottom">
             <div class="component-services-content-right-right-bottom-left">
-              <div class="components-can-assign">组件赋能排行</div>
-              <div class="components-scores">组件评分排行</div>
+              <div
+                class="components-can-assign"
+                @click="ranking('total')"
+                :class="dataclick == 'total' ? 'down' : ''"
+              >
+                组件赋能排行
+              </div>
+              <div
+                class="components-scores"
+                @click="ranking('score')"
+                :class="dataclick == 'score' ? 'down' : ''"
+              >
+                组件评分排行
+              </div>
             </div>
             <div class="component-services-content-right-right-bottom-right">
               <div>
@@ -73,10 +95,13 @@
                 <span>名称</span>
                 <span>应用数</span>
               </div>
-              <div>
-                <span></span>
-                <span></span>
-                <span></span>
+              <div v-for="(item, index) in dataList" :key="index">
+                <span>{{ index + 1 }}</span>
+                <a-tooltip>
+                  <template #title>{{ item.name }}</template>
+                  <span>{{ item.name }}</span>
+                </a-tooltip>
+                <span>{{ item.count }}</span>
               </div>
             </div>
           </div>
@@ -88,25 +113,50 @@
 <script setup>
   import { ref, onMounted } from 'vue'
   import * as echarts from 'echarts'
-  import { assemblerBaseStatic } from '@/api/capabilityCloud'
-  // import * as moment from 'moment'
+  import {
+    assemblerBaseStatic,
+    componentServiceRank,
+  } from '@/api/capabilityCloud'
+  import * as moment from 'moment'
   let snum = ref([
     { title: '上架总量', num: '0000' },
     { title: '总调用次数(API)', num: '0000' },
     { title: '健康度(API)', num: '0000' },
   ])
+  let dataclick = ref('total')
+  let dataList = ref([])
+  let timeSwitchindex = ref('周')
   let servicesSnum = ref([])
-  let callTheTrendData = ref([
-    { time: 6.02, value: 10 },
-    { time: 6.03, value: 12 },
-    { time: 6.04, value: 0 },
-    { time: 6.05, value: 1 },
-    { time: 6.06, value: 10 },
-    { time: 6.07, value: 20 },
-    { time: 6.08, value: 15 },
-  ])
+  let callTheTrendData = ref({ time: [], snum: [] })
+  //年月切换
+  const timeSwitch = (name) => {
+    timeSwitchindex.value = name
+    callTheTrendData.value.time = []
+    callTheTrendData.value.snum = []
+    if (name == '周') {
+      for (let i = 0; i < 7; i++) {
+        let time = moment()
+          .subtract('days', 6 - i)
+          .format('MM-DD')
+        callTheTrendData.value.time.push(time)
+        callTheTrendData.value.snum.push('0')
+        console.log('time', callTheTrendData.value, name)
+      }
+      callTheTrend(callTheTrendData.value)
+    } else {
+      for (let i = 0; i < 31; i++) {
+        let time = moment()
+          .subtract('days', 30 - i)
+          .format('MM-DD')
+        callTheTrendData.value.time.push(time)
+        callTheTrendData.value.snum.push('0')
+        console.log('time', callTheTrendData.value, name)
+      }
+      callTheTrend(callTheTrendData.value)
+    }
+  }
   //调用趋势echarts图
-  const callTheTrend = () => {
+  const callTheTrend = (dataFrom) => {
     echarts.init(document.getElementById('callTheTrend')).dispose()
     let chartDom = document.getElementById('callTheTrend')
     let myChart = echarts.init(chartDom)
@@ -134,7 +184,7 @@
               size: 18,
             },
           },
-          data: ['1-13', '1-14', '1-15', '1-16', '1-17', '1-18', '1-19'],
+          data: dataFrom.time,
         },
       ],
       yAxis: [
@@ -215,17 +265,28 @@
               shadowBlur: '3px',
             },
           },
-          data: [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6],
+          data: dataFrom.snum,
         },
       ],
     }
     option && myChart.setOption(option)
   }
+  //组件复制排名接口
+  const ranking = (name) => {
+    dataclick.value = name
+    let params = {
+      type: name,
+    }
+    debugger
+    componentServiceRank(params).then((res) => {
+      dataList.value = res.data.data
+      console.log('res', dataList.value)
+    })
+  }
   //组件服务数量接口
   const NumberOfComponentServices = () => {
     assemblerBaseStatic().then((res) => {
       snum.value[0].num = res.data.data[0].amount
-      console.log('res', res.data)
       res.data.data.map((item, index) => {
         if (index != 0) {
           servicesSnum.value.push(item)
@@ -234,7 +295,9 @@
     })
   }
   const init = () => {
+    timeSwitch(timeSwitchindex.value)
     NumberOfComponentServices()
+    ranking(dataclick.value)
   }
   onMounted(() => {
     init()
@@ -243,11 +306,11 @@
 </script>
 <style lang="less" scoped>
   .component-services {
-    height: 4.65rem;
+    height: 4.63rem;
     width: 7.84rem;
     position: relative;
     background: rgba(0, 108, 188, 0.1);
-    border: 0.02rem rgba(0, 108, 188, 0.7) solid;
+    border: 0.01rem rgba(0, 108, 188, 0.7) solid;
     border-radius: 0.03rem;
     .component-services-top {
       width: 7.84rem;
@@ -393,6 +456,11 @@
                   margin-right: 0.05rem;
                   border-radius: 0.12rem;
                   background: #05315b;
+                  cursor: pointer;
+                }
+                .timeDown {
+                  background: #005ea3;
+                  border: #00ffff 0.01rem solid;
                 }
               }
             }
@@ -410,7 +478,7 @@
             padding-top: 0.13rem;
             .component-services-content-right-right-bottom-left {
               width: 1.28rem;
-              border-right: 0.02rem rgba(0, 108, 188, 0.7) solid;
+              border-right: 0.01rem rgba(0, 108, 188, 0.7) solid;
               margin-right: 0.2rem;
               .components-can-assign,
               .components-scores {
@@ -421,12 +489,32 @@
                 color: rgba(255, 255, 255, 0.6);
                 line-height: 0.88rem;
                 text-align: center;
+                cursor: pointer;
                 background: linear-gradient(
                   to right,
                   rgba(0, 117, 203, 0.2),
                   rgba(0, 117, 203, 0)
                 );
               }
+              .components-can-assign:hover,
+              .components-scores:hover {
+                border-left: 0.02rem solid #00ffff;
+                background: linear-gradient(
+                  to right,
+                  rgba(0, 117, 203, 1),
+                  rgba(0, 117, 203, 0)
+                );
+                color: #ffffff;
+              }
+              .down {
+                border-left: 0.02rem solid #00ffff;
+                background: linear-gradient(
+                  to right,
+                  rgba(0, 117, 203, 1),
+                  rgba(0, 117, 203, 0)
+                );
+                color: #ffffff;
+              }
               .components-can-assign {
                 margin-top: 0;
               }
@@ -434,15 +522,15 @@
             .component-services-content-right-right-bottom-right {
               width: 2.5rem;
               font-size: 0.16rem;
-              border: 0.02rem rgba(0, 108, 188, 0.7) solid;
+              border: 0.01rem rgba(0, 108, 188, 0.7) solid;
               color: rgba(255, 255, 255, 0.8);
               & > div {
                 & > span {
                   display: inline-block;
                   height: 0.32rem;
                   line-height: 0.32rem;
-                  border-right: 0.02rem rgba(0, 108, 188, 0.7) solid;
-                  border-bottom: 0.02rem rgba(0, 108, 188, 0.7) solid;
+                  border-right: 0.01rem rgba(0, 108, 188, 0.7) solid;
+                  border-bottom: 0.01rem rgba(0, 108, 188, 0.7) solid;
                 }
                 & > span:first-child {
                   width: 0.47rem;
@@ -450,6 +538,8 @@
                 }
                 & > span:nth-child(2) {
                   width: 1.47rem;
+                  height: 0.32rem;
+                  padding-left: 0.05rem;
                 }
                 & > span:last-child {
                   width: 0.5rem;
diff --git a/front/src/views/capabilityCloud/components/Infrastructure.vue b/front/src/views/capabilityCloud/components/Infrastructure.vue
index e141c320..5c32ddb3 100644
--- a/front/src/views/capabilityCloud/components/Infrastructure.vue
+++ b/front/src/views/capabilityCloud/components/Infrastructure.vue
@@ -31,7 +31,7 @@
             :show-info="false"
           />
         </div>
-        <div class="percentage" :class="fontFormat(item.title)">
+        <div class="percentage" :style="fontFormat(item.title)">
           {{ item.percentage }}%
         </div>
       </div>
@@ -63,10 +63,13 @@
   function fontFormat(name) {
     switch (name) {
       case '视频资源数量':
+        return 'color: #32ff91;'
         break
       case '云资源':
+        return 'color: #f4fd25;'
         break
       case '感知资源':
+        return 'color: #ff1d18;'
         break
     }
   }
@@ -74,10 +77,10 @@
 <style lang="less" scoped>
   .infrastructure {
     width: 4.4rem;
-    height: 4.65rem;
+    height: 4.63rem;
     position: relative;
     background: rgba(0, 108, 188, 0.1);
-    border: 0.02rem rgba(0, 108, 188, 0.7) solid;
+    border: 0.01rem rgba(0, 108, 188, 0.7) solid;
     border-radius: 0.03rem;
     padding: 0.2rem;
     padding-top: 0;