Merge branch 'ldx' into dev

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",

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 }) => {

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) {

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
             }

src/components/e-charts/water-polo.vue

+<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

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;

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)

src/pages/data-analysis/my-application.vue

@@ -11,12 +11,35 @@
           <el-col :span="24" class="in_block">
             <block-radius :show_header="true" title="应用总体概况" class="block">
               <div class="left_1">
+                <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_title">应用总数</div>
+                    <div class="left_1_msg">
+                      <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>
+                  <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>
               </div>
             </block-radius>
           </el-col>
@@ -161,7 +184,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";
@@ -171,10 +193,10 @@ 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";
+import WaterPolo from "@/components/e-charts/water-polo";
 export default {
   components: {
     BlockRadius,
-    Dashboard,
     multipleCircle,
     singleCircle,
     Toplist,
@@ -183,10 +205,14 @@ export default {
     lineChart,
     BarChart,
     ApassTable,
-    Graph
+    Graph,
+    WaterPolo
   },
   data: () => ({
-    navList: [],
+    overview: {
+      month_chain: 14.5,
+      week_chain: -14.2
+    },
     mult_data: [
       { name: "基础工具", value: 40 },
       { name: "通用应用", value: 0 },
@@ -224,10 +250,6 @@ export default {
         }
       ]
     },
-    das_data: {
-      data: 40,
-      text: "健康占比"
-    },
     bar_data_org: {
       xaxis: [
         "01-01",
@@ -489,29 +511,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;
 }

src/pages/data-analysis/my-service.vue

@@ -58,14 +58,12 @@
       <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
-              :show_header="true"
-              title="服务热门搜索"
-              class="block"
-            >
+            <block-radius :show_header="true" title="服务热门搜索" class="block">
               <div class="block-radius-content service-hot-search">
                 <div class="left-content">
                   <div class="hot-line">
@@ -171,7 +169,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">
@@ -195,6 +193,7 @@ 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";
+import Topology from "@/components/topology.vue";
 export default {
   components: {
     BlockRadius,
@@ -207,10 +206,10 @@ export default {
     lineChart,
     BarChart,
     ApassTable,
-    Graph
+    Graph,
+    Topology
   },
   data: () => ({
-    navList: [],
     mult_data: [
       { name: "基础工具", value: 40 },
       { name: "通用应用", value: 0 },
@@ -250,7 +249,7 @@ export default {
     },
     das_data: {
       data: 40,
-      text: "健康占比",
+      text: "健康占比"
     },
     bar_data: {
       xaxis: [
@@ -263,7 +262,7 @@ export default {
         "01-07",
         "01-08"
       ],
-      data: [100, 120, 130, 150, 160, 120, 110, 100],
+      data: [100, 120, 130, 150, 160, 120, 110, 100]
     },
     bar_data_org: {
       xaxis: [
@@ -274,9 +273,9 @@ export default {
         "01-05",
         "01-06",
         "01-07",
-        "01-08",
+        "01-08"
       ],
-      data: [100, 120, 130, 150, 160, 120, 110, 100],
+      data: [100, 120, 130, 150, 160, 120, 110, 100]
     },
     toplistData: [
       {
@@ -392,32 +391,32 @@ export default {
         hotIndex: 1,
         name: "地图视频融合服务1",
         count: 666,
-        increases: 1.28,
+        increases: 1.28
       },
       {
         hotIndex: 2,
         name: "地图视频融合服务2",
         count: 666,
-        increases: 0.03,
+        increases: 0.03
       },
       {
         hotIndex: 3,
         name: "地图视频融合服务3",
         count: 666,
-        increases: 0.58,
+        increases: 0.58
       },
       {
         hotIndex: 4,
         name: "地图视频融合服务4",
         count: 666,
-        increases: -0.28,
+        increases: -0.28
       },
       {
         hotIndex: 5,
         name: "地图视频融合服务5",
         count: 666,
-        increases: -0.58,
-      },
+        increases: -0.58
+      }
     ], // 热门搜索 数据
     graph_arr: {
       xaxis: [
@@ -435,7 +434,8 @@ export default {
         [100, 1210, 130, 1530, 160, 120, 110, 1200]
       ],
       legend: ["aaa1", "bbb1"]
-    }
+    },
+    topology_datas: {}
   }),
   mounted() {
     this.hotSearchHeader = [
@@ -443,19 +443,19 @@ export default {
         label: "服务排名",
         type: "hot-index",
         width: 100,
-        align: "center",
+        align: "center"
       },
       {
         label: "服务名称",
         prop: "name",
         type: "button",
-        callback: this.detailHotSearch,
+        callback: this.detailHotSearch
       },
       {
         label: "搜索次数",
         prop: "count",
         width: 100,
-        align: "center",
+        align: "center"
       },
       {
         label: "日涨幅",
@@ -463,9 +463,10 @@ export default {
         width: 100,
         sortType: "0", // 0：升序 1：降序
         sortable: true,
-        align: "center",
-      },
-    ]
+        align: "center"
+      }
+    ];
+    this.getTopologyData();
   },
   methods: {
     detailHotSearch(item) {
@@ -496,6 +497,12 @@ export default {
     },
     changeServeiceTotalChangeBtn(index) {
       console.log("服务总数变化趋势: " + index);
+      console.log(index);
+    },
+    getTopologyData() {
+      this.$api.workbench.getServiceTopology().then(response => {
+        this.topology_datas = response.data.elements;
+      });
     }
   }
 };
@@ -533,7 +540,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%;
@@ -597,6 +604,10 @@ export default {
   height: calc(100% - 36px);
   background-color: pink;
 }
+.topology {
+  width: 100%;
+  height: calc(100% - 20px);
+}
 </style>
 
 <style>

src/pages/user/order/order_list.vue

@@ -15,7 +15,6 @@ export default {
     OrderList
   },
   data: () => ({
-    navList: []
   }),
   mounted() {},
   methods: {}

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"