功能区相关代码完成

src/views/sound/function/trend/index.vue

@@ -12,8 +12,7 @@
         </a-col>
         <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-form-item label="季度:">
-                <a-select v-model:value="queryParams.quarter" allowClear>
-                    <a-select-option v-for="(item) in quarterOptions" :key="item.value">{{ item.label }}</a-select-option>
+              <a-select mode="multiple" v-model:value="queryParams.quarterList" @change="handleQuarterChange" :options="quarterOptions" placeholder="请选择季度:">
               </a-select>
             </a-form-item>
         </a-col>
@@ -24,12 +23,12 @@
           </a-select>
         </a-form-item>
         </a-col>
-        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <!-- <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-col>
+        </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="请选择测点名称">
@@ -43,6 +42,12 @@
             </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.functionType" :options="functionTypeOptions" 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="请选择横坐标">
@@ -80,11 +85,13 @@
     data() {
       return {
         queryParams: {
-          yearList: ["2020", "2021"],
-          areaList: ['南宁市'],
-          placeList: [],
+          yearList: ["2021"],
+          areaList: [],
+          placeList: ['广西大学'], // 测点名称
+          quarterList: [], // 季度
           regionLevel: '市级', // 区域等级
           xco: '年度' ,// 横坐标
+          functionType: '全部', // 功能区类别
           timeSlot: '昼'
         },
         trendData: [],
@@ -93,6 +100,7 @@
         placeOptions: [],
         areaOptions: [],
         yearOptions: [],
+        functionTypeOptions: [],
         quarterOptions: [
           { label: "第一季度", value: 1 },
           { label: "第二季度", value: 2 },
@@ -146,6 +154,15 @@
             };
           });
         });
+        getColumnOptions("function_type").then((res) => {
+            this.functionTypeOptions = res.data.data.map((item) => {
+                return {
+                    label: item + '类',
+                    value: item,
+                };
+            });
+            this.functionTypeOptions.unshift({label: '全部', value: '全部'})
+        });
         this.getArea()
         this.getPlace('市级')
       },
@@ -197,8 +214,29 @@
           this.getPlace(value)
         }
       },
+      handleQuarterChange(value) {
+        console.log(`selected ${value}`);
+        this.queryParams.xco = '季度'
+      },
       // 趋势图
       drawTrend() {
+        if (this.queryParams.quarterList.length > 0 && this.queryParams.xco === '年度') {
+          this.$message.warning('选择季度时, 横坐标不能年度')
+          return
+        }
+        if (this.queryParams.quarterList.length == 0 && this.queryParams.xco === '季度') {
+          this.$message.warning('横坐标为季度时, 季度至少选择一个')
+          return
+        }
+        if (this.queryParams.yearList.length == 0 && this.queryParams.xco === '年度') {
+          this.$message.warning('横坐标为年度时, 年度至少选择一个')
+          return
+        }
+        if (this.queryParams.yearList.length > 1 && this.queryParams.xco === '季度') {
+          this.$message.warning('横坐标为季度时, 不能选择多个年度')
+          return
+        }
+
         getTrendChart(this.queryParams).then( res => {
           console.log('res', res);
           if (res.data.code == 0) {