diff --git a/src/views/weightManage/index.vue b/src/views/weightManage/index.vue index 3483a57..2858395 100644 --- a/src/views/weightManage/index.vue +++ b/src/views/weightManage/index.vue @@ -71,37 +71,13 @@
- -
- - - -
- - 加载中... -
- - -
- - 连接失败 - 重试 -
- - -
- - 未连接 - 连接 -
- - -
- LIVE -
+ +
+ 图片展示
@@ -327,16 +303,9 @@ const compareMatchResult = ref('') // 摄像头状态 const cameraStatus = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected') -const camera1Status = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected') // 视频元素引用 const cameraVideo = ref(null) -// 相机1使用canvas元素 -const camera1Canvas = ref(null) - -// 相机1 WebSocket连接 -const camera1Ws = ref(null) -const camera1WsConnected = ref(false) // FLV播放器实例 let player: any = null @@ -556,12 +525,7 @@ const stopCamera = () => { // 监听步骤变化 watch(activeStep, (newVal) => { - if (newVal === 1) { - // 进入扫码核验页面,启动相机1 - nextTick(() => { - initCamera1() - }) - } else if (newVal === 2) { + if (newVal === 2) { // 进入称重登记页面,启动摄像头 nextTick(() => { initCamera() @@ -569,17 +533,12 @@ watch(activeStep, (newVal) => { } else { // 离开相关页面,停止摄像头 stopCamera() - closeCamera1WebSocket() } }) // 组件挂载时 onMounted(async () => { await loadFlvJs() - // 如果当前是扫码核验页面,初始化相机1 - if (activeStep.value === 1) { - initCamera1() - } }) // 组件卸载时 @@ -823,129 +782,21 @@ const handleNext = async () => { Message.error('比对失败,请重试') } } else { - activeStep.value++ - // 进入称重页面时建立WebSocket连接 - if (activeStep.value === 2) { - establishWebSocket() - } - } - } -} - -// 初始化相机1 WebSocket连接 -const initCamera1 = () => { - camera1Status.value = 'connecting' - - try { - const wsUrl = 'ws://localhost:6609/ws/camera' - camera1Ws.value = new WebSocket(wsUrl) - - camera1Ws.value.onopen = () => { - camera1Status.value = 'connected' - camera1WsConnected.value = true - Message.success('已和相机1建立连接') - } - - // 修改前端代码,处理黑白相机的视频流数据 - // 修改前端代码,处理压缩后的JPEG图像数据 - camera1Ws.value.onmessage = (event) => { - try { - if (camera1Canvas.value && event.data instanceof Blob) { - // 处理二进制图像数据 - const reader = new FileReader(); - reader.onload = (e) => { - if (e.target && e.target.result) { - const arrayBuffer = e.target.result; - const uint8Array = new Uint8Array(arrayBuffer); - - // 解析消息格式: [width(4 bytes)][height(4 bytes)][image data] - if (uint8Array.length < 8) { - console.error('相机1 WebSocket消息格式错误: 数据长度不足'); - return; - } - - // 读取宽度和高度(小端序) - const width = uint8Array[0] | (uint8Array[1] << 8) | (uint8Array[2] << 16) | (uint8Array[3] << 24); - const height = uint8Array[4] | (uint8Array[5] << 8) | (uint8Array[6] << 16) | (uint8Array[7] << 24); - - // 检查宽度和高度是否合理 - if (width <= 0 || height <= 0 || width > 4096 || height > 4096) { - console.error('相机1 WebSocket消息格式错误: 无效的图像尺寸'); - return; - } - - // 提取压缩的图像数据 - const imageDataStart = 8; - const imageData = uint8Array.subarray(imageDataStart); - - // 创建Blob对象并转换为URL - const blob = new Blob([imageData], { type: 'image/jpeg' }); - const imageUrl = URL.createObjectURL(blob); - - // 创建Image对象并显示 - const img = new Image(); - img.onload = () => { - // 设置canvas尺寸 - camera1Canvas.value.width = width; - camera1Canvas.value.height = height; - - // 获取canvas上下文 - const ctx = camera1Canvas.value.getContext('2d'); - if (ctx) { - // 绘制图像 - ctx.drawImage(img, 0, 0, width, height); - } - - // 释放URL对象 - URL.revokeObjectURL(imageUrl); - }; - img.onerror = () => { - console.error('图像加载失败'); - URL.revokeObjectURL(imageUrl); - }; - img.src = imageUrl; + activeStep.value++ + // 进入称重页面时建立WebSocket连接 + if (activeStep.value === 2) { + establishWebSocket() + // 离开扫码核验页面时,清除图片刷新定时器 + if (imageRefreshTimer) { + clearInterval(imageRefreshTimer) + imageRefreshTimer = null } - }; - reader.readAsArrayBuffer(event.data); + } } - } catch (error) { - console.error('相机1 WebSocket消息解析失败:', error) - } - } - - - camera1Ws.value.onclose = () => { - camera1Status.value = 'disconnected' - camera1WsConnected.value = false - } - - camera1Ws.value.onerror = (error) => { - console.error('相机1 WebSocket错误:', error) - camera1Status.value = 'error' - Message.error('相机1连接失败') - } - } catch (error) { - console.error('建立相机1 WebSocket连接失败:', error) - camera1Status.value = 'error' - Message.error('无法建立相机1连接') } } -// 重新连接相机1 -const reconnectCamera1 = () => { - closeCamera1WebSocket() - setTimeout(() => initCamera1(), 1000) -} -// 关闭相机1 WebSocket连接 -const closeCamera1WebSocket = () => { - if (camera1Ws.value) { - camera1Ws.value.close() - camera1Ws.value = null - camera1WsConnected.value = false - camera1Status.value = 'disconnected' - } -} // 处理上一步 const handlePrevious = () => { @@ -955,6 +806,10 @@ const handlePrevious = () => { if (activeStep.value !== 2) { closeWebSocket() } + // 进入扫码核验页面时,启动图片自动刷新 + if (activeStep.value === 1) { + startImageRefresh() + } } } @@ -1198,7 +1053,11 @@ const closeWebSocket = () => { // 组件卸载时关闭WebSocket连接 onUnmounted(() => { closeWebSocket() - closeCamera1WebSocket() + // 清除图片刷新定时器 + if (imageRefreshTimer) { + clearInterval(imageRefreshTimer) + imageRefreshTimer = null + } }) @@ -1283,7 +1142,6 @@ onUnmounted(() => { /* 主内容区域 */ .main-content { display: flex; - align-items: flex-start; margin-bottom: 30px; } @@ -1336,7 +1194,7 @@ onUnmounted(() => { background: #000; border-radius: 4px; overflow: hidden; - margin-bottom: 20px; + margin: 20px 0; } .video-container video {