Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
6555b15c87
89
package-lock.json
generated
89
package-lock.json
generated
@ -9,10 +9,6 @@
|
||||
"version": "1.0.0",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-demi": "^0.14.10",
|
||||
"vue-tianditu": "^2.7.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"npm-run-all": "^4.1.5"
|
||||
}
|
||||
@ -1165,12 +1161,6 @@
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/mitt": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
|
||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nice-try": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/nice-try/-/nice-try-1.0.5.tgz",
|
||||
@ -1920,85 +1910,6 @@
|
||||
"spdx-expression-parse": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue": {
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
|
||||
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
|
||||
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-tianditu": {
|
||||
"version": "2.7.6",
|
||||
"resolved": "https://registry.npmmirror.com/vue-tianditu/-/vue-tianditu-2.7.6.tgz",
|
||||
"integrity": "sha512-Yvcxg0IAgGB3ZY8zlC5ayjo9f85fa8PFTaifguTNpri76g67GO9toaRWMjBKi39yYHMBADaT3P6bEkJx87X8MQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mitt": "^3.0.0",
|
||||
"vue-demi": "^0.12.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.4.2",
|
||||
"vue": "^2.0.0 || >=3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-tianditu/node_modules/vue-demi": {
|
||||
"version": "0.12.5",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz",
|
||||
"integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/which/-/which-1.3.1.tgz",
|
||||
|
||||
@ -34,10 +34,7 @@
|
||||
],
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-demi": "^0.14.10",
|
||||
"vue-tianditu": "^2.7.6"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"npm-run-all": "^4.1.5"
|
||||
}
|
||||
|
||||
75
sub-government-affairs-service/auto-imports.d.ts
vendored
75
sub-government-affairs-service/auto-imports.d.ts
vendored
@ -1,75 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
@ -84,7 +84,7 @@ export function delAnimalMedicine(ids) {
|
||||
// #region
|
||||
/* 查询种源 */
|
||||
export function getSeedList(params) {
|
||||
return request('/inputGoods/provenance/page', {
|
||||
return request('/inputGoods/supervise/provenance/page', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 472 KiB |
@ -9,12 +9,6 @@ const inputSuppliesRoutes = [
|
||||
redirect: '/sub-government-affairs-service/material/pesticide',
|
||||
meta: { title: '农产品种植管理', icon: 'FullScreen' },
|
||||
children: [
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/statistics',
|
||||
// name: 'Statistics',
|
||||
// component: () => import('@/views/planting-management/statistics/index.vue'),
|
||||
// meta: { title: '使用监管概况统计', icon: 'PieChart' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/variety-record',
|
||||
name: 'PlantVarietyRecord',
|
||||
@ -28,41 +22,59 @@ const inputSuppliesRoutes = [
|
||||
meta: { title: '农产品种植计划管理', icon: 'Timer' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/seed',
|
||||
name: 'input-supplies-seed',
|
||||
component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
|
||||
meta: { title: '种子种苗管理', icon: 'Watermelon' },
|
||||
path: '/sub-government-affairs-service/planting-base',
|
||||
name: 'PlantingBase',
|
||||
component: () => import('@/views/planting-management/planting-base/index.vue'),
|
||||
meta: { title: '种植基地管理', icon: 'Crop' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/fertilizer',
|
||||
name: 'input-supplies-fertilizer',
|
||||
component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
|
||||
meta: { title: '肥料管理', icon: 'Grid' },
|
||||
path: '/sub-government-affairs-service/planting-batch',
|
||||
name: 'PlantingBatch',
|
||||
component: () => import('@/views/planting-management/planting-batch/index.vue'),
|
||||
meta: { title: '种植批次管理', icon: 'Connection' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/pesticide',
|
||||
name: 'input-supplies-pesticide',
|
||||
component: () => import('@/views/inputSuppliesManage/material/pesticide/index.vue'),
|
||||
meta: { title: '农药管理', icon: 'Orange' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/others',
|
||||
name: 'input-supplies-others',
|
||||
component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
|
||||
meta: { title: '其他投入品管理', icon: 'TakeawayBox' },
|
||||
path: '/sub-government-affairs-service/agricultural-work',
|
||||
name: 'AgriculturalWork',
|
||||
component: () => import('@/views/planting-management/agricultural-work/index.vue'),
|
||||
meta: { title: '农事作业管理', icon: 'Notification' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/material/seed',
|
||||
// name: 'input-supplies-seed',
|
||||
// component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
|
||||
// meta: { title: '种子种苗管理', icon: 'Watermelon' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/material/fertilizer',
|
||||
// name: 'input-supplies-fertilizer',
|
||||
// component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
|
||||
// meta: { title: '肥料管理', icon: 'Grid' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/material/pesticide',
|
||||
// name: 'input-supplies-pesticide',
|
||||
// component: () => import('@/views/inputSuppliesManage/material/pesticide/index.vue'),
|
||||
// meta: { title: '农药管理', icon: 'Orange' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/material/others',
|
||||
// name: 'input-supplies-others',
|
||||
// component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
|
||||
// meta: { title: '其他投入品管理', icon: 'TakeawayBox' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/supervisionOfInputs ',
|
||||
name: 'supervisionOfInputs',
|
||||
redirect: '/sub-government-affairs-service/supervisionOfInputs/seedRegulation',
|
||||
meta: { title: '投入品使用监管', icon: 'Connection' },
|
||||
children: [
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/supervisionOfInputs/regulatoryOverview',
|
||||
// name: 'regulatoryOverview',
|
||||
// component: () => import('@/views/inputSuppliesManage/supervisionOfInputs/regulatoryOverview.vue'),
|
||||
// meta: { title: '使用监管概览', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/statistics',
|
||||
name: 'Statistics',
|
||||
component: () => import('@/views/planting-management/statistics/index.vue'),
|
||||
meta: { title: '使用监管概况统计', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/supervisionOfInputs/seedRegulation',
|
||||
name: 'seedRegulation',
|
||||
|
||||
@ -199,14 +199,14 @@ const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
// { prop: "id", label: "ID" },
|
||||
{ prop: 'name', label: '类别名称' },
|
||||
{ prop: 'name', label: '姓名' },
|
||||
{ prop: 'phone', label: '联系方式' },
|
||||
{ prop: 'landName', label: '用药地块' },
|
||||
{ prop: 'detectionTime', label: '检测时间' },
|
||||
{ prop: 'detectionResult', label: '检测结果' },
|
||||
{ prop: 'detectionUnit', label: '检测单位' },
|
||||
// { prop: 'status', label: '检测报告(是否上传)' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
{ prop: 'isUpload', label: '检测报告(是否上传)' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
|
||||
@ -38,11 +38,11 @@
|
||||
@page-change="handlePaginationChange"
|
||||
>
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<!-- <el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button> -->
|
||||
<!-- <el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button> -->
|
||||
<!-- <template #action="slotProps">
|
||||
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||
</template>
|
||||
</template> -->
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
@ -136,14 +136,30 @@ const selectedIds = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'id', label: '编码' },
|
||||
{ prop: 'seedName', label: '种子种苗名称' },
|
||||
{ prop: 'varietyName', label: '品种名称' },
|
||||
{ prop: 'brand', label: '品牌' },
|
||||
{ prop: 'manufacturer', label: '生产厂家' },
|
||||
{ prop: 'classifyName', label: '分类' },
|
||||
{ prop: 'productUnit', label: '产品规格' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
// 行政区划编码
|
||||
{ prop: 'regionCode', label: '行政区划编码' },
|
||||
// 行政区划名称
|
||||
{ prop: 'regionCode', label: '行政区划名称' },
|
||||
// 网格编码
|
||||
{ prop: 'gridId', label: '网格编码' },
|
||||
// 网格名称
|
||||
{ prop: 'gridName', label: '网格名称' },
|
||||
// 地块编号
|
||||
{ prop: 'landId', label: '地块编号' },
|
||||
// 地块名称
|
||||
{ prop: 'landName', label: '地块名称' },
|
||||
// 种子编号
|
||||
{ prop: 'provenanceId', label: '种子编号' },
|
||||
{ prop: 'provenanceName', label: '种子种苗名称' },
|
||||
// 使用量
|
||||
{ prop: 'useNumber', label: '使用量' },
|
||||
// 使用时间
|
||||
{ prop: 'useTime', label: '使用时间' },
|
||||
// 生成经营主体编码
|
||||
{ prop: 'businessEntityCode', label: '生成经营主体编码' },
|
||||
// 生产经营主体名称
|
||||
{ prop: 'businessEntityName', label: '生产经营主体名称' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
|
||||
@ -157,19 +157,20 @@ const crudOptions = reactive({
|
||||
emptyBtn: false,
|
||||
height: 'calc(100vh - 340px)',
|
||||
column: [
|
||||
{ label: '农产品名称', prop: 'productName', width: 150 },
|
||||
{ label: '行政区划编码', prop: 'AreaCode', width: 150 },
|
||||
{ label: '行政区划', prop: 'gridAreaName', width: 150 },
|
||||
{ label: '网格编码', prop: 'gridCode', width: 150 },
|
||||
{ label: '网格名称', prop: 'gridName', width: 150 },
|
||||
{ label: '地块编码', prop: 'landCode', width: 150 },
|
||||
{ label: '地块', prop: 'landName' },
|
||||
{ label: '农产品名称', prop: 'productName', width: 150 },
|
||||
{ label: '面积（亩）', prop: 'area', formatter: (row, cloumn, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '网格', prop: 'gridName' },
|
||||
{ label: '行政区划', prop: 'gridAreaName' },
|
||||
{ label: '姓名', prop: 'name' },
|
||||
{ label: '联系方式', prop: 'contactInfo' },
|
||||
{ label: '采收时间', prop: 'harvestTime' },
|
||||
{ label: '亩产（公斤）', prop: 'yieldPerMu', width: 80 },
|
||||
{ label: '地块总产（公斤）', prop: 'totalYield' },
|
||||
{ label: '品质', prop: 'quality' },
|
||||
{ label: '价格（元/公斤）', prop: 'price' },
|
||||
{ label: '产值（元）', prop: 'outputValue' },
|
||||
{ label: '生产经营主体编码', prop: 'enterCode', width: 150 },
|
||||
{ label: '生产经营主体类型', prop: 'enterType', width: 150 },
|
||||
{ label: '生产经营主体名称', prop: 'enterName' },
|
||||
{ label: '是否溯源', prop: 'isTrace' },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
export const mockData = [
|
||||
{
|
||||
AreaCode: '530501', // 行政区划编码
|
||||
gridCode: 'G001', // 网格编码
|
||||
landCode: 'L001', // 地块编码
|
||||
enterCode: 'E001', // 生产经营主体编码
|
||||
enterType: '农户', // 生产经营主体类型
|
||||
enterName: '岩温罕', // 生产经营主体名称（原name字段）
|
||||
isTrace: '是', // 是否溯源
|
||||
// 原始字段
|
||||
productName: '甘蔗',
|
||||
landName: '勐撒坝子南片',
|
||||
area: 28,
|
||||
gridName: '勐撒村第三网格',
|
||||
gridAreaName: '耿马县勐撒镇勐撒村',
|
||||
name: '岩温罕',
|
||||
contactInfo: '183****8823',
|
||||
harvestTime: '2023-12-15',
|
||||
yieldPerMu: 5800,
|
||||
@ -15,12 +22,18 @@ export const mockData = [
|
||||
outputValue: 77952,
|
||||
},
|
||||
{
|
||||
AreaCode: '530502',
|
||||
gridCode: 'G002',
|
||||
landCode: 'L002',
|
||||
enterCode: 'E002',
|
||||
enterType: '农企合作社',
|
||||
enterName: '李秀兰',
|
||||
isTrace: '是',
|
||||
productName: '茶叶（普洱生茶）',
|
||||
landName: '芒洪古茶山',
|
||||
area: 6.5,
|
||||
gridName: '芒洪村第一网格',
|
||||
gridAreaName: '耿马县芒洪拉祜族布朗族乡',
|
||||
name: '李秀兰',
|
||||
contactInfo: '138****4671',
|
||||
harvestTime: '2023-04-08',
|
||||
yieldPerMu: 210,
|
||||
@ -30,12 +43,18 @@ export const mockData = [
|
||||
outputValue: 116025,
|
||||
},
|
||||
{
|
||||
AreaCode: '530503',
|
||||
gridCode: 'G003',
|
||||
landCode: 'L003',
|
||||
enterCode: 'E003',
|
||||
enterType: '农企合作社',
|
||||
enterName: '赵卫东',
|
||||
isTrace: '是',
|
||||
productName: '澳洲坚果',
|
||||
landName: '四排山基地',
|
||||
area: 35,
|
||||
gridName: '翁达村第五网格',
|
||||
gridAreaName: '耿马县四排山乡翁达村',
|
||||
name: '赵卫东',
|
||||
contactInfo: '159****3098',
|
||||
harvestTime: '2023-09-20',
|
||||
yieldPerMu: 320,
|
||||
@ -45,12 +64,18 @@ export const mockData = [
|
||||
outputValue: 207200,
|
||||
},
|
||||
{
|
||||
AreaCode: '530504',
|
||||
gridCode: 'G004',
|
||||
landCode: 'L004',
|
||||
enterCode: 'E004',
|
||||
enterType: '农户',
|
||||
enterName: '叶嘎',
|
||||
isTrace: '否',
|
||||
productName: '橡胶',
|
||||
landName: '河外胶林',
|
||||
area: 42,
|
||||
gridName: '河外村第二网格',
|
||||
gridAreaName: '耿马县孟定镇河外村',
|
||||
name: '叶嘎',
|
||||
contactInfo: '187****5546',
|
||||
harvestTime: '2023-11-01',
|
||||
yieldPerMu: 95,
|
||||
@ -60,12 +85,18 @@ export const mockData = [
|
||||
outputValue: 40698,
|
||||
},
|
||||
{
|
||||
AreaCode: '530505',
|
||||
gridCode: 'G005',
|
||||
landCode: 'L005',
|
||||
enterCode: 'E005',
|
||||
enterType: '农户',
|
||||
enterName: '艾叶',
|
||||
isTrace: '是',
|
||||
productName: '咖啡（阿拉比卡）',
|
||||
landName: '福荣坡地',
|
||||
area: 15,
|
||||
gridName: '福荣村第四网格',
|
||||
gridAreaName: '耿马县勐永镇福荣村',
|
||||
name: '艾叶',
|
||||
contactInfo: '152****7720',
|
||||
harvestTime: '2023-02-18',
|
||||
yieldPerMu: 280,
|
||||
@ -75,12 +106,18 @@ export const mockData = [
|
||||
outputValue: 112560,
|
||||
},
|
||||
{
|
||||
AreaCode: '530506',
|
||||
gridCode: 'G006',
|
||||
landCode: 'L006',
|
||||
enterCode: 'E006',
|
||||
enterType: '农户',
|
||||
enterName: '玉罕香',
|
||||
isTrace: '是',
|
||||
productName: '火龙果（红心）',
|
||||
landName: '允捧大棚区',
|
||||
area: 8,
|
||||
gridName: '允捧村第一网格',
|
||||
gridAreaName: '耿马县孟定镇允捧村',
|
||||
name: '玉罕香',
|
||||
contactInfo: '135****9924',
|
||||
harvestTime: '2023-07-12',
|
||||
yieldPerMu: 1800,
|
||||
@ -90,12 +127,18 @@ export const mockData = [
|
||||
outputValue: 108000,
|
||||
},
|
||||
{
|
||||
AreaCode: '530507',
|
||||
gridCode: 'G007',
|
||||
landCode: 'L007',
|
||||
enterCode: 'E007',
|
||||
enterType: '农户',
|
||||
enterName: '岩峰',
|
||||
isTrace: '否',
|
||||
productName: '香蕉（威廉斯）',
|
||||
landName: '班幸河谷',
|
||||
area: 20,
|
||||
gridName: '班幸村第四网格',
|
||||
gridAreaName: '耿马县孟定镇班幸村',
|
||||
name: '岩峰',
|
||||
contactInfo: '158****3367',
|
||||
harvestTime: '2023-06-30',
|
||||
yieldPerMu: 3200,
|
||||
@ -105,12 +148,18 @@ export const mockData = [
|
||||
outputValue: 198400,
|
||||
},
|
||||
{
|
||||
AreaCode: '530508',
|
||||
gridCode: 'G008',
|
||||
landCode: 'L008',
|
||||
enterCode: 'E008',
|
||||
enterType: '农企合作社',
|
||||
enterName: '田志强',
|
||||
isTrace: '是',
|
||||
productName: '砂仁（中药材）',
|
||||
landName: '大浪坝林下',
|
||||
area: 18,
|
||||
gridName: '大浪坝村第三网格',
|
||||
gridAreaName: '耿马县勐简乡大浪坝村',
|
||||
name: '田志强',
|
||||
contactInfo: '139****7189',
|
||||
harvestTime: '2023-09-08',
|
||||
yieldPerMu: 65,
|
||||
|
||||
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<el-form :inline="true" :model="searchForm" class="search-bar">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="searchForm.name" placeholder="请输入关键词" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="" label-width="0">
|
||||
<AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.id" :width="600" />
|
||||
</el-form-item>
|
||||
<el-form-item label="种植作物" prop="planCrop">
|
||||
<url-select
|
||||
v-model="searchForm.planCrop"
|
||||
url="/land-resource/crops/page"
|
||||
:params="{ status: '0' }"
|
||||
label-key="cropsName"
|
||||
value-key="id"
|
||||
placeholder="请选择种植作物"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pagination"
|
||||
:data="crudData"
|
||||
:option="crudOptions"
|
||||
:table-loading="loading"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
<!-- <template #menu="scope">
|
||||
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
|
||||
</template> -->
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { mockData } from './mockData';
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
const getData = async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
crudData.value = mockData;
|
||||
pagination.value.total = crudData.value.length;
|
||||
};
|
||||
const loading = ref(false);
|
||||
|
||||
const searchForm = ref({});
|
||||
|
||||
const pagination = ref({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const crudData = ref([]);
|
||||
const crudOptions = ref({
|
||||
...CRUD_OPTIONS,
|
||||
header: false,
|
||||
menu: false,
|
||||
height: 'calc(100vh - 330px)',
|
||||
column: [
|
||||
{ label: '地块编号', prop: 'landNumber', width: 160 },
|
||||
{ label: '地块名称', prop: 'landName', width: 170 },
|
||||
{ label: '面积', prop: 'planArea', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '所属行政区域', prop: 'belongRegion', width: 160 },
|
||||
{ label: '所属网格', prop: 'belongGrid', width: 90 },
|
||||
{ label: '具体位置', prop: 'address', width: 160 },
|
||||
{ label: '基地编码', prop: 'baseCode' },
|
||||
{ label: '基地名称', prop: 'baseName' },
|
||||
{ label: '种植批次编码', prop: 'batchCode' },
|
||||
{ label: '种植批次名称', prop: 'batchName' },
|
||||
{ label: '种植作物', prop: 'crop' },
|
||||
{ label: '作物品种', prop: 'cropBrand' },
|
||||
{ label: '种植开始时间', prop: 'startDate' },
|
||||
{ label: '种植结束时间', prop: 'endDate' },
|
||||
{ label: '经营主体代码', prop: 'businessEntityCode', width: 130 },
|
||||
{ label: '经营主体类型', prop: 'businessEntityType', width: 130 },
|
||||
{ label: '经营主体名称', prop: 'businessEntityName', width: 130 },
|
||||
{ label: '账号（手机号）', prop: 'account', width: 130 },
|
||||
{ label: '信息填报时间', prop: 'fillTime', width: 110 },
|
||||
{ label: '信息审核时间', prop: 'approvalTime', width: 110 },
|
||||
],
|
||||
});
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.value.currentPage = val;
|
||||
};
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.value.pageSize = val;
|
||||
};
|
||||
const getActions = (row) => {
|
||||
return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
|
||||
};
|
||||
const handleView = (row) => {
|
||||
console.log(row);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,46 @@
|
||||
export const mockData = [
|
||||
{
|
||||
landNumber: 'DN532526001', // 耿马县行政区划代码开头
|
||||
landName: '四排山坚果标准化种植园', // 耿马县重点坚果产区
|
||||
planArea: 68.3, // 面积（亩）
|
||||
belongRegion: '耿马县四排山乡', // 澳洲坚果主产区
|
||||
belongGrid: '四排山村第2网格', // 实际网格划分
|
||||
address: '四排山乡至芒关村公路西侧坡地', // 具体位置
|
||||
baseCode: 'JD53252601', // 耿马县基地编码
|
||||
baseName: '耿马澳洲坚果产业示范基地', // 省级示范基地
|
||||
batchCode: 'ZZPC5325261801', // 2024年第一批种植
|
||||
batchName: ' 2024年澳洲坚果丰产林项目',
|
||||
crop: '澳洲坚果', // 耿马县"一县一业"主导产业
|
||||
cropBrand: '桂热1号', // 云南主推品种
|
||||
startDate: ' 2024-05-15', // 坚果最佳定植时间
|
||||
endDate: '2025-09-30', // 进入丰产期时间
|
||||
businessEntityCode: 'HZ532526001', // 合作社编码
|
||||
businessEntityType: '合作社',
|
||||
businessEntityName: '耿马四排山坚果种植专业合作社', // 真实合作社
|
||||
account: '159****3098', // 匹配原始数据中坚果种植户
|
||||
fillTime: ' 2024-05-10 09:30',
|
||||
approvalTime: ' 2024-05-12 14:15',
|
||||
},
|
||||
{
|
||||
landNumber: 'DN532526002',
|
||||
landName: '芒洪古茶园', // 耿马县芒洪乡著名古茶山
|
||||
planArea: 32.6,
|
||||
belongRegion: ' 耿马县芒洪乡',
|
||||
belongGrid: '芒洪村第1网格',
|
||||
address: '芒洪村后山海拔1800米处',
|
||||
baseCode: 'JD53252602',
|
||||
baseName: '耿马古树茶保护基地',
|
||||
batchCode: 'ZZPC5325262302',
|
||||
batchName: '2023年春茶采摘批次',
|
||||
crop: '茶树',
|
||||
cropBrand: '勐库大叶种', // 临沧市代表性茶树品种
|
||||
startDate: '2023-03-20', // 春茶采摘时间
|
||||
endDate: '2023-04-15',
|
||||
businessEntityCode: 'HZ532526001',
|
||||
businessEntityType: '合作社',
|
||||
businessEntityName: '耿马芒洪茶叶专业合作社', // 真实存在的合作社
|
||||
account: '138****4671', // 匹配原始数据
|
||||
fillTime: '2023-03-15 14:10',
|
||||
approvalTime: '2023-03-16 16:30',
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<el-form :inline="true" :model="searchForm" class="search-bar">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="searchForm.name" placeholder="请输入关键词" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pagination"
|
||||
:data="crudData"
|
||||
:option="crudOptions"
|
||||
:table-loading="loading"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
<!-- <template #menu="scope">
|
||||
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
|
||||
</template> -->
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { mockData } from './mockData';
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
const getData = async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
crudData.value = mockData;
|
||||
pagination.value.total = crudData.value.length;
|
||||
};
|
||||
const loading = ref(false);
|
||||
|
||||
const searchForm = ref({});
|
||||
const pagination = ref({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const crudData = ref([]);
|
||||
const crudOptions = ref({
|
||||
...CRUD_OPTIONS,
|
||||
header: false,
|
||||
menu: false,
|
||||
height: 'calc(100vh - 330px)',
|
||||
column: [
|
||||
{ label: '基地编码', prop: 'baseCode' },
|
||||
{ label: '基地名称', prop: 'baseName' },
|
||||
{ label: '所属行政区域', prop: 'regionName' },
|
||||
{ label: '所属网格', prop: 'gridName' },
|
||||
{ label: '具体位置', prop: 'adress' },
|
||||
{ label: '经纬度', prop: 'longitude' },
|
||||
{ label: '气候条件', prop: 'weather' },
|
||||
{ label: '海拔（米）', prop: 'altitude' },
|
||||
{ label: '面积（亩）', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '使用状态', prop: 'status' },
|
||||
{ label: '经营主体代码', prop: 'businessCode' },
|
||||
{ label: '经营主体类型', prop: 'businessType' },
|
||||
{ label: '经营主体名称', prop: 'businessSubjectName' },
|
||||
{ label: '创建时间', prop: 'createTime' },
|
||||
],
|
||||
});
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.value.currentPage = val;
|
||||
};
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.value.pageSize = val;
|
||||
};
|
||||
const getActions = (row) => {
|
||||
return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
|
||||
};
|
||||
const handleView = (row) => {
|
||||
console.log(row);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,39 @@
|
||||
export const mockData = [
|
||||
// 第一条：耿马县孟定镇咖啡示范基地
|
||||
{
|
||||
baseCode: 'JD5325262023KM01', // 耿马县+2023+咖啡(KM)+01
|
||||
baseName: '孟定精品咖啡示范园',
|
||||
regionName: ' 耿马县孟定镇',
|
||||
gridName: '孟定镇河西片区第3网格',
|
||||
adress: '孟定镇河西村班幸组南汀河西岸',
|
||||
longitude: '99.0832°E', // 实际经纬度（孟定镇中心区域）
|
||||
latitude: '23.5521°N',
|
||||
weather: '热带季风气候', // 年均温21.5℃，年降水量1600mm
|
||||
altitude: 850, // 孟定坝区典型海拔
|
||||
area: 286.5, // 示范基地面积
|
||||
status: '使用中',
|
||||
businessCode: 'QY532526001', // 统一社会信用代码前段
|
||||
businessType: '合作社',
|
||||
businessSubjectName: '耿马滇咖农业科技有限公司', // 实际注册企业
|
||||
createTime: '2021-03-15 09:00:00',
|
||||
},
|
||||
|
||||
// 第二条：耿马县四排山乡坚果基地
|
||||
{
|
||||
baseCode: 'JD5325262023JG02', // 耿马县+2023+坚果(JG)+02
|
||||
baseName: '四排山澳洲坚果产业基地',
|
||||
regionName: ' 耿马县四排山乡',
|
||||
gridName: '四排山乡翁达村第5网格',
|
||||
adress: '翁达村至芒关村公路东侧山坡地',
|
||||
longitude: '99.2178°E', // 四排山乡中心区域坐标
|
||||
latitude: '23.7865°N',
|
||||
weather: '南亚热带气候', // 年均温19.8℃，年降水量1400mm
|
||||
altitude: 1200, // 山地种植区典型海拔
|
||||
area: 580, // 连片种植面积
|
||||
status: '使用中',
|
||||
businessCode: 'HZ532526001', // 合作社注册代码
|
||||
businessType: '合作社',
|
||||
businessSubjectName: '耿马四排山坚果种植专业合作社', // 真实合作社
|
||||
createTime: '2018-05-20 14:30:00',
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<el-form :inline="true" :model="searchForm" class="search-bar">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="searchForm.name" placeholder="请输入关键词" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pagination"
|
||||
:data="crudData"
|
||||
:option="crudOptions"
|
||||
:table-loading="loading"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
<!-- <template #menu="scope">
|
||||
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
|
||||
</template> -->
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { mockData } from './mockData';
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
const getData = async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
crudData.value = mockData;
|
||||
pagination.value.total = crudData.value.length;
|
||||
};
|
||||
const loading = ref(false);
|
||||
|
||||
const searchForm = ref({});
|
||||
const pagination = ref({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const crudData = ref([]);
|
||||
const crudOptions = ref({
|
||||
...CRUD_OPTIONS,
|
||||
header: false,
|
||||
menu: false,
|
||||
height: 'calc(100vh - 330px)',
|
||||
column: [
|
||||
{ label: '基地编码', prop: 'baseCode' },
|
||||
{ label: '种植批次编码', prop: 'plantingBatchCode' },
|
||||
{ label: '种植批次名称', prop: 'plantingBatchName' },
|
||||
{ label: '种植作物', prop: 'cropsName' },
|
||||
{ label: '种植基地编码', prop: 'plantingBaseCode' },
|
||||
{ label: '种植基地', prop: 'plantingBase' },
|
||||
{ label: '所属行政区域', prop: 'district' },
|
||||
{ label: '所属网格', prop: 'gridName' },
|
||||
{ label: '种植开始时间', prop: 'plantingStartTime' },
|
||||
{ label: '种植结束时间', prop: 'plantingEndTime' },
|
||||
{ label: '账号（手机号）', prop: 'account' },
|
||||
],
|
||||
});
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.value.currentPage = val;
|
||||
};
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.value.pageSize = val;
|
||||
};
|
||||
const getActions = (row) => {
|
||||
return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
|
||||
};
|
||||
const handleView = (row) => {
|
||||
console.log(row);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,31 @@
|
||||
export const mockData = [
|
||||
// 第一条：耿马县咖啡种植数据（孟定镇特色产业）
|
||||
{
|
||||
baseCode: 'JD5325262023KM01', // 基地编码：耿马县+2023+咖啡(KM)+01
|
||||
plantingBatchCode: 'KM-PC20231001', // 种植批次编码：咖啡-批次2023年10月第1批
|
||||
plantingBatchName: '2023年精品咖啡秋植批次',
|
||||
cropsName: '咖啡（阿拉比卡）', // 孟定镇主要种植品种
|
||||
plantingBaseCode: 'JD-MD-ZJ01', // 种植基地编码：孟定-精品01
|
||||
plantingBase: '耿马孟定精品咖啡示范园', // 实际存在的示范基地
|
||||
district: '耿马县孟定镇', // 精确到镇级
|
||||
gridName: '孟定镇河西片区第3网格', // 按当地网格划分
|
||||
plantingStartTime: '2023-06-15', // 咖啡最佳种植期
|
||||
plantingEndTime: '2024-11-30', // 咖啡采收周期
|
||||
account: '159****3098', // 匹配原始数据中咖啡种植户联系方式
|
||||
},
|
||||
|
||||
// 第二条：耿马县澳洲坚果数据（四排山乡主导产业）
|
||||
{
|
||||
baseCode: 'JD5325262023JG02', // 基地编码：耿马县+2023+坚果(JG)+02
|
||||
plantingBatchCode: 'JG-PC20190502', // 种植批次编码：坚果-批次2019年5月第2批
|
||||
plantingBatchName: '2019年澳洲坚果丰产林项目',
|
||||
cropsName: '澳洲坚果', // 四排山乡支柱产业
|
||||
plantingBaseCode: 'JD-SPS-FC01', // 种植基地编码：四排山-丰产01
|
||||
plantingBase: '耿马四排山澳洲坚果标准化基地', // 政府扶持项目
|
||||
district: '耿马县四排山乡', // 精确到乡级
|
||||
gridName: '四排山乡翁达村第5网格', // 对应原始数据中的网格
|
||||
plantingStartTime: '2019-05-20', // 坚果最佳定植时间
|
||||
plantingEndTime: '2026-09-30', // 坚果丰产期开始时间
|
||||
account: '158****3367', // 匹配原始数据中坚果种植户联系方式
|
||||
},
|
||||
];
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
|
||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/inputman.png')})`">
|
||||
<!-- <h1>统计数据</h1>
|
||||
<div class="content"></div> -->
|
||||
</div>
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<SearchBar v-model:search="searchForm" @search="handleSearch" @reset="handleReset" />
|
||||
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
||||
<!-- <el-tab-pane label="待提交" name="-1" /> -->
|
||||
<el-tab-pane label="待审核" name="0" />
|
||||
<el-tab-pane label="已通过" name="1" />
|
||||
<el-tab-pane label="已驳回" name="2" />
|
||||
<el-tab-pane label="待审核" name="1" />
|
||||
<el-tab-pane label="已通过" name="2" />
|
||||
<el-tab-pane label="已驳回" name="3" />
|
||||
</el-tabs>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
@ -16,9 +16,9 @@
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
<template #menu="scope">
|
||||
<!-- <template #menu="scope">
|
||||
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
|
||||
</template>
|
||||
</template> -->
|
||||
</avue-crud>
|
||||
<el-dialog v-model="visible" title="查看" width="60%" align-center :draggable="true">
|
||||
<RecordForm ref="formRef" v-model="formData" :disabled="mode === 'view'" />
|
||||
@ -61,6 +61,7 @@ const crudData = ref([]);
|
||||
const crudOptions = reactive({
|
||||
...CRUD_OPTIONS,
|
||||
header: false,
|
||||
menu: false,
|
||||
height: 'calc(100vh - 330px)',
|
||||
column: [
|
||||
{ label: '地块编号', prop: 'landNumber', width: 160 },
|
||||
|
||||
@ -178,14 +178,14 @@ const crudOptions = reactive({
|
||||
{ label: '企业负责人', prop: 'contactPerson' },
|
||||
{ label: '联系方式', prop: 'phone' },
|
||||
{ label: '企业地址', prop: 'address' },
|
||||
{ label: '地块数量', prop: 'villageCount' },
|
||||
{ label: '地块编号', prop: 'villageCode' },
|
||||
{ label: '地块名称', prop: 'villageName' },
|
||||
{ label: '地块数量', prop: 'landCount' },
|
||||
{ label: '地块编号', prop: 'landNumber' },
|
||||
{ label: '地块名称', prop: 'landName' },
|
||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '所属行政区划', prop: 'address' },
|
||||
{ label: '所属网格', prop: 'gridCode' },
|
||||
{ label: '种植作物', prop: 'primaryProduct' },
|
||||
{ label: '账号（手机号）', prop: 'account' },
|
||||
{ label: '种植作物', prop: 'planCrop' },
|
||||
{ label: '账号（手机号）', prop: 'phone' },
|
||||
{ label: '信息录入时间', prop: 'createTime' },
|
||||
{ label: '信息更新时间', prop: 'updateTime' },
|
||||
],
|
||||
|
||||
@ -208,14 +208,14 @@ const crudOptions = reactive({
|
||||
{ label: '联系方式', prop: 'phone' },
|
||||
// 地址
|
||||
{ label: '地址', prop: 'address', width: '300px' },
|
||||
{ label: '地块数量', prop: 'villageCount' },
|
||||
{ label: '地块编号', prop: 'villageCode' },
|
||||
{ label: '地块名称', prop: 'villageName' },
|
||||
{ label: '地块数量', prop: 'landCount' },
|
||||
{ label: '地块编号', prop: 'landNumber' },
|
||||
{ label: '地块名称', prop: 'landName' },
|
||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '所属行政区划', prop: 'address' },
|
||||
{ label: '所属网格', prop: 'gridCode' },
|
||||
{ label: '种植作物', prop: 'planCropName' },
|
||||
{ label: '账号（手机号）', prop: 'account' },
|
||||
{ label: '账号（手机号）', prop: 'phone' },
|
||||
{ label: '创建时间', prop: 'createTime' },
|
||||
{ label: '更新时间', prop: 'updateTime' },
|
||||
],
|
||||
|
||||
@ -1,401 +1,47 @@
|
||||
<template>
|
||||
<div class="field-management">
|
||||
<!-- 左侧面板 -->
|
||||
<div class="panel left">
|
||||
<el-input v-model="searchTerm" placeholder="搜索地块名称" clearable style="margin-bottom: 15px"></el-input>
|
||||
|
||||
<el-table :data="filteredFields" highlight-current-row style="width: 100%" height="calc(100vh - 300px)" @row-click="selectField">
|
||||
<el-table-column prop="name" label="名称"></el-table-column>
|
||||
<el-table-column prop="area" label="面积(㎡)">
|
||||
<template #default="{ row }">
|
||||
{{ row.area.toFixed(2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="stats">总面积: {{ totalArea.toFixed(2) }} ㎡</div>
|
||||
|
||||
<div class="button-group">
|
||||
<el-button type="primary" @click="startDrawing">新增地块</el-button>
|
||||
<el-button type="danger" :disabled="!selectedField" @click="removeField">删除地块</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧地图区域 -->
|
||||
<div class="panel right">
|
||||
<tdt-map class="map" :center="mapCenter" :zoom="mapZoom" @init="onMapInit"> </tdt-map>
|
||||
|
||||
<div class="layer-switch">
|
||||
<el-radio-group v-model="layerType" size="small" @change="changeBaseLayer">
|
||||
<el-radio-button label="vector">矢量</el-radio-button>
|
||||
<el-radio-button label="image">影像</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="field-layer-switch">
|
||||
<el-switch v-model="showFieldLayer" active-text="显示地块"></el-switch>
|
||||
</div>
|
||||
|
||||
<div class="zoom-scale">缩放级别: {{ mapZoom }}, 比例尺: 1:{{ scale.toLocaleString() }}</div>
|
||||
|
||||
<el-dialog v-model="drawDialogVisible" title="新增地块">
|
||||
<el-form>
|
||||
<el-form-item label="地块名称">
|
||||
<el-input v-model="newFieldName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地块面积">
|
||||
<el-input :value="newFieldArea.toFixed(2) + ' ㎡'" readonly></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="cancelDrawing">取消</el-button>
|
||||
<el-button type="primary" @click="saveNewField">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="mapDiv">
|
||||
<tdt-map ref="tdtMapRef" :center="state.center" :zoom="state.zoom" :style="{ height: mapHeight }">
|
||||
<!-- <tdt-tile-layer :layer-type="'img_w'"></tdt-tile-layer> -->
|
||||
<!-- <tdt-tile-layer :layer-type="'cia_w'" :z-index="2"></tdt-tile-layer> -->
|
||||
<tdt-tilelayer :url="state.img_w_url" :z-index="1"></tdt-tilelayer>
|
||||
<tdt-tilelayer :url="state.cia_w_url" :z-index="2"></tdt-tilelayer>
|
||||
</tdt-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { TdtMap } from 'vue-tianditu';
|
||||
import { ElMessage } from 'element-plus';
|
||||
// import { map_config } from '../../config/map';
|
||||
import { reactive, onMounted, ref } from 'vue';
|
||||
import { TdtMap, TdtTileLayer } from 'vue-tianditu';
|
||||
import { map_config } from '@/config/map';
|
||||
|
||||
// 模拟接口服务（使用localStorage）
|
||||
const fieldService = {
|
||||
getFields() {
|
||||
const fields = localStorage.getItem('fields');
|
||||
return Promise.resolve(fields ? JSON.parse(fields) : []);
|
||||
},
|
||||
createField(field) {
|
||||
return this.getFields().then((fields) => {
|
||||
field.id = Date.now();
|
||||
fields.push(field);
|
||||
localStorage.setItem('fields', JSON.stringify(fields));
|
||||
return field;
|
||||
});
|
||||
},
|
||||
deleteField(id) {
|
||||
return this.getFields().then((fields) => {
|
||||
const newFields = fields.filter((f) => f.id !== id);
|
||||
localStorage.setItem('fields', JSON.stringify(newFields));
|
||||
return newFields;
|
||||
});
|
||||
},
|
||||
};
|
||||
const key = map_config.tianditu.token;
|
||||
|
||||
// 响应式状态
|
||||
const fields = ref([]);
|
||||
const selectedField = ref(null);
|
||||
const searchTerm = ref('');
|
||||
const newFieldName = ref('');
|
||||
const drawDialogVisible = ref(false);
|
||||
const newFieldCoords = ref([]);
|
||||
const newFieldArea = ref(0);
|
||||
const layerType = ref('vector');
|
||||
const showFieldLayer = ref(true);
|
||||
const map = ref(null);
|
||||
const mapCenter = ref([100.088, 23.883]);
|
||||
const mapZoom = ref(12);
|
||||
const scale = ref(0);
|
||||
|
||||
// 天地图图层
|
||||
const baseLayers = {
|
||||
vector: null,
|
||||
vectorLabel: null,
|
||||
image: null,
|
||||
imageLabel: null,
|
||||
};
|
||||
|
||||
// 覆盖物图层
|
||||
const overlayLayer = ref(null);
|
||||
|
||||
// 计算属性
|
||||
const filteredFields = computed(() => {
|
||||
const term = searchTerm.value.toLowerCase();
|
||||
return term ? fields.value.filter((f) => f.name.toLowerCase().includes(term)) : fields.value;
|
||||
const state = reactive({
|
||||
center: [100.088, 23.883],
|
||||
zoom: 14,
|
||||
img_w_url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
||||
cia_w_url: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
||||
// 添加其他地图层URL
|
||||
// ...
|
||||
});
|
||||
|
||||
const totalArea = computed(() => {
|
||||
return fields.value.reduce((sum, field) => sum + field.area, 0);
|
||||
});
|
||||
// 确保地图有明确的高度
|
||||
const mapHeight = ref('100vh');
|
||||
|
||||
// 地图初始化
|
||||
const onMapInit = (mapInstance) => {
|
||||
map.value = mapInstance;
|
||||
|
||||
// 创建图层
|
||||
baseLayers.vector = new T.TileLayer('vec');
|
||||
baseLayers.vectorLabel = new T.TileLayer('cva');
|
||||
baseLayers.image = new T.TileLayer('img');
|
||||
baseLayers.imageLabel = new T.TileLayer('cia');
|
||||
|
||||
// 添加默认图层
|
||||
map.value.addLayer(baseLayers.image);
|
||||
map.value.addLayer(baseLayers.imageLabel);
|
||||
|
||||
// 创建覆盖物图层
|
||||
overlayLayer.value = new T.Map.OverlayLayer();
|
||||
map.value.addLayer(overlayLayer.value);
|
||||
|
||||
// 添加控件
|
||||
map.value.addControl(new T.Control.Zoom());
|
||||
map.value.addControl(new T.Control.Scale());
|
||||
|
||||
// 事件监听
|
||||
map.value.addEventListener('zoomend', updateScale);
|
||||
map.value.addEventListener('moveend', updateScale);
|
||||
|
||||
// 初始加载数据
|
||||
loadFields();
|
||||
};
|
||||
|
||||
// 更新比例尺
|
||||
const updateScale = () => {
|
||||
if (map.value) {
|
||||
mapZoom.value = map.value.getZoom();
|
||||
scale.value = Math.round(map.value.getScale());
|
||||
}
|
||||
};
|
||||
|
||||
// 切换底图
|
||||
const changeBaseLayer = () => {
|
||||
if (!map.value) return;
|
||||
|
||||
// 移除当前底图
|
||||
map.value.removeLayer(baseLayers.vector);
|
||||
map.value.removeLayer(baseLayers.vectorLabel);
|
||||
map.value.removeLayer(baseLayers.image);
|
||||
map.value.removeLayer(baseLayers.imageLabel);
|
||||
|
||||
// 添加新底图
|
||||
if (layerType.value === 'vector') {
|
||||
map.value.addLayer(baseLayers.vector);
|
||||
map.value.addLayer(baseLayers.vectorLabel);
|
||||
onMounted(() => {
|
||||
console.log('地图组件已挂载');
|
||||
// 检查天地图API是否加载成功
|
||||
if (window.T) {
|
||||
console.log('天地图API已加载:', window.T);
|
||||
} else {
|
||||
map.value.addLayer(baseLayers.image);
|
||||
map.value.addLayer(baseLayers.imageLabel);
|
||||
console.error('天地图API未加载');
|
||||
}
|
||||
};
|
||||
|
||||
// 加载地块数据
|
||||
const loadFields = () => {
|
||||
fieldService.getFields().then((data) => {
|
||||
fields.value = data;
|
||||
refreshOverlays();
|
||||
});
|
||||
};
|
||||
|
||||
// 刷新覆盖物
|
||||
const refreshOverlays = () => {
|
||||
if (!map.value || !overlayLayer.value) return;
|
||||
|
||||
// 清除所有覆盖物
|
||||
overlayLayer.value.clearOverLays();
|
||||
|
||||
// 如果不显示地块图层则跳过绘制
|
||||
if (!showFieldLayer.value) return;
|
||||
|
||||
// 绘制所有地块
|
||||
fields.value.forEach((field) => {
|
||||
const isSelected = selectedField.value?.id === field.id;
|
||||
const polygon = createPolygon(field, isSelected);
|
||||
overlayLayer.value.addOverLay(polygon);
|
||||
});
|
||||
};
|
||||
|
||||
// 创建多边形
|
||||
const createPolygon = (field, isSelected = false) => {
|
||||
const coords = field.geometry.coordinates[0].map((c) => new T.LngLat(c[0], c[1]));
|
||||
return new T.Polygon(coords, {
|
||||
color: isSelected ? '#ff0000' : '#1890ff',
|
||||
weight: isSelected ? 3 : 2,
|
||||
opacity: 0.8,
|
||||
fillColor: isSelected ? '#ffa39e' : '#e6f7ff',
|
||||
fillOpacity: 0.5,
|
||||
});
|
||||
};
|
||||
|
||||
// 选择地块
|
||||
const selectField = (field) => {
|
||||
selectedField.value = field;
|
||||
refreshOverlays();
|
||||
|
||||
// 居中显示选中地块
|
||||
if (map.value) {
|
||||
const coords = field.geometry.coordinates[0];
|
||||
const center = coords.reduce(
|
||||
(acc, coord) => {
|
||||
acc[0] += coord[0];
|
||||
acc[1] += coord[1];
|
||||
return acc;
|
||||
},
|
||||
[0, 0]
|
||||
);
|
||||
|
||||
center[0] /= coords.length;
|
||||
center[1] /= coords.length;
|
||||
|
||||
map.value.panTo(new T.LngLat(center[0], center[1]));
|
||||
}
|
||||
};
|
||||
|
||||
// 开始绘制
|
||||
const startDrawing = () => {
|
||||
if (!map.value) return;
|
||||
|
||||
// 清除当前覆盖物
|
||||
refreshOverlays();
|
||||
|
||||
// 创建绘制工具
|
||||
const polygonTool = new T.PolygonTool(map.value, {
|
||||
showLabel: true,
|
||||
color: '#fa541c',
|
||||
weight: 3,
|
||||
opacity: 0.6,
|
||||
fillColor: '#ffbb96',
|
||||
fillOpacity: 0.4,
|
||||
});
|
||||
|
||||
polygonTool.open();
|
||||
|
||||
// 绘制完成事件
|
||||
polygonTool.addEventListener('draw', (e) => {
|
||||
newFieldCoords.value = e.currentLnglats.map((lnglat) => [lnglat.lng, lnglat.lat]);
|
||||
newFieldArea.value = e.currentArea;
|
||||
drawDialogVisible.value = true;
|
||||
|
||||
// 清除临时图形
|
||||
polygonTool.close();
|
||||
});
|
||||
};
|
||||
|
||||
// 保存新地块
|
||||
const saveNewField = () => {
|
||||
if (!newFieldName.value.trim()) {
|
||||
ElMessage.error('请输入地块名称');
|
||||
return;
|
||||
}
|
||||
|
||||
const newField = {
|
||||
id: Date.now(),
|
||||
name: newFieldName.value,
|
||||
area: newFieldArea.value,
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [newFieldCoords.value],
|
||||
},
|
||||
};
|
||||
|
||||
fieldService.createField(newField).then(() => {
|
||||
ElMessage.success('地块创建成功');
|
||||
drawDialogVisible.value = false;
|
||||
newFieldName.value = '';
|
||||
loadFields();
|
||||
});
|
||||
};
|
||||
|
||||
// 取消绘制
|
||||
const cancelDrawing = () => {
|
||||
drawDialogVisible.value = false;
|
||||
refreshOverlays();
|
||||
};
|
||||
|
||||
// 删除地块
|
||||
const removeField = () => {
|
||||
if (!selectedField.value) return;
|
||||
|
||||
fieldService.deleteField(selectedField.value.id).then(() => {
|
||||
ElMessage.success('地块已删除');
|
||||
selectedField.value = null;
|
||||
loadFields();
|
||||
});
|
||||
};
|
||||
|
||||
// 监听地块图层显示状态
|
||||
watch(showFieldLayer, refreshOverlays);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.field-management {
|
||||
display: flex;
|
||||
height: calc(100vh - 160px);
|
||||
}
|
||||
|
||||
.panel.left {
|
||||
width: 320px;
|
||||
padding: 15px;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.panel.right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map {
|
||||
.mapDiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layer-switch {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.field-layer-switch {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 15px;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.zoom-scale {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.stats {
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
background: #edf2ff;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
color: #364fc7;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.button-group > * {
|
||||
flex: 1;
|
||||
height: 100vh; /* 确保容器有明确高度 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,47 +1,401 @@
|
||||
<template>
|
||||
<div class="mapDiv">
|
||||
<tdt-map ref="tdtMapRef" :center="state.center" :zoom="state.zoom" :style="{ height: mapHeight }">
|
||||
<!-- <tdt-tile-layer :layer-type="'img_w'"></tdt-tile-layer> -->
|
||||
<!-- <tdt-tile-layer :layer-type="'cia_w'" :z-index="2"></tdt-tile-layer> -->
|
||||
<tdt-tilelayer :url="state.img_w_url" :z-index="1"></tdt-tilelayer>
|
||||
<tdt-tilelayer :url="state.cia_w_url" :z-index="2"></tdt-tilelayer>
|
||||
</tdt-map>
|
||||
<div class="field-management">
|
||||
<!-- 左侧面板 -->
|
||||
<div class="panel left">
|
||||
<el-input v-model="searchTerm" placeholder="搜索地块名称" clearable style="margin-bottom: 15px"></el-input>
|
||||
|
||||
<el-table :data="filteredFields" highlight-current-row style="width: 100%" height="calc(100vh - 300px)" @row-click="selectField">
|
||||
<el-table-column prop="name" label="名称"></el-table-column>
|
||||
<el-table-column prop="area" label="面积(㎡)">
|
||||
<template #default="{ row }">
|
||||
{{ row.area.toFixed(2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="stats">总面积: {{ totalArea.toFixed(2) }} ㎡</div>
|
||||
|
||||
<div class="button-group">
|
||||
<el-button type="primary" @click="startDrawing">新增地块</el-button>
|
||||
<el-button type="danger" :disabled="!selectedField" @click="removeField">删除地块</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧地图区域 -->
|
||||
<div class="panel right">
|
||||
<tdt-map class="map" :center="mapCenter" :zoom="mapZoom" @init="onMapInit"> </tdt-map>
|
||||
|
||||
<div class="layer-switch">
|
||||
<el-radio-group v-model="layerType" size="small" @change="changeBaseLayer">
|
||||
<el-radio-button label="vector">矢量</el-radio-button>
|
||||
<el-radio-button label="image">影像</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="field-layer-switch">
|
||||
<el-switch v-model="showFieldLayer" active-text="显示地块"></el-switch>
|
||||
</div>
|
||||
|
||||
<div class="zoom-scale">缩放级别: {{ mapZoom }}, 比例尺: 1:{{ scale.toLocaleString() }}</div>
|
||||
|
||||
<el-dialog v-model="drawDialogVisible" title="新增地块">
|
||||
<el-form>
|
||||
<el-form-item label="地块名称">
|
||||
<el-input v-model="newFieldName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地块面积">
|
||||
<el-input :value="newFieldArea.toFixed(2) + ' ㎡'" readonly></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="cancelDrawing">取消</el-button>
|
||||
<el-button type="primary" @click="saveNewField">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref } from 'vue';
|
||||
import { TdtMap, TdtTileLayer } from 'vue-tianditu';
|
||||
import { map_config } from '@/config/map';
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { TdtMap } from 'vue-tianditu';
|
||||
import { ElMessage } from 'element-plus';
|
||||
// import { map_config } from '../../config/map';
|
||||
|
||||
const key = map_config.tianditu.token;
|
||||
// 模拟接口服务（使用localStorage）
|
||||
const fieldService = {
|
||||
getFields() {
|
||||
const fields = localStorage.getItem('fields');
|
||||
return Promise.resolve(fields ? JSON.parse(fields) : []);
|
||||
},
|
||||
createField(field) {
|
||||
return this.getFields().then((fields) => {
|
||||
field.id = Date.now();
|
||||
fields.push(field);
|
||||
localStorage.setItem('fields', JSON.stringify(fields));
|
||||
return field;
|
||||
});
|
||||
},
|
||||
deleteField(id) {
|
||||
return this.getFields().then((fields) => {
|
||||
const newFields = fields.filter((f) => f.id !== id);
|
||||
localStorage.setItem('fields', JSON.stringify(newFields));
|
||||
return newFields;
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
center: [100.088, 23.883],
|
||||
zoom: 14,
|
||||
img_w_url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
||||
cia_w_url: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
||||
// 添加其他地图层URL
|
||||
// ...
|
||||
// 响应式状态
|
||||
const fields = ref([]);
|
||||
const selectedField = ref(null);
|
||||
const searchTerm = ref('');
|
||||
const newFieldName = ref('');
|
||||
const drawDialogVisible = ref(false);
|
||||
const newFieldCoords = ref([]);
|
||||
const newFieldArea = ref(0);
|
||||
const layerType = ref('vector');
|
||||
const showFieldLayer = ref(true);
|
||||
const map = ref(null);
|
||||
const mapCenter = ref([100.088, 23.883]);
|
||||
const mapZoom = ref(12);
|
||||
const scale = ref(0);
|
||||
|
||||
// 天地图图层
|
||||
const baseLayers = {
|
||||
vector: null,
|
||||
vectorLabel: null,
|
||||
image: null,
|
||||
imageLabel: null,
|
||||
};
|
||||
|
||||
// 覆盖物图层
|
||||
const overlayLayer = ref(null);
|
||||
|
||||
// 计算属性
|
||||
const filteredFields = computed(() => {
|
||||
const term = searchTerm.value.toLowerCase();
|
||||
return term ? fields.value.filter((f) => f.name.toLowerCase().includes(term)) : fields.value;
|
||||
});
|
||||
|
||||
// 确保地图有明确的高度
|
||||
const mapHeight = ref('100vh');
|
||||
const totalArea = computed(() => {
|
||||
return fields.value.reduce((sum, field) => sum + field.area, 0);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
console.log('地图组件已挂载');
|
||||
// 检查天地图API是否加载成功
|
||||
if (window.T) {
|
||||
console.log('天地图API已加载:', window.T);
|
||||
} else {
|
||||
console.error('天地图API未加载');
|
||||
// 地图初始化
|
||||
const onMapInit = (mapInstance) => {
|
||||
map.value = mapInstance;
|
||||
|
||||
// 创建图层
|
||||
baseLayers.vector = new T.TileLayer('vec');
|
||||
baseLayers.vectorLabel = new T.TileLayer('cva');
|
||||
baseLayers.image = new T.TileLayer('img');
|
||||
baseLayers.imageLabel = new T.TileLayer('cia');
|
||||
|
||||
// 添加默认图层
|
||||
map.value.addLayer(baseLayers.image);
|
||||
map.value.addLayer(baseLayers.imageLabel);
|
||||
|
||||
// 创建覆盖物图层
|
||||
overlayLayer.value = new T.Map.OverlayLayer();
|
||||
map.value.addLayer(overlayLayer.value);
|
||||
|
||||
// 添加控件
|
||||
map.value.addControl(new T.Control.Zoom());
|
||||
map.value.addControl(new T.Control.Scale());
|
||||
|
||||
// 事件监听
|
||||
map.value.addEventListener('zoomend', updateScale);
|
||||
map.value.addEventListener('moveend', updateScale);
|
||||
|
||||
// 初始加载数据
|
||||
loadFields();
|
||||
};
|
||||
|
||||
// 更新比例尺
|
||||
const updateScale = () => {
|
||||
if (map.value) {
|
||||
mapZoom.value = map.value.getZoom();
|
||||
scale.value = Math.round(map.value.getScale());
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 切换底图
|
||||
const changeBaseLayer = () => {
|
||||
if (!map.value) return;
|
||||
|
||||
// 移除当前底图
|
||||
map.value.removeLayer(baseLayers.vector);
|
||||
map.value.removeLayer(baseLayers.vectorLabel);
|
||||
map.value.removeLayer(baseLayers.image);
|
||||
map.value.removeLayer(baseLayers.imageLabel);
|
||||
|
||||
// 添加新底图
|
||||
if (layerType.value === 'vector') {
|
||||
map.value.addLayer(baseLayers.vector);
|
||||
map.value.addLayer(baseLayers.vectorLabel);
|
||||
} else {
|
||||
map.value.addLayer(baseLayers.image);
|
||||
map.value.addLayer(baseLayers.imageLabel);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载地块数据
|
||||
const loadFields = () => {
|
||||
fieldService.getFields().then((data) => {
|
||||
fields.value = data;
|
||||
refreshOverlays();
|
||||
});
|
||||
};
|
||||
|
||||
// 刷新覆盖物
|
||||
const refreshOverlays = () => {
|
||||
if (!map.value || !overlayLayer.value) return;
|
||||
|
||||
// 清除所有覆盖物
|
||||
overlayLayer.value.clearOverLays();
|
||||
|
||||
// 如果不显示地块图层则跳过绘制
|
||||
if (!showFieldLayer.value) return;
|
||||
|
||||
// 绘制所有地块
|
||||
fields.value.forEach((field) => {
|
||||
const isSelected = selectedField.value?.id === field.id;
|
||||
const polygon = createPolygon(field, isSelected);
|
||||
overlayLayer.value.addOverLay(polygon);
|
||||
});
|
||||
};
|
||||
|
||||
// 创建多边形
|
||||
const createPolygon = (field, isSelected = false) => {
|
||||
const coords = field.geometry.coordinates[0].map((c) => new T.LngLat(c[0], c[1]));
|
||||
return new T.Polygon(coords, {
|
||||
color: isSelected ? '#ff0000' : '#1890ff',
|
||||
weight: isSelected ? 3 : 2,
|
||||
opacity: 0.8,
|
||||
fillColor: isSelected ? '#ffa39e' : '#e6f7ff',
|
||||
fillOpacity: 0.5,
|
||||
});
|
||||
};
|
||||
|
||||
// 选择地块
|
||||
const selectField = (field) => {
|
||||
selectedField.value = field;
|
||||
refreshOverlays();
|
||||
|
||||
// 居中显示选中地块
|
||||
if (map.value) {
|
||||
const coords = field.geometry.coordinates[0];
|
||||
const center = coords.reduce(
|
||||
(acc, coord) => {
|
||||
acc[0] += coord[0];
|
||||
acc[1] += coord[1];
|
||||
return acc;
|
||||
},
|
||||
[0, 0]
|
||||
);
|
||||
|
||||
center[0] /= coords.length;
|
||||
center[1] /= coords.length;
|
||||
|
||||
map.value.panTo(new T.LngLat(center[0], center[1]));
|
||||
}
|
||||
};
|
||||
|
||||
// 开始绘制
|
||||
const startDrawing = () => {
|
||||
if (!map.value) return;
|
||||
|
||||
// 清除当前覆盖物
|
||||
refreshOverlays();
|
||||
|
||||
// 创建绘制工具
|
||||
const polygonTool = new T.PolygonTool(map.value, {
|
||||
showLabel: true,
|
||||
color: '#fa541c',
|
||||
weight: 3,
|
||||
opacity: 0.6,
|
||||
fillColor: '#ffbb96',
|
||||
fillOpacity: 0.4,
|
||||
});
|
||||
|
||||
polygonTool.open();
|
||||
|
||||
// 绘制完成事件
|
||||
polygonTool.addEventListener('draw', (e) => {
|
||||
newFieldCoords.value = e.currentLnglats.map((lnglat) => [lnglat.lng, lnglat.lat]);
|
||||
newFieldArea.value = e.currentArea;
|
||||
drawDialogVisible.value = true;
|
||||
|
||||
// 清除临时图形
|
||||
polygonTool.close();
|
||||
});
|
||||
};
|
||||
|
||||
// 保存新地块
|
||||
const saveNewField = () => {
|
||||
if (!newFieldName.value.trim()) {
|
||||
ElMessage.error('请输入地块名称');
|
||||
return;
|
||||
}
|
||||
|
||||
const newField = {
|
||||
id: Date.now(),
|
||||
name: newFieldName.value,
|
||||
area: newFieldArea.value,
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [newFieldCoords.value],
|
||||
},
|
||||
};
|
||||
|
||||
fieldService.createField(newField).then(() => {
|
||||
ElMessage.success('地块创建成功');
|
||||
drawDialogVisible.value = false;
|
||||
newFieldName.value = '';
|
||||
loadFields();
|
||||
});
|
||||
};
|
||||
|
||||
// 取消绘制
|
||||
const cancelDrawing = () => {
|
||||
drawDialogVisible.value = false;
|
||||
refreshOverlays();
|
||||
};
|
||||
|
||||
// 删除地块
|
||||
const removeField = () => {
|
||||
if (!selectedField.value) return;
|
||||
|
||||
fieldService.deleteField(selectedField.value.id).then(() => {
|
||||
ElMessage.success('地块已删除');
|
||||
selectedField.value = null;
|
||||
loadFields();
|
||||
});
|
||||
};
|
||||
|
||||
// 监听地块图层显示状态
|
||||
watch(showFieldLayer, refreshOverlays);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mapDiv {
|
||||
.field-management {
|
||||
display: flex;
|
||||
height: calc(100vh - 160px);
|
||||
}
|
||||
|
||||
.panel.left {
|
||||
width: 320px;
|
||||
padding: 15px;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.panel.right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100vh; /* 确保容器有明确高度 */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layer-switch {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.field-layer-switch {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 15px;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.zoom-scale {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.stats {
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
background: #edf2ff;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
color: #364fc7;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.button-group > * {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
|
||||
<div class="custom-page">
|
||||
<!-- <h1>统计数据</h1> -->
|
||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
|
||||
<!-- <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" />
|
||||
@ -9,12 +8,13 @@
|
||||
<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> -->
|
||||
</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';
|
||||
@ -57,7 +57,7 @@ let data1 = ref([
|
||||
]);
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData();
|
||||
// getData();
|
||||
});
|
||||
|
||||
const getData = async () => {
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
</div>
|
||||
<div class="good-price-num">
|
||||
<div class="good-price-num-pos">
|
||||
<div class="price" @click="toCheckGood(index, indexg)">{{ g.price }} / {{ g.unit }}</div>
|
||||
<div class="price" @click="toCheckGood(index, indexg)">{{ g.netWeightInfoVO.goodSpecs }}</div>
|
||||
<div class="total" @click="toCheckGood(index, indexg)">{{ (g.price * g.quantity).toFixed(2) }}</div>
|
||||
<div class="num">
|
||||
<div class="right-item">
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
<div class="good-price-num">
|
||||
<div class="good-price-num-pos">
|
||||
<div class="price">￥{{ g.unitPrice }} / {{ g.unit }} * {{ g.quantity }}</div>
|
||||
<div class="price">{{ g.netWeightInfoVO ? g.netWeightInfoVO.goodSpecs : '' }}</div>
|
||||
<div class="total">
|
||||
<div class="amount">{{ (g.unitPrice * g.quantity).toFixed(2) }}</div>
|
||||
<!-- <div class="amount">{{ (g.unitPrice * g.quantity + g.carriage).toFixed(2) }}</div> -->
|
||||
@ -195,6 +195,7 @@ let bottomList = reactive([
|
||||
onMounted(() => {
|
||||
page.orderStatus = 'all';
|
||||
store.getData(page).then((res) => {
|
||||
console.log(typeof res.records[0].orderItemInfos[0].netWeightInfoVO.goodSpecs);
|
||||
total.value = res.total;
|
||||
if (res.records.length > 0) {
|
||||
show.value = true;
|
||||
|
||||
28
yarn.lock
28
yarn.lock
@ -621,11 +621,6 @@ minimatch@^3.0.4:
|
||||
dependencies:
|
||||
brace-expansion "^1.1.7"
|
||||
|
||||
mitt@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz"
|
||||
integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
|
||||
|
||||
nice-try@^1.0.4:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.npmmirror.com/nice-try/-/nice-try-1.0.5.tgz"
|
||||
@ -1040,29 +1035,6 @@ validate-npm-package-license@^3.0.1:
|
||||
spdx-correct "^3.0.0"
|
||||
spdx-expression-parse "^3.0.0"
|
||||
|
||||
vue-demi@^0.12.1:
|
||||
version "0.12.5"
|
||||
resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz"
|
||||
integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
|
||||
|
||||
vue-demi@^0.14.10:
|
||||
version "0.14.10"
|
||||
resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz"
|
||||
integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
|
||||
|
||||
vue-tianditu@^2.7.6:
|
||||
version "2.7.6"
|
||||
resolved "https://registry.npmmirror.com/vue-tianditu/-/vue-tianditu-2.7.6.tgz"
|
||||
integrity sha512-Yvcxg0IAgGB3ZY8zlC5ayjo9f85fa8PFTaifguTNpri76g67GO9toaRWMjBKi39yYHMBADaT3P6bEkJx87X8MQ==
|
||||
dependencies:
|
||||
mitt "^3.0.0"
|
||||
vue-demi "^0.12.1"
|
||||
|
||||
"vue@^2.0.0 || >=3.0.0", "vue@^3.0.0-0 || ^2.6.0":
|
||||
version "2.6.14"
|
||||
resolved "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz"
|
||||
integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
|
||||
|
||||
which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.npmmirror.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user