daimp-front/sub-government-affairs-service/src/views/resource/database/Statistics.vue

<template>
  <!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
  <div class="custom-page">
    <!-- <div class="custom-page"> -->
    <div class="content">
      <div style="display: flex">
        <pieChart v-for="(item, index) in data" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
      </div>
      <div style="display: flex; margin-top: 20px">
        <pieChart v-for="(item, index) in data1" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getOverview, getSubArea } from '../../../apis/resource/statisticAnalysis';
import { getAssetsFile } from '@/utils';
import { ref, onBeforeMount, reactive } from 'vue';
import 'echarts-gl';
import pieChart from './components/pie-chart.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { color } from 'echarts';
let dataColor0 = ['#01D3D3', '#00C4F2', '#4A68FF', '#00DD97', '#01D3D3', '#00C4F2', '#4A68FF', '#00DD97'];
let data = ref([
  {
    title: '农用地面积数据',
    data: [
      {
        name: '耕地',
        itemStyle: {
          opacity: 0.9,
          color: '#01D3D3',
        },
        value: '45.60',
      },
      {
        name: '园地',
        itemStyle: {
          opacity: 0.9,
          color: '#00C4F2',
        },
        value: '28.49',
      },
      {
        name: '草地',
        itemStyle: {
          opacity: 0.9,
          color: '#4A68FF',
        },
        value: '16.30',
      },
      {
        name: '林地',
        itemStyle: {
          opacity: 0.9,
          color: '#00DD97',
        },
        value: '17.71',
      },
    ],
    refs: 'chart1',
  },
  {
    title: '土地流转面积数据',
    data: [
      {
        name: '耕地',
        itemStyle: {
          opacity: 0.9,
          color: '#01D3D3',
        },
        value: '3.63',
      },
      {
        name: '园地',
        itemStyle: {
          opacity: 0.9,
          color: '#00C4F2',
        },
        value: '2.65',
      },
      {
        name: '草地',
        itemStyle: {
          opacity: 0.9,
          color: '#4A68FF',
        },
        value: '2.14',
      },
      {
        name: '林地',
        itemStyle: {
          opacity: 0.9,
          color: '#00DD97',
        },
        value: '1.65',
      },
    ],
    refs: 'chart1',
  },
  {
    title: '耕地面积数据',
    data: [
      {
        name: '水浇地',
        itemStyle: {
          opacity: 0.9,
          color: '#01D3D3',
        },
        value: '20.72',
      },
      {
        name: '水田',
        itemStyle: {
          opacity: 0.9,
          color: '#00C4F2',
        },
        value: '28.49',
      },
      {
        name: '旱地',
        itemStyle: {
          opacity: 0.9,
          color: '#4A68FF',
        },
        value: '16.30',
      },
    ],
    refs: 'chart1',
  },
]);

let data1 = ref([
  {
    title: '园地面积数据',
    data: [
      {
        name: '果园',
        itemStyle: {
          opacity: 0.9,
          color: '#01D3D3',
        },
        value: '15.44',
      },
      {
        name: '茶园',
        itemStyle: {
          opacity: 0.9,
          color: '#00C4F2',
        },
        value: '13.01',
      },
    ],
    refs: 'chart1',
  },
  {
    title: '林地面积数据',
    data: [
      {
        name: '灌木从地',
        itemStyle: {
          opacity: 0.9,
          color: '#01D3D3',
        },
        value: '7.49',
      },
      {
        name: '竹林地',
        itemStyle: {
          opacity: 0.9,
          color: '#00C4F2',
        },
        value: '8.80',
      },
    ],
    refs: 'chart1',
  },
  {
    title: '草地面积数据',
    data: [
      {
        name: '人工牧草地',
        itemStyle: {
          opacity: 0.9,
          color: '#01D3D3',
        },
        value: '10.71',
      },
      {
        name: '其他',
        itemStyle: {
          opacity: 0.9,
          color: '#00C4F2',
        },
        value: '1.71',
      },
    ],
    refs: 'chart1',
  },
]);

onBeforeMount(() => {
  // getData();
});

const getData = async () => {
  try {
    let res = await getOverview();
    console.log(res);
    let res1 = await getOverview({ landTransfer: 1 });
    res1.data.list.forEach((data2, index) => {
      data.value[1].data.push({
        name: data2.landTypeName,
        value: data2.area,
        itemStyle: {
          opacity: 0.9,
          color: dataColor0[index],
        },
      });
    });
    res.data.list.forEach(async (data1, index) => {
      data.value[0].data.push({
        name: data1.landTypeName,
        value: data1.area,
        itemStyle: {
          opacity: 0.9,
          color: dataColor0[index],
        },
      });
      // data.value[0].data[index].value = data1.area;
      // data.value[0].data[index].name = data1.landTypeName;
      getOrderData({ pid: data1.landTypeId, landTransfer: 1 }, index);
    });

    console.log(data.value);
  } catch (error) {
    ElMessage.error(error.message || '新增失败，请重试');
  }
};

const getOrderData = async (datas, indexs) => {
  let res = await getSubArea(datas);
  if (res.data.title) {
    if (res.data.title == '耕地面积数据') {
      res.data.data.forEach((data3, index) => {
        data.value[2].data.push({
          name: data3.landTypeName,
          value: data3.area,
          itemStyle: {
            opacity: 0.9,
            color: dataColor0[index],
          },
        });
      });
    } else {
      res.data.data.forEach((data4, index) => {
        console.log(indexs);

        data1.value[indexs - 1].data.push({
          name: data4.landTypeName,
          value: data4.area,
          itemStyle: {
            opacity: 0.9,
            color: dataColor0[index],
          },
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.custom-page {
  height: calc(100vh - 150px);
  background-size: cover;
  background-repeat: no-repeat;
}
.m-left {
  margin-left: 2%;
}
</style>