<template>
|
<div class="addBox">
|
<div class="title">添加设备</div>
|
|
<div class="close iconfont" @click="close()"></div>
|
|
<div class="search">
|
<el-input
|
v-model="searchContent"
|
placeholder="请输入集群IP/集群名称/设备IP/设备名称"
|
></el-input>
|
<div class="button" @click="searchCluster">搜索集群</div>
|
<div class="button" @click="searchDevice">搜索设备</div>
|
</div>
|
|
<div class="clusterList">
|
<div class="tableList" v-if="listType == 'cluster'">
|
<div class="header">
|
<div
|
class="label"
|
v-for="(item, index) in clusterHeader"
|
:key="index"
|
>
|
{{ item }}
|
</div>
|
</div>
|
<div class="body" v-if="listType == 'cluster'">
|
<div class="row" v-for="(item, index) in clusterList" :key="index">
|
<div class="content">
|
<div class="rowItem index">{{ index + 1 }}</div>
|
<div class="rowItem name">{{ item.clusterName }}</div>
|
<div class="rowItem ip">{{ item.virtualIp }}</div>
|
<div class="rowItem status">
|
<div v-if="!item.canAdd" class="status green">已添加</div>
|
<div v-else class="status">未添加</div>
|
</div>
|
<div class="rowItem options">
|
<!-- 添加 -->
|
<span v-if="!item.canAdd">-</span>
|
<template v-else>
|
<span
|
class="iconfont option"
|
@click="showBox('cluster', item.clusterId)"
|
></span
|
>
|
<!-- 集群详情 -->
|
<span
|
class="iconfont option"
|
@click="showChildrenLIst(index, item.clusterId)"
|
></span
|
>
|
</template>
|
</div>
|
</div>
|
|
<div
|
class="overList"
|
:class="{ isShow: showClusterChild == index }"
|
>
|
<el-table
|
:data="overList"
|
:fit="true"
|
header-row-class-name="overList-head"
|
>
|
<el-table-column
|
label="序号"
|
type="index"
|
width="146"
|
class-name="index "
|
>
|
</el-table-column>
|
<el-table-column
|
prop="dev_id"
|
label="设备ID"
|
width="146"
|
></el-table-column>
|
|
<el-table-column
|
prop="dev_ip"
|
label="设备IP"
|
width="146"
|
></el-table-column>
|
|
<el-table-column
|
prop="dev_name"
|
label="设备名称"
|
width="240"
|
></el-table-column>
|
</el-table>
|
|
<div class="iconfont" @click="showClusterChild = null">
|

