搜索集群节点样式更新

hanbaoshan

2020-10-19 c0c79d9b58705a3c8c13ea9f23b1dd0f724a04af

搜索集群节点样式更新

 src/components/serfDiagram/index.vue

@@ -30,7 +30,8 @@
    members: Array,
    sizeX: Number,
    sizeY: Number,
    startX: Number
    startX: Number,
    isShowHover: Boolean
  },
  data () {
    return {
@@ -52,10 +53,10 @@
          id: i,
          name: v.nodeName,
          svgSym: RoleIcon[v.role],
          _color: 
              v.role === "master"
                ? "orange"
                : ""
          _color:
            v.role === "master"
              ? "orange"
              : ""

        });
      });
@@ -125,12 +126,15 @@
      node._opacity = 1;
      node._size = 28;
      //let width = document.body.clientWidth;
      this.toolTipStyle.display = "block";
      this.toolTipStyle.top = node.y - 60 + "px";
      this.toolTipStyle.left = node.x + "px";
      console.log(this.members[node.id])
      this.toolTipNode = this.members[node.id].nodeName;
      this.toolTipAddr = this.members[node.id].Address;
      if (this.isShowHover) {
        this.toolTipStyle.display = "block";
        this.toolTipStyle.top = node.y - 60 + "px";
        this.toolTipStyle.left = node.x + "px";
        console.log(this.members[node.id])
        this.toolTipNode = this.members[node.id].nodeName;
        this.toolTipAddr = this.members[node.id].Address;
      }

    },
    nodeOut (event, node) {
      node._opacity = node.opacity;
@@ -198,6 +202,7 @@
.net {
  height: 100%;
  margin: 0;
  position: relative;
}

.node {

 src/pages/settings/components/CloudNode.vue

@@ -23,6 +23,7 @@
          :sizeX="insideSizeX"
          :sizeY="insideSizeY"
          :startX="insideStartX"
          :isShowHover="true"
          class="inside-nodes"
        ></serfDiagram>
      </div>

 src/pages/settings/components/ClusterManagement.vue

@@ -111,6 +111,7 @@
          :members="members"
          :agent="agentName"
          v-loading="loading"
          :isShowHover="false"
          @selected-node="joinNode"
          class="nodes-svg"
        ></serfDiagram>
@@ -820,7 +821,5 @@
  height: 30px;
  line-height: 30px;
}
.nodes-svg {
  background-color: rgba(127, 172, 255, 0.459);
}

</style>