无人机管理后台前端(已迁走)
张含笑
2025-09-04 d1d6d6fa0abb3dbc29c3737a7ff9933247939628
feat:更换方法
1 files modified
112 ■■■■ changed files
src/views/resource/components/spotDetails.vue 112 ●●●● patch | view | raw | blame | history
src/views/resource/components/spotDetails.vue
@@ -43,7 +43,9 @@
                  </template>
                </template>
                <template v-else >
                  <div class="itemValue"  :class="{ 'error-text': item.name === '异常图斑数量' }">{{ item.value }}</div>
                  <div class="itemValue" :class="{ 'error-text': item.name === '异常图斑数量' }">
                    {{ item.value }}
                  </div>
                </template>
              </div>
            </div>
@@ -160,7 +162,7 @@
const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;
let lastEntity = null
let lastEntity = null;
// 表格隔行变色
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
@@ -203,7 +205,6 @@
  return option ? option.label : '';
};
const updateInfoList = detailData => {
  if (detailData && (initialFileName.value === '' || initialSpotTypeId.value === '')) {
    initialFileName.value = detailData.file_name || ''; 
    initialSpotTypeId.value = detailData.lot_type_id || '';
@@ -217,9 +218,17 @@
    if (item.name === '图斑类型') {
      if (detailData.patches_type_desc !== undefined) {
        return { ...item, value: detailData.patches_type_desc, originalValue: detailData.lot_type_id };
        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: getPatchTypeLabel(detailData.lot_type_id),
          originalValue: detailData.lot_type_id,
        };
      }
    }
@@ -290,7 +299,7 @@
      ...item,
      grouped: grouped,
    });
    viewInstance.value.removeById('polygon_dk' + item.id)
    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);
@@ -327,8 +336,7 @@
        duration: 0,
         offset: new Cesium.HeadingPitchRange(
                  Cesium.Math.toRadians(-45), 
                  Cesium.Math.toRadians(-90),
          Cesium.Math.toRadians(-90)
                ),
      });
    }
@@ -338,18 +346,42 @@
};
// 高亮当前选中图斑,并定位
const handleLocationPolygon = (data) => {
  updateMapSpotInfo(data);
// const handleLocationPolygon = data => {
//   updateMapSpotInfo(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;
  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:可以获取当前图斑数据
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]
    .filter(i => i._customType === 'pattern_spot_polygon');
    if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
  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');
@@ -364,23 +396,51 @@
    table.setCurrentRow(tableData.value[clickTableID]);
  });
    updateMapSpotInfo(nowEntity)
  updateMapSpotInfo(nowEntity);
}
// 更新上一个和这一个信息
function updateMapSpotInfo(nowEntity) {
    if (!nowEntity) return
    if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return
  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
  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
    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
  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
      ),
      zIndex: 100,
    });
  }
    // flyMapSpot(nowEntity?.customInfo)
}
// 清空选中的数据
@@ -503,10 +563,9 @@
: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;
@@ -579,10 +638,10 @@
      padding-left: 10px;
      .itemValue {
      padding-left: 6px;
      color: #7B7B7B;
        color: #7b7b7b;
      }
      .error-text{
      color: #FF0A0A;
        color: #ff0a0a;
      }
    }
  }
@@ -703,7 +762,6 @@
    background: transparent !important;
  }
  :deep(.el-pagination) {
    .btn-prev,
    .btn-next {
      padding: 5px 6px;
@@ -737,7 +795,7 @@
    height: auto; // 取消固定高度20px,避免内容被截断
    margin: 24px 0 14px 0;
    width: 100%; 
     box-sizing: border-box
    box-sizing: border-box;
  }
}
:deep(.el-tooltip__popper) {