集群节点移入效果更新

hanbaoshan

2020-10-17 d451e7b7570a523bf0f397fa376be8d929f2492b

集群节点移入效果更新

 src/components/serfDiagram/index.vue

@@ -19,7 +19,7 @@
<script>
import D3Network from "./vue-d3-network";
import RoleIcon from "./icons.js";
 

export default {
  name: "SerfDiagram",
  components: {
@@ -32,7 +32,7 @@
    sizeY: Number,
    startX: Number
  },
  data() {
  data () {
    return {
      nodeSize: 20,
      fontSize: 20,
@@ -45,7 +45,7 @@
    };
  },
  computed: {
    nodes() {
    nodes () {
      let n = new Array();
      this.members.forEach((v, i) => {
        n.push({
@@ -60,14 +60,14 @@
                : ""
        });
      });
 

      return n;
    },
    links() {
    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:
@@ -87,7 +87,7 @@
                // is me? skip
                continue;
              }
 

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

      return arr;
    },
    options() {
    options () {
      return {
        force: 3000,
        nodeSize: this.nodeSize,
@@ -117,71 +117,71 @@
      };
    }
  },
  created() {
  created () {
    this.reset();
  },
  methods: {
    nodeHover(event, node) {
    nodeHover (event, node) {
      console.log(node);
      node._opacity = 1;
      node._size = 28;
      let width = document.body.clientWidth;
      //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.toolTipStyle.top = node.y - 60 + "px";
      this.toolTipStyle.left = node.x + "px";

      this.toolTipNode = this.members[node.id].nodeName;
      this.toolTipAddr = this.members[node.id].Address;
    },
    nodeOut(event, node) {
    nodeOut (event, node) {
      node._opacity = node.opacity;
      node._size = node.size;
      this.toolTipStyle.display = "none";
    },
    dragStart(event) {
    dragStart (event) {
      if (event) {
        this.movement = event.timeStamp;
      }
    },
    nodeClick(event, node) {
    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(event, node)
      debugger
      if (event.timeStamp - this.movement < 200) {
        this.$emit("selected-node", event, this.members[node.id]);
      }
    },
    reset() {
    reset () {
      this.nodeSelected = {};
      this.linksSelected = {};
      (this.toolTipNode = ""), (this.toolTipAddr = ""), (this.movement = 0);
    },
    unSelectNode(nodeId) {
    unSelectNode (nodeId) {
      if (this.nodeSelected[nodeId]) {
        delete this.nodeSelected[nodeId];
      }
      this.selectNodesLinks();
    },
    unSelectLink(linkId) {
    unSelectLink (linkId) {
      if (this.linksSelected[linkId]) {
        delete this.linksSelected[linkId];
      }
    },
    selectNode(node) {
    selectNode (node) {
      this.nodeSelected[node.id] = node;
    },
    selectLink(link) {
    selectLink (link) {
      this.$set(this.linksSelected, link.id, link);
    },
    selectNodesLinks() {
    selectNodesLinks () {
      for (let link of this.links) {
        // node is nodeSelected
        if (this.nodeSelected[link.sid] || this.nodeSelected[link.tid]) {
@@ -200,7 +200,7 @@
  height: 100%;
  margin: 0;
}
 

.node {
  /* stroke: rgba(18, 120, 98, 0.7); */
  stroke: rgba(76, 78, 78, 0.7);
@@ -210,51 +210,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;
@@ -263,7 +263,7 @@
  font-size: 11px;
  padding-left: 5px;
}
 

.arrow_box p {
  height: 30px;
  line-height: 30px;
@@ -272,26 +272,34 @@
}
.arrow_box:after,
.arrow_box:before {
  right: 100%;
  top: 50%;
  right: 50%;
  top: 100%;
  border: solid transparent;
  content: " ";
  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;
  transform: translateY(6px) rotateZ(-90deg);
}
.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #323333;
  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;
  border-width: 5px;
  margin-top: -5px;
  transform: translateY(6px) rotateZ(-90deg);
}
</style>

 src/pages/settings/components/CloudNode.vue

@@ -197,7 +197,7 @@
    //   return temp;
    // },
    outsideNodes () {
      return this.mockData.filter(item=>item.hardwareType=='03');
      return this.nodes.filter(item=>item.hardwareType=='03');
      //return this.nodes.filter(item => item.hardwareType == '03');
    }
  }