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

# Conflicts:
#	src/views/weightManage/index.vue

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>

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,
   })
 }

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 {