From 1fbade862552c9387809f7e50dd75d6b019086f1 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期二, 13 十月 2020 15:04:45 +0800 Subject: [PATCH] 数据栈底图修复,场景配置算法关系改为读取字典 --- src/pages/settings/components/ClusterManagement.vue | 91 ++++++++++++++++++++++++--------------------- 1 files changed, 49 insertions(+), 42 deletions(-) diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue index 76ab639..9a04946 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> @@ -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,9 +85,9 @@ ></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 @@ -101,32 +100,18 @@ </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"> <serfDiagram ref="diagram" :members="members" :agent="agentName" v-loading="loading" @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> - </el-row> + <div class="ui-top-view"> <div class="ui-top-title">瀛樺偍闆嗙兢绠$悊</div> </div> @@ -178,6 +163,7 @@ </el-tabs> </el-col> </el-row> + </div> </template> @@ -205,7 +191,7 @@ import serfDiagram from "@/components/serfDiagram"; import ipInput from "@/components/subComponents/IPInput"; - +import {isIPv4} from "@/scripts/validate"; export default { components: { serfDiagram, @@ -229,6 +215,7 @@ } }, 1000); }; + return { activeName: "1", sActiveName: "s-first", @@ -240,7 +227,7 @@ ruleForm: { clustername: "", clusterpwd: "", - //virtualip: "" + virtualIp: "" }, vrIpForm: { enable: true, @@ -262,15 +249,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" }, @@ -303,12 +290,13 @@ submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { + debugger //alert("submit!"); let json = { 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 +307,7 @@ } }); }, + saveForm(formName) { this.$refs[formName].validate(valid => { if (valid) { @@ -338,7 +327,8 @@ } }); }, - join(formName) { + + join (formName) { this.$refs[formName].validate(valid => { if (valid) { if (Object.keys(this.currentCluster).length === 0) { @@ -482,9 +472,11 @@ this.clusterid = res.data.clusterId; this.ruleForm.clustername = res.data.clusterName; this.ruleForm.clusterpwd = res.data.clusterpwd - //this.ruleForm.virtualip = res.data.virtualip + this.ruleForm.virtualIp = res.data.virtualIp let list = res.data.nodes.map(i => { + debugger let obj = {}; + obj.device_type = i.device_type; obj.cluster_id = i.cluster_id; obj.clusterName = res.data.clusterName; obj.create_time = i.create_time; @@ -612,9 +604,7 @@ this.ruleForm.clusterpwd = uuid.join(""); }, - onIpBlur(ip) { - this.vrIpForm.virtual_ip = ip; - }, + async getEsClusterNodes() { let rsp = await getDevInfo(); let hostIpAddr = ""; @@ -699,8 +689,22 @@ message: rsp.msg }); }) + }, + onIpBlur (ip) { + //this.vrIpForm.virtual_ip = ip; + this.ruleForm.virtualIp = ip; + console.log(this.ruleForm.virtualIp) } - } + + + + }, + mounted () { + this.findCluster(); + + }, + created () { } + }; </script> <style lang="scss"> @@ -772,4 +776,7 @@ height: 30px; line-height: 30px; } +.nodes-svg{ + background-color: aquamarine; +} </style> -- Gitblit v1.8.0