酸雨代码暂存

src/api/ecology/atmosphere/acid.js

@@ -60,9 +60,12 @@ const getColumnOptions = function(column){
 const getPlaceGis = function(data){
     return axios.get("/acidRain/acidRain/gis/place",{params:data})
 }
+const getPlaceOptions = (regionLevel) => axios.get("/acidRain/acidRain/placeOptions", {params:{regionLevel}})
+
 const getTrendChart = function(data){
     return axios.post("/acidRain/acidRain/trend/chart",data)
 }
+const getYearOptions = () => axios.get("/acidRain/acidRain/yearOptions")
 const getPlaceByRegionLevel = function(column){
     return axios.get("/acidRain/acidRain/place/region",{params:{column}})
 }
@@ -90,6 +93,8 @@ export {
     statisticIon,
     statisticCounty,
     getPlaceGis,
+    getYearOptions,
+    getPlaceOptions,
     getTrendChart,
     getPlaceByRegionLevel
 }

src/views/atmosphere/acid-rain/trend/index.vue

@@ -1,250 +1,198 @@
 <template>
   <div class="ele-body">
     <!-- 搜索表单 -->
-    <a-form :model="queryParams" :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
+    <a-form :model="queryParams" :label-col="{ md: { span: 6 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
-      :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-form-item label="年度:"><a-select mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度"></a-select></a-form-item>
-            <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-form-item label="月份:"><a-select mode="multiple" v-model:value="queryParams.monthList" :options="monthOptions" placeholder="请选择月份"></a-select></a-form-item>
-            <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-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 mode="multiple" v-model:value="queryParams.placeList" :options="placeOptions" placeholder="请选择测点名称"></a-select>
-            </a-select>
           </a-form-item>
         </a-col>
         <a-col :lg="6" :md="12" :sm="24" :xs="24">
-          <a-form-item label="监测指标:">
+          <a-form-item label="项目类别:">
-            <a-select mode="multiple" v-model:value="queryParams.indicatorList" :options="indicatorOptions" placeholder="请选择监测指标">
+            <a-select mode="multiple" v-model:value="queryParams.categoryList" :options="categoryOptions" placeholder="请选择项目类别"></a-select>
-            </a-select>
           </a-form-item>
         </a-col>
         <a-col :lg="6" :md="12" :sm="24" :xs="24">
-          <a-form-item label="横坐标:">
+          <a-form-item label="横坐标:"><a-select v-model:value="queryParams.xco" :options="xOptions" allowClear placeholder="请选择横坐标"></a-select></a-form-item>
-            <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 mode="multiple" @change="handleYcoChange" v-model:value="queryParams.ycoList" :options="yOptions" allowClear placeholder="请选择纵坐标"></a-select>
-            </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :lg="6" :md="12" :sm="24" :xs="24">
-          <a-space>
+          <a-space><a-button type="primary" class="mb-20" @click="drawTrend">开始统计</a-button></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">
+    <a-card :bordered="false"><div id="chartColumn" style="width: 100%; height: 500px;"></div></a-card>
-      <div id="chartColumn" style="width: 100%; height: 500px;"></div>
-    </a-card>
   </div>
 </template>
 
 <script>
-  import * as echarts from 'echarts'
+import * as echarts from 'echarts';
 let trendChart;
-  import {
+import { getYearOptions, getPlaceOptions, getColumnOptions, getTrendChart } from '@/api/ecology/atmosphere/acid';
-    getColumnOptions,
-    getTrendChart,
-    getPlaceByRegionLevel
-  } from "@/api/ecology/atmosphere/acid";
-  import {
-    getDictData,
-  } from "@/api/ecology/dict";
 export default {
   components: {},
   data() {
     return {
       queryParams: {
-          yearList: ["2020", "2021"],
+        yearList: ['2020', '2021'],
         monthList: [],
-          areaList: ['南宁市'],
+        placeList: ['所有测点'],
-          placeList: [],
         regionLevel: '市级', // 区域等级
         xco: '年度', // 横坐标
-          ycoList: [],
+        ycoList: ['ph'],
-          indicatorList: [] // 监测指标
+        categoryList: ['酸雨PH'] // 项目类别
       },
       trendData: [],
-        regionLevelOptions: [
+      regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
-            {label: "市区", value: "city"},
-            {label: "城区", value: "area"},
-            {label: "县区", value: "county"},
-            {label: "站点", value: "place"},
-        ],
       placeOptions: [],
-        areaOptions: [],
       yearOptions: [],
-        indicatorOptions: [],
+      categoryOptions: [
+        { label: '酸雨PH', value: '酸雨PH' },
+        { label: '降水PH', value: '降水PH' },
+        { label: '酸雨频率（%)', value: '酸雨频率' },
+      ],
       monthOptions: [
         {
           label: '全部',
-            value: '全部',
+          value: '全部'
         }
       ],
       xOptions: [
-          {
+        { label: '年度', value: '年度' },
-            label: '年度',
+        { label: '年月', value: '年月' },
-            value: '年度',
+        { label: '测点名称', value: '测点名称' }
-          },
-          {
-            label: '年月',
-            value: '年月',
-          },
-          {
-            label: '区域/测点名称',
-            value: '区域/测点名称',
-          }
       ],
       yOptions: [
-          {
+        { label: 'PH值(无量纲)', value: 'ph' },
-            label: '达标天数',
+        { label: '酸雨频率（%）', value: 'rate' },
-            value: '达标天数',
-          },
-          {
-            label: '达标率',
-            value: '达标率',
-          },
-          {
-            label: '浓度',
-            value: '浓度',
-          },
-          {
-            label: '首要污染天数',
-            value: '首要污染天数',
-          },
-          {
-            label: '空气质量指数',
-            value: '空气质量指数',
-          },
-          {
-            label: '优良率',
-            value: '优良率',
-          },
-          {
-            label: '多项首要污染物天数',
-            value: '多项首要污染物天数',
-          },
       ]
     };
   },
   mounted() {
     this.loadOptionData();
-      this.drawTrend()
+    this.drawTrend();
   },
   methods: {
     // 下拉列表
     loadOptionData() {
-        getColumnOptions("monitor_year").then((res) => {
+      getYearOptions().then(res => {
-          this.yearOptions = res.data.data.map((item) => {
+        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,
           };
         });
       });
+      this.getPlaceOptions('市级')
       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('市级')
     },
-      // 区域下拉列表
+    // 获取区域测点名称
-      getArea() {
+    getPlaceOptions(regionLevel) {
-        getDictData({dictName:'城区行政区划代码'}).then(res=>{
+      getPlaceOptions(regionLevel).then(res => {
-          this.areaOptions = res.data.data.map((item) => {
+        this.placeOptions = 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,
+            value: item
           };
         });
+        this.placeOptions.unshift({ label: '所有测点', value: '所有测点' });
       });
     },
     handleRegionLevelChange(value) {
-        console.log(`selected ${value}`);
+      if (value) {
-        this.queryParams.areaList = []
+        this.getPlaceOptions(value)
-        this.queryParams.placeList = []
-        if (value == '市级') {
-          this.getArea()
-          this.getPlace(value)
-        } else if (value == '县级') {
-          this.getCounty()
-          this.getPlace(value)
       }
     },
+    // 纵坐标变化
+    handleYcoChange(value) {
+      if (value.length > 2) {
+        this.$message.warning('纵坐标最多只能选择两个')
+        this.queryParams.ycoList.splice(this.queryParams.ycoList.length - 1)
+      }
+    },
+    validParams() {
+      console.log("params", this.queryParams);
+      if (this.queryParams.yearList.length === 0) {
+        this.$message.warning('年度不能为空')
+        return false
+      }
+      if (!this.queryParams.regionLevel) {
+        this.$message.warning('区域等级不能为空')
+        return false
+      }
+      if (this.queryParams.placeList.length === 0) {
+        this.$message.warning('测点名称不能为空')
+        return false
+      }
+      if (this.queryParams.categoryList.length === 0) {
+        this.$message.warning('项目类别不能为空')
+        return false
+      }
+      if (!this.queryParams.xco) {
+        this.$message.warning('横坐标不能为空')
+        return false
+      }
+      if (!this.queryParams.ycoList.length === 0) {
+        this.$message.warning('纵坐标不能为空')
+        return false
+      }
+      return true
+    },
     // 趋势图
     drawTrend() {
+      if (!this.validParams()) {
+        return
+      }
       getTrendChart(this.queryParams).then(res => {
         console.log('res', res);
         if (res.data.code == 0) {
-            this.trendData = res.data.data
+          this.trendData = res.data.data;
-            this.initChart()
+          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) {
+      };
+      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',
@@ -266,45 +214,27 @@
         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')
+      let lineArray = option.series.filter(item => item.type === 'line');
       lineArray.forEach((item, index) => {
-          item.xAxisIndex = 1
+        item.xAxisIndex = 1;
         item.lineStyle = {
-            type: 'dashed',
+          type: 'dashed'
-          }
+        };
-          item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
+        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 {