<template>
|
<div style="position: relative;height: 100%">
|
<div style="display: flex;justify-content: flex-start;margin-left: 20px">
|
<el-cascader
|
v-model="newRegion"
|
placeholder="选择省/市/区"
|
:options="options"
|
:props="{ checkStrictly: true }"
|
clearable
|
change-on-select
|
style="width: 15%"
|
/>
|
<el-date-picker
|
v-model="month"
|
type="month"
|
align="right"
|
placeholder="选择月份"
|
:picker-options="pickerOptions"
|
value-format="yyyy-MM"
|
style="width: 15%;margin-left: 10px;margin-right: 10px"
|
/>
|
<div
|
style="display: inline-block;width: 5%;line-height: 30px;text-align: center;background: #409eff;color: #fff;margin: 5px;border-radius: 5px;cursor: pointer;font-size: 14px;"
|
@click="getRegionApi"
|
>查询</div>
|
<div
|
style="display: inline-block;width: 5%;line-height: 30px;text-align: center;background: #409eff;color: #fff;margin: 5px;border-radius: 5px;cursor: pointer;font-size: 14px;"
|
@click="exportWord"
|
>导出</div>
|
</div>
|
<el-card v-if="flag" class="showCard">
|
<div style="width: 100%;">
|
<div>
|
<h1 style="font-family: 华文宋体;text-align: center;color: red;width: 100%; ">{{ rankData.cityName }}大气污染防治工作领导小组办公室文件</h1>
|
<hr style=" border: 1px solid red;margin-top: 10px;width: 80%">
|
<h2 style="font-weight: 500;text-align: center">关于{{ time[0] }}年{{ Number(time[1]) }}月份全市空气质量考核排名情况的通报</h2>
|
</div>
|
<div>
|
<h3 style="margin-top: 10px">一、{{ rankData.cityName }}空气质量排名情况</h3>
|
<p class="pText">{{ rankData.currentRanking }}</p>
|
<p class="pText">{{ rankData.cumulativeRanking }}</p>
|
</div>
|
<div>
|
<h3 style="margin-top: 10px">二、{{ rankData.cityName }}{{ rankData.areaSize }}县市区空气质量情况</h3>
|
<div>
|
<h4>（一）{{ Number(time[1]) }}月份空气质量综合指数和PM2.5变化情况</h4>
|
<div>
|
<h5 style="font-size: 16px">1.空气质量综合指数</h5>
|
<p class="pText">{{ rankData.currentCompositeIndexContrast }}</p>
|
</div>
|
<div>
|
<h5 style="font-size: 16px">2.空气质量综合指数同比变化率</h5>
|
<p class="pText">{{ rankData.currentCompositeIndexYearOnYearContrast }}</p>
|
</div>
|
<div>
|
<h5 style="font-size: 16px">3.PM2.5累计浓度</h5>
|
<p class="pText">{{ rankData.currentPM25Contrast }}</p>
|
</div>
|
<div>
|
<h5 style="font-size: 16px">4.PM2.5累计浓度同比变化率</h5>
|
<p class="pText">{{ rankData.currentPM25YearOnYearContrast }}</p>
|
</div>
|
</div>
|
<div v-if="Number(time[1]) !== 1">
|
<h4>（二）1-{{ Number(time[1]) }}月份空气质量综合指数和PM2.5变化情况</h4>
|
<div>
|
<h5 style="font-size: 16px">1.空气质量综合指数</h5>
|
<p class="pText">{{ rankData.cumulativeCompositeIndexContrast }}</p>
|
</div>
|
<div>
|
<h5 style="font-size: 16px">2.空气质量综合指数同比变化率</h5>
|
<p class="pText">{{ rankData.cumulativeCompositeIndexYearOnYearContrast }}</p>
|
</div>
|
<div>
|
<h5 style="font-size: 16px">3.PM2.5累计浓度</h5>
|
<p class="pText">{{ rankData.cumulativePM25Contrast }}</p>
|
</div>
|
<div>
|
<h5 style="font-size: 16px">4.PM2.5累计浓度同比变化率</h5>
|
<p class="pText">{{ rankData.cumulativePM25YearOnYearContrast }}</p>
|
</div>
|
</div>
|
</div>
|
<div style="text-align: center;margin-top: 50px">
|
<h5>全市各县（市、区）及管委会空气质量{{ Number(time[1]) }}月份空气质量考核排名（从好到差）</h5>
|
<el-table
|
:data="rankData.currentAirQualityRankingReport"
|
style="margin: 0 auto;"
|
>
|
<el-table-column
|
prop="resultRank"
|
label="考核排名"
|
align="center"
|
/>
|
<el-table-column
|
prop="areaName"
|
label="地区"
|
align="center"
|
/>
|
<el-table-column align="center" label="综合指数">
|
<el-table-column
|
prop="compositeIndex"
|
label="综合指数"
|
align="center"
|
/>
|
<el-table-column
|
prop="compositeIndexRank"
|
label="综指排名"
|
align="center"
|
/>
|
<el-table-column
|
prop="compositeIndexYearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
<el-table-column
|
prop="compositeIndexYearOnYearRank"
|
label="改善排名"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="PM2.5">
|
<el-table-column
|
prop="PM2_5"
|
label="PM2.5浓度"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM2_5Rank"
|
label="浓度排名"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM2_5YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM2_5YearOnYearRank"
|
label="改善排名"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column
|
prop="score"
|
label="加权得分"
|
align="center"
|
/>
|
</el-table>
|
<div>
|
<p class="explain">注：1.考核排名计算公式：（空气质量综合指数绝对值排名×20%+空气质量指数改善幅度排名×30%）+（PM2.5平均浓度绝对值排名×20%+PM2.5平均浓度改善幅度排名×30%）。</p>
|
<p class="explain" style="text-indent: 2em">2.加权得分值越小，空气质量考核综合评价越好。</p>
|
<p class="explain" style="text-indent: 2em">3.排名位次数值相加得分相同的情况下，优先按照PM2.5月均浓度值、改善幅度确定排名先后，平均浓度值低、下降幅度大的排名靠前。</p>
|
</div>
|
</div>
|
<div v-if="Number(time[1]) !== 1" style="text-align: center;margin-top: 50px">
|
<h5>全市各县（市、区）及管委会空气质量1-{{ Number(time[1]) }}月份空气质量综合指数和PM2.5同比变化率排名</h5>
|
<el-table
|
:data="rankData.cumulativeAirQualityRankingReport"
|
style="margin: 0 auto;"
|
>
|
<el-table-column
|
prop="areaName"
|
label="县（市、区）"
|
align="center"
|
/>
|
<el-table-column align="center" label="综合指数">
|
<el-table-column
|
prop="compositeIndexYearOnYearRank"
|
label="综合指数变化率排名"
|
align="center"
|
/>
|
<el-table-column
|
prop="compositeIndex"
|
label="本期"
|
align="center"
|
/>
|
<el-table-column
|
prop="compositeIndexLast"
|
label="上年同期"
|
align="center"
|
/>
|
<el-table-column
|
prop="compositeIndexYearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="PM2.5">
|
<el-table-column
|
prop="PM2_5YearOnYearRank"
|
label="PM2.5变化率排名"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM2_5"
|
label="浓度"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM2_5Last"
|
label="上年同期"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM2_5YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div style="text-align: center;margin-top: 50px">
|
<h5>全市各县（市、区）及管委会{{ Number(time[1]) }}月份五因子对比情况</h5>
|
<el-table
|
:data="rankData.currentFiveSensorsContrastReport"
|
style="margin: 0 auto;"
|
>
|
<el-table-column
|
prop="areaName"
|
label="地区"
|
align="center"
|
/>
|
<el-table-column align="center" label="SO2">
|
<el-table-column
|
prop="SO2"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="SO2Last"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="SO2YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="NO2">
|
<el-table-column
|
prop="NO2"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="NO2Last"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="NO2YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="CO">
|
<el-table-column
|
prop="CO"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="COLast"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="COYearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="O3">
|
<el-table-column
|
prop="O3"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="O3Last"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="O3YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="PM10">
|
<el-table-column
|
prop="PM10"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM10Last"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM10YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div v-if="Number(time[1]) !== 1" style="text-align: center;margin-top: 50px">
|
<h5>全市各县（市、区）及管委会1-{{ Number(time[1]) }}月份五因子对比情况</h5>
|
<el-table
|
:data="rankData.cumulativeFiveSensorsContrastReport"
|
style="margin: 0 auto;"
|
>
|
<el-table-column
|
prop="areaName"
|
label="地区"
|
align="center"
|
/>
|
<el-table-column align="center" label="SO2">
|
<el-table-column
|
prop="SO2"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="SO2Last"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="SO2YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="NO2">
|
<el-table-column
|
prop="NO2"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="NO2Last"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="NO2YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="CO">
|
<el-table-column
|
prop="CO"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="COLast"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="COYearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="O3">
|
<el-table-column
|
prop="O3"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="O3Last"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="O3YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
<el-table-column align="center" label="PM10">
|
<el-table-column
|
prop="PM10"
|
label="今年"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM10Last"
|
label="去年"
|
align="center"
|
/>
|
<el-table-column
|
prop="PM10YearOnYear"
|
label="改善幅度"
|
align="center"
|
/>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-card>
|
<el-empty v-else class="showCard" description="请选择区域和月份进行查询！" />
|
</div>
|
</template>
|
|
<script>
|
import { ExportBriefDataDocx } from '@/utils/exportBriefDataDocx'
|
|
export default {
|
name: 'RankingAirQualityCity',
|
data() {
|
return {
|
regionCode: this.$store.state.regionCode,
|
pickerOptions: {
|
disabledDate(time1) {
|
return time1.getMonth() > new Date().getMonth()
|
}
|
},
|
flag: false,
|
time: [],
|
options: [],
|
newRegion: [],
|
month: '',
|
rankData: {}
|
}
|
},
|
created() {
|
this.getRegion()
|
},
|
methods: {
|
// 获取联动数据
|
getRegion() {
|
this.$request({
|
url: '/organization/getMapPath',
|
method: 'get',
|
params: {
|
organizationId: this.$store.state.orgId
|
}
|
})
|
.then(res => {
|
const data = res.data
|
for (let i = 0; i < data.length; i++) {
|
this.options.push({
|
value: data[i].provinceCode,
|
label: data[i].provinceName
|
})
|
this.options[i].children = []
|
for (let j = 0; j < data[i].cities.length; j++) {
|
this.options[i].children.push({
|
value: data[i].cities[j].cityCode,
|
label: data[i].cities[j].cityName
|
})
|
this.options[i].children[j].children = []
|
for (let k = 0; k < data[i].cities[j].areas.length; k++) {
|
this.options[i].children[j].children.push({
|
value: data[i].cities[j].areas[k].areaCode,
|
label: data[i].cities[j].areas[k].areaName
|
})
|
}
|
}
|
}
|
})
|
.catch(err => {
|
console.log('请求Region失败')
|
console.log(err)
|
})
|
},
|
// 改变regionCode
|
getRegionApi() {
|
this.regionCode = this.newRegion[this.newRegion.length - 1]
|
if (!this.regionCode) {
|
this.$message.warning('请选择城市!')
|
return
|
}
|
if (this.month) {
|
this.time = this.month.split('-')
|
this.airQualityRankingData()
|
} else {
|
this.$message.warning('请选择时间！')
|
}
|
// this.$store.state.regionCode = this.newRegion
|
},
|
// 全市空气质量考核排名情况通报
|
airQualityRankingData() {
|
this.$request({
|
url: '/announcement/airQualityRanking',
|
method: 'get',
|
params: {
|
regionCode: this.regionCode,
|
time: this.month
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.rankData = res.data
|
this.flag = true
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
},
|
// 导出word
|
exportWord() {
|
// 判断有无附加商品来选择word模版
|
// 读取并获得模板文件的二进制内容
|
this.rankData.year = this.time[0]
|
this.rankData.month = Number(this.time[1])
|
ExportBriefDataDocx('/cityRank.docx', this.rankData, `1.docx`)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
h5 {
|
margin: 15px;
|
font-size: 16px;
|
}
|
.showCard {
|
width: 70%;
|
padding: 20px;
|
height: calc(100% - 140px);
|
margin: 20px auto 0;
|
z-index: 20;
|
overflow-y: visible;
|
}
|
.el-card {
|
width: 70%;
|
}
|
.el-tabs__content, .el-tab-pane {
|
height: 100%;
|
}
|
.pText {
|
margin: 0;
|
padding: 5px;
|
text-indent: 2em;
|
line-height: 30px;
|
font-size: 16px;
|
color: grey;
|
}
|
.explain {
|
font-size: 12px;
|
text-align: left;
|
}
|
|
</style>
|
