l
<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="first">
                        <Total v-if="activeName == 'first'"></Total>
                    </el-tab-pane>

                    <!-- <el-tab-pane label="稳态指标超标分类统计" name="second" >
            <Classification></Classification>
          </el-tab-pane>

          <el-tab-pane label="稳态指标超标明细" name="third" >
            <Detailed></Detailed>
          </el-tab-pane> -->

                    <el-tab-pane label="稳态合格率统计" name="second">
                        <PassRate v-if="activeName == 'second'"></PassRate>
                    </el-tab-pane>

                    <el-tab-pane label="稳态指标历史趋势" name="third">
                        <!-- v-if="id != '' ? true : false" -->
                        <trend ref="trend" :id="id"></trend>
                    </el-tab-pane>

                    <!-- <el-tab-pane label="稳态指标历史趋势" name="fifth" >
            <HistoricalTrends v-if="activeName=='fifth'"></HistoricalTrends>
          </el-tab-pane> -->
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import Total from './components/SteadyStateIndicators/Total.vue'
import PassRate from './components/SteadyStateIndicators/PassRate.vue'
import trend from './components/SteadyStateIndicators/trend.vue'
export default {
    name: 'pwwtzb',
    components: { Total, PassRate, trend },
    data() {
        return {
            vh: '',
            zoom: '',
            activeName: 'first',
            device: '',
            id: ''
        }
    },
    created() {},
    mounted() {
        if (this.$route.params.id != undefined) {
            this.id = this.$route.params.id

            if (this.id != '') {
                this.activeName = 'third'
                this.$nextTick(() => {
                    // this.$refs.steadyState.getTemplateLists();
                })
            }
        }

        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') - 70 + 'px'
        },

        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;
// }
// ::v-deep .el-form-item--small .el-form-item__content,
// .el-form-item--small .el-form-item__label {
//   height: 32px;
// }
// ::v-deep .el-form-item--small .el-form-item__content,
// .el-form-item--small .el-form-item__label {
//   height: 32px;
// }
</style>
