| | |
| | | v-model="item.value" |
| | | placeholder="请选择图斑类型" |
| | | style="width: 102%" |
| | | :disabled="item.value ==='综合类'" |
| | | > |
| | | <el-option |
| | | v-for="opt in spotTypeOptions" |
| | |
| | | <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" |
| | |
| | | </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> |
| | |
| | | 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); |
| | |
| | | const homeViewer = shallowRef(null); |
| | | let tbJwdList = []; |
| | | const loading = ref(false); |
| | | const tableLoading = ref(true); |
| | | const tableData = ref([]); |
| | | const AlltableData = ref([]); |
| | | let total = ref(0); |
| | |
| | | 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 => ({ |
| | |
| | | } else { |
| | | entitiesAddSpot(); |
| | | } |
| | | }).finally(() => { |
| | | tableLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | |
| | | |
| | | // 地图 |
| | | const initMap = () => { |
| | | if (!document.getElementById('spotMap')) { |
| | | return; |
| | | } |
| | | if (!document.getElementById('spotMap') || isMapReady.value) return; |
| | | |
| | | publicCesiumInstance = new PublicCesium({ |
| | | dom: 'spotMap', |
| | | flatMode: false, |
| | |
| | | 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; |
| | |
| | | }; |
| | | // 初始化所有图斑 |
| | | const entitiesAddSpot = () => { |
| | | if (!isMapReady.value || !viewer) return; |
| | | viewer?.entities.removeAll(); |
| | | tbJwdList = []; // 重置经纬度列表 |
| | | |
| | |
| | | |
| | | 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(); |
| | | }); |
| | |
| | | font-size: 16px !important; |
| | | color: #363636 !important; |
| | | } |
| | | :global(.spotDialog .el-dialog__body) { |
| | | padding: 2rem 2rem 0 !important; |
| | | |
| | | } |
| | | .container { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | 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; |
| | |
| | | z-index: 9999 !important; |
| | | max-width: 300px; |
| | | } |
| | | .tabBoxLoading { |
| | | height: 100%; |
| | | |
| | | } |
| | | |
| | | .el-table { |
| | | flex: 1; |
| | | overflow: auto; |
| | | height: 98%; |
| | | overflow: auto; |
| | | |
| | | } |
| | | .btnGroups { |
| | | position: absolute; |
| | |
| | | height: 100%; |
| | | width: 100%; |
| | | } |
| | | .el-button { |
| | | padding: 0; |
| | | color: #fff; |
| | | width: 17px; |
| | | } |
| | | </style> |