From 0a6d623ca7960ec085b53330962d407be9ff946a Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Wed, 15 Jul 2020 16:59:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=95=B0=E6=8D=AE=E5=88=86?=
 =?UTF-8?q?=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/data-analysis/my-application.vue | 199 +++++++++++++++++++--
 src/pages/data-analysis/my-service.vue     |  50 ++++--
 2 files changed, 214 insertions(+), 35 deletions(-)

diff --git a/src/pages/data-analysis/my-application.vue b/src/pages/data-analysis/my-application.vue
index a03e790..04b731f 100644
--- a/src/pages/data-analysis/my-application.vue
+++ b/src/pages/data-analysis/my-application.vue
@@ -9,11 +9,11 @@
       <el-col :span="6" class="in_left">
         <el-row>
           <el-col :span="24" class="in_block">
-            <block-radius :show_header="true" title="服务总体概况" class="block">
+            <block-radius :show_header="true" title="应用总体概况" class="block">
               <div class="left_1">
                 <div ref="left_1_l" class="left_1_l">
                   <img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
-                  <div class="left_1_title">服务总数</div>
+                  <div class="left_1_title">应用总数</div>
                   <div class="left_1_num">2222</div>
                 </div>
                 <dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
@@ -23,7 +23,7 @@
           <el-col :span="24" class="in_block">
             <block-radius
               :show_header="true"
-              title="服务调用次数分析"
+              title="应用调用次数分析"
               :buttons_arr="['近7天', '近30天']"
               @changeButton="changeServiceCellBtn"
               class="block"
@@ -34,12 +34,12 @@
           <el-col :span="24" class="in_block">
             <block-radius
               :show_header="true"
-              title="服务类型分析"
-              :buttons_arr="['发布的服务', '调用的服务']"
+              title="应用类型分析"
+              :buttons_arr="['发布的应用', '调用的应用']"
               @changeButton="changeServiceTypeBtn"
               class="block"
             >
-              <multiple-circle :data="mult_data" :text="text"></multiple-circle>
+              <multiple-circle class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
             </block-radius>
           </el-col>
         </el-row>
@@ -53,8 +53,14 @@
             <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <line-chart :data="line_data"></line-chart>
+            <block-radius 
+              class="block"
+              :show_header="true"
+              title="应用总数变化趋势"
+              :buttons_arr="['近14天', '近30天']"
+              @changeButton="changeAppTotalChangeBtn"
+            >
+              <line-chart class="block-radius-content" :data="line_data"></line-chart>
             </block-radius>
           </el-col>
         </el-row>
@@ -62,25 +68,55 @@
       <el-col :span="6" class="in_right">
         <el-row>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <toplist></toplist>
+            <block-radius
+              :show_header="true"
+              title="应用部署排名分析"
+              :buttons_arr="['被部署次数', '被部署次数']"
+              @changeButton="changeServeiceApplyCountBtn"
+              class="block"
+            >
+              <toplist
+                class="block-radius-content"
+                :options="toplistData"
+                :target-value="toplistTargetValue"
+              ></toplist>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <starlist></starlist>
+            <block-radius
+              :show_header="true"
+              title="应用评价及评分"
+              :buttons_arr="['应用评价', '应用评分']"
+              @changeButton="changeAppInfoBtn"
+              class="block"
+            >
+              <commentlist
+                v-if="appInfoBtnIndex == 0"
+                class="block-radius-content"
+                :data="commentlistData"
+              ></commentlist>
+              <starlist 
+                v-else 
+                class="block-radius-content" 
+                :options="starlistData" 
+                style="margin-top: 30px;height: calc(100% - 51px);"
+              ></starlist>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <single-circle :data="single_data"></single-circle>
+            <block-radius 
+              class="block"
+              :show_header="true"
+              title="应用在线区域统计"
+            >
+              <single-circle class="block-radius-content" :data="single_data"></single-circle>
             </block-radius>
           </el-col>
         </el-row>
       </el-col>
       <!-- 不可横向铺满，一般为最后一行 -->
       <el-col :span="6" class="in_block">
