酸雨代码暂存

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

@@ -1,313 +1,243 @@
 <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>
-        </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-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.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-form-item label="项目类别:">
+            <a-select mode="multiple" v-model:value="queryParams.categoryList" :options="categoryOptions" 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" @change="handleYcoChange" 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/acid";
-  import {
-    getDictData,
-  } from "@/api/ecology/dict";
-  export default {
-    components: {},
-    data() {
-      return {
-        queryParams: {
-          yearList: ["2020", "2021"],
-          monthList: [],
-          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: [
-          {
-            label: '达标天数',
-            value: '达标天数',
-          },
-          {
-            label: '达标率',
-            value: '达标率',
-          },
-          {
-            label: '浓度',
-            value: '浓度',
-          },
-          {
-            label: '首要污染天数',
-            value: '首要污染天数',
-          },
-          {
-            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,
-            };
-          });
+import * as echarts from 'echarts';
+let trendChart;
+import { getYearOptions, getPlaceOptions, getColumnOptions, getTrendChart } from '@/api/ecology/atmosphere/acid';
+export default {
+  components: {},
+  data() {
+    return {
+      queryParams: {
+        yearList: ['2020', '2021'],
+        monthList: [],
+        placeList: ['所有测点'],
+        regionLevel: '市级', // 区域等级
+        xco: '年度', // 横坐标
+        ycoList: ['ph'],
+        categoryList: ['酸雨PH'] // 项目类别
+      },
+      trendData: [],
+      regionLevelOptions: [{ label: '市级', value: '市级' }, { label: '县级', value: '县级' }],
+      placeOptions: [],
+      yearOptions: [],
+      categoryOptions: [
+        { label: '酸雨PH', value: '酸雨PH' },
+        { label: '降水PH', value: '降水PH' },
+        { label: '酸雨频率（%)', value: '酸雨频率' },
+      ],
+      monthOptions: [
+        {
+          label: '全部',
+          value: '全部'
+        }
+      ],
+      xOptions: [
+        { label: '年度', value: '年度' },
+        { label: '年月', value: '年月' },
+        { label: '测点名称', value: '测点名称' }
+      ],
+      yOptions: [
+        { label: 'PH值(无量纲)', value: 'ph' },
+        { label: '酸雨频率（%）', value: 'rate' },
+      ]
+    };
+  },
+  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,
-            };
-          });
+      });
+      getColumnOptions("region_level").then((res) => {
+        this.regionLevelOptions = 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)
+      });
+      this.getPlaceOptions('市级')
+      for (let i = 1; i <= 12; i++) {
+        this.monthOptions.push({ label: i + '月', value: i });
       }
-    }
+    },
+    // 获取区域测点名称
+    getPlaceOptions(regionLevel) {
+      getPlaceOptions(regionLevel).then(res => {
+        this.placeOptions = res.data.data.map(item => {
+          return {
+            label: item,
+            value: item
+          };
+        });
+        this.placeOptions.unshift({ label: '所有测点', value: '所有测点' });
+      });
+    },
+    handleRegionLevelChange(value) {
+      if (value) {
+        this.getPlaceOptions(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.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
+      };
+      //添加一个新的刻度线 实现折线在柱状图的中间显示
+      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>