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="1" :style="'height:' + vh + 'px;'">
            <Navigation
            v-if='activeName==1'
              @Statistics="Statistics"
              @analysis="analysis"
              @Administration="Administration"
          />
          </el-tab-pane>
          <el-tab-pane label="事件统计" name="2" :style="'height:' + vh + 'px;'"
            >
            <Statistics  v-if='activeName==2' />
          </el-tab-pane>
          <el-tab-pane label="事件分析" name="3" :style="'height:' + vh + 'px;'"
            >
            <analysis  v-if='activeName==3'/>
          </el-tab-pane>
          <el-tab-pane
            label="运行情况"
            name="4"
            :style="'height:' + vh + 'px;'"
          >
            <situation  v-if='activeName==4'
          /></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Navigation from "@/views/Event-boot/components/monitoringpoint/Navigation.vue";
import analysis from "@/views/Event-boot/components/monitoringpoint/analysis.vue";
import situation from "@/views/Event-boot/components/monitoringpoint/situation.vue";
import Statistics from "@/views/Event-boot/components/monitoringpoint/Statistics.vue";

export default {
  components: { Navigation, analysis, situation, Statistics },
  data() {
    return {
      vh: undefined,
      activeName: "1"
    };
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
    this.vh = window.sessionStorage.getItem('appheight') - 82;
          
     
        },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    Statistics(){
this.activeName='2'
    },
    analysis(){
this.activeName='3'
    },
    Administration(){
this.activeName='4'
    },
  }
};
</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;
}
.block {
  margin-top: 10px;
  
}
</style>
