大气gis右上角统计

2022-02-03 15:37:12 +08:00
parent 98248a8415
commit 535ef79624
7 changed files with 529 additions and 457 deletions
--- a/src/api/ecology/atmosphere/air.js
+++ b/src/api/ecology/atmosphere/air.js
@@ -81,6 +81,10 @@ const getCityPlace = function(column){
 const getCountryPlace = function(column){
    return axios.get("/ambientAir/ambientAir/place/country",{params:{column}})
 }
+
+const statisticAll = function(params){
+  return axios.get("/ambientAir/ambientAir/statisticAll",{params})
+}
 // 排行
 const airDayRankUrl = "/zhenQiWang/ambientAirZhenqiCityDayAqiRankData";
 const airMonthRankUrl = "/zhenQiWang/ambientAirZhenqiCityMonthComprehensiveAqiRankData/page";
@@ -137,4 +141,5 @@ export {
  getMonthNewData,
  getYearNewData,
  getPmNewData,
+  statisticAll
 }
--- a/src/views/sound/zone/dict/leq-level.vue
+++ b/src/views/sound/zone/dict/leq-level.vue
@@ -16,11 +16,24 @@
                </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 v-model:value="where.timeSlot" allow-clear show-search>
+                <a-select-option
+                  v-for="(item) in timeSlotOptions"
+                  :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-space>
              <a-button type="primary" @click="reload">查询</a-button>
-                            <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
+              <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
+              </a-button>
            </a-space>
          </a-col>
        </a-row>
@@ -43,7 +56,7 @@
          :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
        >
          <a-form-item label="新年份" name="nYear">
-                        <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
+            <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050"/>
          </a-form-item>
        </a-form>
      </a-modal>
@@ -63,13 +76,13 @@
          :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
        >
          <a-form-item label="年份" name="year">
-                        <a-input-number  v-model:value="form.year" :min="1970" :max="2050" />
+            <a-input-number v-model:value="form.year" :min="1970" :max="2050"/>
          </a-form-item>
          <a-form-item label="最小值" name="minLeq">
-                        <a-input-number @change="minLeqChange" :step=".1" :precision="1" v-model:value="form.minLeq"  />
+            <a-input-number @change="minLeqChange" :step=".1" :precision="1" v-model:value="form.minLeq"/>
          </a-form-item>
          <a-form-item label="最大值" name="maxLeq">
-                        <a-input-number :step=".1" :precision="1" v-model:value="form.maxLeq"  />
+            <a-input-number :step=".1" :precision="1" v-model:value="form.maxLeq"/>
          </a-form-item>
          <a-form-item label="时段" name="timeSlot">
            <a-select v-model:value="form.timeSlot">
@@ -93,7 +106,7 @@
            />
          </a-form-item>
          <a-form-item label="排序" name="sortNumber">
-                        <a-input-number :step="1" :precision="0" v-model:value="form.sortNumber"  />
+            <a-input-number :step="1" :precision="0" v-model:value="form.sortNumber"/>
          </a-form-item>
        </a-form>
      </a-modal>
@@ -148,7 +161,8 @@
              type="primary"
              shape="round"
              size="small"
-                        >修改</a-button
+            >修改
+            </a-button
            >
            <a-popconfirm
              :title="`确认删除这条数据吗?`"
@@ -157,7 +171,8 @@
              @confirm="remove(record)"
            >
              <a-button type="primary" danger shape="round" size="small"
-                            >删除</a-button
+              >删除
+              </a-button
              >
            </a-popconfirm>
          </a-space>
@@ -179,7 +194,7 @@ import {
  copyBatchLeqLevel,
  getColumnOptions
 } from "@/api/ecology/noise/zone-noise-leq-level";
-import { message } from 'ant-design-vue';
+import {message} from 'ant-design-vue';
 import {DownOutlined} from '@ant-design/icons-vue';
 import XLSX from "xlsx";
 // import moment from "moment";
@@ -210,15 +225,15 @@ export default {
        {
          title: "最小值",
          dataIndex: "minLeq",
-                    customRender: ({text})=>{
-                        return text!=undefined? text.toFixed(1):undefined
+          customRender: ({text}) => {
+            return text != undefined ? text.toFixed(1) : undefined
          }
        },
        {
          title: "最大值",
          dataIndex: "maxLeq",
-                    customRender: ({text})=>{
-                        return text!=undefined? text.toFixed(1):undefined
+          customRender: ({text}) => {
+            return text != undefined ? text.toFixed(1) : undefined
          }
        },
        {
@@ -247,20 +262,21 @@ export default {
      selectionList: [],
      // 是否显示编辑弹窗
      showEdit: false,
-            showNYear:false,
+      showNYear: false,
      cYear: undefined,
-            nYear:undefined,
-            yearOptions:[],
+      nYear: undefined,
+      yearOptions: [],
+      timeSlotOptions: [{label: "昼", value: "昼"}, {label: "夜", value: "夜"}],
      // 表单数据
      form: {},
      loading: false,
      rules: {
-                timeSlot:[{required: true,message: '请选择时段'}],
+        timeSlot: [{required: true, message: '请选择时段'}],
        // minLeq: [{required: true,message: '请输入最小值',},],
        // maxLeq: [{required: true,message: '请输入最大值',},],
-                level: [{required: true,message: '请输入等级',},],
+        level: [{required: true, message: '请输入等级',},],
        // evaluate: [{required: true,message: '请输入评价',},],
-                sortNumber: [{required: true,message: '请输入排序',},],
+        sortNumber: [{required: true, message: '请输入排序',},],
      },
    };
  },
@@ -268,7 +284,7 @@ export default {
    this.getOptions()
  },
  methods: {
-        minLeqChange(e){
+    minLeqChange(e) {
      console.log(e)
    },
    /* 刷新表格 */
@@ -294,8 +310,8 @@ export default {
    },
    async save() {
      await this.$refs.form.validate();
-            const {minLeq,maxLeq }  = this.form;
-            if(minLeq == undefined && maxLeq == undefined ){
+      const {minLeq, maxLeq} = this.form;
+      if (minLeq == undefined && maxLeq == undefined) {
        message.error("最小值和最大值请至少填写一项！")
        return;
      }
@@ -372,7 +388,7 @@ export default {
        hide();
      })
    },
-        getOptions(){
+    getOptions() {
      getColumnOptions("year").then(res => {
        console.log(res)
        if (res.data.code == 0) {
@@ -385,13 +401,13 @@ export default {
        }
      })
    },
-        setCYear(e){
+    setCYear(e) {
      this.cYear = e.key;
      this.showNYear = true;
    },
-        copyBatch(){
+    copyBatch() {
      const hide = this.$message.loading('请求中..', 0);
-            copyBatchLeqLevel({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
+      copyBatchLeqLevel({cyear: Number(this.cYear), nyear: this.nYear}).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
@@ -406,8 +422,8 @@ export default {
        hide();
      })
    },
-        exportData(){
-            const columns = this.columns.filter(item=>item.dataIndex);
+    exportData() {
+      const columns = this.columns.filter(item => item.dataIndex);
      const arr = [];
      const th = columns.map((item) => item.title);
      arr.push(th);
--- a/src/views/visualiz/atmosphere/acid/components/mapTableCenter.vue
+++ b/src/views/visualiz/atmosphere/acid/components/mapTableCenter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-700px'}">
    <a-card title="酸雨点位" :headStyle="{'padding':'0px 5px'}"
            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
@@ -11,7 +11,7 @@
        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
             style="width: 30px;height: 30px">
      </div>
-      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:700}" :pagination="false">
      </a-table>
    </a-card>
  </div>
@@ -20,27 +20,14 @@
 <script>

 const columns = [
-  {
-    title: '点位名称',
-    dataIndex: 'place',
-  },
-  {
-    title: '点位等级',
-    className: 'regionLevel',
-    dataIndex: 'regionLevel',
-  },
-  {
-    title: '所属地区',
-    dataIndex: 'area',
-  },
-  {
-    title: '所属路段',
-    dataIndex: 'road',
-  },
-  {
-    title: '噪声 dB(A)',
-    dataIndex: 'leq',
-  },
+  {title: "区域", dataIndex: "place", align: "center"},
+  // {title: "项目", dataIndex: "periodType", align: "center"},
+  {title: "降水样品（个）", dataIndex: "precipitationSampleAcount", align: "center"},
+  {title: "酸雨样品（个）", dataIndex: "acidRainSampleAcount", align: "center"},
+  {title: "最小pH值", dataIndex: "minPh", align: "center"},
+  {title: "最大pH值", dataIndex: "maxPh", align: "center"},
+  {title: "酸雨频率（%）", dataIndex: "acidRainFrequency", align: "center"},
+  {title: "降水pH值（无量纲）", dataIndex: "precipitationPh", align: "center"},
 ];
 export default {
  props: {
@@ -68,10 +55,10 @@ export default {
 <style scoped>
 .map-table-container {
  box-sizing: border-box;
-  width: 500px;
+  width: 700px;
  padding: 10px;
  position: absolute;
-  bottom: 300px;
+  top: 80px;
  transition: right 0.8s;
 }

@@ -85,7 +72,7 @@ export default {
  background-color: #fff;
  position: absolute;
  left: -40px;
-  bottom: 0;
+  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
--- a/src/views/visualiz/atmosphere/acid/index.vue
+++ b/src/views/visualiz/atmosphere/acid/index.vue
@@ -23,13 +23,13 @@
    <div id="map" ref="map" style="overflow: hidden"></div>
    <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
    <!--    <mapNominal :param="nominalList"></mapNominal>-->
-<!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table-center :rowData="statisticData"></map-table-center>
    <map-table :rowData="pointData"></map-table>
  </div>
 </template>
 <script>
 import {
-  getPlaceGis,
+  getPlaceGis, statisticCity, statisticCounty
 } from "@/api/ecology/atmosphere/acid";
 import {
  getColumnOptions,
@@ -38,7 +38,8 @@ import {
 import tipTool from "./components/tipTool";
 // import mapNominal from "./components/mapNominal";
 import mapTable from "./components/mapTable";
-// import mapTableCenter from "./components/mapTableCenter";
+import mapTableCenter from "./components/mapTableCenter";
+import axios from 'axios';

 let scene = null;
 let pointLayer = null;
@@ -49,7 +50,7 @@ export default {
    tipTool,
    // mapNominal,
    mapTable,
-    // mapTableCenter
+    mapTableCenter
  },
  data() {
    return {
@@ -69,6 +70,7 @@ export default {
      nominalList: [],
      points: [],//数据准备
      dataSource: [],
+      statisticData:[],
      value: '',
      result: [],
      searchKey: "",
@@ -203,7 +205,7 @@ export default {
          that.tipData = that.pointData[currentId.substring(2, currentId.length)]
          that.currentX = e.pageX - calcWidth
          that.currentY = e.pageY - 80
-        },true)
+        }, true)

        myCompOverlay.addEventListener('mouseout', function () {
          setTimeout(() => {
@@ -211,7 +213,7 @@ export default {
          that.currentX = 30000
          that.currentY = 0
          that.tipFlag = false
-        },true)
+        }, true)
      })
    },
    whereChange(e) {
@@ -239,6 +241,30 @@ export default {
      if (scene && pointLayer) {
        scene.removeLayer(pointLayer)
      }
+
+      this.statisticData = [];
+      let req;
+      const params = {
+        timeStart: this.where.year + "-01-01 00:00:00",
+        timeEnd: this.where.year + "-12-31 59:59:59"
+      };
+      if (this.where.regionLevel == "市级") {
+        req = axios.post(statisticCity, params)
+
+      } else {
+        req = axios.post(statisticCounty, params)
+      }
+      req.then(res => {
+        if (res.data.code == 0 && res.data.data.length > 0) {
+          const list = [];
+          res.data.data.forEach(item => {
+            const key = Object.keys(item)[0]
+            const fData = item[key].filter(i=>i.periodType === "本年度")
+            list.push(...fData)
+          })
+          this.statisticData = list;
+        }
+      })
      getPlaceGis(this.where).then((res) => {
        that.pointData = []
        that.dataSource = []
--- a/src/views/visualiz/atmosphere/air/components/mapTableCenter.vue
+++ b/src/views/visualiz/atmosphere/air/components/mapTableCenter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-600px'}">
    <a-card title="环境空气点位" :headStyle="{'padding':'0px 5px'}"
            :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
      <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
@@ -11,7 +11,7 @@
        <img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
             style="width: 30px;height: 30px">
      </div>
-      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
+      <a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:600}" :pagination="false">
      </a-table>
    </a-card>
  </div>
@@ -20,27 +20,40 @@
 <script>

 const columns =  [
+  {title: "区域", dataIndex: "place",align:"center"},
  {
-    title: '点位名称',
-    dataIndex: 'place',
+    title: "二氧化硫",
+    dataIndex: "so2Current"
  },
  {
-    title: '点位等级',
-    className: 'regionLevel',
-    dataIndex: 'regionLevel',
+    title: "二氧化氮",
+    dataIndex: "no2Current",
  },
  {
-    title: '所属地区',
-    dataIndex: 'area',
+    title: "可吸入颗粒物",
+    dataIndex: "pm10Current"
  },
  {
-    title: '所属路段',
-    dataIndex: 'road',
+    title: "一氧化碳",
+    dataIndex: "coCurrent"
  },
  {
-    title: '噪声 dB(A)',
-    dataIndex: 'leq',
+    title: "臭氧",
+    dataIndex: "o3Current"
  },
+  {
+    title: "细颗粒物",
+    dataIndex: "pm25Current"
+  },
+  {
+    title: "综合指数",
+    dataIndex: "comprehensiveAirQualityIndexCurrent"
+  },
+  {
+    title: "优良率",
+    dataIndex: "excellentRateCurrent"
+  },
+
 ];
 export default {
  props: {
@@ -68,10 +81,10 @@ export default {
 <style scoped>
 .map-table-container {
  box-sizing: border-box;
-  width: 500px;
+  width: 600px;
  padding: 10px;
  position: absolute;
-  bottom: 300px;
+  top: 80px;
  transition: right 0.8s;
 }

@@ -85,7 +98,7 @@ export default {
  background-color: #fff;
  position: absolute;
  left: -40px;
-  bottom: 0;
+  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
--- a/src/views/visualiz/atmosphere/air/index.vue
+++ b/src/views/visualiz/atmosphere/air/index.vue
@@ -15,7 +15,7 @@
          </a-select-option>
        </a-select>
        <a-radio-group @change="whereChange" name="area" v-model:value="where.regionLevel">
-          <a-radio-button value="place">市级</a-radio-button>
+          <a-radio-button value="city">市级</a-radio-button>
          <a-radio-button value="county">县级</a-radio-button>
          <a-radio-button value="place">站点</a-radio-button>
        </a-radio-group>
@@ -30,7 +30,7 @@
    <div id="map" ref="map" style="overflow: hidden"></div>
    <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
    <mapNominal :param="nominalList"></mapNominal>
-    <!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table-center :rowData="statisticData"></map-table-center>
    <map-table :rowData="pointData"></map-table>
  </div>
 </template>
@@ -42,6 +42,7 @@
 import {
  getAirGis,
 } from "@/api/gis/gisApi";
+import {statisticAll} from "@/api/ecology/atmosphere/air";
 import {
  getColumnOptions,
 } from "@/api/ecology/atmosphere/air-plcae";
@@ -49,7 +50,7 @@ import {
 import tipTool from "./components/tipTool";
 import mapNominal from "./components/mapNominal";
 import mapTable from "./components/mapTable";
-// import mapTableCenter from "./components/mapTableCenter";
+import mapTableCenter from "./components/mapTableCenter";

 let scene = null;
 let pointLayer = null;
@@ -60,7 +61,7 @@ export default {
    tipTool,
    mapNominal,
    mapTable,
-    // mapTableCenter
+    mapTableCenter
  },
  data() {
    return {
@@ -88,6 +89,7 @@ export default {
      ],
      points: [],//数据准备
      dataSource: [],
+      statisticData: [],
      value: '',
      result: [],
      searchKey: "",
@@ -262,7 +264,21 @@ export default {
      if (scene && pointLayer) {
        scene.removeLayer(pointLayer)
      }
-      getAirGis(this.where).then((res) => {
+      const where1 = JSON.parse(JSON.stringify(this.where));
+      if(where1.regionLevel == "city"){
+        where1.regionLevel = "area"
+      }
+      statisticAll(where1).then(res=>{
+        this.statisticData = [];
+        if(res.data.code == 0 && res.data.data.length > 0){
+          this.statisticData = res.data.data;
+        }
+      })
+      const where = JSON.parse(JSON.stringify(this.where));
+      if(where.regionLevel == "city"){
+        where.regionLevel = "place"
+      }
+      getAirGis(where).then((res) => {
        that.pointData = []
        that.dataSource = []
        if (res.data.code == 0 && res.data.data.length > 0) {
--- a/src/views/visualiz/sound/zone/index.vue
+++ b/src/views/visualiz/sound/zone/index.vue
@@ -286,6 +286,15 @@ export default {
      statisticAll(this.where).then(res=>{
        that.noiseSourceData = []
        if (res.data.code == 0 && res.data.data.length > 0) {
+          res.data.data.sort((a,b)=>{
+            if(a.area == "南宁市"){
+              return -1
+            }
+            if(b.area == "南宁市"){
+              return 1
+            }
+            return 0
+          })
          that.noiseSourceData = res.data.data
        }
      })