<template>
  <dashboard-container>
    <top-title class="wow slideInDown" name="智慧大屏监控中心"></top-title>
    <template #left>
      <div class="item">
        <!-- 重大违禁品情况 -->
        <major-contraband-cases />
      </div>
      <div class="item">
        <!-- 故意隐匿情况 -->
        <deliberate-concealment />
      </div>
      <div class="item">
        <div class="dashboard-title">查获类别分布</div>
        <pie-chart />
      </div>
    </template>
    <template #center>
      <div class="item item-center">
        <classification-of-seized-quantity />
      </div>
      <div class="item">
        <!-- 查获排名 -->
        <seized-ranking />
      </div>
    </template>
    <template #right>
      <div class="item">
        <!-- 查获通道分布 -->
        <channel-distribution />
      </div>
      <div class="item">
        <div class="dashboard-title">查获时段分布</div>
        <line-chart />
      </div>
      <div class="item">
        <div class="dashboard-title">查获岗位分布</div>
        <pie-radius-chart />
      </div>
    </template>
  </dashboard-container>
</template>

<script setup>
import TopTitle from './TopTitle.vue';
import PieChart from './PieChart.vue';
import PieRadiusChart from './PieRadiusChart.vue';
import LineChart from './LineChart.vue';
import MajorContrabandCases from './MajorContrabandCases.vue';
import SeizedRanking from './SeizedRanking.vue';
import DeliberateConcealment from './DeliberateConcealment.vue';
import ChannelDistribution from './ChannelDistribution.vue';
import ClassificationOfSeizedQuantity from '@/views/dataBigScreen/dashboard/ClassificationOfSeizedQuantity.vue';
import DashboardContainer from '@/views/dataBigScreen/dashboard/components/DashboardContainer.vue';
</script>

<style lang="scss" scoped>
.item {
  width: calc(100% + -0px);
  height: calc(33.33% - 8px);
  position: relative;
  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);

  &.item-center {
    height: calc(66.66% - 4px);
  }
}

.dashboard-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  z-index: 1;
  align-content: flex-start;
  background: url(/src/assets/images/titlebg-4340cf1c.png);
  background-size: 100% 100%;
  font-weight: 400;
  font-size: 14px;
  color: #fbffff;
  padding: 0 20px;
  height: 42px;
}
</style>
