From a978d92c7825c9d8513e0525e3203e88f86c49d5 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Fri, 28 Aug 2020 18:34:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E7=AE=A1=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{doubleLine.vue => doubleBar.vue}         | 139 ++---
 src/components/e-charts/rankList.vue          | 163 +++++
 src/pages/data-analysis/org-control.vue       | 590 +++++-------------
 src/pages/data-analysis/super-control.vue     | 589 +++++------------
 4 files changed, 525 insertions(+), 956 deletions(-)
 rename src/components/e-charts/{doubleLine.vue => doubleBar.vue} (54%)
 create mode 100644 src/components/e-charts/rankList.vue

diff --git a/src/components/e-charts/doubleLine.vue b/src/components/e-charts/doubleBar.vue
similarity index 54%
rename from src/components/e-charts/doubleLine.vue
rename to src/components/e-charts/doubleBar.vue
index c29f73c..fc7de9f 100644
--- a/src/components/e-charts/doubleLine.vue
+++ b/src/components/e-charts/doubleBar.vue
@@ -9,112 +9,82 @@ export default {
     data: {
       type: Object,
       default: () => {
-        return {
-          title:[],
-          dataOne:[],
-          dataTwo:[]
-        };
-      }
+        return null;
+      },
     },
     bar_width: {
       type: Number,
-      default: 12
+      default: 12,
     },
     colors: {
       type: Array,
       default: () => {
-        return [ "#1034eb", "#e56600"];
-      }
+        return ["#1034eb", "#e56600"];
+      },
     },
     bar_border_radius: {
       type: Array,
       default: () => {
         return [10, 0, 0, 10];
-      }
+      },
     },
     bar_border_radius_two: {
       type: Array,
       default: () => {
         return [0, 10, 10, 0];
-      }
+      },
     },
     show_split: {
       type: Boolean,
-      default: false
+      default: false,
     },
     x_router: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   },
   data: () => ({}),
   mounted() {},
   methods: {
     bar() {
       let self = this;
+      let yAxis = (self.data && self.data.yAxis) || [];
+      let series = (self.data && self.data.series) || [{}, {}];
+
       return {
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+            type: "shadow",
           },
-          formatter: function(params, ticket, callback) {
-            // console.log(params);
-            var res = params[0].name;
-            for (var i = 0, l = params.length; i < l; i++) {
-              res +=
-                "<br/>" +
-                params[i].seriesName +
-                " : " +
-                Math.abs(params[i].value);
-            }
-            setTimeout(function() {
-              // 仅为了模拟异步回调
-              callback(ticket, res);
-            }, 500);
-            return "loading...";
-          }
         },
         legend: {
-          data: ["设置警告值", "实际访问值"],
+          data: series.map((item) => item.name),
           left: "right",
           itemWidth: 10,
           itemHeight: 10,
           orient: "horizontal",
-          // backgroundColor: "#f4f7fc"
         },
-        color:self.colors,
+        color: self.colors,
         grid: {
           top: 35,
           left: 10,
           right: 30,
           bottom: 0,
-          containLabel: true
+          containLabel: true,
         },
         xAxis: [
           {
             axisLabel: {
               formatter: function(value) {
-                return Math.abs(value); //显示的数值都取绝对值
-              }
+                return Math.abs(value);
+              },
             },
             type: "value",
             axisTick: {
-              show: false
+              show: false,
             },
-            // splitLine: {
-            //   show: false
-            // }
-            // splitArea: {
-            //   show: true,
-            //   areaStyle: {
-            //     color: ["#fff", "#f8f9fd"],
-            //     opacity: 0.5
-            //   },
-            //   interval: 0
-            // }
-          }
+          },
         ],
         yAxis: [
           {
@@ -123,31 +93,27 @@ export default {
             axisLabel: {
               color: "#333",
               textStyle: {
-                fontSize: 12
-              }
+                fontSize: 12,
+              },
             },
             minInterval: 1,
-            data: self.data.title,
-            // splitLine: {
-            //   show: false
-            // },
-            axisLine:{
-              show:false
-            }
-          }
+            data: yAxis,
+            axisLine: {
+              show: false,
+            },
+          },
         ],
         series: [
           {
-            name: "设置警告值",
             type: "bar",
             stack: "总量",
             label: {
               normal: {
                 show: false,
-                position: "right"
-              }
+                position: "right",
+              },
             },
-             barWidth : 10,//柱图宽度
+            barWidth: 10,
             itemStyle: {
               normal: {
                 color: function(params) {
@@ -159,23 +125,23 @@ export default {
                     [
                       {
                         offset: 0,
-                        color: self.colors[1] // 0% 处的颜色
+                        color: self.colors[1], // 0% 处的颜色
                       },
                       {
                         offset: 1,
-                        color: self.colors[1] // 100% 处的颜色
-                      }
+                        color: self.colors[1], // 100% 处的颜色
+                      },
                     ],
                     false
                   );
                 },
-                barBorderRadius: self.bar_border_radius_two
-              }
+                barBorderRadius: self.bar_border_radius_two,
+              },
             },
