From 92951056128bc3608fd4fbaf6ef3c04b0e1a4008 Mon Sep 17 00:00:00 2001
From: hey7845 <hey78450496@163.com>
Date: Tue, 28 Dec 2021 18:11:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=99=AA=E5=A3=B0=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ecology/noise/zone-sound.js  |   8 +-
 src/views/sound/road/trend/index.vue |   3 +-
 src/views/sound/zone/trend/index.vue | 169 ++++++++++++++++++++-------
 3 files changed, 137 insertions(+), 43 deletions(-)

diff --git a/src/api/ecology/noise/zone-sound.js b/src/api/ecology/noise/zone-sound.js
index 3364a15..f70ac94 100644
--- a/src/api/ecology/noise/zone-sound.js
+++ b/src/api/ecology/noise/zone-sound.js
@@ -69,6 +69,9 @@ const getPlaceGis = function(data){
 const getTrendChart = function(data){
     return axios.post("/sound/zone/noise/trend/chart",data)
 }
+const getPlaceByRegionLevel = function(column){
+    return axios.get("/sound/road/noise/place/region",{params:{column}})
+}
 export {
     pageBillUrl,
     saveZoneNoiseBill,
@@ -90,6 +93,7 @@ export {
     listALlZoneNoise,
     statisticLevelDistributionUrl,
     getPlaceGis,
-    getTrendChart
-  
+    getTrendChart,
+    getPlaceByRegionLevel
+
 }
diff --git a/src/views/sound/road/trend/index.vue b/src/views/sound/road/trend/index.vue
index f798655..7193b84 100644
--- a/src/views/sound/road/trend/index.vue
+++ b/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() {
diff --git a/src/views/sound/zone/trend/index.vue b/src/views/sound/zone/trend/index.vue
index e334fcb..86d2d78 100644
--- a/src/views/sound/zone/trend/index.vue
+++ b/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)
       }
     }