From 6a5962fe9544005dba620b00fb36c25fe2da4e76 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 16 十一月 2021 15:24:46 +0800
Subject: [PATCH] 后端没修改的情况下添加默认背景图
---
src/pages/settings/views/clusterManagement.vue | 409 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 310 insertions(+), 99 deletions(-)
diff --git a/src/pages/settings/views/clusterManagement.vue b/src/pages/settings/views/clusterManagement.vue
index dbd06bf..34d0f46 100644
--- a/src/pages/settings/views/clusterManagement.vue
+++ b/src/pages/settings/views/clusterManagement.vue
@@ -1,9 +1,13 @@
<template>
<div class="all">
- <div class="cluster-guanli" v-if="showCurCluster">
- <cloud-node :nodes="innerNodes"></cloud-node>
+ <!-- -->
+ <div class="cluster-guanli" v-if="showCurCluster && isHasColony">
+ <!-- <cloud-node :nodes="innerNodes"></cloud-node> -->
+ <net-node :innerNodes="innerNodes"></net-node>
- <div class="bar">
+ <div class="cls-bar">瑙嗛鍒嗘瀽闆嗙兢绠＄悊</div>
+
+ <div class="cls-bar">
<div class="title">闆嗙兢鍚嶇О</div>
<div class="input-area">
<div class="text" v-show="!isFillingName">
@@ -23,31 +27,33 @@
>
<span
class="icon iconfont"
+ style="font-size: 18px"
@click="clearInput(1)"
v-show="isFillingName"
- ></span
+ ></span
>
<span
class="icon iconfont"
+ style="font-size: 20px; color: var(--colorCard)"
@click="updateCluster(1)"
v-show="isFillingName"
></span
>
</div>
</div>
- <div class="bar">
+ <div class="cls-bar">
<div class="title">闆嗙兢ID</div>
<div class="input-area">
<div class="text">{{ clusterid }}</div>
</div>
</div>
- <div class="bar">
+ <div class="cls-bar">
<div class="title">闆嗙兢瀵嗙爜</div>
<div class="input-area">
<div class="text">{{ ruleForm.clusterpwd }}</div>
</div>
</div>
- <div class="bar">
+ <div class="cls-bar">
<div class="title">闆嗙兢IP</div>
<div class="input-area">
<div class="text" v-show="!isFillingIp">{{ ruleForm.virtualIp }}</div>
@@ -66,43 +72,53 @@
>
<span
class="icon iconfont"
+ style="font-size: 18px"
@click="clearInput(2)"
v-show="isFillingIp"
- ></span
+ ></span
>
<span
class="icon iconfont"
@click="updateCluster(2)"
+ style="font-size: 20px; color: var(--colorCard)"
v-show="isFillingIp"
></span
>
</div>
</div>
-
- <div class="exit" @click="exitCluster">閫�鍑洪泦缇�</div>
- </div>
-
- <div class="cluster-content">
- <div class="cluster-center" ref="left" v-if="!showCurCluster">
- <div class="menu-item" @click="isCreate = true">鍒涘缓闆嗙兢</div>
- <div class="menu-item" @click="isCreate = false">鍔犲叆宸叉湁闆嗙兢</div>
+ <div class="btns">
+ <div class="ok" @click="updateCluster">淇濆瓨</div>
+ <div class="exit" @click="exitCluster">閫�鍑洪泦缇�</div>
</div>
- <div class="cluster-right" v-if="!showCurCluster">
- <div class="create-new" v-if="isCreate">
- <el-form
- :model="ruleForm"
- :rules="rules"
- ref="ruleForm"
- label-width="150px"
- >
- <el-form-item label="闆嗙兢鍚嶇О" prop="clustername">
+ </div>
+ <!-- !showCurCluster || !isHasColony -->
+ <div class="cluster-content" v-if="!showCurCluster || !isHasColony">
+ <div class="cluster-center" ref="left" v-if="!showCurCluster || !isHasColony">
+ <div
+ class="menu-item"
+ :class="activePage == i ? 'menu-item-active' : ''"
+ v-for="(item, i) in tabList"
+ :key="i"
+ @click="openRight(i)"
+ >
+ <span class="icon iconfont" v-if="activePage == 0"></span>
+ <span class="icon iconfont" v-if="activePage == 1"></span>
+ {{ item }}
+ </div>
+ </div>
+ <div class="cluster-right" v-if="!showCurCluster || !isHasColony">
+ <div class="create-new" v-if="activePage == 0">
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
+ <el-form-item prop="clustername">
+ <div class="p-title">闆嗙兢鍚嶇О</div>
<el-input
v-model="ruleForm.clustername"
placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�"
size="small"
></el-input>
</el-form-item>
- <el-form-item label="闆嗙兢ID">
+ <el-form-item>
+ <div class="p-title">闆嗙兢ID</div>
<el-input
v-model="clusterid"
placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�"
@@ -110,7 +126,8 @@
size="small"
></el-input>
</el-form-item>
- <el-form-item label="闆嗙兢瀵嗙爜" prop="clusterpwd">
+ <el-form-item prop="clusterpwd">
+ <div class="p-title">闆嗙兢瀵嗙爜</div>
<el-input
v-model="ruleForm.clusterpwd"
placeholder="璇疯緭鍏�6浣嶅瘑鐮�,鎴栫偣鍑荤敓鎴�"
@@ -121,7 +138,8 @@
>
</el-input>
</el-form-item>
- <el-form-item label="闆嗙兢IP" prop="virtualIp">
+ <el-form-item prop="virtualIp">
+ <div class="p-title">闆嗙兢IP</div>
<ip-input
:ip="ruleForm.virtualIp"
:on-blur="onIpBlur"
@@ -129,22 +147,27 @@
></ip-input>
</el-form-item>
</el-form>
- <div class="save-btn" @click="saveCluster('ruleForm')">淇濆瓨</div>
+ <div class="btns">
+ <div class="ok" @click="saveCluster('ruleForm')">淇濆瓨</div>
+ </div>
</div>
- <div class="join-exist" v-if="!isCreate">
+
+ <div class="join-exist" v-if="activePage == 1">
<el-form
:model="joinForm"
- :rules="joinRules"
+ :rules="joinExistRules"
ref="joinForm"
class="join-form"
- label-width="150px"
+
v-loading="joinLoading"
>
- <el-form-item label="闆嗙兢ID" 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 label="IP鍦板潃" prop="clusterip">
+ <el-form-item prop="clusterip">
+ <div class="p-title">IP鍦板潃</div>
<el-input
v-model="joinForm.clusterip"
placeholder="璇疯緭鍏ラ泦缇ゅ唴浠绘剰IP鍦板潃"
@@ -152,7 +175,8 @@
autocomplete="new-password"
></el-input>
</el-form-item>
- <el-form-item label="闆嗙兢瀵嗙爜" prop="clusterpwd">
+ <el-form-item prop="clusterpwd">
+ <div class="p-title">闆嗙兢瀵嗙爜</div>
<el-input
v-model="joinForm.clusterpwd"
placeholder="璇疯緭鍏ラ泦缇ゅ瘑鐮�"
@@ -178,8 +202,9 @@
</el-input>
</el-form-item>
</el-form>
-
- <div class="save-btn" @click="join('joinForm')">鍔犲叆闆嗙兢</div>
+ <div class="btns">
+ <div class="ok" @click="join('joinForm')">鍔犲叆闆嗙兢</div>
+ </div>
</div>
</div>
</div>
@@ -190,21 +215,17 @@
import {
createSerfCluster,
randomPwd,
+ leave,
search,
getSearchNodes,
stopSearching,
findCluster,
updateClusterName,
joinCluster,
- leave,
- getVrrp,
- setVrrp,
- createESNode,
- addESNode,
- getEsClusterInfo,
} from "@/api/clusterManage";
-import cloudNode from "../components/CloudNode";
-import ipInput from "@/components/subComponents/IPInput";
+// import cloudNode from "../components/CloudNode";
+import NetNode from '../components/NetNode'
+import ipInput from "../components/IPInput";
import { isIPv4 } from "@/scripts/validate";
export default {
@@ -221,12 +242,18 @@
}
}, 1000);
};
+ const checkID = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+ }
+ };
return {
innerNodes: [],
intervalTimer: null,
isFillingName: false,
isFillingIp: false,
inputName: "",
+ activePage: 0,
inputIp: "",
serverIp: "",
members: [],
@@ -255,37 +282,35 @@
searchNum: "",
scheduleId: "",
isCreate: true,
+ tabList: ["鍒涘缓闆嗙兢", "鍔犲叆宸叉湁闆嗙兢"],
rules: {
clustername: [
- { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "change" },
+ { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "blur" },
],
- clusterpwd: [{ validator: checkPwd, trigger: "change" }],
+ clusterpwd: [{ validator: checkPwd, trigger: "blur" }],
virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],
},
- joinRules: {
- clusterid: [
- { required: true, message: "璇疯緭鍏ラ泦缇D", trigger: "change" },
- ],
- clusterip: [{ required: true, validator: isIPv4, trigger: "change" }],
- clusterpwd: [{ validator: checkPwd, trigger: "change" }],
+ joinExistRules: {
+ clusterid: [{ validator: checkID, trigger: "blur" }],
+ clusterip: [{ validator: isIPv4, trigger: "blur" }],
+ clusterpwd: [{ validator: checkPwd, trigger: "blur" }],
},
};
},
components: {
- cloudNode,
- ipInput,
+ // cloudNode,
+ NetNode,
+ ipInput
},
mounted() {
this.findCluster();
- let _this = this;
this.intervalTimer = setInterval(() => {
- _this.findCluster();
+ this.findCluster();
}, 30000);
},
beforeDestroy() {
clearInterval(this.intervalTimer);
},
- props: ["barName"],
methods: {
async createCluster(json) {
let res = await createSerfCluster(json);
@@ -323,18 +348,21 @@
async joinCluster(json) {
let res = await joinCluster(json);
if (res.success) {
- this.members = []
+ this.members = [];
}
this.$notify({
title: res.success ? "鎴愬姛" : "澶辫触",
message: res.msg,
- type: res.success ? "success" : "error"
+ type: res.success ? "success" : "error",
});
},
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;
@@ -399,6 +427,9 @@
this.stopSearch();
}, 10 * 1000);
},
+ openRight(i) {
+ this.activePage = i;
+ },
async stopSearch() {
if (!this.loading) {
return true;
@@ -407,7 +438,7 @@
searchNum: this.searchNum,
})
.then((res) => {
- this.loading = false;
+ this.loading = false;
this.searchDis = false;
window.clearInterval(this.scheduleId);
})
@@ -448,12 +479,52 @@
this.ruleForm.clusterpwd = uuid.join("");
},
exitCluster() {
- clearInterval(this.intervalTimer);
- this.showCurCluster = false;
- this.ruleForm.virtualIp = "";
- this.ruleForm.clustername = "";
- this.ruleForm.clusterpwd = "";
- this.clusterid = "";
+ const h = this.$createElement;
+ this.$msgbox({
+ title: "",
+ message: h(
+ "div",
+ {
+ style:
+ "display: flex; flex-direction: column; justify-content: center; align-items: center;",
+ },
+ [
+ h("span", { class: "icon iconfont warn-icon" }, "\ue71c"),
+ h("span", { class: "warn-title" }, "閫�鍑洪泦缇�"),
+ h("span", { class: "warn-dec" }, "纭畾閫�鍑洪泦缇ゅ悧锛�"),
+ ]
+ ),
+ showCancelButton: true,
+ showClose: true,
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ customClass: "del-account-message-box",
+ }).then(
+ async () => {
+ let res = await leave();
+ this.$notify({
+ title: res.success ? "鎴愬姛" : "澶辫触",
+ message: res.msg,
+ type: res.success ? "success" : "error",
+ });
+ if (res && res.success) {
+ clearInterval(this.intervalTimer);
+ this.showCurCluster = false;
+ this.ruleForm.virtualIp = "";
+ this.ruleForm.clustername = "";
+ this.ruleForm.clusterpwd = "";
+ this.clusterid = "";
+ }
+ },
+ (err) => {
+ clearInterval(this.intervalTimer);
+ this.showCurCluster = false;
+ this.ruleForm.virtualIp = "";
+ this.ruleForm.clustername = "";
+ this.ruleForm.clusterpwd = "";
+ this.clusterid = "";
+ }
+ );
},
clearInput(typ) {
if (typ == 1) {
@@ -480,11 +551,10 @@
}
},
onIpBlur(ip) {
- console.log(ip);
this.ruleForm.virtualIp = ip;
},
async updateCluster(v) {
- if (v == 1) {
+ if (v == 1 || v == undefined) {
this.ruleForm.clustername = this.selfForm.clustername;
}
if (this.ruleForm.clustername === "") {
@@ -502,6 +572,7 @@
if (res.success) {
this.findCluster();
}
+
this.$notify({
title: res.success ? "鎴愬姛" : "澶辫触",
message: res.msg,
@@ -550,27 +621,93 @@
<style lang="scss">
.all {
width: 100%;
+ background: #f2f2f7;
}
.cluster-guanli {
margin: 0 auto;
- width: 520px;
- .bar {
- height: 40px;
- background-color: rgba(248, 248, 248, 1);
- margin-bottom: 10px;
+width: 760px;
+ padding: 0 10px;
+ .btns {
+ margin-top: 30px !important;
+
+ .exit {
+ width: 188px;
+ height: 40px;
+ cursor: pointer;
+ border-radius: 25px;
+ background-color: #fe6d68;
+ color: #fff;
+ line-height: 40px;
+ font-weight: bold;
+ font-size: 16px;
+ margin-left: 60px;
+ margin-top: 0;
+ }
+ }
+ .cloud {
+ width: 100%;
+ display: flex;
+ height: 255px;
+ border-radius: 8px;
+ background: linear-gradient(
+ 180deg,
+ #ffffff 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ .inner {
+ background: url(/images/settings/easy-cloud.png) no-repeat;
+ background-size: contain;
+ margin: 0 auto;
+ width: 240px;
+ .rect {
+ position: relative;
+ margin: 0;
+ height: 100%;
+ }
+ }
+ }
+ .cls-bar {
+ height: 48px;
+ background-color: #ffffff;
+ margin-bottom: 6px;
display: flex;
box-sizing: border-box;
- padding: 0 20px;
+ padding: 0 30px;
justify-content: space-between;
align-items: center;
+ border-radius: 8px;
+ font-weight: bold;
+ font-size: 14px;
+ color: #333333;
+ .title {
+ font-size: 14px;
+ }
.input-area {
display: flex;
- width: 340px;
+ width: 540px;
height: 30px;
line-height: 30px;
justify-content: inherit;
- // padding: 0 20px;
box-sizing: border-box;
+ background: #f2f2f7;
+ border-radius: 20px;
+ padding: 0 30px;
+ .el-input--mini .el-input__inner {
+ height: 24px;
+ line-height: 24px;
+ /* border: 1px solid transparent; */
+ background: inherit;
+ padding-left: 0;
+ border: none;
+ border-radius: 0px;
+ font-size: 14px;
+ }
+
+ .icon {
+ cursor: pointer;
+ font-size: 14px;
+ margin-left: 10px;
+ }
}
}
.exit {
@@ -583,6 +720,7 @@
line-height: 40px;
font-size: 14px;
margin-top: 20px;
+ cursor: pointer;
}
}
.cluster-content {
@@ -592,6 +730,8 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ background: #fbfaff;
+
.cluster-center {
height: 100%;
width: 280px;
@@ -599,25 +739,41 @@
box-sizing: border-box;
flex-shrink: 0;
padding: 10px;
- // background-color: lightpink;
+ padding-top: 6px;
+ border-right: 4px solid #f2f2f7;
+ border-left: 4px solid #f2f2f7;
+ border-top: 4px solid #f2f2f7;
.menu-item {
background-color: #f8f8f8;
- height: 40px;
+ cursor: pointer;
+ height: 56px;
margin-bottom: 10px;
border-radius: 8px;
- line-height: 40px;
- font-size: 14px;
+ line-height: 56px;
+ text-align: left;
+ box-sizing: border-box;
+ padding: 0 20px;
+ font-weight: bold;
+ font-size: 16px;
}
+ .menu-item-active {
+ background-color: var(--colorCard);
+ color: white;
+ }
+ // .menu-item:hover {
+ // background-color: var(--colorCard);
+ // color: white;
+ // }
}
.cluster-right {
flex: 1;
flex-basis: auto;
overflow: auto;
- // background-color: rgba(240, 242, 245, 1);
box-sizing: border-box;
position: relative;
+ border-top: 4px solid #f2f2f7;
padding: 20px 40px;
- // .create-new .join-exist {
+ 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)
@@ -625,28 +781,83 @@
> .el-form-item__label:before {
display: none;
}
- .el-form-item {
- margin-bottom: 10px;
- height: 50px;
- background: #f8f8f8;
- padding: 4px 20px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 10px;
- .el-form-item__label {
- text-align: left;
- line-height: 42px;
+
+ .el-form-item__content {
+ line-height: 48px;
+ display: flex;
+ align-items: center;
+ background: #f2f2f7;
+ border-radius: 8px;
+ padding: 0 15px 0 20px;
+ .el-select-dropdown__item {
+ color: #333333;
+ height: 32px;
+ font-size: 12px;
+ line-height: 32px;
+ text-align: center;
+ }
+ .el-popper {
+ margin-top: 0;
+ background: #fbfaff;
+ box-shadow: 0px 2px 6px rgb(0 0 0 / 18%);
+ border-radius: 2px;
+ .el-select-dropdown__item.hover,
+ .el-select-dropdown__item:hover {
+ background-color: #f2f2f7;
+ color: var(--colorCard);
+ }
}
}
- .el-form-item__content {
- line-height: 40px;
- position: relative;
- font-size: 14px;
+ .el-form-item__error {
+ line-height: 0.7;
+ left: 20px;
+ }
+ .el-form-item {
+ margin-bottom: 10px;
+ .el-input__inner {
+ background-color: #ffffff;
+ border: 2px solid transparent;
+ border-radius: 20px;
+ height: 32px;
+ line-height: 32px;
+ padding: 0 15px;
+ font-size: 14px;
+ font-weight: bold;
+ }
+ .el-input__inner:focus {
+ border: 2px solid var(--colorCard);
+ }
+ .el-input__inner::placeholder {
+ color: #c0c4cc;
+ font-size: 12px;
+ font-weight: normal;
+ }
+ .el-select {
+ width: 100%;
+ }
+ .el-select .el-input .el-select__caret {
+ color: #333333;
+ font-size: 14px;
+ font-weight: 600;
+ }
+ }
+ .p-title {
+ height: 48px;
+ text-align: left;
+ line-height: 48px;
+ width: 90px;
+ font-weight: 600;
}
.ip-input-container {
max-width: none !important;
+ height: 32px;
+ line-height: normal;
+ box-sizing: border-box;
+ // background-color: #f2f2f7;
+ text-align: left;
+ border-radius: 20px;
+ border: 2px solid transparent;
}
- // }
.ntp-bar {
height: 40px;
background-color: rgba(248, 248, 248, 1);
--
Gitblit v1.8.0