gxwebsoft/jczxw-java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大气gis右上角统计

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/ecology/atmosphere/air.js
View File

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

822
src/views/sound/zone/dict/leq-level.vue
View File

@@ -1,426 +1,442 @@
<template> <template>
<div class="ele-body"> <div class="ele-body">
<a-card :bordered="false"> <a-card :bordered="false">
<a-form <a-form
:model="where" :model="where"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
> >
<a-row> <a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="年份:"> <a-form-item label="年份:">
<a-select v-model:value="where.year" allow-clear show-search> <a-select v-model:value="where.year" allow-clear show-search>
<a-select-option <a-select-option
v-for="(item) in yearOptions" v-for="(item) in yearOptions"
:key="item.value" :key="item.value"
>{{ item.label }} >{{ item.label }}
</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-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
</a-space>
</a-col>
</a-row>
<a-row>
</a-row> </a-col>
</a-form> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-modal <a-form-item label="昼夜:">
v-model:visible="showNYear" <a-select v-model:value="where.timeSlot" allow-clear show-search>
:title="'批量复制'" <a-select-option
:confirm-loading="loading" v-for="(item) in timeSlotOptions"
:body-style="{ paddingBottom: '8px' }" :key="item.value"
@ok="copyBatch" >{{ item.label }}
> </a-select-option>
<a-form </a-select>
ref="form" </a-form-item>
:model="form" </a-col>
:rules="rules" <a-col :lg="6" :md="12" :sm="24" :xs="24">
:label-col="{ md: { span: 6 }, sm: { span: 24 } }" <a-space>
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }" <a-button type="primary" @click="reload">查询</a-button>
> <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
<a-form-item label="新年份" name="nYear"> </a-button>
<a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" /> </a-space>
</a-form-item> </a-col>
</a-form> </a-row>
</a-modal> <a-row>
<a-modal
v-model:visible="showEdit"
:title="form.id !== undefined ? '修改' : '添加'"
:confirm-loading="loading"
:width="500"
:body-style="{ paddingBottom: '8px' }"
@ok="save"
>
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
: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-form-item>
<a-form-item label="最小值" name="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-form-item>
<a-form-item label="时段" name="timeSlot">
<a-select v-model:value="form.timeSlot">
<a-select-option value="昼">昼</a-select-option>
<a-select-option value="夜">夜</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="等级" name="level">
<a-input
v-model:value="form.level"
placeholder="请输入等级"
allow-clear
/>
</a-form-item>
<a-form-item label="评价" name="evaluate"> </a-row>
<a-input </a-form>
v-model:value="form.evaluate" <a-modal
placeholder="请输入评价" v-model:visible="showNYear"
allow-clear :title="'批量复制'"
/> :confirm-loading="loading"
</a-form-item> :body-style="{ paddingBottom: '8px' }"
<a-form-item label="排序" name="sortNumber"> @ok="copyBatch"
<a-input-number :step="1" :precision="0" v-model:value="form.sortNumber" /> >
</a-form-item> <a-form
</a-form> ref="form"
</a-modal> :model="form"
<!-- 表格 --> :rules="rules"
<ele-pro-table :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
v-model:selection="selectionList" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
ref="table" >
row-key="id" <a-form-item label="新年份" name="nYear">
:datasource="url" <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050"/>
:columns="columns" </a-form-item>
:where="where" </a-form>
:scroll="{ x: 'max-content' }" </a-modal>
<a-modal
v-model:visible="showEdit"
:title="form.id !== undefined ? '修改' : '添加'"
:confirm-loading="loading"
:width="500"
:body-style="{ paddingBottom: '8px' }"
@ok="save"
>
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
: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-form-item>
<a-form-item label="最小值" name="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-form-item>
<a-form-item label="时段" name="timeSlot">
<a-select v-model:value="form.timeSlot">
<a-select-option value="昼">昼</a-select-option>
<a-select-option value="夜">夜</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="等级" name="level">
<a-input
v-model:value="form.level"
placeholder="请输入等级"
allow-clear
/>
</a-form-item>
<a-form-item label="评价" name="evaluate">
<a-input
v-model:value="form.evaluate"
placeholder="请输入评价"
allow-clear
/>
</a-form-item>
<a-form-item label="排序" name="sortNumber">
<a-input-number :step="1" :precision="0" v-model:value="form.sortNumber"/>
</a-form-item>
</a-form>
</a-modal>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="id"
:datasource="url"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
>
<template #toolbar>
<a-space>
<a-button @click="openEdit" type="primary">新增</a-button>
<a-dropdown>
<template #overlay>
<a-menu @click="setCYear">
<a-menu-item v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-menu-item>
</a-menu>
</template>
<a-button>
批量复制
<DownOutlined/>
</a-button>
</a-dropdown>
<a-popconfirm
:disabled="selectionList.length == 0"
:title="`确认删除${selectionList.length}条数据吗?`"
ok-text="Yes"
cancel-text="No"
@confirm="removeBatch"
> >
<template #toolbar> <a-button
<a-space> :disabled="selectionList.length == 0"
<a-button @click="openEdit" type="primary">新增</a-button> type="primary"
<a-dropdown> ghost
<template #overlay> danger
<a-menu @click="setCYear"> >删除
<a-menu-item v-for="item in yearOptions" :key="item.value"> </a-button>
{{ item.label }} </a-popconfirm>
</a-menu-item> <a-button @click="exportData" type="primary">导出</a-button>
</a-menu> </a-space>
</template> </template>
<a-button> <template #action="{ record }">
批量复制 <a-space>
<DownOutlined/> <a-button
</a-button> @click="openEdit(record)"
</a-dropdown> type="primary"
<a-popconfirm shape="round"
:disabled="selectionList.length == 0" size="small"
:title="`确认删除${selectionList.length}条数据吗?`" >修改
ok-text="Yes" </a-button
cancel-text="No" >
@confirm="removeBatch" <a-popconfirm
> :title="`确认删除这条数据吗?`"
<a-button ok-text="Yes"
:disabled="selectionList.length == 0" cancel-text="No"
type="primary" @confirm="remove(record)"
ghost >
danger <a-button type="primary" danger shape="round" size="small"
>删除 >删除
</a-button> </a-button
</a-popconfirm> >
<a-button @click="exportData" type="primary">导出</a-button> </a-popconfirm>
</a-space> </a-space>
</template> </template>
<template #action="{ record }"> </ele-pro-table>
<a-space> </a-card>
<a-button </div>
@click="openEdit(record)" <!-- 编辑弹窗 -->
type="primary"
shape="round"
size="small"
>修改</a-button
>
<a-popconfirm
:title="`确认删除这条数据吗?`"
ok-text="Yes"
cancel-text="No"
@confirm="remove(record)"
>
<a-button type="primary" danger shape="round" size="small"
>删除</a-button
>
</a-popconfirm>
</a-space>
</template>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template> </template>
<script> <script>
// import _ from "lodash"; // import _ from "lodash";
import { import {
listAllUrl, listAllUrl,
saveLeqLevel, saveLeqLevel,
updateLeqLevel, updateLeqLevel,
removeLeqLevel, removeLeqLevel,
removeBatchLeqLevel, removeBatchLeqLevel,
copyBatchLeqLevel, copyBatchLeqLevel,
getColumnOptions getColumnOptions
} from "@/api/ecology/noise/zone-noise-leq-level"; } 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 {DownOutlined} from '@ant-design/icons-vue';
import XLSX from "xlsx"; import XLSX from "xlsx";
// import moment from "moment"; // import moment from "moment";
export default { export default {
name: "ZoneNoiseLeqLevel", name: "ZoneNoiseLeqLevel",
components: {DownOutlined}, components: {DownOutlined},
data() { data() {
return { return {
data: [], data: [],
// 表格数据接口 // 表格数据接口
url: listAllUrl, url: listAllUrl,
selection: [], selection: [],
// 表格列配置 // 表格列配置
columns: [ columns: [
{ {
title: "年份", title: "年份",
dataIndex: "year", dataIndex: "year",
sorter: true, sorter: true,
}, },
{ {
title: "时段", title: "时段",
dataIndex: "timeSlot", dataIndex: "timeSlot",
}, },
{ {
title: "等级", title: "等级",
dataIndex: "level", dataIndex: "level",
}, },
{ {
title: "最小值", title: "最小值",
dataIndex: "minLeq", dataIndex: "minLeq",
customRender: ({text})=>{ customRender: ({text}) => {
return text!=undefined? text.toFixed(1):undefined return text != undefined ? text.toFixed(1) : undefined
} }
}, },
{ {
title: "最大值", title: "最大值",
dataIndex: "maxLeq", dataIndex: "maxLeq",
customRender: ({text})=>{ customRender: ({text}) => {
return text!=undefined? text.toFixed(1):undefined return text != undefined ? text.toFixed(1) : undefined
} }
}, },
{ {
title: "评价", title: "评价",
dataIndex: "evaluate", dataIndex: "evaluate",
}, },
{ {
title: "排序", title: "排序",
dataIndex: "sortNumber", dataIndex: "sortNumber",
}, },
{ {
title: "操作", title: "操作",
key: "action", key: "action",
width: 150, width: 150,
align: "center", align: "center",
fixed: "right", fixed: "right",
slots: { slots: {
customRender: "action", customRender: "action",
}, },
}, },
], ],
// 表格搜索条件 // 表格搜索条件
where: {}, where: {},
// 表格选中数据 // 表格选中数据
selectionList: [], selectionList: [],
// 是否显示编辑弹窗 // 是否显示编辑弹窗
showEdit: false, showEdit: false,
showNYear:false, showNYear: false,
cYear: undefined, cYear: undefined,
nYear:undefined, nYear: undefined,
yearOptions:[], yearOptions: [],
// 表单数据 timeSlotOptions: [{label: "昼", value: "昼"}, {label: "夜", value: "夜"}],
form: {}, // 表单数据
loading: false, form: {},
rules: { loading: false,
timeSlot:[{required: true,message: '请选择时段'}], rules: {
// minLeq: [{required: true,message: '请输入最小值',},], timeSlot: [{required: true, message: '请选择时段'}],
// maxLeq: [{required: true,message: '请输入最大值',},], // minLeq: [{required: true,message: '请输入最小值',},],
level: [{required: true,message: '请输入等级',},], // maxLeq: [{required: true,message: '请输入最大值',},],
// evaluate: [{required: true,message: '请输入评价',},], level: [{required: true, message: '请输入等级',},],
sortNumber: [{required: true,message: '请输入排序',},], // evaluate: [{required: true,message: '请输入评价',},],
}, sortNumber: [{required: true, message: '请输入排序',},],
}; },
};
},
mounted() {
this.getOptions()
},
methods: {
minLeqChange(e) {
console.log(e)
}, },
mounted() { /* 刷新表格 */
this.getOptions() reload() {
},
methods: {
minLeqChange(e){
console.log(e)
},
/* 刷新表格 */
reload() {
this.$refs.table.reload({ this.$refs.table.reload({
where: this.where, where: this.where,
}); });
}, },
/* 重置搜索 */ /* 重置搜索 */
reset() { reset() {
this.where = {}; this.where = {};
this.reload(); this.reload();
}, },
/* 打开编辑弹窗 */ /* 打开编辑弹窗 */
openEdit(row) { openEdit(row) {
// cloneRecord.mi // cloneRecord.mi
this.form = Object.assign({}, row); this.form = Object.assign({}, row);
this.showEdit = true; this.showEdit = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.form.clearValidate(); // 清除表单验证信息 this.$refs.form.clearValidate(); // 清除表单验证信息
}); });
}, },
async save() { async save() {
await this.$refs.form.validate(); await this.$refs.form.validate();
const {minLeq,maxLeq } = this.form; const {minLeq, maxLeq} = this.form;
if(minLeq == undefined && maxLeq == undefined ){ if (minLeq == undefined && maxLeq == undefined) {
message.error("最小值和最大值请至少填写一项！") message.error("最小值和最大值请至少填写一项！")
return; return;
} }
const hide = this.$message.loading('请求中..', 0); const hide = this.$message.loading('请求中..', 0);
const form = this.form; const form = this.form;
if (form.id) { if (form.id) {
updateLeqLevel(form) updateLeqLevel(form)
.then((res) => { .then((res) => {
if (res.data.code == 0) { if (res.data.code == 0) {
this.showEdit = false; this.showEdit = false;
this.$message.success(res.data.msg); this.$message.success(res.data.msg);
this.reload(); this.reload();
this.getOptions() this.getOptions()
} else {
this.$message.error(res.data.msg);
}
})
.catch((error) => {
this.$message.error(error.message);
})
.finally(() => {
hide();
});
} else { } else {
saveLeqLevel(form) this.$message.error(res.data.msg);
.then((res) => {
if (res.data.code == 0) {
this.showEdit = false;
this.$message.success(res.data.msg);
this.reload();
this.getOptions()
} else {
this.$message.error(res.data.msg);
}
})
.catch((error) => {
this.$message.error(error.message);
})
.finally(() => {
hide();
});
} }
}, })
/* 删除单个 */ .catch((error) => {
remove(row) { this.$message.error(error.message);
const hide = this.$message.loading('请求中..', 0); })
removeLeqLevel(row.id).then((res) => { .finally(() => {
hide(); hide();
if (res.data.code === 0) { });
this.$message.success(res.data.msg); } else {
this.reload(); saveLeqLevel(form)
} else { .then((res) => {
this.$message.error(res.data.msg); if (res.data.code == 0) {
} this.showEdit = false;
}).catch(e => { this.$message.success(res.data.msg);
hide(); this.reload();
this.$message.error(e.message); this.getOptions()
}) } else {
}, this.$message.error(res.data.msg);
/* 批量删除 */ }
removeBatch() { })
const hide = this.$message.loading('请求中..', 0); .catch((error) => {
const ids = this.selectionList.map((item) => item.id); this.$message.error(error.message);
removeBatchLeqLevel(ids).then((res) => { })
if (res.data.code === 0) { .finally(() => {
this.$message.success(res.data.msg); hide();
this.reload(); });
} else { }
this.$message.error(res.data.msg);
}
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
getOptions(){
getColumnOptions("year").then(res => {
console.log(res)
if (res.data.code == 0) {
this.yearOptions = res.data.data.map(item => {
return {
label: item,
value: item
}
})
}
})
},
setCYear(e){
this.cYear = e.key;
this.showNYear = true;
},
copyBatch(){
const hide = this.$message.loading('请求中..', 0);
copyBatchLeqLevel({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
this.getOptions();
} else {
this.$message.error(res.data.msg);
}
this.showNYear = false;
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
exportData(){
const columns = this.columns.filter(item=>item.dataIndex);
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
this.data.forEach((d) => {
const td = columns.map((item) => d[item.dataIndex]);
arr.push(td);
});
let sheet = XLSX.utils.aoa_to_sheet(arr);
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
}
}, },
/* 删除单个 */
remove(row) {
const hide = this.$message.loading('请求中..', 0);
removeLeqLevel(row.id).then((res) => {
hide();
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
hide();
this.$message.error(e.message);
})
},
/* 批量删除 */
removeBatch() {
const hide = this.$message.loading('请求中..', 0);
const ids = this.selectionList.map((item) => item.id);
removeBatchLeqLevel(ids).then((res) => {
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
getOptions() {
getColumnOptions("year").then(res => {
console.log(res)
if (res.data.code == 0) {
this.yearOptions = res.data.data.map(item => {
return {
label: item,
value: item
}
})
}
})
},
setCYear(e) {
this.cYear = e.key;
this.showNYear = true;
},
copyBatch() {
const hide = this.$message.loading('请求中..', 0);
copyBatchLeqLevel({cyear: Number(this.cYear), nyear: this.nYear}).then(res => {
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
this.getOptions();
} else {
this.$message.error(res.data.msg);
}
this.showNYear = false;
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
exportData() {
const columns = this.columns.filter(item => item.dataIndex);
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
this.data.forEach((d) => {
const td = columns.map((item) => d[item.dataIndex]);
arr.push(td);
});
let sheet = XLSX.utils.aoa_to_sheet(arr);
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
}
},
}; };
</script> </script>

39
src/views/visualiz/atmosphere/acid/components/mapTableCenter.vue
View File

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

38
src/views/visualiz/atmosphere/acid/index.vue
View File

@@ -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: "",
@@ -203,7 +205,7 @@ export default {
that.tipData = that.pointData[currentId.substring(2, currentId.length)] that.tipData = that.pointData[currentId.substring(2, currentId.length)]
that.currentX = e.pageX - calcWidth that.currentX = e.pageX - calcWidth
that.currentY = e.pageY - 80 that.currentY = e.pageY - 80
},true) }, true)
myCompOverlay.addEventListener('mouseout', function () { myCompOverlay.addEventListener('mouseout', function () {
setTimeout(() => { setTimeout(() => {
@@ -211,7 +213,7 @@ export default {
that.currentX = 30000 that.currentX = 30000
that.currentY = 0 that.currentY = 0
that.tipFlag = false that.tipFlag = false
},true) }, true)
}) })
}, },
whereChange(e) { whereChange(e) {
@@ -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 = []

47
src/views/visualiz/atmosphere/air/components/mapTableCenter.vue
View File

@@ -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>
@@ -19,28 +19,41 @@
<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;

26
src/views/visualiz/atmosphere/air/index.vue
View File

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

9
src/views/visualiz/sound/zone/index.vue
View File

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