运行管控路由配置

src/pages/data-analysis/data-analysis.vue

 <template>
   <div class="fwgl_container">
     <sideNavBar
-      v-if="is_admin == 3 || is_admin == 4 || is_admin == 1"
+      v-if="is_admin == 3 || is_admin == 4"
       title="运营管控中心"
       imgSrc="tool_fuwu"
       :nav-list="navList"
       :title-path="navList[0] && navList[0].path"
     ></sideNavBar>
     <sideNavBarClass
-      v-else-if="is_admin == 2"
+      v-else-if="is_admin == 1 || is_admin == 2"
       title="运营管控中心"
       imgSrc="tool_fuwu"
       :nav-list="navList"
@@ -56,20 +56,24 @@ export default {
       },
       {
         name: "运行管控",
-        path: `/data_analysis/operation_overview`,
+        path: `/data_analysis/org_overview`,
         child: [
           {
             name: "运行概况",
-            path: `/data_analysis/operation_overview`,
+            path: `/data_analysis/org_overview`,
           },
           {
             name: "服务管控",
-            path: `/data_analysis/service_control`,
+            path: `/data_analysis/org_control`,
           },
         ],
       },
     ],
     userNav2: [
+      {
+        name: "运营分析",
+        path: `/data_analysis/super_service`,
+        child: [
           {
             name: "服务分析",
             path: `/data_analysis/super_service`,
@@ -79,6 +83,22 @@ export default {
             path: `/data_analysis/super_application`,
           },
         ],
+      },
+      {
+        name: "运行管控",
+        path: `/data_analysis/super_overview`,
+        child: [
+          {
+            name: "运行概况",
+            path: `/data_analysis/super_overview`,
+          },
+          {
+            name: "服务管控",
+            path: `/data_analysis/super_control`,
+          },
+        ],
+      },
+    ],
     navList: [],
     is_admin: 0,
   }),

src/pages/data-analysis/super-control.vue

