lanju-front/src/views/kanban/exception/index.vue

<!--<template>-->
<!--  <div id="data-view">-->
<!--    <div id="dv-full-screen-container" >-->
<!--&lt;!&ndash;      <p class="time">&ndash;&gt;-->
<!--&lt;!&ndash;        {{ gettimedata }}&ndash;&gt;-->
<!--&lt;!&ndash;      </p>&ndash;&gt;-->
<!--      <top-header />-->

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

<!--        <div class="block-left-right-content">-->
<!--&lt;!&ndash;          <ranking-board />&ndash;&gt;-->

<!--          <div class="block-top-bottom-content">-->
<!--&lt;!&ndash;            <div class="block-top-content">&ndash;&gt;-->
<!--&lt;!&ndash;              <rose-chart />&ndash;&gt;-->

<!--&lt;!&ndash;              <water-level-chart />&ndash;&gt;-->

<!--&lt;!&ndash;              <scroll-board />&ndash;&gt;-->
<!--            <carousel />-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->

<!--&lt;!&ndash;            <cards2 />&ndash;&gt;-->
<!--          </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>-->

<template>
  <div id="data-view">
    <dv-full-screen-container>

      <top-header />

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

        <carousel />
<!--        <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 />-->
<!--            </div>-->

<!--            <cards />-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </dv-full-screen-container>
  </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 cards from './cards'
import carousel from './carousel'

export default {
  name: 'DataView',
  components: {
    topHeader,
    digitalFlop,
    rankingBoard,
    roseChart,
    waterLevelChart,
    scrollBoard,
    cards,
    carousel
  },
  data () {
    return {}
  },
  methods: {}
}
</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;
  }

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

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

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

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
}
</style>