feat：更新初始化地形

chenyao

2025-11-17 233e4fc4f35bd00a36ee34a7fbf5e47b41db26db

 src/views/resource/components/spotDetails.vue

@@ -1,10 +1,11 @@
<template>
  <el-dialog
    class="spotDialog"
    class="spotDialog ztzf-dialog-mange"
    :title="props.title"
    v-model="uploadPatchDialog"
    width="75%"
    width="78%"
    align-center

  >
    <div class="container">
      <!-- 信息展示区 -->
@@ -28,7 +29,7 @@
                    <el-select
                      v-model="item.value"
                      placeholder="请选择图斑类型"
                      style="width: 100%"
                      style="width: 102%"
                    >
                      <el-option
                        v-for="opt in spotTypeOptions"
@@ -39,11 +40,13 @@
                    </el-select>
                  </template>
                  <template v-else-if="item.name === '文件名称'">
                    <el-input v-model="item.value" />
                    <el-input style="width: 102%" v-model="item.value" />
                  </template>
                </template>
                <template v-else>
                  <div class="itemValue">{{ item.value }}</div>
                  <div class="itemValue" :class="{ 'error-text': item.name === '异常图斑数量' }">
                    {{ item.value }}
                  </div>
                </template>
              </div>
            </div>
@@ -63,92 +66,94 @@
              :row-class-name="tableRowClassName"
              :data="tableData"
              @row-click="handleLocationPolygon"
              
            >
              <el-table-column type="index" align="center" width="30" label="序号">
                <template #default="{ $index }">
                  {{
                    ($index + 1 + (params.page - 1) * params.pageSize).toString().padStart(2, '0')
                  }}
                </template>
              <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
               <template #default="{ $index }">
                {{ ($index + 1).toString().padStart(2, '0') }} 
              </template>
              </el-table-column>
              <el-table-column prop="dkbh" align="center" label="图斑名称" show-overflow-tooltip />
              <el-table-column prop="is_exception" align="center" label="图斑状态">
              <el-table-column prop="dkbh" align="center"  label="图斑名称" show-overflow-tooltip />
              <el-table-column prop="is_exception" :width="pxToRemNum(50)" align="center" label="图斑状态">
                <template #default="scope">
                  <span>{{ scope.row.is_exception === 2 ? '异常' : '正常' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
              <el-table-column label="操作"  align="center" v-if="props.title === '图斑编辑'">
                <template #default="scope">
                  <span class="operationspan" @click="handleDelete(scope.row)">删除</span>
                  <span class="operationspan" @click="handleSelectionChange(scope.row)">编辑</span>
                  <span
                    class="operationspan"
                    v-if="scope.row.is_exception == 2"
                    @click.stop="handleSelectionChange(scope.row)"
                  >
                    {{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                :current-page="params.page"
                :page-size="params.pageSize"
                background
                layout="prev, pager, next, ..."
                :pager-count="3"
                prev-text="上一页"
                next-text="下一页"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
           
          </div>
        </div>
        <!--绘制按钮-->
        <FunButton
          ref="funButtonEle"
          v-model:isBoxSelect="isBoxSelect"
          v-model:isDrawPolygon="isDrawPolygon"
        ></FunButton>

        <DrawPolygon
          ref="drawPolygonRef"
          v-if="isEditing"
          @upDateDrawState="handleUpDateDrawState"
        
        />
        <!-- 完成/取消 -->
        <div class="btnGroups" v-if="props.title === '图斑编辑'">
          <img @click="handleSave" src="@/assets/images/home/territory/savebtn.png" alt="" />
          <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 { flyVisual } from '@/utils/cesium/mapUtil'
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';
import {
  patchEditApi,
  spotManagementTableApi,
  searchManagementApi,
  uploadManagementApi,
  tableMapListApi,
  deletePatches,
  AlltableMapListApi,
  spotManagementTableApi,
} from '@/api/patchManagement/index';
import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
import { getPatchesSpotList } from '@/api/patchManagement/index';

import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
import FunButton from '@/views/resource/components/FunButton.vue';
// 标记地图是否初始化完成
const isMapReady = ref(false);
const uploadPatchDialog = defineModel('show');
const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption']);
const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption', 'regionalData']);
const polygonTableEle = ref(null);
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);
let tbJwdList = [];
const loading = ref(false);
const tableData = ref([]);
const AlltableData = ref([]);
let total = ref(0);
const refreshonload = inject('searchReset');
const initialFileName = ref(''); 
const initialSpotTypeId = ref(''); 
const initialFileName = ref('');
const initialSpotTypeId = ref('');
const initialSpotTypeLabel = ref('');
// 当前选中的图斑面数据
let nowSelectObj = ref({});
const spotManagementData = ref(null);
const isEditing = ref(false);
const drawPolygonRef = ref(null);
// 记录上一次点击高亮
let lastHighlightRow = null;
// 功能按钮区域相关：编辑图斑等
@@ -160,7 +165,7 @@
const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;

let lastEntity = null;
// 表格隔行变色
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
@@ -189,81 +194,82 @@
  { immediate: true }
);
watch(
  () => props.detailList,
  () => spotManagementData.value,
  newVal => {
    if (newVal) {
      updateInfoList(newVal);
    }
    if (newVal) updateInfoList(newVal);
  },
  { immediate: true }
);

// 图斑编辑详情
const getspotManagementTableApi = () => {
  spotManagementTableApi({ id: props.detailid }).then(res => {
    spotManagementData.value = {
      ...res.data.data.records[0],
      dataFrom: res.data.data.records[0].date_from === 0 ? '本地上传' : '国土调查云',
      areaName: findAreaName(res.data.data.records[0].area_code, props.regionalData, true),
    };
  });
};

// 将 lot_type_id 转换为对应的 label
const getPatchTypeLabel = lotTypeId => {
  const option = spotTypeOptions.value.find(opt => opt.value === String(lotTypeId));
  return option ? option.label : '';
};
const updateInfoList = detailData => {
  
  if (detailData && (initialFileName.value === '' || initialSpotTypeId.value === '')) {
    initialFileName.value = detailData.file_name || ''; 
  if (!detailData) return;
  if (initialFileName.value === '' || initialSpotTypeId.value === '') {
    initialFileName.value = detailData.file_name || '';
    initialSpotTypeId.value = detailData.lot_type_id || '';
    initialSpotTypeLabel.value = detailData.patches_type_desc 
      ? detailData.patches_type_desc 
      : getPatchTypeLabel(detailData.lot_type_id); 
    initialSpotTypeLabel.value =
      detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id);
  }

  infoList.value = infoList.value.map(item => {
    let value = detailData[item.field] !== undefined ? detailData[item.field] : item.value;

    const value = detailData[item.field] ?? item.value;
    if (item.name === '图斑类型') {
      if (detailData.patches_type_desc !== undefined) {
        return { ...item, value: detailData.patches_type_desc, originalValue: detailData.lot_type_id };
      } else if (detailData.lot_type_id !== undefined) {
        return { ...item, value: getPatchTypeLabel(detailData.lot_type_id), originalValue: detailData.lot_type_id };
      }
      return {
        ...item,
        value: detailData.patches_type_desc || getPatchTypeLabel(detailData.lot_type_id),
        originalValue: detailData.lot_type_id,
      };
    }

    return { ...item, value: value };
    return { ...item, value };
  });
};
const params = ref({
  page: 1,
  pageSize: 20,
  pageSize: 10,
});
const isInit = ref(true);
// 图斑管理表格
const getTableList = () => {
  const requestParams = {
    patchesInfoId: props.detailid,
    page: params.value.page,
    pageSize: params.value.pageSize,
  
  };
  tableMapListApi(requestParams).then(res => {
    tableData.value = res.data.data.records?.map(item => ({
  AlltableMapListApi(requestParams).then(res => {
    tableData.value = res.data.data?.map(item => ({
      ...item,
      dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
    }));
    total.value = res.data.data.total || res.data.data.length;
    tbJwdList = [];
    viewer?.entities.removeAll();
    entitiesAddSpot();
    if (!tableData.value) {
      viewInstance.value?.flyToContour();
    } else {
      entitiesAddSpot();
    }
  });
};

const handleSizeChange = val => {
  params.value.pageSize = val;
  params.value.page = 1;
  getTableList();
};
const handleCurrentChange = val => {
  params.value.page = val;
  getTableList();
};
const tableData = ref([]);


// 地图
const initMap = () => {
  if (!document.getElementById('spotMap')) {
    return;
  }
  if (!document.getElementById('spotMap') || isMapReady.value) return;
  
  publicCesiumInstance = new PublicCesium({
    dom: 'spotMap',
    flatMode: false,
@@ -271,38 +277,80 @@
    layerMode: 4,
    contour: false,
  });
  
  homeViewer.value = publicCesiumInstance.getViewer();
  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;
  viewInstance.value = publicCesiumInstance; 
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewInstance.value.switchContour(true);

  // 确保 readyPromise 存在
  if (viewer.readyPromise) {
    viewer.readyPromise.then(() => {
      isMapReady.value = true; 
      getTableList();
    }).catch((error) => {
      console.error('地图加载失败：', error);
      ElMessage.error('地图加载失败，请刷新重试');
    });
  } else {

    // 如果没有 readyPromise
    setTimeout(() => {
      isMapReady.value = true;
      getTableList();
    }, 1000);
  }
};


// 仅弹框初始化时执行的定位逻辑
const initMapLocation = () => {
  if (tbJwdList.length === 0 || !homeViewer.value) return;
  
  // 计算所有图斑的包围球（用于初始化定位）
  const allPositions = tbJwdList.flatMap(item => 
    Cesium.Cartesian3.fromDegreesArray(item.grouped)
  );
  const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);
  
  // 初始化定位（仅执行一次）
  homeViewer.value.camera.flyToBoundingSphere(boundingSphere, {
    duration: 0,
    offset: new Cesium.HeadingPitchRange(
      Cesium.Math.toRadians(0), 
      Cesium.Math.toRadians(-90)
    ),
  });
};
// 初始化所有图斑
const entitiesAddSpot = () => {
if (!isMapReady.value || !viewer) return;
  viewer?.entities.removeAll();
  tbJwdList = []; // 重置经纬度列表
  
  tableData.value.forEach(item => {
    // 取出当中经纬度
    const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
    if (!numbersWithCommas) return;
    // 绘制图斑
    const grouped = numbersWithCommas.map(item => Number(item));
    // 为框选存储对比值
    tbJwdList.push({
      ...item,
      grouped: grouped,
    });
    // 根据 is_exception 设置颜色
    const color =
      item.is_exception == 2 ? Cesium.Color.RED.withAlpha(0.5) : Cesium.Color.YELLOW.withAlpha(0.5);
    const outlineColor = item.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
    viewInstance.value?.removeById('polygon_dk' + item.id);

    const grouped = numbersWithCommas.map(Number);
    tbJwdList.push({ ...item, grouped }); // 存储经纬度用于后续操作

    // 绘制图斑（保留原有逻辑，仅移除定位相关代码）
    const fillColor = item.is_exception === 2 
      ? Cesium.Color.RED.withAlpha(0.5) 
      : Cesium.Color.YELLOW.withAlpha(0.5);
    const outlineColor = item.is_exception === 2 
      ? Cesium.Color.RED 
      : Cesium.Color.YELLOW;

    homeViewer.value?.entities?.add({
      id: 'polygon_dk' + item.id,
      id: `polygon_dk${item.id}`,
      customType: 'pattern_spot_polygon',
      customInfo: {
        ...item,
      },
      customInfo: item,
      polygon: {
        hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(grouped)),
        material: color,
        material: fillColor,
        outline: true,
        outlineColor: outlineColor,
        outlineWidth: 2,
@@ -312,124 +360,163 @@
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray(grouped),
        width: 2,
        material: color,
        material: outlineColor,
        clampToGround: true,
      },
      zIndex: 99,
    });

    if (tbJwdList.length > 0) {
      const positions = tbJwdList.flatMap(item => Cesium.Cartesian3.fromDegreesArray(item.grouped));
      const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
      homeViewer.value?.camera.flyToBoundingSphere(boundingSphere, {
        duration: 0,
      });
    }
    viewInstance.value?.removeLeftClickEvent('spotHighlighting');
    viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
  });

  // 仅在初始化阶段执行定位（关键：通过isInit控制）
  if (isInit.value) {
    initMapLocation();
    isInit.value = false; // 初始化完成，后续不再执行定位
  }

  // 保留图斑点击高亮事件（原有逻辑不变）
  viewInstance.value?.removeLeftClickEvent('spotHighlighting');
  viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
};

// 高亮当前选中图斑，并定位
const handleLocationPolygon = (data, Deselect) => {
  heightlightSpot(data);
const getEntityByDataId = dataId => {
  if (!homeViewer.value) return null;
  const entityId = `polygon_dk${dataId}`;
  return homeViewer.value.entities.getById(entityId);
};
const handleLocationPolygon = data => {
  if (!data) return;

  // 取消任何现有的绘制状态（与编辑取消逻辑一致）
  if (isEditing.value) {
    isEditing.value = false;
    handleUpDateDrawState(false);
    selectionIds.value = null;
    selectionList.value = [];
  }

  const targetEntity = getEntityByDataId(data.id);
  if (targetEntity) {
    updateMapSpotInfo(targetEntity);
    // 同步表格选中状态
    const clickTableID = tableData.value.findIndex(i => i.id === data.id);
    const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
    const targetRow = rows[clickTableID];

    nextTick(() => {
      const table = polygonTableEle?.value;
      if (table && targetRow) {
        table.setCurrentRow(tableData.value[clickTableID]);
        targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    });
  }
};

// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
const spotHighlighting = (click, pick, viewer) => {
function spotHighlighting(click, pick, viewer) {
  let entities = viewer?.scene
    .drillPick(click.position)
    .filter(item => item.id)
    .map(i => i.id)
    .filter(i => i._customType === 'pattern_spot_polygon');
  if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
  let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id);
  // 计算表格滚动至中间位置
  const nowEntity = entities?.[0];
  const nowData = nowEntity.customInfo;
  const clickTableID = tableData.value.findIndex(i => i.id === nowData.id);
  const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
  let targetRow = rows[clickTableID];
  const targetRow = rows[clickTableID];

  nextTick(() => {
    const table = polygonTableEle?.value;
    if (!table) return;
    if (targetRow) {
      targetRow.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
      polygonTableEle?.value.setCurrentRow(tableData.value[clickTableID]);
    }
    if (!table || !targetRow) return;
    // 表格滚动到中间位置
    targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
    // 同步表格选中状态
    table.setCurrentRow(tableData.value[clickTableID]);
  });
  // 表格也对应选中数据 TODO
  const data = pick.id?.customInfo;
  // 高亮图斑
  heightlightSpot(data);
};
// 选中列表或者点击地图内的图斑 高亮图斑
const heightlightSpot = data => {
  nowSelectObj.value = data;
  if (!data) {
    clearSelect();
    return;

  updateMapSpotInfo(nowEntity);
}
function updateMapSpotInfo(nowEntity) {
  const nowData = nowEntity.customInfo;
  if (!nowEntity) return;
  if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return;
  nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0);
  nowEntity.polyline.material = Cesium.Color.RED;
  if (lastEntity) {
    const lastData = lastEntity.customInfo;
    const originalFillColor =
      lastData.is_exception === 2
        ? Cesium.Color.RED.withAlpha(0.5)
        : Cesium.Color.YELLOW.withAlpha(0.5);
    const originalOutlineColor =
      lastData.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;
    lastEntity.polygon.material = originalFillColor;
    lastEntity.polygon.outlineColor = originalOutlineColor;
    lastEntity.polyline.material = originalOutlineColor;
  }
  lastEntity = nowEntity;
  const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g);
  if (numbersWithCommas) {

  const numbersWithCommas = data.dkfw.match(/\d+(\.\d+)?/g);
  const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
    if (index % 2 === 0) acc.push(src.slice(index, index + 2));
    return acc;
  }, []);

  const polygonCenter = getCenterPoint(groupedArr);
  if (viewInstance.value.getEntityById('polygon_center')) {
    viewInstance.value.removeById('polygon_center');
  }

  // 恢复上一个高亮图斑的原始颜色
  if (lastHighlightRow) {
    let lastentity = homeViewer.value.entities?.getById('polygon_dk' + lastHighlightRow.id);
    if (lastentity && lastentity.polygon) {
      // 根据is_exception恢复原始颜色
      const originalColor =
        lastHighlightRow.is_exception == 2
          ? Cesium.Color.RED.withAlpha(0.5)
          : Cesium.Color.YELLOW.withAlpha(0.5);
      const originalOutline =
        lastHighlightRow.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW;

      lastentity.polygon.material = originalColor;
      lastentity.polygon.outlineColor = originalOutline;
      lastentity.polygon.outlineWidth = 2;
    const positionsData = [];
    for (let i = 0; i < numbersWithCommas.length; i += 2) {
      const lon = Number(numbersWithCommas[i]);
      const lat = Number(numbersWithCommas[i + 1]);
      positionsData.push([lon, lat, 10]); 
    }
    flyVisual({
      positionsData: positionsData, 
      viewer: homeViewer.value,     
      multiple: 15,                  
                     
    });
  }

  let Nowentity = homeViewer.value.entities?.getById('polygon_dk' + data.id);
  if (Nowentity && Nowentity.polygon) {
    Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0);
    Nowentity.polygon.outlineColor = Cesium.Color.RED;
  }
  homeViewer.value.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      Number(polygonCenter.lng),
      Number(polygonCenter.lat),
      1500
    ),
    zIndex: 100,
  });
  lastHighlightRow = data;
};
}
// 清空选中的数据
const clearSelect = () => {
  lastHighlightRow = null;
  selectionList.value = [];
  viewer?.entities.removeAll();
};
// 编辑

const handleSelectionChange = row => {
  let curRowIsSelect = row;
  // 如果是同一个图斑且正在编辑，则取消编辑
  if (selectionIds.value === row.id && isEditing.value) {
    isEditing.value = false;
    handleUpDateDrawState(false);
    selectionIds.value = null;
    selectionList.value = [];
    return;
  }

  // 定位到选中的图斑
  handleLocationPolygon(row);
  
  // 仅异常图斑可编辑
  if (row.is_exception !== 2) {
    ElMessage.warning('仅异常图斑支持编辑绘制');
    return;
  }

  // 设置编辑状态
  selectionIds.value = row.id;
  selectionList.value = row;
  curRowIsSelect && handleLocationPolygon(row);
  if (row.is_exception == 2 && curRowIsSelect) {
    isDrawPolygon.value = true;
    funButtonEle.value.upDateDrawState(true);
    handleLocationPolygon(row);
  } else {
    isDrawPolygon.value = false;
  isEditing.value = true;
  handleUpDateDrawState(true);
};
const handleUpDateDrawState = show => {
  isEditing.value = show; // 同步编辑状态
  if (!show) {
    // 绘制关闭时，清空选中的编辑行
    selectionIds.value = null;
    selectionList.value = [];
  }
};
// 删除
const handleDelete = row => {
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除当前行图斑?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
@@ -438,56 +525,78 @@
    deletePatches({ ids: row.id }).then(res => {
      if (res.data.code !== 0) return ElMessage.warning('删除失败');
      ElMessage.success('删除成功');
      getTableList();
      tableData.value = tableData.value.filter(item => item.id !== row.id);
      //从地图上移除对应的图斑实体
      const entityId = `polygon_dk${row.id}`;
      viewer?.entities.removeById(entityId);
      const exceptionCountItem = infoList.value.find(item => item.name === '异常图斑数量');
      if (exceptionCountItem && row.is_exception === 2) {
        exceptionCountItem.value = Math.max(0, parseInt(exceptionCountItem.value) - 1);
      }
      const totalCountItem = infoList.value.find(item => item.name === '图斑数量');
      if (totalCountItem) {
        totalCountItem.value = Math.max(0, parseInt(totalCountItem.value) - 1);
      }

      // 清除选中状态
      if (selectionIds.value === row.id) {
        selectionIds.value = null;
        selectionList.value = [];
        isEditing.value = false;
        handleUpDateDrawState(false);
      }

    });
  });
};

