环境趋势图基础代码完成,待详细测试

This commit is contained in:
art_station
2022-01-17 11:05:33 +08:00
parent 7bb3f32af0
commit baed413622

View File

@@ -26,7 +26,7 @@
</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" @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">
@@ -34,7 +34,7 @@
</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" @change="handleYcoChange" v-model:value="queryParams.ycoList" :options="yOptions" allowClear placeholder="请选择纵坐标"></a-select>
</a-form-item>
</a-col>
</a-row>
@@ -59,12 +59,13 @@ export default {
return {
queryParams: {
yearList: ['2020', '2021'],
monthList: [],
areaList: ['南宁市'],
placeList: [],
regionLevel: '市级', // 区域等级
xco: '年度', // 横坐标
ycoList: [],
indicatorList: [] // 监测指标
ycoList: ['ch'],
indicatorList: ['so2', 'no2'] // 监测指标
},
trendData: [],
regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
@@ -91,7 +92,9 @@ export default {
xOptions: [
{ label: '年度', value: '年度' },
{ label: '年月', value: '年月' },
{ label: '区域/测点名称', value: '区域/测点名称' }
{ label: '区域', value: '区域' },
{ label: '测点名称', value: '测点名称' },
{ label: '监测指标', value: '监测指标' }
],
yOptions: [
{ label: '达标天数(天)', value: 'days' },
@@ -182,8 +185,80 @@ export default {
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 === 0) {
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) {