<template>
|
<div class="containerHJ">
|
<div class="HJLeft">
|
<div class="HJLeft1">
|
<div class="title"><span>环境指标预警</span></div>
|
<scrool class="scrool"></scrool>
|
</div>
|
<div class="HJLeft2">
|
<div class="title"><span>PM2.5质量指数</span></div>
|
<div class="HJChart" id="HJChart"></div>
|
</div>
|
</div>
|
<div class="HJRight">
|
<div class="HJRight1">
|
<div class="title"><span>环境指标统计</span></div>
|
<div class="HJRight1msg">
|
<div class="HJRight11">
|
<div class="HJRight111">
|
<div class="HJRight1111">
|
<span class="span1" style="height: 80%;width: 100%;font-size: 32px;">今日空气质量</span>
|
</div>
|
<div class="HJRight1112">{{ weather.pmZeroLevel }}</div>
|
</div>
|
</div>
|
<div class="HJRight12">
|
<div class="HJRight121">
|
<img src="../../../assets/image/Left/Environmental/环境指标统计图标1.png" />
|
<div class="HJRight1211">
|
<span class="span1">PM2.5</span>
|
<span class="span2">{{ weather.pmTwoPointFiveVal }}
|
<span>ng/m³</span>
|
</span>
|
</div>
|
</div>
|
|
<div class="HJRight121">
|
<img src="../../../assets/image/Left/Environmental/环境指标统计图标1.png" />
|
<div class="HJRight1211">
|
<span class="span1">一氧化碳</span>
|
<span class="span2">{{ weather.carbonMonoxideVal }}
|
<span>mg/m³</span>
|
</span>
|
</div>
|
</div>
|
|
<div class="HJRight121">
|
<img src="../../../assets/image/Left/Environmental/环境指标统计图标1.png" />
|
<div class="HJRight1211">
|
<span class="span1">二氧化氮</span>
|
<span class="span2">{{ weather.nitrogenDioxideVal }}
|
<span>mg/m³</span>
|
</span>
|
</div>
|
</div>
|
|
<div class="HJRight121">
|
<img src="../../../assets/image/Left/Environmental/环境指标统计图标1.png" />
|
<div class="HJRight1211">
|
<span class="span1">PM10</span>
|
<span class="span2">{{ weather.pmZeroVal }}
|
<span>ng/m³</span>
|
</span>
|
</div>
|
</div>
|
|
<div class="HJRight121">
|
<img src="../../../assets/image/Left/Environmental/环境指标统计图标1.png" />
|
<div class="HJRight1211">
|
<span class="span1">臭氧</span>
|
<span class="span2">{{ weather.ozoneVal }}
|
<span>mg/m³</span>
|
</span>
|
</div>
|
</div>
|
|
<div class="HJRight121">
|
<img src="../../../assets/image/Left/Environmental/环境指标统计图标1.png" />
|
<div class="HJRight1211">
|
<span class="span1">二氧化硫</span>
|
<span class="span2">{{ weather.sulfurDioxideVal }}
|
<span>mg/m³</span>
|
</span>
|
</div>
|
</div>
|
</div>
|
<div class="HJRight13">
|
<span class="span1">
|
<span class="span11">今日天气</span>
|
<span class="span12">{{ currentAir.weather }}</span>
|
</span>
|
<span class="span2">
|
<span class="span11">今日温度</span>
|
<span class="span12">{{ currentAir.temperature }}℃</span>
|
</span>
|
<span class="span3">
|
<div class="span31">{{ weather.temperatureLevel }}</div>
|
</span>
|
</div>
|
<div class="HJRight14">
|
<span class="span1">
|
<span>今日风速</span>
|
<span class="span11">{{ weather.windSpeedVal }}m/s</span>
|
</span>
|
<span class="span2">
|
<span>今日风向</span>
|
<span class="span11">{{ weather.windDirection }}</span>
|
</span>
|
<span class="span3">
|
<span>今日湿度</span>
|
<span class="span11">{{ weather.humidnessVal }}%</span>
|
</span>
|
</div>
|
</div>
|
|
</div>
|
<div class="HJRight2">
|
<div class="title"><span>环比分析</span></div>
|
<div class="HJRight2Msg">
|
<div class="span1">
|
<div class="span11" v-for="(item, i) in airHB" :key="i">
|
<div style="width: 70%;height: 100%;display: flex;justify-content: center;flex-direction:column;align-items: center;">
|
<div style="margin-bottom: 10px;">
|
<span class="span111">{{ item.hbName }}</span>
|
</div>
|
<div style="width: 60%;height: 40%; ">
|
<button class="button1" v-if="item.hbNumber >= 0">+{{ item.hbNumber }}%</button>
|
<button class="button2" v-else>{{ item.hbNumber }}%</button>
|
</div>
|
</div>
|
|
|
<div style="width:30%">
|
<img v-if="item.hbNumber >= 0" src="../../../assets/image/Left/Environmental/up.png" />
|
<img v-else src="../../../assets/image/Left/Environmental/down.png" />
|
</div>
|
</div>
|
|
</div>
|
<div class="span2">
|
<img src="../../../assets/image/Left/Environmental/今日空气指数图标.png" />
|
<span class="span21">PM2.5</span>
|
<span class="span22">{{ PMZL }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import scrool from './scrool.vue'
|
import axios from "axios";
|
import httpUrl from '../../../config/http.js'
|
import {
|
axios_get,
|
axios_post
|
} from '../../../until/request.js'
|
|
|
|
export default {
|
components: {
|
scrool
|
},
|
data() {
|
return {
|
chart1: {},
|
chart1option: {},
|
|
weather: {},
|
|
|
currentAir: {
|
weather: "阴天",
|
temperature: "15",
|
winddirection: "东南风",
|
windpower: "三级",
|
humidity: "30",
|
ZK: "舒适"
|
},
|
airHB: [],
|
// airHB:[{
|
// hbName:"同比增长：",
|
// hbNumber:20,
|
// },
|
// {
|
// hbName:"环比减少：",
|
// hbNumber:-20,
|
// }],
|
|
timer1: null,
|
timer2: null,
|
timer3: null,
|
DataX: [],
|
DataY: [],
|
PMZL: ""
|
|
|
}
|
},
|
mounted() {
|
this.GetCurrentWeather();
|
this.AjaxKQZL();
|
this.SetItervalGet25();
|
this.GetTBHB();
|
},
|
|
methods: {
|
|
//实时天气
|
GetCurrentWeather() {
|
axios(httpUrl.WeatherAddress).then(response => {
|
if (response.data.lives != null) {
|
this.currentAir = response.data.lives[0];
|
this.currentAir.tem = response.data.lives[0].temperature;
|
}
|
})
|
|
},
|
|
//定时获取PM25
|
SetItervalGet25() {
|
//先执行一次获取数据
|
axios_post("/environmental/realTimeDataPrimzahlen").then(response => {
|
let time = this.parseTime(new Date(), '{h}:{i}:{s}');
|
this.DataX.push(time);
|
this.DataY.push(response.data.pmTwoPointFiveVal);
|
this.DrawGetDymicDataPM25(this.DataX, this.DataY);
|
})
|
|
|
let _that = this;
|
this.timer1 = setInterval(function () {
|
_that.GetPM25();
|
}, 1000 * 2)
|
},
|
|
//获取PM2.5
|
GetPM25() {
|
axios_post("/environmental/realTimeDataPrimzahlen").then(response => {
|
let time = this.parseTime(new Date(), '{h}:{i}:{s}');
|
if (this.DataX.length > 10) {
|
this.DataX = this.DataX.slice(1);
|
this.DataX.push(time);
|
} else {
|
this.DataX.push(time);
|
}
|
|
if (this.DataY.length > 10) {
|
this.DataY = this.DataY.slice(1);
|
this.DataY.push(response.data.pmTwoPointFiveVal);
|
} else {
|
this.DataY.push(response.data.pmTwoPointFiveVal);
|
}
|
this.DrawGetDymicDataPM25(this.DataX, this.DataY);
|
})
|
},
|
|
//获取PM25动态数据
|
DrawGetDymicDataPM25(dataX, dataY) {
|
this.chart1 = this.$echarts.init(document.getElementById("HJChart"));
|
this.chart1option = {
|
|
tooltip: {
|
trigger: 'axis',
|
textStyle: {
|
fontSize: 28
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false, //坐标轴两边留白
|
data: dataX,
|
axisLabel: { //坐标轴刻度标签的相关设置。
|
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
|
// margin:15,
|
textStyle: {
|
color: '#eeeeee',
|
fontStyle: 'normal',
|
fontFamily: '微软雅黑',
|
fontSize: 20,
|
},
|
rotate: 70,
|
// formatter: function(params) {
|
// var newParamsName = "";
|
// var paramsNameNumber = params.length;
|
// var provideNumber = 4; //一行显示几个字
|
// var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
// if (paramsNameNumber > provideNumber) {
|
// for (var p = 0; p < rowNumber; p++) {
|
// var tempStr = "";
|
// var start = p * provideNumber;
|
// var end = start + provideNumber;
|
// if (p == rowNumber - 1) {
|
// tempStr = params.substring(start, paramsNameNumber);
|
// } else {
|
// tempStr = params.substring(start, end) + "\n";
|
// }
|
// newParamsName += tempStr;
|
// }
|
|
// } else {
|
// newParamsName = params;
|
// }
|
// return newParamsName
|
// },
|
//rotate:50,
|
},
|
axisTick: { //坐标轴刻度相关设置。
|
show: false,
|
},
|
axisLine: { //坐标轴轴线相关设置
|
lineStyle: {
|
color: '#CAFFFD',
|
opacity: 0.3
|
}
|
},
|
splitLine: { //坐标轴在 grid 区域中的分隔线。
|
show: false,
|
lineStyle: {
|
color: '#E5E9ED',
|
// opacity:0.1
|
}
|
}
|
},
|
yAxis: [{
|
type: 'value',
|
// min: 0,
|
// max: 400,
|
splitNumber: 5,
|
axisLabel: {
|
textStyle: {
|
color: '#EEEEEE',
|
fontStyle: 'normal',
|
fontFamily: '微软雅黑',
|
fontSize: 20,
|
}
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#CAFFFD',
|
opacity: 0.3
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed',
|
color: 'rgba(202, 255, 253, 0.2)',
|
// opacity:0.1
|
}
|
}
|
|
}],
|
series: [{
|
name: '指数',
|
type: 'line',
|
smooth: true,
|
symbol: 'circle',
|
symbolSize: 10,
|
itemStyle: {
|
normal: {
|
color: 'rgba(32, 248, 134, 1)',
|
shadowColor: '#20F886',
|
shadowBlur: 20,
|
borderColor: '#20F886',
|
borderWidth: 2,
|
lineStyle: {
|
color: "#20F886",
|
width: 1
|
},
|
areaStyle: {
|
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
offset: 0,
|
color: 'rgba(0,0,0,0)'
|
}, {
|
offset: 1,
|
color: 'rgba(32, 248, 134, 1)'
|
}]),
|
}
|
}
|
},
|
data: dataY
|
},]
|
};
|
|
|
this.chart1.setOption(this.chart1option);
|
|
|
},
|
|
|
//空气质量
|
AjaxKQZL() {
|
this.GetCurrentQuertity();
|
let _that = this;
|
this.timer2 = setInterval(function () {
|
_that.GetCurrentQuertity();
|
}, 1000 * 60)
|
|
},
|
|
//获取数据
|
GetCurrentQuertity() {
|
axios_post("/environmental/environmentPrimzahlen").then(response => {
|
this.weather = response.data;
|
})
|
},
|
|
|
//同比环比
|
GetTBHB() {
|
this.GetHBAyalse();
|
let _that = this;
|
this.timer3 = setInterval(function () {
|
_that.GetHBAyalse();
|
}, 1000 * 60)
|
|
},
|
|
//环比分析
|
GetHBAyalse() {
|
|
axios_post("/environmental/environmentqualityQoQ").then(response => {
|
this.airHB = [];
|
let obj0 = {
|
hbName: "",
|
hbNumber: ""
|
};
|
console.log(response.data);
|
if (parseFloat(response.data.pmTwoPointFiveQoQRatio) >= 0) {
|
obj0.hbName = "PM2.5环比";
|
|
obj0.hbNumber = parseFloat(response.data.pmTwoPointFiveQoQRatio).toFixed(2);
|
}
|
if (parseFloat(response.data.pmTwoPointFiveQoQRatio) < 0) {
|
obj0.hbName = "PM2.5环比";
|
obj0.hbNumber = parseFloat(response.data.pmTwoPointFiveQoQRatio).toFixed(2);
|
}
|
this.airHB.push(obj0);
|
|
let obj1 = {
|
hbName: "",
|
hbNumber: ""
|
};
|
if (parseFloat(response.data.sulfurDioxideQoQRatio) >= 0) {
|
obj1.hbName = "SO₂环比";
|
obj1.hbNumber = parseFloat(response.data.sulfurDioxideQoQRatio).toFixed(2);
|
}
|
if (parseFloat(response.data.sulfurDioxideQoQRatio) < 0) {
|
obj1.hbName = "SO₂环比";
|
obj1.hbNumber = parseFloat(response.data.sulfurDioxideQoQRatio).toFixed(2);
|
}
|
|
this.airHB.push(obj1);
|
|
this.PMZL = parseFloat(response.data.pmTwoPointFiveVal).toFixed(2);
|
});
|
|
}
|
|
|
},
|
destroyed() {
|
if (this.timer1 != null) {
|
clearInterval(this.timer1);
|
}
|
|
if (this.timer2 != null) {
|
clearInterval(this.timer2);
|
}
|
|
if (this.timer3 != null) {
|
clearInterval(this.timer3);
|
}
|
|
}
|
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerHJ {
|
height: 100%;
|
width: 84%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.HJLeft {
|
width: 49%;
|
height: 100%;
|
|
.HJLeft1 {
|
height: 60%;
|
width: 100%;
|
|
.scrool {
|
margin-top: 20px;
|
height: calc(100% - 112px);
|
width: 100%;
|
}
|
}
|
|
.HJLeft2 {
|
height: 40%;
|
width: 100%;
|
|
.HJChart {
|
height: calc(100% - 72px);
|
width: 100%;
|
}
|
}
|
}
|
|
.HJRight {
|
width: 49%;
|
height: 100%;
|
|
.HJRight1 {
|
height: 60%;
|
width: 100%;
|
|
|
.HJRight1msg {
|
height: calc(100% - 72px);
|
width: 100%;
|
}
|
|
|
.HJRight11 {
|
height: 15%;
|
width: 100%;
|
margin-bottom: 10px;
|
margin-top: 10px;
|
|
.HJRight111 {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
|
.HJRight1111 {
|
width: 75%;
|
height: 70%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
.span1 {
|
width: 100%;
|
height: 40%;
|
color: #FFFFFF;
|
font-size: 24px;
|
letter-spacing: 3px;
|
display: flex;
|
align-items: center;
|
}
|
|
.span2 {
|
width: 100%;
|
height: 60%;
|
color: #38BE9F;
|
font-size: 38px;
|
letter-spacing: 3px;
|
display: flex;
|
align-items: center;
|
|
font-family: MyTime;
|
}
|
|
.span1 {
|
width: 100%;
|
height: 40%;
|
color: #FFFFFF;
|
font-size: 24px;
|
letter-spacing: 3px;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.HJRight1112 {
|
height: 100px;
|
width: 100px;
|
font-weight: 600;
|
color: #38BE9F;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 32px;
|
background: url(../../../assets/image/Left/Environmental/优.png) no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
|
.HJRight12 {
|
height: 44%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-around;
|
box-sizing: border-box;
|
|
padding-bottom: 10px;
|
|
.HJRight121 {
|
width: 30%;
|
height: 45%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
|
.HJRight1211 {
|
width: 80%;
|
display: flex;
|
flex-direction: column;
|
|
.span1 {
|
height: 50%;
|
width: 100%;
|
font-size: 22px;
|
color: #FFFFFF;
|
}
|
|
.span2 {
|
height: 50%;
|
width: 100%;
|
font-size: 32px;
|
color: #4AA9F2;
|
font-family: MyTime;
|
|
span {
|
font-size: 18px;
|
margin-left: 20px;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
}
|
|
.HJRight13 {
|
height: 22%;
|
width: 100%;
|
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
box-sizing: border-box;
|
|
padding-bottom: 10px;
|
|
.span1,
|
.span2,
|
.span3 {
|
width: 25%;
|
height: 80%;
|
}
|
|
.span1,
|
.span2,
|
.span3 {
|
display: flex;
|
flex-direction: column;
|
|
.span11,
|
.span12 {
|
height: 50%;
|
width: 100%;
|
color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
font-size: 22px;
|
}
|
|
.span12 {
|
font-size: 36px;
|
font-family: MyTime;
|
color: yellow;
|
}
|
|
}
|
|
.span2 {
|
.span12 {
|
font-size: 36px;
|
font-family: MyTime;
|
color: #98deff;
|
}
|
}
|
|
|
|
.span3 {
|
display: flex;
|
align-items: flex-end;
|
justify-content: center;
|
|
.span31 {
|
height: 100px;
|
width: 100px;
|
background: url(../../../assets/image/Left/Environmental/HJZB.png) no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #F4D502;
|
font-size: 36px;
|
font-weight: 600;
|
}
|
}
|
|
}
|
|
.HJRight14 {
|
height: 22%;
|
width: 100%;
|
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
|
.span1,
|
.span2,
|
.span3 {
|
width: 25%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
span {
|
height: 30%;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
color: #FFFFFF;
|
font-size: 22px;
|
}
|
|
.span11 {
|
font-family: Mytime;
|
color: #4AA9F2;
|
font-size: 28px;
|
}
|
}
|
}
|
}
|
|
.HJRight2 {
|
height: 40%;
|
width: 100%;
|
|
.HJRight2Msg {
|
margin-top: 20px;
|
height: calc(100% - 92px);
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
|
.span1 {
|
width: 70%;
|
height: 60%;
|
|
.span11 {
|
height: 50%;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content:center;
|
padding-right: 40px;
|
span {
|
// width: 30%;
|
font-size: 20px;
|
color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.button1 {
|
width: 100%;
|
height: 100%;
|
border: solid 1px #3AC5A4;
|
background-color: rgba(58, 197, 164, 0.5);
|
border-radius: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #FFFFFF;
|
font-size: 20px;
|
font-family: Mytime;
|
text-align: center;
|
}
|
|
.button2 {
|
width: 100%;
|
height: 100%;
|
border: solid 1px #F6D602;
|
background-color: rgba(246, 214, 2, 0.5);
|
border-radius: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #F6D602;
|
font-size: 20px;
|
font-family: Mytime;
|
}
|
|
// div {
|
// width: 40%;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// }
|
|
}
|
|
.span12 {
|
height: 50%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
|
span {
|
width: 30%;
|
font-size: 18px;
|
color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.button1 {
|
width: 30%;
|
height: 40%;
|
border: solid 1px #3AC5A4;
|
background-color: rgba(58, 197, 164, 0.5);
|
border-radius: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #FFFFFF;
|
font-size: 20px;
|
font-family: Mytime;
|
}
|
|
.button2 {
|
width: 30%;
|
height: 40%;
|
border: solid 1px #F6D602;
|
background-color: rgba(246, 214, 2, 0.5);
|
border-radius: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #F6D602;
|
font-size: 26px;
|
font-family: Mytime;
|
}
|
|
div {
|
width: 40%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
}
|
}
|
|
.span2 {
|
width: 20%;
|
height: 60%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
.span21 {
|
color: #FFF;
|
font-size: 30px;
|
line-height: 80px;
|
}
|
|
.span22 {
|
font-size: 36px;
|
font-family: Mytime;
|
color: #4AA9F2;
|
line-height: 80px;
|
}
|
}
|
}
|
}
|
|
|
}
|
}
|
|
|
.title {
|
width: 100%;
|
height: 38px;
|
background-image: url(../../../assets/images/title.png);
|
background-size: 100% 100%;
|
font-family: MytitileName;
|
font-size: 24px;
|
display: flex;
|
align-items: center;
|
color: #98deff;
|
letter-spacing: 3px;
|
|
span {
|
width: 70%;
|
text-indent: 70px;
|
}
|
|
}
|
</style>
|
