<template>
|
<div class="ccc">
|
<div class="topContrast">
|
<div style="display:flex;height:60px;padding: 20px 15px 0px 15px;">
|
<el-radio-group v-model="contrastDateRadio" style="margin-left:20px;">
|
<el-radio-button label="月" />
|
<el-radio-button label="年" />
|
</el-radio-group>
|
<component
|
:is="dataType"
|
:value1="currentDate"
|
style="padding-left:0;margin-left:10px;width:180px;margin-right:10px;height:0px"
|
@sendPickerChild="showPickerChild"
|
/>
|
<el-radio-group v-model="contrastCityRadio">
|
<el-radio-button label="省内城市" />
|
<el-radio-button label="市区城市" />
|
<el-radio-button label="2+26城市" />
|
</el-radio-group>
|
|
|
<RegionCity v-if ="contrastCurrentCity==='city'" style="margin-left:10px" @regionCode="regionDataCity" />
|
<RegionProvince v-else-if="contrastCurrentCity==='province'" style="margin-left:10px" @regionCode="regionDataProvince" />
|
<el-button style="margin-left:200px" type="primary" @click="getData">查询</el-button>
|
</div>
|
</div>
|
<div>
|
<el-row :gutter="10">
|
<el-col :xs="8" :sm="6" :md="4" :lg="2" :xl="1">
|
<div class="grid-content bg-purple" style="margin-top:30px">
|
|
</div>
|
</el-col>
|
<el-col :xs="5" :sm="4" :md="4" :lg="8" :xl="8">
|
<div id="leftChart" class="leftChart" :style="{height:'400px'}">
|
</div>
|
</el-col>
|
<el-col :xs="3" :sm="6" :md="10" :lg="12" :xl="13">
|
<div id="rightChart" class="rightChart" ></div>
|
</el-col>
|
<el-col :xs="8" :sm="6" :md="4" :lg="2" :xl="2">
|
<div class="grid-content bg-purple-light">
|
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import DatePicker1 from '@/components/Form/DatePicker1'
|
import MouthPicker1 from '@/components/Form/MouthPicker1'
|
import * as echarts from 'echarts'
|
import RegionCity from '@/components/Cascader/regionCity'
|
import RegionProvince from '@/components/Cascader/regionProvince'
|
export default {
|
components: {
|
DatePicker1,
|
MouthPicker1,
|
RegionProvince,
|
RegionCity
|
},
|
props: {},
|
data() {
|
return {
|
contrastDateRadio: '月',
|
contrastCityRadio: '省内城市',
|
contrastCurrentCity: 'province',
|
dataType: 'DatePicker1',
|
currentDate: '',
|
regionCode: this.$store.state.regionCode,
|
contrastData: [],
|
regionDefaultCity: this.$store.state.regionCode.toString().substr(0, 2) + '0000',
|
regionDefaultProvince :this.$store.state.regionCode.toString().substr(0, 2) + '0000',
|
}
|
},
|
computed: {
|
|
},
|
watch: {
|
// 城市优良天数对比日期切换组件
|
contrastDateRadio(nv, ov) {
|
if (nv === '月') {
|
this.dataType = 'DatePicker1'
|
this.currentMonth()
|
} else {
|
this.dataType = 'MouthPicker1'
|
this.currentYear()
|
}
|
},
|
|
// 城市优良天数对比城市切换
|
contrastCityRadio(nv, ov) {
|
if (nv === '省内城市') {
|
this.contrastCurrentCity = 'province'
|
} else if (nv === '市区城市') {
|
this.contrastCurrentCity = 'city'
|
} else {
|
this.contrastCurrentCity = '28'
|
}
|
}
|
},
|
|
created() {
|
|
this.currentMonth();
|
},
|
monted(){
|
},
|
methods: {
|
showPickerChild(data) {
|
|
this.currentDate = data
|
},
|
// 获取默认当前月。
|
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()
|
|
// 城市优良天数获取月和年
|
this.currentDate = aData.getFullYear() + '-' + month
|
},
|
// 当前月份默认值
|
currentMonth() {
|
var aData = new Date()
|
var month = aData.getMonth() + 1
|
var currentDate = aData.getFullYear() + '-' + month
|
this.currentDate = currentDate.toString()
|
|
},
|
// 当前年份默认值
|
currentYear() {
|
var aData = new Date()
|
var currentDate = aData.getFullYear()
|
this.currentDate = currentDate.toString()
|
},
|
|
//查询数据
|
getData() {
|
|
//省内城市、市区城市、2+26城市分别走3个接口，
|
var params = {}
|
if (this.contrastDateRadio === '月') {
|
params.month = this.currentDate
|
} else {
|
params.year = this.currentDate
|
}
|
|
if (this.contrastCurrentCity === 'city') {
|
params.regionCode =this.regionDefaultCity
|
this.$request({
|
url: 'aqi/queryAreaPollutionLevel',
|
method: 'get',
|
params
|
})
|
.then(res => {
|
|
this.contrastData = res.data
|
this.initCharts()
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
} else if (this.contrastCurrentCity === 'province') {
|
|
params.regionCode=this.regionDefaultProvince;
|
|
this.$request({
|
url: 'aqi/queryProvinceCitiesPollutionLevel',
|
method: 'get',
|
params
|
})
|
.then(res => {
|
|
this.contrastData = res.data
|
this.initCharts()
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
} else {
|
this.$request({
|
url: 'aqi/qeury28CitiesPollutionLevel',
|
method: 'get',
|
params
|
})
|
.then(res => {
|
|
this.contrastData = res.data
|
this.initCharts()
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
}
|
},
|
//加载图表
|
initCharts() {
|
//判断年份月份
|
let textCurrent = ''
|
let textCurrentMiddle = ''
|
if (this.contrastDateRadio === '月') {
|
let textSplit = this.currentDate.split('-')
|
textCurrentMiddle = textSplit[0] + '年' + textSplit[1] + '月'
|
} else {
|
textCurrentMiddle = this.currentDate + '年'
|
}
|
textCurrent = textCurrentMiddle + '城市优良天数排序'
|
let textCurrentRight = textCurrentMiddle + '城市优良天数对比'
|
|
//纵坐标 城市名+值，绑定成对象， 进行倒序
|
let regionNames = []
|
|
for (let index = 0; index < this.contrastData.length; index++) {
|
// console.log(this.contrastData);
|
if(this.contrastData[index]!=null){
|
regionNames.push({
|
name: this.contrastData[index].regionName,
|
value:
|
this.contrastData[index].excellentWeatherDays +
|
this.contrastData[index].goodWeatherDays,
|
excellentDay: this.contrastData[index].excellentWeatherDays,
|
goodDay: this.contrastData[index].goodWeatherDays,
|
mildDay: this.contrastData[index].mildWeatherDays,
|
middleDay: this.contrastData[index].middleWeatherDays,
|
seriousDay: this.contrastData[index].seriousWeatherDays,
|
serverDay: this.contrastData[index].serverWeatherDays
|
})
|
}
|
|
}
|
//对象顺序排列,以优良天进行排序
|
regionNames.sort(function(a, b) {
|
return a.value - b.value
|
})
|
//转成数组，用于左边图表
|
const reginName = regionNames.map(item => {
|
return item.name
|
})
|
const reginValue = regionNames.map(item => {
|
return item.value
|
})
|
//转成数组用于右侧图表
|
const excellentDays = regionNames.map(item => {
|
return item.excellentDay
|
})
|
const goodDays = regionNames.map(item => {
|
return item.goodDay
|
})
|
const mildDays = regionNames.map(item => {
|
return item.mildDay
|
})
|
const middleDays = regionNames.map(item => {
|
return item.middleDay
|
})
|
const seriousDays = regionNames.map(item => {
|
return item.seriousDay
|
})
|
const serverDays = regionNames.map(item => {
|
return item.serverDay
|
})
|
|
|
|
//左图
|
const chartDomLeft = document.getElementById('leftChart')
|
const myChartLeft = echarts.init(chartDomLeft)
|
let autoHeight;
|
let barwidth;
|
//适应台式和笔记本
|
if(window.screen.availHeight>=1040){
|
autoHeight=20*30+50;
|
if( this.contrastData.length>20){
|
barwidth=13
|
}
|
else if(this.contrastData.length>10){
|
barwidth=20
|
}else{
|
barwidth=30
|
}
|
}else{
|
autoHeight=14*30+50;
|
if( this.contrastData.length>20){
|
barwidth=8
|
}
|
else if(this.contrastData.length>10){
|
barwidth=12
|
}else{
|
barwidth=20
|
}
|
}
|
|
myChartLeft.resize({height:autoHeight})
|
var optionLeft = {
|
color: ['#649AD6'],
|
title: {
|
text: textCurrent,
|
x: 'center',
|
padding:[30,0,0,0]
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
x: 'center',
|
y: 'bottom',
|
padding: [20, 0, 0, 0]
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'value',
|
splitLine: { //放x轴，消失的是y轴分割线
|
show: false
|
},
|
},
|
yAxis: {
|
// axisLine:{
|
// show:false //y轴线消失
|
// },
|
splitLine: {
|
show: false
|
},
|
type: 'category',
|
data: reginName
|
},
|
series: [
|
{
|
name: '优良',
|
type: 'bar',
|
label: { //x轴显示结果
|
show: true
|
},
|
barWidth: barwidth, //柱状宽度
|
barCategoryGap: '2',
|
data: reginValue
|
}
|
]
|
}
|
|
myChartLeft.setOption(optionLeft)
|
//右图
|
const chartDomRight = document.getElementById('rightChart')
|
const myChartRight = echarts.init(chartDomRight)
|
var optionRight = {
|
color: [
|
'#65dd77',
|
'#fcdf56',
|
'#fd7c43',
|
'#fc5656',
|
'#fc5689',
|
'#cd3a3a'
|
],
|
title: {
|
text: textCurrentRight,
|
x: 'center',
|
padding:[30,0,0,0] //主标题上边距
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
// Use axis to trigger tooltip
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
}
|
},
|
legend: {
|
x: 'center',
|
y: 'bottom',
|
padding: [20, 0, 0, 0]
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'value',
|
splitLine: { //放x轴，消失的是y轴分割线
|
show: false
|
},
|
},
|
yAxis: {
|
type: 'category',
|
|
data: reginName
|
},
|
series: [
|
{
|
name: '优',
|
type: 'bar',
|
stack: 'total',
|
barWidth: barwidth, //柱状宽度
|
barCategoryGap: '2',
|
label: {
|
show: true
|
},
|
// emphasis: {
|
// focus: 'series'
|
// },
|
data: excellentDays
|
},
|
{
|
name: '良',
|
type: 'bar',
|
stack: 'total',
|
barWidth: barwidth, //柱状宽度
|
barCategoryGap: '2',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: goodDays
|
},
|
{
|
name: '轻度污染',
|
type: 'bar',
|
stack: 'total', barWidth: barwidth, //柱状宽度
|
barCategoryGap: '2',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: mildDays
|
},
|
{
|
name: '中度污染',
|
type: 'bar',
|
stack: 'total',
|
barWidth: barwidth, //柱状宽度
|
barCategoryGap: '2',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: middleDays
|
},
|
{
|
name: '严重污染',
|
type: 'bar',
|
stack: 'total',
|
barWidth: barwidth, //柱状宽度
|
barCategoryGap: '2',
|
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: seriousDays
|
},
|
{
|
name: '重度污染',
|
type: 'bar',
|
barWidth: '8', //柱状宽度
|
barCategoryGap: '2',
|
|
stack: 'total',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: serverDays
|
}
|
]
|
}
|
myChartRight.resize({height:autoHeight})
|
myChartRight.setOption(optionRight)
|
|
},
|
|
//市级城市联动
|
regionDataCity(data){
|
if(data){
|
this.regionDefaultCity = data
|
}
|
|
},
|
//省级城市联动
|
regionDataProvince(data){
|
if(data){
|
this.regionDefaultProvince = data
|
}
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.el-tabs__content {
|
position: static;
|
}
|
.ccc {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 60px;
|
bottom: 0;
|
}
|
|
.charts_main {
|
padding: 0 0 20px 0;
|
// background-color: red;
|
width: 100%;
|
position: absolute;
|
height: calc(100% - 160px);
|
bottom: 10px;
|
top: 60px;
|
z-index: 0;
|
.leftChart {
|
float: left;
|
width: 42%;
|
}
|
.rightChart {
|
float: left;
|
margin-left: 30px;
|
width: 50%;
|
}
|
}
|
</style>
|
