<template>
  <div id="data-view">
    <div id="dv-full-screen-container" style="width:100vw;height:100vh">
<!--      <p class="time">-->
<!--        {{ gettimedata }}-->
<!--      </p>-->
      <top-header />

      <div class="main-content">
        <digital-flop />

        <div class="block-left-right-content">
<!--          <ranking-board />-->

          <div class="block-top-bottom-content">
<!--            <div class="block-top-content">-->
<!--              <rose-chart />-->

<!--              <water-level-chart />-->

<!--              <scroll-board />-->
            <carousel />
<!--            </div>-->

<!--            <cards2 />-->
          </div>

        </div>
      </div>
    </div>

  </div>

</template>

<script>
import topHeader from './topHeader'
import digitalFlop from './digitalFlop'
import rankingBoard from './rankingBoard'
import roseChart from './roseChart'
import waterLevelChart from './waterLevelChart'
import scrollBoard from './scrollBoard'
import carousel from './carousel'
import cards2 from './cards2'
import moment from "moment";

export default {
  name: 'DataView',
  components: {
    topHeader,
    digitalFlop,
    rankingBoard,
    roseChart,
    waterLevelChart,
    scrollBoard,
    cards2,
    carousel
  },
  data () {
    return {
      gettimedata: "",
    }
  },
  mounted() {
    this.gettime();
  },
  methods: {
    gettime() {
      this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
      setInterval(() => {
        this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
      }, 1000);
    },
  }
}
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('../../../assets/images/bg-exception.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 10px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 0px;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
  .time {
    font-size: 30px;
    font-weight: 400;
    color: #ffffff;
    line-height: 71px;


    position: fixed;
    top: 0;
    z-index: 9999;;
    padding: 10px;
    width: 100%;
  }
}
</style>
