酸雨环境空气相关代码提交

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

@@ -23,7 +23,7 @@
         </a-col>
         <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="项目类别:">
-            <a-select mode="multiple" v-model:value="queryParams.categoryList" :options="categoryOptions" placeholder="请选择项目类别"></a-select>
+            <a-select mode="multiple" @change="handleCategoryChange" 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">
@@ -135,9 +135,29 @@ export default {
     },
     // 纵坐标变化
     handleYcoChange(value) {
-      if (value.length > 2) {
-        this.$message.warning('纵坐标最多只能选择两个')
-        this.queryParams.ycoList.splice(this.queryParams.ycoList.length - 1)
+      if (value.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
+        this.queryParams.categoryList.push('酸雨频率')
+      }
+      if (!value.includes('rate') && this.queryParams.categoryList.includes('酸雨频率')) {
+        let index = this.queryParams.categoryList.indexOf('酸雨频率')
+        this.queryParams.categoryList.splice(index, 1)
+      }
+    },
+    // 项目类别变化
+    handleCategoryChange(value) {
+      if (value.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
+        this.queryParams.ycoList.push('rate')
+      }
+      if (!value.includes('酸雨频率') && this.queryParams.ycoList.includes('rate')) {
+        let index = this.queryParams.ycoList.indexOf('rate')
+        this.queryParams.ycoList.splice(index, 1)
+      }
+      if ((value.includes('酸雨PH') || value.includes('降水PH')) && !this.queryParams.ycoList.includes('ph')) {
+        this.queryParams.ycoList.push('ph')
+      }
+      if (!value.includes('酸雨PH') && !value.includes('降水PH') && this.queryParams.ycoList.includes('ph')) {
+        let index = this.queryParams.ycoList.indexOf('ph')
+        this.queryParams.ycoList.splice(index, 1)
       }
     },
     validParams() {
@@ -166,6 +186,18 @@ export default {
         this.$message.warning('纵坐标不能为空')
         return false
       }
+      if (this.queryParams.xco === '年月' && this.queryParams.monthList.length === 0) {
+        this.$message.warning('横坐标为年月时，月份选择不能为空')
+        return false
+      }
+      if (this.queryParams.ycoList.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
+        this.$message.warning('纵坐标选择酸雨频率时，项目类别也应选择酸雨频率')
+        return false
+      }
+      if (this.queryParams.categoryList.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
+        this.$message.warning('项目类别选择酸雨频率时，纵坐标也应选择酸雨频率')
+        return false
+      }
       return true
     },
     // 趋势图
@@ -184,11 +216,11 @@ export default {
       });
     },
     initChart() {
-      this.trendData.yAxis[0].axisLabel = {
-        formatter: function(value) {
-          return value.toFixed(1);
-        }
-      };
+      // this.trendData.yAxis[0].axisLabel = {
+      //   formatter: function(value) {
+      //     return value.toFixed(1);
+      //   }
+      // };
       if (trendChart != null && trendChart != '' && trendChart != undefined) {
         trendChart.dispose(); // 销毁
       }
@@ -216,19 +248,22 @@ export default {
         series: this.trendData.series
       };
       //添加一个新的刻度线 实现折线在柱状图的中间显示
-      option.xAxis[1] = {
-        type: 'value',
-        max: option.xAxis[0].data.length,
-        show: false
-      };
+      // 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.xAxisIndex = 1;
         item.lineStyle = {
           type: 'dashed'
         };
-        item.data = item.data.map((x, i) => [i + (1 / (option.legend.data.length + 1)) * (index + 1), x]);
+        if (index === 0) {
+          item.label.offset = [20,30]
+        }
+        // item.data = item.data.map((x, i) => [i + (1 / (option.legend.data.length + 1)) * (index + 1), x]);
       });
       console.log('option', option);
       trendChart.setOption(option);

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

@@ -130,15 +130,18 @@ export default {
     },
     // 区域下拉列表
     getArea() {
-      getDictData({ dictName: '城区行政区划代码' }).then(res => {
-        this.areaOptions = res.data.data.map(item => {
-          return {
-            label: item.dictDataName,
-            value: item.dictDataName
-          };
-        });
-        this.areaOptions.unshift({ label: '南宁市', value: '南宁市' });
-      });
+      this.areaOptions = [
+        { label: '邕宁区', value: '邕宁区' },
+        { label: '青秀区', value: '青秀区' },
+        { label: '五象新区', value: '五象新区' },
+        { label: '高新区', value: '高新区' },
+        { label: '良庆区', value: '良庆区' },
+        { label: '经开区', value: '东盟经开区' },
+        { label: '江南区', value: '江南区' },
+        { label: '西乡塘区', value: '西乡塘区' },
+        { label: '兴宁区', value: '兴宁区' },
+        { label: '南宁', value: '南宁市' }
+      ]
     },
     // 县级
     getCounty() {
@@ -283,6 +286,12 @@ export default {
           return value.toFixed(1);
         }
       };
+      this.trendData.yAxis && this.trendData.yAxis.forEach(item=>{
+        console.log("item", item);
+        if (item.name === '浓度') {
+          item.name = '浓度 单位：微克/立方米（一氧化碳：毫克/立方米）'
+        }
+      })
       if (trendChart != null && trendChart != '' && trendChart != undefined) {
         trendChart.dispose(); // 销毁
       }