From cd75137debe00f2b188835e4e5f4e7b6d2562461 Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Wed, 15 Jul 2020 19:11:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B0=B4=E7=90=83=E5=9B=BE=EF=BC=8C=E6=8B=93?=
 =?UTF-8?q?=E6=89=91=E5=9B=BE=E3=80=81=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=8A=98?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E4=BF=AE=E6=94=B9=EF=BC=8C=E5=88=86=E9=85=8D?=
 =?UTF-8?q?=E4=BC=A0=E5=8F=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |   1 +
 src/components/allot-info-confirm.vue      |   3 +-
 src/components/e-charts/bar-chart.vue      |   8 +-
 src/components/e-charts/graph.vue          |   8 +-
 src/components/e-charts/water-polo.vue     | 176 +++++++++++++++++++++
 src/components/topology.vue                |   2 +-
 src/main.js                                |   3 +
 src/pages/data-analysis/my-application.vue | 113 ++++++++++---
 src/pages/data-analysis/my-service.vue     |  29 +++-
 src/pages/user/order/order_list.vue        |   1 -
 yarn.lock                                  |  27 ++++
 11 files changed, 330 insertions(+), 41 deletions(-)
 create mode 100644 src/components/e-charts/water-polo.vue

diff --git a/package.json b/package.json
index 6742000..1660aed 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "babel-polyfill": "^6.26.0",
     "codemirror": "^5.45.0",
     "echarts": "^4.8.0",
+    "echarts-liquidfill": "^2.0.6",
     "element-ui": "^2.11.1",
     "js-yaml": "^3.13.1",
     "json2yaml": "^1.1.0",
