<template>
  <div class="data-home-index">
    <baseBg :name-val="'plant'" 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>
                  <plantTypeCharts></plantTypeCharts>
                </template>
              </customBack>
            </div>
            <div class="left-charts-item">
              <customBack top-title="昆虫害监测" :top-postion="'left'">
                <template #back>
                  <insectPestsCharts></insectPestsCharts>
                </template>
              </customBack>
            </div>
            <div class="left-charts-item">
              <customBack top-title="病理害监测" :top-postion="'left'">
                <template #back>
                  <pathologyCharts></pathologyCharts>
                </template>
              </customBack>
            </div>
          </el-col>
          <el-col :span="12">
            <el-row style="height: 60%">
              <el-col :span="24"></el-col>
            </el-row>
            <el-row style="height: 40%">
              <el-col :span="12">
                <customBack top-title="水肥检测分析" :top-postion="'left'">
                  <template #back>
                    <waterfertilizerCharts></waterfertilizerCharts>
                  </template>
                </customBack>
              </el-col>
              <el-col :span="12">
                <customBack top-title="智慧水肥灌溉" :top-postion="'right'"> <template #back></template> </customBack>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" class="right-charts">
            <div class="right-charts-item">
              <customBack top-title="智慧监控 A区 QQI" :top-postion="'right'">
                <template #back></template>
              </customBack>
            </div>
            <div class="right-charts-item">
              <customBack top-title="种植产量分析" :top-postion="'right'">
                <template #back></template>
              </customBack>
            </div>
            <div class="right-charts-item">
              <customBack top-title="水质检测分析" :top-postion="'right'">
                <template #back></template>
              </customBack>
            </div>
          </el-col>
        </el-row>
      </template>
    </baseBg>
  </div>
</template>
<script setup>
import baseBg from '@/components/baseBg.vue';
import customBack from '@/components/customBack.vue';
import plantTypeCharts from './components/plantTypeCharts.vue';
import insectPestsCharts from './components/insectPestsCharts';
import pathologyCharts from './components/pathologyCharts.vue';
import waterfertilizerCharts from './components/waterfertilizerCharts.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);
  }
}
</style>
