集群节点移入效果更新

hanbaoshan

2020-10-17 d451e7b7570a523bf0f397fa376be8d929f2492b

集群节点移入效果更新

 src/components/serfDiagram/index.vue

@@ -125,10 +125,10 @@
      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;
@@ -272,10 +272,10 @@
}
.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;
@@ -287,11 +287,19 @@
  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: 6px;
  margin-top: -6px;
  border-width: 5px;
  margin-top: -5px;
}
.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #323333;
  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');
    }
  }