-            data: self.data.dataOne
+            name: series[0].name,
+            data: series[0].data,
           },
           {
-            name: "实际访问值",
             type: "bar",
             stack: "总量",
             label: {
@@ -184,10 +150,10 @@ export default {
                 position: "left",
                 formatter: function(v) {
                   return Math.abs(v.data);
-                }
-              }
+                },
+              },
             },
-             barWidth : 10,//柱图宽度
+            barWidth: 10,
             itemStyle: {
               normal: {
                 color: function(params) {
@@ -199,25 +165,26 @@ export default {
                     [
                       {
                         offset: 0,
-                        color: self.colors[0] // 0% 处的颜色
+                        color: self.colors[0], // 0% 处的颜色
                       },
                       {
                         offset: 1,
-                        color: self.colors[0] // 100% 处的颜色
-                      }
+                        color: self.colors[0], // 100% 处的颜色
+                      },
                     ],
                     false
                   );
                 },
-                barBorderRadius: self.bar_border_radius
-              }
+                barBorderRadius: self.bar_border_radius,
+              },
             },
-            data: self.data.dataTwo
-          }
-        ]
+            name: series[1].name,
+            data: series[1].data.map((v) => v * -1),
+          },
+        ],
       };
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
@@ -225,4 +192,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/e-charts/rankList.vue b/src/components/e-charts/rankList.vue
new file mode 100644
index 0000000..e9ac535
--- /dev/null
+++ b/src/components/e-charts/rankList.vue
@@ -0,0 +1,163 @@
+<template>
+  <div
+    class="top_list apaas_scroll"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+  >
+    <ul>
+      <li class="rank_list" v-for="(option, index) in options" :key="index">
+        <div class="item_index">
+          <span v-text="'TOP' + (index + 1)"></span>
+        </div>
+        <div class="item_logo">
+          <el-avatar
+            shape="square"
+            :size="28"
+            :src="option.cover"
+            fit="cover"
+          />
+        </div>
+        <div class="item_detail">
+          <p class="item_info">
+            <span>{{ option.name }}</span>
+            <span v-text="option.percentage + '%'"></span>
+          </p>
+          <el-progress
+            class="item_progress"
+            :percentage="option.percentage"
+            :show-text="false"
+            color="#e56600"
+          ></el-progress>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      timer: null,
+    };
+  },
+  watch: {
+    options: {
+      handler() {
+        this.autoScroll();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    autoScroll() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+
+      this.$el.scrollTop = 0;
+
+      this.timer = setInterval(() => {
+        let itemHeight = 50;
+        let curScrollTop = this.$el.scrollTop + itemHeight;
+        if (
+          curScrollTop >=
+          this.$el.scrollHeight - this.$el.clientHeight + itemHeight
+        ) {
+          curScrollTop = 0;
+        }
+        this.$el.scrollTop = Math.min(
+          curScrollTop,
+          this.$el.scrollHeight - this.$el.clientHeight
+        );
+      }, 1500);
+    },
+    mouseenter() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    },
+    mouseleave() {
+      this.autoScroll();
+    },
+  },
+  mounted() {
+    this.autoScroll();
+    window.addEventListener("resize", () => {
+      this.autoScroll();
+    });
+  },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  },
+};
+</script>
+
+<style scoped>
+.top_list {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.rank_list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 18px;
+}
+.item_index {
+  width: 35px;
+  flex-shrink: 0;
+  margin-right: 10px;
+  font-size: 12px;
+  color: #58617a;
+}
+.item_logo {
+  margin-right: 10px;
+  flex-shrink: 0;
+  font-size: 0;
+  border: 2px solid #e3e5ef;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.item_info {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  color: #58617a;
+}
+.item_detail {
+  flex-grow: 1;
+}
+.item_info > span:first-child {
+  width: 100px;
+  flex-grow: 1;
+  margin-right: 10px;
+}
+.item_info > span:first-child > i {
+  font-weight: bold;
+  font-size: 12px;
+  color: #8e96ab;
+}
+.item_info > span:nth-child(2) {
+  flex-shrink: 0;
+  white-space: nowrap;
+  color: #0d1847;
+}
+.item_progress {
+  margin-top: 6px;
+}
+.is_link {
+  cursor: pointer;
+}
+</style>
diff --git a/src/pages/data-analysis/org-control.vue b/src/pages/data-analysis/org-control.vue
index e1168c9..2f6c4ed 100644
--- a/src/pages/data-analysis/org-control.vue
+++ b/src/pages/data-analysis/org-control.vue
@@ -21,25 +21,25 @@
               <div style="height:25px;"></div>
               <gk-circle
                 ref="left_1_r"
