<template>
  <div>
    <el-row>
      <el-col>
        <el-tabs v-model.trim="activeName" @tab-click="handleClick">
          <el-tab-pane
            label="区域告警管理"
            name="first"
            :style="'height:' + vh + ';'"
          >
            <Regionalalarm v-if="activeName == 'first'"></Regionalalarm>
          </el-tab-pane>
          <el-tab-pane
            label="监测点告警管理"
            name="second"
            :style="'height:' + vh + ';'"
          >
            <MonitoringpointAlarm
              v-if="activeName == 'second'"
            ></MonitoringpointAlarm>
          </el-tab-pane>

          <el-tab-pane
            label="告警统计"
            name="third"
            :style="'height:' + vh + ';'"
          >
            <AlarmStatistics v-if="activeName == 'third'"></AlarmStatistics>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Regionalalarm from "./AlarmStatistics/Regionalalarm.vue";
import MonitoringpointAlarm from "./AlarmStatistics/MonitoringpointAlarm.vue";
import AlarmStatistics from "./AlarmStatistics/AlarmStatistics.vue";
export default {
  components: { Regionalalarm, MonitoringpointAlarm, AlarmStatistics },
  data() {
    return {
      vh: "",
      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") - 135 + "px";
          
        },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
};
</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 {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>
