602 lines
15 KiB
Vue
602 lines
15 KiB
Vue
<template>
|
|
<div class="containerBox">
|
|
<div class="right1">
|
|
<span @click="change(0)" :class="number == 0 ? 'newStyle' : 'btn_anniu'">实时数据</span>
|
|
<span @click="change(1)" :class="number == 1 ? 'newStyle' : 'btn_anniu'">零碳展厅</span>
|
|
</div>
|
|
<div class="right3">
|
|
<div class="dropDown" v-show="0 === number">
|
|
<!-- <el-select >
|
|
<el-option
|
|
v-for="(item,index) in devList"
|
|
:key="index"
|
|
@click="realTimeMonitor(item)">
|
|
</el-option>
|
|
</el-select> -->
|
|
<el-popover placement="bottom" width="70" trigger="click">
|
|
<ul class="devList">
|
|
<li
|
|
:class="{ active: item.deviceId == currentDevDetail.deviceId }"
|
|
v-for="(item, index) in devList"
|
|
: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"
|
|
/>
|
|
{{ currentDevDetail.deviceName }}
|
|
<i class="el-icon-arrow-down"></i>
|
|
</p>
|
|
</el-popover>
|
|
</div>
|
|
<div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div>
|
|
<div class="right4" v-show="1 === number">
|
|
<!-- <p><img src="@/views/projectAdmin/fourEngin/assets/images/common/video_bg.jpg"></p> -->
|
|
<videoPhoto class="video"></videoPhoto>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import videoPhoto from '@/views/projectAdmin/fourEngin/components/videoPhotoTwo'
|
|
// import centerTops from '@/views/projectAdmin/jlw/envirManage/centerTop'
|
|
import {
|
|
environmentDevList,
|
|
selectNewEnvironmentAlarmListApi,
|
|
getRealTimeDustNoiseDataApi,
|
|
getAirQualityStatisticsApi,sprayDevListApi,
|
|
selectDustNoiseDataApi,getWeatherDataApi,getCurrentDayAirQualityApi,
|
|
sprayOperateDataApi
|
|
} from "@/assets/js/api/environmentManage";
|
|
import echarts from 'echarts4'
|
|
export default {
|
|
components: {
|
|
videoPhoto
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
number: 0,
|
|
devList: [],
|
|
currentDevDetail: {},
|
|
sprayDevList:[],
|
|
alarmList: [],
|
|
onlineDevNum: 0,
|
|
offlineDevNum: 0,
|
|
realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
|
|
plantCap: {
|
|
crc: '--',
|
|
humidity: '--',
|
|
noise: '--',
|
|
plateHumidity: '--',
|
|
plateTemperature: '--',
|
|
pm10: '--',
|
|
pm25: '--',
|
|
pressure: '--',
|
|
temperature: '--',
|
|
tsp: '--',
|
|
voltage: '--',
|
|
winddirectionName: '--',
|
|
windspeed: '--'
|
|
}
|
|
}
|
|
},
|
|
created(){
|
|
this.getDevList()
|
|
},
|
|
|
|
mounted() {
|
|
this.createCenterChart()
|
|
this.getRealTimeDustNoiseData()
|
|
this.realTimeMonitor()
|
|
// this.getDevList()
|
|
// this.$nextTick(() => {
|
|
// this.getDevList();
|
|
// });
|
|
},
|
|
methods: {
|
|
|
|
//获取环境设备列表--环境监测实时数据--下拉
|
|
getDevList() {
|
|
console.log('环境下拉列表进来了吗--------');
|
|
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
|
|
(result) => {
|
|
console.log('环境监测下拉列表', result)
|
|
this.devList = result.result;
|
|
if(result.result.length>0){
|
|
this.currentDevDetail = result.result[0];
|
|
// this.getRealTimeDustNoiseData();
|
|
// this.selectDustNoiseData();
|
|
}else{
|
|
// this.createCenterChart();
|
|
}
|
|
|
|
|
|
}
|
|
);
|
|
},
|
|
|
|
//近24小时数据
|
|
selectDustNoiseData() {
|
|
var now = new Date();
|
|
var yy = now.getFullYear(); //年
|
|
var mm = now.getMonth() + 1; //月
|
|
var dd = now.getDate(); //日
|
|
var time = yy + "-";
|
|
if (mm < 10) time += "0";
|
|
time += mm + "-";
|
|
if (dd < 10) time += "0";
|
|
time += dd;
|
|
let data = {
|
|
searchDate:time,
|
|
projectSn:this.projectSn,
|
|
deviceId: this.currentDevDetail.deviceId,
|
|
}
|
|
selectDustNoiseDataApi(data).then(res=>{
|
|
// console.log(res)
|
|
this.dustData_24=res.result
|
|
this.createdEcharts2();
|
|
})
|
|
},
|
|
//获取报警列表
|
|
getAlarmList() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
selectNewEnvironmentAlarmListApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.alarmList = res.result;
|
|
}
|
|
});
|
|
},
|
|
sprayOperate(deviceId,operateType){
|
|
sprayOperateDataApi({ projectSn: this.$store.state.projectSn,operateType:operateType,deviceId:deviceId }).then((res) => {
|
|
this.sprayDevList=res.result
|
|
});
|
|
},
|
|
getSprayDevList(){
|
|
sprayDevListApi({ projectSn: this.$store.state.projectSn }).then((res) => {
|
|
this.sprayDevList=res.result
|
|
});
|
|
},
|
|
/** 查询 */
|
|
handleQuery() {
|
|
this.$nextTick(() => {
|
|
this.getDevList()
|
|
})
|
|
},
|
|
// // 切换设备
|
|
realTimeMonitor(value) {
|
|
this.currentDevDetail = value;
|
|
this.getRealTimeDustNoiseData();
|
|
this.selectDustNoiseData();
|
|
// if (this.realTimeDustNoiseDataTime) {
|
|
// clearInterval(this.realTimeDustNoiseDataTime)
|
|
// }
|
|
// console.log('id换了吗', value)
|
|
// this.currentDevDetail = value
|
|
|
|
// this.getRealTimeDustNoiseData()
|
|
// this.realTimeDustNoiseDataTime = setInterval( () => {
|
|
// this.getRealTimeDustNoiseData();
|
|
// },5000)
|
|
// this.getRealTimeDustNoiseData();
|
|
|
|
// this.selectDustNoiseData(); 近24H
|
|
},
|
|
//近24小时数据
|
|
selectDustNoiseData() {
|
|
var now = new Date();
|
|
var yy = now.getFullYear(); //年
|
|
var mm = now.getMonth() + 1; //月
|
|
var dd = now.getDate(); //日
|
|
var time = yy + "-";
|
|
if (mm < 10) time += "0";
|
|
time += mm + "-";
|
|
if (dd < 10) time += "0";
|
|
time += dd;
|
|
let data = {
|
|
searchDate:time,
|
|
projectSn:this.projectSn,
|
|
deviceId: this.currentDevDetail.deviceId,
|
|
}
|
|
selectDustNoiseDataApi(data).then(res=>{
|
|
// console.log(res)
|
|
this.dustData_24=res.result
|
|
this.createdEcharts2();
|
|
})
|
|
},
|
|
//获取环境设备详情数据
|
|
getRealTimeDustNoiseData() {
|
|
let data = {
|
|
deviceId: this.currentDevDetail.deviceId,
|
|
projectSn: this.$store.state.projectSn
|
|
}
|
|
console.log(data)
|
|
getRealTimeDustNoiseDataApi(data).then(res => {
|
|
if (res.code == 200) {
|
|
console.log('获取环境设备详情数据------',res.result)
|
|
if (res.result != null) {
|
|
this.plantCap = res.result
|
|
} else {
|
|
this.plantCap = {
|
|
crc: '--',
|
|
humidity: '--',
|
|
noise: '--',
|
|
plateHumidity: '--',
|
|
plateTemperature: '--',
|
|
pm10: '--',
|
|
pm25: '--',
|
|
pressure: '--',
|
|
temperature: '--',
|
|
tsp: '--',
|
|
voltage: '--',
|
|
winddirectionName: '--',
|
|
windspeed: '--'
|
|
}
|
|
}
|
|
this.createCenterChart()
|
|
}
|
|
})
|
|
},
|
|
//展示数据/视频播放切换
|
|
change: function(index) {
|
|
console.log(111)
|
|
this.number = index
|
|
},
|
|
|
|
//环境监测实时数据--图表
|
|
createCenterChart() {
|
|
let centerChart = echarts.init(this.$refs.centerChart)
|
|
console.log('this.$refs.centerChart')
|
|
console.log(this.$refs.centerChart.offsetHeight)
|
|
centerChart.clear()
|
|
let detailData = this.$t('message.environmentalOverview.plantCap')
|
|
for (let i = 0; i < detailData.length; i++) {
|
|
if (detailData[i].id == 1) {
|
|
detailData[i].value = this.plantCap.humidity //湿度
|
|
} else if (detailData[i].id == 2) {
|
|
detailData[i].value = this.plantCap.pm25 //pm2.5
|
|
} else if (detailData[i].id == 3) {
|
|
detailData[i].value = this.plantCap.temperature //温度
|
|
} else if (detailData[i].id == 4) {
|
|
detailData[i].value = this.plantCap.tsp //tsp
|
|
} else if (detailData[i].id == 5) {
|
|
detailData[i].value = this.plantCap.windspeed //风速
|
|
} else if (detailData[i].id == 6) {
|
|
detailData[i].value = this.plantCap.pm10 // pm10
|
|
} else if (detailData[i].id == 7) {
|
|
detailData[i].value = this.plantCap.winddirectionName
|
|
} else if (detailData[i].id == 8) {
|
|
detailData[i].value = this.plantCap.pressure ? this.plantCap.pressure : '--'
|
|
}
|
|
detailData[i].value += detailData[i].unit
|
|
}
|
|
var plantCap = detailData
|
|
|
|
var datalist = [
|
|
{
|
|
offset: [50, 55],
|
|
symbolSize: 100,
|
|
opacity: 0.95,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#29c0fb'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#2dc5b9'
|
|
}
|
|
])
|
|
},
|
|
{
|
|
offset: [30, 85],
|
|
symbolSize: 70,
|
|
opacity: 0.95,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#35d17e'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#49ddb2'
|
|
}
|
|
])
|
|
},
|
|
{
|
|
offset: [15, 50],
|
|
symbolSize: 80,
|
|
opacity: 0.95,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#e5d273'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#e4a37f'
|
|
}
|
|
])
|
|
},
|
|
{
|
|
offset: [40, 20],
|
|
symbolSize: 70,
|
|
opacity: 0.95,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#277aec'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#57c5ec'
|
|
}
|
|
])
|
|
},
|
|
{
|
|
offset: [85, 58],
|
|
symbolSize: 65,
|
|
opacity: 0.95,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#e54948'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#f08456'
|
|
}
|
|
])
|
|
},
|
|
{
|
|
offset: [76, 20],
|
|
symbolSize: 70,
|
|
opacity: 0.7,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#11c46e'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#f08456'
|
|
}
|
|
])
|
|
},
|
|
{
|
|
offset: [68, 82],
|
|
symbolSize: 65,
|
|
opacity: 0.68,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#6367E0'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#B667F0'
|
|
}
|
|
])
|
|
}
|
|
]
|
|
var datas = []
|
|
for (var i = 0; i < plantCap.length; i++) {
|
|
var item = plantCap[i]
|
|
var itemToStyle = datalist[i]
|
|
datas.push({
|
|
name: item.value + '\n' + item.name,
|
|
value: itemToStyle.offset,
|
|
symbolSize: itemToStyle.symbolSize,
|
|
label: {
|
|
normal: {
|
|
textStyle: {
|
|
fontSize: 16,
|
|
fontWeight: 800,
|
|
lineHeight: 22
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: itemToStyle.color,
|
|
opacity: itemToStyle.opacity
|
|
}
|
|
}
|
|
})
|
|
}
|
|
let option1 = {
|
|
grid: {
|
|
show: false,
|
|
top: 10,
|
|
bottom: 10
|
|
},
|
|
xAxis: [
|
|
{
|
|
gridIndex: 0,
|
|
type: 'value',
|
|
show: false,
|
|
min: 0,
|
|
max: 100,
|
|
nameLocation: 'middle',
|
|
nameGap: 5
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
gridIndex: 0,
|
|
min: 0,
|
|
show: false,
|
|
max: 100,
|
|
nameLocation: 'middle',
|
|
nameGap: 30
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'effectScatter',
|
|
// symbol: 'circle',
|
|
// symbolSize: 120,
|
|
|
|
hoverAnimation: true,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
formatter: '{b}',
|
|
color: '#fff',
|
|
textStyle: {
|
|
fontSize: '20'
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#00acea'
|
|
}
|
|
},
|
|
data: datas
|
|
}
|
|
]
|
|
}
|
|
centerChart.setOption(option1)
|
|
window.onresize = centerChart.resize
|
|
}
|
|
},
|
|
watch: {
|
|
plantCap: {
|
|
handler(newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
this.createCenterChart()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.containerBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 3%;
|
|
|
|
.right1 {
|
|
width: 100%;
|
|
height: 10%;
|
|
display: flex;
|
|
margin-left: 35%;
|
|
font-size: 16px;
|
|
|
|
.btn_anniu {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
// margin-top: 5px;
|
|
// padding-top: 15px;
|
|
width: 120px;
|
|
height: 55px;
|
|
text-align: center;
|
|
background-image: url(../assets/images/carbon/border1.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
font-size: 16px;
|
|
line-height: 55px;
|
|
margin: 0 10px 0 0;
|
|
color: #fff;
|
|
// font-size: 24px;
|
|
}
|
|
|
|
.newStyle {
|
|
display: inline-block;
|
|
// margin-top: 5px;
|
|
// padding-top: 15px; num_bg.png
|
|
width: 120px;
|
|
height: 55px;
|
|
text-align: center;
|
|
background-image: url(../assets/images/carbon/border2.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
font-size: 16px;
|
|
line-height: 55px;
|
|
margin: 0 10px 0 0;
|
|
color: #5ce2f6;
|
|
}
|
|
}
|
|
.right3 {
|
|
width: 100%;
|
|
height: 80%;
|
|
margin-top: 25px;
|
|
.centerChart {
|
|
width: 100%;
|
|
height: calc(100% - 22px);
|
|
}
|
|
|
|
#right2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.right4 {
|
|
width: 100%;
|
|
height: 100%;
|
|
.video {
|
|
margin-bottom: -50px;
|
|
display: inline-block;
|
|
margin-left: 25px;
|
|
width: 850px;
|
|
height: 550px;
|
|
}
|
|
}
|
|
.dropDown {
|
|
float: right;
|
|
text-align: center;
|
|
margin-right: 40px;
|
|
margin-top: -20px;
|
|
width: 100px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
background-color: #305c6d;
|
|
background-image: url(../assets/images/common/bg_sby.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
font-size: 8px;
|
|
// ::v-deep .el-select{
|
|
// width: 100px;
|
|
// height: 20px;
|
|
// }
|
|
// ::v-deep .el-input__inner {
|
|
// background-color: #3e7c86;
|
|
// color: #fff;
|
|
// }
|
|
// ::v-deep .el-select__caret {
|
|
// color: #fff;
|
|
// }
|
|
}
|
|
.devList {
|
|
width: 100px;
|
|
height: 20px;
|
|
li {
|
|
width: 100px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
line-height: 22px;
|
|
&.active,
|
|
&:hover {
|
|
color: rgba(6, 248, 179, 0.8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|