177 lines
4.1 KiB
Vue
177 lines
4.1 KiB
Vue
<template>
|
|
<!-- 雾炮喷淋 -->
|
|
<Card :title="title">
|
|
<div class="containerBox">
|
|
<div class="blockContent alarmBlockContent">
|
|
<vue-scroll>
|
|
<div class="devInfoBox">
|
|
<div class="item">
|
|
<img src="@/assets/images/dataBoard/online.jpg" alt />
|
|
<div>
|
|
<p class="num" style="color: #5181f6">{{ onlineDevNum }}</p>
|
|
<p>
|
|
<!-- 在线设备 -->
|
|
{{ $t('message.dataBoard.onlineDev') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img
|
|
src="@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-offline.png"
|
|
alt
|
|
/>
|
|
<div>
|
|
<p class="num" style="color: #fe6c7f">{{ offlineDevNum }}</p>
|
|
<p>
|
|
<!-- 离线设备 -->
|
|
{{ $t('message.dataBoard.notOnlineDev') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="devListBox">
|
|
<ul>
|
|
<li v-for="(item, index) in devList" :key="index">
|
|
<p>{{ item.deviceName }}</p>
|
|
<span class="offline" v-if="item.isClosed == 2">
|
|
<!-- 离线 -->
|
|
{{ $t('message.dataBoard.notOnline') }}
|
|
</span>
|
|
<span class="online" v-else>
|
|
<!-- 在线 -->
|
|
{{ $t('message.dataBoard.online') }}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="noData" v-if="devList.length == 0">
|
|
<img src="@/assets/images/noData3.png" alt srcset />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from '../components/Card'
|
|
|
|
import { environmentDevList } from '@/assets/js/api/environmentManage'
|
|
export default {
|
|
components: { Card },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: 'default title'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
devList: [],
|
|
onlineDevNum: 0,
|
|
offlineDevNum: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getDevList()
|
|
},
|
|
methods: {
|
|
//获取环境设备列表--环境监测实时数据--下拉
|
|
getDevList() {
|
|
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
|
|
(result) => {
|
|
// console.log('列表', result)
|
|
this.devList = result.result
|
|
console.log(this.devList)
|
|
if (result.result.length > 0) {
|
|
this.currentDevDetail = result.result[0]
|
|
this.offlineDevNum = 0
|
|
this.onlineDevNum = 0
|
|
this.devList.forEach((element) => {
|
|
if (element.isClosed == 2) {
|
|
this.offlineDevNum++
|
|
} else {
|
|
this.onlineDevNum++
|
|
}
|
|
})
|
|
}
|
|
}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.containerBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
|
|
.devInfoBox {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
.item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
img {
|
|
margin-right: 7px;
|
|
margin-left: 40px;
|
|
}
|
|
p {
|
|
opacity: 0.8;
|
|
font-size: 14px;
|
|
}
|
|
.num {
|
|
opacity: 1;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
.devListBox {
|
|
margin: 0 10px;
|
|
li {
|
|
height: 37px;
|
|
line-height: 37px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
background-color: rgba(68, 215, 182, 0.1);
|
|
span {
|
|
width: 55px;
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
p {
|
|
font-size: 16px;
|
|
opacity: 0.8;
|
|
padding-left: 10px;
|
|
}
|
|
.online {
|
|
background-color: rgba(68, 215, 182, 0.54);
|
|
}
|
|
.offline {
|
|
background-color: #442b40;
|
|
}
|
|
}
|
|
.noData {
|
|
margin-top: 5%;
|
|
margin-left: 35%;
|
|
p {
|
|
margin-left: 5%;
|
|
}
|
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 3px;
|
|
color: #636364;
|
|
}
|
|
</style>
|
|
|