<template>
|
<div class="s-cluster-management">
|
<div class="ui-top-view">
|
<div class="ui-top-title">视频分析集群管理</div>
|
</div>
|
<el-row>
|
<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="100px"
|
>
|
<el-form-item label="集群名称" prop="clustername">
|
<el-input
|
v-model="ruleForm.clustername"
|
placeholder="手动输入, 如“集群A”"
|
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>
|
<el-form-item label="集群密码" prop="clusterpwd">
|
<el-input
|
v-model="ruleForm.clusterpwd"
|
placeholder="请输入6位密码,或点击生成"
|
size="small"
|
>
|
<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"
|
class="ip-input-comp"
|
></ip-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
size="small"
|
@click="submitForm('ruleForm')"
|
>保存</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
|
<!-- 加入已有集群 -->
|
<el-tab-pane label="加入已有集群" name="2" :disabled="isHasColony">
|
<el-form
|
label-width="80px"
|
:model="joinForm"
|
:rules="joinRules"
|
ref="joinForm"
|
class="join-form"
|
v-loading="joinLoading"
|
>
|
<el-form-item
|
label="集群ID"
|
style="width: 440px"
|
prop="clusterid"
|
>
|
<el-input
|
v-model="joinForm.clusterid"
|
placeholder
|
size="small"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="IP地址"
|
style="width: 440px"
|
prop="clusterip"
|
>
|
<el-input
|
v-model="joinForm.clusterip"
|
placeholder="请输入集群内任意IP地址"
|
size="small"
|
autocomplete="new-password"
|
></el-input>
|
|
<!-- <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: 440px"
|
>
|
<el-input
|
v-model="joinForm.clusterpwd"
|
placeholder="请输入集群密码"
|
show-password
|
size="small"
|
autocomplete="new-password"
|
>
|
<el-button
|
type="text"
|
slot="suffix"
|
v-show="!searchDis"
|
@click="searchColony"
|
>搜索集群</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-item style="width: 440px">
|
<el-button type="primary" @click="join('joinForm')" size="small"
|
>加入集群</el-button
|
>
|
</el-form-item>
|
<div class="form-tip">
|
请输入以上信息加入集群,或者通过集群密码搜索后进行加入
|
</div>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
<!-- 有集群的情况 -->
|
<div v-if="isHasColony" id="h-alaycluster">
|
<el-form :model="ruleForm" ref="ruleForm" label-width="100px">
|
<el-form-item label="集群名称" prop="clustername">
|
<el-input
|
v-model="ruleForm.clustername"
|
placeholder="手动输入, 如“集群A”"
|
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>
|
<el-form-item label="集群密码" prop="clusterpwd">
|
<el-input
|
v-model="ruleForm.clusterpwd"
|
disabled
|
placeholder="请输入6位密码,或点击生成"
|
size="small"
|
></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>
|
<el-form-item style="text-align: right">
|
<el-button size="small" type="danger" @click="leave"
|
>退出集群</el-button
|
>
|
<el-button
|
style="margin-right: 10px"
|
type="primary"
|
size="small"
|
@click="updateCluster('manageForm')"
|
>保存</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-col>
|
<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-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-title">存储集群管理</div>
|
</div>
|
<el-row>
|
<el-col :span="12">
|
<el-tabs id="e-dbcluster" v-model="sActiveName">
|
<el-tab-pane label="创建集群" name="s-first" v-if="sActiveName != 's-third1'">
|
<el-button
|
type="primary"
|
style="float: left;margin: 20px 0px;"
|
size="small"
|
@click="createEsCluster()"
|
>创建存储集群</el-button>
|
|
</el-tab-pane>
|
<el-tab-pane label="加入已有集群" name="s-second" v-if="sActiveName != 's-third1'">
|
<el-form label-width="80px">
|
<el-form-item label="IP地址" style="text-align: left;width: 300px;">
|
<el-input
|
v-model="esNodeIp"
|
placeholder="请输入集群内任意IP地址"
|
size="small"
|
autocomplete="off"
|
></el-input>
|
<el-checkbox
|
label="主节点"
|
v-model="esNodeType"
|
style="margin-left: 20px;position: absolute;"
|
></el-checkbox>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="joinESCluster()"
|
size="small"
|
style="float: left;"
|
>加入集群</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="集群信息" name="s-third">
|
<el-table :data="esNodes" style="width: 100%">
|
<el-table-column prop="nodeType" label="节点类型"></el-table-column>
|
<el-table-column prop="name" label="节点名称"></el-table-column>
|
<el-table-column prop="ip" label="节点IP地址" min-width="90px"></el-table-column>
|
<el-table-column prop="buildDate" label="注册时间" min-width="120px"></el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</el-col>
|
</el-row>-->
|
</div>
|
</template>
|
|
<script>
|
import {
|
createSerfCluster,
|
randomPwd,
|
search,
|
getSearchNodes,
|
stopSearching,
|
findCluster,
|
updateClusterName,
|
joinCluster,
|
leave,
|
setVrrp,
|
createESNode,
|
addESNode,
|
getEsClusterInfo,
|
} from "@/api/clusterManage";
|
|
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,
|
cloudNode,
|
},
|
data() {
|
const checkPwd = (rule, value, callback) => {
|
debugger;
|
if (!value) {
|
return callback(new Error("密码不能为空"));
|
}
|
setTimeout(() => {
|
if (value.length != 6) {
|
callback(new Error("密码应为6位!"));
|
} else {
|
callback();
|
}
|
}, 1000);
|
};
|
|
return {
|
activeName: "1",
|
sActiveName: "s-first",
|
clusterid: "",
|
esNodeIp: "",
|
esNodeType: "",
|
clusterpwd2: "",
|
sClusterip: "",
|
ruleForm: {
|
clustername: "",
|
clusterpwd: "",
|
virtualIp: "",
|
},
|
vrIpForm: {
|
enable: true,
|
//serve_port: "",
|
serve_port: null,
|
virtual_ip: "",
|
},
|
manageForm: {
|
clustername: "测试集群1",
|
clusterpwd: "123456",
|
virtualip: "192.168.1.188",
|
},
|
joinForm: {
|
clusterid: "",
|
clusterip: "",
|
clusterpwd: "",
|
},
|
rules: {
|
clustername: [
|
{ required: true, message: "请输入集群名称", trigger: "change" },
|
],
|
clusterpwd: [{ validator: checkPwd, trigger: "change" }],
|
virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],
|
},
|
joinRules: {
|
clusterid: [
|
{ required: true, message: "请输入集群ID", trigger: "change" },
|
],
|
clusterip: [{ required: true, validator: isIPv4, trigger: "change" }],
|
clusterpwd: [{ validator: checkPwd, trigger: "change" }],
|
},
|
esNodes: [],
|
scheduleId: "",
|
isHasColony: false,
|
isSearch: false,
|
currentCluster: {},
|
searchNum: "",
|
loading: false,
|
searchDis: false,
|
agentName: "",
|
members: [],
|
innerNodes: [],
|
intervalTimer: null,
|
joinLoading: false,
|
showJoinConfirm: false,
|
};
|
},
|
mounted() {
|
this.findCluster();
|
let _this = this;
|
this.intervalTimer = setInterval(() => {
|
_this.findCluster();
|
}, 30000);
|
//this.getEsClusterNodes();
|
},
|
beforeDestroy() {
|
clearInterval(this.intervalTimer);
|
},
|
methods: {
|
checkPsd(psd) {
|
return psd.trim().length === 6;
|
},
|
// cleanValue() {
|
// this.members = [];
|
// },
|
// sHandleClick(tab, event) {
|
// console.log(tab, event);
|
// },
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
//alert("submit!");
|
let json = {
|
clusterId: this.clusterid,
|
clusterName: this.ruleForm.clustername,
|
password: this.ruleForm.clusterpwd,
|
virtualIp: this.ruleForm.virtualIp,
|
};
|
this.createCluster(json).then(() => {
|
this.findCluster();
|
});
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
|
// saveForm(formName) {
|
// this.$refs[formName].validate(valid => {
|
// if (valid) {
|
// alert("submit!");
|
// let json = {
|
// enable: this.vrIpForm.enable,
|
// serve_port: this.vrIpForm.serve_port,
|
// virtual_ip: this.vrIpForm.virtual_ip,
|
|
// };
|
// setVrrp(json).then(() => {
|
// this.getVrrpInfo();
|
// });
|
// } else {
|
// console.log("error submit!!");
|
// return false;
|
// }
|
// });
|
// },
|
|
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) => {
|
return i.Address;
|
});
|
let json = {
|
//clusterId: this.currentCluster.cluster_id,
|
clusterId: this.joinForm.clusterid,
|
password: this.joinForm.clusterpwd,
|
nodeIps: [this.joinForm.clusterip],
|
};
|
this.joinCluster(json)
|
.then(() => {
|
_this.joinLoading = false;
|
this.findCluster();
|
})
|
.catch((e) => {
|
console.log(e);
|
_this.joinLoading = false;
|
});
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
async createCluster(json) {
|
let res = await createSerfCluster(json);
|
console.log(res, "创建集群");
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error",
|
});
|
},
|
async randomPwd() {
|
let res = await randomPwd();
|
if (res && res.success) {
|
this.ruleForm.clusterpwd = res.data;
|
}
|
},
|
async searchColony() {
|
this.isSearch = true;
|
this.$refs["joinForm"].clearValidate();
|
this.$refs["joinForm"].validateField("clusterpwd");
|
if (this.checkPsd(this.joinForm.clusterpwd)) {
|
this.members = [];
|
let json = {
|
password: this.joinForm.clusterpwd,
|
//ip: this.joinForm.clusterip
|
};
|
|
this.search(json)
|
.then(() => {
|
this.setSchedule();
|
// this.searchDis = false;
|
// this.loading = false;
|
})
|
.catch(() => {
|
this.searchDis = false;
|
this.loading = false;
|
this.isSearch = false;
|
});
|
} else {
|
this.searchDis = false;
|
this.loading = false;
|
this.isSearch = false;
|
return false;
|
}
|
//});
|
},
|
async search(json) {
|
let res = await search(json);
|
if (res && res.success) {
|
this.searchNum = res.data;
|
}
|
this.searchDis = true;
|
this.loading = true;
|
window.setTimeout(() => {
|
this.stopSearch();
|
}, 10 * 1000);
|
},
|
//搜索集群
|
async 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;
|
});
|
list.map((i) => {
|
let found = this.members.find((element) => {
|
return element.node_id === i.node_id;
|
});
|
if (found === undefined) {
|
this.members.push(i);
|
}
|
});
|
}
|
},
|
setSchedule() {
|
this.scheduleId = window.setInterval(() => {
|
this.getSearchNodes();
|
}, 1000);
|
},
|
async stopSearch() {
|
if (!this.loading) {
|
return true;
|
}
|
stopSearching({
|
searchNum: this.searchNum,
|
})
|
.then((res) => {
|
console.log(res, "正常结束");
|
this.loading = false;
|
this.searchDis = false;
|
window.clearInterval(this.scheduleId);
|
})
|
.catch((err) => {
|
console.log(err, "报错结束");
|
this.$notify({
|
type: "error",
|
duration: 1000,
|
message: "停止搜索报错！",
|
});
|
// window.setTimeout(()=>{
|
// this.loading = false;
|
// this.searchDis = false;
|
// window.clearInterval(this.scheduleId);
|
// },2000)
|
});
|
},
|
async findCluster() {
|
let res = await findCluster();
|
if (res && res.success) {
|
if (res.data && res.data.clusterId) {
|
this.isHasColony = true;
|
this.activeName = "3";
|
this.clusterid = res.data.clusterId;
|
this.ruleForm.clustername = res.data.clusterName;
|
this.ruleForm.clusterpwd = "******";
|
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;
|
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;
|
});
|
|
//this.members = this.members.concat(list);
|
console.log(this.members);
|
} else {
|
this.isHasColony = false;
|
// this.activeName = '1'
|
}
|
}
|
},
|
async updateCluster() {
|
if (this.ruleForm.clustername === "") {
|
this.$message({
|
type: "error",
|
message: "集群名称不能为空",
|
});
|
|
return;
|
}
|
|
let res = await updateClusterName({
|
clusterName: this.ruleForm.clustername,
|
virtualIp: this.ruleForm.virtualIp,
|
});
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error",
|
});
|
},
|
async joinCluster(json) {
|
let res = await joinCluster(json);
|
if (res.success) {
|
this.members = [];
|
}
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error",
|
});
|
},
|
leave() {
|
this.$confirm(`确定退出集群吗?`, {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure",
|
})
|
.then(async () => {
|
let res = await leave();
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error",
|
});
|
if (res && res.success) {
|
this.ruleForm.clustername = "";
|
this.ruleForm.clusterpwd = "";
|
this.clusterid = "";
|
this.isHasColony = false;
|
this.activeName = "1";
|
this.members = [];
|
this.innerNodes = [];
|
}
|
})
|
.catch(() => {
|
this.ruleForm.clustername = "";
|
this.ruleForm.clusterpwd = "";
|
this.clusterid = "";
|
this.isHasColony = false;
|
this.activeName = "1";
|
this.members = [];
|
this.innerNodes = [];
|
});
|
},
|
joinNode(event, node) {
|
console.log("join", node);
|
let _this = this;
|
this.currentCluster.cluster_id = node.cluster_id;
|
if (this.activeName === "3") {
|
this.manageForm.clustername = node.clusterName;
|
this.clusterid = node.cluster_id;
|
return;
|
}
|
if (this.activeName === "2") {
|
if (_this.showJoinConfirm) return;
|
|
this.$confirm("是否要加入节点 " + node.nodeName + "?", "加入集群", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "success",
|
})
|
.then(() => {
|
_this.showJoinConfirm = true;
|
let json = {
|
//clusterId: this.currentCluster.cluster_id,
|
clusterId: node.cluster_id,
|
password: this.joinForm.clusterpwd,
|
nodeIps: [node.Address],
|
};
|
this.joinCluster(json)
|
.then(() => {
|
_this.showJoinConfirm = false;
|
this.findCluster();
|
})
|
.catch((e) => {
|
console.log(e);
|
_this.showJoinConfirm = false;
|
});
|
})
|
.catch((e) => {
|
console.log(e);
|
});
|
|
// this.$refs["joinForm"].validate(valid => {
|
// if (valid) {
|
// if (_this.showJoinConfirm) return;
|
// _this.showJoinConfirm = true;
|
// this.$confirm("是否要加入节点 " + node.nodeName + "?", "加入集群", {
|
// confirmButtonText: "确定",
|
// cancelButtonText: "取消",
|
// type: "success"
|
// })
|
// .then(() => {
|
|
// console.log(this.currentCluster, '选择的集群节点')
|
// this.join("joinForm");
|
// _this.showJoinConfirm = false;
|
// })
|
// .catch(() => {
|
// this.$notify({
|
// type: "info",
|
// duration: 1000,
|
// message: "已取消"
|
// });
|
// _this.showJoinConfirm = false;
|
// });
|
// } else {
|
// console.log("error submit!!");
|
// return false;
|
// }
|
// });
|
}
|
},
|
generatePassword() {
|
var chars =
|
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
|
var uuid = [];
|
|
for (let i = 0; i < 6; i++) {
|
uuid[i] = chars[0 | (Math.random() * 50)];
|
}
|
|
this.ruleForm.clusterpwd = uuid.join("");
|
},
|
|
async getEsClusterNodes() {
|
let rsp = await getDevInfo();
|
let hostIpAddr = "";
|
if (rsp && rsp.success) {
|
hostIpAddr = rsp.data.ip;
|
}
|
|
if (hostIpAddr.length) {
|
rsp = await getEsClusterInfo({ ip: hostIpAddr });
|
if (rsp && rsp.success) {
|
this.esNodes = rsp.data.map((el) => {
|
return {
|
// buildDate: "2018-06-11T23:38:03.357887Z",
|
buildDate:
|
el.buildDate.split("T")[0] +
|
" " +
|
el.buildDate.split("T")[1].slice(0, 8),
|
ip: el.ip,
|
name: el.name,
|
nodeType: el.nodeType,
|
};
|
});
|
|
if (this.esNodes.length) {
|
this.sActiveName = "s-third";
|
}
|
}
|
}
|
},
|
createEsCluster() {
|
createESNode()
|
.then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$message({
|
type: "success",
|
duration: 2000,
|
message: "创建成功",
|
});
|
|
this.getSearchNodes();
|
} else {
|
this.$message({
|
type: "error",
|
duration: 2000,
|
message: rsp.msg,
|
});
|
}
|
})
|
.catch((rsp) => {
|
this.$message({
|
type: "error",
|
duration: 2000,
|
message: rsp.msg,
|
});
|
});
|
},
|
joinESCluster() {
|
if (!this.esNodeIp.length) {
|
this.$message({
|
type: "error",
|
duration: 2000,
|
message: "请输入正确的ip地址",
|
});
|
return;
|
}
|
|
addESNode({ ip: this.esNodeIp, option: this.esNodeType ? "1" : "2" })
|
.then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$message({
|
type: "success",
|
duration: 2000,
|
message: "加入成功",
|
});
|
|
this.getSearchNodes();
|
} else {
|
this.$message({
|
type: "error",
|
duration: 2000,
|
message: rsp.msg,
|
});
|
}
|
})
|
.catch((rsp) => {
|
this.$message({
|
type: "error",
|
duration: 2000,
|
message: rsp.msg,
|
});
|
});
|
},
|
onIpBlur(ip) {
|
//this.vrIpForm.virtual_ip = ip;
|
this.ruleForm.virtualIp = ip;
|
console.log(this.ruleForm.virtualIp);
|
},
|
},
|
|
created() {},
|
};
|
</script>
|
<style lang="scss">
|
.s-cluster-management {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
.el-form-item {
|
width: 500px;
|
}
|
.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;
|
}
|
.ip-input-comp {
|
width: 400px;
|
max-width: 400px;
|
}
|
.el-button {
|
float: right;
|
}
|
.el-form-item__content {
|
text-align: left;
|
|
input {
|
max-width: 400px !important;
|
}
|
}
|
|
#e-alaycluster,
|
#e-dbcluster {
|
.el-tabs__header {
|
border: 0px solid #dcdfe6;
|
.el-tabs__item {
|
padding: 5px 50px;
|
height: 50px;
|
font-family: PingFangSC-Regular;
|
font-size: 14px;
|
color: #222222;
|
text-align: center;
|
border: 0px solid transparent;
|
}
|
.el-tabs__item:nth-child(2) {
|
padding-left: 50px;
|
}
|
.el-tabs__item:last-child {
|
padding-right: 50px;
|
}
|
.el-tabs__item.is-active {
|
color: #ff7733;
|
font-weight: bold;
|
// border-right-color: #fff;
|
// border-left-color: #fff;
|
}
|
.el-tabs__item:not(.is-disabled):hover {
|
color: #ff7733;
|
}
|
}
|
.el-tabs__active-bar {
|
background-color: #ff7733;
|
}
|
.el-form-item__content {
|
text-align: left;
|
input {
|
max-width: 420px;
|
}
|
}
|
}
|
|
#h-alaycluster {
|
.el-form-item__content {
|
text-align: left;
|
}
|
}
|
}
|
.ui-top-view {
|
height: 30px;
|
line-height: 30px;
|
}
|
</style>
|
