| | |
| | | .net |
| | | d3-network( |
| | | ref='net' |
| | | :startX="startX" |
| | | :net-nodes="nodes" |
| | | :net-links="links" |
| | | :options="options" |
| | |
| | | props: { |
| | | agent: String, |
| | | members: Array, |
| | | sizeX: Number, |
| | | sizeY: Number, |
| | | startX: Number |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | 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 |
| | | } |
| | | }; |
| | | } |
| | |
| | | } |
| | | }; |
| | | </script> |
| | | <style> |
| | | .net-svg{ |
| | | background-color: rgba(127, 255, 212, 0.198); |
| | | } |
| | | </style> |
| | | |
| | |
| | | svgRenderer |
| | | }, |
| | | props: { |
| | | startX: Number, |
| | | netNodes: { |
| | | type: Array |
| | | }, |
| | |
| | | canvas: false, |
| | | nodes: [], |
| | | links: [], |
| | | nodeX: [], |
| | | nodeY: [], |
| | | minWidth:0, |
| | | minHeight:0, |
| | | size: { |
| | | w: 500, |
| | | h: 420 |
| | |
| | | vm.$set(node, "_opacity", node._size / 30); |
| | | vm.$set(node, "opacity", node._opacity); |
| | | } |
| | | |
| | | // this.nodeX.push(node.x); |
| | | // this.nodeY.push(node.y); |
| | | // this.minWidth = Math.max(...this.nodeX) - Math.min(...this.nodeX); |
| | | // this.minHeight = Math.max(...this.nodeY) - Math.min(...this.nodeY); |
| | | // console.log(this.nodeX,this.nodeY,this.minWidth,this.minHeight); |
| | | return node; |
| | | }); |
| | | }, |
| | |
| | | if (forces.Center !== false) |
| | | sim.force("center", d3.forceCenter(this.center.x, this.center.y)); |
| | | if (forces.X !== false) { |
| | | sim.force("X", d3.forceX(this.center.x).strength(forces.X)); |
| | | //sim.force("X", d3.forceX(this.center.x).strength(forces.X)); |
| | | sim.force("X", d3.forceX(this.startX||160).strength(forces.X)); |
| | | } |
| | | if (forces.Y !== false) { |
| | | sim.force("Y", d3.forceY(this.center.y).strength(forces.Y)); |
| | |
| | | <template> |
| | | <div class="cloud"> |
| | | <div class="inner"> |
| | | <!-- <div |
| | | class="rect" |
| | | :style="{width:`${minWidth+BaseWidth}px`,height:`${minHeight+BaseHeight}px`}" |
| | | >--> |
| | | <div class="rect"> |
| | | <div |
| | | <!-- <div |
| | | class="node" |
| | | v-for="(item,index) in insideNodes" |
| | | v-for="item in insideNodes" |
| | | :key="item.id" |
| | | :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}" |
| | | :style="{top:item.t+'px',left:item.l+'px'}" |
| | | > |
| | | <span class="node-icon"> |
| | | <!-- <img :src="nodeIcons[item.workType]" alt=""> --> |
| | | </span> |
| | | <span class="node-name">{{item.nodeName}}</span> |
| | | </div> |
| | | </div>--> |
| | | <serfDiagram |
| | | ref="inside-nodes" |
| | | :members="insideNodes" |
| | | :agent="agentName" |
| | | :sizeX="400" |
| | | :sizeY="330" |
| | | class="inside-nodes" |
| | | ></serfDiagram> |
| | | </div> |
| | | </div> |
| | | <div class="outer"> |
| | | <div |
| | | <serfDiagram |
| | | ref="outer-nodes" |
| | | :members="outsideNodes" |
| | | :agent="agentName" |
| | | :sizeX="230" |
| | | :sizeY="370" |
| | | :startX="60" |
| | | class="outer-nodes" |
| | | ></serfDiagram> |
| | | <!-- <div |
| | | class="node" |
| | | v-for="(item,index) in insideNodes" |
| | | v-for="(item,index) in outsideNodes" |
| | | :key="item.id" |
| | | :style="{top:36*(index+1)+'px',left:80*(index+1)+'px'}" |
| | | :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}" |
| | | > |
| | | <span class="node-icon"> |
| | | <!-- <img :src="nodeIcons[item.workType]" alt=""> --> |
| | | </span> |
| | | <span class="node-icon"></span> |
| | | <span class="node-name">{{item.nodeName}}</span> |
| | | </div> |
| | | </div>--> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import SerfDiagram from "@/components/serfDiagram"; |
| | | export default { |
| | | name: 'cloudNode', |
| | | props: { |
| | | nodes: Array |
| | | }, |
| | | components: { |
| | | SerfDiagram |
| | | }, |
| | | data () { |
| | | return { |
| | | |
| | | agentName: '', |
| | | nodeIcons: [], |
| | | //insideNodes: [], |
| | | BaseWidth: 150, |
| | | BaseHeight: 70, |
| | | minWidth: 0, |
| | | minHeight: 0, |
| | | mockData: [ |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46", |
| | |
| | | id: "DSVAD010120190623", |
| | | node_id: "DSVAD010120190623", |
| | | node_ip: "192.168.20.10:30190", |
| | | nodeName: "开发测试20.10-1", |
| | | nodeName: "开发测试20.11-1", |
| | | role: 'master' |
| | | }, |
| | | { |
| | |
| | | id: "DSVAD010120190624", |
| | | node_id: "DSVAD010120190624", |
| | | node_ip: "192.168.20.10:30190", |
| | | nodeName: "测试20.10-1", |
| | | nodeName: "测试20.13-1", |
| | | role: 'pc' |
| | | }, |
| | | { |
| | |
| | | nodeName: "测试20.101-1", |
| | | role: 'server' |
| | | }, |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614cf", |
| | | hardwareType: "02", |
| | | id: "DSVAD01012019063", |
| | | node_id: "DSVAD01012019063", |
| | | node_ip: "192.168.20.10:30190", |
| | | nodeName: "开发测试20.15-1", |
| | | role: 'master' |
| | | }, |
| | | { |
| | | cluster_id: "b6132bfe-d3af-710-ba89-436f614cf", |
| | | hardwareType: "02", |
| | | id: "DSVAD0101201906", |
| | | node_id: "DSVAD0101209063", |
| | | node_ip: "192.168.20.10:30190", |
| | | nodeName: "k20.15-128437586", |
| | | role: 'master' |
| | | }, |
| | | { |
| | | cluster_id: "b612bfe-d3af-710-ba89-436f614cf", |
| | | hardwareType: "02", |
| | | id: "DSVAD010120906", |
| | | node_id: "DSVAD010120963", |
| | | node_ip: "192.168.20.107:30190", |
| | | nodeName: "kfl20.15-127586", |
| | | role: 'master' |
| | | }, |
| | | ] |
| | | } |
| | | }, |
| | | mounted () { |
| | | //this.getInsideNodes(); |
| | | }, |
| | | methods: { |
| | | getRandom (index) { |
| | | if (index % 2 == 0) { |
| | | return Math.random() * 20 |
| | | } else { |
| | | return Math.random() * 50 |
| | | } |
| | | }, |
| | | getInsideNodes () { |
| | | //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02'); |
| | | //return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02'); |
| | | let arr = this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02'); |
| | | let len = arr.length; |
| | | let lefts = []; |
| | | let tops = []; |
| | | this.insideNodes = arr.map((item, index) => { |
| | | lefts.push((20 - len) * (index + 1) + this.getRandom(index)); |
| | | tops.push(30 * (index + 1)); |
| | | return { |
| | | l: 10 + this.getRandom(index), |
| | | t: 30 * (index + 1), |
| | | nodeName: item.nodeName, |
| | | id: item.id, |
| | | workType: item.workType |
| | | } |
| | | }); |
| | | this.minWidth = Math.max(...lefts) - Math.min(...lefts); |
| | | this.minHeight = Math.max(...tops) - Math.min(...tops); |
| | | console.log('w,h', this.minWidth, this.minHeight); |
| | | }, |
| | | }, |
| | | computed: { |
| | | cloudPic () { |
| | | return '/images/settings/cloud.png' |
| | | }, |
| | | insideNodes () { |
| | | //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02'); |
| | | return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02'); |
| | | return this.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02'); |
| | | }, |
| | | // insideNodes () { |
| | | // //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02'); |
| | | // //return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02'); |
| | | // let arr = this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02'); |
| | | // let len = arr.length; |
| | | // let lefts = []; |
| | | // let tops = []; |
| | | // let temp = arr.map((item,index)=>{ |
| | | // lefts.push((20-len)*(index+1)); |
| | | // tops.push(30*(index+1)); |
| | | // return { |
| | | // l: (20-len)*(index+1), |
| | | // t: 30*(index+1), |
| | | // nodeName: item.nodeName, |
| | | // id: item.id, |
| | | // workType: item.workType |
| | | // } |
| | | // }); |
| | | // return temp; |
| | | // }, |
| | | outsideNodes () { |
| | | //return this.nodes.filter(item=>item.hardwareType=='03'); |
| | | return this.mockData.filter(item => item.hardwareType == '03'); |
| | |
| | | .inner { |
| | | background: url('/images/settings/cloud.png') no-repeat; |
| | | background-size: 100%; |
| | | width: 50%; |
| | | .rect { |
| | | margin: 100px; |
| | | background: cornflowerblue; |
| | | //background: rgba(176, 203, 253, 0.3); |
| | | position: relative; |
| | | margin: 100px; |
| | | .node { |
| | | position: absolute; |
| | | .node-icon { |
| | |
| | | } |
| | | } |
| | | .outer { |
| | | width: 50%; |
| | | width: 40%; |
| | | position: relative; |
| | | .node { |
| | | position: absolute; |