fix:修改合并弹窗中放大图片样式,修改病害确认中查看图片样式

This commit is contained in:
SunTao 2025-01-06 15:26:39 +08:00
parent fa6b90408c
commit 04a62cbd68
2 changed files with 40 additions and 9 deletions

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-22 15:30:25 * @Date: 2024-10-22 15:30:25
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-27 17:11:58 * @LastEditTime: 2025-01-06 15:21:22
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
* @Description: 大屏查看图片弹窗 * @Description: 大屏查看图片弹窗
--> -->
@ -346,9 +346,12 @@ export default {
*/ */
initBodySize() { initBodySize() {
this.initWidth = this.$refs.imageView.clientWidth; // this.initWidth = this.$refs.imageView.clientWidth; //
this.initHeight = this.initWidth * ((1080 * 0.31) / (1920 - 1080 * 0.02)); // this.initHeight =
this.elWidth = this.initWidth * (100 / (1920 / 1.2)); this.initWidth *
this.elHeight = this.initHeight * (100 / (1080 / 2.15)); ((window.screen.height * 0.31) /
(window.screen.width - window.screen.height * 0.02)); //
this.elWidth = this.initWidth * (100 / (window.screen.width / 1.2));
this.elHeight = this.initHeight * (100 / (window.screen.height / 2.15));
}, },
/** /**
@ -370,8 +373,10 @@ export default {
this.scale = 1; this.scale = 1;
return; return;
} }
this.elWidth = this.initWidth * (100 / (1920 / 1.2)) * this.zoom; this.elWidth =
this.elHeight = this.initHeight * (100 / (1080 / 2)) * this.zoom; this.initWidth * (100 / (window.screen.width / 1.2)) * this.zoom;
this.elHeight =
this.initHeight * (100 / (window.screen.height / 2)) * this.zoom;
// //
this.$nextTick(() => { this.$nextTick(() => {
const container = this.$refs.imageContainer; const container = this.$refs.imageContainer;

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-11-04 10:54:59 * @Date: 2024-11-04 10:54:59
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-04 17:25:42 * @LastEditTime: 2025-01-06 13:18:09
* @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\components\merge-dialog.vue * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\components\merge-dialog.vue
* @Description: 病害管理-合并病害弹窗 * @Description: 病害管理-合并病害弹窗
--> -->
@ -206,7 +206,7 @@
<el-dialog <el-dialog
title="查看图片" title="查看图片"
:visible.sync="showImageDialog" :visible.sync="showImageDialog"
width="75rem" width="85rem"
append-to-body append-to-body
destroy-on-close destroy-on-close
@close="imgCancel" @close="imgCancel"
@ -224,6 +224,21 @@
class="rect-overlay" class="rect-overlay"
:style="getRectStyle(rect)" :style="getRectStyle(rect)"
></div> ></div>
<div class="rect-image">
采集时间:
{{
new Date(currentImageItem.createdTime).toLocaleString()
}}
起始桩号 {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号
{{ currentImageItem.stakeEnd || "暂无数据" }}
病害类型
{{ currentImageItem.defectTypeName || "暂无数据" }}
病害面积{{ currentImageItem.targetArea }}平方米 病害长度{{
currentImageItem.targetLen * 1 <= 0
? "暂无数据"
: `${currentImageItem.targetLen}`
}}
</div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -538,6 +553,7 @@ export default {
width: 100%; width: 100%;
height: 80%; height: 80%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
@ -554,4 +570,14 @@ export default {
pointer-events: none; pointer-events: none;
border: 2px solid red; 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);
}
</style> </style>