daimp-front/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: 'all' },
            { label: '耿马镇', value: '耿马镇' },
            { label: '勐撒镇', value: '勐撒镇' },
            { label: '勐永镇', value: '勐永镇' },
            { label: '孟定镇', value: '孟定镇' },
            { label: '大兴乡', value: '大兴乡' },
          ]"
          :is-down="false"
          @command="handleCommand($event)"
        >
          <template #back>
            <value-charts :data="state.data.one" :query="state.queryCode"></value-charts>
            <!--<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($event)"
        >
          <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, onMounted, 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';
import ValueCharts from '@/views/entities/components/valueCharts.vue';

import Mock from 'mockjs';
const thirdRes = () => {
  return Mock.mock({
    'data|9': [
      {
        id: '@id',
        name: '@pick(["耿马镇", "勐撒镇", "勐永镇","孟定镇","勐简乡", "贺派乡", "四排山乡","芒洪乡","大兴乡"])',
        value1: function () {
          const num = Mock.Random.float(100, 300, 0, 2);
          return num % 1 === 0 ? num : parseFloat(num.toFixed(2));
        },
        // value: function () {
        //   // 确保 this.value1 是数字类型，再计算
        //   const num = Mock.Random.float(100, 300, 0, 2);
        //   return parseFloat((num / 5).toFixed(2));
        // },
      },
    ],
  });
};

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: 4152, name: '大兴乡' },
      { value: 4907.2, name: '勐撒镇' },
      { value: 4502.8, name: '勐永镇' },
      { value: 9455.7, name: '孟定镇' },
      { value: 8653.1, name: '耿马镇' },
    ],
    third: [
      // { value: 35.61, value1: 178.06, name: '耿马镇' },
      // { value: 11.81, value1: 59.06, name: '勐撒镇' },
      // { value: 11.08, value1: 55.41, name: '勐永镇' },
      // { value: 28.42, value1: 142.12, name: '孟定镇' },
      // { value: 12, value1: 65.99, name: '勐简乡' },
      // { value: 10.19, value1: 50.97, name: '贺派乡' },
      // { value: 6.61, value1: 33.08, name: '四排山乡' },
      // { value: 7.73, value1: 38.69, name: '芒洪乡' },
      // { value: 13.08, value1: 65.4, 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.toString();
  state.data.third = [...thirdRes().data];
  console.info(state.data.third);
  // nextTick(() => {
  //   thirdRef.value && thirdRef.value.refresData();
  // });
};

onMounted(() => {
  state.data.third = thirdRes().data;
});
</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>