From 3300f811726041a3175784324eb2be9458e80e09 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 21 十月 2020 10:37:10 +0800
Subject: [PATCH] 左侧目录树图标对齐
---
src/pages/settings/components/ClusterManagement.vue | 166 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 111 insertions(+), 55 deletions(-)
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index 76ab639..9f07655 100644
--- a/src/pages/settings/components/ClusterManagement.vue
+++ b/src/pages/settings/components/ClusterManagement.vue
@@ -7,7 +7,7 @@
<el-col :span="12">
<el-tabs v-model="activeName" id="e-alaycluster" v-if="!isHasColony">
<el-tab-pane label="鍒涘缓闆嗙兢" name="1" :disabled="isHasColony">
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="闆嗙兢鍚嶇О" prop="clustername">
<el-input v-model="ruleForm.clustername" placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" size="small"></el-input>
</el-form-item>
@@ -19,10 +19,9 @@
<el-button type="text" slot="suffix" @click="generatePassword">鐢熸垚瀵嗙爜</el-button>
</el-input>
</el-form-item>
-
- <!-- <el-form-item label="铏氭嫙IP" prop="virtualip">
- <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
- </el-form-item>-->
+ <el-form-item label="铏氭嫙/澶栭儴IP" prop="virtualIp">
+ <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur"></ip-input>
+ </el-form-item>
<el-form-item style="width:500px">
<el-button type="primary" size="small" @click="submitForm('ruleForm')">淇濆瓨</el-button>
</el-form-item>
@@ -31,7 +30,7 @@
<!-- 鍔犲叆宸叉湁闆嗙兢 -->
<el-tab-pane label="鍔犲叆宸叉湁闆嗙兢" name="2" :disabled="isHasColony">
- <el-form label-width="80px" :model="joinForm" :rules="joinRules" ref="joinForm">
+ <el-form label-width="80px" :model="joinForm" :rules="joinRules" ref="joinForm" v-loading="joinLoading">
<el-form-item label="IP鍦板潃" style="width:440px">
<el-input
v-model="joinForm.clusterip"
@@ -53,7 +52,7 @@
<!-- <el-button size="mini" :disabled="searchDis" @click="searchColony">鎼滅储闆嗙兢</el-button>
<el-button size="mini" @click="stopSearch">鍋滄鎼滅储</el-button>-->
</el-form-item>
- <el-form-item label="闆嗙兢瀵嗙爜" prop="clusterpwd" style="width:500px">
+ <el-form-item label="闆嗙兢瀵嗙爜" prop="clusterpwd" style="width:440px">
<el-input
v-model="joinForm.clusterpwd"
placeholder="璇疯緭鍏ラ泦缇ゅ瘑鐮�"
@@ -70,7 +69,7 @@
</el-tabs>
<!-- 鏈夐泦缇ょ殑鎯呭喌 -->
<div v-if="isHasColony" id="h-alaycluster">
- <el-form :model="ruleForm" ref="ruleForm" label-width="80px">
+ <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
<el-form-item label="闆嗙兢鍚嶇О" prop="clustername">
<el-input v-model="ruleForm.clustername" placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" size="small"></el-input>
</el-form-item>
@@ -86,48 +85,48 @@
></el-input>
</el-form-item>
- <!-- <el-form-item label="铏氭嫙IP" prop="virtualip">
- <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
- </el-form-item>-->
+ <el-form-item label="铏氭嫙/澶栭儴IP" prop="virtualIp">
+ <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur"></ip-input>
+ </el-form-item>
<el-form-item style="width:440px;text-align: right;">
<el-button size="small" type="danger" @click="leave">閫�鍑洪泦缇�</el-button>
<el-button
style="margin-right:10px;"
type="primary"
size="small"
- @click="submitForm('manageForm')"
+ @click="updateCluster('manageForm')"
>淇濆瓨</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
- <el-col :span="10" 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"
:agent="agentName"
v-loading="loading"
+ :isShowHover="false"
@selected-node="joinNode"
+ class="nodes-svg"
></serfDiagram>
</el-col>
- </el-row>
- <div class="ui-top-view">
- <div class="ui-top-title">婕傜ЩIP</div>
- </div>
- <el-row>
- <el-col :span="12">
- <el-form :model="vrIpForm" ref="vrIpForm" :rules="vrIpRules" style="padding:20px 40px;">
- <el-form-item label="铏氭嫙IP" prop="virtual_ip">
- <ip-input :ip="vrIpForm.virtual_ip" :on-blur="onIpBlur"></ip-input>
- <el-switch v-model="vrIpForm.enable" style="margin-left:30px;"></el-switch>
- </el-form-item>
- <el-form-item style="width:500px">
- <el-button type="primary" size="small" @click="saveForm('vrIpForm')">淇濆瓨</el-button>
- </el-form-item>
- </el-form>
+ <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>
- <div class="ui-top-view">
+
+ <!-- <div class="ui-top-view">
<div class="ui-top-title">瀛樺偍闆嗙兢绠＄悊</div>
</div>
<el-row>
@@ -140,7 +139,7 @@
size="small"
@click="createEsCluster()"
>鍒涘缓瀛樺偍闆嗙兢</el-button>
- <!-- <p>鐐瑰嚮灏嗘湰鏈哄垱寤轰负瀛樺偍闆嗙兢</p> -->
+
</el-tab-pane>
<el-tab-pane label="鍔犲叆宸叉湁闆嗙兢" name="s-second" v-if="sActiveName != 's-third1'">
<el-form label-width="80px">
@@ -177,7 +176,7 @@
</el-tab-pane>
</el-tabs>
</el-col>
- </el-row>
+ </el-row> -->
</div>
</template>
@@ -202,14 +201,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) => {
@@ -229,6 +229,7 @@
}
}, 1000);
};
+
return {
activeName: "1",
sActiveName: "s-first",
@@ -240,7 +241,7 @@
ruleForm: {
clustername: "",
clusterpwd: "",
- //virtualip: ""
+ virtualIp: ""
},
vrIpForm: {
enable: true,
@@ -262,15 +263,15 @@
{ required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "change" }
],
clusterpwd: [{ validator: checkPwd, trigger: "change" }],
- // virtualip: [
- // { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" }
- // ]
- },
- vrIpRules: {
- virtualip: [
- { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" }
+ virtualIp: [
+ { required: true, validator: isIPv4, trigger: "change" }
]
},
+ // vrIpRules: {
+ // virtualIp: [
+ // { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" }
+ // ]
+ // },
joinRules: {
clusterpwd: [
{ required: true, message: "璇疯緭鍏ラ泦缇ゅ瘑鐮�", trigger: "change" },
@@ -280,18 +281,29 @@
esNodes: [],
scheduleId: "",
isHasColony: false,
+ isSearch: false,
currentCluster: {},
searchNum: "",
loading: false,
searchDis: false,
agentName: "",
- members: []
+ members: [],
+ innerNodes: [],
+ intervalTimer: null,
+ joinLoading: false,
+ showJoinConfirm: false
};
},
mounted() {
this.findCluster();
- this.getVrrpInfo();
+ let _this = this;
+ this.intervalTimer = setInterval(()=>{
+ _this.findCluster();
+ },30000);
this.getEsClusterNodes();
+ },
+ beforeDestroy(){
+ clearInterval(this.intervalTimer);
},
methods: {
cleanValue() {
@@ -308,7 +320,7 @@
clusterId: this.clusterid,
clusterName: this.ruleForm.clustername,
password: this.ruleForm.clusterpwd,
- //virtualip: this.ruleForm.virtualip
+ virtualIp: this.ruleForm.virtualIp
};
this.createCluster(json).then(() => {
this.findCluster();
@@ -319,6 +331,7 @@
}
});
},
+
saveForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
@@ -338,15 +351,19 @@
}
});
},
+
join(formName) {
+ let _this = this;
this.$refs[formName].validate(valid => {
if (valid) {
+ _this.joinLoading = true;
if (Object.keys(this.currentCluster).length === 0) {
this.$notify({
type: "info",
duration: 1000,
message: "璇峰厛閫夋嫨涓�涓泦缇よ妭鐐�"
});
+ _this.joinLoading = false;
return true;
}
let nodeIps = this.members.map(i => {
@@ -358,7 +375,11 @@
nodeIps: nodeIps
};
this.joinCluster(json).then(() => {
+ _this.joinLoading = false;
this.findCluster();
+ }).catch(e=>{
+ console.log(e);
+ _this.joinLoading = false;
});
} else {
console.log("error submit!!");
@@ -382,6 +403,7 @@
}
},
async searchColony() {
+ this.isSearch = true;
this.$refs["joinForm"].validate(valid => {
if (valid) {
this.members = [];
@@ -399,10 +421,12 @@
.catch(() => {
this.searchDis = false;
this.loading = false;
+ this.isSearch = false;
});
} else {
this.searchDis = false;
this.loading = false;
+ this.isSearch = false;
return false;
}
});
@@ -419,6 +443,7 @@
this.stopSearch();
}, 10 * 1000);
},
+ //鎼滅储闆嗙兢
async getSearchNodes() {
let res = await getSearchNodes();
if (res && res.success) {
@@ -482,9 +507,14 @@
this.clusterid = res.data.clusterId;
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 => {
+ this.ruleForm.virtualIp = res.data.virtualIp
+ //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.hardwareType = i.device_type.substr(4, 2);
obj.cluster_id = i.cluster_id;
obj.clusterName = res.data.clusterName;
obj.create_time = i.create_time;
@@ -493,10 +523,12 @@
obj.node_ip = i.node_ip;
obj.nodeName = i.node_name;
obj.Address = i.node_ip;
- obj.role = i.role ? i.role : "pc";
+ obj.role = i.drift_state ? i.drift_state : "pc";
return obj;
});
- this.members = this.members.concat(list);
+
+ //this.members = this.members.concat(list);
+ console.log(this.members)
} else {
this.isHasColony = false;
// this.activeName = '1'
@@ -513,9 +545,19 @@
console.log(e)
})
},
- async updateClusterName() {
+ async updateCluster() {
+ if (this.ruleForm.clustername === "") {
+ this.$message({
+ type: "error",
+ message: "闆嗙兢鍚嶇О涓嶈兘涓虹┖"
+ })
+
+ return
+ }
+
let res = await updateClusterName({
- clusterName: this.mangeForm.colonyName
+ clusterName: this.ruleForm.clustername,
+ virtualIp: this.ruleForm.virtualIp
});
this.$notify({
title: res.success ? "鎴愬姛" : "澶辫触",
@@ -553,11 +595,13 @@
this.isHasColony = false;
this.activeName = "1";
this.members = [];
+ this.innerNodes = [];
}
}).catch(() => { });
},
joinNode(event, node) {
+ let _this = this;
this.currentCluster.cluster_id = node.cluster_id;
if (this.activeName === "3") {
this.manageForm.clustername = node.clusterName;
@@ -567,6 +611,8 @@
if (this.activeName === "2") {
this.$refs["joinForm"].validate(valid => {
if (valid) {
+ if(_this.showJoinConfirm) return;
+ _this.showJoinConfirm = true;
this.$confirm("鏄惁瑕佸姞鍏ヨ妭鐐� " + node.nodeName + "?", "鍔犲叆闆嗙兢", {
confirmButtonText: "纭畾",
cancelButtonText: "鍙栨秷",
@@ -586,6 +632,7 @@
// })
console.log(this.currentCluster, '閫夋嫨鐨勯泦缇よ妭鐐�')
this.join("joinForm");
+ _this.showJoinConfirm = false;
})
.catch(() => {
this.$notify({
@@ -593,6 +640,7 @@
duration: 1000,
message: "宸插彇娑�"
});
+ _this.showJoinConfirm = false;
});
} else {
console.log("error submit!!");
@@ -612,9 +660,7 @@
this.ruleForm.clusterpwd = uuid.join("");
},
- onIpBlur(ip) {
- this.vrIpForm.virtual_ip = ip;
- },
+
async getEsClusterNodes() {
let rsp = await getDevInfo();
let hostIpAddr = "";
@@ -699,8 +745,17 @@
message: rsp.msg
});
})
+ },
+ onIpBlur(ip) {
+ //this.vrIpForm.virtual_ip = ip;
+ this.ruleForm.virtualIp = ip;
+ console.log(this.ruleForm.virtualIp)
}
- }
+
+ },
+
+ created() { }
+
};
</script>
<style lang="scss">
@@ -772,4 +827,5 @@
height: 30px;
line-height: 30px;
}
+
</style>
--
Gitblit v1.8.0