<template>
    <div class="pd10">
        <el-row>
            <el-col>
                <el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
                    <el-tab-pane label="电能质量问题查询维护" name="1" :style="'height:' + vh + 'px;'">
                        <QueryMaintenance v-if="activeName == '1'"></QueryMaintenance>
                    </el-tab-pane>
                    <el-tab-pane label="电能质量问题审核" name="2" :style="'height:' + vh + 'px;'">
                        <Qualityproblems v-if="activeName == '2'"></Qualityproblems>
                    </el-tab-pane>
                    <el-tab-pane label="在线监测" name="3" :style="'height:' + vh + 'px;'">
                        <onlineMonitoring v-if="activeName == '3'"></onlineMonitoring>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import QueryMaintenance from './components/electricitymanagement/QueryMaintenance.vue'
import Qualityproblems from './components/electricitymanagement/Qualityproblems.vue'
import onlineMonitoring from './components/electricitymanagement/onlineMonitoring.vue'
export default {
    name: 'dnzlwtgl',
    components: { QueryMaintenance, Qualityproblems,onlineMonitoring },
    data() {
        return {
            vh: undefined,
            activeName: '1'
        }
    },
    created() { },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 82
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../styles/comStyle.less');

::v-deep .el-table .cell {
    text-align: center;
}

::v-deep .el-tabs--border-card>.el-tabs__content {
    padding: 10px;
}

.block {
    margin-top: 10px;
}

::v-deep .el-carousel__button {
    background-color: #000;
}
</style>
