称重抓取

2026-03-06 18:03:28 +08:00
parent 15ce1cfa13
commit f35d64bd91
6 changed files with 610 additions and 125 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
        "crypto-js": "^4.2.0",
        "dayjs": "^1.11.4",
        "echarts": "^5.4.2",
+        "flv.js": "^1.6.2",
        "jsencrypt": "^3.3.2",
        "lint-staged": "^15.2.10",
        "lodash-es": "^4.17.21",
@@ -6560,6 +6561,12 @@
        "es6-symbol": "^3.1.1"
      }
    },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
    "node_modules/es6-symbol": {
      "version": "3.1.4",
      "resolved": "https://registry.npmmirror.com/es6-symbol/-/es6-symbol-3.1.4.tgz",
@@ -8254,6 +8261,16 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/flv.js": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
+      "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "es6-promise": "^4.2.8",
+        "webworkify-webpack": "^2.1.5"
+      }
+    },
    "node_modules/follow-redirects": {
      "version": "1.15.9",
      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -16043,6 +16060,12 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
+      "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==",
+      "license": "MIT"
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.4",
    "echarts": "^5.4.2",
+    "flv.js": "^1.6.2",
    "jsencrypt": "^3.3.2",
    "lint-staged": "^15.2.10",
    "lodash-es": "^4.17.21",
--- a/src/apis/material/materialInfo.ts
+++ b/src/apis/material/materialInfo.ts
@@ -78,7 +78,12 @@ export function importMaterial(data: any) {
  return http.post(`${BASE_URL}/import`, data)
 }

-/** @desc 解析物料信息导入数据 */
+/** @desc 物料照片批量导入数据 */
 export function uploadMaterialPhotos(data: FormData) {
  return http.post(`${BASE_URL}/import/uploadMaterialPhotos`, data)
 }
+
+/** @desc 物料照片抓取数据 */
+export function catchPhoto(data: FormData) {
+  return http.post(`${BASE_URL}/import/catch`, data)
+}
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -18,7 +18,6 @@ declare module 'vue' {
    ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
    ACol: typeof import('@arco-design/web-vue')['Col']
    AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
-    ADatePicker: typeof import('@arco-design/web-vue')['DatePicker']
    ADescriptions: typeof import('@arco-design/web-vue')['Descriptions']
    ADescriptionsItem: typeof import('@arco-design/web-vue')['DescriptionsItem']
    ADivider: typeof import('@arco-design/web-vue')['Divider']
@@ -37,17 +36,13 @@ declare module 'vue' {
    AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
    AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
    ALayout: typeof import('@arco-design/web-vue')['Layout']
-    ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
    ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
    ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
    ALink: typeof import('@arco-design/web-vue')['Link']
    AMenu: typeof import('@arco-design/web-vue')['Menu']
    AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
    AModal: typeof import('@arco-design/web-vue')['Modal']
-    AOption: typeof import('@arco-design/web-vue')['Option']
    AOverflowList: typeof import('@arco-design/web-vue')['OverflowList']
-    APagination: typeof import('@arco-design/web-vue')['Pagination']
-    APopconfirm: typeof import('@arco-design/web-vue')['Popconfirm']
    APopover: typeof import('@arco-design/web-vue')['Popover']
    AProgress: typeof import('@arco-design/web-vue')['Progress']
    ARadio: typeof import('@arco-design/web-vue')['Radio']
@@ -57,6 +52,7 @@ declare module 'vue' {
    AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
    ASelect: typeof import('@arco-design/web-vue')['Select']
    ASpace: typeof import('@arco-design/web-vue')['Space']
+    ASpin: typeof import('@arco-design/web-vue')['Spin']
    AStatistic: typeof import('@arco-design/web-vue')['Statistic']
    ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
    ASwitch: typeof import('@arco-design/web-vue')['Switch']
@@ -70,7 +66,6 @@ declare module 'vue' {
    ATreeSelect: typeof import('@arco-design/web-vue')['TreeSelect']
    ATrigger: typeof import('@arco-design/web-vue')['Trigger']
    ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph']
-    ATypographyTitle: typeof import('@arco-design/web-vue')['TypographyTitle']
    AUpload: typeof import('@arco-design/web-vue')['Upload']
    Avatar: typeof import('./../components/Avatar/index.vue')['default']
    AWatermark: typeof import('@arco-design/web-vue')['Watermark']
--- a/src/views/material/index.vue
+++ b/src/views/material/index.vue
@@ -12,6 +12,7 @@
        :disabled-column-keys="['name']"
        @refresh="search"
    >
+      <!-- toolbar 部分保持不变 -->
      <template #toolbar-left>
        <a-input-search v-model="queryForm.materialName" placeholder="请输入物料名称" allow-clear @search="search" />
        <a-input-search v-model="queryForm.encoding" placeholder="请输入物料编码" allow-clear @search="search" />
@@ -38,18 +39,31 @@
          <template #default>照片批量导入</template>
        </a-button>
      </template>
+
+      <!-- 【修改点】照片列插槽 -->
      <template #photoUrl="{ record }">
        <div class="photo-container">
+          <!-- 1. 正常显示图片：有地址 且 未标记为错误 -->
          <img
-            v-if="record.photoUrl"
+              v-if="record.photoUrl && !record.photoLoadError"
              :src="record.photoUrl"
              alt="物料照片"
              class="material-photo"
-            @error="handleImgError($event)"
+              @load="handleImgLoad(record)"
+              @error="handleImgError(record, $event)"
          />
-          <span v-else class="no-photo">暂无照片</span>
+
+          <!-- 2. 无地址 -->
+          <span v-else-if="!record.photoUrl" class="no-photo">暂无照片</span>
+
+          <!-- 3. 地址存在但加载失败 -->
+          <span v-else class="photo-error">
+            <icon-exclamation-circle-fill class="error-icon" />
+            照片异常
+          </span>
        </div>
      </template>
+
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['admin:materialInfo:update']" title="修改" @click="onUpdate(record)">修改</a-link>
@@ -73,6 +87,7 @@
 </template>

 <script setup lang="ts">
+// ... 保持原有的 import 不变
 import MaterialInfoAddModal from './MaterialInfoAddModal.vue'
 import MaterialInfoImportDrawer from './MaterialInfoImportDrawer.vue'
 import PhotosImport from '@/views/material/PhotosImport.vue';
@@ -84,6 +99,12 @@ import has from '@/utils/has'

 defineOptions({ name: 'MaterialInfo' })

+// 扩展类型定义，允许动态添加 photoLoadError 属性
+// 如果 TS 报错，可以在 MaterialInfoResp 接口定义中添加 photoLoadError?: boolean;
+interface MaterialInfoRespWithStatus extends MaterialInfoResp {
+  photoLoadError?: boolean;
+}
+
 const queryForm = reactive<MaterialInfoQuery>({
  materialName: undefined,
  encoding: undefined,
@@ -97,6 +118,7 @@ const {
  search,
  handleDelete,
 } = useTable((page) => listMaterialInfo({ ...queryForm, ...page }), { immediate: true })
+
 const columns = ref<TableInstanceColumns[]>([
  { title: '物料名称', dataIndex: 'materialName', slotName: 'materialName' },
  { title: '物料编码', dataIndex: 'encoding', slotName: 'encoding' },
@@ -116,14 +138,12 @@ const columns = ref<TableInstanceColumns[]>([
  },
 ])

-// 重置
 const reset = () => {
  queryForm.materialName = undefined
  queryForm.encoding = undefined
  search()
 }

-// 删除
 const onDelete = (record: MaterialInfoResp) => {
  return handleDelete(() => deleteMaterialInfo(record.id), {
    content: `是否确定删除该条数据？`,
@@ -131,25 +151,26 @@ const onDelete = (record: MaterialInfoResp) => {
  })
 }

-// 导出
 const onExport = () => {
  useDownload(() => exportMaterialInfo(queryForm))
 }

-// 图片加载失败处理函数（新增）
-const handleImgError = (e: Event) => {
-  // 替换为你的默认图片地址（建议放在/static目录下）
-  const target = e.target as HTMLImageElement
-  target.src = '/static/images/default-material.png'
+// 【修改点】图片加载处理逻辑
+const handleImgLoad = (record: MaterialInfoRespWithStatus) => {
+  record.photoLoadError = false
+}
+
+const handleImgError = (record: MaterialInfoRespWithStatus, e: Event) => {
+  // 标记为加载错误，触发模板渲染 "照片异常"
+  record.photoLoadError = true
+  console.warn(`物料照片加载失败: ${record.photoUrl}`)
 }

 const MaterialInfoAddModalRef = ref<InstanceType<typeof MaterialInfoAddModal>>()
-// 新增
 const onAdd = () => {
  MaterialInfoAddModalRef.value?.onAdd()
 }

-// 修改
 const onUpdate = (record: MaterialInfoResp) => {
  MaterialInfoAddModalRef.value?.onUpdate(record.id)
 }
@@ -166,23 +187,43 @@ const onPhotosImport = () => {
 </script>

 <style scoped lang="scss">
-// 物料照片样式（新增）
 .photo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
+  width: 100%;
+  overflow: hidden;
 }

 .material-photo {
-  width: 80px;
-  height: 80px;
-  object-fit: cover; // 保持图片比例，避免拉伸
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
  border-radius: 4px;
+  transition: opacity 0.3s;
 }

 .no-photo {
  color: #999;
  font-size: 12px;
+  text-align: center;
+}
+
+// 新增样式
+.photo-error {
+  color: #ff4d4f; // 阿里红/危险色
+  font-size: 12px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.4;
+
+  .error-icon {
+    font-size: 18px;
+    margin-bottom: 2px;
+  }
 }
 </style>
--- a/src/views/weightManage/index.vue
+++ b/src/views/weightManage/index.vue
@@ -25,7 +25,7 @@
        <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">
@@ -87,18 +87,19 @@
                </div>
              </div>

-
              <div class="info-card">
                <h4>比对结果</h4>
                <div class="info-item">
                  <span class="label">比对结果:</span>
-                  <span class="value match-result" :class="{
+                  <span
+                    class="value match-result" :class="{
                      'match-success': formData.matchResult === 'success',
                      'match-failed': formData.matchResult === 'failed',
-                    'match-pending': !formData.matchResult
-                  }">
-                    <icon-check-circle-fill v-if="formData.matchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;"/>
-                    <icon-close-circle-fill v-else-if="formData.matchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;"/>
+                      'match-pending': !formData.matchResult,
+                    }"
+                  >
+                    <icon-check-circle-fill v-if="formData.matchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;" />
+                    <icon-close-circle-fill v-else-if="formData.matchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;" />

                    {{ formData.matchResult === 'success' ? '成功' : formData.matchResult === 'failed' ? '失败' : '-' }}
                  </span>
@@ -109,7 +110,7 @@
        </div>
      </div>

-      <!-- 称重登记页面 -->
+      <!-- 称重登记页面 - 这里放FLV播放器 -->
      <div v-else-if="activeStep === 2" class="step-content">
        <div class="weighing-content">
          <!-- 左侧输入区域 -->
@@ -135,10 +136,46 @@
            <div class="form-row">
              <div class="form-item">
                <label>对应重量:</label>
-                <a-input v-model="inputWeight" placeholder="-" disabled/>
+                <a-input v-model="inputWeight" 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>
@@ -170,7 +207,7 @@
      <div v-else-if="activeStep === 3" class="step-content">
        <div class="completion-content">
          <div class="completion-icon">
-            <a-icon type="check-circle" :size="64" style="color: #52c41a;" />
+            <icon-check-circle-fill :size="64" style="color: #52c41a;" />
          </div>
          <h2>创建完成</h2>
          <p>任务已成功创建，以下是任务详情：</p>
@@ -206,17 +243,17 @@
      <div class="action-buttons">
        <a-button
          v-if="activeStep > 1 && activeStep < 3"
-          @click="handlePrevious"
          class="previous-button"
+          @click="handlePrevious"
        >
          上一步
        </a-button>
        <a-button
          v-if="activeStep < 3"
          type="primary"
-          @click="handleNext"
          :disabled="activeStep === 1 && formData.matchResult !== 'success'"
          class="next-button"
+          @click="handleNext"
        >
          {{ activeStep === 2 ? '完成' : '下一步' }}
        </a-button>
@@ -226,9 +263,15 @@
 </template>

 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
-import { Modal } from '@arco-design/web-vue'
-import { getMaterialDetail } from "@/apis/weightManage/weightManage";
+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)
@@ -241,7 +284,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()
 })

 // 称重登记页面数据
@@ -251,9 +539,7 @@ const calculatedWeight = ref('')
 const weighingCount = ref(1)

 // 称重列表数据
-const weighingList = ref([
-  // 初始数据可以在这里添加
-])
+const weighingList = ref<any[]>([])

 // 任务ID
 const taskId = computed(() => {
@@ -267,42 +553,54 @@ const columns = [
  {
    title: '称重次数',
    dataIndex: 'count',
-    key: 'count'
+    key: 'count',
  },
  {
    title: '数量',
    dataIndex: 'quantity',
    key: 'quantity',
-    className: 'green-bg'
+    className: 'green-bg',
  },
  {
    title: '重量',
    dataIndex: 'weight',
    key: 'weight',
-    className: 'green-bg'
+    className: 'green-bg',
  },
  {
    title: '计算重量',
    dataIndex: 'calculatedWeight',
    key: 'calculatedWeight',
-    className: 'green-bg'
+    className: 'green-bg',
  },
  {
    title: '抓拍图片',
    dataIndex: 'image',
    key: 'image',
-    className: 'green-bg'
+    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: '操作',
    dataIndex: 'action',
    key: 'action',
-    slotName: 'action'
-  }
+    slotName: 'action',
+  },
 ]

-
-
 // 处理物料编码变化
 const handleMaterialCodeChange = async () => {
  if (formData.inputMaterialCode) {
@@ -312,18 +610,18 @@ const handleMaterialCodeChange = async () => {
      console.error('获取物料数据失败:', error)
    }
  } else {
-    formData.encoding = "";
-    formData.materialName = "";
-    formData.materialSpec = "";
-    formData.unitWeight = 0;
-    formData.photoUrl = "";
-    formData.matchResult = "";
+    formData.encoding = ''
+    formData.materialName = ''
+    formData.materialSpec = ''
+    formData.unitWeight = 0
+    formData.photoUrl = ''
+    formData.matchResult = ''
  }
-};
+}

-// 模拟调用后端接口
+// 调用后端接口
 const fetchMaterialData = async (code: string) => {
-  getMaterialDetail(code).then(res => {
+  getMaterialDetail(code).then((res) => {
    if (res.code == '0') {
      // 更新表单数据
      formData.encoding = res.data.encoding
@@ -331,25 +629,22 @@ const fetchMaterialData = async (code: string) => {
      formData.materialSpec = res.data.materialSpec
      formData.unitWeight = res.data.unitWeight
      formData.photoUrl = res.data.photoUrl
-      // 假设后端返回比对结果
-      // formData.matchResult = res.data.matchResult || 'failed' // 这里根据实际接口返回调整
-      formData.matchResult = res.data.matchResult || 'success' // 这里根据实际接口返回调整
+      formData.matchResult = res.data.matchResult || 'success'
      return true
    }
-  });
+  })
 }

 // 处理下一步
 const handleNext = () => {
  if (activeStep.value < 3) {
    if (activeStep.value === 2) {
-      // 当在称重登记页面点击完成时，显示确认弹框
      Modal.confirm({
        title: '确认完成',
        content: '确定要完成称重登记吗？',
        onOk: () => {
          activeStep.value++
-        }
+        },
      })
    } else {
      activeStep.value++
@@ -372,38 +667,105 @@ const handleBackToFirst = () => {
 // 计算重量
 const calculateWeight = () => {
  if (inputQuantity.value && formData.unitWeight) {
-    const singleWeight = parseFloat(formData.unitWeight.toString())
-    const quantity = parseFloat(inputQuantity.value)
-    if (!isNaN(singleWeight) && !isNaN(quantity)) {
-      calculatedWeight.value = (singleWeight * quantity).toFixed(2) + 'g'
+    const singleWeight = Number.parseFloat(formData.unitWeight.toString())
+    const quantity = Number.parseFloat(inputQuantity.value)
+    if (!Number.isNaN(singleWeight) && !Number.isNaN(quantity)) {
+      calculatedWeight.value = `${(singleWeight * quantity).toFixed(2)}g`
    }
  } else {
    calculatedWeight.value = ''
  }
 }

-
-
 // 处理确定
-const handleConfirm = () => {
-  // 生成新的列表数据
+const handleConfirm = async () => {
+  if (!inputQuantity.value) {
+    Message.warning('请输入数量')
+    return
+  }
+
+  // 1. 显示加载状态
+  Message.loading('正在处理...')
+
+  // 2. 抓拍当前画面
+  let captureUrl = ''
+  if (cameraVideo.value && cameraStatus.value === 'connected') {
+    captureUrl = await capturePhoto()
+  }
+
  const newItem = {
    key: (weighingList.value.length + 1).toString(),
    count: weighingCount.value,
    name: formData.materialName,
    quantity: inputQuantity.value,
-    unitWeight: inputWeight.value,
+    weight: inputWeight.value,
    calculatedWeight: calculatedWeight.value,
-    image: '图片'
+    image: captureUrl || '未抓拍',
  }
-  // 添加到列表
  weighingList.value.push(newItem)
-  // 重置输入
  inputQuantity.value = ''
  inputWeight.value = ''
  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',
+  })
 }

 // 处理重置
@@ -414,18 +776,14 @@ const handleReset = () => {
 }

 // 处理删除
-const handleDelete = (key) => {
-  // 过滤掉要删除的项
-  weighingList.value = weighingList.value.filter(item => item.key !== key)
-  // 重新排序称重次数
+const handleDelete = (key: string) => {
+  weighingList.value = weighingList.value.filter((item) => item.key !== key)
  weighingList.value.forEach((item, index) => {
    item.count = index + 1
  })
-  // 更新当前称重次数
  weighingCount.value = weighingList.value.length + 1
+  Message.success('删除成功')
 }
-
-defineOptions({ name: 'WeightManage' })
 </script>

 <style scoped lang="scss">
@@ -524,12 +882,12 @@ defineOptions({ name: 'WeightManage' })
 /* 称重登记页面 */
 .weighing-content {
  display: flex;
+  gap: 30px;
  margin-bottom: 30px;
 }

 .left-weighing-section {
-  width: 400px;
-  margin-right: 30px;
+  width: 450px;
 }

 .right-weighing-section {
@@ -553,10 +911,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 {
@@ -629,7 +1045,7 @@ defineOptions({ name: 'WeightManage' })
  margin-top: 40px;
 }

-/* 图片占位符 */
+/* 图片占位符（保留用于扫码核验页面） */
 .image-placeholder {
  width: 100%;
  height: 150px;
@@ -654,7 +1070,7 @@ defineOptions({ name: 'WeightManage' })
  border-radius: 4px;
 }

-/* 相机区域 */
+/* 相机区域（保留用于扫码核验页面） */
 .camera-section {
  display: flex;
  justify-content: space-between;
@@ -672,17 +1088,16 @@ defineOptions({ name: 'WeightManage' })

 .form-row {
  display: flex;
+  gap: 20px;
  margin-bottom: 16px;
 }

 .form-item {
  flex: 1;
-  margin-right: 20px;
 }

 .form-item.full-width {
  flex: 1;
-  margin-right: 0;
 }

 /* 确保输入框宽度一致 */
@@ -700,6 +1115,7 @@ defineOptions({ name: 'WeightManage' })
  margin-bottom: 8px;
  font-size: 16px;
  color: #666;
+  font-weight: 500;
 }

 .form-actions {
@@ -716,6 +1132,7 @@ defineOptions({ name: 'WeightManage' })
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  margin-bottom: 16px;
 }

 .info-card h4 {
@@ -723,6 +1140,8 @@ defineOptions({ name: 'WeightManage' })
  font-size: 16px;
  font-weight: bold;
  color: #333;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 8px;
 }

 .info-item {
@@ -772,6 +1191,7 @@ defineOptions({ name: 'WeightManage' })
 .action-buttons {
  display: flex;
  justify-content: flex-end;
+  margin-top: 30px;
 }

 .next-button {