应用中心未安装算法图标修复,集群节点展示组件更新

hanbaoshan

2020-10-15 355de6d28489e9ff3d17138575c2fef32266930e

应用中心未安装算法图标修复,集群节点展示组件更新

 public/images/settings/cloud.png

 src/components/serfDiagram/index.vue

@@ -2,7 +2,6 @@
  .net
    d3-network(
       ref='net'
       v-if="nodes.length"
      :net-nodes="nodes"
      :net-links="links"
      :options="options"
@@ -12,42 +11,12 @@
      @node-hover='nodeHover'
      @node-out='nodeOut'     
    )
    .clouds(v-if="members.length")
      //- d3-network(
      //-   ref='net'
      //-   v-if="outerNodes.length"
      //-   :net-nodes="outerNodes"
      //-   :net-links="links"
      //-   :options="options"
      //-   :selection="{nodes: nodeSelected, links: linksSelected}"
      //-   @drag-start='dragStart'
      //-   @node-click='nodeClick'
      //-   @node-hover='nodeHover'
      //-   @node-out='nodeOut'     
      //- )
    .inner
      d3-network(
        ref='net'
        v-if="innerNodes.length"
        :net-nodes="innerNodes"
        :net-links="links"
        :options="options"
        :selection="{nodes: nodeSelected, links: linksSelected}"
        @drag-start='dragStart'
        @node-click='nodeClick'
        @node-hover='nodeHover'
        @node-out='nodeOut'     
      )
    
        
      
    
