diff --git a/src/views/xj/inspection/task-management/components/task-map.vue b/src/views/xj/inspection/task-management/components/task-map.vue index 13503f5..afbe3e5 100644 --- a/src/views/xj/inspection/task-management/components/task-map.vue +++ b/src/views/xj/inspection/task-management/components/task-map.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2025-01-02 11:56:20 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2025-01-02 15:54:11 + * @LastEditTime: 2025-01-02 17:26:35 * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-map.vue * @Description: 巡检任务-地图弹窗 --> @@ -25,7 +25,50 @@ clearable > - + + + + +
+ Main Image +
+
+ 采集时间: + {{ screenImage.createTime }} 起始桩号: + {{ screenImage.stakeStart || "暂无数据" }} 终止桩号: + {{ screenImage.stakeEnd || "暂无数据" }} + 病害类型 + {{ screenImage.iconTypeName || "暂无数据" }} + 病害面积:{{ + screenImage.targetArea + ? `${screenImage.targetArea}平方米` + : "暂无数据" + }} + 病害长度:{{ + screenImage.targetLen * 1 <= 0 + ? "暂无数据" + : `${screenImage.targetLen}米` + }} +
+
+
@@ -65,6 +108,12 @@ export default { centerPiont: [], // 中心点集合(所有点位) drawPointList: [], + // 查看大图点位图片数据 + screenImage: {}, + // 查看大图点位图片弹窗显隐控制 + showImageDialog: false, + // 查看大图点位图片弹窗红框数据 + screenRects: [], }; }, mounted() { @@ -111,9 +160,6 @@ export default { } return []; }); - // 如果不是病害巡检,则绘制点位 - // 如果图片弹窗打开,则绘制点位 - // if (!this.shouldLoadClusters) { // 修改地图中心点位 const pointArray = data.map((item) => { if (item.geometry) { @@ -123,7 +169,6 @@ export default { }); this.fitMapToPoints(pointArray); this.drawPoint(); - // } } }); }, @@ -206,6 +251,92 @@ export default { this.markLayerPoints.setSource(pointSource); } }, + + /** + * @description: 图标点击事件 + * @return {void} + */ + featureSelect(e) { + const map = this.$refs.taskMap.instance.get("map"); + const selectedFeatures = e.selected; + let feature = selectedFeatures[0]; + if (selectedFeatures.length > 0) { + console.log(feature.getProperties(), "feature"); + // 获取点位数据 + const selectFeature = feature.getProperties().data; + this.screenImage = selectFeature; + this.showImageDialog = true; + } else { + // 聚合点 + // 放大地图层级 + map.getView().animate({ + center: feature.getGeometry().getCoordinates(), + zoom: map.getView().getZoom() + 1, + }); + } + }, + + /** + * @description: 图片位置信息获取 + * @return {void} + */ + updateScreenRects() { + 1; + this.screenRects = []; + const image = this.$refs.mainImage; + const rects = this.screenImage?.rect?.split(",").map(Number) || []; + this.screenRects = [ + { + left: rects[0], + top: rects[1], + width: rects[2], + height: rects[3], + }, + ]; + }, + + /** + * @description: 图片红框位置 + * @param {object} left + * @param {object} top + * @param {object} width + * @param {object} height + * @return {object} + */ + getScreenRectStyle({ left, top, width, height }) { + const image = this.$refs.mainImage; + const container = this.$refs.imageContainer; + if (!image || !container) return {}; + + const scaleX = container.clientWidth / image.naturalWidth; + const scaleY = container.clientHeight / image.naturalHeight; + const scale = Math.min(scaleX, scaleY); + + const renderedWidth = image.naturalWidth * scale; + const renderedHeight = image.naturalHeight * scale; + + const offsetX = (container.clientWidth - renderedWidth) / 2; + const offsetY = (container.clientHeight - renderedHeight) / 2; + + return { + position: "absolute", + left: `${left * scale + offsetX}px`, + top: `${top * scale + offsetY}px`, + width: `${width * scale}px`, + height: `${height * scale}px`, + border: "2px solid #FF0000", + boxSizing: "border-box", + }; + }, + + /** + * @description: 关闭查看点位大图弹窗 + * @return {void} + */ + screenImgCancel() { + this.$refs.taskMap.removeSelectClick(); + this.showImageDialog = false; + }, }, }; @@ -221,4 +352,38 @@ export default { z-index: 1; } } + +/* 查看大图弹窗 */ +.image-container { + position: relative; + width: 100%; + height: 80%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.image-container img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.rect-overlay { + position: absolute; + pointer-events: none; + border: 2px solid red; +} + +// 图片信息 +.rect-image { + width: 90%; + position: absolute; + top: 0; + font-size: 1.2rem; + color: #ffffff; + background-color: rgba(0, 0, 0, 0.5); +}