fix(record): 优化图片和视频加载机制

- 在图片对话框中添加 key 属性,确保每次更新图片 URL 时重新渲染图片元素,避免缓存问题
- 在加载图片清除缓存,确保显示最新的媒体文件
- 更新图片和视频的加载逻辑,使用生产环境接口地址
IOT
zch 3 months ago
parent 9831363091
commit 2ebf0d0545

@ -351,13 +351,14 @@
<!-- 图片显示对话框 -->
<!-- 上面的图像是 2688x1520下面的图像是 1920x1080-->
<!-- 通过增加key属性来确保每次图片URL更新时Vue都会重新渲染图片元素从而避免显示旧的缓存图片 -->
<el-dialog :title="photoTitle" :visible.sync="photoOpen" width="800px" append-to-body>
<div class="dialog-content">
<div class="image-container">
<img :src="visiblePhoto" alt="显示图片" />
<div class="image-container" v-if="visiblePhoto">
<img :src="visiblePhoto" alt="显示可见光图片" v-show="photoOpen" :key="visiblePhotoKey" />
</div>
<div class="image-container">
<img :src="thermalPhoto" alt="显示图片" />
<div class="image-container" v-if="thermalPhoto">
<img :src="thermalPhoto" alt="显示热成像图片" v-show="photoOpen" :key="thermalPhotoKey" />
</div>
</div>
</el-dialog>
@ -455,6 +456,8 @@ export default {
},
visiblePhoto: '',
thermalPhoto: '',
thermalPhotoKey: 0,//使key
visiblePhotoKey: 0,//使key
};
},
created() {
@ -563,20 +566,27 @@ export default {
if(row.filePath){
const filePath = row.filePath ;
//TODO:
const thermalResponse = `/dev-api/record/recordBusbarTemp/getVisiblePhoto/${filePath}`;
//
this.thermalPhoto = null;
this.visiblePhoto = null;
//TODO:
/* const thermalResponse = `/dev-api/record/recordBusbarTemp/getVisiblePhoto/${filePath}`;
this.thermalPhoto = thermalResponse;
const visibleResponse = `/dev-api/record/recordBusbarTemp/getThermalPhoto/${filePath}`;
this.visiblePhoto = visibleResponse;
/* const thermalResponse = `/prod-api/record/recordBusbarTemp/getVisiblePhoto/${filePath}`
this.visiblePhoto = visibleResponse;*/
const thermalResponse = `/prod-api/record/recordBusbarTemp/getVisiblePhoto/${filePath}`
this.thermalPhoto = thermalResponse;
const visibleResponse = `/prod-api/record/recordBusbarTemp/getThermalPhoto/${filePath}`
this.visiblePhoto = visibleResponse;*/
this.visiblePhoto = visibleResponse;
/* const thermalResponse = getVisiblePhoto(filePath);
this.thermalPhoto = thermalResponse;
const visibleResponse = getThermalPhoto(filePath);
this.visiblePhoto = visibleResponse;*/
this.thermalPhotoKey++; // key
this.visiblePhotoKey++; // key
this.photoOpen = true;
this.photoTitle = row.filePath + "图片显示";
}else {

@ -27,15 +27,15 @@ export default {
const filePath = this.$route.query.filePath;
try {
//TODO:
/* TODO:
const thermalResponse = `/dev-api/record/recordInspectionCabinet/getThermalVideo/${filePath}`;
this.thermalVideoUrl = thermalResponse;
const visibleResponse = `/dev-api/record/recordInspectionCabinet/getVisibleVideo/${filePath}`;
this.visibleVideoUrl = visibleResponse;
/* const thermalResponse = `/prod-api/record/recordInspectionCabinet/getThermalVideo/${filePath}`;
this.visibleVideoUrl = visibleResponse;*/
const thermalResponse = `/prod-api/record/recordInspectionCabinet/getThermalVideo/${filePath}`;
this.thermalVideoUrl = thermalResponse;
const visibleResponse = `/prod-api/record/recordInspectionCabinet/getVisibleVideo/${filePath}`;
this.visibleVideoUrl = visibleResponse;*/
this.visibleVideoUrl = visibleResponse;
/* const thermalResponse = getThermalVideo(filePath);
this.thermalVideoUrl = thermalResponse;
const visibleResponse= getVisibleVideo(filePath);

Loading…
Cancel
Save