<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 + ';'"
          >
            <Census v-if="activeName == 'first'"></Census>
          </el-tab-pane>
          <!-- 监测点统计 -->
          <el-tab-pane
            label="稳态指标合格率统计"
            name="second"
            :style="'height:' + vh + ';'"
          >
            <Census1 v-if="activeName == 'second'"></Census1>
          </el-tab-pane>
          <el-tab-pane
            label="稳态指标历史趋势"
            name="third"
            :style="'height:' + vh + ';'"
         
          >
            <Census2 :id="id" v-if="activeName == 'third'"></Census2>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Census from "./steadyStateIndicators/Census.vue";
import Census1 from "./steadyStateIndicators/Census1.vue";
import Census2 from "./steadyStateIndicators/Census2.vue";

export default {
  name:'zwwtzb',
  components: { Census, Census1, Census2 },
  data() {
    return {
      vh: "",
      vh1: "",
      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.device = window.devicePixelRatio;
    
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem('appheight') - 76 + "px";
    this.vh1 = window.sessionStorage.getItem('appheight') - 20 + "px";
     
        },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../styles/comStyle.less");

</style>
