hanbaoshan
2020-10-15 5d3fe5712f60fec872870e0b1a3162c72466ab05
src/components/serfDiagram/index.vue
@@ -12,11 +12,11 @@
      @node-out='nodeOut'     
    )
</template>
<script>
import D3Network from "./vue-d3-network";
import RoleIcon from "./icons.js";
export default {
  name: "SerfDiagram",
  components: {
@@ -24,7 +24,7 @@
  },
  props: {
    agent: String,
    members: Array
    members: Array,
  },
  data() {
    return {
@@ -54,14 +54,14 @@
                : ""
        });
      });
      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:
@@ -81,7 +81,7 @@
                // is me? skip
                continue;
              }
              if (!dup["d" + target + i]) {
                arr.push({ sid: i, tid: target });
                dup["d" + i + target] = 1;
@@ -89,7 +89,7 @@
            }
          }
      }
      return arr;
    },
    options() {
@@ -119,7 +119,7 @@
      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;
    },
@@ -139,7 +139,7 @@
      //   // is not nodeSelected
      // } else {
      //   this.selectNode(node)
      // }
      // this.selectNodesLinks()
      // this.$set(this.nodes, node.index, node)
@@ -184,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);
@@ -200,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;
@@ -253,7 +253,7 @@
  font-size: 11px;
  padding-left: 5px;
}
.arrow_box p {
  height: 30px;
  line-height: 30px;
@@ -271,7 +271,7 @@
  position: absolute;
  pointer-events: none;
}
.arrow_box:after {
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #fff;
@@ -284,4 +284,4 @@
  border-width: 6px;
  margin-top: -6px;
}
</style>
</style>