大气gis右上角统计

This commit is contained in:
weicw
2022-02-03 15:37:12 +08:00
parent 98248a8415
commit 535ef79624
7 changed files with 529 additions and 457 deletions

View File

@@ -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
}

View File

@@ -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>
@@ -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>
@@ -251,6 +266,7 @@ export default {
cYear: undefined,
nYear: undefined,
yearOptions: [],
timeSlotOptions: [{label: "昼", value: "昼"}, {label: "夜", value: "夜"}],
// 表单数据
form: {},
loading: false,

View File

@@ -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;

View File

@@ -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: "",
@@ -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 = []

View File

@@ -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;

View File

@@ -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) {

View File

@@ -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
}
})