
<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 + ';'">
            <overview v-if="activeName == '1'"></overview>
          </el-tab-pane>

          <el-tab-pane
            label="电铁电能质量总览"
            name="2"
            :style="'height:' + vh + ';'"
          >
            <ElectricityOverview v-if="activeName == '2'"></ElectricityOverview>
          </el-tab-pane>

          <el-tab-pane
            label="发射特性分析"
            name="3"
            :style="'height:' + vh + ';'"
          >
            <EmissionAnalysis v-if="activeName == '3'"></EmissionAnalysis>
          </el-tab-pane>
          <el-tab-pane
            label="影响特性分析"
            name="4"
            :style="'height:' + vh + ';'"
          >
            <influence v-if="activeName == '4'"></influence>
          </el-tab-pane>

          <!-- <el-tab-pane
            label="详细数据表"
            name="5"
            :style="'height:' + vh + ';'"
          >
            <dataSheet v-if="activeName == '5'"></dataSheet>
          </el-tab-pane> -->
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import overview from "./ElectricRailwayLineCld/overview.vue";
import ElectricityOverview from "./ElectricRailwayLineCld/ElectricityOverview.vue";
import EmissionAnalysis from "./ElectricRailwayLineCld/EmissionAnalysis.vue";
import influence from "./ElectricRailwayLineCld/influence.vue";
import dataSheet from "./ElectricRailwayLineCld/dataSheet.vue";
export default {
  name:'dqhtlck',
  components: {
    overview,
    ElectricityOverview,
    EmissionAnalysis,
    influence,
    dataSheet,
  },
  data() {
    return {
      vh: "",
      zoom: "",
      activeName: "2",
      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') - 83 + "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;
}
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  height: 32px;
}
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  height: 32px;
}
</style>
