fix：增加长病害功能
This commit is contained in:
parent
08d0452704
commit
6f50e97cba
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-22 15:30:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2025-01-08 16:11:18
|
||||
* @LastEditTime: 2025-01-09 15:22:51
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
|
||||
* @Description: 大屏查看图片弹窗
|
||||
-->
|
||||
@ -157,6 +157,17 @@
|
||||
ref="mainImage"
|
||||
@load="updateRects"
|
||||
/>
|
||||
<!-- 进度条 -->
|
||||
<div class="image-progress" v-if="sliderLength">
|
||||
<el-slider
|
||||
v-model="progressIndex"
|
||||
:step="1"
|
||||
:show-tooltip="false"
|
||||
:max="sliderLength"
|
||||
show-stops
|
||||
>
|
||||
</el-slider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小图展示 -->
|
||||
@ -242,6 +253,11 @@ export default {
|
||||
rectItem: [],
|
||||
// 图片病害框的颜色
|
||||
colorList: ["#FFFFFF", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
|
||||
|
||||
// 进度条点击的index
|
||||
progressIndex: 0,
|
||||
// 进度条步长
|
||||
sliderLength: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -255,14 +271,45 @@ export default {
|
||||
this.defectData.length > 0 &&
|
||||
this.defectData.length > this.currentIndex
|
||||
) {
|
||||
// this.showImage(this.currentIndex);
|
||||
const index = this.defectData[this.currentIndex].items.length - 1;
|
||||
if (index !== this.selectedThumbnail) {
|
||||
// 获取当前最大步长
|
||||
this.sliderLength =
|
||||
this.defectData[this.currentIndex]?.items[this.selectedThumbnail]
|
||||
?.children[0]?.children?.length - 1;
|
||||
if (this.sliderLength && this.checkedRectList.length > 0) {
|
||||
// 修改当前画框
|
||||
this.checkedRectList[0].rectPosition = this.defectData[
|
||||
this.currentIndex
|
||||
].items[index].children[0].children[this.progressIndex].rect
|
||||
?.split(",")
|
||||
.map(Number);
|
||||
// 当前展示的图片
|
||||
return this.defectData[this.currentIndex].items[
|
||||
this.selectedThumbnail
|
||||
].children[0].children[this.progressIndex].image;
|
||||
}
|
||||
return this.defectData[this.currentIndex].items[
|
||||
this.selectedThumbnail
|
||||
]?.img;
|
||||
} else {
|
||||
// 获取当前最大步长
|
||||
this.sliderLength =
|
||||
this.defectData[this.currentIndex]?.items[index]?.children[0]
|
||||
?.children?.length - 1;
|
||||
if (this.sliderLength && this.checkedRectList.length > 0) {
|
||||
// 修改当前画框
|
||||
this.checkedRectList[0].rectPosition = this.defectData[
|
||||
this.currentIndex
|
||||
].items[index].children[0].children[this.progressIndex].rect
|
||||
?.split(",")
|
||||
.map(Number);
|
||||
// 修改当前展示的图片
|
||||
return this.defectData[this.currentIndex].items[index].children[0]
|
||||
.children[this.progressIndex].image;
|
||||
}
|
||||
return this.defectData[this.currentIndex].items[index]?.img;
|
||||
}
|
||||
return this.defectData[this.currentIndex].items[index]?.img;
|
||||
}
|
||||
},
|
||||
|
||||
@ -348,7 +395,7 @@ export default {
|
||||
if (this.pageTip > 1) {
|
||||
this.loadMoreTopImages();
|
||||
}
|
||||
}, 500);
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
|
||||
@ -360,6 +407,7 @@ export default {
|
||||
changeImgType(type) {
|
||||
if (this.labelCheck != type) {
|
||||
this.labelCheck = type;
|
||||
this.progressIndex = 0;
|
||||
if (type === "aria") {
|
||||
this.defectData = this.ariaList;
|
||||
if (this.currentIndex > this.ariaList.length - 1) {
|
||||
@ -381,12 +429,12 @@ export default {
|
||||
*/
|
||||
getList() {
|
||||
this.loading = true;
|
||||
const data = {
|
||||
const dataItem = {
|
||||
classType: this.bottomTipClick,
|
||||
...this.imgForm,
|
||||
...this.params,
|
||||
};
|
||||
defeaseList(data)
|
||||
defeaseList(dataItem)
|
||||
.then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.aimList.push(...data.aim);
|
||||
@ -514,6 +562,7 @@ export default {
|
||||
*/
|
||||
showImage(index) {
|
||||
this.currentIndex = index;
|
||||
this.progressIndex = 0;
|
||||
const indexInfo = this.defectData[this.currentIndex]?.items.length - 1;
|
||||
this.selectedThumbnail = indexInfo; // Reset to the first thumbnail when changing the main item
|
||||
this.$nextTick(() => {
|
||||
@ -529,6 +578,7 @@ export default {
|
||||
*/
|
||||
showThumbnailImage(index) {
|
||||
this.selectedThumbnail = index;
|
||||
this.progressIndex = 0;
|
||||
this.updateRects();
|
||||
},
|
||||
|
||||
@ -569,11 +619,6 @@ export default {
|
||||
) {
|
||||
this.loadMoreBottomImages();
|
||||
}
|
||||
// if (this.currentIndex === this.defectData.length - 1) {
|
||||
// this.loadMoreBottomImages();
|
||||
// } else if (this.currentIndex === 0) {
|
||||
// this.loadMoreTopImages();
|
||||
// }
|
||||
}, 100),
|
||||
|
||||
/**
|
||||
@ -626,6 +671,7 @@ export default {
|
||||
if (event.key === "ArrowUp" && !this.loading) {
|
||||
event.preventDefault();
|
||||
if (this.currentIndex > 0) {
|
||||
this.progressIndex = 0;
|
||||
this.currentIndex--;
|
||||
const index = this.defectData[this.currentIndex].items.length - 1;
|
||||
this.selectedThumbnail = index; // Reset when changing main images via keyboard
|
||||
@ -638,6 +684,7 @@ export default {
|
||||
this.currentIndex === this.defectData.length - 1
|
||||
? this.currentIndex
|
||||
: this.currentIndex++;
|
||||
this.progressIndex = 0;
|
||||
const index = this.defectData[this.currentIndex].items.length - 1;
|
||||
this.selectedThumbnail = index; // Reset when changing main images via keyboard
|
||||
this.scrollToCurrentImage();
|
||||
@ -907,6 +954,14 @@ export default {
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条样式
|
||||
.image-progress {
|
||||
width: 100%;
|
||||
padding: 0 15rem;
|
||||
position: absolute;
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user