l
<template>
  <div class="pd10">
    <el-row>
      <el-col> </el-col>
      <el-col>
        <el-tabs
          v-model.trim="activeName"
          @tab-click="handleClick"
          type="border-card"
        >
          <el-tab-pane
            label="在线率列表"
            name="first"
            :style="'height:' + vh + ';'"
          >
            <List></List>
          </el-tab-pane>

          <el-tab-pane
            label="在线率图表"
            name="second"
            :style="'height:' + vh + ';'"
          >
            <chart></chart>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import List from "./list/list.vue";
import chart from "./chart/chart.vue";
export default {
  name:'onlineratestatistics',
  components: { List, chart },
  data() {
    return {
      vh: "",
      activeName: "first",
      type: "暂态总体概况",
      device: "",
    };
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
  methods: {
    setHeight() {
      this.vh = window.sessionStorage.getItem('appheight') - 80 + "px";
     
        },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // researchFn() {
    //   this.item = this.$refs.interval.timeValue;
    //   setTimeout(() => {
    //     if(this.type=='暂态总体概况'){
    //       if(this.$refs.child.table==true){
    //         this.$refs.child.region();
    //         this.$refs.child.voltageLevel();
    //       }else if(this.$refs.child.chart==true){
    //         this.$refs.child.$refs.child.getechart1()
    //         this.$refs.child.$refs.child1.getechart2()
    //         this.$refs.child.$refs.child2.getechart3()
    //         this.$refs.child.$refs.child3.getechart4()
    //       }
    //     }else if(this.type=='暂态严重度统计'){
    //       this.$refs.child1.severity();
    //     }else if(this.type=='暂态原因统计'){
    //       this.$refs.child2.isLoading=true
    //       this.$refs.child2.$refs.child.getechart()
    //     }else if(this.type=='详细事件列表'){
    //       this.$refs.child3.eventlist();
    //     }else if(this.type=='暂降次数统计'){
    //       this.$refs.child4.numberOfDips();
    //     }else if(this.type=='暂升次数统计'){
    //       this.$refs.child5.temporaryrise();
    //     }else if(this.type=='短时中断次数统计')
    //       this.$refs.child6.shortinterruption();
    //   }, 100);

    // },
  },
};
</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;
}
</style>
