首页展示61850连通状态
parent
baf4fc3c09
commit
b5d7610e9b
@ -0,0 +1,151 @@
|
|||||||
|
<template>
|
||||||
|
<div class="networkStatus">
|
||||||
|
<h3>{{ pageCardTitle }}</h3>
|
||||||
|
<div class="devContent">
|
||||||
|
<el-table :data="networkArr" height="100%" border size="mini">
|
||||||
|
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||||
|
<el-table-column prop="ip" label="IP地址"> </el-table-column>
|
||||||
|
|
||||||
|
<el-table-column prop="connected" label="状态" width="90px">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #67c23a;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: auto;
|
||||||
|
"
|
||||||
|
v-if="scope.row.connected == 1"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #f56c6c;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: auto;
|
||||||
|
"
|
||||||
|
v-else
|
||||||
|
></span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getnetWorkStatusApi } from "@/utils/api/index";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "networkStatus",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageCardTitle: "61850网络状态",
|
||||||
|
networkArr: [], //所有装置类型数组
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getStatus();
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
// 获取数量
|
||||||
|
getStatus() {
|
||||||
|
getnetWorkStatusApi()
|
||||||
|
.then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
console.log(res.data);
|
||||||
|
|
||||||
|
this.networkArr = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
this.loading = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.networkStatus {
|
||||||
|
//background-color: #fcc;
|
||||||
|
height: 100%;
|
||||||
|
h3 {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
padding: 0px 60px 0px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #03bcff;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.devContent {
|
||||||
|
padding: 10px !important;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: calc(100% - 52px);
|
||||||
|
.el-table--mini .el-table__cell {
|
||||||
|
padding: 3px 0;
|
||||||
|
text-align: center;
|
||||||
|
color: #03bcff;
|
||||||
|
}
|
||||||
|
.el-table td.el-table__cell,
|
||||||
|
.el-table th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: 1px solid #03bcff;
|
||||||
|
}
|
||||||
|
.el-table--border .el-table__cell {
|
||||||
|
border-right: 1px solid #03bcff;
|
||||||
|
}
|
||||||
|
.el-table {
|
||||||
|
border: 1px solid #03bcff;
|
||||||
|
background-color: transparent; /* 设置为透明背景 */
|
||||||
|
tr {
|
||||||
|
background-color: transparent; /* 设置为透明背景 */
|
||||||
|
}
|
||||||
|
th.el-table__cell {
|
||||||
|
background-color: transparent; /* 设置为透明背景 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table__row,
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
background-color: transparent; /* 确保行和单元格也是透明的 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table::before {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
.el-table--border::after,
|
||||||
|
.el-table--group::after {
|
||||||
|
width: 0px;
|
||||||
|
}
|
||||||
|
.el-table--border th.el-table__cell.gutter:last-of-type {
|
||||||
|
//background: #03bcff !important;
|
||||||
|
border-bottom: 1px solid #03bcff;
|
||||||
|
}
|
||||||
|
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px !important;
|
||||||
|
height: 6px !important;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #03bcff;
|
||||||
|
/* 关键代码 */
|
||||||
|
border-radius: 32px;
|
||||||
|
}
|
||||||
|
/* 滚动条轨道 */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue