添加集群手动选主节点, 无线网络显示ip

zhangzengfei

2023-10-23 1db7db4bf02259e47d5d906d6b21ecc6451b0a09

 src/pages/settings/components/NetNode.vue

@@ -1,84 +1,73 @@
<template>
  <div class="net-node">
      <div class="vue-d3-network">
        <D3Network 
        ref='net'
        :net-nodes="nodes"
        :net-links="links"
        :options="options"
        />
      </div>
    <div class="vue-d3-network">
      <D3Network ref="net" :net-nodes="nodes" :net-links="links" :options="options" />
    </div>

      <span class="icon iconfont zoom-in" 
      @click="changeForce(1)" 
      :class="{'zoom-disabled'
      :disabled.zoomIn}">&#xeb89;</span>
    <span class="icon iconfont zoom-in" @click="changeForce(1)" :class="{ 'zoom-disabled': disabled.zoomIn }"
      >&#xeb89;</span
    >

      <span class="icon iconfont zoom-out" 
      @click="changeForce(0)" 
      :class="{'zoom-disabled'
      :disabled.zoomOut}">&#xe758;</span>
    <span class="icon iconfont zoom-out" @click="changeForce(0)" :class="{ 'zoom-disabled': disabled.zoomOut }"
      >&#xe758;</span
    >

      <div class="illustrate">
        <div>
        <span class="illu-server"></span> 服务器
        </div>
    <div class="illustrate">
      <div><span class="illu-server"></span> APS智能终端</div>

        <div>
      <!-- <div>
        <span class="analysis"></span> 分析盒子
        </div>
      </div>

        </div> -->
    </div>
  </div>
</template>

<script>
import D3Network from 'vue-d3-network'
import {nodes,links} from './netNodeData'
import D3Network from "vue-d3-network"
import { nodes, links } from "./netNodeData"

