<template>
  <div>
    <Timeinterval ref="Timeinterval" :interval="3" v-show="false" />
    <el-tabs v-model="activeName">
      <el-tab-pane
        label="台账统计"
        name="1"
        :style="'height:' + (vh - 130) + 'px;'"
      >
        <StandingBook :time="time" v-if="activeName == 1" />
      </el-tab-pane>
      <el-tab-pane
        label="稳态统计"
        name="2"
        :style="'height:' + (vh - 130) + 'px;'"
      >
        <Steady :time="time" v-if="activeName == 2" />
      </el-tab-pane>
      <el-tab-pane
        label="暂态统计"
        name="3"
        :style="'height:' + (vh - 130) + 'px;'"
      >
        <Transient :time="time" v-if="activeName == 3" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import StandingBook from "./Distributed/StandingBook";
import Steady from "./Distributed/Steady";
import Transient from "./Distributed/Transient";
import Timeinterval from "@/views/components/TimePicker/index4";

export default {
  components: { StandingBook, Steady, Transient, Timeinterval },
  props: {},
  data() {
    return { activeName: "1", vh: undefined, time: [] };
  },
  created() {},
  mounted() {
    this.time = [
      this.$refs.Timeinterval.timeValue[0],
      this.$refs.Timeinterval.timeValue[1],
    ];
    this.vh = document.getElementById("app-main-in").offsetHeight;
  },
  methods: {},

  computed: {},

  watch: {},
};
</script>
<style lang="scss" scoped></style>
