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/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
@@ -1,17 +1,18 @@
 <template>
  <div class="gi_table_page">
    <GiTable
-      title="物料管理管理"
-      row-key="id"
-      :data="dataList"
-      :columns="columns"
-      :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
-      :pagination="pagination"
-      :disabled-tools="['size']"
-      :disabled-column-keys="['name']"
-      @refresh="search"
+        title="物料管理管理"
+        row-key="id"
+        :data="dataList"
+        :columns="columns"
+        :loading="loading"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+        :pagination="pagination"
+        :disabled-tools="['size']"
+        :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,27 +39,40 @@
          <template #default>照片批量导入</template>
        </a-button>
      </template>
+
+      <!-- 【修改点】照片列插槽 -->
      <template #photoUrl="{ record }">
        <div class="photo-container">
+          <!-- 1. 正常显示图片：有地址 且 未标记为错误 -->
          <img
-            v-if="record.photoUrl"
-            :src="record.photoUrl"
-            alt="物料照片"
-            class="material-photo"
-            @error="handleImgError($event)"
+              v-if="record.photoUrl && !record.photoLoadError"
+              :src="record.photoUrl"
+              alt="物料照片"
+              class="material-photo"
+              @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>
          <a-link
-            v-permission="['admin:materialInfo:delete']"
-            status="danger"
-            :disabled="record.disabled"
-            :title="record.disabled ? '不可删除' : '删除'"
-            @click="onDelete(record)"
+              v-permission="['admin:materialInfo:delete']"
+              status="danger"
+              :disabled="record.disabled"
+              :title="record.disabled ? '不可删除' : '删除'"
+              @click="onDelete(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/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -168,7 +168,7 @@ const columns: TableInstanceColumns[] = [
    fixed: !isMobile() ? 'left' : undefined,
  },
  { title: '用户名', dataIndex: 'username', slotName: 'username', minWidth: 100, ellipsis: true, tooltip: true },
-  { title: '卡号', dataIndex: 'cardNo', slotName: 'cardNo' },
+  { title:'卡号', dataIndex: 'cardNo', slotName: 'cardNo' },
  { title: '状态', dataIndex: 'status', slotName: 'status', align: 'center' },
  { title: '性别', dataIndex: 'gender', slotName: 'gender', align: 'center' },
  { title: '角色', dataIndex: 'roleNames', slotName: 'roleNames', minWidth: 165 },
@@ -204,7 +204,7 @@ const reset = () => {

 const onDelete = (record: UserResp) => {
  return handleDelete(() => deleteUser(record.id), {
-    content: `是否确定删除用户「${record.username}」？`,
+    content: `是否确定删除用户「${record.nickname}(${record.username})」？`,
    showModal: true,
  })
 }
--- 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">
@@ -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;
@@ -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',
+  })
 }

 // 处理重置
@@ -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 {