From 32d3c922e4b30290d23fe1798d1363c0e6961a43 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Wed, 26 Aug 2020 14:11:03 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E7=BB=87=E8=BF=90=E8=A1=8C=E6=A6=82?=
 =?UTF-8?q?=E5=86=B5=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/e-charts/bar-chart.vue         |  99 ++++---
 src/components/e-charts/commentlist.vue       |  48 +++-
 src/components/e-charts/the-list.vue          |  17 +-
 src/components/e-charts/toplist.vue           |  66 +++--
 .../data-analysis/operation-overview.vue      | 260 +++++++-----------
 5 files changed, 245 insertions(+), 245 deletions(-)

diff --git a/src/components/e-charts/bar-chart.vue b/src/components/e-charts/bar-chart.vue
index 2400096..20e77de 100644
--- a/src/components/e-charts/bar-chart.vue
+++ b/src/components/e-charts/bar-chart.vue
@@ -11,40 +11,45 @@ export default {
       default: () => {
         return {
           legendData: [],
-          seriesData: []
+          seriesData: [],
         };
-      }
+      },
     },
     bar_width: {
       type: Number,
-      default: 12
+      default: 12,
     },
     colors: {
       type: Array,
       default: () => {
         return ["#274fee", "#274fee"];
-      }
+      },
     },
     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,
