大气gis右上角统计
This commit is contained in:
@@ -81,6 +81,10 @@ const getCityPlace = function(column){
|
|||||||
const getCountryPlace = function(column){
|
const getCountryPlace = function(column){
|
||||||
return axios.get("/ambientAir/ambientAir/place/country",{params:{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 airDayRankUrl = "/zhenQiWang/ambientAirZhenqiCityDayAqiRankData";
|
||||||
const airMonthRankUrl = "/zhenQiWang/ambientAirZhenqiCityMonthComprehensiveAqiRankData/page";
|
const airMonthRankUrl = "/zhenQiWang/ambientAirZhenqiCityMonthComprehensiveAqiRankData/page";
|
||||||
@@ -137,4 +141,5 @@ export {
|
|||||||
getMonthNewData,
|
getMonthNewData,
|
||||||
getYearNewData,
|
getYearNewData,
|
||||||
getPmNewData,
|
getPmNewData,
|
||||||
|
statisticAll
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,11 +16,24 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</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>
|
||||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-button type="primary" @click="reload">查询</a-button>
|
<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-space>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
@@ -148,7 +161,8 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
shape="round"
|
shape="round"
|
||||||
size="small"
|
size="small"
|
||||||
>修改</a-button
|
>修改
|
||||||
|
</a-button
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<a-popconfirm
|
||||||
:title="`确认删除这条数据吗?`"
|
:title="`确认删除这条数据吗?`"
|
||||||
@@ -157,7 +171,8 @@
|
|||||||
@confirm="remove(record)"
|
@confirm="remove(record)"
|
||||||
>
|
>
|
||||||
<a-button type="primary" danger shape="round" size="small"
|
<a-button type="primary" danger shape="round" size="small"
|
||||||
>删除</a-button
|
>删除
|
||||||
|
</a-button
|
||||||
>
|
>
|
||||||
</a-popconfirm>
|
</a-popconfirm>
|
||||||
</a-space>
|
</a-space>
|
||||||
@@ -251,6 +266,7 @@ export default {
|
|||||||
cYear: undefined,
|
cYear: undefined,
|
||||||
nYear: undefined,
|
nYear: undefined,
|
||||||
yearOptions: [],
|
yearOptions: [],
|
||||||
|
timeSlotOptions: [{label: "昼", value: "昼"}, {label: "夜", value: "夜"}],
|
||||||
// 表单数据
|
// 表单数据
|
||||||
form: {},
|
form: {},
|
||||||
loading: false,
|
loading: false,
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<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'}"
|
<a-card title="酸雨点位" :headStyle="{'padding':'0px 5px'}"
|
||||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
<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=""
|
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||||
style="width: 30px;height: 30px">
|
style="width: 30px;height: 30px">
|
||||||
</div>
|
</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-table>
|
||||||
</a-card>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
@@ -20,27 +20,14 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{title: "区域", dataIndex: "place", align: "center"},
|
||||||
title: '点位名称',
|
// {title: "项目", dataIndex: "periodType", align: "center"},
|
||||||
dataIndex: 'place',
|
{title: "降水样品(个)", dataIndex: "precipitationSampleAcount", align: "center"},
|
||||||
},
|
{title: "酸雨样品(个)", dataIndex: "acidRainSampleAcount", align: "center"},
|
||||||
{
|
{title: "最小pH值", dataIndex: "minPh", align: "center"},
|
||||||
title: '点位等级',
|
{title: "最大pH值", dataIndex: "maxPh", align: "center"},
|
||||||
className: 'regionLevel',
|
{title: "酸雨频率(%)", dataIndex: "acidRainFrequency", align: "center"},
|
||||||
dataIndex: 'regionLevel',
|
{title: "降水pH值(无量纲)", dataIndex: "precipitationPh", align: "center"},
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '所属地区',
|
|
||||||
dataIndex: 'area',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '所属路段',
|
|
||||||
dataIndex: 'road',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '噪声 dB(A)',
|
|
||||||
dataIndex: 'leq',
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
@@ -68,10 +55,10 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.map-table-container {
|
.map-table-container {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 500px;
|
width: 700px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 300px;
|
top: 80px;
|
||||||
transition: right 0.8s;
|
transition: right 0.8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -85,7 +72,7 @@ export default {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -40px;
|
left: -40px;
|
||||||
bottom: 0;
|
top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -23,13 +23,13 @@
|
|||||||
<div id="map" ref="map" style="overflow: hidden"></div>
|
<div id="map" ref="map" style="overflow: hidden"></div>
|
||||||
<tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
<tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
||||||
<!-- <mapNominal :param="nominalList"></mapNominal>-->
|
<!-- <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>
|
<map-table :rowData="pointData"></map-table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
getPlaceGis,
|
getPlaceGis, statisticCity, statisticCounty
|
||||||
} from "@/api/ecology/atmosphere/acid";
|
} from "@/api/ecology/atmosphere/acid";
|
||||||
import {
|
import {
|
||||||
getColumnOptions,
|
getColumnOptions,
|
||||||
@@ -38,7 +38,8 @@ import {
|
|||||||
import tipTool from "./components/tipTool";
|
import tipTool from "./components/tipTool";
|
||||||
// import mapNominal from "./components/mapNominal";
|
// import mapNominal from "./components/mapNominal";
|
||||||
import mapTable from "./components/mapTable";
|
import mapTable from "./components/mapTable";
|
||||||
// import mapTableCenter from "./components/mapTableCenter";
|
import mapTableCenter from "./components/mapTableCenter";
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
let scene = null;
|
let scene = null;
|
||||||
let pointLayer = null;
|
let pointLayer = null;
|
||||||
@@ -49,7 +50,7 @@ export default {
|
|||||||
tipTool,
|
tipTool,
|
||||||
// mapNominal,
|
// mapNominal,
|
||||||
mapTable,
|
mapTable,
|
||||||
// mapTableCenter
|
mapTableCenter
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -69,6 +70,7 @@ export default {
|
|||||||
nominalList: [],
|
nominalList: [],
|
||||||
points: [],//数据准备
|
points: [],//数据准备
|
||||||
dataSource: [],
|
dataSource: [],
|
||||||
|
statisticData:[],
|
||||||
value: '',
|
value: '',
|
||||||
result: [],
|
result: [],
|
||||||
searchKey: "",
|
searchKey: "",
|
||||||
@@ -239,6 +241,30 @@ export default {
|
|||||||
if (scene && pointLayer) {
|
if (scene && pointLayer) {
|
||||||
scene.removeLayer(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) => {
|
getPlaceGis(this.where).then((res) => {
|
||||||
that.pointData = []
|
that.pointData = []
|
||||||
that.dataSource = []
|
that.dataSource = []
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<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'}"
|
<a-card title="环境空气点位" :headStyle="{'padding':'0px 5px'}"
|
||||||
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
||||||
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
<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=""
|
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
||||||
style="width: 30px;height: 30px">
|
style="width: 30px;height: 30px">
|
||||||
</div>
|
</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-table>
|
||||||
</a-card>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
@@ -20,27 +20,40 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
|
{title: "区域", dataIndex: "place",align:"center"},
|
||||||
{
|
{
|
||||||
title: '点位名称',
|
title: "二氧化硫",
|
||||||
dataIndex: 'place',
|
dataIndex: "so2Current"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '点位等级',
|
title: "二氧化氮",
|
||||||
className: 'regionLevel',
|
dataIndex: "no2Current",
|
||||||
dataIndex: 'regionLevel',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '所属地区',
|
title: "可吸入颗粒物",
|
||||||
dataIndex: 'area',
|
dataIndex: "pm10Current"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '所属路段',
|
title: "一氧化碳",
|
||||||
dataIndex: 'road',
|
dataIndex: "coCurrent"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '噪声 dB(A)',
|
title: "臭氧",
|
||||||
dataIndex: 'leq',
|
dataIndex: "o3Current"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "细颗粒物",
|
||||||
|
dataIndex: "pm25Current"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "综合指数",
|
||||||
|
dataIndex: "comprehensiveAirQualityIndexCurrent"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "优良率",
|
||||||
|
dataIndex: "excellentRateCurrent"
|
||||||
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
@@ -68,10 +81,10 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.map-table-container {
|
.map-table-container {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 500px;
|
width: 600px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 300px;
|
top: 80px;
|
||||||
transition: right 0.8s;
|
transition: right 0.8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -85,7 +98,7 @@ export default {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -40px;
|
left: -40px;
|
||||||
bottom: 0;
|
top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
<a-radio-group @change="whereChange" name="area" v-model:value="where.regionLevel">
|
<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="county">县级</a-radio-button>
|
||||||
<a-radio-button value="place">站点</a-radio-button>
|
<a-radio-button value="place">站点</a-radio-button>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
@@ -30,7 +30,7 @@
|
|||||||
<div id="map" ref="map" style="overflow: hidden"></div>
|
<div id="map" ref="map" style="overflow: hidden"></div>
|
||||||
<tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
<tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
||||||
<mapNominal :param="nominalList"></mapNominal>
|
<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>
|
<map-table :rowData="pointData"></map-table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -42,6 +42,7 @@
|
|||||||
import {
|
import {
|
||||||
getAirGis,
|
getAirGis,
|
||||||
} from "@/api/gis/gisApi";
|
} from "@/api/gis/gisApi";
|
||||||
|
import {statisticAll} from "@/api/ecology/atmosphere/air";
|
||||||
import {
|
import {
|
||||||
getColumnOptions,
|
getColumnOptions,
|
||||||
} from "@/api/ecology/atmosphere/air-plcae";
|
} from "@/api/ecology/atmosphere/air-plcae";
|
||||||
@@ -49,7 +50,7 @@ import {
|
|||||||
import tipTool from "./components/tipTool";
|
import tipTool from "./components/tipTool";
|
||||||
import mapNominal from "./components/mapNominal";
|
import mapNominal from "./components/mapNominal";
|
||||||
import mapTable from "./components/mapTable";
|
import mapTable from "./components/mapTable";
|
||||||
// import mapTableCenter from "./components/mapTableCenter";
|
import mapTableCenter from "./components/mapTableCenter";
|
||||||
|
|
||||||
let scene = null;
|
let scene = null;
|
||||||
let pointLayer = null;
|
let pointLayer = null;
|
||||||
@@ -60,7 +61,7 @@ export default {
|
|||||||
tipTool,
|
tipTool,
|
||||||
mapNominal,
|
mapNominal,
|
||||||
mapTable,
|
mapTable,
|
||||||
// mapTableCenter
|
mapTableCenter
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -88,6 +89,7 @@ export default {
|
|||||||
],
|
],
|
||||||
points: [],//数据准备
|
points: [],//数据准备
|
||||||
dataSource: [],
|
dataSource: [],
|
||||||
|
statisticData: [],
|
||||||
value: '',
|
value: '',
|
||||||
result: [],
|
result: [],
|
||||||
searchKey: "",
|
searchKey: "",
|
||||||
@@ -262,7 +264,21 @@ export default {
|
|||||||
if (scene && pointLayer) {
|
if (scene && pointLayer) {
|
||||||
scene.removeLayer(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.pointData = []
|
||||||
that.dataSource = []
|
that.dataSource = []
|
||||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||||
|
|||||||
@@ -286,6 +286,15 @@ export default {
|
|||||||
statisticAll(this.where).then(res=>{
|
statisticAll(this.where).then(res=>{
|
||||||
that.noiseSourceData = []
|
that.noiseSourceData = []
|
||||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
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
|
that.noiseSourceData = res.data.data
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user