jczxw-java/src/views/atmosphere/acid-rain/statistic/county.vue

<template>
    <div class="ele-body">
        <a-card :bordered="false">
            <!-- 搜索表单 -->
            <a-form :model="where" 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 00:00:00" v-model:value="where.timeEnd"></a-date-picker>
                </a-form-item>
                <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="exportFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出Excel</a-button>
                </a-space>
            </a-form>
            <!-- 表格 -->
            <ele-pro-table
                v-model:selection="selectionList"
                ref="table"
                row-key="ambientAirId"
                :need-page="false"
                :datasource="url"
                :columns="columns"
                :where="where"
                :scroll="{ x: 'max-content' }"
                :init-load="false"
                @done="(d) => (data = d.data)"
                method="POST"
                :parseData="parseData"
            >

            </ele-pro-table>
        </a-card>
    </div>
    <!-- 编辑弹窗 -->
</template>

<script>
import _ from "lodash";
import XLSX from "xlsx";
import {statisticCounty, getColumnOptions} from "@/api/ecology/atmosphere/acid";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";

//   import utils from "./utils";
export default {
    name: "StatisticAcidCounty",
    components: {},
    data() {
        const year = new Date().getFullYear();
        return {
            data: [],
            locale,
            bill: {},
            // 表格数据接口
            url: statisticCounty,
            selection: [],
            modelOptions: [
                {label: "市", value: "city"},
                {label: "县", value: "county"},
                {label: "站点", value: "place"},

            ],
            // 表格列配置
            columns: [
                {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"},
            ],
            regionLevelOptions: [],
            time: [],
            // 表格搜索条件
            where: {
                timeStart: moment(`${year}-01-01 00:00:00`).format("YYYY-MM-DD 00:00:00"),
                timeEnd: moment().format("YYYY-MM-DD 00:00:00")
            },
            // 表格选中数据
            selectionList: [],
        };
    },
    mounted() {
        const year = new Date().getFullYear();
        this.time[0] = moment(`${year}-01-01 00:00:00`);
        this.time[1] = moment(Date.now())
        this.loadOptionData();
        this.reload();
    },
    methods: {
        /**获取下来框数据 */
        loadOptionData() {
            getColumnOptions("region_level").then((res) => {
                this.regionLevelOptions = res.data.data.map((item) => {
                    return {
                        label: item,
                        value: item,
                    };
                });
            });
        },
        parseData(res) {
            if (res.code == 0) {
                const list = [];
                console.log(res.data[0])
                res.data.forEach(item => {
                    const key = Object.keys(item)[0]
                    list.push(...item[key])
                })
                res.data = list;
                return res;
            }

        },
        handleChange(val){
            this.time = val;
        },
        handlePanelChange(val,mode){
            this.time = val;
            this.mode = [
                mode[0] === 'date' ? 'month' : mode[0],
                mode[1] === 'date' ? 'month' : mode[1],
            ]
        },
        /* 刷新表格 */
        reload() {
            const where = _.cloneDeep(this.where);

            this.$refs.table.reload({
                where
            });
        },
        /* 重置搜索 */
        reset() {
            this.where = {
            };
            this.time = undefined;
            this.reload();
        },
        exportFile() {
            const arr = [];
            const th1 = [];
            const th2 = [];
            const merges = []; // 合并
            const columnsTemp = []; // 树形结构整理成list
            this.columns.forEach((item,index)=>{
                if(item.children){
                    item.children.forEach((citem)=>{
                        th1.push(item.title)
                        th2.push(citem.title)
                        columnsTemp.push(citem)
                    })
                    merges.push({s: {r: 0, c: th1.length-item.children.length}, e: {r: 0, c: th1.length-1}})
                }else{
                    th1.push(item.title)
                    th2.push("")
                    columnsTemp.push(item)
                    merges.push({s: {r: 0, c: index}, e: {r: 1, c: index}})
                }
            })
            arr.push(th1,th2);
            this.data.forEach((d) => {
                const td = columnsTemp.map((item) => d[item.dataIndex]);
                arr.push(td);
            });
            let sheet = XLSX.utils.aoa_to_sheet(arr);
            sheet['!merges'] = merges;
            this.$util.exportSheet(XLSX, sheet, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日"));

        },
    },
};
</script>

<style scoped lang="less">
</style>