From 8acd6e1018f9bc1bb8f536e4453c252a7f6517d9 Mon Sep 17 00:00:00 2001
From: hey7845 <hey78450496@163.com>
Date: Wed, 29 Dec 2021 12:22:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8C=BA=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ecology/noise/function-sound.js  |  15 +-
 src/api/ecology/noise/zone-sound.js      |   2 +-
 src/views/sound/function/trend/index.vue | 266 +++++++++++++++++++++++
 3 files changed, 280 insertions(+), 3 deletions(-)
 create mode 100644 src/views/sound/function/trend/index.vue

diff --git a/src/api/ecology/noise/function-sound.js b/src/api/ecology/noise/function-sound.js
index 5dce8ae..7bf8716 100644
--- a/src/api/ecology/noise/function-sound.js
+++ b/src/api/ecology/noise/function-sound.js
@@ -65,6 +65,15 @@ const getColumnOptions = function(column){
 const getPlaceGis = function(data){
     return axios.get("/sound/function/noise/gis/place",{params:data})
 }
+
+const getPlaceByRegionLevel = function(column){
+    return axios.get("/sound/function/noise/place/region",{params:{column}})
+}
+
+const getTrendChart = function(data){
+    return axios.post("/sound/function/noise/trend/chart",data)
+}
+
 export {
     pageBillUrl,
     saveFunctionNoiseBill,
@@ -84,6 +93,8 @@ export {
     getPlaceGis,
     listAllFunctionNoiseUrl,
     listAllFunctionNoise,
-    pageFunctionNoiseStatisticAvgUrl
-  
+    pageFunctionNoiseStatisticAvgUrl,
+    getPlaceByRegionLevel,
+    getTrendChart
+
 }
diff --git a/src/api/ecology/noise/zone-sound.js b/src/api/ecology/noise/zone-sound.js
index f70ac94..c637f6a 100644
--- a/src/api/ecology/noise/zone-sound.js
+++ b/src/api/ecology/noise/zone-sound.js
@@ -70,7 +70,7 @@ 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}})
+    return axios.get("/sound/zone/noise/place/region",{params:{column}})
 }
 export {
     pageBillUrl,
diff --git a/src/views/sound/function/trend/index.vue b/src/views/sound/function/trend/index.vue
new file mode 100644
index 0000000..abf1b1f
--- /dev/null
+++ b/src/views/sound/function/trend/index.vue
@@ -0,0 +1,266 @@
+<template>
+  <div class="ele-body">
+    <!-- 搜索表单 -->
+    <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="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">
+                {{ 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.endYear" allowClear showSearch>
+              <a-select-option v-for="item in yearOptions" :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.quarter" allowClear>
+                    <a-select-option v-for="(item) in quarterOptions" :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.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="6" :md="12" :sm="24" :xs="24">
+          <a-form-item label="测点名称:">
+            <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="6" :md="12" :sm="24" :xs="24">
+          <a-space>
+            <a-button type="primary" class="mb-20" @click="drawTrend">开始统计</a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+    </a-form>
+    <a-card :bordered="false">
+      <div id="chartColumn" style="width: 100%; height: 500px;"></div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  let trendChart;
+  import {
+    getColumnOptions,
+    getTrendChart,
+    getPlaceByRegionLevel
+  } from "@/api/ecology/noise/function-sound";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          startYear: 2020,
+          endYear: 2021,
+          areaList: ['南宁市'],
+          placeList: [],
+          regionLevel: '市级', // 区域等级
+          xco: '年度' ,// 横坐标
+          timeSlot: '昼'
+        },
+        trendData: [],
+        regionLevelOptions: [],
+        timeSlotOptions: [],
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: [],
+        quarterOptions: [
+          { label: "第一季度", value: 1 },
+          { label: "第二季度", value: 2 },
+          { label: "第三季度", value: 3 },
+          { label: "第四季度", value: 4 },
+        ],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '季度',
+            value: '季度',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ]
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      this.drawTrend()
+    },
+    methods: {
+      // 下拉列表
+      loadOptionData() {
+        getColumnOptions("monitor_year").then((res) => {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        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() {
+        getTrendChart(this.queryParams).then( res => {
+          console.log('res', res);
+          if (res.data.code == 0) {
+            this.trendData = res.data.data
+            this.initChart()
+          } else {
+            this.$message.error(res.data.msg)
+          }
+        })
+      },
+      initChart() {
+        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: {
+              type: 'cross',
+              crossStyle: {
+                color: '#999'
+              }
+            }
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {
+                show: true
+              }
+            }
+          },
+          legend: this.trendData.legend,
+          xAxis: this.trendData.xAxis,
+          yAxis: this.trendData.yAxis,
+          series: this.trendData.series
+        }
+        trendChart.setOption(option)
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>