From c0c034b3ef0fdf0fd9c802d5984dbd717db6817a Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 06 九月 2023 17:54:55 +0800
Subject: [PATCH] 定制桌面.
---
src/pages/settings/views/clusterManagement.vue | 863 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 528 insertions(+), 335 deletions(-)
diff --git a/src/pages/settings/views/clusterManagement.vue b/src/pages/settings/views/clusterManagement.vue
index 25c41de..bec9238 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&& isHasColony">
- <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">
@@ -15,75 +19,58 @@
v-model="selfForm.clustername"
placeholder="璇疯緭鍏ュ唴瀹�"
></el-input>
+ <span class="icon iconfont" @click="startInput(1)" v-show="!isFillingName"></span>
+ <span class="icon iconfont" style="font-size: 18px" @click="clearInput(1)" v-show="isFillingName"
+ ></span
+ >
<span
class="icon iconfont"
- @click="startInput(1)"
- v-show="!isFillingName"
- ></span
- >
- <span
- class="icon iconfont" style="font-size:21px;"
- @click="clearInput(1)"
- v-show="isFillingName"
- ></span
- >
- <span
- class="icon iconfont" style="font-size:20px;"
+ 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>
- <ip-input
- v-if="isFillingIp"
- :ip="selfForm.virtualIp"
- :on-blur="onIpBlur"
- class="ip-input-comp"
- ></ip-input>
- <span
- class="icon iconfont"
- v-show="!isFillingIp"
- @click="startInput(2)"
- ></span
- >
- <span
- class="icon iconfont" style="font-size:21px;"
- @click="clearInput(2)"
- v-show="isFillingIp"
- ></span
+ <ip-input v-if="isFillingIp" :ip="selfForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input>
+ <span class="icon iconfont" v-show="!isFillingIp" @click="startInput(2)"></span>
+ <span class="icon iconfont" style="font-size: 18px" @click="clearInput(2)" v-show="isFillingIp"
+ ></span
>
<span
class="icon iconfont"
- @click="updateCluster(2)" style="font-size:20px;"
+ @click="updateCluster(2)"
+ style="font-size: 20px; color: var(--colorCard)"
v-show="isFillingIp"
></span
>
</div>
</div>
-
- <div class="exit" @click="exitCluster">閫�鍑洪泦缇�</div>
+ <div class="btns">
+ <div class="ok" @click="updateCluster">淇濆瓨</div>
+ <div class="exit" @click="exitCluster">閫�鍑洪泦缇�</div>
+ </div>
</div>
-
- <div class="cluster-content">
- <div class="cluster-center" ref="left" v-if="!showCurCluster|| !isHasColony">
+ <!-- !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' : ''"
@@ -91,68 +78,47 @@
: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"
- label-width="150px"
- >
- <el-form-item label="闆嗙兢鍚嶇О" prop="clustername">
- <el-input
- v-model="ruleForm.clustername"
- placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�"
- size="small"
- ></el-input>
+ <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-input
- v-model="clusterid"
- placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�"
- disabled
- size="small"
- ></el-input>
+ <el-form-item>
+ <div class="p-title">闆嗙兢ID</div>
+ <el-input v-model="clusterid" placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�" disabled size="small"></el-input>
</el-form-item>
- <el-form-item label="闆嗙兢瀵嗙爜" prop="clusterpwd">
- <el-input
- v-model="ruleForm.clusterpwd"
- placeholder="璇疯緭鍏�6浣嶅瘑鐮�,鎴栫偣鍑荤敓鎴�"
- size="small"
- >
- <el-button type="text" slot="suffix" @click="getPSW"
- >鐢熸垚瀵嗙爜</el-button
- >
+ <el-form-item prop="clusterpwd">
+ <div class="p-title">闆嗙兢瀵嗙爜</div>
+ <el-input v-model="ruleForm.clusterpwd" placeholder="璇疯緭鍏�6浣嶅瘑鐮�,鎴栫偣鍑荤敓鎴�" size="small">
+ <el-button type="text" slot="suffix" @click="getPSW">鐢熸垚瀵嗙爜</el-button>
</el-input>
</el-form-item>
- <el-form-item label="闆嗙兢IP" prop="virtualIp">
- <ip-input
- :ip="ruleForm.virtualIp"
- :on-blur="onIpBlur"
- class="ip-input-comp"
- ></ip-input>
+ <el-form-item prop="virtualIp">
+ <div class="p-title">闆嗙兢IP</div>
+ <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></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="activePage == 1">
- <el-form
- :model="joinForm"
- :rules="joinExistRules"
- ref="joinForm"
- class="join-form"
- label-width="150px"
- v-loading="joinLoading"
- >
- <el-form-item label="闆嗙兢ID" prop="clusterid">
+ <el-form :model="joinForm" :rules="joinExistRules" ref="joinForm" class="join-form" v-loading="joinLoading">
+ <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鍦板潃"
@@ -160,7 +126,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="璇疯緭鍏ラ泦缇ゅ瘑鐮�"
@@ -168,26 +135,23 @@
autocomplete="new-password"
size="small"
>
- <el-button
- type="text"
- slot="suffix"
- @click="searchColony"
- v-show="!searchDis"
- >鎼滅储闆嗙兢</el-button
- >
- <el-button
- type="text"
- slot="suffix"
- v-show="searchDis"
- @click="stopSearch"
- >
+ <el-button type="text" slot="suffix" @click="searchColony" v-show="!searchDis">鎼滅储闆嗙兢</el-button>
+ <el-button type="text" slot="suffix" v-show="searchDis" @click="stopSearch">
<i class="el-icon-loading"></i>鍋滄鎼滅储
</el-button>
</el-input>
</el-form-item>
</el-form>
-
- <div class="save-btn" @click="join('joinForm')">鍔犲叆闆嗙兢</div>
+ <div class="clu-list">
+ <!-- :class="pickedNodeI == index ? 'clu-item-active' : ''" -->
+ <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>
@@ -204,29 +168,30 @@
stopSearching,
findCluster,
updateClusterName,
- joinCluster,
-} from "@/api/clusterManage";
-import cloudNode from "../components/CloudNode";
-import ipInput from "@/components/subComponents/IPInput";
-import { isIPv4 } from "@/scripts/validate";
+ joinCluster
+} from "@/api/clusterManage"
+// import cloudNode from "../components/CloudNode";
+import NetNode from "../components/NetNode"
+import ipInput from "../components/IPInput"
+import { isIPv4 } from "@/scripts/validate"
export default {
data() {
const checkPwd = (rule, value, callback) => {
- if (!value) {
- return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+ if (value == "") {
+ return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"))
}
- setTimeout(() => {
- if (value.length != 6) {
- callback(new Error("瀵嗙爜搴斾负6浣�!"));
- } else {
- callback();
- }
- }, 1000);
- };
- const checkID= (rule, value, callback) => {
+ // setTimeout(() => {
+ if (value.length != 6) {
+ callback(new Error("瀵嗙爜搴斾负6浣�!"))
+ } else {
+ callback()
+ }
+ // }, 1000);
+ }
+ const checkID = (rule, value, callback) => {
if (!value) {
- return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+ return callback(new Error("ID涓嶈兘涓虹┖"))
}
}
return {
@@ -238,22 +203,23 @@
activePage: 0,
inputIp: "",
serverIp: "",
+ pickedNodeI: null,
members: [],
virtualIp: "192.168.1.188",
searchDis: false,
ruleForm: {
clustername: "",
clusterpwd: "",
- virtualIp: "",
+ virtualIp: ""
},
selfForm: {
virtualIp: "",
- clustername: "",
+ clustername: ""
},
joinForm: {
clusterid: "",
clusterip: "",
- clusterpwd: "",
+ clusterpwd: ""
},
isSearch: false,
showCurCluster: true,
@@ -266,167 +232,214 @@
isCreate: true,
tabList: ["鍒涘缓闆嗙兢", "鍔犲叆宸叉湁闆嗙兢"],
rules: {
- clustername: [
- { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "blur" },
- ],
- clusterpwd: [{ validator: checkPwd, trigger: "blur" }],
- virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],
+ clustername: [{ required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "blur" }],
+ clusterpwd: [{ validator: checkPwd, required: true, trigger: "blur" }],
+ 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, trigger: "blur" }]
+ }
+ }
},
components: {
- cloudNode,
- ipInput,
+ // cloudNode,
+ NetNode,
+ ipInput
},
mounted() {
- this.findCluster();
+ this.findCluster()
this.intervalTimer = setInterval(() => {
- this.findCluster();
- }, 30000);
+ this.findCluster()
+ }, 30000)
},
beforeDestroy() {
- clearInterval(this.intervalTimer);
+ clearInterval(this.intervalTimer)
},
methods: {
+ pickNode(index) {
+ this.pickedNodeI = index
+ const node = this.members[index]
+ const h = this.$createElement
+ // Address: "192.168.20.189:30190"
+ // cluster_id: "5ee1dfa8-e3fb-4d62-8692-388d7632859b"
+ // create_time: ""
+ // id: "DSVAD010120190703"
+ // nodeName: "192.168.20.189:30190"
+ // node_id: "DSVAD010120190703"
+ // role: "pc"
+ 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" }, `鎮ㄦ槸鍚﹁鍔犲叆 ${node.Address} 鍚楋紵`)
+ ]
+ ),
+ showCancelButton: true,
+ showClose: true,
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ customClass: "del-account-message-box"
+ }).then(() => {
+ this.joinLoading = true
+ let data = {
+ clusterId: node.cluster_id,
+ password: this.joinForm.clusterpwd,
+ nodeIps: [node.Address]
+ }
+ this.joinCluster(data)
+ .then(() => {
+ this.joinLoading = false
+ this.findCluster()
+ })
+ .catch((e) => {
+ this.joinLoading = false
+ })
+ })
+ },
async createCluster(json) {
- let res = await createSerfCluster(json);
+ let res = await createSerfCluster(json)
this.$notify({
title: res.success ? "鎴愬姛" : "澶辫触",
message: res.msg,
- type: res.success ? "success" : "error",
- });
+ type: res.success ? "success" : "error"
+ })
},
//鎼滅储闆嗙兢
async getSearchNodes() {
- let res = await getSearchNodes();
+ let res = await getSearchNodes()
if (res && res.success) {
let list = res.data.map((i) => {
- let obj = {};
- obj.cluster_id = i.clusterID ? i.clusterID : "";
- obj.create_time = i.create_time ? i.create_time : "";
- obj.id = i.nodeID ? i.nodeID : "";
- obj.node_id = i.nodeID ? i.nodeID : "";
- obj.Address = i.nodeAddress ? i.nodeAddress : "";
- obj.nodeName = i.nodeAddress ? i.nodeAddress : "";
- obj.role = i.role ? i.role : "pc";
- return obj;
- });
+ let obj = {}
+ obj.cluster_id = i.clusterID ? i.clusterID : ""
+ obj.create_time = i.create_time ? i.create_time : ""
+ obj.id = i.nodeID ? i.nodeID : ""
+ obj.node_id = i.nodeID ? i.nodeID : ""
+ obj.Address = i.nodeAddress ? i.nodeAddress : ""
+ obj.nodeName = i.nodeAddress ? i.nodeAddress : ""
+ obj.role = i.role ? i.role : "pc"
+ return obj
+ })
list.map((i) => {
let found = this.members.find((element) => {
- return element.node_id === i.node_id;
- });
+ return element.node_id === i.node_id
+ })
if (found === undefined) {
- this.members.push(i);
+ this.members.push(i)
}
- });
+ })
}
},
async joinCluster(json) {
- let res = await 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) {
- let _this = this;
+ console.log("join", formName)
+ let _this = this
+ _this.joinLoading = true
+ let data = {
+ clusterId: _this.joinForm.clusterid,
+ password: _this.joinForm.clusterpwd,
+ nodeIps: [_this.joinForm.clusterip]
+ }
+ console.log("body:", data)
+ _this
+ .joinCluster(data)
+ .then(() => {
+ _this.joinLoading = false
+ _this.findCluster()
+ })
+ .catch((e) => {
+ _this.joinLoading = false
+ })
+
this.$refs[formName].validate((valid) => {
+ console.log("join")
if (valid) {
- _this.joinLoading = true;
- let nodeIps = _this.members.map((i) => {
- return i.Address;
- });
- let data = {
- clusterId: _this.joinForm.clusterid,
- password: _this.joinForm.clusterpwd,
- nodeIps: [_this.joinForm.clusterip],
- };
- _this
- .joinCluster(data)
- .then(() => {
- _this.joinLoading = false;
- _this.findCluster();
- })
- .catch((e) => {
- _this.joinLoading = false;
- });
} else {
- return false;
+ onsole.log("鍙傛暟閿欒")
+ return false
}
- });
+ })
},
setSchedule() {
this.scheduleId = window.setInterval(() => {
- this.getSearchNodes();
- }, 1000);
+ this.getSearchNodes()
+ }, 1000)
},
async searchColony() {
- this.isSearch = true;
- this.$refs["joinForm"].clearValidate();
- this.$refs["joinForm"].validateField("clusterpwd");
+ this.isSearch = true
+ this.$refs["joinForm"].clearValidate()
+ this.$refs["joinForm"].validateField("clusterpwd")
if (this.joinForm.clusterpwd.trim().length === 6) {
- this.members = [];
+ this.members = []
const data = {
- password: this.joinForm.clusterpwd,
- };
+ password: this.joinForm.clusterpwd
+ }
this.search(data)
.then(() => {
- this.setSchedule();
+ this.setSchedule()
})
.catch(() => {
- this.searchDis = false;
- this.loading = false;
- this.isSearch = false;
- });
+ this.searchDis = false
+ this.loading = false
+ this.isSearch = false
+ })
} else {
- this.searchDis = false;
- this.loading = false;
- this.isSearch = false;
- return false;
+ this.searchDis = false
+ this.loading = false
+ this.isSearch = false
+ return false
}
},
async search(data) {
- let res = await search(data);
+ let res = await search(data)
if (res && res.success) {
- this.searchNum = res.data;
+ this.searchNum = res.data
}
- this.searchDis = true;
- this.loading = true;
+ this.searchDis = true
+ this.loading = true
window.setTimeout(() => {
- this.stopSearch();
- }, 10 * 1000);
+ this.stopSearch()
+ }, 10 * 1000)
},
- openRight( i) {
- this.activePage = i;
+ openRight(i) {
+ this.activePage = i
},
async stopSearch() {
if (!this.loading) {
- return true;
+ return true
}
stopSearching({
- searchNum: this.searchNum,
+ searchNum: this.searchNum
})
.then((res) => {
- this.loading = false;
- this.searchDis = false;
- window.clearInterval(this.scheduleId);
+ this.loading = false
+ this.searchDis = false
+ window.clearInterval(this.scheduleId)
})
.catch((err) => {
this.$notify({
type: "error",
duration: 1000,
- message: "鍋滄鎼滅储鎶ラ敊锛�",
- });
- });
+ message: "鍋滄鎼滅储鎶ラ敊锛�"
+ })
+ })
},
saveCluster(formName) {
this.$refs[formName].validate((valid) => {
@@ -435,172 +448,266 @@
clusterId: this.clusterid,
clusterName: this.ruleForm.clustername,
password: this.ruleForm.clusterpwd,
- virtualIp: this.ruleForm.virtualIp,
- };
+ virtualIp: this.ruleForm.virtualIp
+ }
this.createCluster(data).then(() => {
- this.findCluster();
- });
+ this.findCluster()
+ })
} else {
- return false;
+ return false
}
- });
+ })
},
getPSW() {
- var chars =
- "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
- var uuid = [];
+ var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
+ var uuid = []
for (let i = 0; i < 6; i++) {
- uuid[i] = chars[0 | (Math.random() * 50)];
+ uuid[i] = chars[0 | (Math.random() * 50)]
}
- this.ruleForm.clusterpwd = uuid.join("");
+ this.ruleForm.clusterpwd = uuid.join("")
},
exitCluster() {
- this.$confirm("纭畾閫�鍑洪泦缇ゅ悧锛�","鎻愮ず").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 = "";
+ const h = this.$createElement
+ let res = {}
+
+ 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(
+ // () => {
+ // this.showCurCluster = false;
+ // }
+ async () => {
+ try {
+ res = await leave()
+ if (res && res.success) {
+ clearInterval(this.intervalTimer)
+ this.showCurCluster = false
+ this.ruleForm.virtualIp = ""
+ this.ruleForm.clustername = ""
+ this.ruleForm.clusterpwd = ""
+ this.clusterid = ""
+ }
+
+ this.$notify({
+ title: res.success ? "鎴愬姛" : "澶辫触",
+ message: res.msg,
+ type: res.success ? "success" : "error"
+ })
+ this.findCluster()
+ } catch (err) {
+ console.log(err)
+ this.$notify.error({
+ title: "澶辫触",
+ message: err.msg
+ })
}
- },(err) => {
- 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) {
- this.selfForm.clustername = "";
- this.isFillingName = false;
+ this.selfForm.clustername = ""
+ this.isFillingName = false
} else {
- this.selfForm.virtualIp = "";
- this.isFillingIp = false;
+ this.selfForm.virtualIp = ""
+ this.isFillingIp = false
}
},
async randomPwd() {
- let res = await randomPwd();
+ let res = await randomPwd()
if (res && res.success) {
- this.ruleForm.clusterpwd = res.data;
+ this.ruleForm.clusterpwd = res.data
}
},
startInput(typ) {
if (typ == 1) {
- this.selfForm.clustername = this.ruleForm.clustername;
- this.isFillingName = true;
+ this.selfForm.clustername = this.ruleForm.clustername
+ this.isFillingName = true
} else {
- this.selfForm.virtualIp = this.ruleForm.virtualIp;
- this.isFillingIp = true;
+ this.selfForm.virtualIp = this.ruleForm.virtualIp
+ this.isFillingIp = true
}
},
onIpBlur(ip) {
- this.ruleForm.virtualIp = ip;
+ this.ruleForm.virtualIp = ip
},
async updateCluster(v) {
- if (v == 1) {
- this.ruleForm.clustername = this.selfForm.clustername;
+ if (v == 1 || v == undefined) {
+ this.ruleForm.clustername = this.selfForm.clustername
}
if (this.ruleForm.clustername === "") {
this.$message({
type: "error",
- message: "闆嗙兢鍚嶇О涓嶈兘涓虹┖",
- });
- return;
+ message: "闆嗙兢鍚嶇О涓嶈兘涓虹┖"
+ })
+ return
}
const data = {
clusterName: this.ruleForm.clustername,
- virtualIp: this.ruleForm.virtualIp,
- };
- let res = await updateClusterName(data);
- if (res.success) {
- this.findCluster();
+ virtualIp: this.ruleForm.virtualIp
}
+ let res = await updateClusterName(data)
+ if (res.success) {
+ this.findCluster()
+ }
+
this.$notify({
title: res.success ? "鎴愬姛" : "澶辫触",
message: res.msg,
- type: res.success ? "success" : "error",
- });
- this.isFillingIp = false;
- this.isFillingName = false;
+ type: res.success ? "success" : "error"
+ })
+ this.isFillingIp = false
+ this.isFillingName = false
},
async findCluster() {
- let res = await findCluster();
+ let res = await findCluster()
if (res && res.success) {
if (res.data && res.data.clusterId) {
- this.isHasColony = true;
- this.clusterid = res.data.clusterId;
- this.ruleForm.clustername = res.data.clusterName;
- this.ruleForm.clusterpwd = "******";
- this.ruleForm.virtualIp = res.data.virtualIp;
- this.isSearch = false;
+ this.isHasColony = true
+ this.clusterid = res.data.clusterId
+ this.ruleForm.clustername = res.data.clusterName
+ this.ruleForm.clusterpwd = "******"
+ this.ruleForm.virtualIp = res.data.virtualIp
+ 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.hardwareType = i.device_type.substr(4, 2);
- obj.cluster_id = i.cluster_id;
- obj.clusterName = res.data.clusterName;
- obj.create_time = i.create_time;
- obj.id = i.id;
- obj.node_id = i.node_id;
- obj.node_ip = i.node_ip;
- obj.nodeName = i.node_name;
- obj.Address = i.node_ip;
- obj.role = i.drift_state ? i.drift_state : "pc";
- return obj;
- });
+ let obj = {}
+ obj.device_type = i.device_type
+ obj.workType = i.device_type.substr(2, 2)
+ obj.hardwareType = i.device_type.substr(4, 2)
+ obj.cluster_id = i.cluster_id
+ obj.clusterName = res.data.clusterName
+ obj.create_time = i.create_time
+ obj.id = i.id
+ obj.node_id = i.node_id
+ obj.node_ip = i.node_ip
+ obj.nodeName = i.node_name
+ obj.Address = i.node_ip
+ obj.role = i.drift_state ? i.drift_state : "pc"
+ return obj
+ })
} else {
- this.isHasColony = false;
+ this.isHasColony = false
}
}
},
clearInnerNodes() {
- this.innerNodes = [];
- },
- },
-};
+ this.innerNodes = []
+ }
+ }
+}
</script>
<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;
- .title{
- font-size: 14px;
+ 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;
box-sizing: border-box;
- .icon{
+ 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: 18px;
+ font-size: 14px;
+ margin-left: 10px;
}
}
}
@@ -624,6 +731,8 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ background: #fbfaff;
+
.cluster-center {
height: 100%;
width: 280px;
@@ -631,26 +740,31 @@
box-sizing: border-box;
flex-shrink: 0;
padding: 10px;
- border-right: 5px solid #f8f8f8;
+ 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;
- height: 50px;
+ background-color: #f8f8f8;
+ cursor: pointer;
+ height: 56px;
margin-bottom: 10px;
border-radius: 8px;
- line-height: 50px;
- font-size: 15px;
+ 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;
- }
+ // .menu-item:hover {
+ // background-color: var(--colorCard);
+ // color: white;
+ // }
}
.cluster-right {
flex: 1;
@@ -658,34 +772,113 @@
overflow: auto;
box-sizing: border-box;
position: relative;
+ border-top: 4px solid #f2f2f7;
padding: 20px 40px;
- .el-form-item.is-required:not(.is-no-asterisk)
- > .el-form-item__label:before,
- .el-form-item.is-required:not(.is-no-asterisk)
- .el-form-item__label-wrap
- > .el-form-item__label:before {
+ 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) .el-form-item__label-wrap > .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 {
+ .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;
- line-height: 42px;
+ padding: 0 20px;
+ font-size: 14px;
+ .iconfont {
+ margin-right: 8px;
+ }
+ }
+ .clu-item:hover {
+ background: var(--colorCard);
+ color: #fff;
+ }
+ .clu-item-active {
+ background: var(--colorCard);
+ color: #fff;
}
}
.el-form-item__content {
- line-height: 40px;
- position: relative;
- font-size: 14px;
+ 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__error {
+ line-height: 0.7;
+ left: 20px;
+ }
+ .el-form-item {
+ margin-bottom: 16px;
+ .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;
--
Gitblit v1.8.0