+<template>
+  <div class="service-control">
+    <el-breadcrumb separator="/" class="bread_crumb1">
+      <el-breadcrumb-item :to="{ path: '/data_analysis' }">
+        {{ $t("lang.data_analysis") }}
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        {{ $t("管控服务") }}
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="管控分析概况"
+              class="block"
+              style="height:540px;"
+            >
+              <div style="height:25px;"></div>
+              <gk-circle
+                ref="left_1_r"
+                :data="gk_data[0]"
+                :is_word="true"
+                class="left_1_r"
+              ></gk-circle>
+              <gk-circle
+                ref="left_1_r"
+                :data="gk_data[1]"
+                :is_word="true"
+                class="left_1_r"
+              ></gk-circle>
+              <gk-circle
+                ref="left_1_r"
+                :data="gk_data[2]"
+                :is_word="true"
+                class="left_1_r"
+              ></gk-circle>
+              <gk-circle
+                ref="left_1_r"
+                :data="gk_data[3]"
+                :is_word="true"
+                class="left_1_r"
+              ></gk-circle>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="敏感信息服务统计"
+              class="block"
+            >
+              <el-row>
+                <el-col :span="12">
+                  <gkmultiple-circle
+                    class="block-radius-content"
+                    :data="mult_data_state"
+                    :show_center_data="false"
+                    :bar_width="10"
+                    style="height:200px; margin-top:0"
+                  ></gkmultiple-circle>
+                </el-col>
+                <el-col :span="12">
+                  <line-chart
+                    :data="line_data"
+                    :zzfw="true"
+                    style="height:200px;width:400px"
+                    :showShadow="false"
+                  ></line-chart>
+                </el-col>
+              </el-row>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              class="block"
+              :show_header="true"
+              title="应用构建数量排名"
+            >
+              <doubleLine :data="doubleData"></doubleLine>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务管控排名"
+              class="block"
+              style="height:540px;"
+              :buttons_arr="['完整性', '正确性', '一致性', '时效性']"
+              @changeButton="changeServeiceGkBtn"
+            >
+              <toplist
+                class="block-radius-content"
+                :options="toplistData"
+                :isPercent="true"
+                :target-value="toplistTargetValue"
+              ></toplist>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="in_block default">
+        <block-radius class="block">
+          <img
+            :src="require('@/assets/imgs/data_img_default.gif')"
+            class="default_img"
+          />
+        </block-radius>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+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";
+
+export default {
+  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,
+        },
+        {
+          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,
+          text: "数据完整率",
+        },
+        {
+          data: 50,
+          text: "数据正确性",
+        },
+        {
+          data: 40,
+          text: "数据一致性",
+        },
+        {
+          data: 20,
+          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",
+        ],
+        seriesData: [
+          {
+            name: "服务数量",
+            data: [300, 400, 350, 280, 480, 520, 500, 460],
+          },
+          {
+            name: "应用数量",
+            data: [300, 350, 400, 280, 320, 450, 400, 350],
+          },
+        ],
+      },
+    };
+  },
+  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,
+          },
+          {
+            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 {
+        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,
+          },
+        ];
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.in_block {
+  height: 280px;
+  padding: 10px;
+}
+.block {
+  width: 100%;
+  height: 100%;
+}
+.block-radius-content {
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
+.left_1_r {
+  width: 49%;
+  height: 43%;
+  display: inline-block;
+}
+
+.default {
+  text-align: center;
+}
+.default_img {
+  width: 330px;
+  height: 230px;
+}
+</style>
+<style>
+.service-control .left_1_r canvas {
+  bottom: 0;
+  right: 0;
+  width: 160px !important;
+  height: 190px !important;
+  margin: 0 auto !important;
+}
+</style>

src/pages/data-analysis/super-overview.vue

+<template>
+  <div>
+    <el-breadcrumb separator="/" class="bread_crumb1">
+      <el-breadcrumb-item :to="{ path: '/data_analysis' }">
+        {{ $t("lang.data_analysis") }}
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        {{ $t("运行概况") }}
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="组织用户概况"
+              class="block"
+            >
+              <div class="part">
+                <img src="../../assets/imgs/yxgk_ic_zuzhiyh.png" alt />
+                <div class="part_right_1">
+                  <p class="right_txt_1">组织用户数</p>
+                  <p class="right_txt_2" v-text="baseinfo.user_num || 0"></p>
+                </div>
+              </div>
+              <div class="part">
+                <img src="../../assets/imgs/yxgk_ic_zaixianyh.png" alt />
+                <div class="part_right_1">
+                  <p class="right_txt_1">在线用户数</p>
+                  <p
+                    class="right_txt_2"
+                    v-text="baseinfo.online_user_num || 0"
+                  ></p>
+                </div>
+              </div>
+              <div class="part">
+                <img src="../../assets/imgs/yxgk_ic_fuwuzs.png" alt />
+                <div class="part_right_1">
+                  <p class="right_txt_1">服务总数</p>
+                  <p class="right_txt_2" v-text="baseinfo.serv_num || 0"></p>
+                </div>
+              </div>
+              <div class="part">
+                <img src="../../assets/imgs/yxgk_ic_yingyongzs.png" alt />
+                <div class="part_right_1">
+                  <p class="right_txt_1">应用总数</p>
+                  <p class="right_txt_2" v-text="baseinfo.app_num || 0"></p>
+                </div>
+              </div>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="组织服务及应用数量变化趋势"
+              class="block"
+            >
+              <line-chart
+                class="block-radius-content"
+                :data="servVolumeTrend"
+                :zzfw="true"
+              ></line-chart>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务注册发布数量排名"
+              class="block"
+            >
+              <bar-charttwo :data="servRegRank"></bar-charttwo>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              class="block"
+              :show_header="true"
+              title="应用构建数量排名"
+            >
+              <BarChart
+                :data="buildNum"
+                :colors="['#1034eb', '#4274f8']"
+                :bar_border_radius="[20, 20, 0, 0]"
+                :bar_width="26"
+                :show_split="true"
+                :xAxis_text_length="5"
+              />
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务被调用次数排名"
+              class="block"
+              :buttons_arr="['累计', '今日']"
+              @changeButton="changeAction1"
+            >
+              <toplist
+                class="block-radius-content"
+                :options="servRequestRank"
+                :target-value="servRequestRankMax"
+                :isShowjt="false"
+              ></toplist>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="应用被部署次数排名"
+              class="block"
+              :buttons_arr="['累计', '今日']"
+              @changeButton="changeActions"
+            >
+              <the-list
+                :data="deployedNum"
+                class="block-radius-content"
+              ></the-list>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="in_block default">
+        <block-radius class="block">
+          <img
+            :src="require('@/assets/imgs/data_img_default.gif')"
+            class="default_img"
+          />
+        </block-radius>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import BlockRadius from "@/components/general/block-radius";
+import lineChart from "@/components/e-charts/line_chart";
+import BarCharttwo from "@/components/e-charts/bar-chart-two";
+import BarChart from "@/components/e-charts/bar-chart";
+import Toplist from "@/components/e-charts/toplist";
+import theList from "@/components/e-charts/the-list";
+
+export default {
+  components: {
+    BlockRadius,
+    lineChart,
+    BarCharttwo,
+    BarChart,
+    Toplist,
+    theList,
+  },
+  data() {
+    return {
+      baseinfo: {}, // 组织用户概况
+      servRegRank: {}, // 服务注册发布数量排名
+      servVolumeTrend: {
+        xAxisData: [],
+        seriesData: [],
+      }, // 服务被调用次数排名
+      buildNum: {
+        legendData: [],
+        seriesData: [],
+      }, // 组织服务及应用数量变化趋势
+      servRequestRank: [], // 应用构建数量排名
+      deployedNum: [], // 应用被部署次数排名
+    };
+  },
+  computed: {
+    servRequestRankMax() {
+      return (
+        (this.servRequestRank &&
+          this.servRequestRank[0] &&
+          this.servRequestRank[0].request_count) ||
+        100
+      );
+    },
+  },
+  methods: {
+    init() {
+      this.getBaseInfo();
+      this.getServRegRank();
+      this.getServRequestRank();
+      this.getServVolumeTrend();
+      this.getBuildNum();
+      this.getDeployedNum();
+    },
+    getBaseInfo() {
+      this.$http
+        .get("/apaas/service/v3/control/org/baseinfo")
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.baseinfo = data.data;
+          } else {
+            this.$message.error(data.errMsg || "获取组织用户概况失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取组织用户概况失败");
+        });
+    }, // 获取 组织用户概况
+    getServRegRank() {
+      this.$http
+        .get("/apaas/service/v3/control/org/serv/reg/rank")
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.servRegRank = data.data;
+          } else {
+            this.$message.error(data.errMsg || "获取服务注册发布数量排名失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取服务注册发布数量排名失败");
+        });
+    }, // 获取 服务注册发布数量排名
+    getServRequestRank(tab = "all") {
+      this.$http
+        .get("/apaas/service/v3/control/org/serv/request/rank", {
+          params: { tab },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.servRequestRank = data.data;
+          } else {
+            this.$message.error(data.errMsg || "获取服务被调用次数排名失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取服务被调用次数排名失败");
+        });
+    }, // 获取 服务被调用次数排名
+    getServVolumeTrend() {
+      Promise.all([
+        this.$http.get("/apaas/service/v3/control/org/serv/volume/trend"),
+        this.$http.get("/apaas/hubApi/operation/appNum?day=7"),
+      ])
+        .then((response) => {
+          let datas = response.map((item) => item.data.data);
+
+          this.servVolumeTrend = {
+            xAxisData: datas[1].data,
+            seriesData: datas[0].series.concat(datas[1].series),
+          };
+        })
+        .catch((error) => {
+          this.$message.error("获取组织服务及应用数量变化趋势失败");
+        });
+    }, // 获取 组织服务及应用数量变化趋势
+    getBuildNum() {
+      this.$http
+        .get("/apaas/hubApi/operation/buildNum")
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.buildNum = {
+              legendData: data.data.xAxis.data,
+              seriesData: data.data.series[0].data,
+            };
+          } else {
+            this.$message.error(data.errMsg || "获取应用构建数量排名失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取应用构建数量排名失败");
+        });
+    }, // 获取 应用构建数量排名
+    getDeployedNum(style = 1) {
+      this.$http
+        .get("/apaas/hubApi/operation/deployedNum", {
+          params: { style },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.deployedNum = data.data;
+          } else {
+            this.$message.error(data.errMsg || "获取应用被部署次数排名失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取应用被部署次数排名失败");
+        });
+    }, // 获取 应用被部署次数排名
+    changeAction1(val) {
+      if (val === 0) {
+        this.getServRequestRank("all");
+      } else {
+        this.getServRequestRank("today");
+      }
+    }, // 切换 服务被调用次数排名
+    changeActions(val) {
+      if (val === 0) {
+        this.getDeployedNum(1);
+      } else {
+        this.getDeployedNum(2);
+      }
+    }, // 切换 应用被部署次数排名
+  },
+  created() {
+    this.init();
+  },
+};
+</script>
+<style scoped>
+.in_block {
+  height: 280px;
+  padding: 10px;
+}
+.block {
+  width: 100%;
+  height: 100%;
+}
+.block-radius-content {
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
+.part {
+  display: inline-block;
+  width: 48%;
+  height: 40%;
+  position: relative;
+}
+.part img {
+  margin-top: 15px;
+}
+.part_right_1 {
+  display: inline-block;
+  position: absolute;
+  margin-left: 12px;
+  top: 15px;
+}
+.right_txt_1 {
+  font-size: 14px;
+  color: #58617a;
+}
+.right_txt_2 {
+  font-size: 32px;
+  text-align: center;
+  color: #274fee;
+}
+.default {
+  text-align: center;
+}
+.default_img {
+  width: 330px;
+  height: 230px;
+}
+</style>

src/router/index.js

@@ -441,14 +441,14 @@ export default new Router({
               component: () => import("@/pages/data-analysis/org-application"),
             },
             {
-              path: "/data_analysis/operation_overview", // 运行概况-组织
-              name: "operationOverview",
-              component: () => import("@/pages/data-analysis/operation-overview"),
+              path: "/data_analysis/org_overview", // 运行概况-组织
+              name: "orgOverview",
+              component: () => import("@/pages/data-analysis/org-overview"),
             },
             {
-              path: "/data_analysis/service_control", // 服务管控-组织
-              name: "serviceControl",
-              component: () => import("@/pages/data-analysis/service-control"),
+              path: "/data_analysis/org_control", // 服务管控-组织
+              name: "orgControl",
+              component: () => import("@/pages/data-analysis/org-control"),
             },
             {
               path: "/data_analysis/super_service", // 数据分析中心服务-超管
@@ -460,6 +460,16 @@ export default new Router({
               name: "superApplicationDataAnalysis",
               component: () => import("@/pages/data-analysis/super-application"),
             },
+            {
+              path: "/data_analysis/super_overview", // 运行概况-超管
+              name: "superOverview",
+              component: () => import("@/pages/data-analysis/super-overview"),
+            },
+            {
+              path: "/data_analysis/super_control", // 服务管控-超管
+              name: "superControl",
+              component: () => import("@/pages/data-analysis/super-control"),
+            },
           ],
         },
         {