From 54ffec7be94f90db0e337f61b9bb72f2bc2175fa Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Wed, 15 Jul 2020 15:22:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=BA=94=E7=94=A8=E6=A1=86?=
 =?UTF-8?q?=E6=9E=B6=EF=BC=8C=E6=9F=B1=E7=8A=B6=E5=9B=BE=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=EF=BC=8C=E6=9B=B2=E7=BA=BF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/e-charts/bar-chart.vue      |  14 +-
 src/components/e-charts/dashboard.vue      |   4 +-
 src/components/e-charts/graph.vue          | 131 +++++++++++
 src/pages/data-analysis/my-application.vue | 253 ++++++++++++++++++++-
 src/pages/data-analysis/my-service.vue     |  34 ++-
 5 files changed, 423 insertions(+), 13 deletions(-)
 create mode 100644 src/components/e-charts/graph.vue

diff --git a/src/components/e-charts/bar-chart.vue b/src/components/e-charts/bar-chart.vue
index 3f0f3bc..41b0656 100644
--- a/src/components/e-charts/bar-chart.vue
+++ b/src/components/e-charts/bar-chart.vue
@@ -12,7 +12,6 @@ export default {
         return {
           xaxis: [],
           data: []
-          
         };
       }
     },
@@ -37,14 +36,19 @@ export default {
       default: false
     }
   },
