digital-agriculture-screen/src/views/business/index.vue

<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>
            <businessOne :data="state.data.one" />
          </template>
        </customBack>
      </div>
      <div class="left-charts-item">
        <customBack top-title="生产经营主体数量" :top-postion="'left'">
          <template #back>
            <businessTwo :data="state.data.two" :query="state.queryCode" />
          </template>
        </customBack>
      </div>
      <div class="left-charts-item">
        <customBack top-title="近三年用地规模曲线" :top-postion="'left'">
          <template #back>
            <businessThere :data="state.data.there" />
          </template>
        </customBack>
      </div>
    </el-col>
    <el-col :span="12">
      <businessMap></businessMap>
    </el-col>
    <el-col :span="6" class="right-charts">
      <div class="right-charts-item">
        <customBack top-title="证件状态看板" :top-postion="'right'">
          <template #back>
            <businessFour :data="state.data.four" />
          </template>
        </customBack>
      </div>
      <div class="right-charts-item">
        <customBack top-title="生产经营主体年收益排行" :top-postion="'right'">
          <template #back>
            <businessFive :data="state.data.five" />
          </template>
        </customBack>
      </div>
      <div class="right-charts-item">
        <customBack top-title="生产经营主体用地情况" :top-postion="'right'">
          <template #back>
            <businessSix :data="state.data.six" />
          </template>
        </customBack>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { nextTick, reactive, ref } from 'vue';
import { useApp } from '@/hooks';
import { sleep } from '@/utils';
import businessMap from './components/businessMap.vue';
import businessOne from './components/businessOne.vue';
import businessTwo from './components/businessTwo.vue';
import businessThere from './components/businessThere.vue';
import businessFour from './components/businessFour.vue';
import businessFive from './components/businessFive.vue';
import businessSix from './components/businessSix.vue';

const state = reactive({
  loading: false,
  data: {},
  queryCode: '',
});

// 加载
const loadData = async () => {
  state.loading = true;
  // GetInputsInfo()
  //   .then((res) => {
  //     if (res.code === 200) {
  //       state.data = res.data;
  //     }
  //   })
  //   .catch((err) => {
  //     app.$message.error(err.msg);
  //   });
  await sleep(500);
  state.data = {
    one: [
      { value: 13.8, name: '农企/合作社' },
      { value: 23.8, name: '农资企业' },
      { value: 24.1, name: '种源企业' },
      { value: 29.8, name: '生产加工企业' },
      { value: 8.5, name: '农户' },
    ],
    two: [
      { name: '耿马镇', value: 870 },
      { name: '勐撒镇', value: 603 },
      { name: '勐永镇', value: 854 },
      { name: '孟定镇', value: 635 },
      { name: '勐简乡', value: 795 },
      { name: '贺派乡', value: 662 },
      { name: '四排山乡', value: 584 },
      { name: '芒洪乡', value: 682 },
      { name: '大兴乡', value: 664 },
      { name: '信阳', value: 555 },
      { name: '新乡', value: 532 },
      { name: '大同', value: 511 },
    ],
    there: [
      { value: 66, name: '2021' },
      { value: 100, name: '2022' },
      { value: 50, name: '2023' },
      { value: 150, name: '2024' },
      { value: 80, name: '2025' },
    ],
    four: [
      { value: 58.9, label: '灌溉水田' },
      { value: 56.1, label: '基地地' },
      { value: 60.8, label: '望天田' },
      { value: 60.6, label: '水浇地' },
      { value: 32.6, label: '林地' },
      { value: 25.8, label: '育苗地' },
      { value: 56.0, label: '果园' },
      { value: 52.4, label: '草地' },
      { value: 6.3, label: '观测用地' },
      { value: 6.1, label: '监测用地' },
    ],
    five: [
      { name: '耿马镇', value: 87.84 },
      { name: '勐撒镇', value: 60.7 },
      { name: '勐永镇', value: 85.84 },
      { name: '孟定镇', value: 63.25 },
      { name: '勐简乡', value: 79.45 },
      { name: '贺派乡', value: 66.22 },
      { name: '四排山乡', value: 58.34 },
      { name: '芒洪乡', value: 68.12 },
      { name: '大兴乡', value: 66.34 },
      { name: '信阳', value: 55.75 },
      { name: '新乡', value: 53.32 },
      { name: '大同', value: 51.11 },
    ],
    six: [
      {
        name: '农企/合作社',
        value: 25,
      },
      {
        name: '农资企业',
        value: 40,
      },
      {
        name: '种源企业',
        value: 24,
      },
      {
        name: '生产加工企业',
        value: 32,
      },
      {
        name: '农户',
        value: 32,
      },
    ],
  };
  state.loading = false;
};

loadData();

const handleCommand = (data) => {
  state.queryCode = data.value;
};
</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>