feat:添加loading

张含笑

2025-11-17 f825060d6fb16536bd735674784664479d8f6483

feat:添加loading

 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

 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>

 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();