优化

src/apis/weightManage/weightManage.ts

@@ -30,3 +30,8 @@ export function validateWeighing(data: any) {
 export function vmSend(code: string) {
   return http.get<WeighManageResp>(`/vm/send?msg=${code}`)
 }
+
+/** @desc 获取图片 */
+export function getImg() {
+  return http.get<string>(`/vm/latest-photo`)
+}

src/views/weightManage/index.vue

@@ -74,7 +74,7 @@
               <!-- 图片展示 -->
               <div class="image-placeholder square-image">
                 <img 
-                  :src="img001"
+                  :src="imgData.imgUrl"
                   alt="图片展示"
                   style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
                 />
@@ -274,8 +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 {getImg, getMaterialDetail, validateWeighing, vmSend} from '@/apis/weightManage/weightManage'
-import {getMaterialDetail, validateWeighing, vmSend} from '@/apis/weightManage/weightManage'
 import {type WorkOrderResp, addWorkOrder, getWorkOrder} from '@/apis/workOrder/workOrder'
 import { catchPhoto } from '@/apis/material/materialInfo'
 
@@ -298,10 +297,25 @@ const formData = reactive({
   photoUrl: '', // 样图URL
 })
 
+const imgData = reactive({
+  imgUrl: '', // 样图URL
+})
+
+// 定时器引用
+let pollingInterval = null
+
+// 获取图片的方法
+const getImage = () => {
+
+  getImg().then((res) => {
+    if (res.code === '0') {
+      imgData.imgUrl = res.data?.imgUrl || ''
+    }
+  })
+}
+
 //比对结果
 const compareMatchResult = ref('')
-const imgUrl = ref(img001)
-let updateInterval = null
 
 // 摄像头状态
 const cameraStatus = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected')
@@ -525,17 +539,6 @@ 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) => {
@@ -553,10 +556,7 @@ watch(activeStep, (newVal) => {
 // 组件挂载时
 onMounted(async () => {
   await loadFlvJs()
-  // 初始化图片
+  pollingInterval = setInterval(getImg, 1000)
-  updateImage()
-  // 每秒更新一次
-  updateInterval = setInterval(updateImage, 1000)
 })
 
 // 组件卸载时
@@ -1062,8 +1062,8 @@ const closeWebSocket = () => {
 // 组件卸载时关闭WebSocket连接
 onUnmounted(() => {
   closeWebSocket()
-  if (updateInterval) {
+  if (pollingInterval) {
-    clearInterval(updateInterval)
+    clearInterval(pollingInterval)
   }
 })
 </script>