|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<el-table
|
:data="equipmentList"
|
:fit="true"
|
v-if="listType == 'equipment'"
|
>
|
<el-table-column
|
label="序号"
|
type="index"
|
width="72"
|
class-name="index"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="devId"
|
label="设备ID"
|
width="107"
|
></el-table-column>
|
<el-table-column
|
prop="devName"
|
label="设备名称"
|
width="107"
|
></el-table-column>
|
<el-table-column
|
prop="devIp"
|
label="设备IP"
|
width="107"
|
></el-table-column>
|
<el-table-column
|
prop="clusterName"
|
label="所属集群"
|
width="107"
|
></el-table-column>
|
<el-table-column label="状态" width="107">
|
<template slot-scope="scope">
|
<div v-if="!scope.row.canAdd" class="status green">已添加</div>
|
<div v-else class="status">未添加</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作" width="72">
|
<template slot-scope="scope">
|
<div class="options" v-if="scope">
|
<!-- 添加 -->
|
<span v-if="!scope.row.canAdd">-</span>
|
<span
|
v-else
|
class="iconfont option"
|
@click="showBox('dev', scope.row.devId, scope.row.clusterId)"
|
></span
|
>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="passwordBox" v-if="showPasswordBox">
|
<div class="title">申请添加设备</div>
|
<div class="des">
|
<span class="iconfont"></span>
|
如设备已加入集群，添加管理后集群下所有设备将在设备管理
|
页面显示，并支持信息查看及管理。
|
</div>
|
<div class="ask">密钥信息请询问设备管理人员</div>
|
<el-input v-model="auth_password"></el-input>
|
<div class="btns">
|
<div class="cancel button" @click="showPasswordBox = false">取消</div>
|
<div class="submit button" @click="submit">提交</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
findDeviceListAll,
|
findClustersBySearch,
|
getDevicesByCluster,
|
addCluster,
|
addDeviceToUser,
|
} from "@/api/device";
|
|
export default {
|
data() {
|
return {
|
listType: null, //展示的列表类型
|
searchContent: "", //搜索内容
|
showClusterChild: null, //展示集群列表下拉列表
|
clusterHeader: ["序号", "集群名称", "IP地址", "状态", "操作"], //集群列表表头
|
showPasswordBox: false,
|
clusterList: [],
|
equipmentList: [],
|
overList: [],
|
auth_password: "", //授权秘钥
|
addObj: {},
|
};
|
},
|
|
methods: {
|
close() {
|
this.$emit("close");
|
},
|
async showChildrenLIst(index, id) {
|
if (this.showClusterChild === index) {
|
this.showClusterChild = null;
|
return;
|
} else if (!index) {
|
this.showClusterChild = index;
|
}
|
this.showClusterChild = null;
|
setTimeout(() => {
|
this.showClusterChild = index;
|
}, 400);
|
|
const res = await getDevicesByCluster({
|
clusterId: id,
|
});
|
if (res && res.success) {
|
this.overList = res.data.list;
|
}
|
},
|
async getCluster() {
|
const res = await findClustersBySearch({
|
InputText: this.searchContent,
|
Page: 1,
|
Size: 10000,
|
});
|
if (res && res.success) {
|
this.clusterList = res.data.list;
|
}
|
},
|
|
async getDevice() {
|
const res = await findDeviceListAll({
|
InputText: this.searchContent,
|
Page: 1,
|
Size: 10000,
|
});
|
if (res && res.success) {
|
this.equipmentList = res.data.list;
|
}
|
},
|
|
searchCluster() {
|
this.getCluster();
|
this.listType = "cluster";
|
},
|
|
searchDevice() {
|
this.getDevice();
|
this.listType = "equipment";
|
},
|
|
async submit() {
|
let res = {};
|
if (this.addObj.type == "cluster") {
|
res = await addCluster({
|
authPwd: this.auth_password,
|
clusterId: this.addObj.id,
|
});
|
} else {
|
res = await addDeviceToUser({
|
authPwd: this.auth_password,
|
deviceId: this.addObj.id,
|
clusterId: this.addObj.cid,
|
});
|
}
|
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "添加成功",
|
});
|
this.close();
|
}
|
},
|
showBox(type, id, cid) {
|
this.auth_password = "";
|
this.showPasswordBox = true;
|
this.addObj = {
|
type,
|
id,
|
cid,
|
};
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.addBox {
|
position: relative;
|
box-sizing: border-box;
|
padding: 20px;
|
position: fixed;
|
width: 720px;
|
top: 50%;
|
left: 50%;
|
margin-top: -317px;
|
margin-left: -360px;
|
filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
|
z-index: 999;
|
background-color: #fff;
|
|
.title {
|
padding-bottom: 20px;
|
font-size: 18px;
|
font-weight: 700;
|
border-bottom: 1px solid #e9ebee;
|
}
|
|
.search {
|
display: flex;
|
margin: 20px 0;
|
|
.el-input ::v-deep {
|
width: 324px;
|
height: 32px;
|
.el-input__inner {
|
padding: 0 10px;
|
width: 324px;
|
height: 32px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.button {
|
margin-left: 10px;
|
width: 88px;
|
height: 32px;
|
line-height: 32px;
|
background-color: #0065ff;
|
text-align: center;
|
color: #fff;
|
font-size: 14px;
|
}
|
}
|
|
.clusterList {
|
max-height: 507px;
|
overflow-y: overlay;
|
}
|
|
.tableList {
|
overflow-y: overlay;
|
max-height: 507px;
|
box-sizing: border-box;
|
border: 1px solid rgb(233, 235, 238);
|
border-bottom: none;
|
|
.header {
|
display: flex;
|
background: #f0f3f5;
|
font-size: 16px;
|
font-weight: 700;
|
|
.label {
|
padding-left: 10px;
|
width: 146px;
|
height: 50px;
|
line-height: 50px;
|
|
&:first-child {
|
padding-left: 20px;
|
width: 96px;
|
}
|
}
|
}
|
|
.content {
|
display: flex;
|
border-bottom: 1px solid #e9ebee;
|
font-size: 14px;
|
|
.rowItem {
|
padding-left: 10px;
|
width: 146px;
|
height: 48px;
|
line-height: 48px;
|
}
|
|
.index {
|
padding-left: 20px;
|
width: 96px;
|
}
|
|
.status {
|
color: #ff6a00;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 24px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
|
.options {
|
position: relative;
|
.childForm {
|
top: 0;
|
left: 0;
|
position: absolute;
|
}
|
}
|
}
|
|
.overList {
|
overflow: hidden;
|
max-height: 0;
|
position: relative;
|
transition: 0.4s all linear;
|
|
.iconfont {
|
position: absolute;
|
right: 52px;
|
top: 13px;
|
font-size: 24px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
|
&.isShow {
|
max-height: 500px;
|
}
|
}
|
}
|
|
.el-table ::v-deep {
|
background-color: rgb(233, 235, 238);
|
padding: 1px;
|
|
&::after {
|
display: none;
|
}
|
|
td.index .cell {
|
padding-left: 16px;
|
padding-right: 4px;
|
}
|
|
.has-gutter tr th {
|
background: #f0f3f5;
|
font-size: 16px;
|
color: #3d3d3d;
|
font-weight: 700;
|
}
|
|
td .cell {
|
color: #3d3d3d;
|
}
|
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
|
.status {
|
color: #ff6a00;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 24px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
|
.options {
|
position: relative;
|
.childForm {
|
top: 0;
|
left: 0;
|
position: absolute;
|
}
|
}
|
}
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
font-size: 12px;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.passwordBox {
|
box-sizing: border-box;
|
position: absolute;
|
padding: 20px;
|
top: 40px;
|
left: 50%;
|
margin-left: -220px;
|
width: 440px;
|
height: 302px;
|
filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
|
background-color: #fff;
|
font-size: 14px;
|
|
.des {
|
margin: 20px 0;
|
display: flex;
|
color: #0065ff;
|
span {
|
margin-top: 3px;
|
margin-right: 10px;
|
font-size: 16px;
|
}
|
}
|
|
.ask {
|
margin-bottom: 10px;
|
}
|
|
.el-input ::v-deep {
|
.el-input__inner {
|
padding: 0 10px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.btns {
|
margin-top: 40px;
|
display: flex;
|
justify-content: end;
|
text-align: center;
|
line-height: 32px;
|
font-size: 14px;
|
|
.cancel {
|
margin-right: 10px;
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
|
.submit {
|
width: 60px;
|
|
height: 32px;
|
color: #fff;
|
background-color: #0065ff;
|
border: 1px solid #0065ff;
|
}
|
}
|
}
|
}
|
</style>
|
