修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/components/serfDiagram/index.vue

@@ -1,7 +1,10 @@
<template lang='pug'>
  .net
    .arrow_box(:style="toolTipStyle")
      p {{toolTipAddr}}
    d3-network(
       ref='net'
      :startX="startX"
      :net-nodes="nodes"
      :net-links="links"
      :options="options"
@@ -9,14 +12,14 @@
      @drag-start='dragStart'
      @node-click='nodeClick'
      @node-hover='nodeHover'
      @node-out='nodeOut'     
      @node-out='nodeOut'
    )
</template>
 
<script>
import D3Network from "./vue-d3-network";
import RoleIcon from "./icons.js";
 

export default {
  name: "SerfDiagram",
  components: {
@@ -25,6 +28,10 @@
  props: {
    agent: String,
    members: Array,
    sizeX: Number,
    sizeY: Number,
    startX: Number,
    isShowHover: Boolean
  },
  data() {
    return {
@@ -34,7 +41,8 @@
      toolTipStyle: {
        display: "none",
        height: "30px",
        width: "120px"
        width: "186px",
        borderColor: "#ccc"
      }
    };
  },
@@ -47,21 +55,20 @@
          name: v.nodeName,
          svgSym: RoleIcon[v.role],
          _color:
            this.agent === v.nodeName
              ? "red"
              : v.role === "master"
                ? "orange"
                : ""
            v.role === "master"
              ? "orange"
              : ""

        });
      });
 

      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 +88,7 @@
                // is me? skip
                continue;
              }
 

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

      return arr;
    },
    options() {
@@ -100,9 +107,13 @@
        nodeLabels: true,
        canvas: this.canvas,
        linkWidth: 0,
        // size: {
        //   w: 745,
        //   h: 426
        // }
        size: {
          w: 745,
          h: 426
          w: this.sizeX || 445,
          h: this.sizeY || 426
        }
      };
    }
@@ -115,13 +126,33 @@
      console.log(node);
      node._opacity = 1;
      node._size = 28;
      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.toolTipNode = this.members[node.id].nodeName;
      this.toolTipAddr = this.members[node.id].Address;
      //let width = document.body.clientWidth;
      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})`;
      }

    },
    nodeOut(event, node) {
      node._opacity = node.opacity;
@@ -134,17 +165,6 @@
      }
    },
    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)
      debugger
      if (event.timeStamp - this.movement < 200) {
        this.$emit("selected-node", event, this.members[node.id]);
      }
@@ -189,8 +209,9 @@
.net {
  height: 100%;
  margin: 0;
  position: relative;
}
 

.node {
  /* stroke: rgba(18, 120, 98, 0.7); */
  stroke: rgba(76, 78, 78, 0.7);
@@ -200,70 +221,70 @@
  /* 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;
  /* border: 1px solid #127862; */
  border: 1px solid rgba(76, 78, 78, 0.7);
  border: 1px solid #ccc;
  font-size: 11px;
  padding-left: 5px;
}
 

.arrow_box p {
  height: 30px;
  line-height: 30px;
  width: 100px;
  width: 100%;
  overflow: hidden;
}
.arrow_box:after,
.arrow_box:before {
  right: 100%;
  top: 50%;
  right: 50%;
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
@@ -271,17 +292,25 @@
  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>