优化

src/views/weightManage/index.vue

@@ -74,7 +74,7 @@
               <!-- 图片展示 -->
               <div class="image-placeholder square-image">
                 <img 
-                  src="@/assets/images/001.bmp"
+                  :src="img001"
                   alt="图片展示"
                   style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
                 />
@@ -274,7 +274,7 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { Message, Modal, Notification } from '@arco-design/web-vue'
-
+import img001 from "@/assets/images/001.bmp"
 import {getMaterialDetail, validateWeighing, vmSend} from '@/apis/weightManage/weightManage'
 import {type WorkOrderResp, addWorkOrder, getWorkOrder} from '@/apis/workOrder/workOrder'
 import { catchPhoto } from '@/apis/material/materialInfo'
@@ -300,6 +300,8 @@ const formData = reactive({
 
 //比对结果
 const compareMatchResult = ref('')
+const imgUrl = ref(img001)
+let updateInterval = null
 
 // 摄像头状态
 const cameraStatus = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected')
@@ -523,6 +525,18 @@ const stopCamera = () => {
   reconnectCount.value = 1
 }
 
+// 强制重新加载图片
+const updateImage = () => {
+  // 创建一个新的Image对象来预加载图片
+  const img = new Image()
+  img.onload = () => {
+    // 图片加载完成后更新src
+    imgUrl.value = img.src
+  }
+  // 使用固定地址，但通过创建新Image对象来绕过缓存
+  img.src = new URL('@/assets/images/001.bmp', import.meta.url).href
+}
+
 // 监听步骤变化
 watch(activeStep, (newVal) => {
   if (newVal === 2) {
@@ -539,6 +553,10 @@ watch(activeStep, (newVal) => {
 // 组件挂载时
 onMounted(async () => {
   await loadFlvJs()
+  // 初始化图片
+  updateImage()
+  // 每秒更新一次
+  updateInterval = setInterval(updateImage, 1000)
 })
 
 // 组件卸载时
@@ -1044,11 +1062,9 @@ const closeWebSocket = () => {
 // 组件卸载时关闭WebSocket连接
 onUnmounted(() => {
   closeWebSocket()
-  // 清除图片刷新定时器
+  if (updateInterval) {
-  // if (imageRefreshTimer) {
+    clearInterval(updateInterval)
-  //   clearInterval(imageRefreshTimer)
+  }
-  //   imageRefreshTimer = null
-  // }
 })
 </script>