// 保存
const handleSave = () => {
 const fileNameItem = infoList.value.find(item => item.name === '文件名称');
 const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
 let lotTypeId;
 // 检查value是否为数字类型（包括字符串形式的数字）
 const isValueNumber =
  !isNaN(Number(patchTypeItem.value)) &&
  patchTypeItem.value !== '' &&
  patchTypeItem.value !== null &&
  patchTypeItem.value !== undefined;
   console.log('isValueNumber',isValueNumber);
 if (isValueNumber) {
  // 转换为数字类型
  lotTypeId = Number(patchTypeItem.value);
 } else {
  // 使用原始值
  lotTypeId = patchTypeItem.originalValue;
 }
 // 构建请求参数
 const updateParams = {
  file_name: fileNameItem.value,
  lot_type_id: lotTypeId,
  type: lotTypeId,
  id: props.detailList.id,
 };
 patchEditApi(updateParams).then(res => {
  ElMessage.success(res.data.data);
  refreshonload();
  uploadPatchDialog.value = false;
 });
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
  const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
  let lotTypeId;
  // 检查value是否为数字类型（包括字符串形式的数字）
  const isValueNumber =
    !isNaN(Number(patchTypeItem.value)) &&
    patchTypeItem.value !== '' &&
    patchTypeItem.value !== null &&
    patchTypeItem.value !== undefined;
  if (isValueNumber) {
    // 转换为数字类型
    lotTypeId = Number(patchTypeItem.value);
  } else {
    // 使用原始值
    lotTypeId = patchTypeItem.originalValue;
  }
  // 构建请求参数
  const updateParams = {
    file_name: fileNameItem.value,
    lot_type_id: lotTypeId,
    type: lotTypeId,
    id: props.detailList.id,
  };
  patchEditApi(updateParams).then(res => {
    ElMessage.success(res.data.data);
    refreshonload();
    uploadPatchDialog.value = false;
  });
};
// 取消
const handleCancel = () => {
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
  const spotTypeItem = infoList.value.find(item => item.name === '图斑类型');
  
  if (fileNameItem) {
    fileNameItem.value = initialFileName.value; 
    fileNameItem.value = initialFileName.value;
  }
  if (spotTypeItem) {
    spotTypeItem.value = initialSpotTypeLabel.value; 
    spotTypeItem.originalValue = initialSpotTypeId.value; 
    spotTypeItem.value = initialSpotTypeLabel.value;
    spotTypeItem.originalValue = initialSpotTypeId.value;
  }
  clearSelect(); 
  if (isEditing.value) {
    isEditing.value = false;
    handleUpDateDrawState(false);
  }
  clearSelect();
  isDrawPolygon.value = false; // 关闭地图绘制状态
  uploadPatchDialog.value = false;
};
@@ -505,19 +614,26 @@
  publicCesiumInstance = null;
};


