<template>
  <div class="w-full h-full">
    <div class="chargselect">
      <WayFilter/>
    </div>
    <div class="data-monitor">
      <div class="left-container">
        <Left/>
      </div>
      <div class="center-container">
        <Center></Center>
      </div>
      <div class="right-container">
        <Right/>
      </div>
    </div>
  </div>
</template>
<script>
import WayFilter from "@/components/wayFilter/index.vue";
import Left from './components/Left/Left.vue'
import Right from './components/Right/index.vue'
import Center from './components/Center/index.vue'
export default {
  components: { WayFilter, Left, Right, Center }
}
</script>
<style lang="scss" scoped>
.chargselect {
  position: absolute;
  top: 2px;
  left: 10px;
  z-index: 999;
}
.data-monitor {
  padding-top: 50px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  .left-container, .right-container {
    width: 450px;
    display: flex;
    flex-direction: column;
    >div {
      flex: 1;
    }
  }
  .center-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
::v-deep .data-content {
  width: 100%;
  height: 100%;
  padding: 10px;
}
::v-deep .module-box {
  overflow: hidden;
  .module-content {
    overflow: auto;
  }
}
</style>