From f825060d6fb16536bd735674784664479d8f6483 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 17 Nov 2025 18:51:38 +0800
Subject: [PATCH] feat:添加loading
---
src/views/layerManagement/components/rightEdit.vue | 56 ++++++++++++++++++++--------
src/views/layerManagement/components/leftList.vue | 2
src/views/layerManagement/index.vue | 10 ++++
3 files changed, 50 insertions(+), 18 deletions(-)
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index 0ac6bb9..0b52fce 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -44,7 +44,7 @@
<div
class="tableListBox"
v-loading="loading"
- element-loading-background="rgba(0, 0, 0, 0.5)"
+ element-loading-background="rgba(0, 0, 0, 0.2)"
element-loading-text="加载中..."
>
<el-tree
diff --git a/src/views/layerManagement/components/rightEdit.vue b/src/views/layerManagement/components/rightEdit.vue
index 9e9dee6..80b2413 100644
--- a/src/views/layerManagement/components/rightEdit.vue
+++ b/src/views/layerManagement/components/rightEdit.vue
@@ -1,5 +1,5 @@
<template>
- <div class="rightContainer">
+ <div class="rightContainer" >
<div class="contenttitle">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}信息</div>
<div class="centerBox">
<div class="itemRow">
@@ -133,7 +133,7 @@
import dayjs from 'dayjs';
import { deitFenceApi, addFenceApi } from '@/api/layer/index';
import EventBus from '@/utils/eventBus';
-const emit = defineEmits(['callParentMethod']);
+const emit = defineEmits(['callParentMethod','update:loading']);
const layerParams = inject('layerParams');
const options = ref([]);
const timeValue = ref('');
@@ -150,6 +150,7 @@
geo_data: '',
});
+const loading = ref(false);
const detailData = ref(null);
const fenceArea = ref(0);
detailData.value = layerParams.value.editDetailData;
@@ -237,6 +238,8 @@
layerParams.value.editingIsProhibited = false;
};
const cancelHandel = () => {
+loading.value = false
+ emit('update:loading', false);
clearAllData();
emit('callParentMethod');
EventBus.emit('gettreeDataApi');
@@ -258,6 +261,8 @@
ElMessage.error('请绘制区域');
return;
}
+ loading.value = true
+ emit('update:loading', true);
const params = {
folder_id: formData.value.folder_id,
name: formData.value.name,
@@ -275,24 +280,42 @@
if (layerParams.value.decideWhetherToAddOrEdit === 2) {
params.id = detailData.value.id;
}
+
if (layerParams.value.decideWhetherToAddOrEdit === 1) {
//围栏新增
- addFenceApi(params).then(res => {
- ElMessage.success('新增成功');
- EventBus.emit('gettreeDataApi');
- clearAllData();
- emit('callParentMethod');
- });
+ addFenceApi(params)
+ .then(res => {
+ ElMessage.success('新增成功');
+ EventBus.emit('gettreeDataApi');
+ clearAllData();
+ emit('callParentMethod');
+ })
+ .catch(err => {
+ ElMessage.error('新增失败，请重试');
+ console.error('新增失败：', err);
+ })
+ .finally(() => {
+ loading.value = false;
+ emit('update:loading', false);
+ });
} else if (layerParams.value.decideWhetherToAddOrEdit === 2) {
//围栏编辑
- deitFenceApi(params).then(res => {
- ElMessage.success('编辑成功');
- EventBus.emit('gettreeDataApi');
-
- clearAllData();
- emit('callParentMethod');
- });
- }
+ deitFenceApi(params)
+ .then(res => {
+ ElMessage.success('编辑成功');
+ EventBus.emit('gettreeDataApi');
+ clearAllData();
+ emit('callParentMethod');
+ })
+ .catch(err => {
+ ElMessage.error('编辑失败，请重试');
+ console.error('编辑失败：', err);
+ })
+ .finally(() => {
+ loading.value = false;
+ emit('update:loading', false);
+ });
+ }
};
onMounted(() => {
// 获取判断状态（默认设为 1）
@@ -420,6 +443,7 @@
height: 39px;
cursor: pointer;
}
+
}
}
</style>
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 0c56040..c74111d 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -8,7 +8,9 @@
</el-tabs>
</div>
<!-- 地图 -->
- <div class="mapContainer">
+ <div class="mapContainer" v-loading="isPageLoading"
+ element-loading-background="rgba(0, 0, 0, 0.5)"
+ element-loading-text="加载中...">
<div class="tool-tip" v-if="layerParams.addNest">点击地图生成测绘区域</div>
<div id="layMap" class="ztzf-cesium"></div>
<leftList
@@ -28,6 +30,7 @@
<rightEdit
v-if="layerParams.addNest || layerParams.editNest"
@callParentMethod="parentMethod"
+ @update:loading="handleLoadingChange"
></rightEdit>
<folderFile
@refreshMethod="refreshMethod"
@@ -438,6 +441,11 @@
cesium.removeEventListener('contextmenu', preventDefault);
}
};
+// 添加loading
+const isPageLoading = ref(false);
+const handleLoadingChange = (status) => {
+ isPageLoading.value = status;
+};
provide('layerParams', layerParams);
onMounted(() => {
initMap();
--
Gitblit v1.9.3