diff --git a/src/views/atmosphere/air/trend/index.vue b/src/views/atmosphere/air/trend/index.vue index 5498474..766cc58 100644 --- a/src/views/atmosphere/air/trend/index.vue +++ b/src/views/atmosphere/air/trend/index.vue @@ -26,7 +26,7 @@ - + @@ -34,7 +34,7 @@ - + @@ -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) {