From 2ebf0d0545230cc26d2604a3d8e3791e9ce50eab Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Mon, 18 Nov 2024 11:23:45 +0800
Subject: [PATCH] =?UTF-8?q?fix(record):=20=E4=BC=98=E5=8C=96=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=92=8C=E8=A7=86=E9=A2=91=E5=8A=A0=E8=BD=BD=E6=9C=BA?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在图片对话框中添加 key 属性，确保每次更新图片 URL 时重新渲染图片元素，避免缓存问题
- 在加载图片清除缓存，确保显示最新的媒体文件
- 更新图片和视频的加载逻辑，使用生产环境接口地址
---
 .../views/record/recordBusbarTemp/index.vue   | 28 +++++++++++++------
 .../recordInspectionCabinet/VideoPlayer.vue   |  8 +++---
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue b/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue
index d9e1d3d..95b2422 100644
--- a/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue
+++ b/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue
@@ -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 {
diff --git a/ruoyi-ui/src/views/record/recordInspectionCabinet/VideoPlayer.vue b/ruoyi-ui/src/views/record/recordInspectionCabinet/VideoPlayer.vue
index 930f2ba..ceba975 100644
--- a/ruoyi-ui/src/views/record/recordInspectionCabinet/VideoPlayer.vue
+++ b/ruoyi-ui/src/views/record/recordInspectionCabinet/VideoPlayer.vue
@@ -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);