xiabin 土地资源数据统计
This commit is contained in:
parent
09c87cb373
commit
25f90c7c96
@ -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",
|
||||
|
||||
@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,17 +1,137 @@
|
||||
<template>
|
||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
|
||||
<!-- <h1>统计数据</h1>
|
||||
<div class="content"></div> -->
|
||||
<!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
|
||||
<div class="custom-page">
|
||||
<!-- <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 { getAssetsFile } from '@/utils';
|
||||
import { getOverview, getSubArea } from '../../../apis/resource/statisticAnalysis';
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
@ -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==
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user