daimp-front/sub-government-screen-service/src/views/land/index.vue

<template>
  <div class="data-home-index">
    <baseBg :name-val="'land'" top-title="土地资源管理系统">
      <template #center>
        <el-row style="width: 100%; height: 100%">
          <el-col :span="6" class="left-charts">
            <div class="left-charts-item">
              <subTop title="土地资源分布" :postion="'left'"></subTop>
              <distributionCharts></distributionCharts>
            </div>
            <div class="left-charts-item">
              <subTop title="土地流转信息" :postion="'left'"></subTop>
              <landCirculation></landCirculation>
            </div>
            <div class="left-charts-item">
              <subTop title="土地使用巡查案件" :postion="'left'"></subTop>
            </div>
          </el-col>
          <el-col :span="12">
            <centerMap></centerMap>
          </el-col>
          <el-col :span="6" class="right-charts">
            <div class="right-charts-item">
              <subTop title="农用地数据统计" :postion="'right'"></subTop>
              <landuseCharts></landuseCharts>
            </div>
            <div class="right-charts-item">
              <subTop title="年度农用地规划面积" :postion="'right'"></subTop>
            </div>
            <div class="right-charts-item">
              <subTop title="各地农用地利用面积" :postion="'right'"></subTop>
              <landareaCharts></landareaCharts>
            </div>
          </el-col>
        </el-row>
      </template>
    </baseBg>
  </div>
</template>
<script setup>
import baseBg from '@/components/baseBg.vue';
import subTop from '@/components/subTop.vue';
import centerMap from '@/components/centerMap.vue';
import distributionCharts from './components/distributionCharts.vue';
import landuseCharts from './components/landuseCharts.vue';
import landareaCharts from './components/landareaCharts.vue';
import landCirculation from './components/landCirculation.vue';
import { reactive } from '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>