-  data: () => ({
-    navList: []
-  }),
+  data: () => ({}),
   mounted() {},
   methods: {
     bar() {
       let self = this;
       return {
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 25,
+          top: 25,
+          containLabel: true
+        },
         xAxis: [
           {
             type: "category",
@@ -57,7 +61,7 @@ export default {
               },
               interval: 0,
               rotate: 30,
-              formatter:  function(value) {
+              formatter: function(value) {
                 let valueTxt = "";
                 if (value.length > 6) {
                   valueTxt = value.substring(0, 5) + "...";
diff --git a/src/components/e-charts/dashboard.vue b/src/components/e-charts/dashboard.vue
index e18ac05..43e93c1 100644
--- a/src/components/e-charts/dashboard.vue
+++ b/src/components/e-charts/dashboard.vue
@@ -24,9 +24,7 @@ export default {
       default: false
     }
   },
-  data: () => ({
-    navList: []
-  }),
+  data: () => ({}),
   mounted() {},
   methods: {
     dashboard() {
diff --git a/src/components/e-charts/graph.vue b/src/components/e-charts/graph.vue
new file mode 100644
index 0000000..1c8c341
--- /dev/null
+++ b/src/components/e-charts/graph.vue
@@ -0,0 +1,131 @@
+<template>
+  <chart :options="graph()" class="graph" />
+</template>
+
+<script>
+import { graphic } from "echarts/lib/export";
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          xaxis: [],
+          data: [],
+          legend: []
+        };
+      }
+    }
+  },
+  data: () => ({
+    navList: []
+  }),
+  mounted() {},
+  methods: {
+    graph() {
+      let self = this;
+      return {
+        color: ["#274fee", "#ef9433"],
+        legend: {
+          bottom: 0,
+          left: "center",
+          icon: "roundRect",
+          itemWidth: 10,
+          itemHeight: 10,
+          data: self.data.legend,
+          orient: "horizontal",
+          backgroundColor: "#f4f7fc"
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 25,
+          top: 25,
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: self.data.xaxis,
+            axisLine: {
+              lineStyle: {
+                color: "#f2f2f2"
+              }
+            },
+            axisLabel: {
+              margin: 20,
+              color: "#0d1847",
+              textStyle: {
+                fontSize: 12
+              },
+              interval: 0
+            },
+            boundaryGap: false
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(0, 0, 0, 0)"
+              }
+            },
+            axisLabel: {
+              color: "#a9aec0",
+              textStyle: {
+                fontSize: 12
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: self.data.legend[0],
+            type: "line",
+            data: self.data.data[0],
+            symbolSize: 1,
+            symbol: "circle",
+            smooth: true,
+            yAxisIndex: 0,
+            showSymbol: false,
+            lineStyle: {
+              width: 2,
+              color: "#274fee",
+              shadowColor: "rgb(39, 79, 238, 0.3)",
+              shadowBlur: 5,
+              shadowOffsetY: 8
+            }
+          },
+          {
+            name: self.data.legend[1],
+            type: "line",
+            data: self.data.data[1],
+            symbolSize: 1,
+            symbol: "circle",
+            smooth: true,
+            yAxisIndex: 0,
+            showSymbol: false,
+            lineStyle: {
+              width: 2,
+              color: "#ef9433",
+              shadowColor: "rgb(239, 148, 51, 0.3)",
+              shadowBlur: 5,
+              shadowOffsetY: 8
+            }
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.graph {
+  width: 100%;
+  height: calc(100% - 20px);
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/data-analysis/my-application.vue b/src/pages/data-analysis/my-application.vue
index 2fc4f2c..a03e790 100644
--- a/src/pages/data-analysis/my-application.vue
+++ b/src/pages/data-analysis/my-application.vue
@@ -4,18 +4,265 @@
       <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
       <el-breadcrumb-item>{{ $t("lang.myApplicationDataAnalysis") }}</el-breadcrumb-item>
     </el-breadcrumb>
+    <el-row class="in_analysis">
+      <!-- 可横向铺满 -->
+      <el-col :span="6" class="in_left">
+        <el-row>
+          <el-col :span="24" class="in_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_num">2222</div>
+                </div>
+                <dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
+              </div>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务调用次数分析"
+              :buttons_arr="['近7天', '近30天']"
+              @changeButton="changeServiceCellBtn"
+              class="block"
+            >
+              <Graph :data="graph_arr" />
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务类型分析"
+              :buttons_arr="['发布的服务', '调用的服务']"
+              @changeButton="changeServiceTypeBtn"
+              class="block"
+            >
+              <multiple-circle :data="mult_data" :text="text"></multiple-circle>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12" class="in_center">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <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>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="in_right">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block">
+              <toplist></toplist>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block">
+              <starlist></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>
+          </el-col>
+        </el-row>
+      </el-col>
+      <!-- 不可横向铺满，一般为最后一行 -->
+      <el-col :span="6" class="in_block">
+        <block-radius :show_header="true" title="服务来源机构分析" class="block">
+          <BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
+        </block-radius>
+      </el-col>
+      <el-col :span="18" 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 Dashboard from "@/components/e-charts/dashboard";
+import multipleCircle from "@/components/e-charts/multiple_circle";
+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 BarChart from "@/components/e-charts/bar-chart";
+import Graph from "@/components/e-charts/graph";
 export default {
-  components: {},
+  components: {
+    BlockRadius,
+    Dashboard,
+    multipleCircle,
+    singleCircle,
+    Toplist,
+    Starlist,
+    lineChart,
+    BarChart,
+    Graph
+  },
   data: () => ({
-    navList: []
+    navList: [],
+    mult_data: [
+      { name: "基础工具", value: 40 },
+      { name: "通用应用", value: 0 },
+      { name: "业务应用", value: 2 }
+    ],
+    text: "应用总数",
+    single_data: {
+      num: 12,
+      color: "#515fe7",
+      text: "共享"
+    },
+    line_data: {
+      xaxis: [
+        "01-01",
+        "01-02",
+        "01-03",
+        "01-04",
+        "01-05",
+        "01-06",
+        "01-07",
+        "01-08"
+      ],
+      data: [
+        {
+          name: "开发者应用",
+          arr: [100, 120, 130, 150, 160, 120, 110, 100]
+        },
+        {
+          name: "平台应用",
+          arr: [120, 130, 140, 130, 140, 120, 100, 90]
+        },
+        {
+          name: "未上架",
+          arr: [80, 90, 100, 110, 100, 70, 80, 90]
+        }
+      ]
+    },
+    das_data: {
+      data: 40,
+      text: "健康占比"
+    },
+    bar_data_org: {
+      xaxis: [
+        "01-01",
+        "01-02",
+        "01-03",
+        "01-04",
+        "01-05",
+        "01-06",
+        "01-07",
+        "01-08"
+      ],
+      data: [100, 120, 130, 150, 160, 120, 110, 100]
+    },
+    graph_arr: {
+      xaxis: [
+        "01-01",
+        "01-02",
+        "01-03",
+        "01-04",
+        "01-05",
+        "01-06",
+        "01-07",
+        "01-08"
+      ],
+      data: [
+        [1010, 120, 130, 520, 160, 1120, 110, 100],
+        [100, 1210, 130, 1530, 160, 120, 110, 1200]
+      ],
+      legend: ["aaa1", "bbb1"]
+    }
   }),
   mounted() {},
-  methods: {}
+  methods: {
+    changeServiceTypeBtn(index) {
+      console.log(index);
+    },
+    changeApplicationFieldBtn(index) {
+      console.log(index);
+    },
+    changeServiceCellBtn(index) {
+      console.log(index);
+    }
+  }
 };
 </script>
 <style scoped>
+.in_analysis {
+  padding: 0 10px 10px;
+  height: 100%;
+  width: 100%;
+  min-width: 1700px;
+}
+.in_l {
+}
+.in_r {
+}
+.in_c {
+}
+.in_block {
+  height: 280px;
+  padding: 10px;
+}
+.height_2x {
+  height: 560px;
+}
+.block {
+  width: 100%;
+  height: 100%;
+}
+.left_1 {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.left_1_l {
+  width: 40%;
+  height: 100%;
+  display: inline-block;
+  padding: 20px 0 0 0;
+}
+.left_1_title {
+  width: 100%;
+  text-align: center;
+}
+.left_1_num {
+  font-size: 32px;
+  color: #515fe7;
+  width: 100%;
+  text-align: center;
+}
+.left_1_img {
+  width: 120px;
+  display: block;
+  margin: 0 auto;
+}
+.left_1_r {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+}
+.default {
+  text-align: center;
+}
+.default_img {
+  width: 330px;
+  height: 230px;
+}
 </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 3c64394..6909f71 100644
--- a/src/pages/data-analysis/my-service.vue
+++ b/src/pages/data-analysis/my-service.vue
@@ -70,7 +70,15 @@
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius
+              :show_header="true"
+              title="服务调用次数分析"
+              :buttons_arr="['近7天', '近30天']"
+              @changeButton="changeServiceCellBtn"
+              class="block"
+            >
+              <Graph :data="graph_arr" />
+            </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block">
@@ -108,6 +116,7 @@ import lineChart from "@/components/e-charts/line_chart";
 import Toplist from "@/components/e-charts/toplist";
 import Starlist from "@/components/e-charts/starlist";
 import BarChart from "@/components/e-charts/bar-chart";
+import Graph from "@/components/e-charts/graph";
 export default {
   components: {
     BlockRadius,
@@ -117,7 +126,8 @@ export default {
     Toplist,
     Starlist,
     lineChart,
-    BarChart
+    BarChart,
+    Graph
   },
   data: () => ({
     navList: [],
@@ -187,6 +197,23 @@ export default {
         "01-08"
       ],
       data: [100, 120, 130, 150, 160, 120, 110, 100]
+    },
+    graph_arr: {
+      xaxis: [
+        "01-01",
+        "01-02",
+        "01-03",
+        "01-04",
+        "01-05",
+        "01-06",
+        "01-07",
+        "01-08"
+      ],
+      data: [
+        [1010, 120, 130, 520, 160, 1120, 110, 100],
+        [100, 1210, 130, 1530, 160, 120, 110, 1200]
+      ],
+      legend: ["aaa1", "bbb1"]
     }
   }),
   mounted() {},
@@ -196,6 +223,9 @@ export default {
     },
     changeApplicationFieldBtn(index) {
       console.log(index);
+    },
+    changeServiceCellBtn(index) {
+      console.log(index);
     }
   }
 };
-- 
2.26.0