-                :data="gk_data[0]"
+                :data="controlData[0]"
                 :is_word="true"
                 class="left_1_r"
               ></gk-circle>
               <gk-circle
                 ref="left_1_r"
-                :data="gk_data[1]"
+                :data="controlData[1]"
                 :is_word="true"
                 class="left_1_r"
               ></gk-circle>
               <gk-circle
                 ref="left_1_r"
-                :data="gk_data[2]"
+                :data="controlData[2]"
                 :is_word="true"
                 class="left_1_r"
               ></gk-circle>
               <gk-circle
                 ref="left_1_r"
-                :data="gk_data[3]"
+                :data="controlData[3]"
                 :is_word="true"
                 class="left_1_r"
               ></gk-circle>
@@ -59,7 +59,7 @@
                 <el-col :span="12">
                   <gkmultiple-circle
                     class="block-radius-content"
-                    :data="mult_data_state"
+                    :data="sensitivityLeftData"
                     :show_center_data="false"
                     :bar_width="10"
                     style="height:200px;margin-top:0;"
@@ -67,7 +67,7 @@
                 </el-col>
                 <el-col :span="12">
                   <line-chart
-                    :data="line_data"
+                    :data="sensitivityRightData"
                     :zzfw="true"
                     style="height:200px;"
                     :showShadow="false"
@@ -82,10 +82,10 @@
               :show_header="true"
               title="应用构建数量排名"
             >
-              <doubleLine
-                :data="doubleData"
+              <doubleBar
+                :data="requestData"
                 style="margin-top: -20px;"
-              ></doubleLine>
+              ></doubleBar>
             </block-radius>
           </el-col>
         </el-row>
@@ -99,14 +99,12 @@
               class="block"
               style="height:540px;"
               :buttons_arr="['完整性', '正确性', '一致性', '时效性']"
-              @changeButton="changeServeiceGkBtn"
+              @changeButton="changeRankTab"
             >
-              <toplist
+              <rankList
                 class="block-radius-content"
-                :options="toplistData"
-                :isPercent="true"
-                :target-value="toplistTargetValue"
-              ></toplist>
+                :options="rankData"
+              ></rankList>
             </block-radius>
           </el-col>
         </el-row>
