From b6925bb87684413db8d0d63ae3b6fc61f273f0e7 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Wed, 26 Aug 2020 18:34:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B6=85=E7=AE=A1=E8=BF=90=E8=A1=8C=E7=AE=A1?=
 =?UTF-8?q?=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/apass-table.vue                |  28 +-
 src/components/e-charts/bar-chart-two.vue     |  48 ++--
 .../organization/organizationdetail.vue       |  13 +-
 src/pages/data-analysis/my-service.vue        |   4 +-
 src/pages/data-analysis/org-overview.vue      |   9 +-
 src/pages/data-analysis/super-overview.vue    | 267 +++++++++++++++---
 6 files changed, 307 insertions(+), 62 deletions(-)

diff --git a/src/components/apass-table.vue b/src/components/apass-table.vue
index 6b61586..5590a12 100644
--- a/src/components/apass-table.vue
+++ b/src/components/apass-table.vue
@@ -132,9 +132,9 @@
                 :styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3"
               />
             </sparkline>
-            <span class="use" v-if="item.prop == 'cpu' && scope.row.cpu_use"
-              >{{ scope.row["cpu_use"] }}.00mm</span
-            >
+            <span class="use" v-if="item.prop == 'cpu' && scope.row.cpu_use">
+              {{ scope.row["cpu_use"] }}.00mm
+            </span>
             <span
               class="use"
               :style="
@@ -143,13 +143,15 @@
                   : { right: '25px', bottom: '8px' }
               "
               v-if="item.prop == 'cpu' && !scope.row.cpu_use"
-              >0mm</span
             >
+              0mm
+            </span>
             <span
               class="use"
               v-if="item.prop == 'mermoy' && scope.row.memory_use"
-              >{{ (scope.row["memory_use"]/1024/1024).toFixed(2)}}Mi</span
             >
+              {{ (scope.row["memory_use"] / 1024 / 1024).toFixed(2) }}Mi
+            </span>
             <span
               class="use"
               :style="
@@ -208,6 +210,12 @@
             :class="'index_' + scope.row.hotIndex"
             v-text="'TOP' + scope.row.hotIndex"
           ></span>
+          <span
+            v-else-if="item.type === 'hot-index-2'"
+            class="hot_index"
+            :class="'index_' + scope.row.hotIndex"
+            v-text="scope.row.hotIndex + '.'"
+          ></span>
           <span class="sort_table" v-else-if="item.sortable">
             <span>{{ getPercent(scope.row[item.prop]) }}</span>
             <span>
@@ -218,6 +226,16 @@
               <img v-else :src="require('../assets/imgs/icon_down.png')" />
             </span>
           </span>
+          <span class="sort_table" v-else-if="item.sortIcon">
+            <span>{{ scope.row[item.prop] + "%" }}</span>
+            <span>
+              <img
+                v-if="scope.row[item.prop] > 0"
+                :src="require('../assets/imgs/icon_up.png')"
+              />
+              <img v-else :src="require('../assets/imgs/icon_down.png')" />
+            </span>
+          </span>
           <span
             v-else-if="item.type === 'selected-icon'"
             class="selected_icon"
diff --git a/src/components/e-charts/bar-chart-two.vue b/src/components/e-charts/bar-chart-two.vue
index 0b13e2b..2db68ca 100644
--- a/src/components/e-charts/bar-chart-two.vue
+++ b/src/components/e-charts/bar-chart-two.vue
@@ -36,12 +36,16 @@ export default {
       type: Number,
       default: 0,
     },
