gxwebsoft/jczxw-java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

环境空气代码提交

Browse Source
This commit is contained in:
hey7845
2022-01-12 16:48:42 +08:00
parent bed8b17091
commit 2ff5176a3b
4 changed files with 269 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

473
src/views/atmosphere/air/trend/index.vue
View File

@@ -1,284 +1,271 @@
<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-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-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.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-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-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" v-model:value="queryParams.indicatorList" :options="indicatorOptions" placeholder="请选择监测指标">
</a-select>
<a-select mode="multiple" 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-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" v-model:value="queryParams.ycoList" :options="yOptions" allowClear placeholder="请选择纵坐标">
</a-select>
<a-select mode="multiple" 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-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>
<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 {
getColumnOptions,
getTrendChart,
getPlaceByRegionLevel
} from "@/api/ecology/atmosphere/air";
import {
getDictData,
} from "@/api/ecology/dict";
export default {
components: {},
data() {
return {
queryParams: {
yearList: ["2020", "2021"],
areaList: ['南宁市'],
placeList: [],
regionLevel: 'city', // 区域等级
xco: '年度' ,// 横坐标
ycoList: [],
indicatorList: [] // 监测指标
},
trendData: [],
regionLevelOptions: [
{label: "市区", value: "city"},
{label: "城区", value: "area"},
{label: "县区", value: "county"},
{label: "站点", value: "place"},
],
placeOptions: [],
areaOptions: [],
yearOptions: [],
indicatorOptions: [],
monthOptions: [
{
label: '全部',
value: '全部',
}
],
xOptions: [
{
label: '年度',
value: '年度',
},
{
label: '年月',
value: '年月',
},
{
label: '区域/测点名称',
value: '区域/测点名称',
}
],
yOptions: [
]
};
},
mounted() {
this.loadOptionData();
this.drawTrend()
},
methods: {
// 下拉列表
loadOptionData() {
getColumnOptions("monitor_year").then((res) => {
this.yearOptions = res.data.data.map((item) => {
return {
label: item,
value: item,
};
});
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'],
areaList: ['南宁市'],
placeList: [],
regionLevel: '市级', // 区域等级
xco: '年度', // 横坐标
ycoList: [],
indicatorList: [] // 监测指标
},
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: '区域/测点名称' }
],
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.getPlace('市级')
},
// 区域下拉列表
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: '所有县'})
})
},
// 测点名称下拉列表
getPlace(regionLevel) {
console.log('regionLevel', regionLevel);
getPlaceByRegionLevel(regionLevel).then((res) => {
this.placeOptions = res.data.data.map((item) => {
return {
label: item,
value: item,
};
});
});
},
handleRegionLevelChange(value) {
console.log(`selected ${value}`);
this.queryParams.areaList = []
this.queryParams.placeList = []
if (value == '市级') {
this.getArea()
this.getPlace(value)
} else if (value == '县级') {
this.getCounty()
this.getPlace(value)
}
},
// 趋势图
drawTrend() {
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)
});
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();
}
},
// 趋势图
drawTrend() {
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;
}
.mb-20 {
margin-bottom: 20px;
}
</style>