feat:添加loading效果

张含笑

2025-09-06 cba2524efd961fb961970d0b29a17981dc89458f

feat:添加loading效果

 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
}

 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) {
    //当前已编辑 → 取消编辑（关闭绘制、重置状态）