- + - - + + - + - + - - + - 搜索 - 重置 + 搜索 + 重置 -
-
- Main Image -
-
+
+
+ 采集时间: + {{ new Date(rectsItem.createdTime).toLocaleString() }} 起始桩号: + {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号: + {{ rectsItem.stakeEnd || "暂无数据" }} + 病害类型：{{ rectsItem.defectTypeName || "暂无数据" }} 路产状态: + {{ filterState(rectsItem.state) }} +
+
+ Main Image +
+
- +
- 是病害(Y) - 不是病害(N) + 是病害(Y) + 不是病害(N)
@@ -132,6 +210,17 @@ export default { selectedThumbnail: null, // 图片下方数据 rectsItem: {}, + + initWidth: 0, // 父元素的宽-自适应值 + initHeight: 0, // 父元素的高-自适应值 + // 缩放比例 + zoom: 1, + // 容器宽 + elWidth: 0, // 元素宽 + // 容器高 + elHeight: 0, // 元素高 + elLeft: 0, // 元素的左偏移量 + elTop: 0, // 元素的右偏移量 }; }, computed: { @@ -152,10 +241,90 @@ export default { mounted() { this.getList(); this.showImage(0); + this.scrollInit(); + this.initBodySize(); window.addEventListener("keydown", this.handleKeydown); window.addEventListener("resize", this.updateRects); }, methods: { + // 页面初始化 + initBodySize() { + this.initWidth = this.$refs.imageView.clientWidth; // 拿到父元素宽 + this.initHeight = this.initWidth * ((1080 * 0.31) / (1920 - 1080 * 0.02)); // 根据宽计算高实现自适应 + this.elWidth = this.initWidth * (100 / (1920 / 1.2)); + this.elHeight = this.initHeight * (100 / (1080 / 2.08)); + }, + // 初始化与绑定监听事件方法 + scrollInit() { + // 获取要绑定事件的元素 + const nav = this.$refs.imageView; + + let flag; // 鼠标按下 + let downX; // 鼠标点击的x下标 + let downY; + let scrollLeft; // 当前元素滚动条的偏移量 + let scrollTop; // 当前元素滚动条的偏移量 + nav.addEventListener("mousedown", function (event) { + flag = true; + downX = event.clientX; // 获取到点击的x下标 + downY = event.clientY; + scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量 + scrollTop = this.scrollTop; + }); + nav.addEventListener("mousemove", function (event) { + if (flag) { + // 判断是否是鼠标按下滚动元素区域 + let moveX = event.clientX; // 获取移动的x轴 + let moveY = event.clientY; + let scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离 + let scrollY = moveY - downY; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离 + this.scrollLeft = scrollLeft - scrollX; // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离 + this.scrollTop = scrollTop - scrollY; + } + }); + // 鼠标抬起停止拖动 + nav.addEventListener("mouseup", function () { + flag = false; + }); + // 鼠标离开元素停止拖动 + nav.addEventListener("mouseleave", function (event) { + flag = false; + }); + }, + // 拖拽开始事件 + dragstart(e) { + this.startclientX = e.clientX; // 记录拖拽元素初始位置 + this.startclientY = e.clientY; + }, + // 拖拽完成事件 + dragend(e) { + let x = e.clientX - this.startclientX; // 计算偏移量 + let y = e.clientY - this.startclientY; + this.elLeft += x; // 实现拖拽元素随偏移量移动 + this.elTop += y; + }, + // 滚轮放大缩小事件 + handleWeel(e) { + if (e.wheelDelta < 0) { + this.zoom -= 0.25; + } else { + this.zoom += 0.25; + } + if (this.zoom >= 5.5) { + this.zoom = 5.5; + return; + } + if (this.zoom <= 0.75) { + this.zoom = 0.75; + this.elLeft = 0; + this.elTop = 0; + return; + } + + this.elWidth = this.initWidth * (100 / (1920 / 1.2)) * this.zoom; + this.elHeight = this.initHeight * (100 / (1080 / 2)) * this.zoom; + }, + /* 获取路段下拉数据 */ getSegmentList() { getSegment().then(({ code, data }) => { @@ -261,6 +430,8 @@ export default { /* 左侧点击图片事件 */ showImage(index) { + this.initBodySize(); + this.zoom = 1; this.currentIndex = index; this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item this.scrollToCurrentImage(); @@ -285,7 +456,7 @@ export default { /* 图片位置信息获取 */ updateRects() { - this.rects = []; + // this.rects = []; this.rectsItem = {}; if (this.defectData.length > 0) { const image = this.$refs.mainImage; @@ -313,22 +484,23 @@ export default { const container = this.$refs.imageContainer; if (!image || !container) return {}; - const scaleX = container.clientWidth / image.naturalWidth; - const scaleY = container.clientHeight / image.naturalHeight; + const scaleX = (this.elWidth * 16) / image.naturalWidth; + const scaleY = (this.elHeight * 16) / 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; + const offsetX = (this.elWidth * 16 - renderedWidth) / 2; + const offsetY = (this.elHeight * 16 - 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", + border: "2px solid #ffffff", boxSizing: "border-box", }; }, @@ -377,6 +549,8 @@ export default { if (event.key === "ArrowUp") { event.preventDefault(); if (this.currentIndex > 0) { + this.initBodySize(); + this.zoom = 1; this.currentIndex--; this.selectedThumbnail = 0; // Reset when changing main images via keyboard this.scrollToCurrentImage(); @@ -385,6 +559,8 @@ export default { } else if (event.key === "ArrowDown") { event.preventDefault(); if (this.currentIndex <= this.defectData.length - 1) { + this.initBodySize(); + this.zoom = 1; this.currentIndex === this.defectData.length - 1 ? this.currentIndex : this.currentIndex++; @@ -413,7 +589,7 @@ export default {