@@ -130,459 +128,179 @@ import BlockRadius from "@/components/general/block-radius";
 import GkCircle from "@/components/e-charts/gk-circle";
 import GkmultipleCircle from "@/components/e-charts/gkmultiple_circle";
 import lineChart from "@/components/e-charts/line_chart";
-import doubleLine from "@/components/e-charts/doubleLine";
-import Toplist from "@/components/e-charts/toplist";
+import doubleBar from "@/components/e-charts/doubleBar";
+import rankList from "@/components/e-charts/rankList";
 
 export default {
+  components: {
+    BlockRadius,
+    GkCircle,
+    GkmultipleCircle,
+    lineChart,
+    doubleBar,
+    rankList,
+  },
   data() {
     return {
-      toplistData: [
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 30,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "钉钉 V1.0",
-          request_count: 22,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "易智瑞 V11.3",
-          request_count: 21,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 18,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 15,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 12,
-        },
+      controlData: [
         {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 10,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 8,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 6,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 6,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 4,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 2,
-        },
-      ], // 服务管控排名分析
-      toplistTargetValue: 40, // 服务管控排名分析 目标值
-      gk_data: [
-        {
-          data: 85,
+          data: 0,
           text: "数据完整率",
         },
         {
-          data: 50,
+          data: 0,
           text: "数据正确性",
         },
         {
-          data: 40,
+          data: 0,
           text: "数据一致性",
         },
         {
-          data: 20,
+          data: 0,
           text: "数据时效性",
         },
-      ],
-      doubleData: {
-        title: [
-          "人脸识别API",
-          "通知中心服务字符",
-          "省送达服务",
-          "数据传输服务",
-          "证据检查服务",
-        ],
-        dataOne: [100, 300, 256, 288, 176, 327],
-        dataTwo: [-60, -340, -226, -228, -136, -227],
-      },
-      mult_data_state: [
-        { name: "含敏感字段的服务", value: 50 },
-        { name: "不含敏感字段的服务", value: 41 },
-      ],
-      line_data: {
-        xAxisData: [
-          "08-01",
-          "08-02",
-          "08-03",
-          "08-04",
-          "08-05",
-          "08-06",
-          "08-07",
-        ],
+      ], // 管控分析概况
+      sensitivityLeftData: [
+        { name: "含敏感字段的服务", value: 0 },
+        { name: "不含敏感字段的服务", value: 0 },
+      ], // 敏感信息服务统计 左侧饼图
+      sensitivityRightData: {
+        xAxisData: [],
         seriesData: [
           {
             name: "含敏感字段的服务",
-            data: [300, 400, 350, 280, 480, 520, 500, 460],
+            data: [],
           },
           {
             name: "不含敏感字段的服务",
-            data: [300, 350, 400, 280, 320, 450, 400, 350],
+            data: [],
           },
         ],
-      },
-    };
-  },
-  components: {
-    BlockRadius,
-    GkCircle,
-    GkmultipleCircle,
-    lineChart,
-    doubleLine,
-    Toplist,
-  },
-  methods: {
-    getData() {},
-    changeServeiceGkBtn(val) {
-      if (val === 0) {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 30,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 22,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 21,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 18,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 10,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 8,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2,
-          },
-        ];
-      } else if (val === 1) {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 35,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 30,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 27,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 25,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 11,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 10,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2,
-          },
-        ];
-      } else if (val === 2) {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 33,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 25,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 20,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 18,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 11,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 10,
-          },
+      }, // 敏感信息服务统计 右侧折线图
+      requestData: {
+        yAxis: [],
+        series: [
           {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6,
+            name: "服务注册数量",
+            data: [],
           },
           {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6,
+            name: "服务发布数量",
+            data: [],
           },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2,
-          },
-        ];
-      } else {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 36,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 34,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 32,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 25,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 14,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 12,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 9,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2,
-          },
-        ];
-      }
+        ],
+      }, // 应用构建数量排名
+      rankData: [], // 服务管控排名
+    };
+  },
+  methods: {
+    init() {
+      this.initControl();
+      this.initSensitivity();
+      this.initRequest();
+      this.initRank();
     },
+    initControl() {
+      this.$http
+        .get("/apaas/service/v3/control/service/data/control")
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.controlData = [
+              {
+                data: data.data.integrity,
+                text: "数据完整率",
+              },
+              {
+                data: data.data.correctness,
+                text: "数据正确性",
+              },
+              {
+                data: data.data.coherence,
+                text: "数据一致性",
+              },
+              {
+                data: data.data.timeliness,
+                text: "数据时效性",
+              },
+            ];
+          } else {
+            this.$message.error(data.errMsg || "获取管控分析概况失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取管控分析概况失败");
+        });
+    }, // 获取 管控分析概况
+    initSensitivity() {
+      Promise.all([
+        this.$http.get(
+          "/apaas/service/v3/control/service/data/sensitivity?tab=1"
+        ),
+        this.$http.get(
+          "/apaas/service/v3/control/service/data/sensitivity?tab=2"
+        ),
+      ])
+        .then((response) => {
+          let datas = response.map((item) => item.data.data);
+
+          this.sensitivityLeftData = [
+            { name: "含敏感字段的服务", value: datas[0].have_sensitivity },
+            { name: "不含敏感字段的服务", value: datas[0].not_sensitivity },
+          ];
+          this.sensitivityRightData = {
+            xAxisData: datas[1].xAxis.data,
+            seriesData: datas[1].series,
+          };
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取敏感信息服务统计失败");
+        });
+    }, // 获取 敏感信息服务统计
+    initRequest() {
+      this.$http
+        .get("/apaas/service/v3/control/service/data/sensitivity/request")
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.requestData = {
+              yAxis: data.data.xAxis.data,
+              series: data.data.series,
+            };
+          } else {
+            this.$message.error(data.errMsg || "获取应用构建数量排名失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取应用构建数量排名失败");
+        });
+    }, // 获取 应用构建数量排名
+    initRank(tab = 1) {
+      this.$http
+        .get(`/apaas/service/v3/control/service/data/control/rank?tab=${tab}`)
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.rankData = data.data;
+          } else {
+            this.$message.error(data.errMsg || "获取服务管控排名失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取服务管控排名失败");
+        });
+    }, // 获取 服务管控排名
+    changeRankTab(val) {
+      this.initRank(val + 1);
+    }, // 切换 服务管控排名
+  },
+  created() {
+    this.init();
   },
 };
 </script>
