355 lines
13 KiB
Vue
355 lines
13 KiB
Vue
<template>
|
||
<div class="ele-body">
|
||
<!-- 搜索表单 -->
|
||
<a-form :model="queryParams" :label-col="{ md: { span: 6 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
|
||
<a-row>
|
||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||
<a-form-item label="年度:"><a-select mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度"></a-select></a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||
<a-form-item label="月份:"><a-select mode="multiple" v-model:value="queryParams.monthList" :options="monthOptions" placeholder="请选择月份"></a-select></a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||
<a-form-item label="区域等级:">
|
||
<a-select v-model:value="queryParams.regionLevel" @change="handleRegionLevelChange" allowClear placeholder="请选择等级">
|
||
<a-select-option v-for="item in regionLevelOptions" :key="item.value">{{ item.label }}</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||
<a-form-item label="区域:"><a-select mode="multiple" v-model:value="queryParams.areaList" :options="areaOptions" placeholder="请选择区域"></a-select></a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||
<a-form-item label="测点名称:">
|
||
<a-select mode="multiple" v-model:value="queryParams.placeList" :options="placeOptions" placeholder="请选择测点名称"></a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||
<a-form-item label="监测指标:">
|
||
<a-select mode="multiple" @change="handleIndicatorChange" v-model:value="queryParams.indicatorList" :options="indicatorOptions" placeholder="请选择监测指标"></a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||
<a-form-item label="横坐标:"><a-select v-model:value="queryParams.xco" :options="xOptions" allowClear placeholder="请选择横坐标"></a-select></a-form-item>
|
||
</a-col>
|
||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||
<a-form-item label="纵坐标:">
|
||
<a-select mode="multiple" @change="handleYcoChange" v-model:value="queryParams.ycoList" :options="yOptions" allowClear placeholder="请选择纵坐标"></a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||
<a-space><a-button type="primary" class="mb-20" @click="drawTrend">开始统计</a-button></a-space>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
<a-card :bordered="false"><div id="chartColumn" style="width: 100%; height: 500px;"></div></a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
let trendChart;
|
||
import { getYearOptions, getTrendChart, getCityPlace, getCountryPlace } from '@/api/ecology/atmosphere/air';
|
||
import { getDictData } from '@/api/ecology/dict';
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
queryParams: {
|
||
yearList: ['2020', '2021'],
|
||
monthList: [],
|
||
areaList: ['南宁市'],
|
||
placeList: [],
|
||
regionLevel: '市级', // 区域等级
|
||
xco: '年度', // 横坐标
|
||
ycoList: ['ch'],
|
||
indicatorList: ['so2', 'no2'] // 监测指标
|
||
},
|
||
trendData: [],
|
||
regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
|
||
placeOptions: [],
|
||
areaOptions: [],
|
||
yearOptions: [],
|
||
indicatorOptions: [
|
||
{ label: '二氧化硫浓度/(μg/m3)', value: 'so2' },
|
||
{ label: '二氧化氮浓度/(μg/m3)', value: 'no2' },
|
||
{ label: '可吸入颗粒物浓度/(μg/m3)', value: 'pm10' },
|
||
{ label: '一氧化碳 浓度/(mg/m3)', value: 'co' },
|
||
{ label: 'O3（O3）最大8小时滑动平均浓度/(μg/m3)', value: 'o3' },
|
||
{ label: '细颗粒物浓度/(μg/m3)', value: 'pm25' },
|
||
{ label: '空气质量指数AQI', value: 'aqi' },
|
||
{ label: '首要污染天数', value: 'main' },
|
||
{ label: '多项首要污染物天数', value: 'multi' }
|
||
],
|
||
monthOptions: [
|
||
{
|
||
label: '全部',
|
||
value: '全部'
|
||
}
|
||
],
|
||
xOptions: [
|
||
{ label: '年度', value: '年度' },
|
||
{ label: '年月', value: '年月' },
|
||
{ label: '区域', value: '区域' },
|
||
{ label: '测点名称', value: '测点名称' },
|
||
{ label: '监测指标', value: '监测指标' }
|
||
],
|
||
yOptions: [
|
||
{ label: '达标天数（天）', value: 'days' },
|
||
{ label: '达标率（%）', value: 'rate' },
|
||
{ label: '浓度', value: 'ch' },
|
||
{ label: '首要污染物天数', value: 'main' },
|
||
{ label: '空气质量指数', value: 'aqi' },
|
||
{ label: '优良率', value: 'abRate' },
|
||
{ label: '多项首要污染物天数', value: 'multi' },
|
||
]
|
||
};
|
||
},
|
||
mounted() {
|
||
this.loadOptionData();
|
||
this.drawTrend();
|
||
},
|
||
methods: {
|
||
// 下拉列表
|
||
loadOptionData() {
|
||
getYearOptions().then(res => {
|
||
this.yearOptions = res.data.data.map(item => {
|
||
return {
|
||
label: item,
|
||
value: item
|
||
};
|
||
});
|
||
});
|
||
for (let i = 1; i <= 12; i++) {
|
||
this.monthOptions.push({ label: i + '月', value: i });
|
||
}
|
||
this.getArea();
|
||
this.getCityPlace();
|
||
},
|
||
// 区域下拉列表
|
||
getArea() {
|
||
getDictData({ dictName: '城区行政区划代码' }).then(res => {
|
||
this.areaOptions = res.data.data.map(item => {
|
||
return {
|
||
label: item.dictDataName,
|
||
value: item.dictDataName
|
||
};
|
||
});
|
||
this.areaOptions.unshift({ label: '南宁市', value: '南宁市' });
|
||
});
|
||
},
|
||
// 县级
|
||
getCounty() {
|
||
getDictData({ dictName: '县行政区划代码' }).then(res => {
|
||
this.areaOptions = res.data.data.map(item => {
|
||
return {
|
||
label: item.dictDataName,
|
||
value: item.dictDataName
|
||
};
|
||
});
|
||
this.areaOptions.unshift({ label: '所有县', value: '所有县' });
|
||
});
|
||
},
|
||
// 县级测点名称下拉列表
|
||
getCountryPlace() {
|
||
getCountryPlace().then(res => {
|
||
this.placeOptions = res.data.data.map(item => {
|
||
return {
|
||
label: item,
|
||
value: item
|
||
};
|
||
});
|
||
});
|
||
},
|
||
// 县级测点名称下拉列表
|
||
getCityPlace() {
|
||
getCityPlace().then(res => {
|
||
this.placeOptions = res.data.data.map(item => {
|
||
return {
|
||
label: item,
|
||
value: item
|
||
};
|
||
});
|
||
});
|
||
},
|
||
handleRegionLevelChange(value) {
|
||
this.queryParams.areaList = [];
|
||
this.queryParams.placeList = [];
|
||
if (value == '市级') {
|
||
this.getArea();
|
||
this.getCityPlace();
|
||
} else if (value == '县级') {
|
||
this.getCounty();
|
||
this.getCountryPlace();
|
||
}
|
||
},
|
||
// 纵坐标变化
|
||
handleYcoChange(value) {
|
||
if (value.length > 2) {
|
||
this.$message.warning('纵坐标最多只能选择两个')
|
||
this.queryParams.ycoList.splice(this.queryParams.ycoList.length - 1)
|
||
}
|
||
if (value.includes('rate') || value.includes('aqi') || value.includes('abRate')) {
|
||
this.queryParams.indicatorList = []
|
||
}
|
||
if (value.includes('multi')) {
|
||
this.queryParams.ycoList = ['multi']
|
||
this.queryParams.indicatorList = ['multi']
|
||
}
|
||
if (value.includes('main')) {
|
||
this.queryParams.ycoList = ['main']
|
||
this.queryParams.indicatorList = ['main']
|
||
|
||
}
|
||
if (value.includes('aqi')) {
|
||
this.queryParams.ycoList = ['aqi']
|
||
this.queryParams.indicatorList = ['aqi']
|
||
}
|
||
},
|
||
handleIndicatorChange(value) {
|
||
if (value.includes('multi')) {
|
||
this.queryParams.ycoList = ['multi']
|
||
this.queryParams.indicatorList = ['multi']
|
||
}
|
||
if (value.includes('main')) {
|
||
this.queryParams.ycoList = ['main']
|
||
this.queryParams.indicatorList = ['main']
|
||
}
|
||
if (value.includes('aqi')) {
|
||
this.queryParams.ycoList = ['aqi']
|
||
this.queryParams.indicatorList = ['aqi']
|
||
}
|
||
},
|
||
validParams() {
|
||
console.log("params", this.queryParams);
|
||
if (this.queryParams.xco === '年月' && this.queryParams.monthList.length === 0) {
|
||
this.$message.warning('横坐标为年月时，月份选择不能为空')
|
||
return false
|
||
}
|
||
if (this.queryParams.xco === '区域' && this.queryParams.areaList.length === 0) {
|
||
this.$message.warning('横坐标为区域时，区域选择不能为空')
|
||
return false
|
||
}
|
||
if (this.queryParams.xco === '区域' && this.queryParams.indicatorList.length > 1) {
|
||
this.$message.warning('横坐标为区域时，监测指标不能多选')
|
||
return false
|
||
}
|
||
if (this.queryParams.xco === '监测指标' && this.queryParams.areaList.length > 1) {
|
||
this.$message.warning('横坐标为监测指标时，区域不能多选')
|
||
return false
|
||
}
|
||
if (this.queryParams.xco === '监测指标' && this.queryParams.placeList.length > 1) {
|
||
this.$message.warning('横坐标为监测指标时，测点名称不能多选')
|
||
return false
|
||
}
|
||
if (this.queryParams.xco === '测点名称' && this.queryParams.placeList.length === 0) {
|
||
this.$message.warning('横坐标为测点名称时，测点名称选择不能为空')
|
||
return false
|
||
}
|
||
if (this.queryParams.xco === '测点名称' && this.queryParams.indicatorList.length > 1) {
|
||
this.$message.warning('横坐标为测点名称时，监测指标不能多选')
|
||
return false
|
||
}
|
||
if (this.queryParams.areaList.length > 0 && this.queryParams.placeList.length > 0) {
|
||
this.$message.warning('区域与测点名称不能同时选择')
|
||
return false
|
||
}
|
||
if (this.queryParams.ycoList.includes('浓度') && this.queryParams.indicatorList.length === 0) {
|
||
this.$message.warning('纵坐标为浓度时，监测指标不能为空')
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
// 趋势图
|
||
drawTrend() {
|
||
if (!this.validParams()) {
|
||
return
|
||
}
|
||
getTrendChart(this.queryParams).then(res => {
|
||
console.log('res', res);
|
||
if (res.data.code == 0) {
|
||
this.trendData = res.data.data;
|
||
this.initChart();
|
||
} else {
|
||
this.$message.error(res.data.msg);
|
||
}
|
||
});
|
||
},
|
||
initChart() {
|
||
this.trendData.yAxis[0].axisLabel = {
|
||
formatter: function(value) {
|
||
return value.toFixed(1);
|
||
}
|
||
};
|
||
if (trendChart != null && trendChart != '' && trendChart != undefined) {
|
||
trendChart.dispose(); // 销毁
|
||
}
|
||
trendChart = echarts.init(document.getElementById('chartColumn'));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {
|
||
show: true
|
||
}
|
||
}
|
||
},
|
||
legend: this.trendData.legend,
|
||
xAxis: this.trendData.xAxis,
|
||
yAxis: this.trendData.yAxis,
|
||
series: this.trendData.series
|
||
};
|
||
trendChart.on('legendselectchanged', obj => {
|
||
console.log('obj', obj);
|
||
let index;
|
||
if (this.queryParams.xco === '年度') {
|
||
index = this.queryParams.areaList.indexOf(obj.name);
|
||
if (index > -1) {
|
||
this.queryParams.areaList.splice(index, 1);
|
||
} else {
|
||
index = this.queryParams.placeList.indexOf(obj.name);
|
||
index > -1 && this.queryParams.placeList.splice(index, 1);
|
||
}
|
||
} else {
|
||
index = this.queryParams.yearList.indexOf(obj.name.substring(0, obj.name.length - 1));
|
||
index > -1 && this.queryParams.yearList.splice(index, 1);
|
||
}
|
||
this.drawTrend();
|
||
});
|
||
//添加一个新的刻度线 实现折线在柱状图的中间显示
|
||
option.xAxis[1] = {
|
||
type: 'value',
|
||
max: option.xAxis[0].data.length,
|
||
show: false
|
||
};
|
||
|
||
let lineArray = option.series.filter(item => item.type === 'line');
|
||
lineArray.forEach((item, index) => {
|
||
item.xAxisIndex = 1;
|
||
item.lineStyle = {
|
||
type: 'dashed'
|
||
};
|
||
item.data = item.data.map((x, i) => [i + (1 / (option.legend.data.length + 1)) * (index + 1), x]);
|
||
});
|
||
console.log('option', option);
|
||
trendChart.setOption(option);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.mb-20 {
|
||
margin-bottom: 20px;
|
||
}
|
||
</style>
|