watch(uploadPatchDialog, newVal => {
  if (newVal) {
    isInit.value = true; 
    isMapReady.value = false; 
    setTimeout(() => {
      initMap();
      getTableList();
      initMap();      
      getspotManagementTableApi(); 
    }, 0);
  } else {
    if (funButtonEle.value) {
      isBoxSelect.value = false;
      isDrawPolygon.value = false;
    }
 
    tableData.value = []; 
    isEditing.value = false;
    handleUpDateDrawState(false);
    destroyMap();
    isInit.value = false; 
    clearSelect();
    isMapReady.value = false; 
  }
  refreshonload();
});
onMounted(() => {});
onBeforeUnmount(() => {
@@ -529,14 +645,17 @@
:global(.spotDialog .el-dialog__header span) {
  padding-left: 16px !important;
  display: inline-block;

}
:global(.spotDialog .el-dialog__header) .el-dialog__title {
  font-family: "Source Han Sans CN" !important;
  font-family: 'Source Han Sans CN' !important;
  font-weight: bold !important;
  font-size: 16px !important;
  color: #363636 !important;
}
:global(.spotDialog .el-dialog__body) {
    padding: 2rem 2rem 0 !important;
  
  }
.container {
  display: flex;
  flex-direction: column;
@@ -597,11 +716,19 @@
      line-height: 33px;
      padding-right: 10px;
      margin: 0 -10px 0 -10px;
      border-right: 1px solid #e8e8e8;
    }

    .itemContent {
      flex: 1;
      padding-left: 10px;
      .itemValue {
        padding-left: 6px;
        color: #7b7b7b;
      }
      .error-text {
        color: #ff0a0a;
      }
    }
  }
}
@@ -619,8 +746,8 @@
  z-index: 99;
  width: 277px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  // backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.8);

  border-radius: 8px 8px 8px 8px;
  padding: 6px 10px 0 10px;
  display: flex;
