优化

src/apis/weightManage/weightManage.ts

@@ -25,3 +25,13 @@ export function getMaterialDetail(code: string) {
 export function validateWeighing(data: any) {
   return http.post(`${BASE_URL}/validateWeighing`, data)
 }
+
+/** @desc 校验称重信息 */
+export function vmSend(code: string) {
+  return http.get<WeighManageResp>(`/vm/send?msg=${code}`)
+}
+
+/** @desc 获取图片 */
+export function getImg() {
+  return http.get<string>(`/vm/latest-photo`)
+}

src/types/components.d.ts

@@ -41,6 +41,7 @@ declare module 'vue' {
     AMenu: typeof import('@arco-design/web-vue')['Menu']
     AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
     AModal: typeof import('@arco-design/web-vue')['Modal']
+    AOverflowList: typeof import('@arco-design/web-vue')['OverflowList']
     APagination: typeof import('@arco-design/web-vue')['Pagination']
     APopover: typeof import('@arco-design/web-vue')['Popover']
     AProgress: typeof import('@arco-design/web-vue')['Progress']
@@ -52,6 +53,7 @@ declare module 'vue' {
     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']
     ATable: typeof import('@arco-design/web-vue')['Table']
@@ -60,6 +62,7 @@ declare module 'vue' {
     ATag: typeof import('@arco-design/web-vue')['Tag']
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
     ATreeSelect: typeof import('@arco-design/web-vue')['TreeSelect']
+    ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph']
     AUpload: typeof import('@arco-design/web-vue')['Upload']
     Avatar: typeof import('./../components/Avatar/index.vue')['default']
     AWatermark: typeof import('@arco-design/web-vue')['Watermark']

src/views/weightManage/index.vue

@@ -57,10 +57,10 @@
                 <div class="form-item">
                   <a-form-item label="物料编码">
                     <a-input
-                      v-model="formData.inputMaterialCode"
+                        v-model="formData.inputMaterialCode"
-                      placeholder="请点击此处确保光标闪烁，并使用扫码枪扫描物料编码"
+                        placeholder="请点击此处确保光标闪烁，并使用扫码枪扫描物料编码"
-                      @keydown="handleKeyDown"
+                        @keydown="handleKeyDown"
-                      @input="handleMaterialCodeChange"
+                        @input="handleMaterialCodeChange"
                     />
                   </a-form-item>
                 </div>
@@ -71,8 +71,14 @@
           <!-- 右侧信息 -->
           <div class="right-section">
             <div class="camera-section">
-              <div class="image-placeholder square-image">实时画面 相机1</div>
+              <!-- 图片展示 -->
-              <div class="image-placeholder square-image">实时画面 相机2</div>
+              <div class="image-placeholder square-image">
+                <img 
+                  :src="imgData.imgUrl"
+                  alt="图片展示"
+                  style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
+                />
+              </div>
             </div>
 
             <div class="info-section">
@@ -93,16 +99,15 @@
                 <div class="info-item">
                   <span class="label">比对结果:</span>
                   <span
-                    class="value match-result" :class="{
+                      class="value match-result" :class="{
-                      'match-success': formData.matchResult === 'success',
+                      'match-success': compareMatchResult === 'success',
-                      'match-failed': formData.matchResult === 'failed',
+                      'match-failed': compareMatchResult === 'failed',
-                      'match-pending': !formData.matchResult,
+                      'match-pending': !compareMatchResult,
                     }"
                   >
-                    <icon-check-circle-fill v-if="formData.matchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;" />
+                    <icon-check-circle-fill v-if="compareMatchResult === '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;" />
+                    <icon-close-circle-fill v-else-if="compareMatchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;" />
-
+                    {{ compareMatchResult === 'success' ? '成功' : compareMatchResult === 'failed' ? '失败' : '请放置需比对的物料到扫描区域！' }}
-                    {{ formData.matchResult === 'success' ? '成功' : formData.matchResult === 'failed' ? '失败' : '-' }}
                   </span>
                 </div>
               </div>
@@ -144,11 +149,11 @@
             <!-- 这里是摄像头画面 - 替换成FLV播放器 -->
             <div class="video-container large-image">
               <video
-                ref="cameraVideo"
+                  ref="cameraVideo"
-                autoplay
+                  autoplay
-                muted
+                  muted
-                playsinline
+                  playsinline
-                style="width: 100%; height: 100%; object-fit: cover;"
+                  style="width: 100%; height: 100%; object-fit: cover;"
               ></video>
 
               <!-- 加载状态 -->
@@ -247,20 +252,19 @@
       <!-- 操作按钮 -->
       <div class="action-buttons">
         <a-button
-          v-if="activeStep > 1 && activeStep < 3"
+            v-if="activeStep > 1 && activeStep < 3"
-          class="previous-button"
+            class="previous-button"
-          @click="handlePrevious"
+            @click="handlePrevious"
         >
           上一步
         </a-button>
         <a-button
-          v-if="activeStep < 3"
+            v-if="activeStep < 3"
-          type="primary"
+            type="primary"
-          :disabled="activeStep === 1 && formData.matchResult !== 'success'"
+            class="next-button"
-          class="next-button"
+            @click="handleNext"
-          @click="handleNext"
         >
-          {{ activeStep === 2 ? '完成' : '下一步' }}
+          {{ activeStep === 2 ? '完成' : (compareMatchResult === 'success' ? '下一步' : '开始比对') }}
         </a-button>
       </div>
     </div>
@@ -270,8 +274,7 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { Message, Modal, Notification } from '@arco-design/web-vue'
-
+import {getImg, getMaterialDetail, validateWeighing, vmSend} from '@/apis/weightManage/weightManage'
-import {getMaterialDetail, validateWeighing} from '@/apis/weightManage/weightManage'
 import {type WorkOrderResp, addWorkOrder, getWorkOrder} from '@/apis/workOrder/workOrder'
 import { catchPhoto } from '@/apis/material/materialInfo'
 
@@ -292,9 +295,28 @@ const formData = reactive({
   materialSpec: '', // 物料规格
   unitWeight: 0, // 重量
   photoUrl: '', // 样图URL
-  matchResult: '', // 比对结果
 })
 
+const imgData = reactive({
+  imgUrl: '', // 样图URL
+})
+
+// 定时器引用
+let pollingInterval = null
+
+// 获取图片的方法
+const getImage = () => {
+
+  getImg().then((res) => {
+    if (res.code === '0') {
+      imgData.imgUrl = res.data?.imgUrl || ''
+    }
+  })
+}
+
+//比对结果
+const compareMatchResult = ref('')
+
 // 摄像头状态
 const cameraStatus = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected')
 
@@ -517,6 +539,7 @@ const stopCamera = () => {
   reconnectCount.value = 1
 }
 
+
 // 监听步骤变化
 watch(activeStep, (newVal) => {
   if (newVal === 2) {
@@ -525,7 +548,7 @@ watch(activeStep, (newVal) => {
       initCamera()
     })
   } else {
-    // 离开称重登记页面，停止摄像头
+    // 离开相关页面，停止摄像头
     stopCamera()
   }
 })
@@ -533,6 +556,7 @@ watch(activeStep, (newVal) => {
 // 组件挂载时
 onMounted(async () => {
   await loadFlvJs()
+  pollingInterval = setInterval(getImg, 1000)
 })
 
 // 组件卸载时
@@ -649,7 +673,7 @@ const originalHandleMaterialCodeChange = async () => {
   formData.materialSpec = ''
   formData.unitWeight = 0
   formData.photoUrl = ''
-  formData.matchResult = ''
+  compareMatchResult.value = '';
 
   // 如果有物料编码输入，获取物料数据
   if (materialCode) {
@@ -699,9 +723,6 @@ const fetchMaterialData = async (code: string) => {
       formData.materialSpec = res.data?.materialSpec || ''
       formData.unitWeight = res.data?.unitWeight || 0
       formData.photoUrl = res.data?.photoUrl || ''
-      // 假设后端返回比对结果
-      // formData.matchResult = res.data.matchResult || 'failed' // 这里根据实际接口返回调整
-      formData.matchResult = res.data?.matchResult || 'success' // 这里根据实际接口返回调整
       return true
     }
   })
@@ -749,6 +770,35 @@ const handleNext = async () => {
           }
         },
       })
+    } else if (activeStep.value === 1 && compareMatchResult.value !== 'success') {
+      // 当在扫码核验页面点击开始比对时，调用后端接口获取比对结果
+      try {
+        // 这里应该调用后端的比对接口，暂时使用fetchMaterialData模拟
+        // 实际项目中应该替换为专门的比对接口
+        const materialCode = formData.inputMaterialCode?.trim()
+        if (!materialCode) {
+          Message.error('请先扫描物料编码')
+          return
+        }
+
+        // 调用后端接口获取比对结果
+        vmSend(materialCode).then((res) => {
+          if (res.code === '0') {
+            compareMatchResult.value = JSON.parse(res.data?.matchResult || '')
+          }
+        })
+
+        if (compareMatchResult.value === 'success') {
+          // 比对成功，按钮变为下一步
+          Message.success('比对成功')
+        } else {
+          // 比对失败，提示错误
+          Message.error('比对失败')
+        }
+      } catch (error) {
+        console.error('比对失败:', error)
+        Message.error('比对失败，请重试')
+      }
     } else {
       activeStep.value++
       // 进入称重页面时建立WebSocket连接
@@ -759,6 +809,8 @@ const handleNext = async () => {
   }
 }
 
+
+
 // 处理上一步
 const handlePrevious = () => {
   if (activeStep.value > 1) {
@@ -783,7 +835,8 @@ const handleBackToFirst = () => {
   formData.materialSpec = ''
   formData.unitWeight = 0
   formData.photoUrl = ''
-  formData.matchResult = ''
+
+  compareMatchResult.value = ''
 
   // 重置称重登记页面数据
   inputQuantity.value = ''
@@ -1009,6 +1062,9 @@ const closeWebSocket = () => {
 // 组件卸载时关闭WebSocket连接
 onUnmounted(() => {
   closeWebSocket()
+  if (pollingInterval) {
+    clearInterval(pollingInterval)
+  }
 })
 </script>