<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>
|
