环境空气代码提交

.env.development

@@ -1 +1 @@
-VUE_APP_API_BASE_URL=http://1.14.132.108:10002/api
+VUE_APP_API_BASE_URL=http://localhost:10001/api

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
 }

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: '多项首要污染物天数',
+          },
         ]
       };
     },

src/views/atmosphere/air/trend/index.vue

@@ -1,221 +1,209 @@
 <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-select>
-          </a-form-item>
+          <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-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-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 {
+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"],
+        yearList: ['2020', '2021'],
         areaList: ['南宁市'],
         placeList: [],
-          regionLevel: 'city', // 区域等级
-          xco: '年度' ,// 横坐标
+        regionLevel: '市级', // 区域等级
+        xco: '年度', // 横坐标
         ycoList: [],
         indicatorList: [] // 监测指标
       },
       trendData: [],
-        regionLevelOptions: [
-            {label: "市区", value: "city"},
-            {label: "城区", value: "area"},
-            {label: "县区", value: "county"},
-            {label: "站点", value: "place"},
-        ],
+      regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
       placeOptions: [],
       areaOptions: [],
       yearOptions: [],
-        indicatorOptions: [],
+      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: '全部',
+          value: '全部'
         }
       ],
       xOptions: [
-          {
-            label: '年度',
-            value: '年度',
-          },
-          {
-            label: '年月',
-            value: '年月',
-          },
-          {
-            label: '区域/测点名称',
-            value: '区域/测点名称',
-          }
+        { 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()
+    this.drawTrend();
   },
   methods: {
     // 下拉列表
     loadOptionData() {
-        getColumnOptions("monitor_year").then((res) => {
-          this.yearOptions = res.data.data.map((item) => {
+      getYearOptions().then(res => {
+        this.yearOptions = res.data.data.map(item => {
           return {
             label: item,
-              value: item,
+            value: item
           };
         });
       });
       for (let i = 1; i <= 12; i++) {
-          this.monthOptions.push({label: i + "月", value: i })
+        this.monthOptions.push({ label: i + '月', value: i });
       }
-        this.getArea()
-        this.getPlace('市级')
+      this.getArea();
+      this.getCityPlace();
     },
     // 区域下拉列表
     getArea() {
-        getDictData({dictName:'城区行政区划代码'}).then(res=>{
-          this.areaOptions = res.data.data.map((item) => {
+      getDictData({ dictName: '城区行政区划代码' }).then(res => {
+        this.areaOptions = res.data.data.map(item => {
           return {
             label: item.dictDataName,
-              value: item.dictDataName,
+            value: item.dictDataName
           };
         });
-          this.areaOptions.unshift({ label: '南宁市', value: '南宁市'})
-        })
+        this.areaOptions.unshift({ label: '南宁市', value: '南宁市' });
+      });
     },
     // 县级
     getCounty() {
-        getDictData({dictName:'县行政区划代码'}).then(res=>{
-          this.areaOptions = res.data.data.map((item) => {
+      getDictData({ dictName: '县行政区划代码' }).then(res => {
+        this.areaOptions = res.data.data.map(item => {
           return {
             label: item.dictDataName,
-              value: item.dictDataName,
+            value: item.dictDataName
           };
         });
-          this.areaOptions.unshift({ label: '所有县', value: '所有县'})
-        })
+        this.areaOptions.unshift({ label: '所有县', value: '所有县' });
+      });
     },
-      // 测点名称下拉列表
-      getPlace(regionLevel) {
-        console.log('regionLevel', regionLevel);
-        getPlaceByRegionLevel(regionLevel).then((res) => {
-          this.placeOptions = res.data.data.map((item) => {
+    // 县级测点名称下拉列表
+    getCountryPlace() {
+      getCountryPlace().then(res => {
+        this.placeOptions = res.data.data.map(item => {
           return {
             label: item,
-              value: item,
+            value: item
+          };
+        });
+      });
+    },
+    // 县级测点名称下拉列表
+    getCityPlace() {
+      getCityPlace().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 = []
+      this.queryParams.areaList = [];
+      this.queryParams.placeList = [];
       if (value == '市级') {
-          this.getArea()
-          this.getPlace(value)
+        this.getArea();
+        this.getCityPlace();
       } else if (value == '县级') {
-          this.getCounty()
-          this.getPlace(value)
+        this.getCounty();
+        this.getCountryPlace();
       }
     },
     // 趋势图
     drawTrend() {
-        getTrendChart(this.queryParams).then( res => {
+      getTrendChart(this.queryParams).then(res => {
         console.log('res', res);
         if (res.data.code == 0) {
-            this.trendData = res.data.data
-            this.initChart()
+          this.trendData = res.data.data;
+          this.initChart();
         } else {
-            this.$message.error(res.data.msg)
+          this.$message.error(res.data.msg);
         }
-        })
+      });
     },
     initChart() {
       this.trendData.yAxis[0].axisLabel = {
-          formatter: function (value) { return value.toFixed(1);},
+        formatter: function(value) {
+          return value.toFixed(1);
         }
-        if (trendChart != null && trendChart != "" && trendChart != undefined) {
-            trendChart.dispose();// 销毁
+      };
+      if (trendChart != null && trendChart != '' && trendChart != undefined) {
+        trendChart.dispose(); // 销毁
       }
-        trendChart = echarts.init(document.getElementById('chartColumn'))
+      trendChart = echarts.init(document.getElementById('chartColumn'));
       let option = {
         tooltip: {
           trigger: 'axis',
@@ -237,48 +225,47 @@
         xAxis: this.trendData.xAxis,
         yAxis: this.trendData.yAxis,
         series: this.trendData.series
-        }
-        trendChart.on("legendselectchanged", obj => {
+      };
+      trendChart.on('legendselectchanged', obj => {
         console.log('obj', obj);
-          let index
+        let index;
         if (this.queryParams.xco === '年度') {
-            index = this.queryParams.areaList.indexOf(obj.name)
+          index = this.queryParams.areaList.indexOf(obj.name);
           if (index > -1) {
-              this.queryParams.areaList.splice(index, 1)
+            this.queryParams.areaList.splice(index, 1);
           } else {
-              index = this.queryParams.placeList.indexOf(obj.name)
-              index > -1 && this.queryParams.placeList.splice(index, 1)
+            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)
+          index = this.queryParams.yearList.indexOf(obj.name.substring(0, obj.name.length - 1));
+          index > -1 && this.queryParams.yearList.splice(index, 1);
         }
-          this.drawTrend()
+        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
+      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])
-        })
+          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)
+      trendChart.setOption(option);
     }
   }
-
-  }
+};
 </script>
 <style scoped lang="less">
-  .mb-20 {
+.mb-20 {
   margin-bottom: 20px;
-  }
+}
 </style>