From 3f5b39200472ac689e75085c3d6e73578658ccc3 Mon Sep 17 00:00:00 2001
From: hey7845 <hey78450496@163.com>
Date: Thu, 6 Jan 2022 14:09:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A9=BA=E6=B0=94=E7=9B=B8=E5=85=B3=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ecology/atmosphere/acid.js            |  10 +-
 src/api/ecology/atmosphere/air.js             |  11 +-
 .../atmosphere/acid-rain/trend/index.vue      | 284 ++++++++++++++++++
 src/views/atmosphere/air/trend/index.vue      | 284 ++++++++++++++++++
 4 files changed, 586 insertions(+), 3 deletions(-)
 create mode 100644 src/views/atmosphere/acid-rain/trend/index.vue
 create mode 100644 src/views/atmosphere/air/trend/index.vue

diff --git a/src/api/ecology/atmosphere/acid.js b/src/api/ecology/atmosphere/acid.js
index 4431ffa..0d40941 100644
--- a/src/api/ecology/atmosphere/acid.js
+++ b/src/api/ecology/atmosphere/acid.js
@@ -60,6 +60,12 @@ const getColumnOptions = function(column){
 const getPlaceGis = function(data){
     return axios.get("/acidRain/acidRain/gis/place",{params:data})
 }
+const getTrendChart = function(data){
+    return axios.post("/acidRain/acidRain/trend/chart",data)
+}
+const getPlaceByRegionLevel = function(column){
+    return axios.get("/acidRain/acidRain/place/region",{params:{column}})
+}
 const statisticCity = "/acidRain/acidRain/statistic/city"
 const statisticCounty = "/acidRain/acidRain/statistic/county"
 const statisticIon = "/acidRain/acidRain/statistic/ion"
@@ -83,5 +89,7 @@ export {
     statisticCity,
     statisticIon,
     statisticCounty,
-    getPlaceGis
+    getPlaceGis,
+    getTrendChart,
+    getPlaceByRegionLevel
 }
diff --git a/src/api/ecology/atmosphere/air.js b/src/api/ecology/atmosphere/air.js
index a0c0e9a..703a0a4 100644
--- a/src/api/ecology/atmosphere/air.js
+++ b/src/api/ecology/atmosphere/air.js
@@ -71,6 +71,12 @@ const statisticArea = "/ambientAir/ambientAir/statistic/area";
 const getPlaceGis = function(data){
     return axios.get("/ambientAir/ambientAir/gis/place",{params:data})
 }
+const getTrendChart = function(data){
+    return axios.post("/ambientAir/ambientAir/trend/chart",data)
+}
+const getPlaceByRegionLevel = function(column){
+    return axios.get("/ambientAir/ambientAir/place/region",{params:{column}})
+}
 // 排行
 const airDayRankUrl = "/zhenQiWang/ambientAirZhenqiCityDayAqiRankData";
 const airMonthRankUrl = "/zhenQiWang/ambientAirZhenqiCityMonthComprehensiveAqiRankData/page";
@@ -105,6 +111,7 @@ export {
     airPm25YearRankUrl,
     airYearProvincialCapitalRankUrl,
     airPm25YearProvincialCapitalRankUrl,
-    airMonthProvincialCapitalRankUrl
-  
+    airMonthProvincialCapitalRankUrl,
+    getTrendChart,
+    getPlaceByRegionLevel
 }
diff --git a/src/views/atmosphere/acid-rain/trend/index.vue b/src/views/atmosphere/acid-rain/trend/index.vue
new file mode 100644
index 0000000..2b609f3
--- /dev/null
+++ b/src/views/atmosphere/acid-rain/trend/index.vue
@@ -0,0 +1,284 @@
+<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 mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" 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.monthList" :options="monthOptions" 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.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 mode="multiple" v-model:value="queryParams.indicatorList" :options="indicatorOptions" 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="请选择横坐标">
+            </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.ycoList" :options="yOptions" 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/atmosphere/acid";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          yearList: ["2020", "2021"],
+          areaList: ['南宁市'],
+          placeList: [],
+          regionLevel: '市级', // 区域等级
+          xco: '年度' ,// 横坐标
+          ycoList: [],
+          indicatorList: [] // 监测指标
+        },
+        trendData: [],
+        regionLevelOptions: [
+            {label: "市区", value: "city"},
+            {label: "城区", value: "area"},
+            {label: "县区", value: "county"},
+            {label: "站点", value: "place"},
+        ],
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: [],
+        indicatorOptions: [],
+        monthOptions: [
+          {
+            label: '全部',
+            value: '全部',
+          }
+        ],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '年月',
+            value: '年月',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ],
+        yOptions: [
+        ]
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      this.drawTrend()
+    },
+    methods: {
+      // 下拉列表
+      loadOptionData() {
+        getColumnOptions("monitor_year").then((res) => {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        for (let i = 1; i <= 12; i++) {
+          this.monthOptions.push({label: i + "月", value: i })
+        }
+        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,
+            };
+          });
+        });
+      },
+      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.on("legendselectchanged", obj => {
+          console.log('obj', obj);
+          let index
+          if (this.queryParams.xco === '年度') {
+            index = this.queryParams.areaList.indexOf(obj.name)
+            if (index > -1) {
+              this.queryParams.areaList.splice(index, 1)
+            } else {
+              index = this.queryParams.placeList.indexOf(obj.name)
+              index > -1 && this.queryParams.placeList.splice(index, 1)
+            }
+          } else {
+            index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1))
+            index > -1 && this.queryParams.yearList.splice(index, 1)
+          }
+          this.drawTrend()
+        });
+        //添加一个新的刻度线 实现折线在柱状图的中间显示
+        option.xAxis[1] = {
+          type: 'value',
+          max: option.xAxis[0].data.length,
+          show: false
+        }
+
+        let lineArray = option.series.filter(item => item.type === 'line')
+        lineArray.forEach((item,index) => {
+          item.xAxisIndex = 1
+          item.lineStyle = {
+            type: 'dashed',
+          }
+          item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
+        })
+        console.log('option', option);
+        trendChart.setOption(option)
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>
diff --git a/src/views/atmosphere/air/trend/index.vue b/src/views/atmosphere/air/trend/index.vue
new file mode 100644
index 0000000..ec4fe26
--- /dev/null
+++ b/src/views/atmosphere/air/trend/index.vue
@@ -0,0 +1,284 @@
+<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 mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" 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.monthList" :options="monthOptions" 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.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 mode="multiple" v-model:value="queryParams.indicatorList" :options="indicatorOptions" 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="请选择横坐标">
+            </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.ycoList" :options="yOptions" 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/atmosphere/air";
+  import {
+    getDictData,
+  } from "@/api/ecology/dict";
+  export default {
+    components: {},
+    data() {
+      return {
+        queryParams: {
+          yearList: ["2020", "2021"],
+          areaList: ['南宁市'],
+          placeList: [],
+          regionLevel: 'city', // 区域等级
+          xco: '年度' ,// 横坐标
+          ycoList: [],
+          indicatorList: [] // 监测指标
+        },
+        trendData: [],
+        regionLevelOptions: [
+            {label: "市区", value: "city"},
+            {label: "城区", value: "area"},
+            {label: "县区", value: "county"},
+            {label: "站点", value: "place"},
+        ],
+        placeOptions: [],
+        areaOptions: [],
+        yearOptions: [],
+        indicatorOptions: [],
+        monthOptions: [
+          {
+            label: '全部',
+            value: '全部',
+          }
+        ],
+        xOptions: [
+          {
+            label: '年度',
+            value: '年度',
+          },
+          {
+            label: '年月',
+            value: '年月',
+          },
+          {
+            label: '区域/测点名称',
+            value: '区域/测点名称',
+          }
+        ],
+        yOptions: [
+        ]
+      };
+    },
+    mounted() {
+      this.loadOptionData();
+      this.drawTrend()
+    },
+    methods: {
+      // 下拉列表
+      loadOptionData() {
+        getColumnOptions("monitor_year").then((res) => {
+          this.yearOptions = res.data.data.map((item) => {
+            return {
+              label: item,
+              value: item,
+            };
+          });
+        });
+        for (let i = 1; i <= 12; i++) {
+          this.monthOptions.push({label: i + "月", value: i })
+        }
+        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,
+            };
+          });
+        });
+      },
+      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.on("legendselectchanged", obj => {
+          console.log('obj', obj);
+          let index
+          if (this.queryParams.xco === '年度') {
+            index = this.queryParams.areaList.indexOf(obj.name)
+            if (index > -1) {
+              this.queryParams.areaList.splice(index, 1)
+            } else {
+              index = this.queryParams.placeList.indexOf(obj.name)
+              index > -1 && this.queryParams.placeList.splice(index, 1)
+            }
+          } else {
+            index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1))
+            index > -1 && this.queryParams.yearList.splice(index, 1)
+          }
+          this.drawTrend()
+        });
+        //添加一个新的刻度线 实现折线在柱状图的中间显示
+        option.xAxis[1] = {
+          type: 'value',
+          max: option.xAxis[0].data.length,
+          show: false
+        }
+
+        let lineArray = option.series.filter(item => item.type === 'line')
+        lineArray.forEach((item,index) => {
+          item.xAxisIndex = 1
+          item.lineStyle = {
+            type: 'dashed',
+          }
+          item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
+        })
+        console.log('option', option);
+        trendChart.setOption(option)
+      }
+    }
+
+  }
+</script>
+<style scoped lang="less">
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+</style>