feat:图斑绘制调整

张含笑

2025-09-05 d6f70caec6b62b566c7953ac4212197d9fee0104

feat:图斑绘制调整

 src/views/resource/components/spotDetails.vue

@@ -65,6 +65,7 @@
              :row-class-name="tableRowClassName"
              :data="tableData"
              @row-click="handleLocationPolygon"
              @current-change="handleTableRowChange"
            >
              <el-table-column type="index" align="center" width="30" label="序号">
                <template #default="{ $index }">
@@ -82,7 +83,9 @@
              <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" @click.stop="handleSelectionChange(scope.row)">
                    {{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
@@ -103,11 +106,12 @@
          </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="" />
@@ -121,6 +125,7 @@
</template>

<script setup>
import DrawPolygon from '@/views/resource/components/DrawPolygon.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { findAreaName } from '@/utils/areaUtils';
import {
@@ -135,7 +140,6 @@
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', 'regionalData']);
const polygonTableEle = ref(null);
@@ -152,6 +156,8 @@
const initialSpotTypeId = ref('');
const initialSpotTypeLabel = ref('');
const spotManagementData = ref(null);
const isEditing = ref(false);
const drawPolygonRef = ref(null);
// 记录上一次点击高亮
let lastHighlightRow = null;
// 功能按钮区域相关：编辑图斑等
@@ -254,7 +260,11 @@
    total.value = res.data.data.total || res.data.data.length;
    tbJwdList = [];
    viewer?.entities.removeAll();
    entitiesAddSpot();
    if (!AlltableData.value) {
      viewInstance.value?.flyToContour();
    } else {
      entitiesAddSpot();
    }
  });
};
// 所有图斑数据
@@ -270,7 +280,11 @@

    tbJwdList = [];
    viewer?.entities.removeAll();
    entitiesAddSpot();
    if (AlltableData.value.length < 1) {
      viewInstance.value?.flyToContour();
    } else {
      entitiesAddSpot();
    }
  });
};
const handleSizeChange = val => {
@@ -359,7 +373,6 @@
};

// 高亮当前选中图斑，并定位

const getEntityByDataId = dataId => {
  if (!homeViewer.value) return null;
  const entityId = `polygon_dk${dataId}`;
@@ -367,6 +380,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);
@@ -384,6 +406,7 @@
    });
  }
};

// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
function spotHighlighting(click, pick, viewer) {
  let entities = viewer?.scene
@@ -465,12 +488,28 @@
  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 = [];
  }
};
// 删除
@@ -485,7 +524,7 @@
      ElMessage.success('删除成功');
      getTableList();
      getspotManagementTableApi();
      getAlltableMapListApi()
      getAlltableMapListApi();
    });
  });
};
@@ -532,6 +571,10 @@
    spotTypeItem.value = initialSpotTypeLabel.value;
    spotTypeItem.originalValue = initialSpotTypeId.value;
  }
  if (isEditing.value) {
    isEditing.value = false;
    handleUpDateDrawState(false);
  }
  clearSelect();
  isDrawPolygon.value = false; // 关闭地图绘制状态
  uploadPatchDialog.value = false;
@@ -559,10 +602,8 @@
      getspotManagementTableApi();
    }, 0);
  } else {
    if (funButtonEle.value) {
      isBoxSelect.value = false;
      isDrawPolygon.value = false;
    }
    isEditing.value = false;
    handleUpDateDrawState(false);
    destroyMap();
  }
  refreshonload();
@@ -715,6 +756,7 @@
    color: #fff !important;
    .cell {
      padding: 0px !important;
      font-size: 12px !important;
    }
    // 隔行变色
    .even-row {
@@ -766,9 +808,10 @@
  }
  .operationspan {
    cursor: pointer;
    color: #409eff;
  }
  .operationspan:first-child {
    margin-right: 10px;
    margin-right: 5px;
  }

  // 分页