feat:编辑不刷新

张含笑

2025-09-20 f2f661253c3b04fc3361238b3006069b64d8be0b

feat:编辑不刷新

 src/views/resource/components/DrawPolygon.vue

@@ -214,7 +214,7 @@
  viewInstance.value.removeMouseHandler('drawCustomPolygon');
}

const emit = defineEmits(['upDateDrawState']);
const emit = defineEmits(['upDateDrawState',]);

function updatePolygon() {
  let polygon = savePolygonPosition.reduce((pre, cur) => {
@@ -222,7 +222,7 @@
    return pre;
  }, []);
  polygon.push(polygon[0]);
  console.log('绘制', `POLYGON((${polygon.join(',')}))`);

  // 接口
  sdfwUpdate({
      ids: selectionIds.value,
@@ -244,6 +244,7 @@
      })
}


function cancel() {
  remove();
  removeMenuPanel();

 src/views/resource/components/spotDetails.vue

@@ -65,7 +65,7 @@
              :row-class-name="tableRowClassName"
              :data="tableData"
              @row-click="handleLocationPolygon"
              @current-change="handleTableRowChange"
              
            >
              <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
                <template #default="{ $index }">
@@ -102,6 +102,7 @@
          ref="drawPolygonRef"
          v-if="isEditing"
          @upDateDrawState="handleUpDateDrawState"
        
        />
        <!-- 完成/取消 -->
        <div class="btnGroups" v-if="props.title === '图斑编辑'">
@@ -239,6 +240,7 @@
  page: 1,
  pageSize: 10,
});
const isInit = ref(true);
// 图斑管理表格
const getTableList = () => {
  const requestParams = {
@@ -262,6 +264,7 @@
};



// 地图
const initMap = () => {
  if (!document.getElementById('spotMap')) {
@@ -280,35 +283,52 @@
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewInstance.value.switchContour(true);
};
// 仅弹框初始化时执行的定位逻辑
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 = () => {
  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,
    });
    viewInstance.value.removeById('polygon_dk' + item.id);
    // 根据 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;

    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,
@@ -318,23 +338,22 @@
      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,
        offset: new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-90)),
      });
    }
    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');
};

// 高亮当前选中图斑，并定位
@@ -397,51 +416,6 @@

  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 groupedArr = numbersWithCommas.reduce((acc, val, index, src) => {
//       if (index % 2 === 0) acc.push(src.slice(index, index + 2));
//       return acc;
//     }, []);

//     const polygonCenter = getCenterPoint(groupedArr);
//     // 相机定位
//     homeViewer.value.scene.camera.setView({
//       destination: Cesium.Cartesian3.fromDegrees(
//         Number(polygonCenter.lng),
//         Number(polygonCenter.lat),
//         1500
//       ),
 
//     });
//   }

// }
function updateMapSpotInfo(nowEntity) {
  const nowData = nowEntity.customInfo;
  if (!nowEntity) return;
@@ -474,7 +448,7 @@
      positionsData: positionsData, 
      viewer: homeViewer.value,     
      multiple: 15,                  
      // pitch: -90                    
                     
    });
  }
}
@@ -494,12 +468,13 @@
  if (isEditing.value) {
    //当前已编辑 → 取消编辑（关闭绘制、重置状态）
    isEditing.value = false;
    handleUpDateDrawState(false); // 通知DrawPolygon取消绘制
    handleUpDateDrawState(false); //取消绘制
  } else {
    // 当前未编辑 → 开启编辑（仅异常图斑可编辑）
    if (row.is_exception === 2 && curRowIsSelect) {
      isEditing.value = true;
      handleUpDateDrawState(true); // 通知DrawPolygon开启绘制
      handleUpDateDrawState(true); //开启绘制
    
    } else {
      ElMessage.warning('仅异常图斑支持编辑绘制');
      isEditing.value = false;
@@ -548,6 +523,7 @@
    });
  });
};

// 保存
const handleSave = () => {
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
@@ -612,18 +588,23 @@
  publicCesiumInstance = null;
};


watch(uploadPatchDialog, newVal => {
  if (newVal) {
    setTimeout(() => {
      initMap();
      getTableList();

    isInit.value = true; 
    setTimeout(() => {
      initMap();      
      getTableList();  
      getspotManagementTableApi();
    }, 0);
  } else {

    isEditing.value = false;
    handleUpDateDrawState(false);
    destroyMap();
    isInit.value = false; 
    clearSelect();
  }
  refreshonload();
});