<template>
  <el-row class="data-home-index">
    <el-col :span="6" class="left-charts">
      <div class="left-charts-item">
        <customBack top-title="全县历年产值对比" :top-postion="'left'">
          <template #back>
            <entitiesCategoryCharts></entitiesCategoryCharts>
          </template>
        </customBack>
      </div>
      <div class="left-charts-item">
        <customBack top-title="全县各作物产值对比" :top-postion="'left'">
          <template #back>
            <entitiesStatistics></entitiesStatistics>
          </template>
        </customBack>
      </div>
      <div class="left-charts-item">
        <customBack top-title="全县作物产量对比" :top-postion="'left'">
          <template #back>
            <entitiesStatistics></entitiesStatistics>
          </template>
        </customBack>
      </div>
    </el-col>
    <el-col :span="12">
      <centerMap></centerMap>
    </el-col>
    <el-col :span="6" class="right-charts">
      <div class="right-charts-item">
        <customBack top-title="经营主体产值对比" :top-postion="'right'">
          <template #back>
            <categoryCharts></categoryCharts>
          </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>
            <hotCharts></hotCharts>
          </template>
        </customBack>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import centerMap from '@/components/centerMap.vue';
import categoryCharts from './components/categoryCharts.vue';
import entitieslist from './components/entitieslist.vue';
import hotCharts from './components/hotCharts.vue';
import benefitCharts from './components/benefitCharts.vue';
import entitiesStatistics from './components/entitiesStatistics.vue';
import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
</script>
<style lang="scss" scoped>
.data-home-index {
  width: 100%;
  height: 100%;
  .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>
