Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-screen
This commit is contained in:
commit
7874be1d2e
11
src/apis/land.js
Normal file
11
src/apis/land.js
Normal file
@ -0,0 +1,11 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
/**
|
||||
* @Title: 获取土地信息
|
||||
* https://doc.apipost.net/docs/detail/4516a8efdce0000?target_id=f010812312008&locale=zh-cn
|
||||
*/
|
||||
export function GetLandInfo(code) {
|
||||
return request('/inputGoods/inputView/getData', {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
const data = ref([
|
||||
{
|
||||
name: '小麦',
|
||||
value: 60.8,
|
||||
},
|
||||
{
|
||||
name: '荞麦',
|
||||
value: 44.4,
|
||||
},
|
||||
{
|
||||
name: '贡菜',
|
||||
value: 24.3,
|
||||
},
|
||||
{
|
||||
name: '油菜',
|
||||
value: 32.7,
|
||||
},
|
||||
{
|
||||
name: '马铃薯',
|
||||
value: 32.9,
|
||||
},
|
||||
{
|
||||
name: '玉米',
|
||||
value: 32.1,
|
||||
},
|
||||
]);
|
||||
const option = reactive({
|
||||
opacity: 0.6,
|
||||
itemGap: 0.2,
|
||||
legendSuffix: '万亩',
|
||||
itemHeight: 120,
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 5,
|
||||
top: '0',
|
||||
left: '-20%',
|
||||
viewControl: {
|
||||
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||||
alpha: 30, //角度(这个很重要 调节角度的)
|
||||
distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
|
||||
zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
|
||||
panSensitivity: 10, //设置平移灵敏度，0无法平移
|
||||
autoRotate: true, //自动旋转
|
||||
autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
|
||||
},
|
||||
},
|
||||
});
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -2,20 +2,18 @@
|
||||
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { reactive, watch } from 'vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
data: [
|
||||
{ value: 20, name: '耿马镇' },
|
||||
{ value: 15, name: '勐撒镇' },
|
||||
{ value: 12, name: '勐永镇' },
|
||||
{ value: 16, name: '孟定镇' },
|
||||
{ value: 8, name: '勐简乡' },
|
||||
{ value: 12, name: '贺派乡' },
|
||||
{ value: 10, name: '四排山乡' },
|
||||
{ value: 9, name: '芒洪乡' },
|
||||
{ value: 8, name: '大兴乡' },
|
||||
],
|
||||
data: [],
|
||||
option: {
|
||||
grid: {
|
||||
left: '5%',
|
||||
@ -105,4 +103,17 @@ const state = reactive({
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.data = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@ -28,18 +28,7 @@ const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
{ value: 58.9, label: '灌溉水田' },
|
||||
{ value: 56.1, label: '基地地' },
|
||||
{ value: 60.8, label: '望天田' },
|
||||
{ value: 60.6, label: '水浇地' },
|
||||
{ value: 32.6, label: '林地' },
|
||||
{ value: 25.8, label: '育苗地' },
|
||||
{ value: 56.0, label: '果园' },
|
||||
{ value: 52.4, label: '草地' },
|
||||
{ value: 6.3, label: '观测用地' },
|
||||
{ value: 6.1, label: '监测用地' },
|
||||
];
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -2,7 +2,15 @@
|
||||
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { reactive, watch } from 'vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
option: {
|
||||
@ -109,16 +117,19 @@ const state = reactive({
|
||||
// },
|
||||
// },
|
||||
},
|
||||
data: [
|
||||
{ value: 20, name: '耿马镇' },
|
||||
{ value: 15, name: '勐撒镇' },
|
||||
{ value: 12, name: '勐永镇' },
|
||||
{ value: 16, name: '孟定镇' },
|
||||
{ value: 8, name: '勐简乡' },
|
||||
{ value: 12, name: '贺派乡' },
|
||||
{ value: 10, name: '四排山乡' },
|
||||
{ value: 9, name: '芒洪乡' },
|
||||
{ value: 8, name: '大兴乡' },
|
||||
],
|
||||
data: [],
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.data = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
54
src/views/land/components/landSix.vue
Normal file
54
src/views/land/components/landSix.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<custom-echart-hyaline-cake height="100%" :chart-data="state.data" :option="state.option" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch } from 'vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
option: {
|
||||
opacity: 0.6,
|
||||
itemGap: 0.2,
|
||||
legendSuffix: '万亩',
|
||||
itemHeight: 120,
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 5,
|
||||
top: '0',
|
||||
left: '-20%',
|
||||
viewControl: {
|
||||
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||||
alpha: 30, //角度(这个很重要 调节角度的)
|
||||
distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
|
||||
zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
|
||||
panSensitivity: 10, //设置平移灵敏度，0无法平移
|
||||
autoRotate: true, //自动旋转
|
||||
autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.data = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@ -1,16 +1,21 @@
|
||||
<template>
|
||||
<custom-echart-line ref="lineCharts" :chart-data="state.data" height="100%" :option="state.option" />
|
||||
<custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
let dataList = [
|
||||
{ value: 10, name: '2020' },
|
||||
{ value: 66, name: '2021' },
|
||||
{ value: 100, name: '2022' },
|
||||
{ value: 120, name: '2023' },
|
||||
{ value: 150, name: '2024' },
|
||||
{ value: 80, name: '2025' },
|
||||
];
|
||||
import { reactive, watch } from 'vue';
|
||||
import { isEmpty, sleep } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
query: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
option: {
|
||||
color: ['#35D0C0'],
|
||||
@ -58,10 +63,21 @@ const state = reactive({
|
||||
// name: '',
|
||||
},
|
||||
},
|
||||
data: dataList,
|
||||
data: [],
|
||||
});
|
||||
const lineCharts = ref(null);
|
||||
const refresData = () => {
|
||||
|
||||
const loadData = async (code = '') => {
|
||||
state.loading = true;
|
||||
// GetInputsInfo()
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// state.data = res.data;
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// });
|
||||
await sleep(500);
|
||||
state.data = [
|
||||
{ value: 5, name: '2020' },
|
||||
{ value: 36, name: '2021' },
|
||||
@ -72,7 +88,29 @@ const refresData = () => {
|
||||
];
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
refresData,
|
||||
});
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.data = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.query,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
loadData(val);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@ -1,29 +1,25 @@
|
||||
<template>
|
||||
<div class="rank">
|
||||
<custom-rank-List :chart-config="options" />
|
||||
<custom-rank-List :chart-config="state" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const options = ref({
|
||||
import { reactive, watch } from 'vue';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
attr: { w: '100%', h: 240 },
|
||||
option: {
|
||||
// 数据
|
||||
dataset: [
|
||||
{ name: '耿马镇', value: 87.84 },
|
||||
{ name: '勐撒镇', value: 60.7 },
|
||||
{ name: '勐永镇', value: 85.84 },
|
||||
{ name: '孟定镇', value: 63.25 },
|
||||
{ name: '勐简乡', value: 79.45 },
|
||||
{ name: '贺派乡', value: 66.22 },
|
||||
{ name: '四排山乡', value: 58.34 },
|
||||
{ name: '芒洪乡', value: 68.12 },
|
||||
{ name: '大兴乡', value: 66.34 },
|
||||
{ name: '信阳', value: 55.75 },
|
||||
{ name: '新乡', value: 53.32 },
|
||||
{ name: '大同', value: 51.11 },
|
||||
],
|
||||
dataset: [],
|
||||
type: 'column',
|
||||
rowNum: 6,
|
||||
isAnimation: true,
|
||||
@ -44,6 +40,19 @@ const options = ref({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.option.dataset = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.rank {
|
||||
@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<div class="land-area-charts">
|
||||
<custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
// color: ['#3685fe', '#41b879', '#fed500'],
|
||||
title: {
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
right: '0', // 距离左侧10%的位置
|
||||
top: '0', // 垂直居中
|
||||
itemWidth: 15, // 图例标记的宽度
|
||||
itemHeight: 8, // 图例标记的高度
|
||||
textStyle: {
|
||||
fontSize: 10, // 图例文字的字体大小
|
||||
color: '#fff', // 图例文字的颜色
|
||||
},
|
||||
data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: ' ',
|
||||
data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#BAE7FF',
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(186, 231, 255, 0.2)',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '耿马镇',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
||||
},
|
||||
{
|
||||
name: '勐撒镇',
|
||||
type: 'line',
|
||||
data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
|
||||
},
|
||||
{
|
||||
name: '勐永镇',
|
||||
type: 'line',
|
||||
data: [120, 516, 238, 453, 368, 519, 432, 128, 578],
|
||||
},
|
||||
{
|
||||
name: '孟定镇',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
||||
},
|
||||
{
|
||||
name: '勐简乡',
|
||||
type: 'line',
|
||||
data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
|
||||
},
|
||||
{
|
||||
name: '贺派乡',
|
||||
type: 'line',
|
||||
data: [386, 182, 191, 332, 290, 330, 690, 510, 563],
|
||||
},
|
||||
{
|
||||
name: '四排山乡',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
||||
},
|
||||
{
|
||||
name: '芒洪乡',
|
||||
type: 'line',
|
||||
data: [543, 182, 191, 106, 290, 330, 310, 510, 762],
|
||||
},
|
||||
{
|
||||
name: '大兴乡',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.land-area-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<div class="land-use-charts">
|
||||
<custom-echart-pictorial-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
let seriesData = reactive([
|
||||
{ value: 205.6 },
|
||||
{ value: 308.7 },
|
||||
{ value: 359.6 },
|
||||
{ value: 452.6 },
|
||||
{ value: 388.9 },
|
||||
{ value: 508.7 },
|
||||
{ value: 369.5 },
|
||||
{ value: 610.8 },
|
||||
{ value: 754.3 },
|
||||
]);
|
||||
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
color: ['#3685fe', '#41b879', '#ffd500'],
|
||||
title: {
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: ' ',
|
||||
// data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#BAE7FF',
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#BAE7FF',
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(186, 231, 255, 0.2)',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
barCategoryGap: '40%',
|
||||
barWidth: '100%',
|
||||
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
|
||||
data: seriesData,
|
||||
labelLine: { show: true },
|
||||
z: 10,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#000001', // 起始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0175b6', // 结束颜色
|
||||
},
|
||||
],
|
||||
global: false, // 默认为 false
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'top',
|
||||
formatter: '{c}',
|
||||
color: 'white',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
valData: seriesData,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.land-use-charts {
|
||||
height: 90%;
|
||||
}
|
||||
</style>
|
||||
@ -4,14 +4,14 @@
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="耕地面积统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<distributionCharts></distributionCharts>
|
||||
<landOne :data="state.data.one" />
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="农村土地资源" :top-postion="'left'">
|
||||
<template #back>
|
||||
<landCirculation></landCirculation>
|
||||
<landTwo :data="state.data.two" />
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
@ -35,36 +35,36 @@
|
||||
{ label: '大兴乡', value: '40159' },
|
||||
]"
|
||||
:is-down="true"
|
||||
@command="landPatrolCommand"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<template #back>
|
||||
<landPatrol ref="landPatrolRef"></landPatrol>
|
||||
<landThere :data="state.data.there" :query="state.queryCode" />
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<landMap></landMap>
|
||||
<landMap />
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="全县耕地面积" :top-postion="'right'">
|
||||
<template #back>
|
||||
<LandAera />
|
||||
<landFour :data="state.data.four" />
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="年度农用地规划面积" :top-postion="'right'">
|
||||
<template #back>
|
||||
<landPlan></landPlan>
|
||||
<landFive :data="state.data.five" />
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="各地农用地利用面积" :top-postion="'right'">
|
||||
<template #back>
|
||||
<cake />
|
||||
<landSix :data="state.data.six" />
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
@ -72,24 +72,132 @@
|
||||
</el-row>
|
||||
</template>
|
||||
<script setup>
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import distributionCharts from './components/distributionCharts.vue';
|
||||
import landuseCharts from './components/landuseCharts.vue';
|
||||
import landareaCharts from './components/landareaCharts.vue';
|
||||
import landCirculation from './components/landCirculation.vue';
|
||||
import landPlan from './components/landPlan.vue';
|
||||
import landPatrol from './components/landPatrol.vue';
|
||||
import LandAera from './components/LandAera.vue';
|
||||
import cake from './components/cake.vue';
|
||||
import { nextTick, reactive } from 'vue';
|
||||
import landMap from './components/landMap.vue';
|
||||
import { nextTick, ref } from 'vue';
|
||||
import landOne from './components/landOne.vue';
|
||||
import landTwo from './components/landTwo.vue';
|
||||
import landThere from './components/landThere.vue';
|
||||
import landFour from './components/landFour.vue';
|
||||
import landFive from './components/landFive.vue';
|
||||
import landSix from './components/landSix.vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { sleep } from '@/utils';
|
||||
import { GetLandInfo } from '@/apis/land';
|
||||
|
||||
const landPatrolRef = ref(null);
|
||||
const landPatrolCommand = (data) => {
|
||||
console.info('landPatrolCommand', data);
|
||||
nextTick(() => {
|
||||
landPatrolRef.value && landPatrolRef.value.refresData();
|
||||
});
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
data: {},
|
||||
queryCode: '',
|
||||
});
|
||||
|
||||
// 加载
|
||||
const loadData = async () => {
|
||||
state.loading = true;
|
||||
// GetInputsInfo()
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// state.data = res.data;
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// });
|
||||
await sleep(500);
|
||||
state.data = {
|
||||
one: [
|
||||
{ value: 20, name: '耿马镇' },
|
||||
{ value: 15, name: '勐撒镇' },
|
||||
{ value: 12, name: '勐永镇' },
|
||||
{ value: 16, name: '孟定镇' },
|
||||
{ value: 8, name: '勐简乡' },
|
||||
{ value: 12, name: '贺派乡' },
|
||||
{ value: 10, name: '四排山乡' },
|
||||
{ value: 9, name: '芒洪乡' },
|
||||
{ value: 8, name: '大兴乡' },
|
||||
],
|
||||
two: [
|
||||
{ name: '耿马镇', value: 87.84 },
|
||||
{ name: '勐撒镇', value: 60.7 },
|
||||
{ name: '勐永镇', value: 85.84 },
|
||||
{ name: '孟定镇', value: 63.25 },
|
||||
{ name: '勐简乡', value: 79.45 },
|
||||
{ name: '贺派乡', value: 66.22 },
|
||||
{ name: '四排山乡', value: 58.34 },
|
||||
{ name: '芒洪乡', value: 68.12 },
|
||||
{ name: '大兴乡', value: 66.34 },
|
||||
{ name: '信阳', value: 55.75 },
|
||||
{ name: '新乡', value: 53.32 },
|
||||
{ name: '大同', value: 51.11 },
|
||||
],
|
||||
there: [
|
||||
{ value: 10, name: '2020' },
|
||||
{ value: 66, name: '2021' },
|
||||
{ value: 100, name: '2022' },
|
||||
{ value: 120, name: '2023' },
|
||||
{ value: 150, name: '2024' },
|
||||
{ value: 80, name: '2025' },
|
||||
],
|
||||
four: [
|
||||
{ value: 58.9, label: '灌溉水田' },
|
||||
{ value: 56.1, label: '基地地' },
|
||||
{ value: 60.8, label: '望天田' },
|
||||
{ value: 60.6, label: '水浇地' },
|
||||
{ value: 32.6, label: '林地' },
|
||||
{ value: 25.8, label: '育苗地' },
|
||||
{ value: 56.0, label: '果园' },
|
||||
{ value: 52.4, label: '草地' },
|
||||
{ value: 6.3, label: '观测用地' },
|
||||
{ value: 6.1, label: '监测用地' },
|
||||
],
|
||||
five: [
|
||||
{ value: 20, name: '耿马镇' },
|
||||
{ value: 15, name: '勐撒镇' },
|
||||
{ value: 12, name: '勐永镇' },
|
||||
{ value: 16, name: '孟定镇' },
|
||||
{ value: 8, name: '勐简乡' },
|
||||
{ value: 12, name: '贺派乡' },
|
||||
{ value: 10, name: '四排山乡' },
|
||||
{ value: 9, name: '芒洪乡' },
|
||||
{ value: 8, name: '大兴乡' },
|
||||
],
|
||||
six: [
|
||||
{
|
||||
name: '小麦',
|
||||
value: 60.8,
|
||||
},
|
||||
{
|
||||
name: '荞麦',
|
||||
value: 44.4,
|
||||
},
|
||||
{
|
||||
name: '贡菜',
|
||||
value: 24.3,
|
||||
},
|
||||
{
|
||||
name: '油菜',
|
||||
value: 32.7,
|
||||
},
|
||||
{
|
||||
name: '马铃薯',
|
||||
value: 32.9,
|
||||
},
|
||||
{
|
||||
name: '玉米',
|
||||
value: 32.1,
|
||||
},
|
||||
],
|
||||
};
|
||||
state.loading = false;
|
||||
};
|
||||
|
||||
loadData();
|
||||
|
||||
const handleCommand = (data) => {
|
||||
state.queryCode = data.value;
|
||||
// console.info('data=', data);
|
||||
// nextTick(() => {
|
||||
// fiveRef.value && fiveRef.value.refresData();
|
||||
// });
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user