From cba2524efd961fb961970d0b29a17981dc89458f Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Sat, 06 Sep 2025 14:04:31 +0800
Subject: [PATCH] feat:添加loading效果
---
src/utils/rem.js | 7 +++++++
src/views/resource/components/spotDetails.vue | 17 ++++++++++++-----
2 files changed, 19 insertions(+), 5 deletions(-)
diff --git a/src/utils/rem.js b/src/utils/rem.js
index 741e12b..f2c3ace 100644
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
@@ -10,3 +10,10 @@
export const pxToRem = width => {
return width * 0.1 + 'rem'
}
+
+
+// 不带单位的px转rem
+export const pxToRemNum = width => {
+ const scale = document.documentElement.clientWidth / 192
+ return width * 0.1 * scale
+}
\ No newline at end of file
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index d18a90c..00a7bb6 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -67,7 +67,7 @@
@row-click="handleLocationPolygon"
@current-change="handleTableRowChange"
>
- <el-table-column type="index" align="center" width="30" label="序号">
+ <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
<template #default="{ $index }">
{{
($index + 1 + (params.page - 1) * params.pageSize).toString().padStart(2, '0')
@@ -83,7 +83,11 @@
<el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
<template #default="scope">
<span class="operationspan" @click="handleDelete(scope.row)">删除</span>
- <span class="operationspan" v-if="scope.row.is_exception == 2" @click.stop="handleSelectionChange(scope.row)">
+ <span
+ class="operationspan"
+ v-if="scope.row.is_exception == 2"
+ @click.stop="handleSelectionChange(scope.row)"
+ >
{{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
</span>
</template>
@@ -118,13 +122,14 @@
<img @click="handleCancel" src="@/assets/images/home/territory/cancelbtn.png" alt="" />
</div>
<!-- 地图 -->
- <div id="spotMap" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
+ <div id="spotMap" v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.7)" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
</div>
</div>
</el-dialog>
</template>
<script setup>
+import { pxToRem, pxToRemNum } from '@/utils/rem'
import DrawPolygon from '@/views/resource/components/DrawPolygon.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { findAreaName } from '@/utils/areaUtils';
@@ -148,6 +153,7 @@
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);
let tbJwdList = [];
+const loading = ref(false);
const tableData = ref([]);
const AlltableData = ref([]);
let total = ref(0);
@@ -269,6 +275,7 @@
};
// 所有图斑数据
const getAlltableMapListApi = () => {
+ loading.value = true;
const requestParams = {
patchesInfoId: props.detailid,
};
@@ -285,6 +292,7 @@
} else {
entitiesAddSpot();
}
+ loading.value = false;
});
};
const handleSizeChange = val => {
@@ -485,10 +493,9 @@
// 编辑
const handleSelectionChange = row => {
let curRowIsSelect = row;
- curRowIsSelect && handleLocationPolygon(row);
+ curRowIsSelect && handleLocationPolygon(row);
selectionIds.value = row.id;
selectionList.value = row;
-
if (isEditing.value) {
//当前已编辑 → 取消编辑（关闭绘制、重置状态）
--
Gitblit v1.9.3