| | |
| | | |
| | | <script setup> |
| | | import { ElMessage, ElMessageBox } from 'element-plus'; |
| | | import { findAreaName } from '@/utils/areaUtils'; |
| | | import { |
| | | patchEditApi, |
| | | tableMapListApi, |
| | | deletePatches, |
| | | AlltableMapListApi, |
| | | spotManagementTableApi, |
| | | } from '@/api/patchManagement/index'; |
| | | import { getCenterPoint } from '@/utils/cesium/mapUtil.js'; |
| | | |
| | |
| | | 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 tableData = ref([]); |
| | | const AlltableData = ref([]); |
| | | let total = ref(0); |
| | | const refreshonload = inject('searchReset'); |
| | | const initialFileName = ref(''); |
| | | const initialSpotTypeId = ref(''); |
| | | const initialSpotTypeLabel = ref(''); |
| | | // 当前选中的图斑面数据 |
| | | const spotManagementData = ref(null); |
| | | // 记录上一次点击高亮 |
| | | let lastHighlightRow = null; |
| | | // 功能按钮区域相关:编辑图斑等 |
| | |
| | | { 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({ |
| | |
| | | entitiesAddSpot(); |
| | | }); |
| | | }; |
| | | // 所有图斑数据 |
| | | const getAlltableMapListApi = () => { |
| | | 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(); |
| | | entitiesAddSpot(); |
| | | }); |
| | | }; |
| | | const handleSizeChange = val => { |
| | | params.value.pageSize = val; |
| | | params.value.page = 1; |
| | |
| | | params.value.page = val; |
| | | getTableList(); |
| | | }; |
| | | const tableData = ref([]); |
| | | |
| | | // 地图 |
| | | const initMap = () => { |
| | | if (!document.getElementById('spotMap')) { |
| | |
| | | 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; |
| | |
| | | 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'); |
| | |
| | | }; |
| | | |
| | | // 高亮当前选中图斑,并定位 |
| | | // const handleLocationPolygon = data => { |
| | | // updateMapSpotInfo(data); |
| | | // }; |
| | | |
| | | const getEntityByDataId = dataId => { |
| | | if (!homeViewer.value) return null; |
| | | const entityId = `polygon_dk${dataId}`; |
| | |
| | | .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); |
| | |
| | | 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); |
| | |
| | | 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( |
| | |
| | | if (res.data.code !== 0) return ElMessage.warning('删除失败'); |
| | | ElMessage.success('删除成功'); |
| | | getTableList(); |
| | | getspotManagementTableApi(); |
| | | }); |
| | | }); |
| | | }; |
| | |
| | | setTimeout(() => { |
| | | initMap(); |
| | | getTableList(); |
| | | getAlltableMapListApi(); |
| | | getspotManagementTableApi(); |
| | | }, 0); |
| | | } else { |
| | | if (funButtonEle.value) { |