<template>
  <div class="pd10">
    <el-row style="overflow-y: hidden">
      <el-col>
        <el-tabs
          :style="'height:' + vh1 + ';'"
          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-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Timslot from "./components/IndicatorClassification/Timeslot.vue";
import Timslot1 from "./components/IndicatorClassification/Timeslot1.vue";
import Census from "./components/IndicatorClassification/OverviewMonitor.vue";
import Census1 from "./components/IndicatorClassification/OverviewClassification.vue";

export default {
  name:'pwzbflgl',
  components: { Timslot1, Timslot, Census, Census1 },
  data() {
    return {
      vh: "",
      vh1: "",
      activeName: "first",
      device: "",
    };
  },
  created() {},
  mounted() {
    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") - 80 + "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>
