<template>
    <div class="pd10">
        <el-row style="overflow-y: hidden">
            <el-col>
                <el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
                    <!-- 监测终端统计 -->
                    <el-tab-pane label="监测点分类总览" name="first" :style="'height:' + vh + ';overflow: hidden;'">
                        <Census v-if="activeName == 'first'"></Census>
                    </el-tab-pane>
                    <!-- 监测点统计 -->
                    <el-tab-pane label="各单位分类总览" name="second" :style="'height:' + vh + ';overflow: hidden;'">
                        <Census1 v-if="activeName == 'second'"></Census1>
                    </el-tab-pane>
                    <el-tab-pane label="变电站分类总览" name="third" :style="'height:' + vh + ';overflow: hidden;'">
                        <Census2 v-if="activeName == 'third'"></Census2>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Timslot from './indicatorClassification/Timeslot.vue'
import Timslot1 from './indicatorClassification/Timeslot1.vue'
import Census from './indicatorClassification/OverviewMonitor.vue'
import Census1 from './indicatorClassification/OverviewClassification.vue'
import Census2 from './indicatorClassification/SubstationsClassification.vue'

export default {
    name: 'zhuwanggailan',
    components: { Timslot1, Timslot, Census, Census1, Census2 },
    data() {
        return {
            vh: '',
            activeName: 'first',
            device: ''
        }
    },
    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>
@import url('../../styles/comStyle.less');
</style>
