feat:11

张含笑

2025-09-04 8b598e50a0ed9c3c5b35a612e311dc423050aabd

feat:11

 src/views/resource/components/spotDetails.vue

@@ -3,7 +3,7 @@
    class="spotDialog"
    :title="props.title"
    v-model="uploadPatchDialog"
    width="75%"
    width="78%"
    align-center
  >
    <div class="container">
@@ -160,7 +160,7 @@
const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;

let lastEntity = null
// 表格隔行变色
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
@@ -278,7 +278,7 @@
};
// 初始化所有图斑
const entitiesAddSpot = () => {
 viewer?.entities.removeAll();  //清除旧实体
 viewer?.entities.removeAll();  
  tableData.value.forEach(item => {
    // 取出当中经纬度
    const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
@@ -290,11 +290,12 @@
      ...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;
    viewInstance.value?.removeById('polygon_dk' + item.id);
  
    homeViewer.value?.entities?.add({
      id: 'polygon_dk' + item.id,
      customType: 'pattern_spot_polygon',
@@ -337,88 +338,56 @@
};

// 高亮当前选中图斑，并定位
const handleLocationPolygon = (data, Deselect) => {
  heightlightSpot(data);
const handleLocationPolygon = (data) => {
  updateMapSpotInfo(data);
};

// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
const spotHighlighting = (click, pick, viewer) => {
  if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
  let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id);
  // 计算表格滚动至中间位置
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')
    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;
  }

  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;
  }, []);
    updateMapSpotInfo(nowEntity)
}

  const polygonCenter = getCenterPoint(groupedArr);
  if (viewInstance.value.getEntityById('polygon_center')) {
    viewInstance.value.removeById('polygon_center');
  }
// 更新上一个和这一个信息
function updateMapSpotInfo(nowEntity) {
    if (!nowEntity) return
    if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return

  // 恢复上一个高亮图斑的原始颜色
  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;
    }
  }

  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;
};
    // 设置新的
    nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0)
    nowEntity.polyline.material = Cesium.Color.RED
    // 重置上一个
    if (lastEntity) {
        lastEntity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5)
        lastEntity.polyline.material = Cesium.Color.YELLOW
    }
    lastEntity = nowEntity
    // flyMapSpot(nowEntity?.customInfo)
}
// 清空选中的数据
const clearSelect = () => {
  lastHighlightRow = null;
  selectionList.value = [];
viewer?.entities.removeAll();
};
// 编辑
const handleSelectionChange = row => {
@@ -460,7 +429,6 @@
  patchTypeItem.value !== '' &&
  patchTypeItem.value !== null &&
  patchTypeItem.value !== undefined;
   console.log('isValueNumber',isValueNumber);
 if (isValueNumber) {
  // 转换为数字类型
  lotTypeId = Number(patchTypeItem.value);
@@ -485,7 +453,6 @@
const handleCancel = () => {
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
  const spotTypeItem = infoList.value.find(item => item.name === '图斑类型');
  
  if (fileNameItem) {
    fileNameItem.value = initialFileName.value; 
  }
@@ -703,7 +670,7 @@
    // 表格主体
    .el-table__body {
      tr:hover > td {
        background-color: var(--el-table-row-hover-bg-color) !important;
        background-color: rgba(0, 0, 0, 0.6) !important;
      }

      td {
@@ -713,7 +680,7 @@

    // 选中行
    .current-row td {
      background-color: var(--el-table-current-row-bg-color) !important;
      background-color: rgba(0, 0, 0, 0.6) !important;
    }
  }
:deep(.el-table__body) {
@@ -785,6 +752,7 @@
  position: absolute;
  bottom: 49px;
  left: 50%;
  transform: translate(-50%);
  img {
    width: 125px;
    height: 45px;