111 lines
2.1 KiB
Vue
111 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div class="bottomRightBox">
|
||
|
|
<div class="title"><i>设备监控台</i></div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="equipmentMonitoring" v-for="item in deciData.devicList">
|
||
|
|
<div class="equipmentList" :class="item.status == 0 ? 'online' : 'offline'">
|
||
|
|
<p>{{ item.status == 0 ? "在线" : "离线" }}</p>
|
||
|
|
<p class="bottomText">{{ item.decName }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { reactive } from "vue";
|
||
|
|
export default {
|
||
|
|
setup() {
|
||
|
|
let deciData = reactive({
|
||
|
|
devicList: [
|
||
|
|
{
|
||
|
|
decName: "A号电箱",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
decName: "B号电箱",
|
||
|
|
status: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
decName: "C号电箱",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
decName: "D号电箱",
|
||
|
|
status: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
decName: "E号电箱",
|
||
|
|
status: 0
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
deciData
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.bottomRightBox {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.title {
|
||
|
|
height: 13%;
|
||
|
|
line-height: 33px;
|
||
|
|
text-align: left;
|
||
|
|
font-size: calc(100vw * 18 / 1920);
|
||
|
|
color: #ffffff;
|
||
|
|
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
i {
|
||
|
|
font-family: OPPOSansH;
|
||
|
|
margin-left: 6%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
margin-top: 10px;
|
||
|
|
height: 82%;
|
||
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: flex;
|
||
|
|
.equipmentMonitoring {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex !important;
|
||
|
|
.equipmentList {
|
||
|
|
width: 85%;
|
||
|
|
height: 50%;
|
||
|
|
margin: 30% 5%;
|
||
|
|
text-align: center;
|
||
|
|
p {
|
||
|
|
font-size: calc(100vw * 20 / 1920);
|
||
|
|
color: #65d7f9;
|
||
|
|
margin-top: 36%;
|
||
|
|
}
|
||
|
|
.bottomText {
|
||
|
|
font-size: calc(100vw * 16 / 1920);
|
||
|
|
color: #fff;
|
||
|
|
margin-top: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.online {
|
||
|
|
background: url("@/assets/images/distributionMonitoring/sbjkOpen.webp") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
.offline {
|
||
|
|
background: url("@/assets/images/distributionMonitoring/sbjkClose.webp") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
p {
|
||
|
|
color: #ffd15e !important;
|
||
|
|
}
|
||
|
|
.bottomText {
|
||
|
|
color: #fff !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|