You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
654 lines
16 KiB
654 lines
16 KiB
<template>
|
|
<div
|
|
class="flex-row card-page"
|
|
style="background: #090918"
|
|
v-loading="loading"
|
|
>
|
|
<div style="flex: 1; height: 100%; display: flex; flex-direction: column">
|
|
<div class="img-wrap">
|
|
<!-- 修改这部分：添加缩放容器和包装器 -->
|
|
<div class="zoom-container" ref="zoomContainer">
|
|
<div
|
|
class="zoom-wrapper"
|
|
ref="zoomWrapper"
|
|
:style="{
|
|
transform: `scale(${imageScale})`,
|
|
transformOrigin: '0 0',
|
|
position: 'absolute',
|
|
left: `${imagePosition.x}px`,
|
|
top: `${imagePosition.y}px`,
|
|
width: '100%',
|
|
height: '100%'
|
|
}"
|
|
@mousedown="startDrag($event)"
|
|
@touchstart="startTouchDrag($event)"
|
|
>
|
|
<AsyncImage
|
|
style="width: 100%; height: 100%"
|
|
fit="contain"
|
|
:src="selectImgUrl"
|
|
:supportPreview="false"
|
|
></AsyncImage>
|
|
</div>
|
|
</div>
|
|
|
|
<DrawShape
|
|
ref="drawShapeRef"
|
|
:brokenLineCount="1"
|
|
@drawComplete="
|
|
(shape) => {
|
|
handleDrawComplete(shape);
|
|
}
|
|
"
|
|
/>
|
|
|
|
<!-- 添加重置按钮 -->
|
|
<div class="zoom-controls">
|
|
<el-button
|
|
size="mini"
|
|
circle
|
|
@click="resetImage"
|
|
title="恢复原图"
|
|
>
|
|
↺
|
|
</el-button>
|
|
</div>
|
|
|
|
<!-- 上一个图片 -->
|
|
<el-button
|
|
v-if="bShowBackBtn"
|
|
@click="() => selectIndex--"
|
|
class="img-handle-btn img-handle-btn-left left-btn"
|
|
></el-button>
|
|
<!-- 下一个图片 -->
|
|
<el-button
|
|
v-if="bShowNextBtn"
|
|
@click="() => selectIndex++"
|
|
class="img-handle-btn img-handle-btn-right right-btn"
|
|
></el-button>
|
|
</div>
|
|
|
|
<!-- 开始测温 -->
|
|
<div
|
|
v-if="dataShowTemperatureTool && dataImageUrls.length > 0"
|
|
class="measure-temperature-btn"
|
|
>
|
|
<div>
|
|
<el-button @click="measureTemperature(ShapeEnum.point)" type="primary"
|
|
>点测温</el-button
|
|
>
|
|
<el-button
|
|
@click="measureTemperature(ShapeEnum.brokenline)"
|
|
type="primary"
|
|
>线测温</el-button
|
|
>
|
|
<el-button @click="measureTemperature(ShapeEnum.rect)" type="primary"
|
|
>区域测温</el-button
|
|
>
|
|
<el-button
|
|
v-if="measuring"
|
|
@click="cancelMeasureTemperature"
|
|
type="primary"
|
|
>取消测温</el-button
|
|
>
|
|
</div>
|
|
<div style="flex: 1; text-align: right">
|
|
<span style="padding-left: 10px"
|
|
>平均温度：{{
|
|
temperatureInfo.averageT ? temperatureInfo.averageT + "℃" : "-"
|
|
}}</span
|
|
>
|
|
<span style="padding-left: 10px"
|
|
>最大温度：{{
|
|
temperatureInfo.maxT ? temperatureInfo.maxT + "℃" : "-"
|
|
}}</span
|
|
>
|
|
<span style="padding-left: 10px"
|
|
>最小温度：{{
|
|
temperatureInfo.maxT ? temperatureInfo.minT + "℃" : "-"
|
|
}}</span
|
|
>
|
|
<span style="padding-left: 10px"
|
|
>环境温度：{{
|
|
temperatureInfo.weatherT ? temperatureInfo.weatherT + "℃" : "-"
|
|
}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="img-list-wrap" v-if="dataImageUrls.length > 1">
|
|
<ul ref="imgUlRef">
|
|
<li
|
|
v-for="(item, index) in dataImageUrls"
|
|
:key="index"
|
|
@click="onSelectImage(item, index)"
|
|
>
|
|
<div
|
|
:style="imgListItemStyle"
|
|
:class="{ 'img-list-item-selected': index === selectIndex }"
|
|
>
|
|
<AsyncImage
|
|
style="width: 100%; height: 100%"
|
|
fit="contain"
|
|
:src="item"
|
|
></AsyncImage>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getTemperatureValue } from "@/api/device";
|
|
import DrawShape, { ShapeEnum } from "@/components/Canvas/DrawShape.vue";
|
|
// 图片列表item高度
|
|
const IMG_LIST_ITEM_HEIGHT = 170;
|
|
|
|
export default {
|
|
name: "ImagePreviewDialog",
|
|
components: { DrawShape },
|
|
props: {
|
|
// 是否显示弹窗
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// 是否显示测温工具
|
|
showTemperatureTool: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// 图片地址列表
|
|
imageUrls: {
|
|
type: Array,
|
|
default: [],
|
|
require: false,
|
|
},
|
|
// 选择图片的位置
|
|
selectImgPosition: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// 当前选择图片url
|
|
selectIndex: 0,
|
|
// 图片列表item样式，因为有自动滚动，为了使其高度便于统一修改，所以放在了js里
|
|
imgListItemStyle: {
|
|
width: "300px",
|
|
height: `${IMG_LIST_ITEM_HEIGHT}px`,
|
|
margin: "5px 0",
|
|
},
|
|
ShapeEnum: ShapeEnum,
|
|
// 是否正在测量
|
|
measuring: false,
|
|
temperatureInfo: {},
|
|
loading: false,
|
|
dataShowTemperatureTool: false,
|
|
dataImageUrls: [],
|
|
|
|
// 新增：缩放相关数据
|
|
imageScale: 1,
|
|
imagePosition: { x: 0, y: 0 },
|
|
isDragging: false,
|
|
dragStartPos: { x: 0, y: 0 },
|
|
dragStartImagePos: { x: 0, y: 0 },
|
|
};
|
|
},
|
|
computed: {
|
|
selectImgUrl() {
|
|
return this.dataImageUrls.length > this.selectIndex
|
|
? this.dataImageUrls[this.selectIndex]
|
|
: "";
|
|
},
|
|
// 是否显示下一页
|
|
bShowNextBtn() {
|
|
return this.selectIndex + 1 < this.dataImageUrls.length;
|
|
},
|
|
// 是否显示上一页
|
|
bShowBackBtn() {
|
|
return this.selectIndex > 0;
|
|
},
|
|
},
|
|
watch: {
|
|
visible(value) {
|
|
// 显示之前先复位状态
|
|
if (value) {
|
|
this.reset();
|
|
}
|
|
},
|
|
selectImgPosition() {
|
|
if (this.selectImgPosition < this.dataImageUrls.length) {
|
|
this.selectIndex = this.selectImgPosition;
|
|
this.resetImage(); // 切换到新图片时重置缩放
|
|
}
|
|
},
|
|
selectIndex() {
|
|
// 滚动列表
|
|
if (this.$refs.imgUlRef) {
|
|
this.$refs.imgUlRef.scrollTo({
|
|
top: IMG_LIST_ITEM_HEIGHT * this.selectIndex,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
// 切换图片时重置缩放
|
|
this.resetImage();
|
|
},
|
|
},
|
|
created() {
|
|
this.dataImageUrls = this.imageUrls;
|
|
this.selectIndex = this.selectImgPosition;
|
|
this.dataShowTemperatureTool = this.showTemperatureTool;
|
|
// 没传值，则从缓存中取
|
|
if (!this.dataImageUrls || !this.dataImageUrls.length) {
|
|
const info = JSON.parse(sessionStorage.getItem("imageInfo"));
|
|
if (info.imageUrls) {
|
|
this.dataImageUrls = info.imageUrls;
|
|
}
|
|
if (info.selectImgPosition) {
|
|
this.selectIndex = info.selectImgPosition;
|
|
}
|
|
if (info.showTemperatureTool) {
|
|
this.dataShowTemperatureTool = info.showTemperatureTool;
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
// 绑定事件
|
|
this.bindGlobalEvents();
|
|
|
|
// 添加滚轮事件监听
|
|
this.$nextTick(() => {
|
|
if (this.$refs.zoomContainer) {
|
|
this.$refs.zoomContainer.addEventListener('wheel', this.handleWheel, { passive: false });
|
|
}
|
|
});
|
|
},
|
|
|
|
beforeDestroy() {
|
|
// 移除事件
|
|
this.unbindGlobalEvents();
|
|
|
|
// 移除滚轮事件
|
|
if (this.$refs.zoomContainer) {
|
|
this.$refs.zoomContainer.removeEventListener('wheel', this.handleWheel);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
reset() {
|
|
this.selectIndex = 0;
|
|
this.hideMeasureBox();
|
|
this.resetImage(); // 重置缩放
|
|
},
|
|
|
|
// 选择图片
|
|
onSelectImage(item, index) {
|
|
this.selectIndex = index;
|
|
},
|
|
|
|
// 显示测温框
|
|
showMeasureBox() {
|
|
if (this.$refs.drawShapeRef) {
|
|
this.temperatureInfo = {};
|
|
this.measuring = true;
|
|
this.$refs.drawShapeRef.show();
|
|
}
|
|
},
|
|
|
|
// 显示测温框
|
|
hideMeasureBox() {
|
|
this.measuring = false;
|
|
this.temperatureInfo = {};
|
|
if (this.$refs.drawShapeRef) {
|
|
this.$refs.drawShapeRef.hide();
|
|
}
|
|
},
|
|
|
|
// 测温
|
|
measureTemperature(type) {
|
|
this.showMeasureBox();
|
|
this.$nextTick(() => {
|
|
this.$refs.drawShapeRef.init();
|
|
this.$refs.drawShapeRef.startDraw(type);
|
|
});
|
|
},
|
|
|
|
cancelMeasureTemperature() {
|
|
this.hideMeasureBox();
|
|
},
|
|
|
|
handleDrawComplete(shape) {
|
|
const info = shape.getData();
|
|
this.loading = true;
|
|
getTemperatureValue(info.data, info.type, this.selectImgUrl)
|
|
.then((res) => {
|
|
this.temperatureInfo = res.data;
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
// 新增：滚轮事件处理
|
|
handleWheel(event) {
|
|
event.preventDefault();
|
|
const delta = event.deltaY || event.detail || event.wheelDelta;
|
|
const direction = delta > 0 ? -1 : 1;
|
|
const scaleStep = 0.1;
|
|
|
|
const oldScale = this.imageScale;
|
|
let newScale = oldScale + direction * scaleStep;
|
|
newScale = Math.max(0.1, Math.min(5, newScale));
|
|
|
|
// 计算鼠标在容器中的位置
|
|
const container = event.currentTarget;
|
|
const containerRect = container.getBoundingClientRect();
|
|
const mouseX = event.clientX - containerRect.left;
|
|
const mouseY = event.clientY - containerRect.top;
|
|
|
|
// 当前图片位置
|
|
const currentPos = this.imagePosition;
|
|
|
|
// 计算缩放后的新位置
|
|
// 缩放比例变化
|
|
const scaleChange = newScale / oldScale;
|
|
|
|
// 调整位置使鼠标点保持在图片上的同一位置
|
|
this.imagePosition = {
|
|
x: currentPos.x - (mouseX - currentPos.x) * (scaleChange - 1),
|
|
y: currentPos.y - (mouseY - currentPos.y) * (scaleChange - 1)
|
|
};
|
|
|
|
this.imageScale = newScale;
|
|
},
|
|
|
|
// 开始鼠标拖拽
|
|
startDrag(event) {
|
|
if (event.button !== 0) return;
|
|
|
|
this.isDragging = true;
|
|
this.dragStartPos = {
|
|
x: event.clientX,
|
|
y: event.clientY
|
|
};
|
|
this.dragStartImagePos = {
|
|
x: this.imagePosition.x,
|
|
y: this.imagePosition.y
|
|
};
|
|
|
|
// 添加拖拽样式
|
|
const wrapper = this.$refs.zoomWrapper;
|
|
if (wrapper) {
|
|
wrapper.classList.add('dragging');
|
|
}
|
|
|
|
// 防止文本选择
|
|
document.body.style.userSelect = 'none';
|
|
document.body.style.webkitUserSelect = 'none';
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
},
|
|
|
|
// 开始触摸拖拽
|
|
startTouchDrag(event) {
|
|
if (event.touches.length !== 1) return;
|
|
|
|
this.isDragging = true;
|
|
this.dragStartPos = {
|
|
x: event.touches[0].clientX,
|
|
y: event.touches[0].clientY
|
|
};
|
|
this.dragStartImagePos = {
|
|
x: this.imagePosition.x,
|
|
y: this.imagePosition.y
|
|
};
|
|
|
|
const wrapper = this.$refs.zoomWrapper;
|
|
if (wrapper) {
|
|
wrapper.classList.add('dragging');
|
|
}
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
},
|
|
|
|
// 处理拖拽移动
|
|
handleDragMove(event) {
|
|
if (!this.isDragging) return;
|
|
|
|
let clientX, clientY;
|
|
|
|
if (event.type === 'mousemove') {
|
|
clientX = event.clientX;
|
|
clientY = event.clientY;
|
|
} else if (event.type === 'touchmove' && event.touches.length === 1) {
|
|
clientX = event.touches[0].clientX;
|
|
clientY = event.touches[0].clientY;
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
const deltaX = clientX - this.dragStartPos.x;
|
|
const deltaY = clientY - this.dragStartPos.y;
|
|
|
|
// 更新图片位置
|
|
this.imagePosition = {
|
|
x: this.dragStartImagePos.x + deltaX,
|
|
y: this.dragStartImagePos.y + deltaY
|
|
};
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
},
|
|
|
|
// 结束拖拽
|
|
handleDragEnd(event) {
|
|
if (!this.isDragging) return;
|
|
|
|
// 移除拖拽样式
|
|
const wrapper = this.$refs.zoomWrapper;
|
|
if (wrapper) {
|
|
wrapper.classList.remove('dragging');
|
|
}
|
|
|
|
// 恢复文本选择
|
|
document.body.style.userSelect = '';
|
|
document.body.style.webkitUserSelect = '';
|
|
|
|
this.isDragging = false;
|
|
},
|
|
|
|
// 重置图片缩放和位置
|
|
resetImage() {
|
|
this.imageScale = 1;
|
|
this.imagePosition = { x: 0, y: 0 };
|
|
},
|
|
|
|
// 绑定全局事件
|
|
bindGlobalEvents() {
|
|
document.addEventListener('mousemove', this.handleDragMove);
|
|
document.addEventListener('mouseup', this.handleDragEnd);
|
|
document.addEventListener('touchmove', this.handleDragMove, { passive: false });
|
|
document.addEventListener('touchend', this.handleDragEnd);
|
|
},
|
|
|
|
// 移除全局事件
|
|
unbindGlobalEvents() {
|
|
document.removeEventListener('mousemove', this.handleDragMove);
|
|
document.removeEventListener('mouseup', this.handleDragEnd);
|
|
document.removeEventListener('touchmove', this.handleDragMove);
|
|
document.removeEventListener('touchend', this.handleDragEnd);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex-row {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
.img-wrap {
|
|
flex: 1;
|
|
height: 0;
|
|
position: relative;
|
|
|
|
// 新增：缩放容器样式
|
|
.zoom-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: grab;
|
|
|
|
&:active {
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
.zoom-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
cursor: grab;
|
|
|
|
&.dragging {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
::v-deep .el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
pointer-events: none; /* 防止图片干扰拖拽事件 */
|
|
}
|
|
}
|
|
|
|
// 新增：缩放控制按钮
|
|
.zoom-controls {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 10;
|
|
|
|
.el-button {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: white;
|
|
border: none;
|
|
font-size: 16px;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
}
|
|
|
|
.img-handle-btn {
|
|
position: absolute;
|
|
top: 45%;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 25px;
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
z-index: 11; // 确保在缩放控制之上
|
|
}
|
|
|
|
.img-handle-btn-left {
|
|
left: 15px;
|
|
}
|
|
|
|
.img-handle-btn-right {
|
|
right: 15px;
|
|
}
|
|
}
|
|
|
|
.measure-temperature-btn {
|
|
padding: 10px 0;
|
|
display: flex;
|
|
}
|
|
|
|
.img-list-wrap {
|
|
width: 300px;
|
|
height: 100%;
|
|
padding: 0 0 0 10px;
|
|
|
|
ul {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
margin: 0;
|
|
/* 解决火狐浏览器不隐藏滚动条的问题 */
|
|
scrollbar-width: none;
|
|
|
|
.img-list-item {
|
|
width: 300px;
|
|
height: 170px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.img-list-item-selected {
|
|
border: 3px solid #40486a;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .left-btn .is-disabled {
|
|
/* 禁用状态下移除 active 背景色 */
|
|
background-image: none;
|
|
}
|
|
|
|
.left-btn {
|
|
/* 设置默认状态的背景图片 */
|
|
background-image: url("../../assets/image-btn-left-normal.png");
|
|
}
|
|
|
|
.left-btn:disabled {
|
|
/* 设置禁用状态的背景图片 */
|
|
background-image: url("../../assets/image-btn-left-disable.png");
|
|
}
|
|
|
|
.left-btn:not(.is-disabled):active {
|
|
/* 设置按下状态的背景图片 */
|
|
background-image: url("../../assets/image-btn-left-press.png");
|
|
}
|
|
|
|
.left-btn:not(.is-disabled):hover {
|
|
/* 设置悬停状态的背景图片 */
|
|
background-image: url("../../assets/image-btn-left-hover.png");
|
|
}
|
|
|
|
.right-btn {
|
|
/* 设置默认状态的背景图片 */
|
|
background-image: url("../../assets/image-btn-right-normal.png");
|
|
}
|
|
|
|
.right-btn:disabled {
|
|
/* 设置禁用状态的背景图片 */
|
|
background-image: url("../../assets/image-btn-right-disable.png");
|
|
}
|
|
|
|
.right-btn:not(.is-disabled):active {
|
|
/* 设置按下状态的背景图片 */
|
|
background-image: url("../../assets/image-btn-right-press.png");
|
|
}
|
|
|
|
.right-btn:not(.is-disabled):hover {
|
|
/* 设置悬停状态的背景图片 */
|
|
background-image: url("../../assets/image-btn-right-hover.png");
|
|
}
|
|
</style>
|