<template>
|
<div>
|
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
<el-tab-pane name="first">
|
<span slot="label">
|
<i class="el-icon-pie-chart" /><b> 城市优良天统计</b>
|
</span>
|
<div class="topSelect">
|
<div style="display:flex">
|
<el-radio-group v-model="dateRadio" style="margin-left:20px">
|
<el-radio-button label="年报" />
|
<el-radio-button label="自定义" />
|
</el-radio-group>
|
<MouthPicker1
|
v-if="dataType==='MouthPicker1'"
|
:value1="currentYearD"
|
style="padding-left:0;margin-left:10px;width:160px"
|
@sendPickerChild="showPickerChild"
|
/>
|
<CustomPicker1
|
v-else
|
:value1="currentTimeD"
|
style="padding-left:0;margin-left:10px;width:400px"
|
@sendPickerChild="showPickerChild"
|
/>
|
<RegionCity style="margin-left:10px" @regionCode="regionData" />
|
</div>
|
<div>
|
<el-button type="primary" @click="getAllData">查询</el-button>
|
</div>
|
</div>
|
<div style="max-height: 800px;overflow-y: auto;">
|
<el-row :gutter="10">
|
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
<div class="grid-content bg-purple-light" />
|
<!-- <PieChart :height="'500px'" /> -->
|
<PieChartNew :datas="pieData" :height="'500px'" />
|
</el-col>
|
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
<div class="grid-content bg-purple" />
|
<BarChart :datas="barData.data" :datas1="barData.time" :height="'500px'" />
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" style="margin-top:20px;border-top: 1px solid #ccc;">
|
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
<div class="grid-content bg-purple-light" />
|
<el-table :data="pieTableData" border style="width: 100%">
|
<el-table-column prop="time" label="时间" align="center" />
|
<el-table-column prop="excellent" label="优" align="center" />
|
<el-table-column prop="good" label="良" align="center" />
|
<el-table-column prop="mild" label="轻度污染" align="center" />
|
<el-table-column prop="middle" label="中度污染" align="center" />
|
<el-table-column prop="serious" label="重度污染" align="center" />
|
<el-table-column prop="server" label="严重污染" align="center" />
|
<el-table-column prop="total" label="合计" align="center" />
|
</el-table>
|
</el-col>
|
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="padding-bottom:50px">
|
<div class="grid-content bg-purple" />
|
<el-table :data="barTableData" border style="width: 100%">
|
<el-table-column prop="time" label="时间" align="center" />
|
<el-table-column prop="excellent" label="优" align="center" />
|
<el-table-column prop="good" label="良" align="center" />
|
<el-table-column prop="mild" label="轻度污染" align="center" />
|
<el-table-column prop="middle" label="中度污染" align="center" />
|
<el-table-column prop="serious" label="重度污染" align="center" />
|
<el-table-column prop="server" label="严重污染" align="center" />
|
<el-table-column prop="total" label="合计" align="center" />
|
</el-table>
|
</el-col>
|
</el-row>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane name="second">
|
<span slot="label">
|
<i class="el-icon-tickets" /><b> 城市优良天数对比</b>
|
</span>
|
<ContrastCity ref="contrastCity" />
|
</el-tab-pane>
|
<el-tab-pane name="third">
|
<span slot="label">
|
<i class="el-icon-crop" />
|
<b>优良天变化率分析</b>
|
</span>
|
<ChangeAnalysis ref="changeAnalysis" />
|
</el-tab-pane>
|
<el-tab-pane name="fourth">
|
<span slot="label">
|
<i class="el-icon-news" /><b> 达标天数统计分析</b>
|
</span>
|
<QualifiedDaysAnalysis ref="qualifiedDaysAnalysis" />
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
|
import PieChartNew from '@/components/Echarts/PieChartNew'
|
import BarChart from '@/components/Echarts/BarChart'
|
import MouthPicker1 from '@/components/Form/MouthPicker1'
|
import CustomPicker1 from '@/components/Form/CustomPicker1'
|
import RegionCity from '@/components/Cascader/regionCity'
|
import ContrastCity from '@/views/levelStatistic/contrastCity'
|
import ChangeAnalysis from '@/views/levelStatistic/changeAnalysis'
|
import QualifiedDaysAnalysis from '@/views/levelStatistic/qualifiedDaysAnalysis'
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {
|
PieChartNew,
|
BarChart,
|
MouthPicker1,
|
CustomPicker1,
|
RegionCity,
|
ContrastCity,
|
ChangeAnalysis,
|
QualifiedDaysAnalysis
|
},
|
props: {},
|
data() {
|
// 这里存放数据
|
return {
|
activeName: 'first',
|
dateRadio: '年报',
|
dataType: 'MouthPicker1',
|
currentTimeD: [],
|
currentYearD: '',
|
pieData: [],
|
barData: { data: [], time: [] },
|
pieTableData: [],
|
barTableData: [],
|
regionDefault: this.$store.state.regionCode,
|
currentDate: '',
|
w160: true,
|
w400: false
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {
|
// regionDefault() {
|
// return this.$store.state.regionCode
|
// }
|
},
|
// 监控data中的数据变化
|
watch: {
|
// 日期切换组件
|
dateRadio(nv, ov) {
|
if (nv === '年报') {
|
this.dataType = 'MouthPicker1'
|
this.currentYear()
|
this.w160 = true
|
this.w400 = false
|
} else {
|
this.dataType = 'CustomPicker1'
|
this.currentTime()
|
this.w160 = !this.w160
|
this.w400 = !this.w400
|
}
|
}
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created() {
|
this.currentYear()
|
this.currentTime()
|
this.getAllData()
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted() {},
|
beforeCreate() {}, // 生命周期 - 创建之前
|
beforeMount() {}, // 生命周期 - 挂载之前
|
beforeUpdate() {}, // 生命周期 - 更新之前
|
updated() {}, // 生命周期 - 更新之后
|
beforeDestroy() {}, // 生命周期 - 销毁之前
|
destroyed() {}, // 生命周期 - 销毁完成
|
activated() {},
|
// 方法集合
|
methods: {
|
// 查询所有数据
|
getAllData() {
|
this.getPieData()
|
this.getBarData()
|
this.getBarTableData()
|
},
|
// 查询饼图数据
|
getPieData() {
|
this.pieData = []
|
this.pieTableData = []
|
this.$request({
|
url: '/aqi/queryPieChartOfPollutionLevel',
|
method: 'get',
|
params: {
|
regionCode: this.regionDefault,
|
// regionCode: 130900,
|
startDate:
|
this.dataType === 'MouthPicker1' ? null : this.currentTimeD[0],
|
endDate:
|
this.dataType === 'MouthPicker1' ? null : this.currentTimeD[1],
|
year: this.dataType === 'MouthPicker1' ? this.currentYearD : ''
|
}
|
}).then(res => {
|
var data = res.data.values
|
if (data) {
|
for (let i = 0; i < data.length; i++) {
|
this.pieData.push({ name: '', value: '' })
|
this.pieData[i].name =
|
this.pollutionLevel(data[i].pollution) + ': ' + data[i].proportion
|
this.pieData[i].value = data[i].days
|
}
|
var daysTotal = 0
|
var proportionTotal = 0
|
for (let i = 0; i < 2; i++) {
|
this.pieTableData.push({
|
time: '',
|
excellent: '',
|
good: '',
|
mild: '',
|
middle: '',
|
serious: '',
|
server: '',
|
total: ''
|
})
|
}
|
data.forEach(e => {
|
if (e.pollution === '0') {
|
this.pieTableData[0].excellent = e.days
|
this.pieTableData[1].excellent = e.proportion
|
} else if (e.pollution === '1') {
|
this.pieTableData[0].good = e.days
|
this.pieTableData[1].good = e.proportion
|
} else if (e.pollution === '2') {
|
this.pieTableData[0].mild = e.days
|
this.pieTableData[1].mild = e.proportion
|
} else if (e.pollution === '3') {
|
this.pieTableData[0].middle = e.days
|
this.pieTableData[1].middle = e.proportion
|
} else if (e.pollution === '4') {
|
this.pieTableData[0].serious = e.days
|
this.pieTableData[1].serious = e.proportion
|
} else {
|
this.pieTableData[0].server = e.days
|
this.pieTableData[1].server = e.proportion
|
}
|
daysTotal += e.days
|
proportionTotal += parseFloat(e.proportion)
|
})
|
this.pieTableData[0].total = daysTotal
|
this.pieTableData[1].total = proportionTotal.toFixed() + '%'
|
this.pieTableData[0].time = parseInt(res.data.time) + '年天数'
|
this.pieTableData[1].time = parseInt(res.data.time) + '年占比'
|
} else {
|
this.$message.warning('当前时间没有数据')
|
}
|
})
|
},
|
// 查询柱状图数据
|
getBarData() {
|
this.barData = { data: [], time: [] }
|
this.$request({
|
url: '/aqi/queryBarChartOfPollutionLevel',
|
method: 'get',
|
params: {
|
regionCode: this.regionDefault,
|
// regionCode: 130900,
|
startDate:
|
this.dataType === 'MouthPicker1' ? null : this.currentTimeD[0],
|
endDate:
|
this.dataType === 'MouthPicker1' ? null : this.currentTimeD[1],
|
year: this.dataType === 'MouthPicker1' ? this.currentYearD : ''
|
}
|
}).then(res => {
|
var data = res.data.values
|
if (data) {
|
this.barData.time = res.data.time
|
for (let i = 0; i < data.length; i++) {
|
this.barData.data.push({
|
name: '',
|
data: [],
|
type: 'bar',
|
stack: 'vistors',
|
barWidth: '60%'
|
})
|
for (let j = 0; j < data[i].days.length; j++) {
|
this.barData.data[i].data.push({ value: 0, data0: 0 })
|
this.barData.data[i].name = this.pollutionLevel(
|
data[i].pollution.toString()
|
)
|
this.barData.data[i].data[j].value = data[i].days[j]
|
this.barData.data[i].data[j].data0 = data[i].proportion[j]
|
}
|
}
|
} else {
|
console.log('柱状图没有数据')
|
}
|
})
|
},
|
// 柱状图表格数据
|
getBarTableData() {
|
this.barTableData = []
|
this.$request({
|
url: '/aqi/queryBarChatTableOfPollutionLevel',
|
methods: 'post',
|
params: {
|
regionCode: this.regionDefault,
|
// regionCode: 130900,
|
startDate:
|
this.dataType === 'MouthPicker1' ? null : this.currentTimeD[0],
|
endDate:
|
this.dataType === 'MouthPicker1' ? null : this.currentTimeD[1],
|
year: this.dataType === 'MouthPicker1' ? this.currentYearD : ''
|
}
|
}).then(res => {
|
this.barTableData = res.data
|
})
|
},
|
// 判断优良天方法
|
pollutionLevel(item) {
|
let level = ''
|
switch (item) {
|
case '0':
|
level = '优'
|
break
|
case '1':
|
level = '良'
|
break
|
case '2':
|
level = '轻度污染'
|
break
|
case '3':
|
level = '中度污染'
|
break
|
case '4':
|
level = '重度污染'
|
break
|
case '5':
|
level = '严重污染'
|
}
|
return level
|
},
|
// tab被触发时触发 调用各个tab的初始查询方法
|
handleClick(tab, event) {
|
if (tab.index === '1') {
|
this.$refs.contrastCity.getData()
|
} else if (tab.index === '2') {
|
this.$refs.changeAnalysis.getData()
|
} else if (tab.index === '3') {
|
this.$refs.qualifiedDaysAnalysis.getData()
|
}
|
},
|
// 获得子组件时间选择器传递的数据
|
showPickerChild(data) {
|
// if (typeof data === Array) {
|
// this.currentTimeD = data
|
// } else {
|
// this.currentYearD = data
|
// }
|
this.currentDate = data
|
},
|
// 当前年份默认值
|
// currentYear() {
|
// var aData = new Date()
|
// var currentDate = aData.getFullYear() - 1
|
// this.currentDate = currentDate.toString()
|
// },
|
// 当前自定义默认值
|
currentTime() {
|
var aData = new Date()
|
var month =
|
aData.getMonth() < 9
|
? '0' + (aData.getMonth() + 1)
|
: aData.getMonth() + 1
|
var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
var currentDate = aData.getFullYear() + '-' + month + '-' + date
|
this.currentTimeD = [currentDate, currentDate]
|
},
|
// 当前年份初始化
|
currentYear() {
|
var aData = new Date()
|
var currentDate = aData.getFullYear()
|
|
this.currentYearD = currentDate.toString()
|
},
|
// 获得地区级联选择器的返回值
|
regionData(data) {
|
this.regionDefault = data
|
}
|
} // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped lang="scss">
|
.el-row {
|
height: 500px;
|
}
|
.topSelect {
|
display: flex;
|
margin-bottom: 20px;
|
padding: 20px 15px 0 15px;
|
display: flex;
|
justify-content: space-between;
|
span:first-child {
|
flex: 1;
|
}
|
}
|
.w160{
|
width: 160px;
|
}
|
.w400{
|
width: 400px;
|
}
|
</style>
|
