空气数据导出

This commit is contained in:
weicw
2022-01-28 07:09:32 +08:00
parent 3275d9a303
commit 32f748856e

View File

@@ -1,60 +1,65 @@
<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"
layout="inline" layout="inline"
>
<a-form-item label="起始日期:">
<a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.timeStart"></a-date-picker>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.timeEnd"></a-date-picker>
</a-form-item>
<a-form-item label="区域等级:">
<a-select v-model:value="where.regionLevel" placeholder="选择区域等级" allowClear showSearch>
<a-select-option
v-for="(item) in regionLevelOptions"
:key="item.value"
>{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="监测点:">
<a-select v-model:value="where.place" placeholder="选择监测点" allowClear showSearch>
<a-select-option
v-for="(item) in placeOptions"
:key="item.value"
>{{ item.label }}
</a-select-option
> >
<a-form-item label="起始日期:"> </a-select>
<a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.timeStart"></a-date-picker> </a-form-item>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.timeEnd"></a-date-picker>
</a-form-item>
<a-form-item label="区域等级:">
<a-select v-model:value="where.regionLevel" placeholder="选择区域等级" allowClear showSearch>
<a-select-option
v-for="(item) in regionLevelOptions"
:key="item.value"
>{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="监测点:">
<a-select v-model:value="where.place" placeholder="选择监测点" allowClear showSearch>
<a-select-option
v-for="(item) in placeOptions"
:key="item.value"
>{{ item.label }}
</a-select-option
>
</a-select>
</a-form-item>
<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-button @click="exportFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出Excel</a-button> <a-button @click="exportCityFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">
</a-space> 市级模板导出
</a-form> </a-button>
<!-- 表格 --> <a-button @click="exportCountyFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">
<ele-pro-table 县级模板导出
v-model:selection="selectionList" </a-button>
ref="table" </a-space>
row-key="ambientAirId" </a-form>
:datasource="url" <!-- 表格 -->
:columns="columns" <ele-pro-table
:where="where" v-model:selection="selectionList"
:scroll="{ x: 'max-content' }" ref="table"
@done="(d) => (data = d.data)" row-key="ambientAirId"
:init-load="false" :datasource="url"
> :columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
:init-load="false"
>
</ele-pro-table> </ele-pro-table>
</a-card> </a-card>
</div> </div>
<!-- 编辑弹窗 --> <!-- 编辑弹窗 -->
</template> </template>
<script> <script>
@@ -65,235 +70,319 @@ import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment"; import moment from "moment";
// import utils from "./utils"; // import utils from "./utils";
export default { export default {
name: "StatisticAirBase", name: "StatisticAirBase",
components: {}, components: {},
data() { data() {
const year = new Date().getFullYear(); const year = new Date().getFullYear();
return { return {
data: [], data: [],
locale, locale,
bill: {}, bill: {},
// 表格数据接口 // 表格数据接口
url: pageAirUrl, url: pageAirUrl,
selection: [], selection: [],
// 表格列配置 // 表格列配置
columns: [ columns: [
{ {
title: "监测日期", title: "监测日期",
dataIndex: "monitorTime", dataIndex: "monitorTime",
sorter: true, sorter: true,
customRender: ({text}) => moment(text).format("YYYY-MM-DD") customRender: ({text}) => moment(text).format("YYYY-MM-DD")
}, },
{ {
title: "城市", title: "城市",
dataIndex: "city", dataIndex: "city",
sorter: true, sorter: true,
}, },
{ {
title: "测点名称", title: "测点名称",
dataIndex: "place", dataIndex: "place",
sorter: true, sorter: true,
}, },
{ {
title: "SO2/(μg/m3)", title: "SO2/(μg/m3)",
dataIndex: "so2", dataIndex: "so2",
sorter: true, sorter: true,
}, },
{ {
title: "NO2/(μg/m3)", title: "NO2/(μg/m3)",
dataIndex: "no2", dataIndex: "no2",
sorter: true, sorter: true,
}, },
{ {
title: "PM10/(μg/m3)", title: "PM10/(μg/m3)",
dataIndex: "pm10", dataIndex: "pm10",
sorter: true, sorter: true,
}, },
{ {
title: "CO/(mg/m3)", title: "CO/(mg/m3)",
dataIndex: "co", dataIndex: "co",
sorter: true, sorter: true,
}, },
{ {
title: "臭氧O3最大8小时滑动平均浓度/(μg/m3)", title: "臭氧O3最大8小时滑动平均浓度/(μg/m3)",
dataIndex: "o3", dataIndex: "o3",
sorter: true, sorter: true,
}, },
{ {
title: "PM2.5", title: "PM2.5",
dataIndex: "pm25", dataIndex: "pm25",
sorter: true, sorter: true,
}, },
{ {
title: "空气质量指数AQI", title: "空气质量指数AQI",
dataIndex: "aqi", dataIndex: "aqi",
sorter: true, sorter: true,
}, },
{ {
title: "首要污染物", title: "首要污染物",
dataIndex: "primaryPollutant", dataIndex: "primaryPollutant",
sorter: true, sorter: true,
}, },
{ {
title: "空气质量指数级别", title: "空气质量指数级别",
dataIndex: "aqiLevel", dataIndex: "aqiLevel",
sorter: true, sorter: true,
}, },
{ {
title: "空气质量状况", title: "空气质量状况",
dataIndex: "airQualityStatus", dataIndex: "airQualityStatus",
sorter: true, sorter: true,
}, },
{ {
title: "备注", title: "备注",
dataIndex: "remark", dataIndex: "remark",
sorter: true, sorter: true,
}, },
{ {
title: "创建人", title: "创建人",
dataIndex: "username", dataIndex: "username",
sorter: true, sorter: true,
} }
], ],
regionLevelOptions: [ regionLevelOptions: [
{label: "市区", value: "city"}, {label: "市区", value: "city"},
{label: "城区", value: "area"}, {label: "城区", value: "area"},
{label: "县区", value: "county"}, {label: "县区", value: "county"},
{label: "站点", value: "place"}, {label: "站点", value: "place"},
], ],
placeOptions:[], placeOptions: [],
time:[], time: [],
// 表格搜索条件 // 表格搜索条件
where: { where: {
checked: 1, checked: 1,
timeStart: moment(`${year}-01-01 00:00:00`).format("YYYY-MM-DD 00:00:00"), timeStart: moment(`${year}-01-01 00:00:00`).format("YYYY-MM-DD 00:00:00"),
timeEnd: moment().format("YYYY-MM-DD 23:59:59") timeEnd: moment().format("YYYY-MM-DD 23:59:59")
}, },
// 表格选中数据 // 表格选中数据
selectionList: [], selectionList: [],
}; };
},
mounted() {
this.loadOptionData();
this.reload();
},
methods: {
/**获取下来框数据 */
loadOptionData() {
getColumnOptions("place").then((res) => {
this.placeOptions = res.data.data.map((item) => {
return {
label: item,
value: item,
};
});
});
}, },
mounted() { /* 刷新表格 */
this.loadOptionData(); reload() {
this.reload(); this.$refs.table.reload({
where: this.where,
});
}, },
methods: { /* 重置搜索 */
/**获取下来框数据 */ reset() {
loadOptionData() { this.where = {
getColumnOptions("place").then((res) => { checked: 1,
this.placeOptions = res.data.data.map((item) => { };
return { this.reload();
label: item,
value: item,
};
});
});
},
/* 刷新表格 */
reload() {
this.$refs.table.reload({
where: this.where,
});
},
/* 重置搜索 */
reset() {
this.where = {
checked: 1,
};
this.reload();
},
exportFile() {
const columns = [
{
title: "监测日期",
dataIndex: "monitorTime",
sorter: true,
customRender: ({text}) => moment(text).format("YYYY-MM-DD HH:mm")
},
{
title: "城市",
dataIndex: "city",
sorter: true,
},
{
title: "测点名称",
dataIndex: "place",
sorter: true,
},
{
title: "SO2/(μg/m3)",
dataIndex: "so2",
sorter: true,
},
{
title: "NO2/(μg/m3)",
dataIndex: "no2",
sorter: true,
},
{
title: "PM10/(μg/m3)",
dataIndex: "pm10",
sorter: true,
},
{
title: "CO/(mg/m3)",
dataIndex: "co",
sorter: true,
},
{
title: "臭氧O3最大8小时滑动平均浓度/(μg/m3)",
dataIndex: "o3",
sorter: true,
},
{
title: "PM2.5",
dataIndex: "pm25",
sorter: true,
},
{
title: "空气质量指数AQI",
dataIndex: "aqi",
sorter: true,
},
{
title: "首要污染物",
dataIndex: "primaryPollutant",
sorter: true,
},
{
title: "空气质量指数级别",
dataIndex: "aqiLevel",
sorter: true,
},
{
title: "空气质量状况",
dataIndex: "airQualityStatus",
sorter: true,
},
{
title: "备注",
dataIndex: "remark",
sorter: true,
},
];
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
listAllAir(this.where).then(res => {
if (res.data.code == 0) {
res.data.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, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日") + "基础数据");
}
})
},
}, },
exportCityFile() {
const columns = [
{
title: "城市",
dataIndex: "city",
sorter: true,
},
{
title: "时间",
dataIndex: "monitorTime",
sorter: true,
customRender: ({text}) => moment(text).format("YYYY-MM-DD HH:mm")
},
{
title: "二氧化硫浓度/(μg/m3)",
dataIndex: "so2",
sorter: true,
},
{
title: "二氧化氮浓度/(μg/m3)",
dataIndex: "no2",
sorter: true,
},
{
title: "可吸入颗粒物浓度/(μg/m3)",
dataIndex: "pm10",
sorter: true,
},
{
title: "一氧化碳浓度/(mg/m3)",
dataIndex: "co",
sorter: true,
},
{
title: "臭氧O3最大8小时滑动平均浓度/(μg/m3)",
dataIndex: "o3",
sorter: true,
},
{
title: "细颗粒物浓度/(μg/m3)",
dataIndex: "pm25",
sorter: true,
},
{
title: "空气质量指数AQI",
dataIndex: "aqi",
sorter: true,
},
{
title: "首要污染物",
dataIndex: "primaryPollutant",
sorter: true,
},
{
title: "空气质量指数级别",
dataIndex: "aqiLevel",
sorter: true,
},
{
title: "类别",
dataIndex: "airQualityStatus",
sorter: true,
},
{
title: "备注",
dataIndex: "remark",
sorter: true,
},
];
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
listAllAir(this.where).then(res => {
if (res.data.code == 0) {
res.data.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, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日") + "基础数据");
}
})
},
exportCountyFile() {
const columns = [
{
title: "测点名称",
dataIndex: "place",
sorter: true,
},
{
title: "日期",
dataIndex: "monitorTime",
sorter: true,
customRender: ({text}) => moment(text).format("YYYY-MM-DD")
},
{
title: "空气质量状况",
dataIndex: "airQualityStatus",
sorter: true,
},
{
title: "空气质量指数级别",
dataIndex: "aqiLevel",
sorter: true,
},
{
title: "AQI",
dataIndex: "aqi",
sorter: true,
},
{
title: "首要污染物",
dataIndex: "primaryPollutant",
sorter: true,
},
{
title: "SO2)",
dataIndex: "so2",
sorter: true,
},
{
title: "NO2",
dataIndex: "no2",
sorter: true,
},
{
title: "PM10",
dataIndex: "pm10",
sorter: true,
},
{
title: "CO",
dataIndex: "co",
sorter: true,
},
{
title: "O3-8h",
dataIndex: "o3",
sorter: true,
},
{
title: "PM2.5",
dataIndex: "pm25",
sorter: true,
},
{
title: "备注",
dataIndex: "remark",
sorter: true,
},
];
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
listAllAir(this.where).then(res => {
if (res.data.code == 0) {
res.data.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, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日") + "基础数据");
}
})
},
},
}; };
</script> </script>