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

---
 .../{bar-chartTwo.vue => bar-chart-two.vue}   | 123 ++++---
 src/components/e-charts/bar-chart.vue         |  18 +-
 src/components/e-charts/the-list.vue          |   2 +-
 .../data-analysis/operation-overview.vue      | 339 +++++-------------
 4 files changed, 170 insertions(+), 312 deletions(-)
 rename src/components/e-charts/{bar-chartTwo.vue => bar-chart-two.vue} (63%)

diff --git a/src/components/e-charts/bar-chartTwo.vue b/src/components/e-charts/bar-chart-two.vue
similarity index 63%
rename from src/components/e-charts/bar-chartTwo.vue
rename to src/components/e-charts/bar-chart-two.vue
index 72dc575..0b13e2b 100644
--- a/src/components/e-charts/bar-chartTwo.vue
+++ b/src/components/e-charts/bar-chart-two.vue
@@ -7,73 +7,72 @@ import { graphic } from "echarts/lib/export";
 export default {
   props: {
     data: {
-      type: Array,
+      type: Object,
       default: () => {
-        return [];
-      }
+        return null;
+      },
     },
     bar_width: {
       type: Number,
-      default: 12
+      default: 12,
     },
     colors: {
       type: Array,
       default: () => {
         return ["#515fe7", "#e56600"];
-      }
+      },
     },
     bar_border_radius: {
       type: Array,
       default: () => {
         return [10, 10, 10, 10];
-      }
+      },
     },
     show_split: {
       type: Boolean,
-      default: false
+      default: false,
     },
     x_router: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   },
