Merge remote-tracking branch 'refs/remotes/origin/master' into dev

# Conflicts: # src/views/weightManage/index.vue
2026-03-06 18:15:58 +08:00
parent 323a641fa3 f35d64bd91
commit 31178da436
7 changed files with 552 additions and 69 deletions
--- a/src/views/weightManage/index.vue
+++ b/src/views/weightManage/index.vue
@@ -25,19 +25,19 @@
        <div class="main-content">
          <!-- 左侧表单 -->
          <div class="left-section">
-            <a-image  v-if="!formData.photoUrl" :src="formData.photoUrl"/>
+            <a-image v-if="!formData.photoUrl" :src="formData.photoUrl" />
            <img v-else :src="formData.photoUrl" class="sample-image square-image" alt="样图">
-            
+
            <a-form :model="formData" layout="vertical">
              <div class="form-row">
                <div class="form-item">
                  <a-form-item label="物料名称">
-                    <a-input v-model="formData.materialName" placeholder="物料名称" disabled /> 
+                    <a-input v-model="formData.materialName" placeholder="物料名称" disabled />
                  </a-form-item>
                </div>
                <div class="form-item">
                  <a-form-item label="物料规格">
-                    <a-input v-model="formData.materialSpec" placeholder="物料规格" disabled /> 
+                    <a-input v-model="formData.materialSpec" placeholder="物料规格" disabled />
                  </a-form-item>
                </div>
              </div>
@@ -88,7 +88,6 @@
                </div>
              </div>

-
              <div class="info-card">
                <h4>比对结果</h4>
                <div class="info-item">
@@ -110,7 +109,7 @@
        </div>
      </div>

-      <!-- 称重登记页面 -->
+      <!-- 称重登记页面 - 这里放FLV播放器 -->
      <div v-else-if="activeStep === 2" class="step-content">
        <div class="weighing-content">
          <!-- 左侧输入区域 -->
@@ -139,7 +138,43 @@
                <a-input v-model="ahDeviceWeight" placeholder="-" disabled/>
              </div>
            </div>
-            <div class="image-placeholder large-image">实时画面</div>
+
+            <!-- 这里是摄像头画面 - 替换成FLV播放器 -->
+            <div class="video-container large-image">
+              <video
+                ref="cameraVideo"
+                autoplay
+                muted
+                playsinline
+                style="width: 100%; height: 100%; object-fit: cover;"
+              ></video>
+
+              <!-- 加载状态 -->
+              <div v-if="cameraStatus === 'connecting'" class="video-overlay">
+                <a-spin />
+                <span style="margin-left: 8px;">加载中...</span>
+              </div>
+
+              <!-- 错误状态 -->
+              <div v-if="cameraStatus === 'error'" class="video-overlay error">
+                <icon-close-circle-fill style="color: #ff4d4f; font-size: 24px;" />
+                <span>连接失败</span>
+                <a-button size="small" type="primary" @click="reconnectCamera">重试</a-button>
+              </div>
+
+              <!-- 未连接状态 -->
+              <div v-if="cameraStatus === 'disconnected'" class="video-overlay">
+                <icon-pause-circle-fill style="color: #999; font-size: 24px;" />
+                <span>未连接</span>
+                <a-button size="small" type="primary" @click="initCamera">连接</a-button>
+              </div>
+
+              <!-- 摄像头状态标识 -->
+              <div v-if="cameraStatus === 'connected'" class="camera-badge">
+                <span class="live-badge">LIVE</span>
+              </div>
+            </div>
+
            <div class="weighing-actions">
              <a-button type="primary" @click="handleConfirm">确定</a-button>
              <a-button style="margin-left: 12px;" @click="handleReset">重置</a-button>
@@ -236,6 +271,15 @@ import { Modal, Message } from '@arco-design/web-vue'
 import { getMaterialDetail } from "@/apis/weightManage/weightManage";
 import {addWorkOrder, type WorkOrderResp} from "@/apis/workOrder/workOrder";
 import { Notification } from "@arco-design/web-vue"
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
+import { catchPhoto } from '@/apis/material/materialInfo'
+import { getMaterialDetail } from '@/apis/weightManage/weightManage'
+
+defineOptions({ name: 'WeightManage' })
+
+// 动态导入flv.js
+const flvjs = ref<any>(null)

 // 当前步骤
 const activeStep = ref(1)
