xiabin 土地资源数据统计

sub-government-affairs-service/package.json

@@ -22,6 +22,7 @@
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.6.5",
     "echarts": "^5.6.0",
+    "echarts-gl": "^2.0.9",
     "element-plus": "^2.7.2",
     "js-base64": "^3.7.6",
     "lodash": "^4.17.21",

sub-government-affairs-service/src/apis/resource/statisticAnalysis.js

@@ -15,3 +15,17 @@ export function GetLandData(params = {}) {
     params,
   });
 }
+//获取流转去未流转接口
+export function getOverview(params = {}) {
+  return request('/land-resource/analysis/overview', {
+    method: 'GET',
+    params,
+  });
+}
+//获取具体土地信息
+export function getSubArea(params = {}) {
+  return request('/land-resource/analysis/subArea', {
+    method: 'GET',
+    params,
+  });
+}

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

@@ -1,17 +1,137 @@
 <template>
-  <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
+  <!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
-    <!-- <h1>统计数据</h1>
+  <div class="custom-page">
-    <div class="content"></div> -->
+    <!-- <h1>统计数据</h1> -->
+    <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 { ref, watch, onMounted, computed } from 'vue';
+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';
+let dataColor0 = ['#01D3D3', '#00C4F2', '#4A68FF', '#00DD97', '#01D3D3', '#00C4F2', '#4A68FF', '#00DD97'];
+let data = ref([
+  {
+    title: '农用地面积数据',
+    data: [],
+    refs: 'chart1',
+  },
+  {
+    title: '土地流转面积数据',
+    data: [],
+    refs: 'chart1',
+  },
+  {
+    title: '耕地面积数据',
+    data: [],
+    refs: 'chart1',
+  },
+]);
+
+let data1 = ref([
+  {
+    title: '园地面积数据',
+    data: [],
+    refs: 'chart1',
+  },
+  {
+    title: '林地面积数据',
+    data: [],
+    refs: 'chart1',
+  },
+  {
+    title: '草地面积数据',
+    data: [],
+    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);
 }
+.m-left {
+  margin-left: 2%;
+}
 </style>

sub-government-affairs-service/src/views/resource/database/components/pie-chart.vue

@@ -0,0 +1,103 @@
+<template>
+  <!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
+  <div>
+    <!-- <h1>统计数据</h1> -->
+    <div class="content">
+      <div :ref="props.refs" style="width: 500px; height: 350px"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, reactive, watch } from 'vue';
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import { defineProps } from 'vue';
+import { size } from 'lodash';
+// 定义props
+const props = defineProps({
+  title: {
+    type: String,
+    default: () => {
+      return '暂无';
+    },
+  },
+  data: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  refs: {
+    type: String,
+    default: () => {
+      return '';
+    },
+  },
+});
+
+let chart1 = ref(null);
+
+console.log(props.refs);
+
+let option = ref({});
+
+watch(props.data, (data, oldata) => {
+  console.log(data);
+  let instance = echarts.init(chart1.value);
+  instance.setOption(option.value);
+});
+
+option.value = {
+  title: {
+    text: props.title,
+    x: 'center',
+    size: 10,
+  },
+  // backgroundColor: '#0f375f',
+  legend: {
+    top: 25,
+    left: '0',
+    itemWidth: 20,
+    itemHeight: 15,
+    textStyle: {
+      color: '#aab2cd',
+    },
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b} <br/>面积: {c}万亩 ({d}%)',
+  },
+  label: {
+    show: true,
+    formatter: '{b}: {c}万亩',
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: '70%',
+      center: ['40%', '60%'],
+      label: {
+        normal: {
+          fontSize: 16,
+        },
+      },
+      data: props.data,
+    },
+  ],
+};
+
+onMounted(() => {
+  let instance = echarts.init(chart1.value);
+  instance.setOption(option.value);
+});
+</script>
+
+<style scoped lang="scss">
+.custom-page {
+  height: calc(100vh - 150px);
+}
+.m-left {
+  margin-left: 6%;
+}
+</style>

sub-government-affairs-service/yarn.lock

@@ -1601,6 +1601,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+claygl@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
+  integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
+
 clone-regexp@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/clone-regexp/-/clone-regexp-1.0.1.tgz#051805cd33173375d82118fc0918606da39fd60f"
@@ -2086,6 +2091,14 @@ dunder-proto@^1.0.0, dunder-proto@^1.0.1:
     es-errors "^1.3.0"
     gopd "^1.2.0"
 
+echarts-gl@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz#ee228a6c7520a6fb7bbb71ea94394f3637ade033"
+  integrity sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==
+  dependencies:
+    claygl "^1.2.1"
+    zrender "^5.1.1"
+
 echarts@^5.6.0:
   version "5.6.0"
   resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
@@ -6679,7 +6692,7 @@ yocto-queue@^0.1.0:
   resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zrender@5.6.1:
+zrender@5.6.1, zrender@^5.1.1:
   version "5.6.1"
   resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"
   integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==