From 4aa13af3c74cf57d70bad9c4bc53b2c26e04fb5d Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 26 一月 2022 13:46:53 +0800
Subject: [PATCH] 集群管理搜索集群
---
src/pages/settings/views/clusterManagement.vue | 89 +++++++++++++++++++++++++++++++++-----------
1 files changed, 66 insertions(+), 23 deletions(-)
diff --git a/src/pages/settings/views/clusterManagement.vue b/src/pages/settings/views/clusterManagement.vue
index 1c396a2..5115d54 100644
--- a/src/pages/settings/views/clusterManagement.vue
+++ b/src/pages/settings/views/clusterManagement.vue
@@ -2,7 +2,8 @@
<div class="all">
<!-- -->
<div class="cluster-guanli" v-if="showCurCluster && isHasColony">
- <cloud-node :nodes="innerNodes"></cloud-node>
+ <!-- <cloud-node :nodes="innerNodes"></cloud-node> -->
+ <net-node :innerNodes="innerNodes"></net-node>
<div class="cls-bar">瑙嗛鍒嗘瀽闆嗙兢绠＄悊</div>
@@ -92,7 +93,11 @@
</div>
<!-- !showCurCluster || !isHasColony -->
<div class="cluster-content" v-if="!showCurCluster || !isHasColony">
- <div class="cluster-center" ref="left" v-if="!showCurCluster || !isHasColony">
+ <div
+ class="cluster-center"
+ ref="left"
+ v-if="!showCurCluster || !isHasColony"
+ >
<div
class="menu-item"
:class="activePage == i ? 'menu-item-active' : ''"
@@ -157,15 +162,14 @@
:rules="joinExistRules"
ref="joinForm"
class="join-form"
-
v-loading="joinLoading"
>
- <el-form-item prop="clusterid">
+ <el-form-item prop="clusterid">
<div class="p-title">闆嗙兢ID</div>
<el-input v-model="joinForm.clusterid" size="small"></el-input>
</el-form-item>
- <el-form-item prop="clusterip">
+ <el-form-item prop="clusterip">
<div class="p-title">IP鍦板潃</div>
<el-input
v-model="joinForm.clusterip"
@@ -174,7 +178,7 @@
autocomplete="new-password"
></el-input>
</el-form-item>
- <el-form-item prop="clusterpwd">
+ <el-form-item prop="clusterpwd">
<div class="p-title">闆嗙兢瀵嗙爜</div>
<el-input
v-model="joinForm.clusterpwd"
@@ -201,9 +205,20 @@
</el-input>
</el-form-item>
</el-form>
- <div class="btns">
- <div class="ok" @click="join('joinForm')">鍔犲叆闆嗙兢</div>
- </div>
+ <div class="clu-list">
+ <div
+ class="clu-item"
+ v-for="(item, index) in members"
+ :key="index"
+ @click="pickNode(index)"
+ >
+ <i class="iconfont"></i>
+ {{ item.Address }}
+ </div>
+ </div>
+ <div class="btns">
+ <div class="ok" @click="join('joinForm')">鍔犲叆闆嗙兢</div>
+ </div>
</div>
</div>
</div>
@@ -222,7 +237,8 @@
updateClusterName,
joinCluster,
} from "@/api/clusterManage";
-import cloudNode from "../components/CloudNode";
+// import cloudNode from "../components/CloudNode";
+import NetNode from "../components/NetNode";
import ipInput from "../components/IPInput";
import { isIPv4 } from "@/scripts/validate";
@@ -254,6 +270,7 @@
activePage: 0,
inputIp: "",
serverIp: "",
+ pickedNodeI: null,
members: [],
virtualIp: "192.168.1.188",
searchDis: false,
@@ -285,18 +302,19 @@
clustername: [
{ required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "blur" },
],
- clusterpwd: [{ validator: checkPwd, trigger: "blur" }],
+ clusterpwd: [{ validator: checkPwd, required: true }],
virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],
},
joinExistRules: {
clusterid: [{ validator: checkID, trigger: "blur" }],
clusterip: [{ validator: isIPv4, trigger: "blur" }],
- clusterpwd: [{ validator: checkPwd, trigger: "blur" }],
+ clusterpwd: [{ validator: checkPwd, required: true }],
},
};
},
components: {
- cloudNode,
+ // cloudNode,
+ NetNode,
ipInput,
},
mounted() {
@@ -309,6 +327,9 @@
clearInterval(this.intervalTimer);
},
methods: {
+ pickNode(index) {
+ // this.pickedNodeI=index
+ },
async createCluster(json) {
let res = await createSerfCluster(json);
this.$notify({
@@ -354,21 +375,20 @@
});
},
join(formName) {
- debugger
let _this = this;
this.$refs[formName].validate((valid) => {
- debugger
if (valid) {
- debugger
_this.joinLoading = true;
- let nodeIps = _this.members.map((i) => {
- return i.Address;
- });
+ // let nodeIps = _this.members.map((i) => {
+ // return i.Address;
+ // });
+ debugger;
let data = {
clusterId: _this.joinForm.clusterid,
password: _this.joinForm.clusterpwd,
nodeIps: [_this.joinForm.clusterip],
};
+ debugger;
_this
.joinCluster(data)
.then(() => {
@@ -622,7 +642,7 @@
}
.cluster-guanli {
margin: 0 auto;
- /* width: 760px; */
+ width: 760px;
padding: 0 10px;
.btns {
margin-top: 30px !important;
@@ -641,6 +661,7 @@
margin-top: 0;
}
}
+
.cloud {
width: 100%;
display: flex;
@@ -736,8 +757,10 @@
box-sizing: border-box;
flex-shrink: 0;
padding: 10px;
+ padding-top: 6px;
border-right: 4px solid #f2f2f7;
border-left: 4px solid #f2f2f7;
+ border-top: 4px solid #f2f2f7;
.menu-item {
background-color: #f8f8f8;
cursor: pointer;
@@ -766,7 +789,9 @@
overflow: auto;
box-sizing: border-box;
position: relative;
+ border-top: 4px solid #f2f2f7;
padding: 20px 40px;
+ padding-top: 16px;
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -774,9 +799,27 @@
> .el-form-item__label:before {
display: none;
}
- .create-new {
+ .clu-list {
+ background: #f2f2f7;
+ border-radius: 8px;
+ margin-top: 20px;
+ .clu-item {
+ border-radius: 8px;
+ height: 40px;
+ // cursor: pointer;
+ line-height: 40px;
+ text-align: left;
+ padding: 0 20px;
+ font-size: 14px;
+ .iconfont {
+ margin-right: 8px;
+ }
+ }
+ // .clu-item:hover {
+ // background: var(--colorCard);
+ // color: #fff;
+ // }
}
-
.el-form-item__content {
line-height: 48px;
display: flex;
@@ -808,7 +851,7 @@
left: 20px;
}
.el-form-item {
- margin-bottom: 10px;
+ margin-bottom: 10px;
.el-input__inner {
background-color: #ffffff;
border: 2px solid transparent;
--
Gitblit v1.8.0