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

src/views/atmosphere/air/trend/index.vue

@@ -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: [],
+        ycoList: ['ch'],
-        indicatorList: [] // 监测指标
+        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) {