标注静态交互

hanbaoshan

2020-10-23 d8fcf4c20cd4638a3def6227a71ea2c81fbc0885

 src/components/serfDiagram/index.vue

@@ -30,7 +30,8 @@
    members: Array,
    sizeX: Number,
    sizeY: Number,
    startX: Number
    startX: Number,
    isShowHover: Boolean
  },
  data () {
    return {
@@ -40,7 +41,8 @@
      toolTipStyle: {
        display: "none",
        height: "30px",
        width: "120px"
        width: "186px",
        borderColor: "#ccc"
      }
    };
  },
@@ -53,11 +55,10 @@
          name: v.nodeName,
          svgSym: RoleIcon[v.role],
          _color:
            this.agent === v.nodeName
              ? "red"
              : v.role === "master"
                ? "orange"
                : ""
            v.role === "master"
              ? "orange"
              : ""

        });
      });

@@ -126,12 +127,32 @@
      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";
      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]);
        let workName = '';
        switch(this.members[node.id].workType){
          case '01':
            workName = '分析'
            break;
          case '02':
            workName = '存储'
            break;
          case '03':
            workName = '分析+存储'
            break;
          case '04':
            workName = '应用'
            break;
          default:
            return;
        }
        this.toolTipNode = this.members[node.id].nodeName;
        this.toolTipAddr = `${this.members[node.id].Address}(${workName})`;
      }

      this.toolTipNode = this.members[node.id].nodeName;
      this.toolTipAddr = this.members[node.id].Address;
    },
    nodeOut (event, node) {
      node._opacity = node.opacity;
@@ -199,6 +220,7 @@
.net {
  height: 100%;
  margin: 0;
  position: relative;
}

.node {
@@ -259,7 +281,7 @@
  position: absolute;
  background: #fff;
  /* border: 1px solid #127862; */
  border: 1px solid rgba(76, 78, 78, 0.7);
  border: 1px solid #ccc;
  font-size: 11px;
  padding-left: 5px;
}
@@ -267,7 +289,7 @@
.arrow_box p {
  height: 30px;
  line-height: 30px;
  width: 100px;
  width: 100%;
  overflow: hidden;
}
.arrow_box:after,