<template>
  <div class="data-home-index">
    <baseBg :name-val="'breed'" top-title="智慧养殖管理系统">
      <template #center>
        <el-row style="width: 100%; height: 100%">
          <el-col :span="6" class="left-charts">
            <div class="left-charts-item">
              <customBack top-title="存栏数据分析" :top-postion="'left'">
                <template #back>
                  <InventoryCharts></InventoryCharts>
                </template>
              </customBack>
            </div>
            <div class="left-charts-item">
              <customBack top-title="饲料与饮水量监测" :top-postion="'left'">
                <template #back>
                  <waterIntakeCharts></waterIntakeCharts>
                </template>
              </customBack>
            </div>
            <div class="left-charts-item">
              <customBack top-title="生长指标监测" :top-postion="'left'">
                <template #back>
                  <growthIndexesCharts></growthIndexesCharts>
                </template>
              </customBack>
            </div>
          </el-col>
          <el-col :span="12" style="height: 100%">
            <el-row style="height: 67%">
              <el-col :span="24" class="center-top" style="height: 100%">
                <div class="notice">
                  <noticeBar :height="'40px'"></noticeBar>
                </div>
                <div class="top">
                  <environment></environment>
                </div>
                <div class="map-gis">
                  <plantgs></plantgs>
                </div>
              </el-col>
            </el-row>
            <el-row style="height: 33%" :gutter="30">
              <el-col :span="12" style="height: 100%">
                <customBack top-title="健康状况指标" :top-postion="'left'">
                  <template #back>
                    <healthStatusCharts></healthStatusCharts>
                  </template>
                </customBack>
              </el-col>
              <el-col :span="12" style="height: 100%">
                <customBack top-title="智慧投喂控制" :top-postion="'right'">
                  <template #back>
                    <irrigationCharts></irrigationCharts>
                  </template>
                </customBack>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" class="right-charts">
            <div class="right-charts-item">
              <customBack top-title="智慧监控" :top-postion="'right'">
                <template #back>
                  <monitoringScreen></monitoringScreen>
                </template>
              </customBack>
            </div>
            <div class="right-charts-item">
              <customBack top-title="生产性能与效益数额" :top-postion="'right'">
                <template #back>
                  <benefitCharts></benefitCharts>
                </template>
              </customBack>
            </div>
            <div class="right-charts-item">
              <customBack top-title="设备数据统计" :top-postion="'right'">
                <template #back>
                  <deviceCharts></deviceCharts>
                </template>
              </customBack>
            </div>
          </el-col>
        </el-row>
      </template>
    </baseBg>
  </div>
</template>
<script setup>
import InventoryCharts from './components/InventoryCharts.vue';
import waterIntakeCharts from './components/waterIntakeCharts.vue';
import growthIndexesCharts from './components/growthIndexesCharts.vue';
import environment from './components/environment.vue';
import plantgs from './components/plantgs.vue';
import noticeBar from './components/noticeBar.vue';
import irrigationCharts from './components/irrigationCharts.vue';
import healthStatusCharts from './components/healthStatusCharts.vue';
import monitoringScreen from './components/monitoringScreen.vue';
import benefitCharts from './components/benefitCharts.vue';
import deviceCharts from './components/deviceCharts.vue';
</script>
<style lang="scss" scoped>
.data-home-index {
  .left-charts {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .left-charts-item {
    width: 100%;
    height: calc((100% - 30px) / 3);
  }

  .right-charts {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .right-charts-item {
    width: 100%;
    height: calc((100% - 30px) / 3);
  }

  .center-top {
    padding: 16px;
    .notice,
    .top,
    .map-gis {
      display: inline-block;
      width: 100%;
    }
    .notice {
      height: 40px;
    }
    .top {
      height: 80px;
    }
    .map-gis {
      height: calc(100% - 140px);
    }
  }
}
</style>
