标注静态交互

hanbaoshan

2020-10-23 d8fcf4c20cd4638a3def6227a71ea2c81fbc0885

 src/components/serfDiagram/index.vue

@@ -1,8 +1,10 @@
<template lang='pug'>
  .net
    .arrow_box(:style="toolTipStyle")
      p {{toolTipAddr}}
    d3-network(
       ref='net'
       v-if="nodes.length"
      :startX="startX"
      :net-nodes="nodes"
      :net-links="links"
      :options="options"
@@ -10,40 +12,10 @@
      @drag-start='dragStart'
      @node-click='nodeClick'
      @node-hover='nodeHover'
      @node-out='nodeOut'     
      @node-out='nodeOut'
    )
    .clouds(v-if="members.length")
      //- d3-network(
      //-   ref='net'
      //-   v-if="outerNodes.length"
      //-   :net-nodes="outerNodes"
      //-   :net-links="links"
      //-   :options="options"
      //-   :selection="{nodes: nodeSelected, links: linksSelected}"
      //-   @drag-start='dragStart'
      //-   @node-click='nodeClick'
      //-   @node-hover='nodeHover'
      //-   @node-out='nodeOut'     
      //- )
    .inner
      d3-network(
        ref='net'
        v-if="innerNodes.length"
        :net-nodes="innerNodes"
        :net-links="links"
        :options="options"
        :selection="{nodes: nodeSelected, links: linksSelected}"
        @drag-start='dragStart'
        @node-click='nodeClick'
        @node-hover='nodeHover'
        @node-out='nodeOut'     
      )
    
        
      
    
</template>

 
<script>
import D3Network from "./vue-d3-network";
import RoleIcon from "./icons.js";
@@ -56,9 +28,12 @@
  props: {
    agent: String,
    members: Array,
    searchNodes: Array,
    sizeX: Number,
    sizeY: Number,
    startX: Number,
    isShowHover: Boolean
  },
  data() {
  data () {
    return {
      nodeSize: 20,
      fontSize: 20,
@@ -66,93 +41,30 @@
      toolTipStyle: {
        display: "none",
        height: "30px",
        width: "120px"
        width: "186px",
        borderColor: "#ccc"
      }
    };
  },
  computed: {
    //分类节点
    //1.云内节点(对应X86)
    innerNodes(){
      // return this.members.map(item=>{
      //   if(item.hardwareType == '01'||item.hardwareType == '02'){
      //     return {
      //       id:item.id,
      //       name:item.nodeName,
      //       svgSym: RoleIcon[item.role],
      //       _color:
      //         this.agent === v.nodeName
      //           ? "red"
      //           : v.role === "master"
      //             ? "orange"
      //             : ""
      //     }
      //   }
      // })
      let arr = [];
      this.members.forEach(item=>{
        if(item.hardwareType == '01'||item.hardwareType == '02'){
          arr.push({
            id:item.id,
            cluster_id:item.cluster_id,
            name:item.nodeName,
            svgSym: RoleIcon[item.role],
            _color:
              this.agent === item.nodeName
                ? "red"
                : item.role === "master"
                  ? "orange"
                  : ""
          });
        }
      });
      console.log(this.members);
      console.log(arr)
      return arr;
    },
    //2.边节点(现对应bit)
    outerNodes(){
      let arr = [];
      this.members.forEach(item=>{
        debugger
        if(item.hardwareType == '03'){
          arr.push({
            id:item.id,
            cluster_id:item.cluster_id,
            name:item.nodeName,
            svgSym: RoleIcon[item.role],
            _color:
              this.agent === item.nodeName
                ? "red"
                : item.role === "master"
                  ? "orange"
                  : ""
          });
        }
      });
      console.log(this.members);
      console.log(arr)
      return arr;
    },
    nodes() {
    nodes () {
      let n = new Array();
      this.searchNodes.forEach((v, i) => {
      this.members.forEach((v, i) => {
        n.push({
          id: i,
          name: v.nodeName,
          svgSym: RoleIcon[v.role],
          _color:
            this.agent === v.nodeName
              ? "red"
              : v.role === "master"
                ? "orange"
                : ""
            v.role === "master"
              ? "orange"
              : ""

        });
      });
      console.log(n)

      return n;
    },
    links() {
    links () {
      let arr = new Array();
      let dup = new Array(); // Deduplicate to ensure that two nodes have only one line
      const count = this.members.length;
@@ -187,7 +99,7 @@

      return arr;
    },
    options() {
    options () {
      return {
        force: 3000,
        nodeSize: this.nodeSize,
@@ -195,45 +107,64 @@
        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
        }
      };
    }
  },
  created() {
  created () {
    this.reset();
  },
  mounted(){
    console.log(this.members)
    console.log('innerNodes',this.innerNodes);
    console.log('outerNodes',this.outerNodes)
  },
  methods: {
    nodeHover(event, node) {
    nodeHover (event, node) {
      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";
      //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})`;
      }

      //this.toolTipNode = this.members[node.id].nodeName;
      //this.toolTipAddr = this.members[node.id].Address;
    },
    nodeOut(event, node) {
    nodeOut (event, node) {
      node._opacity = node.opacity;
      node._size = node.size;
      this.toolTipStyle.display = "none";
    },
    dragStart(event) {
    dragStart (event) {
      if (event) {
        this.movement = event.timeStamp;
      }
    },
    nodeClick(event, node) {
    nodeClick (event, node) {
      // if (this.nodeSelected[node.id]) {
      //   this.unSelectNode(node.id)
      //   // is not nodeSelected
@@ -243,36 +174,35 @@
      // }
      // this.selectNodesLinks()
      // this.$set(this.nodes, node.index, node)
      console.log(event,node)
      console.log(this.members)
      console.log(this.members[node.id])
      console.log(event, node)
      debugger
      if (event.timeStamp - this.movement < 200) {
        this.$emit("selected-node", event, this.members[node.id]);
      }
    },
    reset() {
    reset () {
      this.nodeSelected = {};
      this.linksSelected = {};
      (this.toolTipNode = ""), (this.toolTipAddr = ""), (this.movement = 0);
    },
    unSelectNode(nodeId) {
    unSelectNode (nodeId) {
      if (this.nodeSelected[nodeId]) {
        delete this.nodeSelected[nodeId];
      }
      this.selectNodesLinks();
    },
    unSelectLink(linkId) {
    unSelectLink (linkId) {
      if (this.linksSelected[linkId]) {
        delete this.linksSelected[linkId];
      }
    },
    selectNode(node) {
    selectNode (node) {
      this.nodeSelected[node.id] = node;
    },
    selectLink(link) {
    selectLink (link) {
      this.$set(this.linksSelected, link.id, link);
    },
    selectNodesLinks() {
    selectNodesLinks () {
      for (let link of this.links) {
        // node is nodeSelected
        if (this.nodeSelected[link.sid] || this.nodeSelected[link.tid]) {
@@ -285,11 +215,12 @@
  }
};
</script>

 
<style>
.net {
  height: 100%;
  margin: 0;
  position: relative;
}

.node {
@@ -350,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;
}
@@ -358,15 +289,15 @@
.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: " ";
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
@@ -378,21 +309,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;
}
.clouds{
  height: 100%;
  margin:0;
  background:rgba(149, 221, 255, 0.322);
.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);
}
.inner{
  height:300px;
  margin: 50px auto;
  background:rgb(201 233 249);
}
</style>
</style>