feat:设置间距

chenyao

2025-09-04 1a8a9ff4fd90e28bf33bca809c5ea0372db3dd48

 src/views/resource/components/spotDetails.vue

@@ -28,7 +28,7 @@
                    <el-select
                      v-model="item.value"
                      placeholder="请选择图斑类型"
                      style="width: 100%"
                      style="width: 102%"
                    >
                      <el-option
                        v-for="opt in spotTypeOptions"
@@ -39,11 +39,11 @@
                    </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>
                <template v-else >
                  <div class="itemValue"  :class="{ 'error-text': item.name === '异常图斑数量' }">{{ item.value }}</div>
                </template>
              </div>
            </div>
@@ -59,9 +59,9 @@
            <div class="tabname">图斑列表</div>
            <el-table
              ref="polygonTableEle"
              highlight-current-row
              highlight-current-row 
              :row-class-name="tableRowClassName"
              :data="tableData"
              :data="tableData"  
              @row-click="handleLocationPolygon"
            >
              <el-table-column type="index" align="center" width="30" label="序号">
@@ -89,7 +89,8 @@
                :current-page="params.page"
                :page-size="params.pageSize"
                background
                layout="prev, pager, next"
                layout="prev, pager, next, ..."
                :pager-count="3"
                prev-text="上一页"
                next-text="下一页"
                :total="total"
@@ -143,6 +144,9 @@
let tbJwdList = [];
let total = ref(0);
const refreshonload = inject('searchReset');
const initialFileName = ref(''); 
const initialSpotTypeId = ref(''); 
const initialSpotTypeLabel = ref('');
// 当前选中的图斑面数据
let nowSelectObj = ref({});
// 记录上一次点击高亮
@@ -156,6 +160,7 @@
const selectionList = ref([]);
// 当前在编辑状态的异常图斑
let curCustomPolygon = null;

// 表格隔行变色
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row';
@@ -198,38 +203,32 @@
  return option ? option.label : '';
};
const updateInfoList = detailData => {
  
  if (detailData && (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); 
  }

  infoList.value = infoList.value.map(item => {
    let value = detailData[item.field] !== undefined ? detailData[item.field] : item.value;
    // 处理图斑类型字段

    if (item.name === '图斑类型') {
      // 如果有 patches_type_desc，显示它（但存储的是 lot_type_id）
      if (detailData.patches_type_desc !== undefined) {
        return {
          ...item,
          value: detailData.patches_type_desc,
          // 保留原始 lot_type_id 用于提交
          originalValue: detailData.lot_type_id,
        };
      }
      // 否则根据 lot_type_id 查找对应的 label
      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, 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: value,
    };
    return { ...item, value: value };
  });
};
const params = ref({
  page: 1,
  pageSize: 20,
  pageSize: 10,
});
// 图斑管理表格
const getTableList = () => {
@@ -279,6 +278,7 @@
};
// 初始化所有图斑
const entitiesAddSpot = () => {
 viewer?.entities.removeAll();  //清除旧实体
  tableData.value.forEach(item => {
    // 取出当中经纬度
    const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
@@ -324,6 +324,11 @@
      const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
      homeViewer.value?.camera.flyToBoundingSphere(boundingSphere, {
        duration: 0,
         offset: new Cesium.HeadingPitchRange(
                  Cesium.Math.toRadians(-45), 
                  Cesium.Math.toRadians(-90),
                 
                ),
      });
    }
    viewInstance.value?.removeLeftClickEvent('spotHighlighting');
@@ -444,24 +449,54 @@
  });
};

// 完成
// 保存
const handleSave = () => {
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
  const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
  const updateParams = {
    file_name: fileNameItem?.value || '',
    lot_type_id: patchTypeItem?.value || '',
    type: patchTypeItem?.value || '',
    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;
   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 handleCancel = () => {};
const handleCancel = () => {
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
  const spotTypeItem = infoList.value.find(item => item.name === '图斑类型');
  
  if (fileNameItem) {
    fileNameItem.value = initialFileName.value; 
  }
  if (spotTypeItem) {
    spotTypeItem.value = initialSpotTypeLabel.value; 
    spotTypeItem.originalValue = initialSpotTypeId.value; 
  }
  clearSelect(); 
  isDrawPolygon.value = false; // 关闭地图绘制状态
  uploadPatchDialog.value = false;
};
provide('selectionIds', selectionIds);
provide('homeViewer', homeViewer);
provide('viewInstance', viewInstance);
@@ -489,6 +524,7 @@
    }
    destroyMap();
  }
  refreshonload();
});
onMounted(() => {});
onBeforeUnmount(() => {
@@ -568,11 +604,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;
      }
    }
  }
}
@@ -587,11 +631,11 @@
  top: 0;
  left: 0;
  height: 99%;
  z-index: 999;
  z-index: 99;
  width: 277px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.6);
  // backdrop-filter: blur(5px);
  border-radius: 8px 8px 8px 8px;
  padding: 6px 10px 0 10px;
  display: flex;
@@ -609,6 +653,7 @@
    font-size: 14px;
    color: #ffffff;
  }
  
  // 表格样式
  :deep(.el-table) {
    // 清除表格内部横线和竖线
@@ -671,25 +716,34 @@
      background-color: var(--el-table-current-row-bg-color) !important;
    }
  }

:deep(.el-table__body) {
  tr {
    height: 46px;  
  }
  td {
    padding: 8px 0;  
  }
}
  .operationspan {
    cursor: pointer;
  }
  .operationspan:first-child {
    margin-right: 10px;
  }
  
  // 分页
  :deep(.pagination-container) {
    background: transparent !important;
  }
  :deep(.el-pagination) {
  
    .btn-prev,
    .btn-next {
      padding: 5px 13px;
      padding: 5px 6px;
    }
  }
  :deep(.el-pager li) {
    margin: 0 0.4rem;
    margin: 0 0.1rem;
    background: rgba(34, 34, 34, 0.9) !important;
    box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px 8px 8px 8px !important;
@@ -708,18 +762,23 @@
    border-radius: 8px 8px 8px 8px !important;
  }
  .pagination-container {
    margin-top: auto;
    padding: 10px 0;
  margin-top: auto;
     padding: 8px 5px !important;
    background: white;
    display: flex;
    justify-content: center;
    height: 20px;
    height: auto; // 取消固定高度20px，避免内容被截断
    margin: 24px 0 14px 0;
    width: 100%; 
     box-sizing: border-box
  }
}

:deep(.el-tooltip__popper) {
  z-index: 9999 !important;
  max-width: 300px;
}
.el-table {
  flex: 1; /* 让表格占据剩余空间 */
  flex: 1; 
  overflow: auto;
}
.btnGroups {