| | |
| | | <div class="ui-top-title">视频分析集群管理</div> |
| | | </div> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <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-item label="虚拟IP" prop="virtualip"> |
| | | <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input> |
| | | </el-form-item> --> |
| | | </el-form-item>--> |
| | | <el-form-item style="width:500px"> |
| | | <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-tab-pane> |
| | | |
| | | |
| | | <!-- 加入已有集群 --> |
| | | <el-tab-pane label="加入已有集群" name="3" :disabled="isHasColony"> |
| | | <el-tab-pane label="加入已有集群" name="2" :disabled="isHasColony"> |
| | | <el-form label-width="80px" :model="joinForm" :rules="joinRules" ref="joinForm"> |
| | | <el-form-item label="IP地址" style="width:440px"> |
| | | <el-input v-model="joinForm.clusterip" placeholder="请输入集群内任意IP地址" size="small"> |
| | | <el-input |
| | | v-model="joinForm.clusterip" |
| | | placeholder="请输入集群内任意IP地址" |
| | | size="small" |
| | | autocomplete="new-password" |
| | | > |
| | | <el-button |
| | | type="text" |
| | | slot="suffix" |
| | |
| | | placeholder="请输入集群密码" |
| | | show-password |
| | | size="small" |
| | | autocomplete="new-password" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item style="width:440px"> |
| | |
| | | |
| | | <!-- <el-form-item label="虚拟IP" prop="virtualip"> |
| | | <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input> |
| | | </el-form-item> --> |
| | | </el-form-item>--> |
| | | <el-form-item style="width:440px;text-align: right;"> |
| | | <el-button size="small" type="danger" @click="leave">退出集群</el-button> |
| | | <el-button |
| | |
| | | </el-form> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="14" style="height: 100%;" v-if="members.length !== 0"> |
| | | <el-col :span="10" style="height: 100%;" v-if="members.length !== 0"> |
| | | <serfDiagram |
| | | ref="diagram" |
| | | :members="members" |
| | |
| | | <el-tab-pane label="加入已有集群" name="s-second"> |
| | | <el-form label-width="80px"> |
| | | <el-form-item label="IP地址" style="text-align: left;"> |
| | | <el-input v-model="clusterip2" placeholder="请输入集群内任意IP地址" size="small"> |
| | | <el-input |
| | | v-model="clusterip2" |
| | | placeholder="请输入集群内任意IP地址" |
| | | size="small" |
| | | autocomplete="off" |
| | | > |
| | | <el-button |
| | | type="text" |
| | | slot="suffix" |
| | |
| | | serfDiagram, |
| | | ipInput |
| | | }, |
| | | data() { |
| | | data () { |
| | | const checkPwd = (rule, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error("密码不能为空")); |
| | |
| | | }, |
| | | watch: {}, |
| | | methods: { |
| | | cleanValue() { |
| | | cleanValue () { |
| | | this.members = []; |
| | | }, |
| | | sHandleClick(tab, event) { |
| | | sHandleClick (tab, event) { |
| | | console.log(tab, event); |
| | | }, |
| | | submitForm(formName) { |
| | | submitForm (formName) { |
| | | this.$refs[formName].validate(valid => { |
| | | if (valid) { |
| | | alert("submit!"); |
| | | //alert("submit!"); |
| | | let json = { |
| | | clusterId: this.clusterid, |
| | | clusterName: this.ruleForm.clustername, |
| | |
| | | } |
| | | }); |
| | | }, |
| | | saveForm(formName) { |
| | | saveForm (formName) { |
| | | debugger |
| | | this.$refs[formName].validate(valid => { |
| | | if (valid) { |
| | |
| | | enable: this.vrIpForm.enable, |
| | | serve_port: this.vrIpForm.serve_port, |
| | | virtual_ip: this.vrIpForm.virtual_ip, |
| | | |
| | | |
| | | }; |
| | | setVrrp(json).then(() => { |
| | | this.getVrrpInfo(); |
| | |
| | | } |
| | | }); |
| | | }, |
| | | join(formName) { |
| | | join (formName) { |
| | | this.$refs[formName].validate(valid => { |
| | | if (valid) { |
| | | if (Object.keys(this.currentCluster).length === 0) { |
| | |
| | | } |
| | | }); |
| | | }, |
| | | async createColony(json) { |
| | | async createColony (json) { |
| | | let res = await createColony(json); |
| | | console.log(res, "创建集群"); |
| | | this.$notify({ |
| | |
| | | type: res.success ? "success" : "error" |
| | | }); |
| | | }, |
| | | async randomPwd() { |
| | | async randomPwd () { |
| | | let res = await randomPwd(); |
| | | if (res && res.success) { |
| | | this.ruleForm.clusterpwd = res.data; |
| | | } |
| | | }, |
| | | async searchColony() { |
| | | async searchColony () { |
| | | this.$refs["joinForm"].validate(valid => { |
| | | if (valid) { |
| | | this.members = []; |
| | | let json = { |
| | | password: this.joinForm.clusterpwd, |
| | | ip: this.joinForm.clusterip |
| | |
| | | } |
| | | }); |
| | | }, |
| | | async search(json) { |
| | | async search (json) { |
| | | let res = await search(json); |
| | | if (res && res.success) { |
| | | console.log(res, "搜索集群"); |
| | |
| | | this.stopSearch(); |
| | | }, 10 * 1000); |
| | | }, |
| | | async getSearchNodes() { |
| | | async getSearchNodes () { |
| | | let res = await getSearchNodes(); |
| | | if (res && res.success) { |
| | | let list = res.data.map(i => { |
| | |
| | | }); |
| | | } |
| | | }, |
| | | setSchedule() { |
| | | setSchedule () { |
| | | this.scheduleId = window.setInterval(() => { |
| | | this.getSearchNodes(); |
| | | }, 1000); |
| | | }, |
| | | async stopSearch() { |
| | | async stopSearch () { |
| | | if (!this.loading) { |
| | | return true; |
| | | } |
| | |
| | | // },2000) |
| | | }) |
| | | }, |
| | | async findCluster() { |
| | | async findCluster () { |
| | | let res = await findCluster(); |
| | | if (res && res.success) { |
| | | if (res.data && res.data.clusterId) { |
| | |
| | | } |
| | | } |
| | | }, |
| | | getVrrpInfo(){ |
| | | getVrrp().then(res=>{ |
| | | if(res.success){ |
| | | getVrrpInfo () { |
| | | getVrrp().then(res => { |
| | | if (res.success) { |
| | | this.vrIpForm.virtual_ip = res.data.virtual_ip; |
| | | this.vrIpForm.enable = res.data.enable; |
| | | } |
| | | }).catch(e=>{ |
| | | }).catch(e => { |
| | | console.log(e) |
| | | }) |
| | | }, |
| | | async updateClusterName() { |
| | | async updateClusterName () { |
| | | let res = await updateClusterName({ |
| | | clusterName: this.mangeForm.colonyName |
| | | }); |
| | |
| | | type: res.success ? "success" : "error" |
| | | }); |
| | | }, |
| | | async joinCluster(json) { |
| | | async joinCluster (json) { |
| | | let res = await joinCluster(json); |
| | | if (res.success) { |
| | | this.members = [] |
| | |
| | | type: res.success ? "success" : "error" |
| | | }); |
| | | }, |
| | | leave() { |
| | | leave () { |
| | | this.$confirm(`确定退出集群吗?`, { |
| | | center: true, |
| | | cancelButtonClass: "comfirm-class-cancle", |
| | |
| | | this.members = []; |
| | | } |
| | | }).catch(() => { }); |
| | | |
| | | |
| | | }, |
| | | joinNode(event, node) { |
| | | joinNode (event, node) { |
| | | debugger |
| | | this.currentCluster.cluster_id = node.cluster_id; |
| | | if (this.activeName === "3") { |
| | | this.manageForm.clustername = node.clusterName; |
| | |
| | | }); |
| | | } |
| | | }, |
| | | generatePassword() { |
| | | generatePassword () { |
| | | var chars = |
| | | "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; |
| | | var uuid = []; |
| | |
| | | |
| | | this.ruleForm.clusterpwd = uuid.join(""); |
| | | }, |
| | | onIpBlur(ip) { |
| | | onIpBlur (ip) { |
| | | this.vrIpForm.virtual_ip = ip; |
| | | } |
| | | }, |
| | | mounted() { |
| | | mounted () { |
| | | this.findCluster(); |
| | | this.getVrrpInfo(); |
| | | }, |
| | | created() { } |
| | | created () { } |
| | | }; |
| | | </script> |
| | | <style lang="scss"> |