<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 + ';'"
          >
            <first v-if="activeName == 'first'"></first>
          </el-tab-pane>
          <el-tab-pane
            label="电压越限分析"
            name="second"
            :style="'height:' + vh + ';'"
          >
            <Census v-if="activeName == 'second'"></Census>
          </el-tab-pane>
          <el-tab-pane
            label="潮流倒送分析"
            name="third"
            :style="'height:' + vh + ';'"
          >
            <Census1 v-if="activeName == 'third'"></Census1>
          </el-tab-pane>
          <el-tab-pane
            label="渗透率分析"
            name="fourth"
            :style="'height:' + vh + ';'"
          >
            <Census2 v-if="activeName == 'fourth'"></Census2>
          </el-tab-pane>
          <el-tab-pane
            label="低功率因数统计"
            name="fifth"
            :style="'height:' + vh + ';'"
          >
            <Census3 v-if="activeName == 'fifth'"></Census3>
          </el-tab-pane>
          <el-tab-pane
            label="详细数据表"
            name="sixth"
            :style="'height:' + vh + ';'"
          >
            <Census4 v-if="activeName == 'sixth'"></Census4>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import first from "./DistributedPhotovoltaic/first.vue";
import Census from "./DistributedPhotovoltaic/Census.vue";
import Census1 from "./DistributedPhotovoltaic/Census1.vue";
import Census2 from "./DistributedPhotovoltaic/Census2.vue";
import Census3 from "./DistributedPhotovoltaic/Census3.vue";
import Census4 from "./DistributedPhotovoltaic/Census4.vue";
export default {
  name:'fbsgf',
  components: { first, Census, Census1, Census2, Census3, Census4 },
  data() {
    return {
      vh: "",
      vh1: "",
      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";
    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>
