区域噪声统计

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

@@ -83,7 +83,7 @@
           areaList: ['南宁市'],
           placeList: [],
           regionLevel: '市级', // 区域等级
-          xco: '区域/测点名称' // 横坐标
+          xco: '年度' // 横坐标
         },
         trendData: [],
         regionLevelOptions: [],
@@ -126,6 +126,7 @@
           });
         });
         this.getArea()
+        this.getPlace('市级')
       },
       // 区域下拉列表
       getArea() {

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

@@ -4,7 +4,7 @@
     <a-form :model="queryParams" :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
       :wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
       <a-row>
-        <a-col :lg="4" :md="8" :sm="24" :xs="24">
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="开始年度">
             <a-select v-model:value="queryParams.startYear" allowClear showSearch>
               <a-select-option v-for="item in yearOptions" :key="item.value">
@@ -13,7 +13,7 @@
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :lg="4" :md="8" :sm="24" :xs="24">
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="结束年度">
             <a-select v-model:value="queryParams.endYear" allowClear showSearch>
               <a-select-option v-for="item in yearOptions" :key="item.value">
@@ -22,21 +22,41 @@
             </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" :options="areaOptions" @change="handleAreaChange" placeholder="城区">
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
+        <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="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 :lg="4" :md="8" :sm="24" :xs="24">
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="测点名称:">
-            <a-select mode="multiple" :options="placeOptions" @change="handlePlaceChange" placeholder="测点名称">
+            <a-select mode="multiple" v-model:value="queryParams.placeList" :options="placeOptions" 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.timeSlot" allowClear>
+              <a-select-option v-for="(item) in timeSlotOptions" :key="item.value">{{ item.label }}</a-select-option>
+            </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="请选择横坐标">
             </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :lg="4" :md="8" :sm="24" :xs="24">
+        <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-space>
             <a-button type="primary" class="mb-20" @click="drawTrend">开始统计</a-button>
           </a-space>
@@ -51,11 +71,15 @@
 
 <script>
   import * as echarts from 'echarts'
-  import { markRaw } from 'vue'
+  let trendChart;
   import {
     getColumnOptions,
-    getTrendChart
+    getTrendChart,
+    getPlaceByRegionLevel
   } from "@/api/ecology/noise/zone-sound";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
   export default {
     components: {},
     data() {
@@ -63,14 +87,28 @@
         queryParams: {
           startYear: 2020,
           endYear: 2021,
-          areaList: ['兴宁区','西乡塘区'],
-          placeList: []
+          areaList: ['南宁市'],
+          placeList: [],
+          regionLevel: '市级', // 区域等级
+          xco: '年度' ,// 横坐标
+          timeSlot: '昼'
         },
         trendData: [],
-        chartColumn: null,
+        regionLevelOptions: [],
+        timeSlotOptions: [],
         placeOptions: [],
         areaOptions: [],
-        yearOptions: []
+        yearOptions: [],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ]
       };
     },
     mounted() {
@@ -78,30 +116,8 @@
       this.drawTrend()
     },
     methods: {
-      handleAreaChange(value) {
-        this.queryParams.areaList = Object.values(value)
-      },
-      handlePlaceChange(value) {
-        this.queryParams.placeList = Object.values(value)
-      },
       // 下拉列表
       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,
-            };
-          });
-        });
         getColumnOptions("monitor_year").then((res) => {
           this.yearOptions = res.data.data.map((item) => {
             return {
@@ -110,6 +126,73 @@
             };
           });
         });
+        getColumnOptions("region_level").then((res) => {
+          this.regionLevelOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        getColumnOptions("time_slot").then((res) => {
+          this.timeSlotOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        this.getArea()
+        this.getPlace('市级')
+      },
+      // 区域下拉列表
+      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() {
@@ -124,9 +207,14 @@
         })
       },
       initChart() {
-        echarts.init(document.getElementById("chartColumn")).dispose();
-        this.chartColumn = markRaw(echarts.init(document.getElementById('chartColumn')))
-        this.chartColumn.setOption({
+        this.trendData.yAxis[0].axisLabel = {
+          formatter: function (value) { return value.toFixed(1);},
+        }
+        if (trendChart != null && trendChart != "" && trendChart != undefined) {
+            trendChart.dispose();// 销毁
+        }
+        trendChart = echarts.init(document.getElementById('chartColumn'))
+        let option = {
           tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -147,7 +235,8 @@
           xAxis: this.trendData.xAxis,
           yAxis: this.trendData.yAxis,
           series: this.trendData.series
-        })
+        }
+        trendChart.setOption(option)
       }
     }