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="first" :style="'height:' + vh + ';'">
            <Total v-if="activeName=='first'"></Total>
          </el-tab-pane>

          <el-tab-pane label="稳态指标超标分类统计" name="second" :style="'height:' + vh + ';'">
            <Classification v-if="activeName=='second'"></Classification>
          </el-tab-pane>

          <el-tab-pane label="稳态指标超标明细" name="third" :style="'height:' + vh + ';'">
            <Detailed v-if="activeName=='third'"></Detailed>
          </el-tab-pane>

          <el-tab-pane label="稳态合格率统计" name="fourth" :style="'height:' + vh + ';'">
            <PassRate v-if="activeName=='fourth'"></PassRate>
          </el-tab-pane>

          <el-tab-pane label="稳态指标历史趋势" name="fifth" :style="'height:' + vh + ';'">
            <HistoricalTrends v-if="activeName=='fifth'"></HistoricalTrends>
          </el-tab-pane>
        </el-tabs>
      </el-col> 
    </el-row>
  </div> 
</template>
<script>
// import { tableheight } from "@/assets/commjs/common";
// import * as echarts from "echarts";
// import { getSteadyData, getClassificationData, getDetailedData, getPassRateData} from "@/api/steadyStateIndex";
import Total from "./components/SteadyState/Total.vue";
import Classification from "./components/SteadyState/Classification.vue";
import Detailed from "./components/SteadyState/Detailed.vue";
import PassRate from "./components/SteadyState/PassRate.vue";
import HistoricalTrends from "./components/SteadyState/HistoricalTrends.vue";
export default {
  components: { Total, Classification, Detailed, PassRate, HistoricalTrends },
  data() {
    return {
      vh: "",
      zoom: "",
      activeName: "first",
      device:'',
    };
  },
  created() {
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.vh = document.getElementById("app-main-in").offsetHeight - 80 + "px";
  },
  computed:{
    //计算表格高度
    // height(){
    //   return '100vh'- this.$refs.form.offsetHeight +259;
 
    // }
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },                 
};
</script>
<style lang="less" scoped>
@import url("../../styles/comStyle.less");
/deep/.el-table .cell {
  text-align: center;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
</style>
