| | |
| | | </el-form> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12" 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" |
| | | :searchNodes="nodes" |
| | | :agent="agentName" |
| | | v-loading="loading" |
| | | @selected-node="joinNode" |
| | | class="nodes-svg" |
| | | ></serfDiagram> |
| | | </el-col> |
| | | <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> |
| | | |
| | |
| | | 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) => { |
| | |
| | | esNodes: [], |
| | | scheduleId: "", |
| | | isHasColony: false, |
| | | isSearch: false, |
| | | currentCluster: {}, |
| | | searchNum: "", |
| | | loading: false, |
| | | searchDis: false, |
| | | agentName: "", |
| | | members: [], |
| | | nodes: [], |
| | | innerNodes: [], |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | } |
| | | }, |
| | | async searchColony() { |
| | | this.isSearch = true; |
| | | this.$refs["joinForm"].validate(valid => { |
| | | if (valid) { |
| | | this.members = []; |
| | |
| | | .catch(() => { |
| | | this.searchDis = false; |
| | | this.loading = false; |
| | | this.isSearch = false; |
| | | }); |
| | | } else { |
| | | this.searchDis = false; |
| | | this.loading = false; |
| | | this.isSearch = false; |
| | | return false; |
| | | } |
| | | }); |
| | |
| | | return element.node_id === i.node_id; |
| | | }); |
| | | if (found === undefined) { |
| | | //this.members.push(i); |
| | | this.nodes.push(i); |
| | | this.members.push(i); |
| | | } |
| | | }); |
| | | } |
| | |
| | | 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 => { |
| | | debugger |
| | | //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.role = i.role ? i.role : "pc"; |
| | | return obj; |
| | | }); |
| | | this.members = this.members.concat(list); |
| | | |
| | | //this.members = this.members.concat(list); |
| | | console.log(this.members) |
| | | } else { |
| | | this.isHasColony = false; |
| | |
| | | this.isHasColony = false; |
| | | this.activeName = "1"; |
| | | this.members = []; |
| | | this.innerNodes = []; |
| | | } |
| | | }).catch(() => { }); |
| | | |
| | |
| | | line-height: 30px; |
| | | } |
| | | .nodes-svg{ |
| | | background-color: rgba(127, 255, 212, 0.459); |
| | | background-color: rgba(127, 172, 255, 0.459); |
| | | } |
| | | </style> |