+    xAxis_text_length: {
+      type: Number,
+      default: 0,
+    },
   },
   methods: {
     bar() {
-      let _self = this;
-      let xAxis = (_self.data && _self.data.xAxis) || [];
-      let series = (_self.data && _self.data.series) || [{}, {}];
+      let self = this;
+      let xAxis = (self.data && self.data.xAxis) || [];
+      let series = (self.data && self.data.series) || [{}, {}];
 
       return {
         grid: {
@@ -71,16 +75,22 @@ export default {
               fontSize: 12,
             },
             interval: 0,
-            rotate: _self.x_router,
-            /* formatter: function(value) {
-              let valueTxt = "";
-              if (value.length > 6) {
-                valueTxt = value.substring(0, 5) + "...";
+            rotate: self.x_router,
+            formatter: function(value) {
+              let maxLen = self.xAxis_text_length;
+
+              if (maxLen > 1) {
+                let valueTxt = "";
+                if (value.length > maxLen) {
+                  valueTxt = value.substring(0, maxLen - 1) + "...";
+                } else {
+                  valueTxt = value;
+                }
+                return valueTxt;
               } else {
-                valueTxt = value;
+                return value;
               }
-              return valueTxt;
-            }, */
+            },
           },
           axisLine: {
             lineStyle: {
@@ -132,7 +142,7 @@ export default {
           {
             type: "bar",
             type: "bar",
-            barWidth: _self.bar_width,
+            barWidth: self.bar_width,
             itemStyle: {
               normal: {
                 color: function(params) {
@@ -144,17 +154,17 @@ 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,
               },
             },
             name: series[0].name,
@@ -163,7 +173,7 @@ export default {
           {
             type: "bar",
             type: "bar",
-            barWidth: _self.bar_width,
+            barWidth: self.bar_width,
             itemStyle: {
               normal: {
                 color: function(params) {
@@ -175,17 +185,17 @@ 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,
+                barBorderRadius: self.bar_border_radius,
               },
             },
             name: series[1].name,
diff --git a/src/pages/authority/organization/organizationdetail.vue b/src/pages/authority/organization/organizationdetail.vue
index b709e0d..a928012 100644
--- a/src/pages/authority/organization/organizationdetail.vue
+++ b/src/pages/authority/organization/organizationdetail.vue
@@ -317,9 +317,14 @@ export default {
   color: #242c43;
 }
 .organtable {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
   margin-top: 20px;
+  margin-bottom: 40px;
   width: 100%;
-  height: calc(100% - 210px);
+  min-height: calc(100% - 250px);
   background-color: #fff;
   box-shadow: 0px 3px 6px 0px #f4f7fc;
   border-radius: 12px;
@@ -345,4 +350,10 @@ export default {
 .organtable .elinput {
   float: right;
 }
+.organtable .apass_table {
+  flex-grow: 1;
+}
+.organtable .comments_pagination {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue
index 0765e66..56ba837 100644
--- a/src/pages/data-analysis/my-service.vue
+++ b/src/pages/data-analysis/my-service.vue
@@ -814,8 +814,10 @@ export default {
 
 <style>
 .hot-search-table .el-table td,
-.hot-search-table .el-table th {
+.hot-search-table .el-table th,
+.hot-search-table .el-table .row_action .btn {
   padding: 6px 0;
+  font-size: 12px;
 }
 .hot-search-table .el-table div.row_action {
   overflow: hidden;
diff --git a/src/pages/data-analysis/org-overview.vue b/src/pages/data-analysis/org-overview.vue
index b0c4953..0422a93 100644
--- a/src/pages/data-analysis/org-overview.vue
+++ b/src/pages/data-analysis/org-overview.vue
@@ -73,7 +73,10 @@
               title="服务注册发布数量排名"
               class="block"
             >
-              <bar-charttwo :data="servRegRank"></bar-charttwo>
+              <bar-chart-two
+                :data="servRegRank"
+                :xAxis_text_length="5"
+              ></bar-chart-two>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
@@ -145,7 +148,7 @@
 <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 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";
@@ -154,7 +157,7 @@ export default {
   components: {
     BlockRadius,
     lineChart,
-    BarCharttwo,
+    BarChartTwo,
     BarChart,
     Toplist,
     theList,
diff --git a/src/pages/data-analysis/super-overview.vue b/src/pages/data-analysis/super-overview.vue
index b0c4953..a72bdee 100644
--- a/src/pages/data-analysis/super-overview.vue
+++ b/src/pages/data-analysis/super-overview.vue
@@ -9,29 +9,26 @@
       </el-breadcrumb-item>
     </el-breadcrumb>
     <el-row>
-      <el-col :span="6">
+      <el-col :span="7">
         <el-row>
           <el-col :span="24" class="in_block">
             <block-radius
               :show_header="true"
-              title="组织用户概况"
+              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>
+                  <p class="right_txt_1">组织数量</p>
+                  <p class="right_txt_2" v-text="baseinfo.org_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>
+                  <p class="right_txt_1">用户数量</p>
+                  <p class="right_txt_2" v-text="baseinfo.user_num || 0"></p>
                 </div>
               </div>
               <div class="part">
@@ -53,19 +50,24 @@
           <el-col :span="24" class="in_block">
             <block-radius
               :show_header="true"
-              title="组织服务及应用数量变化趋势"
+              title="服务注册发布组织贡献榜"
               class="block"
+              :buttons_arr="['周排名', '月排名']"
+              @changeButton="changeAction4"
             >
-              <line-chart
-                class="block-radius-content"
-                :data="servVolumeTrend"
-                :zzfw="true"
-              ></line-chart>
+              <div class="block-radius-content apaas_scroll">
+                <apass-table
+                  class="hot-search-table"
+                  :header="hotSeviceHeader"
+                  :data="hotSeviceData"
+                  :padding-left="0"
+                ></apass-table>
+              </div>
             </block-radius>
           </el-col>
         </el-row>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="10">
         <el-row>
           <el-col :span="24" class="in_block">
             <block-radius
@@ -73,7 +75,10 @@
               title="服务注册发布数量排名"
               class="block"
             >
-              <bar-charttwo :data="servRegRank"></bar-charttwo>
+              <bar-chart-two
+                :data="servRegRank"
+                :xAxis_text_length="5"
+              ></bar-chart-two>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
@@ -94,7 +99,7 @@
           </el-col>
         </el-row>
       </el-col>
-      <el-col :span="6">
+      <el-col :span="7">
         <el-row>
           <el-col :span="24" class="in_block">
             <block-radius
@@ -118,7 +123,7 @@
               title="应用被部署次数排名"
               class="block"
               :buttons_arr="['累计', '今日']"
-              @changeButton="changeActions"
+              @changeButton="changeAction2"
             >
               <the-list
                 :data="deployedNum"
@@ -130,7 +135,40 @@
       </el-col>
     </el-row>
     <el-row>
-      <el-col :span="24" class="in_block default">
+      <el-col :span="7" class="in_block">
+        <block-radius
+          :show_header="true"
+          title="应用构建组织贡献榜"
+          class="block"
+          :buttons_arr="['周排名', '月排名']"
+          @changeButton="changeAction5"
+        >
+          <div class="block-radius-content apaas_scroll">
+            <apass-table
+              class="hot-search-table"
+              :header="hotAppHeader"
+              :data="hotAppData"
+              :padding-left="0"
+            ></apass-table>
+          </div>
+        </block-radius>
+      </el-col>
+      <el-col :span="10" class="in_block">
+        <block-radius
+          :show_header="true"
+          title="组织服务及应用数量变化趋势"
+          class="block"
+          :buttons_arr="['近14天', '近30天']"
+          @changeButton="changeAction3"
+        >
+          <line-chart
+            class="block-radius-content"
+            :data="servVolumeTrend"
+            :zzfw="true"
+          ></line-chart>
+        </block-radius>
+      </el-col>
+      <el-col :span="7" class="in_block default">
         <block-radius class="block">
           <img
             :src="require('@/assets/imgs/data_img_default.gif')"
@@ -145,23 +183,25 @@
 <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 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";
+import ApassTable from "@/components/apass-table";
 
 export default {
   components: {
     BlockRadius,
     lineChart,
-    BarCharttwo,
+    BarChartTwo,
     BarChart,
     Toplist,
     theList,
+    ApassTable,
   },
   data() {
     return {
-      baseinfo: {}, // 组织用户概况
+      baseinfo: {}, // 平台组织概况
       servRegRank: {}, // 服务注册发布数量排名
       servVolumeTrend: {
         xAxisData: [],
@@ -173,6 +213,10 @@ export default {
       }, // 组织服务及应用数量变化趋势
       servRequestRank: [], // 应用构建数量排名
       deployedNum: [], // 应用被部署次数排名
+      hotSeviceHeader: [], // 服务注册发布组织贡献榜 表头
+      hotSeviceData: [], // 服务注册发布组织贡献榜 数据
+      hotAppHeader: [], // 应用构建组织贡献榜 表头
+      hotAppData: [], // 应用构建组织贡献榜 数据
     };
   },
   computed: {
@@ -193,25 +237,27 @@ export default {
       this.getServVolumeTrend();
       this.getBuildNum();
       this.getDeployedNum();
+      this.getHotSevice();
+      this.getHotApp();
     },
     getBaseInfo() {
       this.$http
-        .get("/apaas/service/v3/control/org/baseinfo")
+        .get("/apaas/service/v3/control/super/baseinfo")
         .then(({ data }) => {
           if (data.success === 1) {
             this.baseinfo = data.data;
           } else {
-            this.$message.error(data.errMsg || "获取组织用户概况失败");
+            this.$message.error(data.errMsg || "获取平台组织概况失败");
           }
         })
         .catch((error) => {
           console.log(error);
-          this.$message.error("获取组织用户概况失败");
+          this.$message.error("获取平台组织概况失败");
         });
-    }, // 获取 组织用户概况
+    }, // 获取 平台组织概况
     getServRegRank() {
       this.$http
-        .get("/apaas/service/v3/control/org/serv/reg/rank")
+        .get("/apaas/service/v3/control/super/serv/reg/rank")
         .then(({ data }) => {
           if (data.success === 1) {
             this.servRegRank = data.data;
@@ -226,7 +272,7 @@ export default {
     }, // 获取 服务注册发布数量排名
     getServRequestRank(tab = "all") {
       this.$http
-        .get("/apaas/service/v3/control/org/serv/request/rank", {
+        .get("/apaas/service/v3/control/super/serv/request/rank", {
           params: { tab },
         })
         .then(({ data }) => {
@@ -241,10 +287,12 @@ export default {
           this.$message.error("获取服务被调用次数排名失败");
         });
     }, // 获取 服务被调用次数排名
-    getServVolumeTrend() {
+    getServVolumeTrend(day = 14) {
       Promise.all([
-        this.$http.get("/apaas/service/v3/control/org/serv/volume/trend"),
-        this.$http.get("/apaas/hubApi/operation/appNum?day=7"),
+        this.$http.get(
+          `/apaas/service/v3/control/super/serv/volume/trend?tab=day${day}`
+        ),
+        this.$http.get(`/apaas/hubApi/operation/appNum?day=${day}`),
       ])
         .then((response) => {
           let datas = response.map((item) => item.data.data);
@@ -293,6 +341,48 @@ export default {
           this.$message.error("获取应用被部署次数排名失败");
         });
     }, // 获取 应用被部署次数排名
+    getHotSevice(tab = "week") {
+      this.$http
+        .get("/apaas/service/v3/control/super/serv/org/volume/rank", {
+          params: { tab },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.hotSeviceData = data.data.map((item, index) => ({
+              ...item,
+              hotIndex: index + 1,
+            }));
+          } else {
+            this.$message.error(
+              data.errMsg || "获取服务注册发布组织贡献榜失败"
+            );
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取服务注册发布组织贡献榜失败");
+        });
+    }, // 服务注册发布组织贡献榜
+    getHotApp(style = 1) {
+      this.$http
+        .get("/apaas/hubApi/operation/appContribution", {
+          params: { style },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.hotAppData = data.data.map((item, index) => ({
+              ...item,
+              hotIndex: index + 1,
+            }));
+          } else {
+            this.$message.error(data.errMsg || "获取应用构建组织贡献榜失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("获取应用构建组织贡献榜失败");
+        });
+    }, // 应用构建组织贡献榜
     changeAction1(val) {
       if (val === 0) {
         this.getServRequestRank("all");
@@ -300,20 +390,116 @@ export default {
         this.getServRequestRank("today");
       }
     }, // 切换 服务被调用次数排名
-    changeActions(val) {
+    changeAction2(val) {
       if (val === 0) {
         this.getDeployedNum(1);
       } else {
         this.getDeployedNum(2);
       }
     }, // 切换 应用被部署次数排名
+    changeAction3(val) {
+      if (val === 0) {
+        this.getServVolumeTrend(14);
+      } else {
+        this.getServVolumeTrend(30);
+      }
+    }, // 切换 组织服务及应用数量变化趋势
+    changeAction4(val) {
+      if (val === 0) {
+        this.getHotSevice("week");
+      } else {
+        this.getHotSevice("month");
+      }
+    }, // 切换 服务注册发布组织贡献榜
+    changeAction5(val) {
+      if (val === 0) {
+        this.getHotApp(1);
+      } else {
+        this.getHotApp(2);
+      }
+    }, // 切换 应用构建组织贡献榜
+    detailHotService(item) {
+      // console.log(item);
+    },
+    detailHotApp(item) {
+      // console.log(item);
+    },
   },
   created() {
+    this.hotSeviceHeader = [
+      {
+        label: "排名",
+        type: "hot-index-2",
+        width: 50,
+        align: "center",
+      },
+      {
+        label: "组织名称",
+        prop: "department_name",
+        type: "button",
+        callback: this.detailHotService,
+      },
+      {
+        label: "服务注册/发布数量",
+        prop: "serv_total",
+        width: 130,
+        align: "center",
+      },
+      {
+        label: "普通用户数量",
+        prop: "user_num",
+        width: 100,
+        align: "center",
+      },
+      {
+        label: "较前一周",
+        prop: "rate",
+        align: "center",
+        sortIcon: true,
+      },
+    ];
+    this.hotAppHeader = [
+      {
+        label: "排名",
+        type: "hot-index-2",
+        width: 50,
+        align: "center",
+      },
+      {
+        label: "组织名称",
+        prop: "department_name",
+        type: "button",
+        callback: this.detailHotApp,
+      },
+      {
+        label: "应用构建数量",
+        prop: "last_app",
+        width: 130,
+        align: "center",
+      },
+      {
+        label: "普通用户数量",
+        prop: "user_count",
+        width: 100,
+        align: "center",
+      },
+      {
+        label: "较前一周",
+        prop: "compare_last",
+        align: "right",
+        sortIcon: true,
+      },
+    ];
+
     this.init();
   },
 };
 </script>
+
 <style scoped>
+.apaas_scroll {
+  overflow: auto;
+}
 .in_block {
   height: 280px;
   padding: 10px;
@@ -358,3 +544,18 @@ export default {
   height: 230px;
 }
 </style>
+
+<style>
+.hot-search-table .el-table td,
+.hot-search-table .el-table th,
+.hot-search-table .el-table .row_action .btn {
+  padding: 6px 0;
+  font-size: 12px;
+}
+.hot-search-table .el-table div.row_action {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+</style>
-- 
2.26.0