-        <block-radius :show_header="true" title="服务来源机构分析" class="block">
+        <block-radius :show_header="true" title="应用来源机构分析" class="block">
           <BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
         </block-radius>
       </el-col>
@@ -101,6 +137,7 @@ import singleCircle from "@/components/e-charts/single_circle";
 import lineChart from "@/components/e-charts/line_chart";
 import Toplist from "@/components/e-charts/toplist";
 import Starlist from "@/components/e-charts/starlist";
+import Commentlist from "@/components/e-charts/commentlist";
 import BarChart from "@/components/e-charts/bar-chart";
 import Graph from "@/components/e-charts/graph";
 export default {
@@ -111,6 +148,7 @@ export default {
     singleCircle,
     Toplist,
     Starlist,
+    Commentlist,
     lineChart,
     BarChart,
     Graph
@@ -187,18 +225,137 @@ export default {
         [100, 1210, 130, 1530, 160, 120, 110, 1200]
       ],
       legend: ["aaa1", "bbb1"]
-    }
+    },
+    toplistData: [
+      {
+        name: "报警应用",
+        value: 2031,
+        logo:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        unit: "次"
+      },
+      {
+        name: "数据应用",
+        value: 2201,
+        logo:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        unit: "次"
+      },
+      {
+        name: "消息队列应用",
+        value: 1901,
+        logo:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        unit: "次"
+      },
+      {
+        name: "档案中心应用",
+        value: 1400,
+        logo:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        unit: "次"
+      },
+      {
+        name: "哈哈应用",
+        value: 1280,
+        logo:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        unit: "次"
+      }
+    ], // 应用部署排名分析
+    toplistTargetValue: 2400, // 应用部署排名分析 目标值
+    appInfoBtnIndex: 0,
+    commentlistData: [
+      {
+        add_time: "2020-07-14T16:35:40Z",
+        content: "1111111111111111",
+        id: 36,
+        picture_path:
+          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
+        score: 5,
+        service_id: 128,
+        user_name: "普通用户lxy"
+      },
+      {
+        add_time: "2020-07-14T16:35:40Z",
+        content: "1111111111111111",
+        id: 36,
+        picture_path:
+          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
+        score: 4,
+        service_id: 128,
+        user_name: "普通用户lxy"
+      },
+      {
+        add_time: "2020-07-14T16:35:40Z",
+        content: "1111111111111111",
+        id: 36,
+        picture_path:
+          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
+        score: 3,
+        service_id: 128,
+        user_name: "普通用户lxy"
+      },
+      {
+        add_time: "2020-07-14T16:35:40Z",
+        content: "1111111111111111",
+        id: 36,
+        picture_path:
+          "/apaas/static/docs/image/image/blob_cb30e7a3-3184-42dd-9e2f-7e6b69accb0c.blob",
+        score: 2,
+        service_id: 128,
+        user_name: "普通用户lxy"
+      }
+    ], // 应用评价
+    starlistData: [
+      {
+        star: 5,
+        count: 5,
+        unit: "个"
+      },
+      {
+        star: 4,
+        count: 4,
+        unit: "个"
+      },
+      {
+        star: 3,
+        count: 3,
+        unit: "个"
+      },
+      {
+        star: 2,
+        count: 10002,
+        unit: "个"
+      },
+      {
+        star: 1,
+        count: 1,
+        unit: "个"
+      }
+    ], // 应用评分
   }),
   mounted() {},
   methods: {
     changeServiceTypeBtn(index) {
-      console.log(index);
+      console.log("应用类型分析: " + index);
     },
     changeApplicationFieldBtn(index) {
-      console.log(index);
+      console.log("xxx: " + index);
     },
     changeServiceCellBtn(index) {
-      console.log(index);
+      console.log("应用调用次数分析: " + index);
+    },
+    changeServeiceApplyCountBtn(index) {
+      console.log("应用部署排名分析: " + index);
+    },
+    changeAppInfoBtn(index) {
+      this.appInfoBtnIndex = index;
+
+      console.log("应用评价及评分: " + index);
+    },
+    changeAppTotalChangeBtn(index) {
+      console.log("应用总数变化趋势: " + index);
     }
   }
 };
