topology，所有节点按数据服务来，云服务功能

src/assets/svg/topology_ic_ganzhifw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 17</title><rect class="cls-1" x="4.22" y="4.22" width="13.56" height="13.56" transform="translate(-4.56 11) rotate(-45)"/><path class="cls-2" d="M11,2.83,19.17,11,11,19.17,2.83,11,11,2.83M11,0,0,11,11,22,22,11,11,0Z"/></svg>
\ No newline at end of file

src/assets/svg/topology_ic_shikongfw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 15</title><path class="cls-1" d="M10,19a9,9,0,1,1,9-9A9,9,0,0,1,10,19Z"/><path class="cls-2" d="M10,2a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-2A10,10,0,1,0,20,10,10,10,0,0,0,10,0Z"/></svg>
\ No newline at end of file

src/assets/svg/topology_ic_shipinfw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 19.05"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 16</title><polygon class="cls-1" points="1.73 18.05 11 2 20.27 18.05 1.73 18.05"/><path class="cls-2" d="M11,4l7.54,13.05H3.46L11,4m0-4L0,19.05H22L11,0Z"/></svg>
\ No newline at end of file

src/assets/svg/topology_ic_shujufw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 14</title><rect class="cls-1" x="1" y="1" width="16" height="16"/><path class="cls-2" d="M16,2V16H2V2H16m2-2H0V18H18V0Z"/></svg>
\ No newline at end of file

src/assets/svg/topology_ic_zonghefw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20.92"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 18</title><polygon class="cls-1" points="4.93 19.92 1.18 8.37 11 1.24 20.82 8.37 17.07 19.92 4.93 19.92"/><path class="cls-2" d="M11,2.47l8.65,6.28-3.3,10.17H5.65L2.35,8.76,11,2.47M11,0,0,8,4.2,20.92H17.8L22,8,11,0Z"/></svg>
\ No newline at end of file

src/components/shop-cloud/shop-cloud.vue

@@ -1059,7 +1059,18 @@ export default {
           ]
         };
         this.$api.serviceShop.updateCloud(query).then(response => {
-          console.log(response);
+          if (response.data.success == 1) {
+            this.$message({
+              message: "申请成功",
+              type: "success"
+            });
+            this.$router.push("/services_shop");
+          } else {
+            this.$message({
+              message: "申请失败",
+              type: "error"
+            });
+          }
         });
       }
       console.log(this.form);

src/components/topology.vue

