<template>
  <dashboard-container>
    <top-title class="wow slideInDown" name="工作质量管理大屏"></top-title>

    <template #left>
      <div class="item item-center4">
        <date-total />
      </div>
      <div class="item item-center1">
        <div class="dashboard-title">分级质量控制</div>
        <sampling-party-situation />
      </div>
      <div class="item item-center3">
        <div class="dashboard-title">抽查内容分布</div>
        <spot-check-content />
      </div>
    </template>
    <template #center>
      <div class="item item-center">
        <work-quality />
      </div>
      <div class="item">
        <div class="dashboard-title">发现问题次数走势</div>
        <line-chart />
      </div>
    </template>
    <template #right>
      <div class="item">
        <!-- 巡检人员表现排名 -->
        <inspection-staff />
      </div>
      <div class="item">
        <!-- 异常情况排名 -->
        <abnormal-situation-ranking />
      </div>
      <div class="item">
        <div class="dashboard-title">实时告警</div>
        <abnormal-team />
      </div>
    </template>
  </dashboard-container>
</template>

<script setup>
  import LineChart from './LineChart.vue';
  import SpotCheckContent from '@/views/dataBigScreen/dashboard-work/SpotCheckContent.vue';
  import AbnormalSituationRanking from '@/views/dataBigScreen/dashboard-work/AbnormalSituationRanking.vue';
  import SamplingPartySituation from '@/views/dataBigScreen/dashboard-work/SamplingPartySituation.vue';
  import AbnormalTeam from '@/views/dataBigScreen/dashboard-work/AbnormalTeam.vue';
  import WorkQuality from '@/views/dataBigScreen/dashboard-work/WorkQuality.vue';
  import TopTitle from '@/views/dataBigScreen/dashboard/TopTitle.vue';
  import InspectionStaff from '@/views/dataBigScreen/dashboard-work/InspectionStaff.vue';
  import DateTotal from '@/views/dataBigScreen/dashboard-work/DateTotal.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%);
    overflow: hidden;

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

    &.item-center1 {
      height: calc(50% - 4px);
    }

    &.item-center3 {
      height: calc(50% - 104px);
    }

    &.item-center4 {
      height: 100px;
    }
  }
</style>
