From 1db7db4bf02259e47d5d906d6b21ecc6451b0a09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期一, 23 十月 2023 15:26:46 +0800
Subject: [PATCH] 添加集群手动选主节点, 无线网络显示ip
---
src/pages/settings/components/NetNode.vue | 427 +++++++++++++++++++++++++++-------------------------
1 files changed, 223 insertions(+), 204 deletions(-)
diff --git a/src/pages/settings/components/NetNode.vue b/src/pages/settings/components/NetNode.vue
index c4a42cf..8f32ea6 100644
--- a/src/pages/settings/components/NetNode.vue
+++ b/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}"></span>
+ <span class="icon iconfont zoom-in" @click="changeForce(1)" :class="{ 'zoom-disabled': disabled.zoomIn }"
+ ></span
+ >
- <span class="icon iconfont zoom-out"
- @click="changeForce(0)"
- :class="{'zoom-disabled'
- :disabled.zoomOut}"></span>
+ <span class="icon iconfont zoom-out" @click="changeForce(0)" :class="{ 'zoom-disabled': disabled.zoomOut }"
+ ></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>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0