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

hanbaoshan

2020-10-15 355de6d28489e9ff3d17138575c2fef32266930e

 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>