</template>

 
<script>
import D3Network from "./vue-d3-network";
import RoleIcon from "./icons.js";

 
export default {
  name: "SerfDiagram",
  components: {
@@ -56,7 +25,6 @@
  props: {
    agent: String,
    members: Array,
    searchNodes: Array,
  },
  data() {
    return {
@@ -71,72 +39,9 @@
    };
  },
  computed: {
    //分类节点
    //1.云内节点(对应X86)
    innerNodes(){
      // return this.members.map(item=>{
      //   if(item.hardwareType == '01'||item.hardwareType == '02'){
      //     return {
      //       id:item.id,
      //       name:item.nodeName,
      //       svgSym: RoleIcon[item.role],
      //       _color:
      //         this.agent === v.nodeName
      //           ? "red"
      //           : v.role === "master"
      //             ? "orange"
      //             : ""
      //     }
      //   }
      // })
      let arr = [];
      this.members.forEach(item=>{
        if(item.hardwareType == '01'||item.hardwareType == '02'){
          arr.push({
            id:item.id,
            cluster_id:item.cluster_id,
            name:item.nodeName,
            svgSym: RoleIcon[item.role],
            _color:
              this.agent === item.nodeName
                ? "red"
                : item.role === "master"
                  ? "orange"
                  : ""
          });
        }
      });
      console.log(this.members);
      console.log(arr)
      return arr;
    },
    //2.边节点(现对应bit)
    outerNodes(){
      let arr = [];
      this.members.forEach(item=>{
        debugger
        if(item.hardwareType == '03'){
          arr.push({
            id:item.id,
            cluster_id:item.cluster_id,
            name:item.nodeName,
            svgSym: RoleIcon[item.role],
            _color:
              this.agent === item.nodeName
                ? "red"
                : item.role === "master"
                  ? "orange"
                  : ""
          });
        }
      });
      console.log(this.members);
      console.log(arr)
      return arr;
    },
    nodes() {
      let n = new Array();
      this.searchNodes.forEach((v, i) => {
      this.members.forEach((v, i) => {
        n.push({
          id: i,
          name: v.nodeName,
@@ -149,14 +54,14 @@
                : ""
        });
      });
      console.log(n)
 
      return n;
    },
    links() {
      let arr = new Array();
      let dup = new Array(); // Deduplicate to ensure that two nodes have only one line
      const count = this.members.length;

 
      switch (count) {
        case 0:
        case 1:
@@ -176,7 +81,7 @@
                // is me? skip
                continue;
              }

 
              if (!dup["d" + target + i]) {
                arr.push({ sid: i, tid: target });
                dup["d" + i + target] = 1;
@@ -184,7 +89,7 @@
            }
          }
      }

 
      return arr;
    },
    options() {
@@ -205,11 +110,6 @@
  created() {
    this.reset();
  },
  mounted(){
    console.log(this.members)
    console.log('innerNodes',this.innerNodes);
    console.log('outerNodes',this.outerNodes)
  },
  methods: {
    nodeHover(event, node) {
      console.log(node);
@@ -219,9 +119,9 @@
      this.toolTipStyle.display = "block";
      this.toolTipStyle.top = node.y - 10 + "px";
      this.toolTipStyle.left = node.x + width / 2 - 30 + "px";

      //this.toolTipNode = this.members[node.id].nodeName;
      //this.toolTipAddr = this.members[node.id].Address;
 
      this.toolTipNode = this.members[node.id].nodeName;
      this.toolTipAddr = this.members[node.id].Address;
    },
    nodeOut(event, node) {
      node._opacity = node.opacity;
@@ -239,13 +139,12 @@
      //   // is not nodeSelected
      // } else {
      //   this.selectNode(node)

 
      // }
      // this.selectNodesLinks()
      // this.$set(this.nodes, node.index, node)
      console.log(event,node)
      console.log(this.members)
      console.log(this.members[node.id])
      debugger
      if (event.timeStamp - this.movement < 200) {
        this.$emit("selected-node", event, this.members[node.id]);
      }
@@ -285,13 +184,13 @@
  }
};
</script>

 
<style>
.net {
  height: 100%;
  margin: 0;
}

 
.node {
  /* stroke: rgba(18, 120, 98, 0.7); */
  stroke: rgba(76, 78, 78, 0.7);
@@ -301,51 +200,51 @@
  /* fill: #dcfaf3; */
  fill: #e3e4e4;
}

 
.node.selected {
  stroke: #caa455;
}

 
.node.pinned {
  stroke: rgba(190, 56, 93, 0.6);
}

 
.link {
  stroke: rgba(18, 120, 98, 0.3);
}

 
.link,
.node {
  stroke-linecap: round;
}

 
.link:hover,
.node:hover {
  stroke: #df8108;
  stroke-width: 1px;
  cursor: pointer;
}

 
.link.selected {
  stroke: rgba(202, 164, 85, 0.6);
}

 
.curve {
  fill: none;
}

 
.link-label,
.node-label {
  /* fill: #127862; */
  fill: rgba(76, 78, 78, 0.7);
}

 
.link-label {
  -webkit-transform: translateY(-0.5em);
  transform: translateY(-0.5em);
  text-anchor: middle;
}

 
.arrow_box {
  position: absolute;
  background: #fff;
@@ -354,7 +253,7 @@
  font-size: 11px;
  padding-left: 5px;
}

 
.arrow_box p {
  height: 30px;
  line-height: 30px;
@@ -372,7 +271,7 @@
  position: absolute;
  pointer-events: none;
}

 
.arrow_box:after {
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #fff;
@@ -385,14 +284,4 @@
  border-width: 6px;
  margin-top: -6px;
}
.clouds{
  height: 100%;
  margin:0;
  background:rgba(149, 221, 255, 0.322);
}
.inner{
  height:300px;
  margin: 50px auto;
  background:rgb(201 233 249);
}
</style>
</style>

 src/components/serfDiagram/indexC.vue

New file
@@ -0,0 +1,499 @@
<template lang='pug'>
  .net
    //- d3-network(
    //-   ref='net'
    //-   class="member"
    //-   v-if="memberNodes.length && !searchNodes.length"
    //-   :net-nodes="memberNodes"
    //-   :net-links="links"
    //-   :options="options"
    //-   :selection="{nodes: nodeSelected, links: linksSelected}"
    //-   @drag-start='dragStart'
    //-   @node-click='nodeClick'
    //-   @node-hover='nodeHover'
    //-   @node-out='nodeOut'     
    //- )
    d3-network(
       ref='net'
       class="search"
       v-if="searchNodes.length"
      :net-nodes="nodes"
      :net-links="links"
      :options="options"
      :selection="{nodes: nodeSelected, links: linksSelected}"
      @drag-start='dragStart'
      @node-click='nodeClick'
      @node-hover='nodeHover'
      @node-out='nodeOut'     
    )
    //- .clouds(v-if="members.length")
    //-   d3-network(
    //-     ref='net'
    //-     v-if="memberNodes.length"
    //-     :net-nodes="memberNodes"
    //-     :net-links="links"
    //-     :options="options"
    //-     :selection="{nodes: nodeSelected, links: linksSelected}"
    //-     @drag-start='dragStart'
    //-     @node-click='nodeClick'
    //-     @node-hover='nodeHover'
    //-     @node-out='nodeOut'     
    //-   )
    //- .inner
    //-   d3-network(
    //-     ref='net'
    //-     v-if="innerNodes.length"
    //-     :net-nodes="innerNodes"
    //-     :net-links="links"
    //-     :options="options"
    //-     :selection="{nodes: nodeSelected, links: linksSelected}"
    //-     @drag-start='dragStart'
    //-     @node-click='nodeClick'
    //-     @node-hover='nodeHover'
    //-     @node-out='nodeOut'     
    //-   )
    
</template>

<script>
import D3Network from "./vue-d3-network";
import RoleIcon from "./icons.js";

export default {
  name: "SerfDiagram",
  components: {
    D3Network
  },
  props: {
    agent: String,
    //members: Array,
    searchNodes: Array,
  },
  data() {
    return {
      nodeSize: 20,
      fontSize: 20,
      canvas: false,
      toolTipStyle: {
        display: "none",
        height: "30px",
        width: "120px"
      }
    };
  },
  computed: {
    //分类节点
    //云内云边节点
    memberNodes(){
      let arr = [];
      let mockMembers = [
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46",
          hardwareType: "01",
          id: "DSVAD010120190622",
          node_id: "DSVAD010120190622",
          node_ip: "192.168.20.10:30190",
          node_name: "开发20.10-1",
          role: 'pc'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f",
          hardwareType: "02",
          id: "DSVAD010120190623",
          node_id: "DSVAD010120190623",
          node_ip: "192.168.20.10:30190",
          node_name: "开发测试20.10-1",
          role:'master'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2g",
          hardwareType: "03",
          id: "DSVAD010120190624",
          node_id: "DSVAD010120190624",
          node_ip: "192.168.20.10:30190",
          node_name: "测试20.10-1",
          role:'pc'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2h",
          hardwareType: "03",
          id: "DSVAD010120190625",
          node_id: "DSVAD010120190625",
          node_ip: "192.168.20.10:30190",
          node_name: "测试20.101-1",
          role:'server'
        },
      ]
      //this.members.forEach(item=>{
        
      mockMembers.forEach(item=>{
        if(item.hardwareType=='03'){
          arr.push({
            id:item.id,
            cluster_id:item.cluster_id,
            name:item.nodeName,
            svgSym: RoleIcon[item.role],
            x: -10,
            y: -10,
            _color:
              this.agent === item.nodeName
                ? "red"
                : item.role === "master"
                  ? "orange"
                  : ""
          });
        }else{
          arr.push({
            id:item.id,
            cluster_id:item.cluster_id,
            name:item.nodeName,
            svgSym: RoleIcon[item.role],
            _color:
              this.agent === item.nodeName
                ? "red"
                : item.role === "master"
                  ? "orange"
                  : ""
          });
        }    
               
      });
      console.log('serf-mem',arr)
      return arr;
    },
    //1.云内节点(对应X86)
    innerNodes(){
      // return this.members.map(item=>{
      //   if(item.hardwareType == '01'||item.hardwareType == '02'){
      //     return {
      //       id:item.id,
      //       name:item.nodeName,
      //       svgSym: RoleIcon[item.role],
      //       _color:
      //         this.agent === v.nodeName
      //           ? "red"
      //           : v.role === "master"
      //             ? "orange"
      //             : ""
      //     }
      //   }
      // })
      let arr = [];
      this.members.forEach(item=>{
        if(item.hardwareType == '01'||item.hardwareType == '02'){
          arr.push({
            id:item.id,
            cluster_id:item.cluster_id,
            name:item.nodeName,
            svgSym: RoleIcon[item.role],
            _color:
              this.agent === item.nodeName
                ? "red"
                : item.role === "master"
                  ? "orange"
                  : ""
          });
        }
      });
      console.log(this.members);
      console.log(arr)
      return arr;
    },
    //2.边节点(现对应bit)
    outerNodes(){
      let arr = [];
      this.members.forEach(item=>{
        debugger
        if(item.hardwareType == '03'){
          arr.push({
            id:item.id,
            cluster_id:item.cluster_id,
            name:item.nodeName,
            svgSym: RoleIcon[item.role],
            _color:
              this.agent === item.nodeName
                ? "red"
                : item.role === "master"
                  ? "orange"
                  : ""
          });
        }
      });
      console.log(this.members);
      console.log(arr)
      return arr;
    },
    nodes() {
      let n = new Array();
      this.searchNodes.forEach((v, i) => {
        n.push({
          id: v.id,
          cluster_id: v.cluster_id,
          name: v.nodeName,
          svgSym: RoleIcon[v.role],
          _color:
            this.agent === v.nodeName
              ? "red"
              : v.role === "master"
                ? "orange"
                : ""
        });
      });
      console.log(n)
      return n;
    },
    links() {
      let arr = new Array();
      let dup = new Array(); // Deduplicate to ensure that two nodes have only one line
      const count = this.members.length;

      switch (count) {
        case 0:
        case 1:
          break;
        case 2:
          arr = [{ sid: 0, tid: 1 }];
          break;
        case 3:
          arr = [{ sid: 0, tid: 1 }, { sid: 1, tid: 2 }, { sid: 0, tid: 2 }];
          break;
        default:
          for (let i = 0; i < count; i++) {
            let loop = Math.round(Math.random() * 5 + 2); // At least 2 times
            for (let j = 0; j < loop; j++) {
              let target = Math.round(Math.random() * (count - 1));
              if (target === i) {
                // is me? skip
                continue;
              }

              if (!dup["d" + target + i]) {
                arr.push({ sid: i, tid: target });
                dup["d" + i + target] = 1;
              }
            }
          }
      }

      return arr;
    },
    
    options() {
      return {
        force: 3000,
        nodeSize: this.nodeSize,
        fontSize: this.fontSize,
        nodeLabels: true,
        canvas: this.canvas,
        linkWidth: 0,
        size: {
          w: 745,
          h: 426
        }
      };
    }
  },
  watch:{
    searchNodes(n,o){
      console.log(n,o)
    }
  },
  created() {
    
    this.reset();
  },
  mounted(){
    console.log('searchNodes',this.searchNodes)
    console.log(this.members)
    console.log('innerNodes',this.innerNodes);
    console.log('outerNodes',this.outerNodes)
  },
  methods: {
    nodeHover(event, node) {
      console.log(node);
      node._opacity = 1;
      node._size = 28;
      let width = document.body.clientWidth;
      this.toolTipStyle.display = "block";
      this.toolTipStyle.top = node.y - 10 + "px";
      this.toolTipStyle.left = node.x + width / 2 - 30 + "px";

      //this.toolTipNode = this.members[node.id].nodeName;
      //this.toolTipAddr = this.members[node.id].Address;
    },
    nodeOut(event, node) {
      node._opacity = node.opacity;
      node._size = node.size;
      this.toolTipStyle.display = "none";
    },
    dragStart(event) {
      if (event) {
        this.movement = event.timeStamp;
      }
    },
    nodeClick(event, node) {
      // if (this.nodeSelected[node.id]) {
      //   this.unSelectNode(node.id)
      //   // is not nodeSelected
      // } else {
      //   this.selectNode(node)

      // }
      // this.selectNodesLinks()
      // this.$set(this.nodes, node.index, node)
      console.log(event,node)
      console.log(this.members)
      console.log(this.members[node.id])
      if (event.timeStamp - this.movement < 200) {
        //this.$emit("selected-node", event, this.members[node.id]);
        debugger
        let someNode = this.members.find(one=>one.id == node.id)
        this.$emit("selected-node", event, someNode);
      }
    },
    reset() {
      this.nodeSelected = {};
      this.linksSelected = {};
      (this.toolTipNode = ""), (this.toolTipAddr = ""), (this.movement = 0);
    },
    unSelectNode(nodeId) {
      if (this.nodeSelected[nodeId]) {
        delete this.nodeSelected[nodeId];
      }
      this.selectNodesLinks();
    },
    unSelectLink(linkId) {
      if (this.linksSelected[linkId]) {
        delete this.linksSelected[linkId];
      }
    },
    selectNode(node) {
      this.nodeSelected[node.id] = node;
    },
    selectLink(link) {
      this.$set(this.linksSelected, link.id, link);
    },
    selectNodesLinks() {
      for (let link of this.links) {
        // node is nodeSelected
        if (this.nodeSelected[link.sid] || this.nodeSelected[link.tid]) {
          this.selectLink(link);
        } else {
          this.unSelectLink(link.id);
        }
      }
    }
  }
};
</script>

<style>
.net {
  height: 100%;
  margin: 0;
}

.node {
  /* stroke: rgba(18, 120, 98, 0.7); */
  stroke: rgba(76, 78, 78, 0.7);
  stroke-width: 3px;
  -webkit-transition: fill 0.5s ease;
  transition: fill 0.5s ease;
  /* fill: #dcfaf3; */
  fill: #e3e4e4;
}

.node.selected {
  stroke: #caa455;
}

.node.pinned {
  stroke: rgba(190, 56, 93, 0.6);
}

.link {
  stroke: rgba(18, 120, 98, 0.3);
}

.link,
.node {
  stroke-linecap: round;
}

.link:hover,
.node:hover {
  stroke: #df8108;
  stroke-width: 1px;
  cursor: pointer;
}

.link.selected {
  stroke: rgba(202, 164, 85, 0.6);
}

.curve {
  fill: none;
}

.link-label,
.node-label {
  /* fill: #127862; */
  fill: rgba(76, 78, 78, 0.7);
}

.link-label {
  -webkit-transform: translateY(-0.5em);
  transform: translateY(-0.5em);
  text-anchor: middle;
}

.arrow_box {
  position: absolute;
  background: #fff;
  /* border: 1px solid #127862; */
  border: 1px solid rgba(76, 78, 78, 0.7);
  font-size: 11px;
  padding-left: 5px;
}

.arrow_box p {
  height: 30px;
  line-height: 30px;
  width: 100px;
  overflow: hidden;
}
.arrow_box:after,
.arrow_box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #fff;
  border-width: 5px;
  margin-top: -5px;
}
.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #323333;
  border-width: 6px;
  margin-top: -6px;
}
.clouds{
  height: 100%;
  margin:0;
  background:rgba(149, 221, 255, 0.322);
}
.inner{
  /* height:300px;
  margin: 50px auto; */
  background:rgba(152, 183, 251, 0.39);
}
</style>

 src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue

@@ -206,8 +206,7 @@
};
</script>
<style>
  /* .net-svg{
    background-color: aquamarine;
    border-radius: 50%;
  } */
  .net-svg{
    background-color: rgba(127, 255, 212, 0.198);
  }