@@ -17,14 +17,23 @@
 import G6 from "@antv/g6";
 export default {
   props: {
-    datas: Object,
+    datas: {
+      type: Object,
+      default: () => {
+        return {
+          nodes: [],
+          edges: []
+        };
+      }
+    },
     namespace: String
   },
   mounted() {},
   watch: {
     datas(val) {
-      console.log(val);
       this.getCavData();
+      this.getLegendNodes();
+      this.getLegendEdges();
     }
   },
   methods: {
@@ -36,32 +45,32 @@ export default {
         switch (node.data.nodeType) {
           case "workload":
             node.type = "image";
-            node.img = "./static/topology_ic_shujufw.svg";
+            node.img = require("@/assets/svg/topology_ic_shujufw.svg");
             node.size = [15, 15];
             break;
           case "app":
             node.type = "image";
-            node.img = "./static/topology_ic_shujufw.svg";
+            node.img = require("@/assets/svg/topology_ic_shujufw.svg");
             node.size = [15, 15];
             break;
           case "unknow source":
             node.type = "image";
-            node.img = "./static/topology_ic_shujufw.svg";
+            node.img = require("@/assets/svg/topology_ic_shujufw.svg");
             node.size = [15, 15];
             break;
           case "service":
             node.type = "image";
-            node.img = "./static/topology_ic_shujufw.svg";
+            node.img = require("@/assets/svg/topology_ic_shujufw.svg");
             node.size = [15, 15];
             break;
           case "service entry":
             node.type = "image";
-            node.img = "./static/topology_ic_shujufw.svg";
+            node.img = require("@/assets/svg/topology_ic_shujufw.svg");
             node.size = [15, 15];
             break;
           default:
             node.type = "image";
-            node.img = "./static/topology_ic_shujufw.svg";
+            node.img = require("@/assets/svg/topology_ic_ganzhifw.svg");
             node.size = [15, 15];
             break;
         }
@@ -86,6 +95,11 @@ export default {
         edge.id = edge.data.id;
         edge.source = edge.data.source;
         edge.target = edge.data.target;
+        edge.label = edge.data.traffic.rates
+          ? edge.data.traffic.rates.tcp
+            ? edge.data.traffic.rates.tcp
+            : edge.data.traffic.rates.http
+          : "";
         edge.style = {
           stroke: "#494e8f",
           lineWidth: 1,
@@ -97,17 +111,43 @@ export default {
           strokeOpacity: 1,
           cursor: "pointer"
         };
-        if (edge.data.xxx == "success") {
-          // sueecss
-          edge.style.stroke = "#25bdb1";
+        if (edge.data.traffic.protocol == "tcp") {
+          // tcp
+          edge.type = "1";
+          edge.style.stroke = "#c77eb5";
+        } else if (edge.data.traffic.protocol == "http") {
+          if (edge.data.traffic.responses) {
+            let sta = 0;
+            for (let i in edge.data.traffic.responses) {
+              if (
+                i.substring(i.length - 3, i.length - 2) == 5 ||
+                i.substring(i.length - 3, i.length - 2) == 4
+              ) {
+                sta += edge.data.traffic.responses[i][0];
+              } else {
+                sta += 0;
+              }
+              if (sta > 20) {
+                edge.style.stroke = "#d93a49";
+                edge.type = "3";
+              } else if (sta == 0) {
+                edge.style.stroke = "#1d953f";
+                edge.type = "2";
+              } else {
+                edge.style.stroke = "#f36c21";
+                edge.type = "2";
+              }
+            }
+          } else {
+            edge.style.stroke = "#a1a3a6";
+            edge.type = "0";
+          }
         } else {
-            // warning
-          edge.style.stroke = "#e15260";
+          edge.style.stroke = "#1d953f";
+          edge.type = "2";
         }
       });
       self.getCav();
-      self.getLegendNodes();
-      self.getLegendEdges();
     },
     getCav() {
       const width = this.$refs.conCav.scrollWidth;
@@ -224,7 +264,7 @@ export default {
             x: legendX,
             y: legendBeginY,
             type: "image",
-            img: "./static/topology_ic_shujufw.svg",
+            img: require("@/assets/svg/topology_ic_shujufw.svg"),
             size: [15, 15],
             label: "数据服务"
           },
@@ -233,7 +273,7 @@ export default {
             x: legendX,
             y: legendBeginY + legendYPadding * 1,
             type: "image",
-            img: "./static/topology_ic_shikongfw.svg",
+            img: require("@/assets/svg/topology_ic_shikongfw.svg"),
             size: [15, 15],
             label: "时空服务"
           },
@@ -242,7 +282,7 @@ export default {
             x: legendX,
             y: legendBeginY + legendYPadding * 2,
             type: "image",
-            img: "./static/topology_ic_shipinfw.svg",
+            img: require("@/assets/svg/topology_ic_shipinfw.svg"),
             size: [15, 15],
             label: "视频服务"
           },
@@ -251,7 +291,7 @@ export default {
             x: legendX,
             y: legendBeginY + legendYPadding * 3,
             type: "image",
-            img: "./static/topology_ic_ganzhifw.svg",
+            img: require("@/assets/svg/topology_ic_ganzhifw.svg"),
             size: [15, 15],
             label: "感知服务"
           },
@@ -260,7 +300,7 @@ export default {
             x: legendX,
             y: legendBeginY + legendYPadding * 4,
             type: "image",
-            img: "./static/topology_ic_zonghefw.svg",
+            img: require("@/assets/svg/topology_ic_zonghefw.svg"),
             size: [15, 15],
             label: "综合应用"
           }
@@ -407,7 +447,7 @@ export default {
   font-size: 14px;
   line-height: 26px;
   padding: 0 10px;
-    border-bottom: 2px #e5f0ff solid;;
+  border-bottom: 2px #e5f0ff solid;
 }
 .legend_nodes {
   width: 100%;

src/pages/workbench/fwgl/cloud-detail.vue

@@ -36,7 +36,7 @@
             </p>
             <p class="head_right_msg_p">
               业务系统名：
-              <span class="head_right_msg_item">{{ cloudData.workplace }}</span>
+              <span class="head_right_msg_item">{{ cloudData.system_name }}</span>
               资源申请时间：
               <span class="head_right_msg_item">{{ cloudData.apply_time }}</span>
             </p>
@@ -291,7 +291,6 @@ export default {
   data() {
     return {
       id: "",
-      userId: "",
       url:
         "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
       helper,
@@ -456,7 +455,14 @@ export default {
       now_user: "",
       activeName: null,
       tabShow: true,
-      cloudData: {},
+      cloudData: {
+        namespace: "",
+        workplace: "",
+        user_name: "",
+        phone: "",
+        apply_time: "",
+        system_name: ""
+      },
       cloudDteail: {
         containers: "",
         cpu: "",
@@ -504,14 +510,38 @@ export default {
     }
   },
   mounted() {
+    this.getUrlQuery();
     this.getCloudDetail();
   },
   methods: {
+    getUrlQuery() {
+      this.apply_id = this.$route.query.apply_id || "";
+      this.user_id = this.$route.query.user_id || "";
+      this.apply_type = this.$route.query.apply_type || 0;
+      this.use_uid = this.$route.query.use_uid || "";
+      this.id = this.$route.query.id || "";
+      if (this.use_uid != "") {
+        this.getCloudApplication();
+      }
+    },
     getUrl() {
       return this.$route.path.substring(0, 9);
     },
+    getCloudApplication() {
+      this.$api.workbench
+        .getCloudApplication({ namespace: this.cloudData.namespace })
+        .then(response => {
+          if (response.data.success == 1) {
+            this.appList = response.data.data;
+          } else {
+            console.log(response.data.errMsg);
+          }
+        });
+    },
     download() {},
-    adjustment() {},
+    adjustment() {
+      this.$router.push("/shop/cloud");
+    },
     distribution() {
       this.$api.workbench
         .setCloudAllocation({ id: this.id, userId: this.user_id })
@@ -530,9 +560,74 @@ export default {
           }
         });
     },
-    refuse() {},
-    pass() {},
-    deleteItem() {},
+    refuse() {
+      let query = {
+        applyId: this.apply_id,
+        applyState: -1,
+        applyType: this.apply_type,
+        applyCloudId: this.id,
+        namespace: this.cloudData.namespace
+      };
+      this.$api.workbench.setCloudApproval(query).then(response => {
+        if (response.data.success == 1) {
+          this.$message({
+            message: "申请已拒绝",
+            type: "success"
+          });
+          this.$router.push(this.getUrl());
+        } else {
+          this.$message({
+            message: "申请拒绝失败",
+            type: "error"
+          });
+        }
+      });
+    },
+    pass() {
+      let query = {
+        applyId: this.apply_id,
+        applyState: 1,
+        applyType: this.apply_type,
+        applyCloudId: this.id,
+        namespace: this.cloudData.namespace
+      };
+      this.$api.workbench.setCloudApproval(query).then(response => {
+        if (response.data.success == 1) {
+          this.$message({
+            message: "申请已通过",
+            type: "success"
+          });
+          this.$router.push(this.getUrl());
+        } else {
+          this.$message({
+            message: "申请通过失败",
+            type: "error"
+          });
+        }
+      });
+    },
+    deleteItem() {
+      this.$api.workbench
+        .deleteCloud({
+          id: this.id,
+          namespace: this.cloudData.namespace,
+          useUid: this.use_uid
+        })
+        .then(response => {
+          if (response.data.success == 1) {
+          this.$message({
+            message: "该资源已删除",
+            type: "success"
+          });
+          this.$router.push(this.getUrl());
+        } else {
+          this.$message({
+            message: "资源删除失败",
+            type: "error"
+          });
+        }
+        });
+    },
     getCurrentUser() {
       this.$api.user.getNowUser().then(({ data }) => {
         if (data.success == 1) {
@@ -547,6 +642,7 @@ export default {
       this.$refs.allotConfirm.getDetail(this.apply_id);
     },
     clickTab() {},
+    // 根据列表参数来判断显示什么
     setListWithRole() {
       if (this.now_user == 0) {
         // 普通用户
@@ -594,9 +690,9 @@ export default {
     },
     getCloudDetail() {
       let query = {
-        type: 0,
-        applyId: 13,
-        id: 25
+        type: this.apply_type,
+        applyId: this.apply_id,
+        id: this.id
       };
       this.$api.workbench.getCloudDetail(query).then(response => {
         let data = response.data.data;
@@ -633,7 +729,6 @@ export default {
             (count.containers_total / count.containers_use) * 100
           );
         }
-        // this.appList =
         this.cloudDteail.containers = data.containers;
         this.cloudDteail.cpu = data.cpu;
         this.cloudDteail.disk = data.disk;
@@ -654,6 +749,12 @@ export default {
         this.cloudDteail.adjust_one_memory_min = data.adjust_one_memory_min;
         this.apploy_msg.first_level = data.first_level;
         this.apploy_msg.second_level = data.second_level;
+        this.cloudData.namespace = data.namespace;
+        this.cloudData.workplace = data.workplace;
+        this.cloudData.user_name = data.user_name;
+        this.cloudData.phone = data.phone;
+        this.cloudData.apply_time = data.apply_time;
+        this.cloudData.system_name = data.system_name;
         this.setListWithRole();
       });
     }

src/pages/workbench/fwgl/serviceDetail.vue

@@ -501,13 +501,9 @@ export default {
       });
     },
     getData() {
-      let url = "./static/antv.json";
-      this.$http
-        .get(url)
-        .then(response => {
+      this.$api.workbench.getServiceTopology().then(response => {
         this.datas = response.data.elements;
-        })
-        .catch(function(response) {});
+      });
     },
     getServiceInfo() {
       this.$http

src/request/api/workbench.js

@@ -34,7 +34,7 @@ const workbench = {
     },
     // cloud resource approval
     setCloudApproval(params) {
-        return axios.put(`/apaas/service/v3/resource/apply/approve?apply_id=${params.applyId}&apply_state=${params.applyState}&apply_type=${params.applyType}&cloud_id=${params.applyCloudId}&namespace=${params.namespace}`, params)
+        return axios.put(`/apaas/service/v3/resource/apply/approve?apply_id=${params.applyId}&apply_state=${params.applyState}&apply_type=${params.applyType}&cloud_id=${params.applyCloudId}&namespace=${params.namespace}`)
     },
     // cloud resource allocation
     setCloudAllocation(params) {
@@ -42,7 +42,7 @@ const workbench = {
     },
     // cloud resource delete
     deleteCloud(params) {
-        return axios.delete(`/apaas/service/v3/resource/apply/remove?id=${params.id}`)
+        return axios.delete(`/apaas/service/v3/resource/apply/remove?id=${params.id}&namespace=${params.namespace}&use_uid=${params.useUid}`)
     },
     // cloud resource disabled
     disabledCloud(params) {
@@ -52,6 +52,11 @@ const workbench = {
     getCloudApplication(params) {
         return axios.get(`/apaas/hubApi/market/deployList?page=1&limit=10000&namespaces=${params.namespace}`)
     },
+
+    // get service topology
+    getServiceTopology() {
+        return axios.get(`/awecloud/meshgraph/api/namespaces/graph?duration=60s&graphType=service&injectServiceNodes=false&appenders=deadNode,sidecarsCheck,serviceEntry,istio&namespaces=apaas-proxy`)
+    },
 }
 
 export default workbench;