<template>
    <div>
        <el-row>
            <el-col>
                <el-tabs v-model="activeName" @tab-click="handleClick" :style="'height:' + vh + ';'">
                    <el-tab-pane label="监测点报告" name="first">
                        <MonitoringpointReport></MonitoringpointReport>
                    </el-tab-pane>

                    <el-tab-pane label="区域报告" name="second">
                        <Region />
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import MonitoringpointReport from '@/views/Distributionnetwork-analysis/components/StatisticalReport/Analysisreport/MonitoringpointReport.vue'
import Region from '@/views/Distributionnetwork-analysis/components/StatisticalReport/Analysisreport/Region.vue'
export default {
    components: { MonitoringpointReport, Region },
    data() {
        return {
            vh: undefined,
            activeName: 'first'
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    }
}
</script>
<style lang="less" scoped>
#pane-first {
    padding: 0 10px !important;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
.block {
    margin-top: 10px;
}
</style>