@@ -249,7 +293,252 @@ const formData = reactive({
  materialSpec: '', // 物料规格
  unitWeight: 0, // 重量
  photoUrl: '', // 样图URL
-  matchResult: '' // 比对结果
+  matchResult: '', // 比对结果
+})
+
+// 摄像头状态
+const cameraStatus = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected')
+
+// 视频元素引用
+const cameraVideo = ref<HTMLVideoElement | null>(null)
+
+// FLV播放器实例
+let player: any = null
+
+const reconnectCount = ref(0)
+const maxReconnectAttempts = 5
+const reconnectTimer = ref<any>(null)
+
+// 直接写死FLV流地址（根据你的实际地址修改）
+const FLV_URL = 'http://192.168.2.87:8866/live?url=rtsp://admin:admin%40123@192.168.2.59:554/media/video1' // 摄像头的FLV地址
+
+// 加载flv.js
+const loadFlvJs = async () => {
+  if (typeof window !== 'undefined') {
+    const module = await import('flv.js')
+    flvjs.value = module.default
+  }
+}
+
+// 初始化摄像头
+const initCamera = () => {
+  if (!cameraVideo.value || !flvjs.value) {
+    return
+  }
+
+  // 检查浏览器支持
+  if (!flvjs.value.isSupported()) {
+    Message.error('当前浏览器不支持FLV播放')
+    cameraStatus.value = 'error'
+    return
+  }
+
+  cameraStatus.value = 'connecting'
+
+  // 清除之前的重连定时器
+  if (reconnectTimer.value) {
+    clearTimeout(reconnectTimer.value)
+    reconnectTimer.value = null
+  }
+
+  try {
+    // 销毁旧的播放器
+    if (player) {
+      player.destroy()
+      player = null
+    }
+
+    // 创建新的播放器
+    player = flvjs.value.createPlayer({
+      type: 'flv',
+      url: FLV_URL,
+      isLive: true,
+      hasAudio: false,
+      hasVideo: true,
+      enableStashBuffer: false,
+      stashInitialSize: 128,
+      enableWorker: true,
+      autoCleanupSourceBuffer: true,
+    })
+
+    // 绑定视频元素
+    player.attachMediaElement(cameraVideo.value)
+
+    // 加载并播放
+    player.load()
+    player.play().then(() => {
+      cameraStatus.value = 'connected'
+      reconnectCount.value = 0 // 连接成功，重置重连计数
+    }).catch((error: any) => {
+      cameraStatus.value = 'error'
+      Message.error('摄像头播放失败,正在重连')
+      // 触发自动重连
+      handleReconnect()
+    })
+
+    // 监听各种事件
+    player.on(flvjs.value.Events.ERROR, (err: any) => {
+      cameraStatus.value = 'error'
+      // 触发自动重连
+      handleReconnect()
+    })
+
+    player.on(flvjs.value.Events.STALLED, () => {
+      // 可以在这里处理卡顿，但不立即重连
+    })
+
+    player.on(flvjs.value.Events.RECOVERED_EARLY, () => {
+      if (cameraStatus.value !== 'connected') {
+        cameraStatus.value = 'connected'
+      }
+    })
+  } catch (error) {
+    cameraStatus.value = 'error'
+    handleReconnect()
+  }
+}
+
+// 处理自动重连
+const handleReconnect = () => {
+  // 只有当前在称重页面才重连
+  if (activeStep.value !== 2) return
+
+  // 检查重连次数
+  if (reconnectCount.value >= maxReconnectAttempts) {
+    Message.error('摄像头连接失败，请手动重试')
+    return
+  }
+
+  // 增加重连计数
+  reconnectCount.value++
+
+  // 计算重连延迟（指数退避）
+  const delay = Math.min(1000 * 2 ** (reconnectCount.value - 1), 30000)
+
+  // 清除旧的定时器
+  if (reconnectTimer.value) {
+    clearTimeout(reconnectTimer.value)
+  }
+
+  // 设置新的重连定时器
+  reconnectTimer.value = setTimeout(() => {
+    initCamera()
+  }, delay)
+}
+
+// 重新连接摄像头（手动）
+const reconnectCamera = () => {
+  reconnectCount.value = 0 // 手动重连时重置计数
+  initCamera()
+}
+
+// 添加一个定时检查状态的函数
+const checkCameraStatus = () => {
+  if (!player || !cameraVideo.value) return
+
+  try {
+    // 检查播放器状态
+    if (player.isPlaying && !player.isPlaying()) {
+      if (cameraStatus.value === 'connected') {
+        cameraStatus.value = 'error'
+        handleReconnect()
+      }
+    }
+  } catch (error) {
+  }
+}
+
+// 启动状态检查定时器
+let statusCheckTimer: any = null
+
+// 监听步骤变化
+watch(activeStep, (newVal) => {
+  if (newVal === 2) {
+    // 进入称重登记页面，启动摄像头
+    reconnectCount.value = 0 // 重置重连计数
+    nextTick(() => {
+      initCamera()
+    })
+
+    // 启动状态检查（每30秒检查一次）
+    statusCheckTimer = setInterval(checkCameraStatus, 30000)
+  } else {
+    // 离开称重登记页面，停止摄像头和定时器
+    stopCamera()
+    if (statusCheckTimer) {
+      clearInterval(statusCheckTimer)
+      statusCheckTimer = null
+    }
+    if (reconnectTimer.value) {
+      clearTimeout(reconnectTimer.value)
+      reconnectTimer.value = null
+    }
+    reconnectCount.value = 0
+  }
+})
+
+// 组件卸载时清理所有定时器
+onBeforeUnmount(() => {
+  stopCamera()
+  if (statusCheckTimer) {
+    clearInterval(statusCheckTimer)
+    statusCheckTimer = null
+  }
+  if (reconnectTimer.value) {
+    clearTimeout(reconnectTimer.value)
+    reconnectTimer.value = null
+  }
+})
+
+// 重新连接摄像头
+// const reconnectCamera = () => {
+//   if (player) {
+//     player.unload()
+//     player.detachMediaElement()
+//     player.destroy()
+//     player = null
+//   }
+//   setTimeout(() => initCamera(), 1000)
+// }
+
+// 停止摄像头
+const stopCamera = () => {
+  if (player) {
+    player.pause()
+    player.unload()
+    player.detachMediaElement()
+    player.destroy()
+    player = null
+    cameraStatus.value = 'disconnected'
+  }
+  if (reconnectTimer.value) {
+    clearTimeout(reconnectTimer.value)
+    reconnectTimer.value = null
+  }
+  reconnectCount.value = 0
+}
+
+// 监听步骤变化
+watch(activeStep, (newVal) => {
+  if (newVal === 2) {
+    // 进入称重登记页面，启动摄像头
+    nextTick(() => {
+      initCamera()
+    })
+  } else {
+    // 离开称重登记页面，停止摄像头
+    stopCamera()
+  }
+})
+
+// 组件挂载时
+onMounted(async () => {
+  await loadFlvJs()
+})
+
+// 组件卸载时
+onBeforeUnmount(() => {
+  stopCamera()
 })

 const workOrderResp = ref<WorkOrderResp>({
@@ -311,9 +600,23 @@ const columns = [
  },
  {
    title: '抓拍图片',
-    dataIndex: 'imgUrl',
-    key: 'imgUrl',
-    className: 'green-bg'
+    dataIndex: 'image',
+    key: 'image',
+    className: 'green-bg',
+    // 使用自定义渲染
+    render: ({ record }) => {
+      if (record.image && record.image !== '未抓拍') {
+        return h('div', { class: 'image-preview' }, [
+          h('img', {
+            src: record.image,
+            alt: '抓拍图片',
+            style: 'width: 60px; height: 45px; object-fit: cover; border-radius: 4px; cursor: pointer;',
+            onClick: () => previewImage(record.image),
+          }),
+        ])
+      }
+      return h('span', record.image || '-')
+    },
  },
  {
    title: '操作',
@@ -323,8 +626,6 @@ const columns = [
  }
 ]

-
-
 // 防抖函数
 const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): ((...args: Parameters<T>) => void) => {
  let timer: ReturnType<typeof setTimeout> | null = null;
@@ -340,7 +641,7 @@ const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): ((
 const originalHandleMaterialCodeChange = async () => {
  // 确保输入框内容是完整的物料编码
  const materialCode = formData.inputMaterialCode?.trim();
-  
+
  // 无论是否有输入，先重置所有物料相关字段，确保新数据能完全覆盖旧数据
  formData.encoding = "";
  formData.materialName = "";
@@ -348,7 +649,7 @@ const originalHandleMaterialCodeChange = async () => {
  formData.unitWeight = 0;
  formData.photoUrl = "";
  formData.matchResult = "";
-  
+
  // 如果有物料编码输入，获取物料数据
  if (materialCode) {
    try {
@@ -369,7 +670,7 @@ let previousInput = '';
 const handleKeyDown = (event: KeyboardEvent) => {
  // 获取当前时间
  const currentTime = Date.now();
-  
+
  // 如果输入速度非常快（小于100ms），认为是扫码枪输入
  if (currentTime - lastInputTime < 100 && formData.inputMaterialCode) {
    // 扫码枪通常会以回车键结束，这里不做处理
@@ -378,7 +679,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
    // 这样可以确保每次扫码都从空输入框开始
    formData.inputMaterialCode = '';
  }
-  
+
  // 更新上次输入时间
  lastInputTime = currentTime;
 };
@@ -501,7 +802,7 @@ const handleConfirm = () => {
    Message.error('电子秤称重结果为空！')
    return
  }
-  
+
  // 生成新的列表数据
  const newItem = {
    key: (weighingList.value.length + 1).toString(),
@@ -510,7 +811,7 @@ const handleConfirm = () => {
    quantity: inputQuantity.value,
    weight: ahDeviceWeight.value,
    calculatedWeight: calculatedWeight.value,
-    imgUrl: '图片'
+    image: captureUrl || '未抓拍',
  }
  // 添加到列表
  weighingList.value.push(newItem)
@@ -520,6 +821,65 @@ const handleConfirm = () => {
  calculatedWeight.value = ''
  // 称重次数累加
  weighingCount.value = weighingList.value.length + 1
+  Message.success('添加成功')
+}
+
+// 抓拍功能 - 内部方法，不暴露按钮
+const capturePhoto = async (): Promise<string> => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const video = cameraVideo.value
+      if (!video) {
+        reject(new Error('视频未初始化'))
+        return
+      }
+
+      // 创建canvas抓取当前帧
+      const canvas = document.createElement('canvas')
+      canvas.width = video.videoWidth || 640
+      canvas.height = video.videoHeight || 480
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+
+      // 转换为Blob
+      const blob = await new Promise<Blob>((resolve) => {
+        canvas.toBlob((b) => resolve(b), 'image/jpeg', 0.9)
+      })
+
+      // 创建FormData
+      const formData = new FormData()
+      formData.append('file', blob, `capture_${Date.now()}.jpg`)
+
+      // 调用后端接口
+      const response = await catchPhoto(formData)
+      if (!response.code === '200') {
+        reject(new Error('上传失败'))
+        return
+      }
+
+      const imageUrl = await response.data
+      resolve(imageUrl)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 图片预览函数
+const previewImage = (url: string) => {
+  // 使用Arco Design的图片预览组件
+  Modal.info({
+    title: '图片预览',
+    content: () => h('div', { style: 'text-align: center;' }, [
+      h('img', {
+        src: url,
+        style: 'max-width: 100%; max-height: 500px; object-fit: contain;',
+      }),
+    ]),
+    okText: '关闭',
+    hideCancel: true,
+    width: 'auto',
+  })
 }

 // 处理重置
@@ -547,11 +907,11 @@ const establishWebSocket = () => {
    // 这里替换为实际的WebSocket服务器地址
    const wsUrl = 'ws://localhost:6609/ws/scale'
    ws.value = new WebSocket(wsUrl)
-    
+
    ws.value.onopen = () => {
      Message.success('已和电子秤建立连接')
    }
-    
+
    ws.value.onmessage = (event) => {
      try {
        if (event.data) {
@@ -561,11 +921,11 @@ const establishWebSocket = () => {
        console.error('WebSocket消息解析失败:', error)
      }
    }
-    
+
    ws.value.onclose = () => {
      wsConnected.value = false
    }
-    
+
    ws.value.onerror = (error) => {
      console.error('WebSocket错误:', error)
      wsConnected.value = false
@@ -719,10 +1079,68 @@ defineOptions({ name: 'WeightManage' })
  font-weight: bold;
 }

+/* 视频容器 - 替换原来的image-placeholder */
+.video-container {
+  position: relative;
+  width: 100%;
+  height: 240px;
+  background: #000;
+  border-radius: 4px;
+  overflow: hidden;
+  margin: 20px 0;
+}
+
+.video-container video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  gap: 10px;
+}
+
+.video-overlay.error {
+  background: rgba(255, 77, 79, 0.2);
+}
+
+.camera-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+}
+
+.live-badge {
+  background: #ff4d4f;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+
 .large-image {
  width: 100%;
-  height: 200px;
-  margin: 20px 0;
+  height: 240px;
 }

 .input-placeholder {