| | |
| | | <div class="table-overlay"> |
| | | <div class="table-content"> |
| | | <div class="tabname">图斑列表</div> |
| | | <div class="tabBoxLoading" |
| | | <div class="tabBoxLoading" |
| | | v-loading="tableLoading" |
| | | element-loading-text="加载中..." |
| | | 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" |
| | | :data="tableData" |
| | | @row-click="handleLocationPolygon" |
| | | |
| | | |
| | | > |
| | | <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号"> |
| | | <template #default="{ $index }"> |
| | | {{ ($index + 1).toString().padStart(2, '0') }} |
| | | {{ ($index + 1).toString().padStart(2, '0') }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="dkbh" align="center" label="图斑名称" show-overflow-tooltip /> |
| | |
| | | {{ isEditing && selectionIds === scope.row.id ? '取消编辑' : '编辑' }} |
| | | </span> --> |
| | | <template v-if="scope.row.is_exception == 2"> |
| | | <el-button |
| | | <el-button |
| | | v-if="!isEditing || selectionIds !== scope.row.id" |
| | | icon="el-icon-edit" |
| | | link |
| | | icon="el-icon-edit" |
| | | link |
| | | @click.stop="handleSelectionChange(scope.row)" |
| | | /> |
| | | <el-button |
| | | <el-button |
| | | v-else |
| | | icon="el-icon-circle-close" |
| | | link |
| | | icon="el-icon-circle-close" |
| | | link |
| | | @click.stop="handleSelectionChange(scope.row)" |
| | | |
| | | |
| | | /> |
| | | </template> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | <!--绘制按钮--> |
| | |
| | | ref="drawPolygonRef" |
| | | v-if="isEditing" |
| | | @upDateDrawState="handleUpDateDrawState" |
| | | |
| | | |
| | | /> |
| | | <!-- 完成/取消 --> |
| | | <div class="btnGroups" v-if="props.title === '图斑编辑'"> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { flyVisual } from '@/utils/cesium/mapUtil' |
| | | import { flyVisual } from '@ztzf/utils' |
| | | import { pxToRem, pxToRemNum } from '@/utils/rem' |
| | | import DrawPolygon from '@/views/resource/components/DrawPolygon.vue'; |
| | | import { ElMessage, ElMessageBox } from 'element-plus'; |
| | |
| | | const isInit = ref(true); |
| | | // 图斑管理表格 |
| | | const getTableList = () => { |
| | | tableLoading.value = true; |
| | | tableLoading.value = true; |
| | | const requestParams = { |
| | | patchesInfoId: props.detailid, |
| | | }; |
| | |
| | | // 地图 |
| | | const initMap = () => { |
| | | 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; |
| | | isMapReady.value = true; |
| | | getTableList(); |
| | | }).catch((error) => { |
| | | console.error('地图加载失败:', error); |
| | |
| | | // 仅弹框初始化时执行的定位逻辑 |
| | | const initMapLocation = () => { |
| | | if (tbJwdList.length === 0 || !homeViewer.value) return; |
| | | |
| | | |
| | | // 计算所有图斑的包围球(用于初始化定位) |
| | | const allPositions = tbJwdList.flatMap(item => |
| | | const allPositions = tbJwdList.flatMap(item => |
| | | Cesium.Cartesian3.fromDegreesArray(item.grouped) |
| | | ); |
| | | const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions); |
| | | |
| | | |
| | | // 初始化定位(仅执行一次) |
| | | homeViewer.value.camera.flyToBoundingSphere(boundingSphere, { |
| | | duration: 0, |
| | | offset: new Cesium.HeadingPitchRange( |
| | | Cesium.Math.toRadians(0), |
| | | Cesium.Math.toRadians(0), |
| | | Cesium.Math.toRadians(-90) |
| | | ), |
| | | }); |
| | |
| | | if (!isMapReady.value || !viewer) return; |
| | | viewer?.entities.removeAll(); |
| | | tbJwdList = []; // 重置经纬度列表 |
| | | |
| | | |
| | | tableData.value.forEach(item => { |
| | | const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g); |
| | | if (!numbersWithCommas) return; |
| | |
| | | tbJwdList.push({ ...item, grouped }); // 存储经纬度用于后续操作 |
| | | |
| | | // 绘制图斑(保留原有逻辑,仅移除定位相关代码) |
| | | const fillColor = item.is_exception === 2 |
| | | ? Cesium.Color.RED.withAlpha(0.5) |
| | | const fillColor = item.is_exception === 2 |
| | | ? Cesium.Color.RED.withAlpha(0.5) |
| | | : Cesium.Color.YELLOW.withAlpha(0.5); |
| | | const outlineColor = item.is_exception === 2 |
| | | ? Cesium.Color.RED |
| | | const outlineColor = item.is_exception === 2 |
| | | ? Cesium.Color.RED |
| | | : Cesium.Color.YELLOW; |
| | | |
| | | homeViewer.value?.entities?.add({ |
| | |
| | | for (let i = 0; i < numbersWithCommas.length; i += 2) { |
| | | const lon = Number(numbersWithCommas[i]); |
| | | const lat = Number(numbersWithCommas[i + 1]); |
| | | positionsData.push([lon, lat, 10]); |
| | | positionsData.push([lon, lat, 10]); |
| | | } |
| | | flyVisual({ |
| | | positionsData: positionsData, |
| | | viewer: homeViewer.value, |
| | | multiple: 15, |
| | | |
| | | positionsData: positionsData, |
| | | viewer: homeViewer.value, |
| | | multiple: 15, |
| | | |
| | | }); |
| | | } |
| | | } |
| | |
| | | |
| | | // 定位到选中的图斑 |
| | | handleLocationPolygon(row); |
| | | |
| | | |
| | | // 仅异常图斑可编辑 |
| | | if (row.is_exception !== 2) { |
| | | ElMessage.warning('仅异常图斑支持编辑绘制'); |
| | |
| | | |
| | | watch(uploadPatchDialog, newVal => { |
| | | if (newVal) { |
| | | isInit.value = true; |
| | | isMapReady.value = false; |
| | | isInit.value = true; |
| | | isMapReady.value = false; |
| | | setTimeout(() => { |
| | | initMap(); |
| | | getspotManagementTableApi(); |
| | | initMap(); |
| | | getspotManagementTableApi(); |
| | | }, 0); |
| | | } else { |
| | | tableLoading.value = false; |
| | | tableData.value = []; |
| | | tableData.value = []; |
| | | isEditing.value = false; |
| | | handleUpDateDrawState(false); |
| | | destroyMap(); |
| | | isInit.value = false; |
| | | isInit.value = false; |
| | | clearSelect(); |
| | | isMapReady.value = false; |
| | | isMapReady.value = false; |
| | | } |
| | | refreshonload(); |
| | | }); |
| | |
| | | } |
| | | :global(.spotDialog .el-dialog__body) { |
| | | padding: 2rem 2rem 0 !important; |
| | | |
| | | |
| | | } |
| | | .container { |
| | | display: flex; |
| | |
| | | |
| | | // 选中行 |
| | | .current-row td { |
| | | |
| | | |
| | | background-color: rgba(64, 158, 255,0.3) !important; |
| | | } |
| | | } |
| | |
| | | width: 100%; |
| | | } |
| | | .el-button { |
| | | padding: 0; |
| | | color: #fff; |
| | | padding: 0; |
| | | color: #fff; |
| | | width: 17px; |
| | | } |
| | | </style> |