factory_web/src/views/bigScreen/enpComponents/cemsExport.vue

<template>
    <el-container>
        <el-header class="panel_title">
            <div class="left-panel">CEMS报表导出</div>
        </el-header>
        <el-main class="nopadding">
            <div style="text-align: center;margin-top: 8px">
                <el-date-picker size="large" v-model="query.time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="时间选择" style=" width: 400px" />
                <el-select size="large" v-model="query.type" placeholder="周期" style="margin-left:4px">
                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button size="large" type="primary" @click="exportExcel" style="margin-left: 4px"
                    v-loading="eLoading">导出报表</el-button>
            </div>
        </el-main>
    </el-container>
    <!-- <div class="exportContainer">
        <div class="ecard">
            <div>
                <el-icon :size="80" color="#536DFE">
                    <Grid />
                </el-icon>
            </div>
            <el-date-picker style="width: 90%"></el-date-picker>
            <div style="height: 6px;"></div>
            <p class="ecard_title">小时报表</p>
            <div style="height: 6px;"></div>
            <el-button type="primary" v-loading="eLoading" @click="exportXlsx('hour')">导出</el-button>
        </div>
        <div class="ecard">
            <div>
                <el-icon :size="80" color="#536DFE">
                    <Grid />
                </el-icon>
            </div>
            <el-date-picker style="width: 90%"></el-date-picker>
            <div style="height: 6px;"></div>
            <p class="ecard_title">日报表</p>
            <div style="height: 6px;"></div>
            <el-button type="primary" v-loading="eLoading" @click="exportXlsx('day')">导出</el-button>
        </div>
        <div class="ecard">
            <div>
                <el-icon :size="80" color="#536DFE">
                    <Grid />
                </el-icon>
            </div>
            <el-date-picker style="width: 90%"></el-date-picker>
            <div style="height: 6px;"></div>
            <p class="ecard_title">周报表</p>
            <div style="height: 6px;"></div>
            <el-button type="primary" v-loading="eLoading">导出</el-button>
        </div>
        <div class="ecard">
            <div>
                <el-icon :size="80" color="#536DFE">
                    <Grid />
                </el-icon>
            </div>
            <el-date-picker style="width: 90%"></el-date-picker>
            <div style="height: 6px;"></div>
            <p class="ecard_title">月报表</p>
            <div style="height: 6px;"></div>
            <el-button type="primary" v-loading="eLoading">导出</el-button>
        </div>
        <div class="ecard">
            <div>
                <el-icon :size="80" color="#536DFE">
                    <Grid />
                </el-icon>
            </div>
            <el-date-picker style="width: 90%"></el-date-picker>
            <div style="height: 6px;"></div>
            <p class="ecard_title">季度报表</p>
            <div style="height: 6px;"></div>
            <el-button type="primary" v-loading="eLoading">导出</el-button>
        </div>
        <div class="ecard">
            <div>
                <el-icon :size="80" color="#536DFE">
                    <Grid />
                </el-icon>
            </div>
            <el-date-picker style="width: 90%"></el-date-picker>
            <div style="height: 6px;"></div>
            <p class="ecard_title">年报表</p>
            <div style="height: 6px;"></div>
            <el-button type="primary" v-loading="eLoading">导出</el-button>
        </div>
    </div> -->
</template>
<script>
export default {
    data() {
        return {
            query: { time: '', type: 'hour' },
            eLoading: false,
            typeOptions: [
                { label: '小时', value: 'hour' },
                { label: '日', value: 'day' },
                { label: '周', value: 'week' },
                { label: '月', value: 'month' },
                { label: '季度', value: 'season' },
                { label: '年', value: 'year' },
            ]
        }
    },
    mounted() {
        this.initTime()
    },
    methods: {
        initTime() {
            let date = new Date()
            this.query.time = this.$TOOL.dateFormat(date)
        },
        exportExcel() {
            this.eLoading = true;
            this.$API.enp.envdata.export_excel.req(this.query).then(res => {
                if (res.path) {
                    window.open(res.path, '_blank')
                }
            }).then(() => { this.eLoading = false; })
        }
    },
}
</script>
<style scoped>
.exportContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, 210px);
    grid-template-rows: repeat(3, 210px);
    column-gap: 10px;
    row-gap: 10px;
}

.ecard {
    background-color: white;
    border-radius: 4%;
    text-align: center;
}

.ecard_title {
    font-size: 22px
}
</style>