diff --git a/src/components/allot-info-confirm.vue b/src/components/allot-info-confirm.vue
index 003cd0b..2de4b37 100644
--- a/src/components/allot-info-confirm.vue
+++ b/src/components/allot-info-confirm.vue
@@ -110,7 +110,7 @@ export default {
       this.$http
         .get("/apaas/service/v3/resource/apply/distributionDisplay", {
           params: {
-            apply_id: apply_id,
+            apply_id: apply_id
           },
         })
         .then(({ data }) => {
@@ -146,6 +146,7 @@ export default {
           params: {
             id: this.detail.id,
             user_id: this.detail.user_id,
+            namespace: this.detail.namespace
           },
         })
         .then(({ data }) => {
diff --git a/src/components/e-charts/bar-chart.vue b/src/components/e-charts/bar-chart.vue
index 41b0656..1bc083d 100644
--- a/src/components/e-charts/bar-chart.vue
+++ b/src/components/e-charts/bar-chart.vue
@@ -32,8 +32,12 @@ export default {
       }
     },
     show_split: {
-      typr: Boolean,
+      type: Boolean,
       default: false
+    },
+    x_router: {
+      type: Number,
+      default: 0
     }
   },
   data: () => ({}),
@@ -60,7 +64,7 @@ export default {
                 fontSize: 12
               },
               interval: 0,
-              rotate: 30,
+              rotate: self.x_router,
               formatter: function(value) {
                 let valueTxt = "";
                 if (value.length > 6) {
diff --git a/src/components/e-charts/graph.vue b/src/components/e-charts/graph.vue
index 1c8c341..7057049 100644
--- a/src/components/e-charts/graph.vue
+++ b/src/components/e-charts/graph.vue
@@ -17,9 +17,7 @@ export default {
       }
     }
   },
-  data: () => ({
-    navList: []
-  }),
+  data: () => ({}),
   mounted() {},
   methods: {
     graph() {
@@ -95,7 +93,7 @@ export default {
             lineStyle: {
               width: 2,
               color: "#274fee",
-              shadowColor: "rgb(39, 79, 238, 0.3)",
+              shadowColor: "rgb(39, 79, 238, 0.4)",
               shadowBlur: 5,
               shadowOffsetY: 8
             }
@@ -112,7 +110,7 @@ export default {
             lineStyle: {
               width: 2,
               color: "#ef9433",
-              shadowColor: "rgb(239, 148, 51, 0.3)",
+              shadowColor: "rgb(239, 148, 51, 0.4)",
               shadowBlur: 5,
               shadowOffsetY: 8
             }
diff --git a/src/components/e-charts/water-polo.vue b/src/components/e-charts/water-polo.vue
new file mode 100644
index 0000000..6d03bee
--- /dev/null
+++ b/src/components/e-charts/water-polo.vue
@@ -0,0 +1,176 @@
+<template>
+  <chart :options="water()" class="water" />
+</template>
+
+<script>
+import { graphic } from "echarts/lib/export";
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          xaxis: [],
+          data: [],
+          legend: []
+        };
+      }
+    }
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {
+    water() {
+      let self = this;
+      return {
+        title: [
+          {
+            text: "支持开发",
+            x: "center",
+            y: "40%",
+            textStyle: {
+              fontSize: 14,
+              fontWeight: "normal",
+              color: "#58617a"
+            }
+          },
+          {
+            text: "不支持开发",
+            x: "center",
+            y: "90%",
+            textStyle: {
+              fontSize: 14,
+              fontWeight: "normal",
+              color: "#58617a"
+            }
+          }
+        ],
+        series: [
+          {
+            type: "liquidFill",
+            data: [
+              {
+                name: "A",
+                value: 0.67,
+                key: 77
+              }
+            ],
+            radius: "50%",
+            center: ["50%", "25%"],
+            outline: {
+              borderDistance: 5,
+              itemStyle: {
+                borderWidth: 5,
+                borderColor: "#e56600",
+                shadowBlur: 0
+              }
+            },
+            backgroundStyle: {
+              color: "#fff",
+              opacity: 1
+            },
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: ["#e6ebfe"] // 0% 处的颜色
+                  },
+                  {
+                    offset: 0,
+                    color: ["#515fe7"] // 100% 处的颜色
+                  }
+                ],
+                global: false // 缺省为 false
+              },
+              opacity: 1,
+              shadowBlur: 0
+            },
+            label: {
+              normal: {
+                formatter: function(param) {
+                  return "63%";
+                },
+                textStyle: {
+                  color: "#000",
+                  insideColor: "#000",
+                  fontSize: 14
+                }
+              }
+            }
+          },
+          {
+            type: "liquidFill",
+            data: [
+              {
+                name: "A",
+                value: 0.67,
+                key: 77
+              }
+            ],
+            radius: "50%",
+            center: ["50%", "75%"],
+            outline: {
+              borderDistance: 5,
+              itemStyle: {
+                borderWidth: 5,
+                borderColor: "#e56600",
+                shadowBlur: 0
+              }
+            },
+            backgroundStyle: {
+              color: "#fff",
+              opacity: 1
+            },
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: ["#e6ebfe"] // 0% 处的颜色
+                  },
+                  {
+                    offset: 0,
+                    color: ["#515fe7"] // 100% 处的颜色
+                  }
+                ],
+                global: false // 缺省为 false
+              },
+              opacity: 1,
+              shadowBlur: 0
+            },
+            label: {
+              normal: {
+                formatter: function(param) {
+                  return "63%";
+                },
+                textStyle: {
+                  color: "#000",
+                  insideColor: "#000",
+                  fontSize: 14
+                }
+              }
+            }
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.water {
+  width: 100%;
+  height: calc(100% - 20px);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/topology.vue b/src/components/topology.vue
index 4ba94fc..866845a 100644
--- a/src/components/topology.vue
+++ b/src/components/topology.vue
@@ -416,7 +416,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .canvas {
-  height: 600px;
+  height: 100%;
   width: 100%;
   margin: 0 auto;
   position: relative;
diff --git a/src/main.js b/src/main.js
index b2e03a5..8cb174c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -39,6 +39,9 @@ import 'echarts/lib/component/polar'; // 极坐标系
 import 'echarts/lib/chart/scatter'; // 散点图
 import 'echarts/lib/component/dataZoom'
 
+import liquidfill from 'echarts-liquidfill'
+Vue.use(liquidfill)
+
 import Sparkline from 'vue-sparklines'
 
 Vue.use(Sparkline)
diff --git a/src/pages/data-analysis/my-application.vue b/src/pages/data-analysis/my-application.vue
index a03e790..7e0bc21 100644
--- a/src/pages/data-analysis/my-application.vue
+++ b/src/pages/data-analysis/my-application.vue
@@ -9,14 +9,37 @@
       <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_num">2222</div>
+                <div class="left_block">
+                  <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_msg">
+                      <div class="left_1_title">服务总数</div>
+                      <div class="left_1_num">2222</div>
+                    </div>
+                  </div>
+                  <div class="chain">
+                    月环比
+                    <span class="chain_mid" :class="overview.month_chain >= 0 ? 'chain_up' : 'chain_down'">
+                      {{ Math.abs(overview.month_chain) }}
+                      <img
+                        :src="overview.month_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
+                      />
+                    </span>周环比
+                    <span :class="overview.week_chain >= 0 ? 'chain_up' : 'chain_down'">
+                      {{ Math.abs(overview.week_chain) }}
+                      <img
+                        :src="overview.week_chain >= 0 ? require('@/assets/imgs/icon_up.png') : require('@/assets/imgs/icon_down.png')"
+                      />
+                    </span>
+                  </div>
+                  <div class="left_1_line"></div>
+                  <div class="left_1_l_bottom">日均被部署次数<span class="left_1_l_bottom_msg">12432</span>（次）</div>
+                </div>
+                <div class="left_1_right">
+                  <WaterPolo />
                 </div>
-                <dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
               </div>
             </block-radius>
           </el-col>
@@ -95,7 +118,6 @@
 
 <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";
@@ -103,20 +125,24 @@ 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";
+import WaterPolo from "@/components/e-charts/water-polo";
 export default {
   components: {
     BlockRadius,
-    Dashboard,
     multipleCircle,
     singleCircle,
     Toplist,
     Starlist,
     lineChart,
     BarChart,
-    Graph
+    Graph,
+    WaterPolo
   },
   data: () => ({
-    navList: [],
+    overview: {
+      month_chain: 14.5,
+      week_chain: -14.2
+    },
     mult_data: [
       { name: "基础工具", value: 40 },
       { name: "通用应用", value: 0 },
@@ -154,10 +180,6 @@ export default {
         }
       ]
     },
-    das_data: {
-      data: 40,
-      text: "健康占比"
-    },
     bar_data_org: {
       xaxis: [
         "01-01",
@@ -232,29 +254,72 @@ export default {
   display: flex;
   justify-content: space-between;
 }
-.left_1_l {
-  width: 40%;
+.left_block {
+  width: 70%;
   height: 100%;
-  display: inline-block;
-  padding: 20px 0 0 0;
+  padding: 10px 0 0 0;
+}
+.left_1_l {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
 }
 .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;
+  height: 120px;
+  display: inline-block;
+}
+.chain {
+  color: #58617a;
+  font-size: 14px;
+  padding: 10px 0;
+  text-align: center;
+}
+.chain_down {
+  background-color: #fbe8e8;
+  border-radius: 3px;
+  padding: 2px 4px;
+  font-size: 12px;
+  margin-left: 8px;
+}
+.chain_up {
+  background-color: #e7fdfc;
+  border-radius: 3px;
+  padding: 1px 4px;
+  font-size: 12px;
+  margin-left: 8px;
+}
+.chain_mid {
+  margin-right: 20px;
+}
+.left_1_l_bottom {
+  color: #58617a;
+  padding: 10px;
+}
+.left_1_l_bottom_msg {
+  margin-left: 20px;
+}
+.left_1_msg {
+  display: inline-block;
+  width: 120px;
+  padding-bottom: 10px;
+}
+.left_1_line {
+  width: 90%;
+  margin-left: 5%;
+  height: 1px;
+  background-color: #f2f2f2;
 }
-.left_1_r {
-  width: 50%;
+.left_1_right {
+  width: 30%;
   height: 100%;
   display: inline-block;
 }
diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue
index 66308a8..ddabf1b 100644
--- a/src/pages/data-analysis/my-service.vue
+++ b/src/pages/data-analysis/my-service.vue
@@ -58,7 +58,9 @@
       <el-col :span="12" class="in_center">
         <el-row>
           <el-col :span="24" class="in_block height_2x">
-            <block-radius class="block"></block-radius>
+            <block-radius :show_header="true" title="运行拓扑图" class="block">
+              <Topology class="topology" :datas="topology_datas" />
+            </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block"></block-radius>
@@ -120,7 +122,7 @@
       <!-- 不可横向铺满，一般为最后一行 -->
       <el-col :span="6" class="in_block">
         <block-radius :show_header="true" title="服务来源机构分析" class="block">
-          <BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
+          <BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" />
         </block-radius>
       </el-col>
       <el-col :span="18" class="in_block default">
@@ -143,6 +145,7 @@ 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";
+import Topology from "@/components/topology.vue";
 export default {
   components: {
     BlockRadius,
@@ -154,10 +157,10 @@ export default {
     Starlist,
     lineChart,
     BarChart,
-    Graph
+    Graph,
+    Topology
   },
   data: () => ({
-    navList: [],
     mult_data: [
       { name: "基础工具", value: 40 },
       { name: "通用应用", value: 0 },
@@ -348,9 +351,12 @@ export default {
         [100, 1210, 130, 1530, 160, 120, 110, 1200]
       ],
       legend: ["aaa1", "bbb1"]
-    }
+    },
+    topology_datas: {}
   }),
-  mounted() {},
+  mounted() {
+    this.getTopologyData();
+  },
   methods: {
     changeServiceTypeBtn(index) {
       console.log(index);
@@ -368,6 +374,11 @@ export default {
     }, // 服务评价及评分
     changeServiceCellBtn(index) {
       console.log(index);
+    },
+    getTopologyData() {
+      this.$api.workbench.getServiceTopology().then(response => {
+        this.topology_datas = response.data.elements;
+      });
     }
   }
 };
@@ -405,7 +416,7 @@ export default {
   width: 40%;
   height: 100%;
   display: inline-block;
-  padding: 20px 0 0 0;
+  padding: 10px 0 0 0;
 }
 .left_1_title {
   width: 100%;
@@ -438,4 +449,8 @@ export default {
   height: calc(100% - 36px);
   margin-top: 15px;
 }
+.topology {
+  width: 100%;
+  height: calc(100% - 20px);
+}
 </style>
diff --git a/src/pages/user/order/order_list.vue b/src/pages/user/order/order_list.vue
index 11f5dde..49ca27d 100644
--- a/src/pages/user/order/order_list.vue
+++ b/src/pages/user/order/order_list.vue
@@ -15,7 +15,6 @@ export default {
     OrderList
   },
   data: () => ({
-    navList: []
   }),
   mounted() {},
   methods: {}
diff --git a/yarn.lock b/yarn.lock
index a54741f..d907cfe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2706,6 +2706,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+echarts-liquidfill@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npm.taobao.org/echarts-liquidfill/download/echarts-liquidfill-2.0.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts-liquidfill%2Fdownload%2Fecharts-liquidfill-2.0.6.tgz#0668dc61d87a6262003090bd32c55aa8108c252e"
+  integrity sha1-BmjcYdh6YmIAMJC9MsVaqBCMJS4=
+
 echarts@^4.8.0:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.8.0.tgz#b2c1cfb9229b13d368ee104fc8eea600b574d4c4"
@@ -7528,6 +7533,16 @@ xtend@^4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
+xterm-addon-fit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npm.taobao.org/xterm-addon-fit/download/xterm-addon-fit-0.4.0.tgz#06e0c5d0a6aaacfb009ef565efa1c81e93d90193"
+  integrity sha1-BuDF0KaqrPsAnvVl76HIHpPZAZM=
+
+xterm@^4.7.0:
+  version "4.8.1"
+  resolved "https://registry.npm.taobao.org/xterm/download/xterm-4.8.1.tgz#155a1729a43e1a89b406524e22c5634339e39ca1"
+  integrity sha1-FVoXKaQ+Gom0BlJOIsVjQznjnKE=
+
 xxhashjs@^0.2.1:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8"
@@ -7550,6 +7565,18 @@ yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
+yaml2json@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/yaml2json/download/yaml2json-1.0.2.tgz#3ab846deb87c062d9904e143c6947128d488c119"
+  integrity sha1-OrhG3rh8Bi2ZBOFDxpRxKNSIwRk=
+  dependencies:
+    yaml "0.2.x"
+
+yaml@0.2.x:
+  version "0.2.3"
+  resolved "https://registry.npm.taobao.org/yaml/download/yaml-0.2.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyaml%2Fdownload%2Fyaml-0.2.3.tgz#b5450e92e76ef36b5dd24e3660091ebaeef3e5c7"
+  integrity sha1-tUUOkudu82td0k42YAkeuu7z5cc=
+
 yargs-parser@^11.1.1:
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
-- 
2.26.0