+    },
+    xAxis_text_length: {
+      type: Number,
+      default: 0,
+    },
   },
   data: () => ({}),
   mounted() {},
   methods: {
     bar() {
       let self = this;
+
       return {
         tooltip: {
           trigger: "axis",
@@ -55,14 +60,14 @@ export default {
               htmlStr += params[i].value;
             }
             return htmlStr;
-          }
+          },
         },
         grid: {
           left: 10,
           right: 10,
           bottom: 25,
           top: 25,
-          containLabel: true
+          containLabel: true,
         },
         xAxis: [
           {
@@ -72,65 +77,71 @@ export default {
               margin: 20,
               color: "#0d1847",
               textStyle: {
-                fontSize: 12
+                fontSize: 12,
               },
               interval: 0,
               rotate: self.x_router,
-              /* formatter: function(value) {
-                let valueTxt = "";
-                if (value.length > 6) {
-                  valueTxt = value.substring(0, 5) + "...";
+              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: {
-                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",
             },
-          }
+          },
         ],
         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",
+              },
+            },
+          },
         ],
         series: [
           {
@@ -148,24 +159,24 @@ export default {
                     [
                       {
                         offset: 0,
-                        color: self.colors[0] // 0% 处的颜色
+                        color: self.colors[0], // 0% 处的颜色
                       },
                       {
                         offset: 1,
-                        color: self.colors[1] // 100% 处的颜色
-                      }
+                        color: self.colors[1], // 100% 处的颜色
+                      },
                     ],
                     false
                   );
                 },
-                barBorderRadius: self.bar_border_radius
-              }
-            }
-          }
-        ]
+                barBorderRadius: self.bar_border_radius,
+              },
+            },
+          },
+        ],
       };
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
@@ -173,4 +184,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/e-charts/commentlist.vue b/src/components/e-charts/commentlist.vue
index 47cff06..cadc72f 100644
--- a/src/components/e-charts/commentlist.vue
+++ b/src/components/e-charts/commentlist.vue
@@ -1,13 +1,27 @@
 <template>
   <ul class="comments_list apaas_scroll">
-    <li class="comment_card" v-for="(item, index) in data" :key="'comment_' + index">
+    <li
+      class="comment_card"
+      v-for="(item, index) in data"
+      :key="'comment_' + index"
+    >
       <div class="comment-left">
-        <el-avatar :size="45" fit="cover" :src="item.picture_path || require('../../assets/imgs/img_head.png')" />
+        <el-avatar
+          :size="45"
+          fit="cover"
+          :src="item.picture_path || require('../../assets/imgs/img_head.png')"
+        />
       </div>
       <div class="comment-right">
         <p class="comment-base">
-          <span class="comment-user_name text_clip" v-text="item.user_name"></span>
-          <span class="comment-time text_clip" v-text="getTimeText(item.add_time || '')"></span>
+          <span
+            class="comment-user_name text_clip"
+            v-text="item.user_name"
+          ></span>
+          <span
+            class="comment-time text_clip"
+            v-text="getTimeText(item.add_time || '')"
+          ></span>
         </p>
         <div class="commnet-rate">
           <el-rate
@@ -30,8 +44,16 @@ export default {
   props: {
     data: {
       type: Array,
-      required: true
-    }
+      required: true,
+    },
+  },
+  watch: {
+    data: {
+      handler() {
+        this.autoScroll();
+      },
+      deep: true,
+    },
   },
   methods: {
     getTimeText(time) {
@@ -48,11 +70,17 @@ export default {
         let itemHeight = 77;
         let curScrollTop = this.$el.scrollTop + itemHeight;
 
-        if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) {
+        if (
+          curScrollTop >=
+          this.$el.scrollHeight - this.$el.clientHeight + itemHeight
+        ) {
           curScrollTop = 0;
         }
 
-        this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight);
+        this.$el.scrollTop = Math.min(
+          curScrollTop,
+          this.$el.scrollHeight - this.$el.clientHeight
+        );
       }, 1500);
     },
     mouseenter() {
@@ -62,7 +90,7 @@ export default {
     },
     mouseleave() {
       this.autoScroll();
-    }
+    },
   },
   mounted() {
     this.autoScroll();
@@ -74,7 +102,7 @@ export default {
     if (this.timer) {
       clearInterval(this.timer);
     }
-  }
+  },
 };
 </script>
 
diff --git a/src/components/e-charts/the-list.vue b/src/components/e-charts/the-list.vue
index fccd403..1f120f7 100644
--- a/src/components/e-charts/the-list.vue
+++ b/src/components/e-charts/the-list.vue
@@ -14,12 +14,12 @@
         >
           {{ idx + 1 }}.
         </span>
-        <img :src="item.img" />
+        <img :src="item.PicturePath || require('../../assets/imgs/img_head.png')" />
         <p class="text_clip">
-          <span class="name">{{ item.name }}</span><br>
-          <span class="init">{{ item.init }}</span>
+          <span class="name">{{ item.UserName }}</span><br>
+          <span class="init">{{ item.SystemName }}</span>
         </p>
-        <span class="count">{{ getCount(item.count) }}次</span>
+        <span class="count">{{ getCount(item.Count) }}次</span>
       </li>
     </ul>
   </div>
@@ -35,8 +35,13 @@ export default {
       },
     },
   },
-  data() {
-    return {};
+  watch: {
+    data: {
+      handler() {
+        this.autoScroll();
+      },
+      deep: true,
+    },
   },
   methods: {
     getCount(val) {
diff --git a/src/components/e-charts/toplist.vue b/src/components/e-charts/toplist.vue
index 0735abd..289028d 100644
--- a/src/components/e-charts/toplist.vue
+++ b/src/components/e-charts/toplist.vue
@@ -1,12 +1,21 @@
 <template>
-  <div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
+  <div
+    class="top_list apaas_scroll"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+  >
     <ul>
       <li class="item_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" fit="cover" :src="option.cover" />
+          <el-avatar
+            shape="square"
+            :size="28"
+            fit="cover"
+            :src="option.cover"
+          />
         </div>
         <div class="item_detail">
           <p class="item_info">
@@ -20,7 +29,13 @@
             </span>
             <span v-else>{{ option.service_name }}</span>
             <span
-              v-text="isPercent?((option.request_count/targetValue)*100).toFixed(2)+'%':helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
+              v-text="
+                isPercent
+                  ? ((option.request_count / targetValue) * 100).toFixed(2) +
+                    '%'
+                  : helper.numberFormat(option.request_count, 2) +
+                    (option.request_count > 10000 ? '万次' : '次')
+              "
             ></span>
           </p>
           <el-progress
@@ -41,31 +56,34 @@ export default {
   props: {
     options: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     targetValue: {
       type: Number,
-      default: () => 0
+      default: () => 0,
     },
-    isShowjt:{
-      type:Boolean,
-      default:true
+    isShowjt: {
+      type: Boolean,
+      default: true,
+    },
+    isPercent: {
+      type: Boolean,
+      default: false,
     },
-    isPercent:{
-      type:Boolean,
-      default:false
-    }
   },
   data() {
     return {
       timer: null,
-      helper
+      helper,
     };
   },
   watch: {
-    text() {
-      this.autoScroll();
-    }
+    options: {
+      handler() {
+        this.autoScroll();
+      },
+      deep: true,
+    },
   },
   methods: {
     getPercent(value) {
@@ -85,10 +103,16 @@ export default {
       this.timer = setInterval(() => {
         let itemHeight = 50;
         let curScrollTop = this.$el.scrollTop + itemHeight;
-        if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) {
+        if (
+          curScrollTop >=
+          this.$el.scrollHeight - this.$el.clientHeight + itemHeight
+        ) {
           curScrollTop = 0;
         }
-        this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight);
+        this.$el.scrollTop = Math.min(
+          curScrollTop,
+          this.$el.scrollHeight - this.$el.clientHeight
+        );
       }, 1500);
     },
     mouseenter() {
@@ -116,11 +140,11 @@ export default {
         default:
           this.$message({
             message: "查看详情失败",
-            type: "warning"
+            type: "warning",
           });
           break;
       }
-    }
+    },
   },
   mounted() {
     this.autoScroll();
@@ -132,7 +156,7 @@ export default {
     if (this.timer) {
       clearInterval(this.timer);
     }
-  }
+  },
 };
 </script>
 
diff --git a/src/pages/data-analysis/operation-overview.vue b/src/pages/data-analysis/operation-overview.vue
index f97de8c..b0c4953 100644
--- a/src/pages/data-analysis/operation-overview.vue
+++ b/src/pages/data-analysis/operation-overview.vue
@@ -53,12 +53,12 @@
           <el-col :span="24" class="in_block">
             <block-radius
               :show_header="true"
-              title="服务状态统计"
+              title="组织服务及应用数量变化趋势"
               class="block"
             >
               <line-chart
                 class="block-radius-content"
-                :data="line_data"
+                :data="servVolumeTrend"
                 :zzfw="true"
               ></line-chart>
             </block-radius>
@@ -83,11 +83,12 @@
               title="应用构建数量排名"
             >
               <BarChart
-                :data="bar_data_area"
+                :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>
@@ -106,7 +107,7 @@
               <toplist
                 class="block-radius-content"
                 :options="servRequestRank"
-                :target-value="1000"
+                :target-value="servRequestRankMax"
                 :isShowjt="false"
               ></toplist>
             </block-radius>
@@ -119,7 +120,10 @@
               :buttons_arr="['累计', '今日']"
               @changeButton="changeActions"
             >
-              <the-list :data="bsData" class="block-radius-content"></the-list>
+              <the-list
+                :data="deployedNum"
+                class="block-radius-content"
+              ></the-list>
             </block-radius>
           </el-col>
         </el-row>
@@ -157,90 +161,38 @@ export default {
   },
   data() {
     return {
-      baseinfo: {},
-      servRegRank: {},
-      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],
-          },
-        ],
-      },
-      bar_data_area: {
-        legendData: [
-          "全程执法精细123",
-          "智能执法场所123",
-          "大数智能应用222",
-          "刑事案件智能1111",
-        ],
-        seriesData: [50, 63, 48, 58],
-      },
-      servRequestRank: [
-        {
-          cover:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          service_name: "postgresql V11.1",
-          request_count: 300,
-        },
-      ],
-      bsData: [
-        {
-          name: "警综平台",
-          init: "贵州省公安厅警务综合系统",
-          count: 120,
-          img:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        },
-        {
-          name: "警综平台",
-          init: "贵州省公安厅警务综合系统",
-          count: 100,
-          img:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        },
-        {
-          name: "警综平台",
-          init: "贵州省公安厅警务综合系统",
-          count: 90,
-          img:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        },
-        {
-          name: "警综平台",
-          init: "贵州省公安厅警务综合系统",
-          count: 80,
-          img:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        },
-        {
-          name: "警综平台",
-          init: "贵州省公安厅警务综合系统",
-          count: 60,
-          img:
-            "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-        },
-      ],
+      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
@@ -253,10 +205,10 @@ export default {
           }
         })
         .catch((error) => {
-          console.log("error");
+          console.log(error);
           this.$message.error("获取组织用户概况失败");
         });
-    },
+    }, // 获取 组织用户概况
     getServRegRank() {
       this.$http
         .get("/apaas/service/v3/control/org/serv/reg/rank")
@@ -268,10 +220,10 @@ export default {
           }
         })
         .catch((error) => {
-          console.log("error");
+          console.log(error);
           this.$message.error("获取服务注册发布数量排名失败");
         });
-    },
+    }, // 获取 服务注册发布数量排名
     getServRequestRank(tab = "all") {
       this.$http
         .get("/apaas/service/v3/control/org/serv/request/rank", {
@@ -285,96 +237,76 @@ export default {
           }
         })
         .catch((error) => {
-          console.log("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.bsData = [
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 120,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 100,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 90,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 80,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 60,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-        ];
+        this.getDeployedNum(1);
       } else {
-        this.bsData = [
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 12,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 10,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 9,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 8,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-          {
-            name: "警综平台",
-            init: "贵州省公安厅警务综合系统",
-            count: 6,
-            img:
-              "/apaas/static/docs/image/image/blob_206e8a81-6698-4946-9988-815d345f7f2f.blob",
-          },
-        ];
+        this.getDeployedNum(2);
       }
-    },
+    }, // 切换 应用被部署次数排名
   },
   created() {
     this.init();
-- 
2.26.0