<template>
  <div>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="位移点" name="first">
        <displacement v-if="activeName =='first'"></displacement>
      </el-tab-pane>
     <!-- <el-tab-pane label="渗流点" name="second">
        <Seepage v-if="activeName =='second'"></Seepage>
      </el-tab-pane>
      <el-tab-pane label="测压计点" name="third">
        <Pressures v-if="activeName =='third'"></Pressures>
      </el-tab-pane> -->
      <el-tab-pane label="测压管点" name="Four">
        <PiezometricTube v-if="activeName =='Four'"></PiezometricTube>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import  Seepage  from './components/Seepage.vue'
import Pressures from './components/Pressures.vue'
import displacement from './components/displacement.vue'
import PiezometricTube from './components/PiezometricTube.vue'

export default {
  name: 'alertConfigur',
  components: {
    Seepage,
    Pressures,
    displacement,
    PiezometricTube
  },
  data() {
    return {
        activeName:'first',
    }
  },
  methods:{
    handleClick(val){
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>
html,body{
  
  width:100% !important;
  height:100% !important;
}
.el-tabs .el-tabs--top{
  width:100% !important;
  height:100% !important;
}
.el-tabs ,.el-tab-pane,.bbsl-table-content{
  width:100% !important;
  height:100% !important;
}
</style>
