bonus
/
bonus-material-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ocr

This commit is contained in:
hayu 2025-08-01 16:29:18 +08:00
parent 75b6efe951
commit f523b77bcb
3 changed files with 373 additions and 1354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

355
src/pages/devicesSearch/ocrSearch2.vue
View File

@ -1,7 +1,84 @@
<template>
<view class="page-container">
<!-- 设备搜索页面 -->
<view v-if="!showCamera">
<view class="table-list-item">
<view class="scan-btn" @click="openCamera">
<text style="color: #FFF;">开始识别</text>
</view>
</view>
<view class="table-list-item">
<uni-row :gutter="24" style="display: flex; align-items: center">
<uni-col :span="6">
<text>设备编码</text>
</uni-col>
<uni-col :span="10">
<view>
<uni-easyinput v-model="queryCodeParams.maCode" placeholder="请输入内容" />
</view>
</uni-col>
<uni-col :span="6">
<view class="coding-btn" @click="getCode()">
<text style="color: #fe9a09;text-align: center;">编码检索</text>
</view>
</uni-col>
</uni-row>
<div v-if="optionList.length > 1" class="select-container">
<uni-data-select
v-model="queryCodeParams.maId"
:localdata="optionList"
@change="changeTag"
placeholder="请选择相关联编号"
class="data-select"
:searchable="false"
></uni-data-select>
</div>
</view>
<view class="table-list-item">
<uni-forms :model="codeData" label-width="100" :border="true">
<uni-forms-item label="物资名称：" name="materialType">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.materialType }}</text>
</uni-forms-item>
<uni-forms-item label="物资类型：" name="materialName">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.materialName }}</text>
</uni-forms-item>
<uni-forms-item label="规格型号：" name="materialModel">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.materialModel }}</text>
</uni-forms-item>
<uni-forms-item label="设备编码：" name="maCode">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.maCode }}</text>
</uni-forms-item>
<uni-forms-item label="检验结论：" name="statusName">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.statusName }}</text>
</uni-forms-item>
<uni-forms-item label="本次检修时间：" name="inspectionTime">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.inspectionTime }}</text>
</uni-forms-item>
<uni-forms-item label="下次检修时间：" name="nextInspectionTime">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.nextInspectionTime }}</text>
</uni-forms-item>
<uni-forms-item label="检修员：" name="inspectionPerson">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.inspectionPerson }}</text>
</uni-forms-item>
<uni-forms-item label="检验员：" name="inspectionVerifier">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.inspectionVerifier }}</text>
</uni-forms-item>
<uni-forms-item label="联系电话：" name="contactNumber">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.contactNumber }}</text>
</uni-forms-item>
<uni-forms-item label="领料工程：" name="materialProject">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.materialProject }}</text>
</uni-forms-item>
<uni-forms-item label="领料单位：" name="materialUnit">
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.materialUnit }}</text>
</uni-forms-item>
</uni-forms>
</view>
</view>
<!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-container">
<!-- 底部控制区 -->
<view class="bottom-controls">
<view class="control-btn" @click="closeCamera">
@ -362,93 +439,6 @@ export default {
}
},
// 处理点击聚焦
async handleTapToFocus(event) {
if (!this.cameraStarted || this.isFocusing) {
return;
}
const CameraPreview = this.getCameraPlugin();
if (!CameraPreview || typeof CameraPreview.tapToFocus !== 'function') {
console.log('相机插件不支持点击聚焦功能');
return;
}
try {
// 获取点击位置
const rect = event.currentTarget.getBoundingClientRect();
const x = event.detail.x - rect.left;
const y = event.detail.y - rect.top;
// 转换为相对坐标 (0-1)
const relativeX = x / rect.width;
const relativeY = y / rect.height;
console.log('点击聚焦位置:', { x: relativeX, y: relativeY });
// 显示聚焦指示器
this.showFocusIndicator = true;
this.focusIndicatorStyle = {
left: `${x - 30}rpx`,
top: `${y - 30}rpx`
};
this.isFocusing = true;
this.focusSuccess = false;
// 清除之前的聚焦超时
if (this.focusTimeout) {
clearTimeout(this.focusTimeout);
}
await new Promise((resolve, reject)=> {
// 设置聚焦超时
this.focusTimeout = setTimeout(() => {
console.log('点击聚焦超时');
this.isFocusing = false;
this.showFocusIndicator = false;
resolve();
}, 3000);
CameraPreview.tapToFocus(
relativeX,
relativeY,
(result) => {
console.log('点击聚焦成功:', result);
if (this.focusTimeout) {
clearTimeout(this.focusTimeout);
this.focusTimeout = null;
}
this.isFocusing = false;
this.focusSuccess = true;
// 显示聚焦成功状态
setTimeout(() => {
this.focusSuccess = false;
this.showFocusIndicator = false;
}, 1000);
resolve();
},
(error) => {
console.error('点击聚焦失败:', error);
if (this.focusTimeout) {
clearTimeout(this.focusTimeout);
this.focusTimeout = null;
}
this.isFocusing = false;
this.showFocusIndicator = false;
resolve(); // 即使聚焦失败也继续
}
);
}
)
;
} catch (error) {
console.error('点击聚焦过程出错:', error);
this.isFocusing = false;
this.showFocusIndicator = false;
}
},
// 关闭相机
async closeCamera() {
console.log('关闭相机...');
@ -855,6 +845,37 @@ export default {
padding: 24rpx;
}
.table-list-item {
background: #fff;
padding: 32rpx;
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
margin-bottom: 24rpx;
}
.scan-btn {
height: 88rpx;
background: #4b8eff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
}
.coding-btn {
padding: 10rpx 0;
color: #fe9a09;
background-color: #fff7eb;
border: 1px solid #fe9a09;
border-radius: 12rpx;
text-align: center;
font-size: 28rpx;
font-weight: 600;
}
/* 相机预览样式 */
.camera-container {
position: fixed;
@ -866,6 +887,166 @@ export default {
z-index: 1000; /* 降低层级，让UI元素显示在上方 */
}
.top-tip {
position: absolute;
top: 120rpx;
left: 50%;
transform: translateX(-50%);
z-index: 10001; /* 提高层级，确保显示在相机之上 */
width: 100%;
text-align: center;
}
.tip-text {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 32rpx;
font-weight: bold;
padding: 20rpx 30rpx;
border-radius: 10rpx;
}
/* 聚焦状态提示 */
.focus-tip {
position: absolute;
top: 200rpx;
left: 50%;
transform: translateX(-50%);
z-index: 10001; /* 提高层级 */
text-align: center;
}
.focus-text {
background-color: rgba(75, 142, 255, 0.9);
color: #fff;
font-size: 28rpx;
font-weight: bold;
padding: 15rpx 25rpx;
border-radius: 8rpx;
}
.viewfinder-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10001; /* 提高取景框层级 */
}
.viewfinder {
position: relative;
width: 500rpx;
height: 600rpx;
background-color: transparent;
border: 2rpx solid rgba(255, 255, 255, 0.5);
border-radius: 20rpx;
box-shadow: 0 0 20rpx rgba(75, 142, 255, 0.5);
}
/* 扫描线动画 */
.scan-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4rpx;
background: linear-gradient(90deg, transparent, rgba(75, 142, 255, 0.8), transparent);
animation: scan 2s linear infinite;
border-radius: 2rpx;
}
@keyframes scan {
0% {
top: 0;
opacity: 1;
}
50% {
opacity: 1;
}
100% {
top: calc(100% - 4rpx);
opacity: 0;
}
}
.corner {
position: absolute;
width: 60rpx;
height: 60rpx;
border: 6rpx solid rgba(75, 142, 255, 0.8);
background-color: transparent;
}
.corner-top-left {
top: -6rpx;
left: -6rpx;
border-right: none;
border-bottom: none;
border-top-left-radius: 20rpx;
}
.corner-top-right {
top: -6rpx;
right: -6rpx;
border-left: none;
border-bottom: none;
border-top-right-radius: 20rpx;
}
.corner-bottom-left {
bottom: -6rpx;
left: -6rpx;
border-right: none;
border-top: none;
border-bottom-left-radius: 20rpx;
}
.corner-bottom-right {
bottom: -6rpx;
right: -6rpx;
border-left: none;
border-top: none;
border-bottom-right-radius: 20rpx;
}
/* 聚焦指示器 */
.focus-indicator {
position: absolute;
width: 60rpx;
height: 60rpx;
z-index: 10002; /* 聚焦指示器最高层级 */
}
.focus-ring {
width: 100%;
height: 100%;
border: 3rpx solid #4b8eff;
border-radius: 50%;
background-color: transparent;
transition: all 0.3s ease;
}
.focus-ring.focusing {
border-color: #ff9500;
animation: focusPulse 1s ease-in-out infinite;
}
.focus-ring.focused {
border-color: #00ff00;
transform: scale(1.2);
}
@keyframes focusPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.7;
}
}
.bottom-controls {
position: absolute;
bottom: 100rpx;

1330
src/pages/devicesSearch/ocrSearch5.vue
View File

File diff suppressed because it is too large Load Diff

40
src/pages/search/index.vue
View File

@ -117,26 +117,26 @@ const newInfoList = ref([
url: '/pages/devicesSearch/ocrSearch',
iconSrc: '../../static/searchModel/qrCode.png',
},
{
title: 'OCR查询2',
url: '/pages/devicesSearch/ocrSearch2',
iconSrc: '../../static/searchModel/qrCode.png',
},
{
title: 'OCR查询3',
url: '/pages/devicesSearch/ocrSearch3',
iconSrc: '../../static/searchModel/qrCode.png',
},
{
title: 'OCR查询4',
url: '/pages/devicesSearch/ocrSearch4',
iconSrc: '../../static/searchModel/qrCode.png',
},
{
title: 'OCR查询5',
url: '/pages/devicesSearch/ocrSearch5',
iconSrc: '../../static/searchModel/qrCode.png',
},
// {
// title: 'OCR查询2',
// url: '/pages/devicesSearch/ocrSearch2',
// iconSrc: '../../static/searchModel/qrCode.png',
// },
// {
// title: 'OCR查询3',
// url: '/pages/devicesSearch/ocrSearch3',
// iconSrc: '../../static/searchModel/qrCode.png',
// },
// {
// title: 'OCR查询4',
// url: '/pages/devicesSearch/ocrSearch4',
// iconSrc: '../../static/searchModel/qrCode.png',
// },
// {
// title: 'OCR查询5',
// url: '/pages/devicesSearch/ocrSearch5',
// iconSrc: '../../static/searchModel/qrCode.png',
// },
{
title: '设备编码查询',
url: '/pages/devicesSearch/codeSearch',