<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/globalStatistics.vue
 * @Date: 2022-08-27 10:01:11
 * @Description: 
 * @LastEditTime: 2022-09-03 14:28:01
 * @LastEditors: changjun
-->
<script setup lang="ts">
import { ElScrollbar } from 'element-plus';
import TrafficTopTen from './components/TrafficTopTen.vue'
import IndicatorMap from './components/IndicatorMap.vue'
import TrafficStatistical from './components/TrafficStatistical.vue'
import OperatorTraffic from './components/OperatorTraffic.vue'
</script>

<template>
  <div class="global-statistics-container">
    <ElScrollbar>
      <div class="global-statistics-con">
        <div class="global-statistics-top">
          <TrafficTopTen class="global-statistics-top-block" :type="1" />
          <IndicatorMap class="center-map ml-16"></IndicatorMap>
          <TrafficTopTen class="global-statistics-top-block ml-16" :type="2" />
        </div>

        <div class="global-statistics-bottom mt-16">
          <TrafficStatistical class="traffic-item" />
          <OperatorTraffic class="operator-item ml-16" />
        </div>
      </div>
    </ElScrollbar>
  </div>

</template>

<style lang="scss" scoped>
.global-statistics-container {
  width: 100%;
  // height: calc(100vh - 120px);
  overflow: auto;
}

.global-statistics-con {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.global-statistics-top {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // min-width: 1305px;

  .global-statistics-top-block {
    width: 25%;
    height: 100%;
    height: 550px;
  }

  .center-map {
    width: calc(50% - 32px);
  }
}

.global-statistics-bottom {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 690px);
  // min-width: 1305px;

  .traffic-item {
    width: calc(60% - 16px);
  }

  .operator-item {
    width: 40%;
  }
}
</style>
