<template>
|
<div class="excellent_proportion">
|
<div class="excellent_top header_excellent">
|
<img class="pie_img" :src="require('@/assets/images/regionalOverview/pieChart.png')" alt="">
|
<span class="proportion_title"><span v-if="timeArea">优良天数占比({{ timeArea }})</span><span v-else>优良天数占比</span></span>
|
<img class="open" :src="require('@/assets/images/regionalOverview/open.png')" alt="" style="cursor:pointer" @click="jumpLevelStatistic">
|
</div>
|
<div class="proportion_pie" v-if="this.timeArea">
|
<pie-chart-new :datas="data" :save="false" />
|
</div>
|
<div v-else style="width: 100%">
|
<el-empty style="width: 100%" :image-size="60" description="无统计数据"></el-empty>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import PieChartNew from '@/components/Echarts/PieChartNew'
|
export default {
|
name: 'ExcellentProportion',
|
components: { PieChartNew },
|
data() {
|
return {
|
timeArea: '',
|
data: []
|
}
|
},
|
created() {
|
this.queryPieChartOfPollutionLevel()
|
},
|
mounted() {
|
},
|
methods: {
|
// 获取天气污染等级比例饼状图数据
|
queryPieChartOfPollutionLevel() {
|
this.$request({
|
url: '/aqi/queryPieChartOfPollutionLevel',
|
method: 'get',
|
params: {
|
regionCode: this.$store.state.regionCode,
|
year: new Date().getFullYear()
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.timeArea = res.data.time
|
this.data = res.data.values.map((item) => {
|
const newMap = {}
|
newMap.value = item.days
|
const levelIndex = item.pollution
|
let level = ''
|
switch (levelIndex) {
|
case '0': level = '优'
|
break
|
case '1': level = '良'
|
break
|
case '2': level = '轻度污染'
|
break
|
case '3': level = '中度污染'
|
break
|
case '4': level = '重度污染'
|
break
|
case '5': level = '严重污染'
|
}
|
newMap.name = level + ': ' + item.proportion
|
return newMap
|
})
|
}
|
})
|
},
|
// 跳转页面
|
jumpLevelStatistic() {
|
this.$router.push({ path: '/analyse/analyse/levelStatistic' })
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.excellent_proportion {
|
width: 100%;
|
margin-top: 6px;
|
background-color: #fff;
|
//box-shadow: 0 0 5px 1px #999;
|
padding: 0;
|
border: solid 1px #d9d9d9;
|
border-radius: 3px;
|
box-sizing: border-box;
|
}
|
.excellent_proportion > .excellent_top {
|
display: inline-block;
|
outline: none;
|
width: 100%;
|
}
|
.header_excellent {
|
position: relative;
|
height: 40px;
|
background-color: #F8F7F7;
|
.pie_img {
|
position: absolute;
|
top: 10px;
|
left: 16px;
|
width: 18px;
|
}
|
.proportion_title {
|
position: absolute;
|
height: 40px;
|
line-height: 40px;
|
left: 40px;
|
font-size: 15px;
|
color: #808080;
|
.reminder_img {
|
margin-left: 6px;
|
margin-top: -3px;
|
width: 24px;
|
vertical-align: middle;
|
}
|
}
|
.open {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
width: 20px;
|
line-height: 40px;
|
}
|
}
|
.proportion_pie {
|
width: 100%;
|
margin-bottom: 10px;
|
}
|
</style>
|
