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

zhangzengfei

2023-10-23 1db7db4bf02259e47d5d906d6b21ecc6451b0a09

 src/pages/settings/components/NetNode.vue

@@ -1,40 +1,30 @@
<template>
  <div class="net-node">
      <div class="vue-d3-network">
        <D3Network 
        ref='net'
        :net-nodes="nodes"
        :net-links="links"
        :options="options"
        />
      <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><span class="illu-server"></span> APS智能终端</div>

        <div>
      <!-- <div>
        <span class="analysis"></span> 分析盒子
        </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 () {
@@ -47,10 +37,10 @@

data () {
  return {
    //   settings: {
    //       maxLinks: 2,
    //       maxNodes: 130
    //   },
      settings: {
        maxLinks: 2,
        maxNodes: 15
      },
      nodes,
      links,
      options: {
@@ -71,7 +61,6 @@
          zoomOut:false
      } 
  }
  
},

components: {
@@ -88,76 +77,100 @@
    // },

    // 随机生成节点
    // makeRandomNodes (maxNodes) {
    //    let nodes = Array.apply(null, { length: maxNodes })
    //    .map((value, index) => { return this.newNode(index) })
    //    return nodes
    // },
    // newNode (nodeId) {
    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)
    // },
      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() {
      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.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,"server")
        } 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
            }     

        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
                }]
      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}
            }]
      return [
        ...this.links,
        {
          id: id,
          sid: sid,
          tid: tid,
          _color: color,
          _svgAttrs: { "stroke-width": 2 }
        }
      ]
    },

    // 调整作用力
@@ -185,9 +198,8 @@
        nodeSize: nodeSize,
        force
      }
    console.log( this.options);
    },

      console.log(this.options)
    }
  }
}
</script>
@@ -210,7 +222,13 @@

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

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

@@ -222,7 +240,8 @@
        font-weight: 700;
    }

    .zoom-in,.zoom-out {
  .zoom-in,
  .zoom-out {
        position: absolute;
        font-size: 21px;
        cursor: pointer;
@@ -257,7 +276,7 @@
        top: 180px;
        right: 20px;
        height: 40px;
        width: 68px;
    width: 100px;
        background-color: #fff;
        text-align: left;
        font-weight: bold;
@@ -266,14 +285,14 @@
            display: inline-block;
            width: 4px;
            height: 4px;
            border: 2px solid #4E94FF;
      border: 2px solid #4e94ff;
            border-radius:4px ;
        }
        .analysis {
            display: inline-block;
            width: 4px;
            height: 4px;
            border: 2px solid #4EF4FF;
      border: 2px solid #4ef4ff;
            border-radius:4px ;
        }
    }