export default {
created () {
  created() {
    this.reset()
},
  },

props:{
    innerNodes:Array
},
  props: {
    innerNodes: Array
  },

data () {
  return {
    //   settings: {
    //       maxLinks: 2,
    //       maxNodes: 130
    //   },
  data() {
    return {
      settings: {
        maxLinks: 2,
        maxNodes: 15
      },
      nodes,
      links,
      options: {
          size: {
              w: 600,
              h: 240
        size: {
          w: 600,
          h: 240
        },
        offset: {
              x: 0,
              y: 0
          x: 0,
          y: 0
        },
        nodeSize: 18,
        force: 300,
        nodeLabels: true
      },
      disabled:{
          zoomIn:false,
          zoomOut:false
      } 
  }
  
},
      disabled: {
        zoomIn: false,
        zoomOut: false
      }
    }
  },

components: {
  components: {
    D3Network
},
  },

methods: {
  methods: {
    // 初始化
    // reset () {
    //    this.nodes = this.makeRandomNodes(this.settings.maxNodes)
@@ -88,194 +77,224 @@
    // },

    // 随机生成节点
    // makeRandomNodes (maxNodes) {
    //    let nodes = Array.apply(null, { length: maxNodes })
    //    .map((value, index) => { return this.newNode(index) })
    //    return nodes
    // },
    // newNode (nodeId) {
    //   return { id: nodeId, name: this.newNodeName(),_cssClass:"node-default" }
    // },
    // newNodeName () {
    // return Math.random().toString(36).substring(7)
    // },
    makeRandomNodes(maxNodes) {
      let nodes = Array.apply(null, { length: maxNodes }).map((value, index) => {
        return this.newNode(index)
      })
      return nodes
    },
    newNode(nodeId) {
      //   return { id: nodeId, name: this.newNodeName(), _cssClass: "node-default" }
      return {
        id: nodeId,
        name: this.newNodeName(),
        _cssClass: "node-default",
        index: nodeId,
        _labelClass: "label-default"
      }
    },
    newNodeName() {
      return Math.random()
        .toString(36)
        .substring(7)
    },

    // 随机生成连线
    // newLink (id, sid, tid) {
    // return { id, sid, tid,_color:"rgb(90,90,90)" }
    // },
    // makeRandomLinks (nodes, maxLinks) {
    // let links = []
    // let id = 0
    // for (let node of nodes) {
    // let total = Math.floor(Math.random() * maxLinks)
    // for (let i = 0; i <= total; i++) {
    //   let target = Math.floor(Math.random() * nodes.length)
    //   let source = node.id
    //   id++
    //   links.push(this.newLink(id, source, target))
    //  }
    // }
    // return links
    // },
    //随机生成连线
    newLink(id, sid, tid) {
      return { id, sid, tid, _color: "rgb(90,90,90)" }
    },
    makeRandomLinks(nodes, maxLinks) {
      let links = []
      let id = 0
      for (let node of nodes) {
        let total = Math.floor(Math.random() * maxLinks)
        for (let i = 0; i <= total; i++) {
          let target = Math.floor(Math.random() * nodes.length)
          let source = node.id
          id++
          links.push(this.newLink(id, source, target))
        }
      }
      return links
    },

    // 初始化
    reset() {
        let linkId = 200
        this.innerNodes.forEach((item,index) => {
      this.nodes = this.makeRandomNodes(this.settings.maxNodes)
      this.links = this.makeRandomLinks(this.nodes, this.settings.maxLinks)

      let linkId = 200
      let lastId = -1
      this.innerNodes.forEach((item, index) => {
        if (index === 0) {
            this.nodes = this.addNode(item,"server")
            this.links = this.addLink(linkId,6,`${item.node_id}`,"rgba(90,90,90,.6)")
            this.links = this.addLink(linkId+1,8,`${item.node_id}`,"rgba(90,90,90,.6)")
            linkId+=2
          this.nodes = this.addNode(item, item.online ? "server" : "offline")
          this.links = this.addLink(linkId, 6, `${item.node_id}`, "rgba(90,90,90,.6)")
          this.links = this.addLink(linkId + 1, 8, `${item.node_id}`, "rgba(90,90,90,.6)")
          linkId += 2
        } else {
          this.nodes = this.addNode(item, item.online ? "server" : "offline")
          this.links = this.addLink(linkId, item.node_id, this.innerNodes[index - 1].node_id, "#4E94FF")
          this.links = this.addLink(linkId, index, this.innerNodes[index - 1].node_id, "rgba(90,90,90,.6)")
          linkId += 1
        }
        else {
            this.nodes = this.addNode(item,"server")
            this.links = this.addLink(linkId,item.node_id,this.innerNodes[index-1].node_id,"#4E94FF")
            linkId+=1
            }     
        })

        lastId = index
      })

      this.links = this.addLink(linkId + 1, 0, this.innerNodes[lastId].node_id, "rgba(90,90,90,.6)")
    },
    

    // 添加新节点
    addNode(newNode,type) {
        return [...this.nodes,{
                   "id": `${newNode.node_id}`,
                   "name": `${newNode.nodeName}`,
                   "_cssClass": `node-${type}`,
                   "_labelClass": `label-${type}`,
                   "x": 400,
                   "y": 100
                }]
    addNode(newNode, type) {
      return [
        ...this.nodes,
        {
          id: `${newNode.node_id}`,
          name: `${newNode.nodeName}`,
          _cssClass: `node-${type}`,
          _labelClass: `label-${type}`,
          x: 400,
          y: 100
        }
      ]
    },

    // 添加新连线
    addLink(id,sid,tid,color) {
        return [...this.links,{
            "id": id,
            "sid": sid,
            "tid": tid,
            "_color": color,
            "_svgAttrs": {"stroke-width": 2}
            }]
    addLink(id, sid, tid, color) {
      return [
        ...this.links,
        {
          id: id,
          sid: sid,
          tid: tid,
          _color: color,
          _svgAttrs: { "stroke-width": 2 }
        }
      ]
    },

    // 调整作用力
    changeForce(judge) {
    if(judge && this.options.nodeSize >25) {
      if (judge && this.options.nodeSize > 25) {
        this.disabled.zoomIn = true
        return
    }
    if(!judge && this.options.nodeSize <11) {
      }
      if (!judge && this.options.nodeSize < 11) {
        this.disabled.zoomOut = true
        return
    }
    const force =judge? this.options.force + 70 : this.options.force - 70
    let nodeSize = judge? this.options.nodeSize + 2 : this.options.nodeSize - 2
    this.disabled.zoomOut = this.disabled.zoomIn = false
    this.options = {
          size: {
              w: 600,
              h: 240
      }
      const force = judge ? this.options.force + 70 : this.options.force - 70
      let nodeSize = judge ? this.options.nodeSize + 2 : this.options.nodeSize - 2
      this.disabled.zoomOut = this.disabled.zoomIn = false
      this.options = {
        size: {
          w: 600,
          h: 240
        },
        offset: {
              x: 0,
              y: 0
          x: 0,
          y: 0
        },
        nodeSize: nodeSize,
        force
      }
    console.log( this.options);
    },

      console.log(this.options)
    }
  }
}
</script>

<style lang="scss" scoped>
.net-node {
    position: relative;
    overflow: hidden;
    margin-top:10px ;
    margin-bottom:4px ;
    padding-top:10px ;
    height: 240px;
    background-color: rgba(255, 255, 255, 0.719);  
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 4px;
  padding-top: 10px;
  height: 240px;
  background-color: rgba(255, 255, 255, 0.719);

    ::v-deep .node-default {
        fill: #fff;
        stroke: rgb(90,90,90);
        stroke-width: 1px;
  ::v-deep .node-default {
    fill: #fff;
    stroke: rgb(90, 90, 90);
    stroke-width: 1px;
  }

  ::v-deep .node-server {
    fill: #fff;
    stroke: #4e94ff;
    stroke-width: 2px;
  }

  ::v-deep .node-offline {
    fill: #fff;
    stroke: #b33030;
    stroke-width: 2px;
  }

  ::v-deep .label-default {
    display: none;
  }

  ::v-deep .label-server {
    font-weight: 700;
  }

  .zoom-in,
  .zoom-out {
    position: absolute;
    font-size: 21px;
    cursor: pointer;
    color: #333;

    &:hover {
      color: var(--colorCard);
    }

    ::v-deep .node-server {
        fill: #fff;
        stroke: #4E94FF;
        stroke-width: 2px;
    &.zoom-disabled:hover {
      color: #333;
      cursor: not-allowed;
    }
  }

    ::v-deep .label-default {
        display: none;
  .zoom-in {
    top: 20px;
    right: 20px;
  }

  .zoom-out {
    top: 50px;
    right: 20px;
  }

  .illustrate {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 8px;
    top: 180px;
    right: 20px;
    height: 40px;
    width: 100px;
    background-color: #fff;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    .illu-server {
      display: inline-block;
      width: 4px;
      height: 4px;
      border: 2px solid #4e94ff;
      border-radius: 4px;
    }

     ::v-deep .label-server {
        font-weight: 700;
    .analysis {
      display: inline-block;
      width: 4px;
      height: 4px;
      border: 2px solid #4ef4ff;
      border-radius: 4px;
    }

    .zoom-in,.zoom-out {
        position: absolute;
        font-size: 21px;
        cursor: pointer;
        color: #333; 

        &:hover {
        color: var(--colorCard);
        }

        &.zoom-disabled:hover {
        color: #333;
        cursor: not-allowed;
        }
    }

    .zoom-in {
        top: 20px;
        right: 20px;
    }

    .zoom-out {
        top: 50px;
        right: 20px;
    }

    .illustrate {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left:8px ;
        top: 180px;
        right: 20px;
        height: 40px;
        width: 68px;
        background-color: #fff;
        text-align: left;
        font-weight: bold;
        font-size: 12px;
        .illu-server {
            display: inline-block;
            width: 4px;
            height: 4px;
            border: 2px solid #4E94FF;
            border-radius:4px ;
        }
        .analysis {
            display: inline-block;
            width: 4px;
            height: 4px;
            border: 2px solid #4EF4FF;
            border-radius:4px ;
        }
    }
  }
}
</style>
</style>