| | |
| | | .net |
| | | d3-network( |
| | | ref='net' |
| | | v-if="nodes.length" |
| | | :net-nodes="nodes" |
| | | :net-links="links" |
| | | :options="options" |
| | |
| | | @node-hover='nodeHover' |
| | | @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"; |
| | | |
| | | |
| | | export default { |
| | | name: "SerfDiagram", |
| | | components: { |
| | |
| | | props: { |
| | | agent: String, |
| | | members: Array, |
| | | searchNodes: Array, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | }; |
| | | }, |
| | | 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() { |
| | | let n = new Array(); |
| | | this.searchNodes.forEach((v, i) => { |
| | | this.members.forEach((v, i) => { |
| | | n.push({ |
| | | id: i, |
| | | name: v.nodeName, |
| | |
| | | : "" |
| | | }); |
| | | }); |
| | | console.log(n) |
| | | |
| | | return n; |
| | | }, |
| | | links() { |
| | | let arr = new Array(); |
| | | let dup = new Array(); // Deduplicate to ensure that two nodes have only one line |
| | | const count = this.members.length; |
| | | |
| | | |
| | | switch (count) { |
| | | case 0: |
| | | case 1: |
| | |
| | | // is me? skip |
| | | continue; |
| | | } |
| | | |
| | | |
| | | if (!dup["d" + target + i]) { |
| | | arr.push({ sid: i, tid: target }); |
| | | dup["d" + i + target] = 1; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | return arr; |
| | | }, |
| | | options() { |
| | |
| | | created() { |
| | | this.reset(); |
| | | }, |
| | | mounted(){ |
| | | console.log(this.members) |
| | | console.log('innerNodes',this.innerNodes); |
| | | console.log('outerNodes',this.outerNodes) |
| | | }, |
| | | methods: { |
| | | nodeHover(event, node) { |
| | | console.log(node); |
| | |
| | | this.toolTipStyle.display = "block"; |
| | | this.toolTipStyle.top = node.y - 10 + "px"; |
| | | this.toolTipStyle.left = node.x + width / 2 - 30 + "px"; |
| | | |
| | | //this.toolTipNode = this.members[node.id].nodeName; |
| | | //this.toolTipAddr = this.members[node.id].Address; |
| | | |
| | | this.toolTipNode = this.members[node.id].nodeName; |
| | | this.toolTipAddr = this.members[node.id].Address; |
| | | }, |
| | | nodeOut(event, node) { |
| | | node._opacity = node.opacity; |
| | |
| | | // // is not nodeSelected |
| | | // } else { |
| | | // this.selectNode(node) |
| | | |
| | | |
| | | // } |
| | | // this.selectNodesLinks() |
| | | // this.$set(this.nodes, node.index, node) |
| | | console.log(event,node) |
| | | console.log(this.members) |
| | | console.log(this.members[node.id]) |
| | | debugger |
| | | if (event.timeStamp - this.movement < 200) { |
| | | this.$emit("selected-node", event, this.members[node.id]); |
| | | } |
| | |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | |
| | | <style> |
| | | .net { |
| | | height: 100%; |
| | | margin: 0; |
| | | } |
| | | |
| | | |
| | | .node { |
| | | /* stroke: rgba(18, 120, 98, 0.7); */ |
| | | stroke: rgba(76, 78, 78, 0.7); |
| | |
| | | /* fill: #dcfaf3; */ |
| | | fill: #e3e4e4; |
| | | } |
| | | |
| | | |
| | | .node.selected { |
| | | stroke: #caa455; |
| | | } |
| | | |
| | | |
| | | .node.pinned { |
| | | stroke: rgba(190, 56, 93, 0.6); |
| | | } |
| | | |
| | | |
| | | .link { |
| | | stroke: rgba(18, 120, 98, 0.3); |
| | | } |
| | | |
| | | |
| | | .link, |
| | | .node { |
| | | stroke-linecap: round; |
| | | } |
| | | |
| | | |
| | | .link:hover, |
| | | .node:hover { |
| | | stroke: #df8108; |
| | | stroke-width: 1px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | |
| | | .link.selected { |
| | | stroke: rgba(202, 164, 85, 0.6); |
| | | } |
| | | |
| | | |
| | | .curve { |
| | | fill: none; |
| | | } |
| | | |
| | | |
| | | .link-label, |
| | | .node-label { |
| | | /* fill: #127862; */ |
| | | fill: rgba(76, 78, 78, 0.7); |
| | | } |
| | | |
| | | |
| | | .link-label { |
| | | -webkit-transform: translateY(-0.5em); |
| | | transform: translateY(-0.5em); |
| | | text-anchor: middle; |
| | | } |
| | | |
| | | |
| | | .arrow_box { |
| | | position: absolute; |
| | | background: #fff; |
| | |
| | | font-size: 11px; |
| | | padding-left: 5px; |
| | | } |
| | | |
| | | |
| | | .arrow_box p { |
| | | height: 30px; |
| | | line-height: 30px; |
| | |
| | | position: absolute; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | |
| | | .arrow_box:after { |
| | | border-color: rgba(136, 183, 213, 0); |
| | | border-right-color: #fff; |
| | |
| | | border-width: 6px; |
| | | margin-top: -6px; |
| | | } |
| | | .clouds{ |
| | | height: 100%; |
| | | margin:0; |
| | | background:rgba(149, 221, 255, 0.322); |
| | | } |
| | | .inner{ |
| | | height:300px; |
| | | margin: 50px auto; |
| | | background:rgb(201 233 249); |
| | | } |
| | | </style> |
| | | </style> |
New file |
| | |
| | | <template lang='pug'> |
| | | .net |
| | | //- d3-network( |
| | | //- ref='net' |
| | | //- class="member" |
| | | //- v-if="memberNodes.length && !searchNodes.length" |
| | | //- :net-nodes="memberNodes" |
| | | //- :net-links="links" |
| | | //- :options="options" |
| | | //- :selection="{nodes: nodeSelected, links: linksSelected}" |
| | | //- @drag-start='dragStart' |
| | | //- @node-click='nodeClick' |
| | | //- @node-hover='nodeHover' |
| | | //- @node-out='nodeOut' |
| | | //- ) |
| | | d3-network( |
| | | ref='net' |
| | | class="search" |
| | | v-if="searchNodes.length" |
| | | :net-nodes="nodes" |
| | | :net-links="links" |
| | | :options="options" |
| | | :selection="{nodes: nodeSelected, links: linksSelected}" |
| | | @drag-start='dragStart' |
| | | @node-click='nodeClick' |
| | | @node-hover='nodeHover' |
| | | @node-out='nodeOut' |
| | | ) |
| | | //- .clouds(v-if="members.length") |
| | | //- d3-network( |
| | | //- ref='net' |
| | | //- v-if="memberNodes.length" |
| | | //- :net-nodes="memberNodes" |
| | | //- :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"; |
| | | |
| | | export default { |
| | | name: "SerfDiagram", |
| | | components: { |
| | | D3Network |
| | | }, |
| | | props: { |
| | | agent: String, |
| | | //members: Array, |
| | | searchNodes: Array, |
| | | }, |
| | | data() { |
| | | return { |
| | | nodeSize: 20, |
| | | fontSize: 20, |
| | | canvas: false, |
| | | toolTipStyle: { |
| | | display: "none", |
| | | height: "30px", |
| | | width: "120px" |
| | | } |
| | | }; |
| | | }, |
| | | computed: { |
| | | //分类节点 |
| | | //云内云边节点 |
| | | memberNodes(){ |
| | | let arr = []; |
| | | let mockMembers = [ |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46", |
| | | hardwareType: "01", |
| | | id: "DSVAD010120190622", |
| | | node_id: "DSVAD010120190622", |
| | | node_ip: "192.168.20.10:30190", |
| | | node_name: "开发20.10-1", |
| | | role: 'pc' |
| | | }, |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f", |
| | | hardwareType: "02", |
| | | id: "DSVAD010120190623", |
| | | node_id: "DSVAD010120190623", |
| | | node_ip: "192.168.20.10:30190", |
| | | node_name: "开发测试20.10-1", |
| | | role:'master' |
| | | }, |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2g", |
| | | hardwareType: "03", |
| | | id: "DSVAD010120190624", |
| | | node_id: "DSVAD010120190624", |
| | | node_ip: "192.168.20.10:30190", |
| | | node_name: "测试20.10-1", |
| | | role:'pc' |
| | | }, |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2h", |
| | | hardwareType: "03", |
| | | id: "DSVAD010120190625", |
| | | node_id: "DSVAD010120190625", |
| | | node_ip: "192.168.20.10:30190", |
| | | node_name: "测试20.101-1", |
| | | role:'server' |
| | | }, |
| | | ] |
| | | //this.members.forEach(item=>{ |
| | | |
| | | mockMembers.forEach(item=>{ |
| | | if(item.hardwareType=='03'){ |
| | | arr.push({ |
| | | id:item.id, |
| | | cluster_id:item.cluster_id, |
| | | name:item.nodeName, |
| | | svgSym: RoleIcon[item.role], |
| | | x: -10, |
| | | y: -10, |
| | | _color: |
| | | this.agent === item.nodeName |
| | | ? "red" |
| | | : item.role === "master" |
| | | ? "orange" |
| | | : "" |
| | | }); |
| | | }else{ |
| | | 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('serf-mem',arr) |
| | | return arr; |
| | | }, |
| | | //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() { |
| | | let n = new Array(); |
| | | this.searchNodes.forEach((v, i) => { |
| | | n.push({ |
| | | id: v.id, |
| | | cluster_id: v.cluster_id, |
| | | name: v.nodeName, |
| | | svgSym: RoleIcon[v.role], |
| | | _color: |
| | | this.agent === v.nodeName |
| | | ? "red" |
| | | : v.role === "master" |
| | | ? "orange" |
| | | : "" |
| | | }); |
| | | }); |
| | | console.log(n) |
| | | return n; |
| | | }, |
| | | links() { |
| | | let arr = new Array(); |
| | | let dup = new Array(); // Deduplicate to ensure that two nodes have only one line |
| | | const count = this.members.length; |
| | | |
| | | switch (count) { |
| | | case 0: |
| | | case 1: |
| | | break; |
| | | case 2: |
| | | arr = [{ sid: 0, tid: 1 }]; |
| | | break; |
| | | case 3: |
| | | arr = [{ sid: 0, tid: 1 }, { sid: 1, tid: 2 }, { sid: 0, tid: 2 }]; |
| | | break; |
| | | default: |
| | | for (let i = 0; i < count; i++) { |
| | | let loop = Math.round(Math.random() * 5 + 2); // At least 2 times |
| | | for (let j = 0; j < loop; j++) { |
| | | let target = Math.round(Math.random() * (count - 1)); |
| | | if (target === i) { |
| | | // is me? skip |
| | | continue; |
| | | } |
| | | |
| | | if (!dup["d" + target + i]) { |
| | | arr.push({ sid: i, tid: target }); |
| | | dup["d" + i + target] = 1; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | return arr; |
| | | }, |
| | | |
| | | options() { |
| | | return { |
| | | force: 3000, |
| | | nodeSize: this.nodeSize, |
| | | fontSize: this.fontSize, |
| | | nodeLabels: true, |
| | | canvas: this.canvas, |
| | | linkWidth: 0, |
| | | size: { |
| | | w: 745, |
| | | h: 426 |
| | | } |
| | | }; |
| | | } |
| | | }, |
| | | watch:{ |
| | | searchNodes(n,o){ |
| | | console.log(n,o) |
| | | } |
| | | }, |
| | | created() { |
| | | |
| | | this.reset(); |
| | | }, |
| | | mounted(){ |
| | | console.log('searchNodes',this.searchNodes) |
| | | console.log(this.members) |
| | | console.log('innerNodes',this.innerNodes); |
| | | console.log('outerNodes',this.outerNodes) |
| | | }, |
| | | methods: { |
| | | 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"; |
| | | |
| | | //this.toolTipNode = this.members[node.id].nodeName; |
| | | //this.toolTipAddr = this.members[node.id].Address; |
| | | }, |
| | | nodeOut(event, node) { |
| | | node._opacity = node.opacity; |
| | | node._size = node.size; |
| | | this.toolTipStyle.display = "none"; |
| | | }, |
| | | dragStart(event) { |
| | | if (event) { |
| | | this.movement = event.timeStamp; |
| | | } |
| | | }, |
| | | nodeClick(event, node) { |
| | | // if (this.nodeSelected[node.id]) { |
| | | // this.unSelectNode(node.id) |
| | | // // is not nodeSelected |
| | | // } else { |
| | | // this.selectNode(node) |
| | | |
| | | // } |
| | | // this.selectNodesLinks() |
| | | // this.$set(this.nodes, node.index, node) |
| | | console.log(event,node) |
| | | console.log(this.members) |
| | | console.log(this.members[node.id]) |
| | | if (event.timeStamp - this.movement < 200) { |
| | | //this.$emit("selected-node", event, this.members[node.id]); |
| | | debugger |
| | | let someNode = this.members.find(one=>one.id == node.id) |
| | | this.$emit("selected-node", event, someNode); |
| | | } |
| | | }, |
| | | reset() { |
| | | this.nodeSelected = {}; |
| | | this.linksSelected = {}; |
| | | (this.toolTipNode = ""), (this.toolTipAddr = ""), (this.movement = 0); |
| | | }, |
| | | unSelectNode(nodeId) { |
| | | if (this.nodeSelected[nodeId]) { |
| | | delete this.nodeSelected[nodeId]; |
| | | } |
| | | this.selectNodesLinks(); |
| | | }, |
| | | unSelectLink(linkId) { |
| | | if (this.linksSelected[linkId]) { |
| | | delete this.linksSelected[linkId]; |
| | | } |
| | | }, |
| | | selectNode(node) { |
| | | this.nodeSelected[node.id] = node; |
| | | }, |
| | | selectLink(link) { |
| | | this.$set(this.linksSelected, link.id, link); |
| | | }, |
| | | selectNodesLinks() { |
| | | for (let link of this.links) { |
| | | // node is nodeSelected |
| | | if (this.nodeSelected[link.sid] || this.nodeSelected[link.tid]) { |
| | | this.selectLink(link); |
| | | } else { |
| | | this.unSelectLink(link.id); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style> |
| | | .net { |
| | | height: 100%; |
| | | margin: 0; |
| | | } |
| | | |
| | | .node { |
| | | /* stroke: rgba(18, 120, 98, 0.7); */ |
| | | stroke: rgba(76, 78, 78, 0.7); |
| | | stroke-width: 3px; |
| | | -webkit-transition: fill 0.5s ease; |
| | | transition: fill 0.5s ease; |
| | | /* fill: #dcfaf3; */ |
| | | fill: #e3e4e4; |
| | | } |
| | | |
| | | .node.selected { |
| | | stroke: #caa455; |
| | | } |
| | | |
| | | .node.pinned { |
| | | stroke: rgba(190, 56, 93, 0.6); |
| | | } |
| | | |
| | | .link { |
| | | stroke: rgba(18, 120, 98, 0.3); |
| | | } |
| | | |
| | | .link, |
| | | .node { |
| | | stroke-linecap: round; |
| | | } |
| | | |
| | | .link:hover, |
| | | .node:hover { |
| | | stroke: #df8108; |
| | | stroke-width: 1px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .link.selected { |
| | | stroke: rgba(202, 164, 85, 0.6); |
| | | } |
| | | |
| | | .curve { |
| | | fill: none; |
| | | } |
| | | |
| | | .link-label, |
| | | .node-label { |
| | | /* fill: #127862; */ |
| | | fill: rgba(76, 78, 78, 0.7); |
| | | } |
| | | |
| | | .link-label { |
| | | -webkit-transform: translateY(-0.5em); |
| | | transform: translateY(-0.5em); |
| | | text-anchor: middle; |
| | | } |
| | | |
| | | .arrow_box { |
| | | position: absolute; |
| | | background: #fff; |
| | | /* border: 1px solid #127862; */ |
| | | border: 1px solid rgba(76, 78, 78, 0.7); |
| | | font-size: 11px; |
| | | padding-left: 5px; |
| | | } |
| | | |
| | | .arrow_box p { |
| | | height: 30px; |
| | | line-height: 30px; |
| | | width: 100px; |
| | | overflow: hidden; |
| | | } |
| | | .arrow_box:after, |
| | | .arrow_box:before { |
| | | right: 100%; |
| | | top: 50%; |
| | | border: solid transparent; |
| | | content: " "; |
| | | height: 0; |
| | | width: 0; |
| | | position: absolute; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .arrow_box:after { |
| | | border-color: rgba(136, 183, 213, 0); |
| | | border-right-color: #fff; |
| | | border-width: 5px; |
| | | margin-top: -5px; |
| | | } |
| | | .arrow_box:before { |
| | | border-color: rgba(194, 225, 245, 0); |
| | | border-right-color: #323333; |
| | | border-width: 6px; |
| | | margin-top: -6px; |
| | | } |
| | | .clouds{ |
| | | height: 100%; |
| | | margin:0; |
| | | background:rgba(149, 221, 255, 0.322); |
| | | } |
| | | .inner{ |
| | | /* height:300px; |
| | | margin: 50px auto; */ |
| | | background:rgba(152, 183, 251, 0.39); |
| | | } |
| | | </style> |
| | |
| | | }; |
| | | </script> |
| | | <style> |
| | | /* .net-svg{ |
| | | background-color: aquamarine; |
| | | border-radius: 50%; |
| | | } */ |
| | | .net-svg{ |
| | | background-color: rgba(127, 255, 212, 0.198); |
| | | } |
| | | </style> |
| | |
| | | <div class="svg-wrap">
|
| | | <img
|
| | | class="baseImg"
|
| | | :src="`data:image/png;base64,${item.iconBlob}`"
|
| | | :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
|
| | | alt
|
| | | />
|
| | | </div>
|
| | |
| | | </div>
|
| | | <div class="alg-name">
|
| | | <div style="padding:0px 10px 0px 10px;">
|
| | | <span v-if="!item.isEdit">{{ item.sdk_name }}</span>
|
| | | <span v-if="!item.isEdit">{{ item.name }}</span>
|
| | | <el-input
|
| | | size="small"
|
| | | v-model="item.sdk_name"
|
| | | v-model="item.name"
|
| | | v-if="item.isEdit"
|
| | | v-focus
|
| | | :maxlength="15"
|
New file |
| | |
| | | <template> |
| | | <div class="cloud"> |
| | | <div class="inner"> |
| | | <div class="rect"> |
| | | <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :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-name">{{item.nodeName}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="outer"> |
| | | <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :style="{top:36*(index+1)+'px',left:80*(index+1)+'px'}"> |
| | | <span class="node-icon"> |
| | | <!-- <img :src="nodeIcons[item.workType]" alt=""> --> |
| | | </span> |
| | | <span class="node-name">{{item.nodeName}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | export default { |
| | | name:'cloudNode', |
| | | props:{ |
| | | nodes: Array |
| | | }, |
| | | data(){ |
| | | return { |
| | | nodeIcons:[], |
| | | mockData:[ |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46", |
| | | hardwareType: "01", |
| | | id: "DSVAD010120190622", |
| | | node_id: "DSVAD010120190622", |
| | | node_ip: "192.168.20.10:30190", |
| | | nodeName: "开发20.10-1", |
| | | role: 'pc' |
| | | }, |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f", |
| | | hardwareType: "02", |
| | | id: "DSVAD010120190623", |
| | | node_id: "DSVAD010120190623", |
| | | node_ip: "192.168.20.10:30190", |
| | | nodeName: "开发测试20.10-1", |
| | | role:'master' |
| | | }, |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2g", |
| | | hardwareType: "03", |
| | | id: "DSVAD010120190624", |
| | | node_id: "DSVAD010120190624", |
| | | node_ip: "192.168.20.10:30190", |
| | | nodeName: "测试20.10-1", |
| | | role:'pc' |
| | | }, |
| | | { |
| | | cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2h", |
| | | hardwareType: "03", |
| | | id: "DSVAD010120190625", |
| | | node_id: "DSVAD010120190625", |
| | | node_ip: "192.168.20.10:30190", |
| | | nodeName: "测试20.101-1", |
| | | role:'server' |
| | | }, |
| | | ] |
| | | } |
| | | }, |
| | | computed:{ |
| | | |
| | | insideNodes(){ |
| | | //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02'); |
| | | return this.mockData.filter(item=>item.hardwareType=='01'||item.hardwareType=='02'); |
| | | }, |
| | | outsideNodes(){ |
| | | //return this.nodes.filter(item=>item.hardwareType=='03'); |
| | | return this.mockData.filter(item=>item.hardwareType=='03'); |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss"> |
| | | .cloud{ |
| | | width: 100%; |
| | | height: 500px; |
| | | display: flex; |
| | | .inner{ |
| | | width: 50%; |
| | | background: url('/images/settings/cloud.png') no-repeat; |
| | | background-size: 100%; |
| | | .rect{ |
| | | background:cornflowerblue; |
| | | position: relative; |
| | | .node{ |
| | | position: absolute; |
| | | .node-icon{ |
| | | width:40px; |
| | | height:40px; |
| | | } |
| | | .node-name{ |
| | | font-size:14px; |
| | | color: #333; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .outer{ |
| | | width:50%; |
| | | position: relative; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | </el-form> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12" style="height: 100%;" v-if="members.length !== 0"> |
| | | <el-col :span="12" style="height: 100%;" v-if="members.length !== 0 && isSearch" class="node-container"> |
| | | <serfDiagram |
| | | ref="diagram" |
| | | :members="members" |
| | | :searchNodes="nodes" |
| | | :agent="agentName" |
| | | v-loading="loading" |
| | | @selected-node="joinNode" |
| | | class="nodes-svg" |
| | | ></serfDiagram> |
| | | </el-col> |
| | | <el-col :span="12" style="height: 100%;" v-if="innerNodes.length !== 0 && !isSearch" class="node-container"> |
| | | <cloud-node :nodes="innerNodes"> |
| | | </cloud-node> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | |
| | | import { |
| | | getDevInfo |
| | | } from "@/api/system"; |
| | | |
| | | import cloudNode from "./CloudNode"; |
| | | import serfDiagram from "@/components/serfDiagram"; |
| | | import ipInput from "@/components/subComponents/IPInput"; |
| | | import {isIPv4} from "@/scripts/validate"; |
| | | export default { |
| | | components: { |
| | | serfDiagram, |
| | | ipInput |
| | | ipInput, |
| | | cloudNode |
| | | }, |
| | | data() { |
| | | const checkPwd = (rule, value, callback) => { |
| | |
| | | esNodes: [], |
| | | scheduleId: "", |
| | | isHasColony: false, |
| | | isSearch: false, |
| | | currentCluster: {}, |
| | | searchNum: "", |
| | | loading: false, |
| | | searchDis: false, |
| | | agentName: "", |
| | | members: [], |
| | | nodes: [], |
| | | innerNodes: [], |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | } |
| | | }, |
| | | async searchColony() { |
| | | this.isSearch = true; |
| | | this.$refs["joinForm"].validate(valid => { |
| | | if (valid) { |
| | | this.members = []; |
| | |
| | | .catch(() => { |
| | | this.searchDis = false; |
| | | this.loading = false; |
| | | this.isSearch = false; |
| | | }); |
| | | } else { |
| | | this.searchDis = false; |
| | | this.loading = false; |
| | | this.isSearch = false; |
| | | return false; |
| | | } |
| | | }); |
| | |
| | | return element.node_id === i.node_id; |
| | | }); |
| | | if (found === undefined) { |
| | | //this.members.push(i); |
| | | this.nodes.push(i); |
| | | this.members.push(i); |
| | | } |
| | | }); |
| | | } |
| | |
| | | this.ruleForm.clustername = res.data.clusterName; |
| | | this.ruleForm.clusterpwd = res.data.clusterpwd |
| | | this.ruleForm.virtualIp = res.data.virtualIp |
| | | let list = res.data.nodes.map(i => { |
| | | debugger |
| | | //let list = res.data.nodes.map(i => { |
| | | this.isSearch = false; |
| | | this.innerNodes = res.data.nodes.map(i => { |
| | | let obj = {}; |
| | | obj.device_type = i.device_type; |
| | | obj.workType = i.device_type.substr(2,2); |
| | |
| | | obj.role = i.role ? i.role : "pc"; |
| | | return obj; |
| | | }); |
| | | this.members = this.members.concat(list); |
| | | |
| | | //this.members = this.members.concat(list); |
| | | console.log(this.members) |
| | | } else { |
| | | this.isHasColony = false; |
| | |
| | | this.isHasColony = false; |
| | | this.activeName = "1"; |
| | | this.members = []; |
| | | this.innerNodes = []; |
| | | } |
| | | }).catch(() => { }); |
| | | |
| | |
| | | line-height: 30px; |
| | | } |
| | | .nodes-svg{ |
| | | background-color: rgba(127, 255, 212, 0.459); |
| | | background-color: rgba(127, 172, 255, 0.459); |
| | | } |
| | | </style> |