<template>
|
<div class="TableArea">
|
<div class="content">
|
<el-table
|
:data="subDevTable"
|
fit
|
highlight-current-row
|
style="width: 100%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
align="center"
|
width="80"
|
></el-table-column>
|
<el-table-column
|
prop="name"
|
label="名称"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
prop="publicid"
|
label="ID"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column prop="ip" label="IP"></el-table-column>
|
<el-table-column prop="status" label="状态" align="center">
|
<template slot-scope="scope">
|
<span
|
:style="scope.row.alive ? `color:#36B24A` : 'color:#FF4B33;'"
|
>{{ scope.row.alive ? "在线" : "离线" }}</span
|
>
|
</template>
|
</el-table-column>
|
<el-table-column prop="corp" label="备注"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getAllSubServer } from "@/api/Gb28181";
|
|
export default {
|
props: {
|
id: {},
|
},
|
created() {
|
this.getList();
|
},
|
data() {
|
return {
|
subDevTable: [],
|
};
|
},
|
methods: {
|
async getList() {
|
let params = {};
|
if (this.id.clusterId) {
|
params = {
|
clusterId: this.id.clusterId,
|
devId: "",
|
};
|
} else {
|
params = {
|
clusterId: "",
|
devId: this.id.devId,
|
};
|
}
|
const res = await getAllSubServer(params);
|
if (res && res.success) {
|
this.subDevTable = res.data;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped >
|
.TableArea {
|
padding: 30px 0;
|
.content {
|
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: #ff4b33;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 24px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
|
&.disable {
|
color: #666;
|
cursor: default;
|
}
|
}
|
}
|
}
|
</style>
|
