Merge branch 'prod' into feature/v5.0/5.0.5

罗广辉

2025-09-06 c2e29fdee2d0e664961a84e95adf3882efbaf67a

 src/views/resource/components/spotDetails.vue

@@ -65,24 +65,31 @@
              :row-class-name="tableRowClassName"
              :data="tableData"
              @row-click="handleLocationPolygon"
              @current-change="handleTableRowChange"
            >
              <el-table-column type="index" align="center" width="30" label="序号">
              <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
                <template #default="{ $index }">
                  {{
                    ($index + 1 + (params.page - 1) * params.pageSize).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>
@@ -103,54 +110,60 @@
          </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 { 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 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 initialSpotTypeLabel = ref('');
// 当前选中的图斑面数据
let nowSelectObj = ref({});
const spotManagementData = ref(null);
const isEditing = ref(false);
const drawPolygonRef = ref(null);
// 记录上一次点击高亮
let lastHighlightRow = null;
// 功能按钮区域相关：编辑图斑等
@@ -191,48 +204,47 @@
  { 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 === '')) {
  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({
@@ -254,10 +266,35 @@
    total.value = res.data.data.total || res.data.data.length;
    tbJwdList = [];
    viewer?.entities.removeAll();
    entitiesAddSpot();
    if (!AlltableData.value) {
      viewInstance.value?.flyToContour();
    } else {
      entitiesAddSpot();
    }
  });
};
// 所有图斑数据
const getAlltableMapListApi = () => {
  loading.value = true;
  const requestParams = {
    patchesInfoId: props.detailid,
  };
  AlltableMapListApi(requestParams).then(res => {
    AlltableData.value = res.data.data?.map(item => ({
      ...item,
      dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
    }));

    tbJwdList = [];
    viewer?.entities.removeAll();
    if (AlltableData.value.length < 1) {
      viewInstance.value?.flyToContour();
    } else {
      entitiesAddSpot();
    }
    loading.value = false;
  });
};
const handleSizeChange = val => {
  params.value.pageSize = val;
  params.value.page = 1;
@@ -267,7 +304,7 @@
  params.value.page = val;
  getTableList();
};
const tableData = ref([]);

// 地图
const initMap = () => {
  if (!document.getElementById('spotMap')) {
@@ -284,11 +321,12 @@
  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewInstance.value.switchContour(true);
};
// 初始化所有图斑
const entitiesAddSpot = () => {
  viewer?.entities.removeAll();
  tableData.value.forEach(item => {
  AlltableData.value.forEach(item => {
    // 取出当中经纬度
    const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g);
    if (!numbersWithCommas) return;
@@ -334,10 +372,7 @@
      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)
        ),
        offset: new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-90)),
      });
    }
    viewInstance.value?.removeLeftClickEvent('spotHighlighting');
@@ -346,9 +381,6 @@
};

// 高亮当前选中图斑，并定位
// const handleLocationPolygon = data => {
//   updateMapSpotInfo(data);
// };
const getEntityByDataId = dataId => {
  if (!homeViewer.value) return null;
  const entityId = `polygon_dk${dataId}`;
@@ -356,6 +388,15 @@
};
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);
@@ -373,6 +414,7 @@
    });
  }
};

// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
function spotHighlighting(click, pick, viewer) {
  let entities = viewer?.scene
@@ -380,7 +422,7 @@
    .filter(item => item.id)
    .map(i => i.id)
    .filter(i => i._customType === 'pattern_spot_polygon');
    if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
  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);
@@ -412,15 +454,14 @@
    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; 
        ? 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.polygon.material = originalFillColor;
    lastEntity.polygon.outlineColor = originalOutlineColor;
    lastEntity.polyline.material = originalOutlineColor;
  }
  lastEntity = nowEntity;
  const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g);
@@ -430,7 +471,7 @@
      if (index % 2 === 0) acc.push(src.slice(index, index + 2));
      return acc;
    }, []);
    const polygonCenter = getCenterPoint(groupedArr); 
    const polygonCenter = getCenterPoint(groupedArr);
    // 相机定位
    homeViewer.value.scene.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(
@@ -452,15 +493,31 @@
// 编辑
const handleSelectionChange = row => {
  let curRowIsSelect = row;
  curRowIsSelect && handleLocationPolygon(row);
  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);

  if (isEditing.value) {
    //当前已编辑 → 取消编辑（关闭绘制、重置状态）
    isEditing.value = false;
    handleUpDateDrawState(false); // 通知DrawPolygon取消绘制
  } else {
    isDrawPolygon.value = false;
    // 当前未编辑 → 开启编辑（仅异常图斑可编辑）
    if (row.is_exception === 2 && curRowIsSelect) {
      isEditing.value = true;
      handleUpDateDrawState(true); // 通知DrawPolygon开启绘制
    } else {
      ElMessage.warning('仅异常图斑支持编辑绘制');
      isEditing.value = false;
    }
  }
};
const handleUpDateDrawState = show => {
  isEditing.value = show; // 同步编辑状态
  if (!show) {
    // 绘制关闭时，清空选中的编辑行
    selectionIds.value = null;
    selectionList.value = [];
  }
};
// 删除
@@ -474,6 +531,8 @@
      if (res.data.code !== 0) return ElMessage.warning('删除失败');
      ElMessage.success('删除成功');
      getTableList();
      getspotManagementTableApi();
      getAlltableMapListApi();
    });
  });
};
@@ -520,6 +579,10 @@
    spotTypeItem.value = initialSpotTypeLabel.value;
    spotTypeItem.originalValue = initialSpotTypeId.value;
  }
  if (isEditing.value) {
    isEditing.value = false;
    handleUpDateDrawState(false);
  }
  clearSelect();
  isDrawPolygon.value = false; // 关闭地图绘制状态
  uploadPatchDialog.value = false;
@@ -543,12 +606,12 @@
    setTimeout(() => {
      initMap();
      getTableList();
      getAlltableMapListApi();
      getspotManagementTableApi();
    }, 0);
  } else {
    if (funButtonEle.value) {
      isBoxSelect.value = false;
      isDrawPolygon.value = false;
    }
    isEditing.value = false;
    handleUpDateDrawState(false);
    destroyMap();
  }
  refreshonload();
@@ -701,6 +764,7 @@
    color: #fff !important;
    .cell {
      padding: 0px !important;
      font-size: 12px !important;
    }
    // 隔行变色
    .even-row {
@@ -752,9 +816,10 @@
  }
  .operationspan {
    cursor: pointer;
    color: #409eff;
  }
  .operationspan:first-child {
    margin-right: 10px;
    margin-right: 5px;
  }

  // 分页