</style>

 src/pages/ai/index/App.vue

@@ -97,7 +97,7 @@
                          <div class="svg-wrap">

                            <img

                              class="baseImg"

                              :src="`data:image/png;base64,${item.iconBlob}`"

                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                          </div>

@@ -269,10 +269,10 @@
                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

                              <span v-if="!item.isEdit">{{ item.sdk_name }}</span>

                              <span v-if="!item.isEdit">{{ item.name }}</span>

                              <el-input

                                size="small"

                                v-model="item.sdk_name"

                                v-model="item.name"

                                v-if="item.isEdit"

                                v-focus

                                :maxlength="15"


 src/pages/settings/components/CloudNode.vue

New file
@@ -0,0 +1,115 @@
<template>
  <div class="cloud">
    <div class="inner">
      <div class="rect">
        <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}">
          <span class="node-icon">
            <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
          </span>
          <span class="node-name">{{item.nodeName}}</span>
        </div>
      </div>
    </div>
    <div class="outer">
      <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :style="{top:36*(index+1)+'px',left:80*(index+1)+'px'}">
        <span class="node-icon">
          <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
        </span>
        <span class="node-name">{{item.nodeName}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'cloudNode',
  props:{
    nodes: Array
  },
  data(){
    return {
      nodeIcons:[],
      mockData:[
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46",
          hardwareType: "01",
          id: "DSVAD010120190622",
          node_id: "DSVAD010120190622",
          node_ip: "192.168.20.10:30190",
          nodeName: "开发20.10-1",
          role: 'pc'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f",
          hardwareType: "02",
          id: "DSVAD010120190623",
          node_id: "DSVAD010120190623",
          node_ip: "192.168.20.10:30190",
          nodeName: "开发测试20.10-1",
          role:'master'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2g",
          hardwareType: "03",
          id: "DSVAD010120190624",
          node_id: "DSVAD010120190624",
          node_ip: "192.168.20.10:30190",
          nodeName: "测试20.10-1",
          role:'pc'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2h",
          hardwareType: "03",
          id: "DSVAD010120190625",
          node_id: "DSVAD010120190625",
          node_ip: "192.168.20.10:30190",
          nodeName: "测试20.101-1",
          role:'server'
        },
      ]
    }
  },
  computed:{
    
    insideNodes(){
      //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
      return this.mockData.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
    },
    outsideNodes(){
      //return this.nodes.filter(item=>item.hardwareType=='03');
      return this.mockData.filter(item=>item.hardwareType=='03');
    }
  }
}
</script>
<style lang="scss">
  .cloud{
    width: 100%;
    height: 500px;
    display: flex;
    .inner{
      width: 50%;
      background: url('/images/settings/cloud.png') no-repeat;
      background-size: 100%;
      .rect{
        background:cornflowerblue;
        position: relative;
        .node{
          position: absolute;
          .node-icon{
            width:40px;
            height:40px;
          }
          .node-name{
            font-size:14px;
            color: #333;
          }
        }
      }
    }
    .outer{
      width:50%;
      position: relative;
    }
  }