@@ -638,6 +765,7 @@
    font-size: 14px;
    color: #ffffff;
  }

  // 表格样式
  :deep(.el-table) {
    // 清除表格内部横线和竖线
@@ -659,6 +787,7 @@
    color: #fff !important;
    .cell {
      padding: 0px !important;
      font-size: 12px !important;
    }
    // 隔行变色
    .even-row {
@@ -687,7 +816,7 @@
    // 表格主体
    .el-table__body {
      tr:hover > td {
        background-color: var(--el-table-row-hover-bg-color) !important;
        background-color: rgba(64, 158, 255,0.3) !important;
      }

      td {
@@ -697,23 +826,31 @@

    // 选中行
    .current-row td {
      background-color: var(--el-table-current-row-bg-color) !important;
    
      background-color: rgba(64, 158, 255,0.3) !important;
    }
  }

  :deep(.el-table__body) {
    tr {
      height: 46px;
    }
    td {
      padding: 8px 0;
    }
  }
  .operationspan {
    cursor: pointer;
    color: #409eff;
  }
  .operationspan:first-child {
    margin-right: 10px;
    margin-right: 5px;
  }
  

  // 分页
  :deep(.pagination-container) {
    background: transparent !important;
  }
  :deep(.el-pagination) {
  
    .btn-prev,
    .btn-next {
      padding: 5px 6px;
@@ -739,15 +876,15 @@
    border-radius: 8px 8px 8px 8px !important;
  }
  .pagination-container {
  margin-top: auto;
     padding: 8px 5px !important;
    margin-top: auto;
    padding: 8px 5px !important;
    background: white;
    display: flex;
    justify-content: center;
    height: auto; // 取消固定高度20px，避免内容被截断
    margin: 24px 0 14px 0;
    width: 100%; 
     box-sizing: border-box
    width: 100%;
    box-sizing: border-box;
  }
}
:deep(.el-tooltip__popper) {
@@ -755,13 +892,14 @@
  max-width: 300px;
}
.el-table {
  flex: 1; 
  flex: 1;
  overflow: auto;
}
.btnGroups {
  position: absolute;
  bottom: 49px;
  left: 50%;
  transform: translate(-50%);
  img {
    width: 125px;
    height: 45px;