无人机管理后台前端(已迁走)
张含笑
2025-12-09 5808f76456ca0d40de5074f132b73a5a488e3e13
src/views/resource/components/spotDetails.vue
@@ -30,6 +30,7 @@
                      v-model="item.value"
                      placeholder="请选择图斑类型"
                      style="width: 102%"
                      :disabled="item.value ==='综合类'"
                    >
                      <el-option
                        v-for="opt in spotTypeOptions"
@@ -60,7 +61,14 @@
        <div class="table-overlay">
          <div class="table-content">
            <div class="tabname">图斑列表</div>
            <el-table
       <div class="tabBoxLoading"
        v-loading="tableLoading"
            element-loading-text="加载中..."
            element-loading-background="rgba(0, 0, 0, 0.1)"
            >
             <el-table
             v-if="tableData.length > 0"
              ref="polygonTableEle"
              highlight-current-row
              :row-class-name="tableRowClassName"
@@ -81,17 +89,34 @@
              </el-table-column>
              <el-table-column label="操作"  align="center" v-if="props.title === '图斑编辑'">
                <template #default="scope">
                  <span class="operationspan" @click="handleDelete(scope.row)">删除</span>
                  <span
                  <!-- <span class="operationspan" @click="handleDelete(scope.row)">删除</span> -->
            <el-button icon="el-icon-delete" link @click="handleDelete(scope.row)"></el-button>
                  <!-- <span
                    class="operationspan"
                    v-if="scope.row.is_exception == 2"
                    @click.stop="handleSelectionChange(scope.row)"
                  >
                    {{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }}
                  </span>
                  </span> -->
               <template v-if="scope.row.is_exception == 2">
                    <el-button
                      v-if="!isEditing || selectionIds !== scope.row.id"
                      icon="el-icon-edit"
                      link
                      @click.stop="handleSelectionChange(scope.row)"
                    />
                    <el-button
                      v-else
                      icon="el-icon-circle-close"
                      link
                      @click.stop="handleSelectionChange(scope.row)"
                    />
                  </template>
                </template>
              </el-table-column>
            </el-table>
       </div>
           
          </div>
        </div>
@@ -133,6 +158,8 @@
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
// 标记地图是否初始化完成
const isMapReady = ref(false);
const uploadPatchDialog = defineModel('show');
const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption', 'regionalData']);
const polygonTableEle = ref(null);
@@ -142,6 +169,7 @@
const homeViewer = shallowRef(null);
let tbJwdList = [];
const loading = ref(false);
const tableLoading = ref(true);
const tableData = ref([]);
const AlltableData = ref([]);
let total = ref(0);
@@ -242,9 +270,9 @@
const isInit = ref(true);
// 图斑管理表格
const getTableList = () => {
  tableLoading.value = true;
  const requestParams = {
    patchesInfoId: props.detailid,
  };
  AlltableMapListApi(requestParams).then(res => {
    tableData.value = res.data.data?.map(item => ({
@@ -259,6 +287,8 @@
    } else {
      entitiesAddSpot();
    }
  }).finally(() => {
    tableLoading.value = false;
  });
};
@@ -266,9 +296,8 @@
// 地图
const initMap = () => {
  if (!document.getElementById('spotMap')) {
    return;
  }
  if (!document.getElementById('spotMap') || isMapReady.value) return;
  publicCesiumInstance = new PublicCesium({
    dom: 'spotMap',
    flatMode: false,
@@ -276,12 +305,33 @@
    layerMode: 4,
    contour: false,
  });
  homeViewer.value = publicCesiumInstance.getViewer();
  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;
  viewInstance.value = publicCesiumInstance;
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewInstance.value.switchContour(true);
  // 确保 readyPromise 存在
  if (viewer.readyPromise) {
    viewer.readyPromise.then(() => {
      isMapReady.value = true;
      getTableList();
    }).catch((error) => {
      console.error('地图加载失败:', error);
      ElMessage.error('地图加载失败,请刷新重试');
    });
  } else {
    // 如果没有 readyPromise
    setTimeout(() => {
      isMapReady.value = true;
      getTableList();
    }, 1000);
  }
};
// 仅弹框初始化时执行的定位逻辑
const initMapLocation = () => {
  if (tbJwdList.length === 0 || !homeViewer.value) return;
@@ -303,6 +353,7 @@
};
// 初始化所有图斑
const entitiesAddSpot = () => {
if (!isMapReady.value || !viewer) return;
  viewer?.entities.removeAll();
  tbJwdList = []; // 重置经纬度列表
  
@@ -594,20 +645,21 @@
watch(uploadPatchDialog, newVal => {
  if (newVal) {
    isInit.value = true; 
    isMapReady.value = false;
    setTimeout(() => {
      initMap();      
      getTableList();
      getspotManagementTableApi();
      getspotManagementTableApi();
    }, 0);
  } else {
 tableData.value = [];
 tableLoading.value = false;
    tableData.value = [];
    isEditing.value = false;
    handleUpDateDrawState(false);
    destroyMap();
    isInit.value = false; 
    clearSelect();
    isMapReady.value = false;
  }
  refreshonload();
});
@@ -628,6 +680,10 @@
  font-size: 16px !important;
  color: #363636 !important;
}
:global(.spotDialog .el-dialog__body) {
    padding: 2rem 2rem 0 !important;
  }
.container {
  display: flex;
  flex-direction: column;
@@ -718,8 +774,8 @@
  z-index: 99;
  width: 277px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
  // backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px 8px 8px 8px;
  padding: 6px 10px 0 10px;
  display: flex;
@@ -863,9 +919,15 @@
  z-index: 9999 !important;
  max-width: 300px;
}
.tabBoxLoading {
height: 100%;
}
.el-table {
  flex: 1;
  overflow: auto;
height: 98%;
overflow: auto;
}
.btnGroups {
  position: absolute;
@@ -885,4 +947,9 @@
  height: 100%;
  width: 100%;
}
.el-button {
 padding: 0;
      color: #fff;
      width: 17px;
}
</style>