new-digital-agriculture-screen/src/views/entities/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'"
          :down-title="'全县'"
          :label-field="'label'"
          :value-field="'value'"
          :down-width="''"
          :options="[
            { label: '全县', value: '530926' },
            { label: '耿马镇', value: '42611' },
            { label: '勐撒镇', value: '9259' },
            { label: '勐永镇', value: '17787' },
            { label: '孟定镇', value: '42610' },
            { label: '勐简乡', value: '17788' },
            { label: '贺派乡', value: '40161' },
            { label: '四排山乡', value: '40163' },
            { label: '大兴乡', value: '40159' },
          ]"
          :is-down="true"
          @command="handleCommand"
        >
          <template #back>
            <entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>
          </template>
        </customBack>
      </div>
      <div class="left-charts-item">
        <customBack top-title="全县各作物产值对比" :top-postion="'left'">
          <template #back>
            <entitieslist></entitieslist>
          </template>
        </customBack>
      </div>
      <div class="left-charts-item">
        <customBack
          top-title="全县作物产量对比"
          :top-postion="'left'"
          :down-title="'烟草'"
          :label-field="'label'"
          :value-field="'value'"
          :down-width="''"
          :options="[
            { label: '烟草', value: 1 },
            { label: '甘蔗', value: 2 },
            { label: '核桃', value: 3 },
            { label: '蔬菜', value: 4 },
            { label: '其他', value: 5 },
          ]"
          :is-down="true"
          @command="handleContrast"
        >
          <template #back>
            <entitiesStatistics ref="thirdRef" :data="state.data.third" :query="state.contrastCode"></entitiesStatistics>
          </template>
        </customBack>
      </div>
    </el-col>
    <el-col :span="12">
      <entitiesMap></entitiesMap>
    </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 { nextTick, reactive, ref } from 'vue';
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';
import entitiesMap from './components/entitiesMap.vue';
import { sleep } from '@/utils';

const oneRef = ref(null);
const thirdRef = ref(null);

const state = reactive({
  loading: false,
  data: {},
  queryCode: '',
  contrastCode: '',
});
const loadData = async () => {
  state.loading = true;
  await sleep(500);
  state.data = {
    one: [
      { value: 5, name: '2020' },
      { value: 36, name: '2021' },
      { value: 70, name: '2022' },
      { value: 56, name: '2023' },
      { value: 70, name: '2024' },
      { value: 20, name: '2025' },
    ],
    third: [
      { value: 98, value1: 88, name: '耿马镇' },
      { value: 55, value1: 117, name: '勐撒镇' },
      { value: 65, value1: 145, name: '勐永镇' },
      { value: 60, value1: 126, name: '孟定镇' },
      { value: 40, value1: 86, name: '勐简乡' },
      { value: 81, value1: 152, name: '贺派乡' },
      { value: 41, value1: 130, name: '四排山乡' },
      { value: 100, value1: 101, name: '芒洪乡' },
      { value: 79, value1: 184, name: '大兴乡' },
    ],
  };
};
loadData();

const handleCommand = (data) => {
  state.queryCode = data.value;
  // console.info('data=', data);
  // nextTick(() => {
  //   oneRef.value && oneRef.value.refresData();
  // });
};
const handleContrast = (data) => {
  state.contrastCode = data.value;
  // console.info('data=', data);
  nextTick(() => {
    thirdRef.value && thirdRef.value.refresData();
  });
};
</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>