<template>
<div class="workingManagement">
<div class="title">物联网设备运行状态监测</div>
<div class="content">
<div class="card" v-for="(item, i) in cardList" :key="i">
<div class="card_title">{{ item.name }}</div>
<div class="card_body">
<div class="left">
<img src="../../../assets/Imgs/gateway.png" alt="" />
</div>
<ul class="right">
<li>编码：{{ item.number }}</li>
<li>IP连接PLC：{{ item.ip }}</li>
<li>IP连接外网：{{ item.ipOuter }}</li>
<li>传输协议：{{ item.agreement }}</li>
</ul>
</div>
<div class="card_footer">
通讯状态：
<span v-if="item.status == 0" class="online">在线</span>
<span v-else class="outline">离线</span>
</div>
</div>
</div>
<div class="title title2">rtu运行状态监测</div>
<div class="content">
<div class="card" v-for="(item, i) in cardListRtu" :key="i">
<div class="card_title">{{ item.name }}</div>
<div class="card_body">
<div class="left">
<img src="../../../assets/Imgs/gateway.png" alt="" />
</div>
<ul class="right">
<li>编码：{{ item.number }}</li>
<li>IP连接PLC：{{ item.ip }}</li>
<li>IP连接外网：{{ item.ipOuter }}</li>
<li>传输协议：{{ item.agreement }}</li>
</ul>
</div>
<div class="card_footer">
通讯状态：
<span v-if="item.status == 0" class="online">在线</span>
<span v-else class="outline">离线</span>
</div>
</div>
</div>
<div class="pagination">
<span>共{{ totalRtu }}条记录</span>
<n-pagination
v-model:page="page"
v-model:page-size="pageSize"
:page-count="totalRtu"
show-size-picker
:page-sizes="[10, 20, 30, 40]"
show-quick-jumper
/>
</div>
</div>
</template>
<script>
import { ref, reactive, toRefs, h, onMounted } from "vue";
export default {
name: "物联网设备运行状态监测",
setup() {
const state = reactive({
cardList: [
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 0,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 0,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
],
cardListRtu: [
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 0,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 0,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
{
name: "后湖二期西门子PLC1500采集网关",
number: "0001",
ip: "192.168.13.10",
ipOuter: "192.168.13.10",
agreement: "Tcp/lp",
status: 1,
},
],
totalWulian: "",
page: 1,
pageSize: 10,
totalRtu: 21,
});
return {
...toRefs(state),
};
},
};
</script>
<style lang="less" scoped>
.workingManagement {
position: relative;
height: 100%;
.title {
padding-left: 20px;
width: 100%;
line-height:36px;
background: var(--bg-work);
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: bold;
color: var(--color-title);
}
.content {
// margin-top: 10px;
display: flex;
flex-wrap: wrap;
.card {
margin: 10px 5px 5px;
height: 162px;
width: calc((100% - 50px) / 5);
border: 1px solid #748ec8;
border-color: var(--color-work-border);
background: var(--bg-menu);
box-shadow: 0px 8px 28px 1px rgba(82, 125, 218, 0.67);
.card_title {
line-height: 30px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: var(--color-work-title);
text-align: center;
}
.card_body {
display: flex;
align-items: center;
border-bottom: 1px solid;
border-color: var(--color-work-border);
.left {
margin: 0 20px;
width: 66px;
img {
width: 66px;
height: 60px;
}
}
.right {
margin-left: 20px;
li {
line-height: 26px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
}
}
}
.card_footer {
padding-left: 126px;
.online {
color: #47b829;
}
.outline {
color: #d62e5a;
}
}
}
}
.title2 {
margin-top: 20px;
}
.pagination {
position: absolute;
right: 0;
bottom: 0;
display: flex;
align-items: center;
span {
margin-right: 10px;
font-size: 12px;
font-family: Source Han Sans CN;
color: #009cff;
}
}
}
</style>
