<template>
|
<div class="rank_realTime">
|
<div class="public_realTime header_realTime">
|
<img class="rank_img" :src="require('@/assets/images/regionalOverview/rank.png')" alt="">
|
<span class="rank_reciprocal">省内倒数排名</span>
|
<span class="rank_top"><span class="rank_time">{{ time }}</span><img class="rank_open" :src="require('@/assets/images/regionalOverview/open.png')" alt="" style="cursor:pointer" @click="jumpCityAirRank"></span>
|
</div>
|
<div v-if="!(this.rankData.day.size === null && this.rankData.month.size === null && this.rankData.year.size === null)" class="rank_body">
|
<div v-for="(item, key, index) in this.rankData" :key="index" class="rank_info">
|
<div class="date_year">{{ key === 'day' ? '日' : key === 'month' ? '月' : '年' }}</div>
|
<div class="progress_info">
|
<span class="info_left">{{ item.rank === null || item.size === null ? '' : '倒数排名' + item.rank + '/' +item.size }}</span>
|
<span class="info_right">
|
{{ item.AQI === undefined ? item.compositeIndex === null ? '累计综合指数:' : '累计综合指数' + item.compositeIndex : item.AQI === null ? 'AQI:' : 'AQI:'+ item.AQI }}
|
</span>
|
<span class="progress_bar">
|
<span
|
class="bar"
|
:style="{width: (item.rank / item.size) * 100 + '%',
|
backgroundColor: key === 'day' ?
|
'#978ceb' : key === 'month' ?
|
'#729aec' : '#5bc9c5'}"
|
/>
|
</span>
|
</div>
|
</div>
|
</div>
|
<div v-else style="width: 100%">
|
<el-empty style="width: 100%" :image-size="60" description="无排名数据" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'ReciprocalRank',
|
data() {
|
return {
|
rankData: { day: '', month: '', year: '' },
|
time: '',
|
second: 1,
|
timer: null
|
}
|
},
|
mounted() {
|
this.getRankData()
|
clearInterval(this.timer)
|
// 一个小时刷新一次模块
|
this.timer = setInterval(() => {
|
this.second--
|
if (this.time === 0) {
|
this.getRankData()
|
this.time = 3600 * 12
|
}
|
}, 12 * 60 * 60 * 1000)
|
},
|
created() {},
|
// 生命周期函数，销毁页面前执行
|
beforeDestroy() {
|
clearInterval(this.timer)
|
},
|
methods: {
|
getRankData() {
|
this.$request({
|
url: '/aqi/provincialRanking',
|
method: 'get',
|
params: {
|
regionCode: this.$store.state.regionCode
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
// console.log(res.data)
|
this.time = res.data.time
|
const dateArr = ['day', 'month', 'year']
|
const getArr = {}// 接收新顺序
|
dateArr.forEach(item => {
|
Object.keys(res.data).forEach(key => {
|
if (item === key) {
|
getArr[key] = res.data[key]
|
}
|
})
|
})
|
this.rankData = getArr
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
},
|
// 跳转页面
|
jumpCityAirRank() {
|
this.$router.push({ path: '/analyse/analyse/cityAirRank' })
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.rank_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;
|
}
|
.rank_realTime > .public_realTime {
|
display: inline-block;
|
outline: none;
|
width: 100%;
|
float: left;
|
}
|
.header_realTime {
|
position: relative;
|
height: 40px;
|
background-color: #F8F7F7;
|
.rank_img {
|
position: absolute;
|
top: 12px;
|
left: 16px;
|
width: 18px;
|
}
|
.rank_reciprocal {
|
position: absolute;
|
height: 40px;
|
line-height: 40px;
|
left: 40px;
|
font-size: 15px;
|
color: #808080;
|
}
|
.rank_top {
|
position: absolute;
|
right: 10px;
|
height: 40px;
|
line-height: 40px;
|
font-size: 15px;
|
color: #808080;
|
.rank_time {
|
display: inline-block;
|
margin-right: 5px;
|
vertical-align: middle;
|
}
|
.rank_open {
|
position: relative;
|
top: 4px;
|
width: 20px;
|
line-height: 40px;
|
}
|
}
|
|
}
|
.rank_body {
|
display: inline-block;
|
padding: 0 12px;
|
|
width: 100%;
|
.rank_info {
|
display: inline-block;
|
width: 100%;
|
|
.date_year {
|
float: left;
|
height: 40px;
|
line-height: 40px;
|
color: #808080;
|
font-size: 18px;
|
}
|
.progress_info {
|
width: calc(100% - 20px);
|
position: relative;
|
left: 20px;
|
.info_left {
|
position: absolute;
|
top: 0;
|
left: 10px;
|
font-size: 14px;
|
color: #bfbfbf;
|
}
|
.info_right {
|
position: absolute;
|
top: 0;
|
right: 4px;
|
font-size: 14px;
|
color: #bfbfbf;
|
}
|
.progress_bar {
|
position: absolute;
|
width: calc(100% - 12px);
|
height: 8px;
|
background-color: #d5dbe0;
|
border-radius: 5px;
|
left: 10px;
|
top: 24px;
|
.bar {
|
position: absolute;
|
width: 0;
|
background-color: #66b1ff;
|
height: 8px;
|
border-radius: 5px;margin-top: -1px;
|
transition: all 2s;
|
}
|
}
|
}
|
}
|
.rank_info:nth-child(1) {
|
margin-top: 10px;
|
}
|
.rank_info:nth-last-child(1) {
|
margin-bottom: 10px;
|
}
|
}
|
</style>
|