</style>

 src/pages/settings/components/ClusterManagement.vue

@@ -100,16 +100,19 @@
          </el-form>
        </div>
      </el-col>
      <el-col :span="12" style="height: 100%;" v-if="members.length !== 0">
      <el-col :span="12" style="height: 100%;" v-if="members.length !== 0 && isSearch" class="node-container">
        <serfDiagram
          ref="diagram"
          :members="members"
          :searchNodes="nodes"
          :agent="agentName"
          v-loading="loading"
          @selected-node="joinNode"
          class="nodes-svg"
        ></serfDiagram>
      </el-col>
      <el-col :span="12" style="height: 100%;" v-if="innerNodes.length !== 0 && !isSearch" class="node-container">
        <cloud-node :nodes="innerNodes">
        </cloud-node>
      </el-col>
    </el-row>

@@ -189,14 +192,15 @@
import {
  getDevInfo
} from "@/api/system";

import cloudNode from "./CloudNode";
import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";
import {isIPv4} from "@/scripts/validate";
export default {
  components: {
    serfDiagram,
    ipInput
    ipInput,
    cloudNode
  },
  data() {
    const checkPwd = (rule, value, callback) => {
@@ -268,13 +272,14 @@
      esNodes: [],
      scheduleId: "",
      isHasColony: false,
      isSearch: false,
      currentCluster: {},
      searchNum: "",
      loading: false,
      searchDis: false,
      agentName: "",
      members: [],
      nodes: [],
      innerNodes: [],
    };
  },
  mounted() {
@@ -372,6 +377,7 @@
      }
    },
    async searchColony() {
      this.isSearch = true;
      this.$refs["joinForm"].validate(valid => {
        if (valid) {
          this.members = [];
@@ -389,10 +395,12 @@
            .catch(() => {
              this.searchDis = false;
              this.loading = false;
              this.isSearch = false;
            });
        } else {
          this.searchDis = false;
          this.loading = false;
          this.isSearch = false;
          return false;
        }
      });
@@ -429,8 +437,7 @@
            return element.node_id === i.node_id;
          });
          if (found === undefined) {
            //this.members.push(i);
            this.nodes.push(i);
            this.members.push(i);
          }
        });
      }
@@ -475,8 +482,9 @@
          this.ruleForm.clustername = res.data.clusterName;
          this.ruleForm.clusterpwd = res.data.clusterpwd
          this.ruleForm.virtualIp = res.data.virtualIp
          let list = res.data.nodes.map(i => {
            debugger
          //let list = res.data.nodes.map(i => {
          this.isSearch = false;
          this.innerNodes = res.data.nodes.map(i => {
            let obj = {};
            obj.device_type = i.device_type;
            obj.workType = i.device_type.substr(2,2);
@@ -492,7 +500,8 @@
            obj.role = i.role ? i.role : "pc";
            return obj;
          });
          this.members = this.members.concat(list);
           
          //this.members = this.members.concat(list);
          console.log(this.members)
        } else {
          this.isHasColony = false;
@@ -550,6 +559,7 @@
          this.isHasColony = false;
          this.activeName = "1";
          this.members = [];
          this.innerNodes = [];
        }
      }).catch(() => { });

@@ -778,6 +788,6 @@
  line-height: 30px;
}
.nodes-svg{
  background-color: rgba(127, 255, 212, 0.459);
  background-color: rgba(127, 172, 255, 0.459);
}
</style>