集群节点展示测试

hanbaoshan

2020-10-14 d5144e7cb7ccf2795e02098b850e282eb2a6e74f

集群节点展示测试

 src/components/serfDiagram/index.vue

@@ -2,6 +2,7 @@
  .net
    d3-network(
       ref='net'
       v-if="nodes.length"
      :net-nodes="nodes"
      :net-links="links"
      :options="options"
@@ -11,6 +12,36 @@
      @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>
@@ -24,7 +55,8 @@
  },
  props: {
    agent: String,
    members: Array
    members: Array,
    searchNodes: Array,
  },
  data() {
    return {
@@ -39,9 +71,72 @@
    };
  },
  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.members.forEach((v, i) => {
      this.searchNodes.forEach((v, i) => {
        n.push({
          id: i,
          name: v.nodeName,
@@ -54,7 +149,7 @@
                : ""
        });
      });

      console.log(n)
      return n;
    },
    links() {
@@ -110,6 +205,11 @@
  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);
@@ -120,8 +220,8 @@
      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;
@@ -144,7 +244,8 @@
      // this.selectNodesLinks()
      // this.$set(this.nodes, node.index, node)
      console.log(event,node)
      debugger
      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]);
      }
@@ -284,4 +385,14 @@
  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>

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

@@ -398,6 +398,7 @@
    },
    // -- Render helpers
    nodeClick(event, node) {
      console.log(node)
      this.$emit("node-click", event, node);
    },
    nodeHover(event, node) {

 src/pages/settings/components/ClusterManagement.vue

@@ -104,6 +104,7 @@
        <serfDiagram
          ref="diagram"
          :members="members"
          :searchNodes="nodes"
          :agent="agentName"
          v-loading="loading"
          @selected-node="joinNode"
@@ -272,12 +273,12 @@
      loading: false,
      searchDis: false,
      agentName: "",
      members: []
      members: [],
      nodes: [],
    };
  },
  mounted() {
    this.findCluster();
    this.getVrrpInfo();
    this.getEsClusterNodes();
  },
  methods: {
@@ -290,7 +291,6 @@
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          debugger
          //alert("submit!");
          let json = {
            clusterId: this.clusterid,
@@ -409,6 +409,7 @@
        this.stopSearch();
      }, 10 * 1000);
    },
    //搜索集群
    async getSearchNodes() {
      let res = await getSearchNodes();
      if (res && res.success) {
@@ -428,7 +429,8 @@
            return element.node_id === i.node_id;
          });
          if (found === undefined) {
            this.members.push(i);
            //this.members.push(i);
            this.nodes.push(i);
          }
        });
      }
@@ -477,6 +479,8 @@
            debugger
            let obj = {};
            obj.device_type = i.device_type;
            obj.workType = i.device_type.substr(2,2);
            obj.hardwareType = i.device_type.substr(4,2);
            obj.cluster_id = i.cluster_id;
            obj.clusterName = res.data.clusterName;
            obj.create_time = i.create_time;
@@ -489,6 +493,7 @@
            return obj;
          });
          this.members = this.members.concat(list);
          console.log(this.members)
        } else {
          this.isHasColony = false;
          // this.activeName = '1'
@@ -550,6 +555,7 @@

    },
    joinNode(event, node) {
      debugger
      this.currentCluster.cluster_id = node.cluster_id;
      if (this.activeName === "3") {
        this.manageForm.clustername = node.clusterName;
@@ -695,14 +701,9 @@
      this.ruleForm.virtualIp = ip;
      console.log(this.ruleForm.virtualIp)
    }
  

    
  },
  mounted () {
    this.findCluster();
    
  },

  created () { }

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