+
 <style scoped>
 .in_block {
   height: 280px;
diff --git a/src/pages/data-analysis/super-control.vue b/src/pages/data-analysis/super-control.vue
index 44565ab..2f6c4ed 100644
--- a/src/pages/data-analysis/super-control.vue
+++ b/src/pages/data-analysis/super-control.vue
@@ -21,25 +21,25 @@
               <div style="height:25px;"></div>
               <gk-circle
                 ref="left_1_r"
-                :data="gk_data[0]"
+                :data="controlData[0]"
                 :is_word="true"
                 class="left_1_r"
               ></gk-circle>
               <gk-circle
                 ref="left_1_r"
-                :data="gk_data[1]"
+                :data="controlData[1]"
                 :is_word="true"
                 class="left_1_r"
               ></gk-circle>
               <gk-circle
                 ref="left_1_r"
-                :data="gk_data[2]"
+                :data="controlData[2]"
                 :is_word="true"
                 class="left_1_r"
               ></gk-circle>
               <gk-circle
                 ref="left_1_r"
-                :data="gk_data[3]"
+                :data="controlData[3]"
                 :is_word="true"
                 class="left_1_r"
               ></gk-circle>
@@ -59,7 +59,7 @@
                 <el-col :span="12">
                   <gkmultiple-circle
                     class="block-radius-content"
-                    :data="mult_data_state"
+                    :data="sensitivityLeftData"
                     :show_center_data="false"
                     :bar_width="10"
                     style="height:200px;margin-top:0;"
@@ -67,7 +67,7 @@
                 </el-col>
                 <el-col :span="12">
                   <line-chart
-                    :data="line_data"
+                    :data="sensitivityRightData"
                     :zzfw="true"
                     style="height:200px;"
                     :showShadow="false"
@@ -82,7 +82,10 @@
               :show_header="true"
               title="应用构建数量排名"
             >
-              <doubleLine :data="doubleData" style="margin-top: -20px;"></doubleLine>
+              <doubleBar
+                :data="requestData"
+                style="margin-top: -20px;"
+              ></doubleBar>
             </block-radius>
           </el-col>
         </el-row>
@@ -96,14 +99,12 @@
               class="block"
               style="height:540px;"
               :buttons_arr="['完整性', '正确性', '一致性', '时效性']"
-              @changeButton="changeServeiceGkBtn"
+              @changeButton="changeRankTab"
             >
-              <toplist
+              <rankList
                 class="block-radius-content"
-                :options="toplistData"
-                :isPercent="true"
-                :target-value="toplistTargetValue"
-              ></toplist>
+                :options="rankData"
+              ></rankList>
             </block-radius>
           </el-col>
         </el-row>
@@ -127,459 +128,179 @@ import BlockRadius from "@/components/general/block-radius";
 import GkCircle from "@/components/e-charts/gk-circle";
 import GkmultipleCircle from "@/components/e-charts/gkmultiple_circle";
 import lineChart from "@/components/e-charts/line_chart";
-import doubleLine from "@/components/e-charts/doubleLine";
-import Toplist from "@/components/e-charts/toplist";
+import doubleBar from "@/components/e-charts/doubleBar";
+import rankList from "@/components/e-charts/rankList";
 
 export default {
+  components: {
+    BlockRadius,
+    GkCircle,
+    GkmultipleCircle,
+    lineChart,
+    doubleBar,
+    rankList,
+  },
   data() {
     return {
-      toplistData: [
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 30,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "钉钉 V1.0",
-          request_count: 22,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "易智瑞 V11.3",
-          request_count: 21,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 18,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 15,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 12,
-        },
+      controlData: [
         {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 10,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 8,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 6,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 6,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 4,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 2,
-        },
-      ], // 服务管控排名分析
-      toplistTargetValue: 40, // 服务管控排名分析 目标值
-      gk_data: [
-        {
-          data: 85,
+          data: 0,
           text: "数据完整率",
         },
         {
-          data: 50,
+          data: 0,
           text: "数据正确性",
         },
         {
-          data: 40,
+          data: 0,
           text: "数据一致性",
         },
         {
-          data: 20,
+          data: 0,
           text: "数据时效性",
         },
-      ],
-      doubleData: {
-        title: [
-          "人脸识别API",
-          "通知中心服务字符",
-          "省送达服务",
-          "数据传输服务",
-          "证据检查服务",
-        ],
-        dataOne: [100, 300, 256, 288, 176, 327],
-        dataTwo: [-60, -340, -226, -228, -136, -227],
-      },
-      mult_data_state: [
-        { name: "含敏感字段的服务", value: 50 },
-        { name: "不含敏感字段的服务", value: 41 },
-      ],
-      line_data: {
-        xAxisData: [
-          "08-01",
-          "08-02",
-          "08-03",
-          "08-04",
-          "08-05",
-          "08-06",
-          "08-07",
-        ],
+      ], // 管控分析概况
+      sensitivityLeftData: [
+        { name: "含敏感字段的服务", value: 0 },
+        { name: "不含敏感字段的服务", value: 0 },
+      ], // 敏感信息服务统计 左侧饼图
+      sensitivityRightData: {
+        xAxisData: [],
         seriesData: [
           {
             name: "含敏感字段的服务",
-            data: [300, 400, 350, 280, 480, 520, 500, 460],
+            data: [],
           },
           {
             name: "不含敏感字段的服务",
-            data: [300, 350, 400, 280, 320, 450, 400, 350],
+            data: [],
           },
         ],
-      },
-    };
-  },
-  components: {
-    BlockRadius,
-    GkCircle,
-    GkmultipleCircle,
-    lineChart,
-    doubleLine,
-    Toplist,
-  },
-  methods: {
-    getData() {},
-    changeServeiceGkBtn(val) {
-      if (val === 0) {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 30,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 22,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 21,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 18,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 10,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 8,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2,
-          },
-        ];
-      } else if (val === 1) {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 35,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 30,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 27,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 25,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 11,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 10,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2,
-          },
-        ];
-      } else if (val === 2) {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 33,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 25,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 20,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 18,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 12,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 11,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 10,
-          },
+      }, // 敏感信息服务统计 右侧折线图
+      requestData: {
+        yAxis: [],
+        series: [
           {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6,
+            name: "服务注册数量",
+            data: [],
           },
           {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6,
+            name: "服务发布数量",
+            data: [],
           },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2,
-          },
-        ];
-      } else {
-        this.toplistData = [
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 36,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 34,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 32,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 25,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 15,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 14,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 12,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 9,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 6,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 4,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 2,
-          },
-        ];
-      }
+        ],
+      }, // 应用构建数量排名
+      rankData: [], // 服务管控排名
+    };
+  },
+  methods: {
+    init() {
+      this.initControl();
+      this.initSensitivity();
+      this.initRequest();
+      this.initRank();
     },
+    initControl() {
+      this.$http
+        .get("/apaas/service/v3/control/service/data/control")
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.controlData = [
+              {
+                data: data.data.integrity,
+                text: "数据完整率",
+              },
+              {
+                data: data.data.correctness,
+                text: "数据正确性",
+              },
+              {
+                data: data.data.coherence,
+                text: "数据一致性",
+              },
+              {
+                data: data.data.timeliness,
+                text: "数据时效性",
+              },
+            ];
+          } else {
+            this.$message.error(data.errMsg || "获取管控分析概况失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取管控分析概况失败");
+        });
+    }, // 获取 管控分析概况
+    initSensitivity() {
+      Promise.all([
+        this.$http.get(
+          "/apaas/service/v3/control/service/data/sensitivity?tab=1"
+        ),
+        this.$http.get(
+          "/apaas/service/v3/control/service/data/sensitivity?tab=2"
+        ),
+      ])
+        .then((response) => {
+          let datas = response.map((item) => item.data.data);
+
+          this.sensitivityLeftData = [
+            { name: "含敏感字段的服务", value: datas[0].have_sensitivity },
+            { name: "不含敏感字段的服务", value: datas[0].not_sensitivity },
+          ];
+          this.sensitivityRightData = {
+            xAxisData: datas[1].xAxis.data,
+            seriesData: datas[1].series,
+          };
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取敏感信息服务统计失败");
+        });
+    }, // 获取 敏感信息服务统计
+    initRequest() {
+      this.$http
+        .get("/apaas/service/v3/control/service/data/sensitivity/request")
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.requestData = {
+              yAxis: data.data.xAxis.data,
+              series: data.data.series,
+            };
+          } else {
+            this.$message.error(data.errMsg || "获取应用构建数量排名失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取应用构建数量排名失败");
+        });
+    }, // 获取 应用构建数量排名
+    initRank(tab = 1) {
+      this.$http
+        .get(`/apaas/service/v3/control/service/data/control/rank?tab=${tab}`)
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.rankData = data.data;
+          } else {
+            this.$message.error(data.errMsg || "获取服务管控排名失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取服务管控排名失败");
+        });
+    }, // 获取 服务管控排名
+    changeRankTab(val) {
+      this.initRank(val + 1);
+    }, // 切换 服务管控排名
+  },
+  created() {
+    this.init();
   },
 };
 </script>
+
 <style scoped>
 .in_block {
   height: 280px;
-- 
2.26.0