admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(环境管理):设备情况页面更改以及接口对接

Browse Source
This commit is contained in:
骆乐 2022-08-16 16:42:00 +08:00
parent f7a2f91311
commit a64b64b06a
2 changed files with 131 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/projectAdmin/jlw/envirManage/index.vue
View File

@ -5,7 +5,7 @@
<leftTop title="环境监测" />
</div>
<div class="leftCenter">
<leftCenter title="雾炮喷淋"></leftCenter>
<leftCenter title="设备情况"></leftCenter>
</div>
<div class="leftBottom">
<leftBottom title="趋势图"></leftBottom>

233
src/views/projectAdmin/jlw/envirManage/leftCenter.vue
View File

@ -3,50 +3,56 @@
<div class="containerBox">
<div class="titleTxt">{{ title }}</div>
<div class="blockContent alarmBlockContent">
<vue-scroll>
<table class="greenTable">
<thead>
<tr>
<th>
报警设备
</th>
<th>
报警时间
</th>
<th>
报警类型
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in alarmList" :key="index">
<td>
{{ item.deviceName }}
</td>
<td>{{ item.tempAlarmTime }}</td>
<td>
<div :class=" !item.show ? 'unAlarm' : 'alarmType'">
</div>
</td>
</tr>
</tbody>
</table>
<div
class="placeholderBox placeholderBox2"
v-if="alarmList.length == 0"
>
<img src="@/assets/images/noData3.png" alt="" srcset="" />
<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.nodata')}}
<!-- 在线设备 -->
{{$t('message.dataBoard.onlineDev')}}
</p>
</div>
</vue-scroll>
</div>
<div class="item">
<img src="@/assets/images/dataBoard/offline.jpg" alt />
<div>
<p class="num" style="color:#F67F51">{{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>
</template>
<script>
import { environmentDevList } from "@/assets/js/api/environmentManage";
export default {
props: {
title: {
@ -56,31 +62,37 @@ export default {
},
data() {
return {
alarmList: [
{
deviceName: "一号设备",
tempAlarmTime: "塔吊喷淋",
show: true,
},
{
deviceName: "一号设备",
tempAlarmTime: "塔吊喷淋",
show: false,
},
{
deviceName: "一号设备",
tempAlarmTime: "塔吊喷淋",
show: false,
},
{
deviceName: "一号设备",
tempAlarmTime: "塔吊喷淋",
show: true,
}
],
value:true,
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>
@ -89,6 +101,7 @@ export default {
.containerBox {
width: 100%;
height: 100%;
overflow:auto;
border: 1px solid #0081c3;
.titleTxt {
@ -97,54 +110,68 @@ export default {
margin-top: 5px;
margin-left: 5px;
}
.greenTable{
margin-top: 30px;
th {
color: #6adce8;
border-bottom: 1px solid rgba(31, 68, 86, 0.3);
}
td{
color: white;
.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;
}
}
}
.alarmType{
position:relative;
left: 40%;
width: 35px;
height: 15px;
background-color: #08b58a;
border-radius: 8px ;
.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: 32px;
}
.online {
background-color: rgba(68, 215, 182, 0.54);
}
.offline {
background-color: rgba(151, 12, 12, 0.54);
}
}
.alarmType::before{
content: '';
position: absolute;
top: 1px;
left: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
}
.unAlarm{
position:relative;
left: 40%;
width: 35px;
height: 15px;
background-color: #6d7077;
border-radius: 8px ;
}
.unAlarm::before{
content: '';
position: absolute;
top: 1px;
right: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
.noData{
margin-top: 5%;
margin-left: 35%;
p{
margin-left: 5%;
}
}
}
::-webkit-scrollbar {
width: 3px;
color: #636364;
}
</style>