<template>
|
<div class="body_realTime">
|
<span class="public_realTime header_realTime">
|
<img class="monitor_img" c :src="require('@/assets/images/regionalOverview/monitor.png')" alt="">
|
<span class="dateTime_realTime"><span v-if="aqi_data.pubtime">实时状况 ({{ dataTime }})</span><span v-else>实时状况</span></span>
|
<!-- <a class="area_status">区域现状</a>-->
|
</span>
|
<div v-if="aqi_data.AQI">
|
<span v-if="aqi_data.AQI" class="public_realTime container_realTime">
|
<span class="aqi_realTime">
|
<span style="position: absolute;bottom: 18px;font-size: 12px;left: 32px;color: #808080">0</span>
|
<span style="position: absolute;bottom: 18px;font-size: 12px;right: 20px;color: #808080">500</span>
|
<span class="aqi_center">
|
<span v-for="(item, index) in 27" :key="index" class="value_item">
|
<span v-if="item > Math.ceil(aqi_data.AQI / 19)" class="local_item" />
|
<span v-else class="local_item_active" />
|
</span>
|
</span>
|
<span
|
style="position: absolute;display: inline-block;top: 50px; left: 62px; "
|
>
|
<span style="display: block;font-size: 12px;text-align: center;color: #409Eff;font-weight: 200;">{{ this.aqi_data.category }}</span>
|
<span style="display: block; font-size: 15px;font-weight: 600;color: #409eff;margin-top: -3px">AQI: {{ this.aqi_data.AQI }}</span>
|
</span>
|
</span>
|
<span class="value_realTime">
|
<ul>
|
<li v-for="(item1, key, index) in this.six_sensor" :key="index">
|
<span class="name_key">{{ key }}</span>
|
<span class="name_value">{{ Number(item1) }}</span>
|
</li>
|
</ul>
|
</span>
|
</span>
|
<span v-if="cityWeatherData.windDir" class="public_realTime footer_realTime">
|
<span class="windDir">
|
<img class="wind_watch" :src="require('@/assets/images/regionalOverview/wind_watch.png')" alt="">
|
<span>
|
<img class="wind_point" :style="{transform: 'rotate(' + cityWeatherData.wind360 + 'deg)'}" :src="require('@/assets/images/regionalOverview/wind_point.png')" alt="">
|
<span class="wind_text">{{ cityWeatherData.windDir + ' ' + cityWeatherData.windScale + '级' }}</span>
|
</span>
|
|
</span>
|
<span class="temperature">
|
<span class="temperature_img">
|
<img :src="require('@/assets/images/regionalOverview/thermometer.png')">
|
<span class="hidd" :style="{height:(4 + (0.62 * (50 - (cityWeatherData.temp)))) + 'px'}" />
|
<span class="transparent" :style="{height:(4 + (0.62 * (50 - (cityWeatherData.temp)))-1) + 'px'}" />
|
</span>
|
<span class="temperature_text">
|
<span>{{ cityWeatherData.temp }}°C</span>
|
<span>相对湿度 {{ cityWeatherData.humidity }}%</span>
|
</span>
|
</span>
|
</span>
|
<span class="clu_aqi">截止{{ closingDate }}今日累计AQI: {{ cumulativeAQI }}, 首要污染物: {{ primaryPollutant }}</span>
|
</div>
|
<div v-else style="width: 100%">
|
<el-empty style="width: 100%" :image-size="60" description="无数据信息" />
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'RealTimeStatus',
|
data() {
|
return {
|
aqi_data: {},
|
six_sensor: {},
|
dataTime: '',
|
cityWeatherData: {},
|
time: 1,
|
timer: null,
|
cumulativeAQI: '',
|
primaryPollutant: '',
|
closingDate: ''
|
}
|
},
|
mounted() {
|
this.aqiData()
|
this.cityWeather()
|
this.queryTodayAqiAndPollutant()
|
clearInterval(this.timer)
|
// 一个小时刷新一次模块
|
this.timer = setInterval(() => {
|
this.time--
|
if (this.time === 0) {
|
this.aqiData()
|
this.cityWeather()
|
this.queryTodayAqiAndPollutant()
|
this.time = 3600
|
}
|
}, 60 * 60 * 1000)
|
},
|
// 生命周期函数，销毁页面前执行
|
beforeDestroy() {
|
clearInterval(this.timer)
|
},
|
methods: {
|
// 时间戳转日期格式
|
formatTime(shijianchuo) {
|
// shijianchuo是整数，否则要parseInt转换
|
const time = new Date(parseInt(shijianchuo))
|
const y = time.getFullYear()
|
const m = time.getMonth() + 1
|
const d = time.getDate()
|
const h = time.getHours()
|
return y + '-' + m + '-' + d + ' ' + h + ':00'
|
},
|
// 获取aqi数据
|
aqiData() {
|
this.$request({
|
url: '/aqi/queryByRegionCode',
|
method: 'get',
|
params: {
|
regionCode: this.$store.state.regionCode
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.aqi_data = res.data
|
// if ()
|
this.dataTime = this.formatTime(this.aqi_data.pubtime)
|
for (const key in this.aqi_data) {
|
if (key === 'PM2_5') {
|
this.aqi_data['PM2.5'] = this.aqi_data[key]
|
break
|
}
|
}
|
const sortArr = ['PM2.5', 'PM10', 'SO2', 'NO2', 'CO', 'O3']// 指定排序顺序
|
const getArr = {}// 接收新顺序
|
sortArr.forEach(item => {
|
Object.keys(this.aqi_data).forEach(key => {
|
if (item === key) {
|
getArr[key] = this.aqi_data[key]
|
}
|
})
|
})
|
this.six_sensor = getArr
|
// 定义全局总线，用于孙子组件给祖先组件传值
|
this.$Bus.$emit('getTime', this.dataTime)
|
}
|
})
|
},
|
// 获取城市天气
|
cityWeather() {
|
this.$request({
|
url: '/weather/queryByRegionCode',
|
method: 'get',
|
params: {
|
regionCode: this.$store.state.regionCode
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.cityWeatherData = res.data
|
}
|
})
|
},
|
// 获取累计AQI以及首要污染物接口
|
queryTodayAqiAndPollutant() {
|
this.$request({
|
url: '/aqi/queryTodayAqiAndPollutant',
|
method: 'get',
|
params: {
|
regionCode: this.$store.state.regionCode
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.cumulativeAQI = res.data.aqi
|
if (res.data.pollutant.length > 0) {
|
this.primaryPollutant = res.data.pollutant.join(',')
|
} else {
|
this.primaryPollutant = '-'
|
}
|
let time = res.data.time
|
const str = time.substr(0, 1)
|
if (str === '0') {
|
time = time.substring(1, time.length)
|
}
|
this.closingDate = time
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.body_realTime {
|
width: 100%;
|
margin-top: 6px;
|
background-color: #fff;
|
//box-shadow: 0 0 5px 1px #999;
|
padding: 0;
|
border: solid 1px #d9d9d9;
|
border-radius: 3px;
|
}
|
|
.body_realTime > .public_realTime {
|
display: inline-block;
|
outline: none;
|
width: 100%;
|
float: left;
|
}
|
|
.header_realTime {
|
position: relative;
|
height: 40px;
|
background-color: #F8F7F7;
|
.monitor_img {
|
position: absolute;
|
top: 10px;
|
left: 16px;
|
width: 14px;
|
width: 16px;
|
};
|
.dateTime_realTime {
|
position: absolute;
|
top: 10px;
|
left: 40px;
|
font-size: 15px;
|
color: #808080;
|
};
|
.area_status {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
font-size: 15px;
|
color: #23af7f;
|
}
|
}
|
.container_realTime {
|
height: 130px;
|
background-color: #fff;
|
}
|
|
.aqi_realTime {
|
display: inline-block;
|
position: relative;
|
float: left;
|
width: 50%;
|
height: 130px;
|
}
|
.aqi_realTime > .aqi_center {
|
display: inline-block;
|
position: relative;
|
width: 60%;
|
height: 116px;
|
margin: 7px 36px;
|
}
|
|
.aqi_center .value_item {
|
display: inline-block;
|
position: absolute;
|
top: calc(50% - 2px);
|
left: 0;
|
height: 6px;
|
width: 50%;
|
}
|
|
//@deg: 300deg, 315deg, 330deg, 345deg, 0deg, 15deg, 30deg, 45deg, 60deg, 75deg, 90deg, 105deg, 120deg, 135deg, 150deg, 165deg, 180deg, 195deg, 210deg, 225deg, 240deg;
|
@deg: 320deg, 330deg, 340deg, 350deg, 0deg, 10deg, 20deg, 30deg, 40deg, 50deg, 60deg, 70deg, 80deg, 90deg, 100deg, 110deg,
|
120deg, 130deg, 140deg, 150deg, 160deg, 170deg, 180deg, 190deg, 200deg, 210deg, 220deg;
|
|
@len: length(@deg);
|
@aqi_key: var(num);
|
|
.local_item {
|
display: inline-block;
|
float: left;
|
width: 14px;
|
height: 4px;
|
background-color: #d6d6d6;
|
border-radius: 2px;
|
}
|
|
.aqi_center {
|
each(@deg, {
|
.value_item:nth-child(@{index}) {
|
transform: rotate(@value);
|
transform-origin: 100% 50%;
|
.local_item_active{
|
display: inline-block;
|
float: left;
|
width: 14px;
|
height: 4px;
|
border-radius: 2px;
|
background-color: #ff7e00;
|
}
|
}
|
})
|
}
|
|
.value_realTime {
|
display: inline-block;
|
width: 50%;
|
height: 130px;
|
padding: 8px 10px 8px 4px;
|
ul {
|
width: 100%;
|
height: 100%;
|
padding:0;
|
margin:0;
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
justify-content: space-between;
|
li {
|
text-align: left;
|
list-style-type: none;
|
width:30%;
|
height: 40px;
|
border-radius: 4px;
|
margin-top: 12px;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
.name_key {
|
width: 100%;
|
height: 20px;
|
color: #fff;
|
background-color: #6cb1f8;
|
text-align: center;
|
line-height: 20px;
|
}
|
.name_value {
|
width: 100%;
|
height: 20px;
|
color: #409eff;
|
background-color: #f0f7ff;
|
text-align: center;
|
line-height: 20px;
|
}
|
}
|
};
|
}
|
|
.footer_realTime {
|
height: 130px;
|
background-color: #eef1f6;
|
padding-top: 2px;
|
}
|
|
.windDir {
|
display: inline-block;
|
position: relative;
|
width: calc(50% - 1px);
|
height: 128px;
|
background-color: #fff;
|
float: left;
|
.wind_watch {
|
position: absolute;
|
top: 18px;
|
left: calc((100% - 87px)/2);
|
width: 87px;
|
};
|
.wind_point {
|
position: absolute;
|
top: 49px;
|
left: calc(50% - 10px);
|
width: 20px;
|
};
|
.wind_text {
|
position: absolute;
|
top: 107px;
|
width: 100%;
|
font-size: 14px;
|
font-weight: 540;
|
text-align: center;
|
color: #409Eff;
|
}
|
}
|
|
.temperature {
|
display: inline-block;
|
width: calc(50% - 1px);
|
height: 128px;
|
background-color: #fff;
|
float: right;
|
display: flex;
|
.temperature_img {
|
position: relative;
|
display: inline-block;
|
margin-left: 13%;
|
margin-top: 11.5%;
|
img {
|
width: 54px;
|
height: 96px;
|
};
|
.hidd {
|
position: absolute;
|
top: 7px;
|
left: 22.4px;
|
height: 49px;
|
width: 12.5px;
|
background-color: #e6e6e6;
|
border: 1px solid #d4d3d3;
|
border-bottom: none;
|
border-radius: 6px 6px 0 0;
|
//box-shadow: 0 -3px 3px 0 rgba(74, 164, 220, .8);
|
}
|
.transparent {
|
position: absolute;
|
top: 8px;
|
left: 23.6px;
|
content: '';
|
width: 3px;
|
height: 48px;
|
border-radius: 3px 0 0 0 ;
|
background-color: rgba(255, 255, 255, .4);
|
}
|
};
|
.temperature_text {
|
position: relative;
|
margin-top: 30%;
|
span:nth-child(1) {
|
display: inline-block;
|
//position: absolute;
|
width: 100%;
|
font-size: 30px;
|
color: #409eff;
|
line-height: 20px;
|
text-align: left;
|
}
|
span:nth-child(2) {
|
//position: absolute;
|
//top: -40px;
|
//left: 4px;
|
display: inline-block;
|
width: 100%;
|
font-size: 14px;
|
text-align: left;
|
color: rgba(64, 158, 255, .75);
|
}
|
}
|
}
|
|
.clu_aqi {
|
display: inline-block;
|
height: 30px;
|
line-height: 30px;
|
font-size: 13px;
|
margin-left: 16px;
|
color: #23af7f;
|
}
|
</style>
|
