diff --git a/back/src/assets/img/CapabilityOperationMonitoring/API总数.png b/back/src/assets/img/CapabilityOperationMonitoring/API总数.png
new file mode 100644
index 00000000..92e98113
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/API总数.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/上一页.png b/back/src/assets/img/CapabilityOperationMonitoring/上一页.png
new file mode 100644
index 00000000..8ee15672
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/上一页.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/下一页.png b/back/src/assets/img/CapabilityOperationMonitoring/下一页.png
new file mode 100644
index 00000000..5ec01229
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/下一页.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/下拉.png b/back/src/assets/img/CapabilityOperationMonitoring/下拉.png
new file mode 100644
index 00000000..5debda0a
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/下拉.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/大蓝背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/大蓝背景图.png
new file mode 100644
index 00000000..c22c553a
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/大蓝背景图.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/大黄背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/大黄背景图.png
new file mode 100644
index 00000000..22ba4dc8
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/大黄背景图.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/异常API数量.png b/back/src/assets/img/CapabilityOperationMonitoring/异常API数量.png
new file mode 100644
index 00000000..3d352e94
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/异常API数量.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/日历.png b/back/src/assets/img/CapabilityOperationMonitoring/日历.png
new file mode 100644
index 00000000..3156f25f
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/日历.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/更多.png b/back/src/assets/img/CapabilityOperationMonitoring/更多.png
new file mode 100644
index 00000000..07eade12
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/更多.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/消息.png b/back/src/assets/img/CapabilityOperationMonitoring/消息.png
new file mode 100644
index 00000000..e3b49722
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/消息.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/消息中心.png b/back/src/assets/img/CapabilityOperationMonitoring/消息中心.png
new file mode 100644
index 00000000..45dbd380
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/消息中心.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/红背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/红背景图.png
new file mode 100644
index 00000000..f31dfaac
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/红背景图.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/红色标签.png b/back/src/assets/img/CapabilityOperationMonitoring/红色标签.png
new file mode 100644
index 00000000..37e84660
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/红色标签.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/绿背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/绿背景图.png
new file mode 100644
index 00000000..8286e32e
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/绿背景图.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/绿色标签.png b/back/src/assets/img/CapabilityOperationMonitoring/绿色标签.png
new file mode 100644
index 00000000..5971f4dc
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/绿色标签.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/蓝背景图.png b/back/src/assets/img/CapabilityOperationMonitoring/蓝背景图.png
new file mode 100644
index 00000000..64c3b8ca
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/蓝背景图.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/蓝色标签.png b/back/src/assets/img/CapabilityOperationMonitoring/蓝色标签.png
new file mode 100644
index 00000000..4374742c
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/蓝色标签.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/账号下拉.png b/back/src/assets/img/CapabilityOperationMonitoring/账号下拉.png
new file mode 100644
index 00000000..bb717864
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/账号下拉.png differ
diff --git a/back/src/assets/img/CapabilityOperationMonitoring/选择.png b/back/src/assets/img/CapabilityOperationMonitoring/选择.png
new file mode 100644
index 00000000..dbde1d4c
Binary files /dev/null and b/back/src/assets/img/CapabilityOperationMonitoring/选择.png differ
diff --git a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
index 22197ae7..a063072b 100644
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
@@ -1,22 +1,68 @@
+<!-- API请求分析 -->
 <template>
-  <div class="wrapper">请求分析</div>
+  <div class="analysis-of-the-request">
+    <div class="analysis-of-the-request-title">API请求分析</div>
+    <div class="analysis-of-the-request-content">
+      <!-- 请求概况 -->
+      <div class="request-overview">
+        <div class="analysis-of-the-request-content-title">请求概况</div>
+        <div class="request-overview-content"></div>
+      </div>
+      <!-- 能力请求趋势 -->
+      <div>
+        <div></div>
+        <div></div>
+      </div>
+      <!-- 能力排行榜 -->
+      <div></div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   components: {},
   props: {},
-  data() {
-    return {};
+  data () {
+    return {
+      requestOverviewData: [
+        { name: '请求次数', tatol: '99999' },
+        { name: '请求成功次数', tatol: '99999' },
+        { name: '请求失败次数', tatol: '99999' },
+        { name: '平均时延', tatol: '99999' }
+      ] // 请求概况初始化数据
+    }
   },
   watch: {},
   computed: {},
   methods: {},
-  created() {},
-  mounted() {},
-};
+  created () {},
+  mounted () {}
+}
 </script>
 <style lang="scss" scoped>
-.wrapper {
+.analysis-of-the-request {
+  width: 100%;
+  background: #ffffff;
+  padding: 20px;
+  border-radius: 6px;
+  .analysis-of-the-request-title {
+    font-size: 18px;
+    line-height: 18px;
+    color: #333333;
+    margin-bottom: 15px;
+  } //API请求样式
+  .analysis-of-the-request-content-title {
+    font-size: 14px;
+    line-height: 14px;
+    color: #5a83ae;
+    margin-bottom: 20px;
+    font-weight: bold;
+  } //共享二级title样式
+  .request-overview {
+    margin-right: 80px;
+    .request-overview-content {
+    }
+  }
 }
 </style>
diff --git a/back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue b/back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue
index 04ab1b8e..62e2f0e8 100644
--- a/back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue
+++ b/back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue
@@ -14,25 +14,25 @@
 </template>
 
 <script>
-import AbnormalSituation from "./components/AbnormalSituation.vue";
-import AnalysisOfTheRequest from "./components/AnalysisOfTheRequest.vue";
-import CapabilityOperationMonitoringTime from "./components/CapabilityOperationMonitoringTime.vue";
+import AbnormalSituation from './components/AbnormalSituation.vue'
+import AnalysisOfTheRequest from './components/AnalysisOfTheRequest.vue'
+import CapabilityOperationMonitoringTime from './components/CapabilityOperationMonitoringTime.vue'
 export default {
   components: {
     AbnormalSituation,
     AnalysisOfTheRequest,
-    CapabilityOperationMonitoringTime,
+    CapabilityOperationMonitoringTime
   },
   props: {},
-  data() {
-    return {};
+  data () {
+    return {}
   },
   watch: {},
   computed: {},
   methods: {},
-  created() {},
-  mounted() {},
-};
+  created () {},
+  mounted () {}
+}
 </script>
 <style lang="scss" scoped>
 .wrapper {