296 lines
10 KiB
Vue
296 lines
10 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" 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="handleMonthChange" v-model:value="queryParams.monthList" :options="monthOptions" 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 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.placeList" :options="placeOptions" 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="handleCategoryChange" v-model:value="queryParams.categoryList" :options="categoryOptions" 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 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, getPlaceOptions, getColumnOptions, getTrendChart } from '@/api/ecology/atmosphere/acid';
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
queryParams: {
|
||
yearList: ['2020', '2021'],
|
||
monthList: [],
|
||
placeList: ['所有测点'],
|
||
regionLevel: '市级', // 区域等级
|
||
xco: '年度', // 横坐标
|
||
ycoList: ['ph'],
|
||
categoryList: ['酸雨PH'] // 项目类别
|
||
},
|
||
trendData: [],
|
||
regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
|
||
placeOptions: [],
|
||
yearOptions: [],
|
||
categoryOptions: [
|
||
{ label: '酸雨PH', value: '酸雨PH' },
|
||
{ label: '降水PH', value: '降水PH' },
|
||
{ label: '酸雨频率（%)', value: '酸雨频率' },
|
||
],
|
||
monthOptions: [
|
||
{
|
||
label: '全部',
|
||
value: '全部'
|
||
}
|
||
],
|
||
xOptions: [
|
||
{ label: '年度', value: '年度' },
|
||
{ label: '年月', value: '年月' },
|
||
{ label: '测点名称', value: '测点名称' }
|
||
],
|
||
yOptions: [
|
||
{ label: 'PH值(无量纲)', value: 'ph' },
|
||
{ label: '酸雨频率（%）', value: 'rate' },
|
||
]
|
||
};
|
||
},
|
||
mounted() {
|
||
this.loadOptionData();
|
||
this.drawTrend();
|
||
},
|
||
methods: {
|
||
// 下拉列表
|
||
loadOptionData() {
|
||
getYearOptions().then(res => {
|
||
this.yearOptions = res.data.data.map(item => {
|
||
return {
|
||
label: item,
|
||
value: item
|
||
};
|
||
});
|
||
});
|
||
getColumnOptions("region_level").then((res) => {
|
||
this.regionLevelOptions = res.data.data.map((item) => {
|
||
return {
|
||
label: item,
|
||
value: item,
|
||
};
|
||
});
|
||
});
|
||
this.getPlaceOptions('市级')
|
||
for (let i = 1; i <= 12; i++) {
|
||
this.monthOptions.push({ label: i + '月', value: i });
|
||
}
|
||
},
|
||
// 获取区域测点名称
|
||
getPlaceOptions(regionLevel) {
|
||
getPlaceOptions(regionLevel).then(res => {
|
||
this.placeOptions = res.data.data.map(item => {
|
||
return {
|
||
label: item,
|
||
value: item
|
||
};
|
||
});
|
||
this.placeOptions.unshift({ label: '所有测点', value: '所有测点' });
|
||
});
|
||
},
|
||
handleRegionLevelChange(value) {
|
||
if (value) {
|
||
this.getPlaceOptions(value)
|
||
}
|
||
},
|
||
handleMonthChange(value) {
|
||
if (value.includes('全部')) {
|
||
this.queryParams.monthList = [1,2,3,4,5,6,7,8,9,10,11,12]
|
||
}
|
||
},
|
||
// 纵坐标变化
|
||
handleYcoChange(value) {
|
||
if (value.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
|
||
this.queryParams.categoryList.push('酸雨频率')
|
||
}
|
||
if (!value.includes('rate') && this.queryParams.categoryList.includes('酸雨频率')) {
|
||
let index = this.queryParams.categoryList.indexOf('酸雨频率')
|
||
this.queryParams.categoryList.splice(index, 1)
|
||
}
|
||
},
|
||
// 项目类别变化
|
||
handleCategoryChange(value) {
|
||
if (value.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
|
||
this.queryParams.ycoList.push('rate')
|
||
}
|
||
if (!value.includes('酸雨频率') && this.queryParams.ycoList.includes('rate')) {
|
||
let index = this.queryParams.ycoList.indexOf('rate')
|
||
this.queryParams.ycoList.splice(index, 1)
|
||
}
|
||
if ((value.includes('酸雨PH') || value.includes('降水PH')) && !this.queryParams.ycoList.includes('ph')) {
|
||
this.queryParams.ycoList.push('ph')
|
||
}
|
||
if (!value.includes('酸雨PH') && !value.includes('降水PH') && this.queryParams.ycoList.includes('ph')) {
|
||
let index = this.queryParams.ycoList.indexOf('ph')
|
||
this.queryParams.ycoList.splice(index, 1)
|
||
}
|
||
},
|
||
validParams() {
|
||
console.log("params", this.queryParams);
|
||
if (this.queryParams.yearList.length === 0) {
|
||
this.$message.warning('年度不能为空')
|
||
return false
|
||
}
|
||
if (!this.queryParams.regionLevel) {
|
||
this.$message.warning('区域等级不能为空')
|
||
return false
|
||
}
|
||
if (this.queryParams.placeList.length === 0) {
|
||
this.$message.warning('测点名称不能为空')
|
||
return false
|
||
}
|
||
if (this.queryParams.categoryList.length === 0) {
|
||
this.$message.warning('项目类别不能为空')
|
||
return false
|
||
}
|
||
if (!this.queryParams.xco) {
|
||
this.$message.warning('横坐标不能为空')
|
||
return false
|
||
}
|
||
if (!this.queryParams.ycoList.length === 0) {
|
||
this.$message.warning('纵坐标不能为空')
|
||
return false
|
||
}
|
||
if (this.queryParams.xco === '年月' && this.queryParams.monthList.length === 0) {
|
||
this.$message.warning('横坐标为年月时，月份选择不能为空')
|
||
return false
|
||
}
|
||
if (this.queryParams.ycoList.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
|
||
this.$message.warning('纵坐标选择酸雨频率时，项目类别也应选择酸雨频率')
|
||
return false
|
||
}
|
||
if (this.queryParams.categoryList.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
|
||
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
|
||
};
|
||
let barArray = option.series.filter(item => item.type === 'bar')
|
||
if (barArray && barArray.length <= 6) {
|
||
barArray.forEach(item => {
|
||
item.barWidth = 80
|
||
if (barArray.length === 1) {
|
||
item.itemStyle = { color: '#9fe080' }
|
||
}
|
||
})
|
||
}
|
||
let lineArray = option.series.filter(item => item.type === 'line');
|
||
lineArray.forEach((item, index) => {
|
||
console.log("item", item);
|
||
item.lineStyle = {
|
||
type: 'dashed',
|
||
};
|
||
if (lineArray.length === 2) {
|
||
if (index === 0) {
|
||
item.lineStyle.color = '#e8cd6a'
|
||
} else {
|
||
item.lineStyle.color = '#5c7bd9'
|
||
}
|
||
}
|
||
if (index === 0) {
|
||
item.label.offset = [20,30]
|
||
}
|
||
});
|
||
console.log('option', option);
|
||
trendChart.setOption(option);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.mb-20 {
|
||
margin-bottom: 20px;
|
||
}
|
||
</style>
|