WMS/wms-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

抓取优化

Browse Source
This commit is contained in:
liuzhu
2026-03-09 16:22:17 +08:00
parent a3cb2263fd
commit 2bf7b6872a
1 changed files with 141 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/views/weightManage/index.vue
View File

@@ -57,7 +57,7 @@
<div class="form-item">
<a-form-item label="物料编码">
<a-input
v-model="formData.inputMaterialCode"
v-model="formData.inputMaterialCode"
placeholder="请点击此处确保光标闪烁，并使用扫码枪扫描物料编码"
@keydown="handleKeyDown"
@input="handleMaterialCodeChange"
@@ -74,7 +74,7 @@
<div class="image-placeholder square-image">实时画面 相机1</div>
<div class="image-placeholder square-image">实时画面 相机2</div>
</div>
<div class="info-section">
<div class="info-card">
<h4>识别信息</h4>
@@ -92,13 +92,15 @@
<h4>比对结果</h4>
<div class="info-item">
<span class="label">比对结果:</span>
<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;"/>
<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;" />
{{ formData.matchResult === 'success' ? '成功' : formData.matchResult === 'failed' ? '失败' : '-' }}
</span>
@@ -135,7 +137,7 @@
<div class="form-row">
<div class="form-item">
<label>对应重量(g):</label>
<a-input v-model="ahDeviceWeight" placeholder="-" disabled/>
<a-input v-model="ahDeviceWeight" placeholder="-" disabled />
</div>
</div>
@@ -246,17 +248,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"
<a-button
v-if="activeStep < 3"
type="primary"
:disabled="activeStep === 1 && formData.matchResult !== 'success'"
class="next-button"
@click="handleNext"
>
{{ activeStep === 2 ? '完成' : '下一步' }}
</a-button>
@@ -266,16 +268,13 @@
</template>
<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, reactive, onUnmounted } from 'vue'
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 { nextTick, onBeforeUnmount, onMounted, onUnmounted, reactive, ref } from 'vue'
import { Message, Modal, Notification } from '@arco-design/web-vue'
import { getMaterialDetail } from '@/apis/weightManage/weightManage'
import { type WorkOrderResp, addWorkOrder } from '@/apis/workOrder/workOrder'
import { catchPhoto } from '@/apis/material/materialInfo'
defineOptions({ name: 'WeightManage' })
// 动态导入flv.js
@@ -556,10 +555,9 @@ const workOrderResp = ref<WorkOrderResp>({
updateUserString: '',
totalCalculatedWeight: '',
workOrderInfos: [],
matchResult: 'failed'
matchResult: 'failed',
})
// 称重登记页面数据
const inputQuantity = ref('')
const ahDeviceWeight = ref('10')
@@ -580,25 +578,25 @@ const columns = [
{
title: '称重次数',
dataIndex: 'weightTime',
key: 'weightTime'
key: 'weightTime',
},
{
title: '数量',
dataIndex: 'quantity',
key: 'quantity',
className: 'green-bg'
className: 'green-bg',
},
{
title: '重量(g)',
dataIndex: 'weight',
key: 'weight',
className: 'green-bg'
className: 'green-bg',
},
{
title: '计算重量(g)',
dataIndex: 'calculatedWeight',
key: 'calculatedWeight',
className: 'green-bg'
className: 'green-bg',
},
{
title: '抓拍图片',
@@ -624,33 +622,33 @@ const columns = [
title: '操作',
dataIndex: 'action',
key: 'action',
slotName: 'action'
}
slotName: 'action',
},
]
// 防抖函数
const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): ((...args: Parameters<T>) => void) => {
let timer: ReturnType<typeof setTimeout> | null = null;
return function(...args: Parameters<T>) {
if (timer) clearTimeout(timer);
let timer: ReturnType<typeof setTimeout> | null = null
return function (...args: Parameters<T>) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func(...args);
}, delay);
};
};
func(...args)
}, delay)
}
}
// 原始的物料编码变化处理函数
const originalHandleMaterialCodeChange = async () => {
// 确保输入框内容是完整的物料编码
const materialCode = formData.inputMaterialCode?.trim();
const materialCode = formData.inputMaterialCode?.trim()
// 无论是否有输入，先重置所有物料相关字段，确保新数据能完全覆盖旧数据
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 = ''
// 如果有物料编码输入，获取物料数据
if (materialCode) {
@@ -661,17 +659,17 @@ const originalHandleMaterialCodeChange = async () => {
// 即使获取失败，也保持字段为空，避免显示旧数据
}
}
};
}
// 记录上次输入时间，用于判断是否是扫码枪输入
let lastInputTime = 0;
let lastInputTime = 0
// 记录输入内容，用于判断是否是新的扫码
let previousInput = '';
const previousInput = ''
// 处理键盘按下事件
const handleKeyDown = (event: KeyboardEvent) => {
// 获取当前时间
const currentTime = Date.now();
const currentTime = Date.now()
// 如果输入速度非常快（小于100ms），认为是扫码枪输入
if (currentTime - lastInputTime < 100 && formData.inputMaterialCode) {
@@ -679,33 +677,33 @@ const handleKeyDown = (event: KeyboardEvent) => {
} else if (event.key.length === 1 && !event.ctrlKey && !event.altKey) {
// 如果是新的输入（不是快速连续输入），清空输入框
// 这样可以确保每次扫码都从空输入框开始
formData.inputMaterialCode = '';
formData.inputMaterialCode = ''
}
// 更新上次输入时间
lastInputTime = currentTime;
};
lastInputTime = currentTime
}
// 带防抖的物料编码变化处理函数
const handleMaterialCodeChange = debounce(originalHandleMaterialCodeChange, 500); // 500ms防抖延迟
const handleMaterialCodeChange = debounce(originalHandleMaterialCodeChange, 500) // 500ms防抖延迟
// 扫码核验获取物料信息
const fetchMaterialData = async (code: string) => {
getMaterialDetail(code).then(res => {
if (res.code == '0') {
getMaterialDetail(code).then((res) => {
if (res.code === '0') {
// 更新表单数据
formData.id = res.data?.id || "";
formData.encoding = res.data?.encoding || "";
formData.materialName = res.data?.materialName || "";
formData.materialSpec = res.data?.materialSpec || "";
formData.unitWeight = res.data?.unitWeight || 0;
formData.photoUrl = res.data?.photoUrl || "";
formData.id = res.data?.id || ''
formData.encoding = res.data?.encoding || ''
formData.materialName = res.data?.materialName || ''
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
}
});
})
}
// 处理下一步
@@ -722,20 +720,20 @@ const handleNext = async () => {
const workOrderData = {
materialId: formData.id,
materialName: formData.materialName,
workOrderInfos: weighingList.value
workOrderInfos: weighingList.value,
}
// 调用后端接口
addWorkOrder(workOrderData).then(res => {
if (res.code == '0') {
addWorkOrder(workOrderData).then((res) => {
if (res.code === '0') {
Notification.success({
title: '操作成功',
content: `工单创建成功！`
content: `工单创建成功！`,
})
workOrderResp.value.matchResult = 'success';
workOrderResp.value.title = res.data?.title || "";
workOrderResp.value.orderNo = res.data?.orderNo || "";
workOrderResp.value.totalWeight = res.data?.totalWeight || "";
workOrderResp.value.totalCount = res.data?.totalCount || "";
workOrderResp.value.matchResult = 'success'
workOrderResp.value.title = res.data?.title || ''
workOrderResp.value.orderNo = res.data?.orderNo || ''
workOrderResp.value.totalWeight = res.data?.totalWeight || ''
workOrderResp.value.totalCount = res.data?.totalCount || ''
// 关闭WebSocket连接
closeWebSocket()
@@ -743,12 +741,12 @@ const handleNext = async () => {
activeStep.value++
return true
}
});
})
} catch (error) {
console.error('创建工作订单失败:', error)
Message.error('创建工作订单失败')
}
}
},
})
} else {
activeStep.value++
@@ -775,7 +773,7 @@ const handlePrevious = () => {
const handleBackToFirst = () => {
// 重置所有数据
activeStep.value = 1
// 重置表单数据
formData.inputMaterialCode = ''
formData.id = ''
@@ -785,7 +783,7 @@ const handleBackToFirst = () => {
formData.unitWeight = 0
formData.photoUrl = ''
formData.matchResult = ''
// 重置称重登记页面数据
inputQuantity.value = ''
ahDeviceWeight.value = '10'
@@ -793,10 +791,10 @@ const handleBackToFirst = () => {
weighingCount.value = 1
// 清空称重列表
weighingList.value = []
// 重置工作订单响应数据
workOrderResp.value = {}
// 离开称重页面时关闭WebSocket连接
closeWebSocket()
}
@@ -804,8 +802,8 @@ const handleBackToFirst = () => {
// 计算重量
const calculateWeight = () => {
if (inputQuantity.value && formData.unitWeight) {
const singleWeight = parseFloat(formData.unitWeight.toString())
const quantity = parseFloat(inputQuantity.value)
const singleWeight = Number.parseFloat(formData.unitWeight.toString())
const quantity = Number.parseFloat(inputQuantity.value)
if (!isNaN(singleWeight) && !isNaN(quantity)) {
calculatedWeight.value = (singleWeight * quantity).toFixed(2)
}
@@ -814,10 +812,8 @@ const calculateWeight = () => {
}
}
// 处理确定
const handleConfirm = () => {
/* const handleConfirm = async () => {
// 校验输入数量是否为空
if (!inputQuantity.value || inputQuantity.value.trim() === '') {
Message.error('请输入数量')
@@ -831,9 +827,9 @@ const handleConfirm = () => {
// 2. 抓拍当前画面
let captureUrl = ''
if (cameraVideo.value && cameraStatus.value === 'connected') {
captureUrl = capturePhoto();
captureUrl = await capturePhoto()
}
console.log(captureUrl)
// 生成新的列表数据
const newItem = {
key: (weighingList.value.length + 1).toString(),
@@ -852,11 +848,69 @@ const handleConfirm = () => {
calculatedWeight.value = ''
// 称重次数累加
weighingCount.value = weighingList.value.length + 1
Message.success('添加成功')
} */
const handleConfirm = () => {
// 校验输入数量是否为空
if (!inputQuantity.value || inputQuantity.value.trim() === '') {
Message.error('请输入数量')
return
}
if (!ahDeviceWeight.value || ahDeviceWeight.value.trim() === '') {
Message.error('电子秤称重结果为空！')
return
}
// 立即创建一个新项的基本数据
const newItem = {
key: (weighingList.value.length + 1).toString(),
weightTime: weighingCount.value,
materialId: formData.id,
quantity: inputQuantity.value,
weight: ahDeviceWeight.value,
calculatedWeight: calculatedWeight.value,
image: '加载中...', // 先显示加载状态
}
// 先添加到列表，让用户能立即看到记录
weighingList.value.push(newItem)
// 重置输入（让用户能继续输入）
inputQuantity.value = ''
ahDeviceWeight.value = '10'
calculatedWeight.value = ''
weighingCount.value = weighingList.value.length + 1
// 异步执行抓拍，不阻塞主流程
if (cameraVideo.value && cameraStatus.value === 'connected') {
// 立即执行异步抓拍
capturePhoto().then((captureUrl) => {
// 找到刚刚添加的项，更新图片URL
const addedItem = weighingList.value.find((item) => item.key === newItem.key)
if (addedItem) {
addedItem.image = captureUrl || '抓拍失败'
// 触发视图更新
weighingList.value = [...weighingList.value]
}
Message.success('图片抓拍成功')
}).catch((error) => {
})
} else {
// 摄像头未连接，直接显示未抓拍
const addedItem = weighingList.value.find((item) => item.key === newItem.key)
if (addedItem) {
addedItem.image = '未抓拍'
weighingList.value = [...weighingList.value]
}
}
Message.success('添加成功')
}
// 抓拍功能 - 内部方法，不暴露按钮
const capturePhoto = (): Promise<string> => {
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve, reject) => {
try {
const video = cameraVideo.value
@@ -883,8 +937,7 @@ const capturePhoto = (): Promise<string> => {
// 调用后端接口
const response = await catchPhoto(formData)
if (response.code !== '200') {
reject(new Error('上传失败'))
if (response.msg !== 'ok') {
return
}
@@ -923,7 +976,7 @@ const handleReset = () => {
// 处理删除
const handleDelete = (key) => {
// 过滤掉要删除的项
weighingList.value = weighingList.value.filter(item => item.key !== key)
weighingList.value = weighingList.value.filter((item) => item.key !== key)
// 重新排序称重次数
weighingList.value.forEach((item, index) => {
item.weightTime = index + 1
@@ -1399,4 +1452,4 @@ onUnmounted(() => {
font-size: 14px;
margin-right: 12px;
}
</style>
</style>