趋势图变更

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

@@ -23,14 +23,27 @@
           </a-form-item>
         </a-col>
         <a-col :lg="4" :md="8" :sm="24" :xs="24">
-          <a-form-item label="城区:">
-            <a-select mode="multiple" :default-value="['南宁']" v-model:value="queryParams.areaList" :options="areaOptions" placeholder="城区">
+        <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="4" :md="8" :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 :lg="4" :md="8" :sm="24" :xs="24">
           <a-form-item label="测点名称:">
-            <a-select mode="multiple" v-model:value="queryParams.placeList" :options="placeOptions" placeholder="测点名称">
+            <a-select mode="multiple" v-model:value="queryParams.placeList" :options="placeOptions" placeholder="请选择测点名称">
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="4" :md="8" :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>
@@ -54,8 +67,12 @@
   import { markRaw } from 'vue'
   import {
     getColumnOptions,
-    getTrendChart
+    getTrendChart,
+    getPlaceByRegionLevel
   } from "@/api/ecology/noise/road-sound";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
   export default {
     components: {},
     data() {
@@ -63,14 +80,27 @@
         queryParams: {
           startYear: 2020,
           endYear: 2021,
-          areaList: [],
-          placeList: []
+          areaList: ['南宁'],
+          placeList: [],
+          regionLevel: '市级', // 区域等级
+          xco: '年度' // 横坐标
         },
         trendData: [],
         chartColumn: null,
+        regionLevelOptions: [],
         placeOptions: [],
         areaOptions: [],
-        yearOptions: []
+        yearOptions: [],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ]
       };
     },
     mounted() {
@@ -80,23 +110,6 @@
     methods: {
       // 下拉列表
       loadOptionData() {
-        getColumnOptions("place").then((res) => {
-          this.placeOptions = res.data.data.map((item) => {
-            return {
-              label: item,
-              value: item,
-            };
-          });
-        });
-        getColumnOptions("area").then((res) => {
-          this.areaOptions = res.data.data.map((item) => {
-            return {
-              label: item,
-              value: item,
-            };
-          });
-          this.areaOptions.unshift({ label: '南宁市', value: '南宁'})
-        });
         getColumnOptions("monitor_year").then((res) => {
           this.yearOptions = res.data.data.map((item) => {
             return {
@@ -105,6 +118,64 @@
             };
           });
         });
+        getColumnOptions("region_level").then((res) => {
+          this.regionLevelOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        this.getArea()
+      },
+      // 区域下拉列表
+      getArea() {
+        getDictData({dictName:'城区行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '南宁市', value: '南宁市'})
+        })
+      },
+      // 县级
+      getCounty() {
+        getDictData({dictName:'县行政区划代码'}).then(res=>{
+          this.areaOptions = res.data.data.map((item) => {
+            return {
+              label: item.dictDataName,
+              value: item.dictDataName,
+            };
+          });
+          this.areaOptions.unshift({ label: '所有县', value: '所有县'})
+        })
+      },
+      // 测点名称下拉列表
+      getPlace(regionLevel) {
+        console.log('regionLevel', regionLevel);
+        getPlaceByRegionLevel(regionLevel).then((res) => {
+          this.placeOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+          // this.placeOptions.unshift({ label: '所有测点', value: '所有测点'})
+        });
+      },
+      handleRegionLevelChange(value) {
+        console.log(`selected ${value}`);
+        this.queryParams.areaList = []
+        this.queryParams.placeList = []
+        if (value == '市级') {
+          this.getArea()
+          this.getPlace(value)
+        } else if (value == '县级') {
+          this.getCounty()
+          this.getPlace(value)
+        }
       },
       // 趋势图
       drawTrend() {
@@ -119,10 +190,22 @@
         })
       },
       initChart() {
+        // const colors = ['#5470C6', '#91CC75', '#EE6666'];
         this.trendData.yAxis[0].axisLabel = {
-          formatter: function (value) { return value.toFixed(1);}
-        };
-        echarts.init(document.getElementById("chartColumn")).dispose();
+          formatter: function (value) { return value.toFixed(1);},
+        }
+        // this.trendData.yAxis[0].axisLine = {
+        //   show: true,
+        //   lineStyle: {
+        //     color: colors[0]
+        //   }
+        // }
+        // this.trendData.yAxis[1].axisLine = {
+        //   show: true,
+        //   lineStyle: {
+        //     color: colors[1]
+        //   }
+        // }
         this.chartColumn = markRaw(echarts.init(document.getElementById('chartColumn')))
         this.chartColumn.setOption({
           tooltip: {