@@ -265,4 +422,8 @@ export default {
   width: 330px;
   height: 230px;
 }
+.block-radius-content {
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue
index 48cfabf..d8c9873 100644
--- a/src/pages/data-analysis/my-service.vue
+++ b/src/pages/data-analysis/my-service.vue
@@ -39,7 +39,7 @@
               @changeButton="changeServiceTypeBtn"
               class="block"
             >
-              <multiple-circle :data="mult_data" :text="text"></multiple-circle>
+              <multiple-circle  class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
@@ -84,7 +84,7 @@
                 <div class="right-content">
                   <apass-table 
                     class="hot-search-table" 
-                    :header="hotSearchHeader" 
+                    :header="hotSearchHeader"
                     :data="hotSearchData" 
                     :padding-left="0" 
                     @sort-change="hotSearchSortChange"
@@ -94,8 +94,14 @@
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <line-chart :data="line_data"></line-chart>
+            <block-radius 
+              class="block" 
+              :show_header="true"
+              title="服务总数变化趋势"
+              :buttons_arr="['近14天', '近30天']"
+              @changeButton="changeServeiceTotalChangeBtn"
+            >
+              <line-chart class="block-radius-content" :data="line_data"></line-chart>
             </block-radius>
           </el-col>
         </el-row>
@@ -129,8 +135,14 @@
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <single-circle :data="single_data"></single-circle>
+            <block-radius 
+              :show_header="true"
+              title="服务开放程度统计"
+              :buttons_arr="['发布的服务', '调用的服务']"
+              @changeButton="changeOpenessBtnindex"
+              class="block"
+            >
+              <single-circle class="block-radius-content" :data="single_data"></single-circle>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
@@ -179,7 +191,7 @@ import singleCircle from "@/components/e-charts/single_circle";
 import lineChart from "@/components/e-charts/line_chart";
 import Toplist from "@/components/e-charts/toplist";
 import Starlist from "@/components/e-charts/starlist";
-import commentlist from "@/components/e-charts/commentlist";
+import Commentlist from "@/components/e-charts/commentlist";
 import BarChart from "@/components/e-charts/bar-chart";
 import ApassTable from "@/components/apass-table";
 import Graph from "@/components/e-charts/graph";
@@ -190,7 +202,7 @@ export default {
     multipleCircle,
     singleCircle,
     Toplist,
-    commentlist,
+    Commentlist,
     Starlist,
     lineChart,
     BarChart,
@@ -460,24 +472,30 @@ export default {
       console.log("查看热搜详情");
     },
     hotSearchSortChange(sortInfo) {
-      console.log(sortInfo);
+      console.log("服务热门搜索: " + sortInfo);
     },
     changeServiceTypeBtn(index) {
-      console.log(index);
+      console.log("服务类型分析:" + index);
     },
     changeApplicationFieldBtn(index) {
-      console.log(index);
+      console.log("服务应用领域统计: " + index);
     },
     changeServeiceApplyCountBtn(index) {
-      console.log(index);
-    }, // 服务调用排名分析
+      console.log("服务调用排名分析: " + index);
+    },
     changeServeiceInfoBtn(index) {
       this.serveiceInfoBtnIndex = index;
 
-      console.log(index);
-    }, // 服务评价及评分
+      console.log("服务评价及评分: " + index);
+    },
+    changeOpenessBtnindex(index) {
+      console.log("服务开放程度统计: " + index);
+    },
     changeServiceCellBtn(index) {
-      console.log(index);
+      console.log("服务调用次数分析: " + index);
+    },
+    changeServeiceTotalChangeBtn(index) {
+      console.log("服务总数变化趋势: " + index);
     }
   }
 };
-- 
2.26.0