From 2ff5176a3b6a94e4c86d8c219cce996dd69012ed Mon Sep 17 00:00:00 2001
From: hey7845 <hey78450496@163.com>
Date: Wed, 12 Jan 2022 16:48:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8E=AF=E5=A2=83=E7=A9=BA=E6=B0=94=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

---
 .env.development                              |   2 +-
 src/api/ecology/atmosphere/air.js             |  12 +-
 .../atmosphere/acid-rain/trend/index.vue      |  29 ++
 src/views/atmosphere/air/trend/index.vue      | 473 +++++++++---------
 4 files changed, 269 insertions(+), 247 deletions(-)

diff --git a/.env.development b/.env.development
index ece64a9..f1ec8de 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-VUE_APP_API_BASE_URL=http://1.14.132.108:10002/api
\ No newline at end of file
+VUE_APP_API_BASE_URL=http://localhost:10001/api
\ No newline at end of file
diff --git a/src/api/ecology/atmosphere/air.js b/src/api/ecology/atmosphere/air.js
index 703a0a4..4e040b1 100644
--- a/src/api/ecology/atmosphere/air.js
+++ b/src/api/ecology/atmosphere/air.js
@@ -71,11 +71,15 @@ const statisticArea = "/ambientAir/ambientAir/statistic/area";
 const getPlaceGis = function(data){
     return axios.get("/ambientAir/ambientAir/gis/place",{params:data})
 }
+const getYearOptions = () => axios.get("/ambientAir/ambientAir/yearOptions")
 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 getCityPlace = function(column){
+    return axios.get("/ambientAir/airPlaceBasicInfoDict/place/city",{params:{column}})
+}
+const getCountryPlace = function(column){
+    return axios.get("/ambientAir/airPlaceBasicInfoDict/place/country",{params:{column}})
 }
 // 排行
 const airDayRankUrl = "/zhenQiWang/ambientAirZhenqiCityDayAqiRankData";
@@ -112,6 +116,8 @@ export {
     airYearProvincialCapitalRankUrl,
     airPm25YearProvincialCapitalRankUrl,
     airMonthProvincialCapitalRankUrl,
+    getYearOptions,
     getTrendChart,
-    getPlaceByRegionLevel
+    getCityPlace,
+    getCountryPlace
 }
diff --git a/src/views/atmosphere/acid-rain/trend/index.vue b/src/views/atmosphere/acid-rain/trend/index.vue
index 2b609f3..ad25f0b 100644
--- a/src/views/atmosphere/acid-rain/trend/index.vue
+++ b/src/views/atmosphere/acid-rain/trend/index.vue
@@ -85,6 +85,7 @@
       return {
         queryParams: {
           yearList: ["2020", "2021"],
+          monthList: [],
           areaList: ['南宁市'],
           placeList: [],
           regionLevel: '市级', // 区域等级
@@ -124,6 +125,34 @@
           }
         ],
         yOptions: [
+          {
+            label: '达标天数',
+            value: '达标天数',
+          },
+          {
+            label: '达标率',
+            value: '达标率',
+          },
+          {
+            label: '浓度',
+            value: '浓度',
+          },
+          {
+            label: '首要污染天数',
+            value: '首要污染天数',
+          },
+          {
+            label: '空气质量指数',
+            value: '空气质量指数',
+          },
+          {
+            label: '优良率',
+            value: '优良率',
+          },
+          {
+            label: '多项首要污染物天数',
+            value: '多项首要污染物天数',
+          },
         ]
       };
     },
diff --git a/src/views/atmosphere/air/trend/index.vue b/src/views/atmosphere/air/trend/index.vue
index ec4fe26..5498474 100644
--- a/src/views/atmosphere/air/trend/index.vue
+++ b/src/views/atmosphere/air/trend/index.vue
@@ -1,284 +1,271 @@
 <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-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-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.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-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-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-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-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-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-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>
+    <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,
-            };
-          });
+import * as echarts from 'echarts';
+let trendChart;
+import { getYearOptions, getTrendChart, getCityPlace, getCountryPlace } from '@/api/ecology/atmosphere/air';
+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: '市级' }, { label: '县级', value: '县级' }],
+      placeOptions: [],
+      areaOptions: [],
+      yearOptions: [],
+      indicatorOptions: [
+        { label: '二氧化硫浓度/(μg/m3)', value: 'so2' },
+        { label: '二氧化氮浓度/(μg/m3)', value: 'no2' },
+        { label: '可吸入颗粒物浓度/(μg/m3)', value: 'pm10' },
+        { label: '一氧化碳 浓度/(mg/m3)', value: 'co' },
+        { label: 'O3（O3）最大8小时滑动平均浓度/(μg/m3)', value: 'o3' },
+        { label: '细颗粒物浓度/(μg/m3)', value: 'pm25' },
+        { label: '空气质量指数AQI', value: 'aqi' },
+        { label: '首要污染天数', value: 'main' },
+        { label: '多项首要污染物天数', value: 'multi' }
+      ],
+      monthOptions: [
+        {
+          label: '全部',
+          value: '全部'
+        }
+      ],
+      xOptions: [
+        { label: '年度', value: '年度' },
+        { label: '年月', value: '年月' },
+        { label: '区域/测点名称', value: '区域/测点名称' }
+      ],
+      yOptions: [
+        { label: '达标天数（天）', value: 'days' },
+        { label: '达标率（%）', value: 'rate' },
+        { label: '浓度', value: 'ch' },
+        { label: '首要污染物天数', value: 'main' },
+        { label: '空气质量指数', value: 'aqi' },
+        { label: '优良率', value: 'abRate' },
+        { label: '多项首要污染物天数', value: 'multi' },
+      ]
+    };
+  },
+  mounted() {
+    this.loadOptionData();
+    this.drawTrend();
+  },
+  methods: {
+    // 下拉列表
+    loadOptionData() {
+      getYearOptions().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)
+      });
+      for (let i = 1; i <= 12; i++) {
+        this.monthOptions.push({ label: i + '月', value: i });
       }
-    }
+      this.getArea();
+      this.getCityPlace();
+    },
+    // 区域下拉列表
+    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: '所有县' });
+      });
+    },
+    // 县级测点名称下拉列表
+    getCountryPlace() {
+      getCountryPlace().then(res => {
+        this.placeOptions = res.data.data.map(item => {
+          return {
+            label: item,
+            value: item
+          };
+        });
+      });
+    },
+    // 县级测点名称下拉列表
+    getCityPlace() {
+      getCityPlace().then(res => {
+        this.placeOptions = res.data.data.map(item => {
+          return {
+            label: item,
+            value: item
+          };
+        });
+      });
+    },
+    handleRegionLevelChange(value) {
+      this.queryParams.areaList = [];
+      this.queryParams.placeList = [];
+      if (value == '市级') {
+        this.getArea();
+        this.getCityPlace();
+      } else if (value == '县级') {
+        this.getCounty();
+        this.getCountryPlace();
+      }
+    },
+    // 趋势图
+    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;
-  }
+.mb-20 {
+  margin-bottom: 20px;
+}
 </style>