| | |
| | | class="spotDialog" |
| | | :title="props.title" |
| | | v-model="uploadPatchDialog" |
| | | width="75%" |
| | | width="78%" |
| | | align-center |
| | | > |
| | | <div class="container"> |
| | |
| | | </template> |
| | | </template> |
| | | <template v-else > |
| | | <div class="itemValue" :class="{ 'error-text': item.name === '异常图斑数量' }">{{ item.value }}</div> |
| | | <div class="itemValue" :class="{ 'error-text': item.name === '异常图斑数量' }"> |
| | | {{ item.value }} |
| | | </div> |
| | | </template> |
| | | </div> |
| | | </div> |
| | |
| | | const selectionList = ref([]); |
| | | // 当前在编辑状态的异常图斑 |
| | | let curCustomPolygon = null; |
| | | |
| | | let lastEntity = null; |
| | | // 表格隔行变色 |
| | | const tableRowClassName = ({ rowIndex }) => { |
| | | return rowIndex % 2 === 1 ? 'oddNumberRow' : 'even-row'; |
| | |
| | | return option ? option.label : ''; |
| | | }; |
| | | const updateInfoList = detailData => { |
| | | |
| | | if (detailData && (initialFileName.value === '' || initialSpotTypeId.value === '')) { |
| | | initialFileName.value = detailData.file_name || ''; |
| | | initialSpotTypeId.value = detailData.lot_type_id || ''; |
| | |
| | | |
| | | if (item.name === '图斑类型') { |
| | | if (detailData.patches_type_desc !== undefined) { |
| | | return { ...item, value: detailData.patches_type_desc, originalValue: detailData.lot_type_id }; |
| | | 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: getPatchTypeLabel(detailData.lot_type_id), |
| | | originalValue: detailData.lot_type_id, |
| | | }; |
| | | } |
| | | } |
| | | |
| | |
| | | }; |
| | | // 初始化所有图斑 |
| | | const entitiesAddSpot = () => { |
| | | viewer?.entities.removeAll(); //清除旧实体 |
| | | viewer?.entities.removeAll(); |
| | | tableData.value.forEach(item => { |
| | | // 取出当中经纬度 |
| | | const numbersWithCommas = item.dkfw.match(/\d+(\.\d+)?/g); |
| | |
| | | ...item, |
| | | grouped: grouped, |
| | | }); |
| | | viewInstance.value.removeById('polygon_dk' + item.id); |
| | | // 根据 is_exception 设置颜色 |
| | | const color = |
| | | 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 : Cesium.Color.YELLOW; |
| | | viewInstance.value?.removeById('polygon_dk' + item.id); |
| | | |
| | | homeViewer.value?.entities?.add({ |
| | | id: 'polygon_dk' + item.id, |
| | | customType: 'pattern_spot_polygon', |
| | |
| | | duration: 0, |
| | | offset: new Cesium.HeadingPitchRange( |
| | | Cesium.Math.toRadians(-45), |
| | | Cesium.Math.toRadians(-90), |
| | | |
| | | Cesium.Math.toRadians(-90) |
| | | ), |
| | | }); |
| | | } |
| | |
| | | }; |
| | | |
| | | // 高亮当前选中图斑,并定位 |
| | | const handleLocationPolygon = (data, Deselect) => { |
| | | heightlightSpot(data); |
| | | // const handleLocationPolygon = data => { |
| | | // updateMapSpotInfo(data); |
| | | // }; |
| | | const getEntityByDataId = dataId => { |
| | | if (!homeViewer.value) return null; |
| | | const entityId = `polygon_dk${dataId}`; |
| | | return homeViewer.value.entities.getById(entityId); |
| | | }; |
| | | // 鼠标触发点击图斑高亮 pick:可以获取当前图斑数据 |
| | | const spotHighlighting = (click, pick, viewer) => { |
| | | if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return; |
| | | let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id); |
| | | // 计算表格滚动至中间位置 |
| | | const handleLocationPolygon = data => { |
| | | if (!data) return; |
| | | const targetEntity = getEntityByDataId(data.id); |
| | | if (targetEntity) { |
| | | updateMapSpotInfo(targetEntity); |
| | | // 同步表格选中状态 |
| | | const clickTableID = tableData.value.findIndex(i => i.id === data.id); |
| | | const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr'); |
| | | let targetRow = rows[clickTableID]; |
| | | const targetRow = rows[clickTableID]; |
| | | |
| | | nextTick(() => { |
| | | const table = polygonTableEle?.value; |
| | | if (!table) return; |
| | | if (targetRow) { |
| | | targetRow.scrollIntoView({ |
| | | behavior: 'smooth', |
| | | block: 'center', |
| | | }); |
| | | polygonTableEle?.value.setCurrentRow(tableData.value[clickTableID]); |
| | | if (table && targetRow) { |
| | | table.setCurrentRow(tableData.value[clickTableID]); |
| | | targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| | | } |
| | | }); |
| | | // 表格也对应选中数据 TODO |
| | | const data = pick.id?.customInfo; |
| | | // 高亮图斑 |
| | | heightlightSpot(data); |
| | | } |
| | | }; |
| | | // 选中列表或者点击地图内的图斑 高亮图斑 |
| | | const heightlightSpot = data => { |
| | | nowSelectObj.value = data; |
| | | if (!data) { |
| | | clearSelect(); |
| | | return; |
| | | // 鼠标触发点击图斑高亮 pick:可以获取当前图斑数据 |
| | | function spotHighlighting(click, pick, viewer) { |
| | | let entities = viewer?.scene |
| | | .drillPick(click.position) |
| | | .filter(item => item.id) |
| | | .map(i => i.id) |
| | | .filter(i => i._customType === 'pattern_spot_polygon'); |
| | | 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 rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr'); |
| | | const targetRow = rows[clickTableID]; |
| | | |
| | | nextTick(() => { |
| | | const table = polygonTableEle?.value; |
| | | if (!table || !targetRow) return; |
| | | // 表格滚动到中间位置 |
| | | targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| | | // 同步表格选中状态 |
| | | table.setCurrentRow(tableData.value[clickTableID]); |
| | | }); |
| | | |
| | | updateMapSpotInfo(nowEntity); |
| | | } |
| | | |
| | | const numbersWithCommas = data.dkfw.match(/\d+(\.\d+)?/g); |
| | | // 更新上一个和这一个信息 |
| | | function updateMapSpotInfo(nowEntity) { |
| | | const nowData = nowEntity.customInfo; |
| | | if (!nowEntity) return; |
| | | if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return; |
| | | // 设置新的 |
| | | nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0); |
| | | nowEntity.polyline.material = Cesium.Color.RED; |
| | | // 重置上一个 |
| | | if (lastEntity) { |
| | | 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; |
| | | |
| | | lastEntity.polygon.material = originalFillColor; |
| | | lastEntity.polygon.outlineColor = originalOutlineColor; |
| | | lastEntity.polyline.material = originalOutlineColor; |
| | | } |
| | | lastEntity = nowEntity; |
| | | const numbersWithCommas = nowData.dkfw.match(/\d+(\.\d+)?/g); |
| | | if (numbersWithCommas) { |
| | | // 解析经纬度数组 |
| | | const groupedArr = numbersWithCommas.reduce((acc, val, index, src) => { |
| | | if (index % 2 === 0) acc.push(src.slice(index, index + 2)); |
| | | return acc; |
| | | }, []); |
| | | |
| | | const polygonCenter = getCenterPoint(groupedArr); |
| | | if (viewInstance.value.getEntityById('polygon_center')) { |
| | | viewInstance.value.removeById('polygon_center'); |
| | | } |
| | | |
| | | // 恢复上一个高亮图斑的原始颜色 |
| | | if (lastHighlightRow) { |
| | | let lastentity = homeViewer.value.entities?.getById('polygon_dk' + lastHighlightRow.id); |
| | | if (lastentity && lastentity.polygon) { |
| | | // 根据is_exception恢复原始颜色 |
| | | const originalColor = |
| | | lastHighlightRow.is_exception == 2 |
| | | ? Cesium.Color.RED.withAlpha(0.5) |
| | | : Cesium.Color.YELLOW.withAlpha(0.5); |
| | | const originalOutline = |
| | | lastHighlightRow.is_exception == 2 ? Cesium.Color.RED : Cesium.Color.YELLOW; |
| | | |
| | | lastentity.polygon.material = originalColor; |
| | | lastentity.polygon.outlineColor = originalOutline; |
| | | lastentity.polygon.outlineWidth = 2; |
| | | } |
| | | } |
| | | |
| | | let Nowentity = homeViewer.value.entities?.getById('polygon_dk' + data.id); |
| | | if (Nowentity && Nowentity.polygon) { |
| | | Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0); |
| | | Nowentity.polygon.outlineColor = Cesium.Color.RED; |
| | | } |
| | | // 相机定位 |
| | | homeViewer.value.scene.camera.setView({ |
| | | destination: Cesium.Cartesian3.fromDegrees( |
| | | Number(polygonCenter.lng), |
| | |
| | | ), |
| | | zIndex: 100, |
| | | }); |
| | | lastHighlightRow = data; |
| | | }; |
| | | } |
| | | // flyMapSpot(nowEntity?.customInfo) |
| | | } |
| | | // 清空选中的数据 |
| | | const clearSelect = () => { |
| | | lastHighlightRow = null; |
| | | selectionList.value = []; |
| | | viewer?.entities.removeAll(); |
| | | }; |
| | | // 编辑 |
| | | const handleSelectionChange = row => { |
| | |
| | | patchTypeItem.value !== '' && |
| | | patchTypeItem.value !== null && |
| | | patchTypeItem.value !== undefined; |
| | | console.log('isValueNumber',isValueNumber); |
| | | if (isValueNumber) { |
| | | // 转换为数字类型 |
| | | lotTypeId = Number(patchTypeItem.value); |
| | |
| | | const handleCancel = () => { |
| | | const fileNameItem = infoList.value.find(item => item.name === '文件名称'); |
| | | const spotTypeItem = infoList.value.find(item => item.name === '图斑类型'); |
| | | |
| | | if (fileNameItem) { |
| | | fileNameItem.value = initialFileName.value; |
| | | } |
| | |
| | | :global(.spotDialog .el-dialog__header span) { |
| | | padding-left: 16px !important; |
| | | display: inline-block; |
| | | |
| | | } |
| | | :global(.spotDialog .el-dialog__header) .el-dialog__title { |
| | | font-family: "Source Han Sans CN" !important; |
| | | font-family: 'Source Han Sans CN' !important; |
| | | font-weight: bold !important; |
| | | font-size: 16px !important; |
| | | color: #363636 !important; |
| | |
| | | padding-left: 10px; |
| | | .itemValue { |
| | | padding-left: 6px; |
| | | color: #7B7B7B; |
| | | color: #7b7b7b; |
| | | } |
| | | .error-text{ |
| | | color: #FF0A0A; |
| | | color: #ff0a0a; |
| | | } |
| | | } |
| | | } |
| | |
| | | // 表格主体 |
| | | .el-table__body { |
| | | tr:hover > td { |
| | | background-color: var(--el-table-row-hover-bg-color) !important; |
| | | background-color: rgba(0, 0, 0, 0.6) !important; |
| | | } |
| | | |
| | | td { |
| | |
| | | |
| | | // 选中行 |
| | | .current-row td { |
| | | background-color: var(--el-table-current-row-bg-color) !important; |
| | | background-color: rgba(0, 0, 0, 0.6) !important; |
| | | } |
| | | } |
| | | :deep(.el-table__body) { |
| | |
| | | background: transparent !important; |
| | | } |
| | | :deep(.el-pagination) { |
| | | |
| | | .btn-prev, |
| | | .btn-next { |
| | | padding: 5px 6px; |
| | |
| | | height: auto; // 取消固定高度20px,避免内容被截断 |
| | | margin: 24px 0 14px 0; |
| | | width: 100%; |
| | | box-sizing: border-box |
| | | box-sizing: border-box; |
| | | } |
| | | } |
| | | :deep(.el-tooltip__popper) { |
| | |
| | | position: absolute; |
| | | bottom: 49px; |
| | | left: 50%; |
| | | transform: translate(-50%); |
| | | img { |
| | | width: 125px; |
| | | height: 45px; |