319 lines
10 KiB
Vue
319 lines
10 KiB
Vue
|
<template>
|
||
|
|
<Card title="实时数据">
|
||
|
|
<div class="containerBox">
|
||
|
|
<div class="dataBoardContent">
|
||
|
|
<el-popover style="margin-left:800px" placement="bottom" width="70" trigger="click">
|
||
|
|
<ul class="devList">
|
||
|
|
<li
|
||
|
|
v-for="(item, index) in devList"
|
||
|
|
:class="{ active: item.deviceId == currentDevDetail.deviceId }"
|
||
|
|
:key="index"
|
||
|
|
@click="realTimeMonitor(item)"
|
||
|
|
>{{ item.deviceName }}</li>
|
||
|
|
</ul>
|
||
|
|
<p class="greenBtn selectDev" slot="reference">
|
||
|
|
<img
|
||
|
|
v-for="item in 4"
|
||
|
|
:key="item"
|
||
|
|
:class="'arrow' + item"
|
||
|
|
class="arrow"
|
||
|
|
src="@/assets/images/greenOverview/arrow.png"
|
||
|
|
/>
|
||
|
|
{{ currentDevDetail.deviceName }}
|
||
|
|
<i class="el-icon-arrow-down"></i>
|
||
|
|
</p>
|
||
|
|
</el-popover>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 下面的部分 -->
|
||
|
|
<div class="realTimeData">
|
||
|
|
<div class="realTimeData_item">
|
||
|
|
<div class="realTimeData_item_img">
|
||
|
|
<img class="imageBox" src="@/assets/images/greenOverview/PM2.5@1x.png" alt />
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item_text">
|
||
|
|
<p>PM2.5</p>
|
||
|
|
<p style="color:#f24c32 ;">{{plantCap.pm25?plantCap.pm25:'--'}}μg/m3</p>
|
||
|
|
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
|
||
|
|
<!-- v-if="plantCap.pm25AlarmType == 1"-->
|
||
|
|
<img
|
||
|
|
src="@/assets/images/greenOverview/形状备份-2.gif"
|
||
|
|
alt
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item">
|
||
|
|
<div class="realTimeData_item_img">
|
||
|
|
<img src="@/assets/images/greenOverview/PM10@1x.png" alt />
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item_text">
|
||
|
|
<p>PM10</p>
|
||
|
|
<p style="color:#f24c32 ;">{{plantCap.pm10?plantCap.pm10:'--'}}μg/m3</p>
|
||
|
|
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt=""> -->
|
||
|
|
<!-- 显示条件 v-if="plantCap.pm10AlarmType == 1" -->
|
||
|
|
<img
|
||
|
|
src="@/assets/images/greenOverview/形状备份-2.gif"
|
||
|
|
alt
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item">
|
||
|
|
<div class="realTimeData_item_img">
|
||
|
|
<img src="@/assets/images/greenOverview/qy.png" alt />
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item_text">
|
||
|
|
<p>
|
||
|
|
{{'气压'}}
|
||
|
|
</p>
|
||
|
|
<p style="color:#f24c32 ;">{{plantCap.crc?plantCap.crc:'--'}}μg/m3</p>
|
||
|
|
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
|
||
|
|
<!-- v-if="plantCap.temperatureAlarmType == 1" -->
|
||
|
|
<img
|
||
|
|
src="@/assets/images/greenOverview/形状备份-2.gif"
|
||
|
|
alt
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item">
|
||
|
|
<div class="realTimeData_item_img">
|
||
|
|
<img src="@/assets/images/greenOverview/温度@1x.png" alt />
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item_text">
|
||
|
|
<p>
|
||
|
|
<!-- 温度 -->
|
||
|
|
{{$t('message.dataBoard.temperature')}}
|
||
|
|
</p>
|
||
|
|
<p style="color: #66d4d9;">{{plantCap.temperature?plantCap.temperature:'--'}}℃</p>
|
||
|
|
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
|
||
|
|
<!-- v-if="plantCap.temperatureAlarmType == 1"-->
|
||
|
|
<img src="@/assets/images/greenOverview/blue_lb.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item">
|
||
|
|
<div class="realTimeData_item_img">
|
||
|
|
<img src="@/assets/images/greenOverview/湿度@1x.png" alt />
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item_text">
|
||
|
|
<p>
|
||
|
|
<!-- 湿度 -->
|
||
|
|
{{$t('message.dataBoard.humidity')}}
|
||
|
|
</p>
|
||
|
|
<p style="color: #66d4d9;">{{plantCap.humidity?plantCap.humidity:'--'}}%</p>
|
||
|
|
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
|
||
|
|
<!-- v-if="plantCap.humidityAlarmType == 1" -->
|
||
|
|
<img src="@/assets/images/greenOverview/blue_lb.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item">
|
||
|
|
<div class="realTimeData_item_img">
|
||
|
|
<img src="@/assets/images/greenOverview/编组 27.png" alt />
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item_text">
|
||
|
|
<p>TSP</p>
|
||
|
|
<p style="color: #66d4d9;">{{plantCap.tsp?plantCap.tsp:'--'}}μg/m3</p>
|
||
|
|
<img src="@/assets/images/greenOverview/blue_lb.png" alt="">
|
||
|
|
<!-- <img
|
||
|
|
v-if="plantCap.tspAlarmType == 1"
|
||
|
|
src="@/assets/images/greenOverview/形状备份-2.gif"
|
||
|
|
alt
|
||
|
|
/> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item">
|
||
|
|
<div class="realTimeData_item_img">
|
||
|
|
<img src="@/assets/images/greenOverview/噪声@1x.png" alt />
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item_text">
|
||
|
|
<p>
|
||
|
|
<!-- 噪声 -->
|
||
|
|
{{$t('message.dataBoard.noise')}}
|
||
|
|
</p>
|
||
|
|
<p>{{plantCap.noise?plantCap.noise:'--'}}dB</p>
|
||
|
|
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
|
||
|
|
<img
|
||
|
|
v-if="plantCap.noiseAlarmType == 1"
|
||
|
|
src="@/assets/images/greenOverview/形状备份-2.gif"
|
||
|
|
alt
|
||
|
|
/>
|
||
|
|
<img src="@/assets/images/greenOverview/blue_lb.png" alt=""></img>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item">
|
||
|
|
<div class="realTimeData_item_img">
|
||
|
|
<img src="@/assets/images/greenOverview/风速@1x.png" alt />
|
||
|
|
</div>
|
||
|
|
<div class="realTimeData_item_text">
|
||
|
|
<p>
|
||
|
|
<!-- 风速 -->
|
||
|
|
{{$t('message.dataBoard.windSpeed')}}
|
||
|
|
</p>
|
||
|
|
<p>{{plantCap.windspeed?plantCap.windspeed:'--'}}m/s</p>
|
||
|
|
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
|
||
|
|
<img
|
||
|
|
v-if="plantCap.windSpeedAlarmType == 1"
|
||
|
|
src="@/assets/images/greenOverview/形状备份-2.gif"
|
||
|
|
alt
|
||
|
|
/>
|
||
|
|
<img src="@/assets/images/greenOverview/blue_lb.png" alt=""></img>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Card from "../components/Card";
|
||
|
|
import { environmentDevList } from "@/assets/js/api/environmentManage";
|
||
|
|
import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
|
||
|
|
export default {
|
||
|
|
components: { Card },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
devList: [
|
||
|
|
{deviceName:"设备1"},
|
||
|
|
{deviceName:"设备2"},
|
||
|
|
{deviceName:"设备3"},
|
||
|
|
],
|
||
|
|
currentDevDetail: {},
|
||
|
|
onlineDevNum: 0,
|
||
|
|
offlineDevNum: 0,
|
||
|
|
realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
|
||
|
|
plantCap: {
|
||
|
|
pm25: "21",
|
||
|
|
pm10: "21",
|
||
|
|
temperature: "25",
|
||
|
|
humidity: "75",
|
||
|
|
tsp: "21",
|
||
|
|
crc: "21",
|
||
|
|
noise: "58",
|
||
|
|
windspeed: "0.4",
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// this.createCenterChart();
|
||
|
|
this.$nextTick(() => {
|
||
|
|
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.$emit("custClick", this.currentDevDetail);
|
||
|
|
|
||
|
|
this.offlineDevNum = 0;
|
||
|
|
this.onlineDevNum = 0;
|
||
|
|
this.devList.forEach(element => {
|
||
|
|
if (element.isClosed == 2) {
|
||
|
|
this.offlineDevNum++;
|
||
|
|
} else {
|
||
|
|
this.onlineDevNum++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.getRealTimeDustNoiseData();
|
||
|
|
// this.realTimeDustNoiseDataTime = setInterval( () => {
|
||
|
|
// this.getRealTimeDustNoiseData();
|
||
|
|
// },5000)
|
||
|
|
// this.selectDustNoiseData(); 近24H
|
||
|
|
} else {
|
||
|
|
// this.createCenterChart();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
//获取环境设备详情数据
|
||
|
|
getRealTimeDustNoiseData() {
|
||
|
|
let data = {
|
||
|
|
deviceId: this.currentDevDetail.deviceId,
|
||
|
|
projectSn: this.projectSn
|
||
|
|
};
|
||
|
|
console.log(data);
|
||
|
|
getRealTimeDustNoiseDataApi(data).then(res => {
|
||
|
|
console.log(res);
|
||
|
|
if (res.code == 200) {
|
||
|
|
console.log(res.result);
|
||
|
|
if (res.result) {
|
||
|
|
this.plantCap = res.result;
|
||
|
|
} else {
|
||
|
|
this.plantCap = {
|
||
|
|
crc: "--",
|
||
|
|
humidity: "--",
|
||
|
|
noise: "--",
|
||
|
|
plateHumidity: "--",
|
||
|
|
plateTemperature: "--",
|
||
|
|
pm10: "--",
|
||
|
|
pm25: "--",
|
||
|
|
pressure: "--",
|
||
|
|
temperature: "--",
|
||
|
|
tsp: "--",
|
||
|
|
voltage: "--",
|
||
|
|
winddirectionName: "--",
|
||
|
|
windspeed: "--"
|
||
|
|
};
|
||
|
|
}
|
||
|
|
// this.createCenterChart();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// // 切换设备
|
||
|
|
realTimeMonitor(value) {
|
||
|
|
if (this.realTimeDustNoiseDataTime) {
|
||
|
|
clearInterval(this.realTimeDustNoiseDataTime);
|
||
|
|
}
|
||
|
|
console.log("id换了吗", value);
|
||
|
|
this.currentDevDetail = value;
|
||
|
|
this.getRealTimeDustNoiseData();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.containerBox {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin-top: 3%;
|
||
|
|
.realTimeData {
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding: 15px 20px 20px 50px;
|
||
|
|
.realTimeData_item {
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
width: 260px;
|
||
|
|
height: 100px;
|
||
|
|
padding: 0px 60px;
|
||
|
|
margin-top: 40px;
|
||
|
|
.realTimeData_item_img {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-right: 20px;
|
||
|
|
// .imageBox{
|
||
|
|
// width:50px;
|
||
|
|
// height: 50px;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
.realTimeData_item_text{
|
||
|
|
p{
|
||
|
|
margin-top: 5px;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/*margin: auto;*/
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|