From 355de6d28489e9ff3d17138575c2fef32266930e Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 15 十月 2020 16:13:08 +0800
Subject: [PATCH] 应用中心未安装算法图标修复,集群节点展示组件更新
---
src/components/serfDiagram/indexC.vue | 499 +++++++++++++++++++++++++++++++++++
src/pages/ai/index/App.vue | 6
src/pages/settings/components/ClusterManagement.vue | 32 +
public/images/settings/cloud.png | 0
src/pages/settings/components/CloudNode.vue | 115 ++++++++
src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue | 7
src/components/serfDiagram/index.vue | 165 +---------
7 files changed, 668 insertions(+), 156 deletions(-)
diff --git a/public/images/settings/cloud.png b/public/images/settings/cloud.png
new file mode 100644
index 0000000..34fee95
--- /dev/null
+++ b/public/images/settings/cloud.png
Binary files differ
diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 544fb8a..179f7d8 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -2,7 +2,6 @@
.net
d3-network(
ref='net'
- v-if="nodes.length"
:net-nodes="nodes"
:net-links="links"
:options="options"
@@ -12,42 +11,12 @@
@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: {
@@ -56,7 +25,6 @@
props: {
agent: String,
members: Array,
- searchNodes: Array,
},
data() {
return {
@@ -71,72 +39,9 @@
};
},
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.杈硅妭鐐�(鐜板搴攂it)
- 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,
@@ -149,14 +54,14 @@
: ""
});
});
- 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:
@@ -176,7 +81,7 @@
// is me? skip
continue;
}
-
+
if (!dup["d" + target + i]) {
arr.push({ sid: i, tid: target });
dup["d" + i + target] = 1;
@@ -184,7 +89,7 @@
}
}
}
-
+
return arr;
},
options() {
@@ -205,11 +110,6 @@
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);
@@ -219,9 +119,9 @@
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;
@@ -239,13 +139,12 @@
// // 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]);
}
@@ -285,13 +184,13 @@
}
};
</script>
-
+
<style>
.net {
height: 100%;
margin: 0;
}
-
+
.node {
/* stroke: rgba(18, 120, 98, 0.7); */
stroke: rgba(76, 78, 78, 0.7);
@@ -301,51 +200,51 @@
/* 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;
@@ -354,7 +253,7 @@
font-size: 11px;
padding-left: 5px;
}
-
+
.arrow_box p {
height: 30px;
line-height: 30px;
@@ -372,7 +271,7 @@
position: absolute;
pointer-events: none;
}
-
+
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
@@ -385,14 +284,4 @@
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>
\ No newline at end of file
diff --git a/src/components/serfDiagram/indexC.vue b/src/components/serfDiagram/indexC.vue
new file mode 100644
index 0000000..4a37ec7
--- /dev/null
+++ b/src/components/serfDiagram/indexC.vue
@@ -0,0 +1,499 @@
+<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.杈硅妭鐐�(鐜板搴攂it)
+ 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>
diff --git a/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue b/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue
index 943753b..43cfaec 100644
--- a/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue
+++ b/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue
@@ -206,8 +206,7 @@
};
</script>
<style>
- /* .net-svg{
- background-color: aquamarine;
- border-radius: 50%;
- } */
+ .net-svg{
+ background-color: rgba(127, 255, 212, 0.198);
+ }
</style>
diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 7e79300..c6cc3ad 100644
--- a/src/pages/ai/index/App.vue
+++ b/src/pages/ai/index/App.vue
@@ -97,7 +97,7 @@
<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>
@@ -269,10 +269,10 @@
</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"
diff --git a/src/pages/settings/components/CloudNode.vue b/src/pages/settings/components/CloudNode.vue
new file mode 100644
index 0000000..74a8f55
--- /dev/null
+++ b/src/pages/settings/components/CloudNode.vue
@@ -0,0 +1,115 @@
+<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>
\ No newline at end of file
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index 8ab8f83..8bc48eb 100644
--- a/src/pages/settings/components/ClusterManagement.vue
+++ b/src/pages/settings/components/ClusterManagement.vue
@@ -100,16 +100,19 @@
</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>
@@ -189,14 +192,15 @@
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) => {
@@ -268,13 +272,14 @@
esNodes: [],
scheduleId: "",
isHasColony: false,
+ isSearch: false,
currentCluster: {},
searchNum: "",
loading: false,
searchDis: false,
agentName: "",
members: [],
- nodes: [],
+ innerNodes: [],
};
},
mounted() {
@@ -372,6 +377,7 @@
}
},
async searchColony() {
+ this.isSearch = true;
this.$refs["joinForm"].validate(valid => {
if (valid) {
this.members = [];
@@ -389,10 +395,12 @@
.catch(() => {
this.searchDis = false;
this.loading = false;
+ this.isSearch = false;
});
} else {
this.searchDis = false;
this.loading = false;
+ this.isSearch = false;
return false;
}
});
@@ -429,8 +437,7 @@
return element.node_id === i.node_id;
});
if (found === undefined) {
- //this.members.push(i);
- this.nodes.push(i);
+ this.members.push(i);
}
});
}
@@ -475,8 +482,9 @@
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);
@@ -492,7 +500,8 @@
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;
@@ -550,6 +559,7 @@
this.isHasColony = false;
this.activeName = "1";
this.members = [];
+ this.innerNodes = [];
}
}).catch(() => { });
@@ -778,6 +788,6 @@
line-height: 30px;
}
.nodes-svg{
- background-color: rgba(127, 255, 212, 0.459);
+ background-color: rgba(127, 172, 255, 0.459);
}
</style>
--
Gitblit v1.8.0