-  data: () => ({}),
-  mounted() {},
   methods: {
     bar() {
-      let self = this;
+      let _self = this;
+      let xAxis = (_self.data && _self.data.xAxis) || [];
+      let series = (_self.data && _self.data.series) || [{}, {}];
+
       return {
         grid: {
           left: 10,
           right: 10,
           bottom: 25,
           top: 25,
-          containLabel: true
+          containLabel: true,
         },
         legend: {
           left: "right",
           itemWidth: 10,
           itemHeight: 10,
           orient: "horizontal",
-          backgroundColor: "#f4f7fc"
+          backgroundColor: "#f4f7fc",
+          data: series.map((item) => item.name),
         },
-        color: this.colors,
-        tooltip: {},
-        dataset: {
-          source: self.data
+        tooltip: {
+          trigger: "axis",
         },
         xAxis: {
           type: "category",
-          //   data: self.data.legendData,
           axisLabel: {
             margin: 20,
             color: "#0d1847",
             textStyle: {
-              fontSize: 12
+              fontSize: 12,
             },
             interval: 0,
-            rotate: self.x_router,
-            formatter: function(value) {
+            rotate: _self.x_router,
+            /* formatter: function(value) {
               let valueTxt = "";
               if (value.length > 6) {
                 valueTxt = value.substring(0, 5) + "...";
@@ -81,57 +80,59 @@ export default {
                 valueTxt = value;
               }
               return valueTxt;
-            }
+            }, */
           },
           axisLine: {
             lineStyle: {
-              color: "#f2f2f2"
-            }
+              color: "#f2f2f2",
+            },
           },
           axisTick: {
-            show: false
+            show: false,
           },
           splitArea: {
             show: true,
             areaStyle: {
               color: ["#fff", "#f8f9fd"],
-              opacity: 0.5
+              opacity: 0.5,
             },
-            interval: 0
-          }
+            interval: 0,
+          },
+          axisPointer: {
+            type: "shadow",
+          },
+          data: xAxis,
         },
         yAxis: [
           {
             axisLabel: {
               color: "#a9aec0",
               textStyle: {
-                fontSize: 12
-              }
+                fontSize: 12,
+              },
             },
             minInterval: 1,
             axisLine: {
               lineStyle: {
-                color: "rgba(0, 0, 0, 0)"
-              }
+                color: "rgba(0, 0, 0, 0)",
+              },
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
               lineStyle: {
                 color: "#f2f2f2",
-                type: "solid"
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         ],
-        // Declare several bar series, each will be mapped
-        // to a column of dataset.source by default.
         series: [
           {
             type: "bar",
             type: "bar",
-            barWidth: self.bar_width,
+            barWidth: _self.bar_width,
             itemStyle: {
               normal: {
                 color: function(params) {
@@ -143,24 +144,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,
+              },
+            },
+            name: series[0].name,
+            data: series[0].data,
           },
           {
             type: "bar",
             type: "bar",
-            barWidth: self.bar_width,
+            barWidth: _self.bar_width,
             itemStyle: {
               normal: {
                 color: function(params) {
@@ -172,24 +175,26 @@ 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,
+            data: series[1].data,
+          },
+        ],
       };
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
@@ -197,4 +202,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/e-charts/bar-chart.vue b/src/components/e-charts/bar-chart.vue
index 1a9efdb..2400096 100644
--- a/src/components/e-charts/bar-chart.vue
+++ b/src/components/e-charts/bar-chart.vue
@@ -46,6 +46,17 @@ export default {
     bar() {
       let self = this;
       return {
+        tooltip: {
+          trigger: "axis",
+          formatter: function(params) {
+            var htmlStr = "";
+            for (var i = 0; i < params.length; i++) {
+              htmlStr += params[i].name + " : ";
+              htmlStr += params[i].value;
+            }
+            return htmlStr;
+          }
+        },
         grid: {
           left: 10,
           right: 10,
@@ -65,7 +76,7 @@ export default {
               },
               interval: 0,
               rotate: self.x_router,
-              formatter: function(value) {
+              /* formatter: function(value) {
                 let valueTxt = "";
                 if (value.length > 6) {
                   valueTxt = value.substring(0, 5) + "...";
@@ -73,7 +84,7 @@ export default {
                   valueTxt = value;
                 }
                 return valueTxt;
-              }
+              } */
             },
             axisLine: {
               lineStyle: {
@@ -91,6 +102,9 @@ export default {
               },
               interval: 0
             },
+            axisPointer: {
+              type: "shadow",
+            },
           }
         ],
         yAxis: [
diff --git a/src/components/e-charts/the-list.vue b/src/components/e-charts/the-list.vue
index e714b23..fccd403 100644
--- a/src/components/e-charts/the-list.vue
+++ b/src/components/e-charts/the-list.vue
@@ -56,7 +56,7 @@ export default {
       this.$el.scrollTop = 0;
 
       this.timer = setInterval(() => {
-        let itemHeight = 50;
+        let itemHeight = 60;
         let curScrollTop = this.$el.scrollTop + itemHeight;
         if (
           curScrollTop >=
diff --git a/src/pages/data-analysis/operation-overview.vue b/src/pages/data-analysis/operation-overview.vue
index 19dbf16..f97de8c 100644
--- a/src/pages/data-analysis/operation-overview.vue
+++ b/src/pages/data-analysis/operation-overview.vue
@@ -21,28 +21,31 @@
                 <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">58</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">24</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">268</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">78</p>
+                  <p class="right_txt_2" v-text="baseinfo.app_num || 0"></p>
                 </div>
               </div>
             </block-radius>
@@ -53,7 +56,11 @@
               title="服务状态统计"
               class="block"
             >
-              <line-chart :data="line_data" :zzfw="true"></line-chart>
+              <line-chart
+                class="block-radius-content"
+                :data="line_data"
+                :zzfw="true"
+              ></line-chart>
             </block-radius>
           </el-col>
         </el-row>
@@ -66,7 +73,7 @@
               title="服务注册发布数量排名"
               class="block"
             >
-              <bar-charttwo :data="barData"></bar-charttwo>
+              <bar-charttwo :data="servRegRank"></bar-charttwo>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
@@ -94,12 +101,12 @@
               title="服务被调用次数排名"
               class="block"
               :buttons_arr="['累计', '今日']"
-              @changeButton="changeServeiceNumBtn"
+              @changeButton="changeAction1"
             >
               <toplist
                 class="block-radius-content"
-                :options="toplistData"
-                :target-value="toplistTargetValue"
+                :options="servRequestRank"
+                :target-value="1000"
                 :isShowjt="false"
               ></toplist>
             </block-radius>
@@ -110,7 +117,7 @@
               title="应用被部署次数排名"
               class="block"
               :buttons_arr="['累计', '今日']"
-              @changeButton="changeBsNumBtn"
+              @changeButton="changeActions"
             >
               <the-list :data="bsData" class="block-radius-content"></the-list>
             </block-radius>
@@ -134,21 +141,24 @@
 <script>
 import BlockRadius from "@/components/general/block-radius";
 import lineChart from "@/components/e-charts/line_chart";
-import BarCharttwo from "@/components/e-charts/bar-chartTwo";
+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 {
-      barData: [
-        ["product", "服务注册数量", "服务发布数量"],
-        ["全程执法精细123", 43.3, 85.8],
-        ["智能执法场所123", 83.1, 73.4],
-        ["大数智能应用222", 86.4, 65.2],
-        ["刑事案件智能1111", 72.4, 53.9],
-      ],
+      baseinfo: {},
+      servRegRank: {},
       line_data: {
         xAxisData: [
           "08-01",
@@ -179,83 +189,14 @@ export default {
         ],
         seriesData: [50, 63, 48, 58],
       },
-      toplistData: [
+      servRequestRank: [
         {
           cover:
             "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
           service_name: "postgresql V11.1",
           request_count: 300,
         },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "钉钉 V1.0",
-          request_count: 220,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "易智瑞 V11.3",
-          request_count: 210,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 180,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 150,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 120,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 100,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 80,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 60,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 50,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 40,
-        },
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "CAS单点登录 V1.0",
-          request_count: 20,
-        },
-      ], // 服务调用次数排名
-      toplistTargetValue: 400, // 服务调用次数排名 目标值
-      serveiceNum: "",
-      bsNum: "",
+      ],
       bsData: [
         {
           name: "警综平台",
@@ -295,172 +236,67 @@ export default {
       ],
     };
   },
-  components: {
-    BlockRadius,
-    lineChart,
-    BarCharttwo,
-    BarChart,
-    Toplist,
-    theList,
-  },
   methods: {
-    getData() {},
-    //服务调用排名切换
-    changeServeiceNumBtn(val) {
+    init() {
+      this.getBaseInfo();
+      this.getServRegRank();
+      this.getServRequestRank();
+    },
+    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("获取服务被调用次数排名失败");
+        });
+    },
+    changeAction1(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: 300,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "钉钉 V1.0",
-            request_count: 220,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "易智瑞 V11.3",
-            request_count: 210,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 180,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 150,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 120,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 100,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 80,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 60,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 50,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "postgresql V11.1",
-            request_count: 40,
-          },
-          {
-            cover:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-            service_name: "CAS单点登录 V1.0",
-            request_count: 20,
-          },
-        ];
+        this.getServRequestRank("all");
       } else {
-        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,
-          },
-        ];
+        this.getServRequestRank("today");
       }
     },
-    //部署次数排名
-    changeBsNumBtn(val) {
+    changeActions(val) {
       if (val === 0) {
         this.bsData = [
           {
@@ -540,6 +376,9 @@ export default {
       }
     },
   },
+  created() {
+    this.init();
+  },
 };
 </script>
 <style scoped>
-- 
2.26.0