| | |
| | | </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 |
| | | 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, |
| | | }; |
| | | } |
| | | } |
| | | |
| | |
| | | ...item, |
| | | grouped: grouped, |
| | | }); |
| | | viewInstance.value.removeById('polygon_dk' + item.id) |
| | | 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); |
| | |
| | | duration: 0, |
| | | offset: new Cesium.HeadingPitchRange( |
| | | Cesium.Math.toRadians(-45), |
| | | Cesium.Math.toRadians(-90), |
| | | |
| | | Cesium.Math.toRadians(-90) |
| | | ), |
| | | }); |
| | | } |
| | |
| | | }; |
| | | |
| | | // 高亮当前选中图斑,并定位 |
| | | const handleLocationPolygon = (data) => { |
| | | updateMapSpotInfo(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); |
| | | }; |
| | | 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'); |
| | | const targetRow = rows[clickTableID]; |
| | | |
| | | nextTick(() => { |
| | | const table = polygonTableEle?.value; |
| | | if (table && targetRow) { |
| | | table.setCurrentRow(tableData.value[clickTableID]); |
| | | targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | // 鼠标触发点击图斑高亮 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') |
| | | const nowEntity = entities?.[0] |
| | | .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'); |
| | |
| | | table.setCurrentRow(tableData.value[clickTableID]); |
| | | }); |
| | | |
| | | updateMapSpotInfo(nowEntity) |
| | | updateMapSpotInfo(nowEntity); |
| | | } |
| | | |
| | | // 更新上一个和这一个信息 |
| | | function updateMapSpotInfo(nowEntity) { |
| | | if (!nowEntity) return |
| | | if (nowEntity.customInfo.id === lastEntity?.customInfo.id) return |
| | | |
| | | 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 |
| | | nowEntity.polygon.material = Cesium.Color.RED.withAlpha(0); |
| | | nowEntity.polyline.material = Cesium.Color.RED; |
| | | // 重置上一个 |
| | | if (lastEntity) { |
| | | lastEntity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5) |
| | | lastEntity.polyline.material = Cesium.Color.YELLOW |
| | | 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 |
| | | 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); |
| | | // 相机定位 |
| | | homeViewer.value.scene.camera.setView({ |
| | | destination: Cesium.Cartesian3.fromDegrees( |
| | | Number(polygonCenter.lng), |
| | | Number(polygonCenter.lat), |
| | | 1500 |
| | | ), |
| | | zIndex: 100, |
| | | }); |
| | | } |
| | | // flyMapSpot(nowEntity?.customInfo) |
| | | } |
| | | // 清空选中的数据 |
| | |
| | | :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; |
| | | } |
| | | } |
| | | } |
| | |
| | | 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) { |