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-14 17:21:25 +08:00
parent 9db1d27321
commit a11db57ff0
4 changed files with 139 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/pages/devicesSearch/ocrSearch.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="page-container"> <view class="page-container" v-show="!showCamera">
<!-- 设备搜索页面 --> <!-- 设备搜索页面 -->
<view v-if="!showCamera"> <view v-if="!showCamera">
<view class="table-list-item"> <view class="table-list-item">
@ -102,38 +102,6 @@
</view> </view>
<!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-container">
<!-- 顶部提示 -->
<view class="top-tip">
<text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
</view>
<!-- 取景框 -->
<view class="viewfinder-container">
</view>
<!-- 底部控制区 -->
<view class="bottom-controls">
<view class="control-btn" @click="closeCamera">
<text class="control-icon">✕</text>
</view>
<view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
<view class="photo-btn-inner"></view>
</view>
<view class="control-btn" @click="openGallery">
<text class="control-icon">📷</text>
</view>
</view>
<!-- 加载提示 -->
<view v-if="isProcessing" class="loading-overlay">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">正在识别中...</text>
</view>
</view>
</view>
<!-- 隐藏的canvas用于图片处理 --> <!-- 隐藏的canvas用于图片处理 -->
<canvas <canvas
canvas-id="imageCanvas" canvas-id="imageCanvas"
@ -144,10 +112,40 @@
<ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="2" /> <ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="2" />
</div> </div>
</view> </view>
<!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-container">
<!-- 顶部提示 -->
<view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
<text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
</view>
<!-- 取景框 -->
<view class="viewfinder-container">
</view>
<!-- 底部控制区 -->
<view class="bottom-controls">
<view class="control-btn" @click="closeCamera">
<text class="control-icon">✕</text>
</view>
<view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
<view class="photo-btn-inner"></view>
</view>
<view class="control-btn" @click="openGallery">
<text class="control-icon">📷</text>
</view>
</view>
<!-- 加载提示 -->
<view v-if="isProcessing" class="loading-overlay">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">正在识别中...</text>
</view>
</view>
</view>
</template> </template>
<script> <script>
import ImageUtils from "../../services/utils/imageUtils";
import {decryptWithSM4} from "../../utils/sm"; import {decryptWithSM4} from "../../utils/sm";
import {getDeviceListAPI} from "../../services/picking/outbound"; import {getDeviceListAPI} from "../../services/picking/outbound";
import ElectronicSeal from '@/components/ElectronicSeal/index.vue' import ElectronicSeal from '@/components/ElectronicSeal/index.vue'
@ -393,9 +391,7 @@ export default {
tapFocus: true, tapFocus: true,
disableExifHeaderStripping: false disableExifHeaderStripping: false
}; };
console.log('相机配置:', options); console.log('相机配置:', options);
CameraPreview.startCamera( CameraPreview.startCamera(
options, options,
(result) => { (result) => {
@ -411,18 +407,6 @@ export default {
); );
}); });
}, },
// 处理覆盖层点击事件
handleOverlayClick(event) {
// 计算点击位置相对于相机的坐标
const rect = event.currentTarget.getBoundingClientRect();
const x = event.touches[0].clientX - rect.left;
const y = event.touches[0].clientY - rect.top;
// 调用聚焦功能
this.tapToFocus(x, y);
},
// 点击聚焦 // 点击聚焦
tapToFocus(x, y) { tapToFocus(x, y) {
const CameraPreview = this.getCameraPlugin(); const CameraPreview = this.getCameraPlugin();
@ -550,7 +534,7 @@ export default {
}); });
}, },
// 处理图片 - 使用ImageUtils // 处理图片
async processImage(imageData) { async processImage(imageData) {
this.isProcessing = true; this.isProcessing = true;
try { try {
@ -559,8 +543,7 @@ export default {
// cleanBase64 也是纯base64（无前缀） // cleanBase64 也是纯base64（无前缀）
console.log('清理后的纯base64:', cleanBase64); console.log('清理后的纯base64:', cleanBase64);
console.log('开始处理图片...'); console.log('开始OCR识别...');
console.log('图片处理完成，开始OCR识别...');
uni.request({ uni.request({
url: '/material/app/ocr/getOcrCode', url: '/material/app/ocr/getOcrCode',
@ -579,14 +562,7 @@ export default {
} else { } else {
res =res.data res =res.data
} }
console.log("res", res);
console.log("res.data",res.data)
const {data: resData} = res const {data: resData} = res
console.log("resData",resData)
console.log("resData.data",resData.data)
console.log("resData.code",resData.code)
console.log("resData.data.result",resData.data.result)
if (resData.code===0){ if (resData.code===0){
if (resData.data.result) { if (resData.data.result) {
this.queryCodeParams.maCode = resData.data.result this.queryCodeParams.maCode = resData.data.result
@ -662,40 +638,12 @@ export default {
} }
}); });
}, },
// // 打开相册 // 将图片转换为base64
// openGallery() {
// uni.chooseImage({
// count: 1,
// sourceType: ['album'],
// success: (res) => {
// if (res.tempFilePaths && res.tempFilePaths.length > 0) {
// this.convertImageToBase64(res.tempFilePaths[0]);
// }
// },
// fail: (error) => {
// console.error('选择图片失败:', error);
// uni.showToast({
// title: '选择图片失败',
// icon: 'none'
// });
// }
// });
// },
// 将图片转换为base64 - 使用ImageUtils处理
async convertImageToBase64(processedBase64) { async convertImageToBase64(processedBase64) {
this.isProcessing = true; this.isProcessing = true;
try { try {
console.log('开始处理相册图片...');
console.log('相册base64数据', processedBase64); console.log('相册base64数据', processedBase64);
// 使用ImageUtils处理相册图片 console.log('开始OCR识别...');
// const processedBase64 = await ImageUtils.processImage(filePath, {
// maxWidth: 1024,
// maxHeight: 1024,
// quality: 50,
// outputFormat: 'base64'
// });
console.log('相册图片处理完成，开始OCR识别...');
uni.request({ uni.request({
url: '/material/app/ocr/getOcrCode', url: '/material/app/ocr/getOcrCode',

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

@ -1,5 +1,5 @@
<template> <template>
<view class="page-container"> <view class="page-container" v-show="!showCamera">
<!-- 设备搜索页面 --> <!-- 设备搜索页面 -->
<view v-if="!showCamera"> <view v-if="!showCamera">
<view class="table-list-item"> <view class="table-list-item">
@ -102,38 +102,6 @@
</view> </view>
<!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-container">
<!-- 顶部提示 -->
<view class="top-tip">
<text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
</view>
<!-- 取景框 -->
<view class="viewfinder-container">
</view>
<!-- 底部控制区 -->
<view class="bottom-controls">
<view class="control-btn" @click="closeCamera">
<text class="control-icon">✕</text>
</view>
<view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
<view class="photo-btn-inner"></view>
</view>
<view class="control-btn" @click="openGallery">
<text class="control-icon">📷</text>
</view>
</view>
<!-- 加载提示 -->
<view v-if="isProcessing" class="loading-overlay">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">正在识别中...</text>
</view>
</view>
</view>
<!-- 隐藏的canvas用于图片处理 --> <!-- 隐藏的canvas用于图片处理 -->
<canvas <canvas
canvas-id="imageCanvas" canvas-id="imageCanvas"
@ -144,6 +112,37 @@
<ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="codeData.devType" /> <ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="codeData.devType" />
</div> </div>
</view> </view>
<!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-container">
<!-- 顶部提示 -->
<view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
<text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
</view>
<!-- 取景框 -->
<view class="viewfinder-container">
</view>
<!-- 底部控制区 -->
<view class="bottom-controls">
<view class="control-btn" @click="closeCamera">
<text class="control-icon">✕</text>
</view>
<view class="photo-btn" @click="takePicture" :class="{ 'taking': isTaking, 'disabled': isFocusing }">
<view class="photo-btn-inner"></view>
</view>
<view class="control-btn" @click="openGallery">
<text class="control-icon">📷</text>
</view>
</view>
<!-- 加载提示 -->
<view v-if="isProcessing" class="loading-overlay">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">正在识别中...</text>
</view>
</view>
</view>
</template> </template>
<script> <script>

70
src/pages/materialsStation/toolsLease/ocrScan/ocrOutScan.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="page-container"> <view class="page-container" v-show="!showCamera">
<!-- 设备搜索页面 --> <!-- 设备搜索页面 -->
<view v-if="!showCamera"> <view v-if="!showCamera">
<view class="table-list-item"> <view class="table-list-item">
@ -60,40 +60,6 @@
<button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button> <button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button>
</view> </view>
<!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-container">
<!-- 顶部提示 -->
<view class="top-tip">
<text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
</view>
<!-- 取景框 -->
<view class="viewfinder-container"> </view>
<!-- 底部控制区 -->
<view class="bottom-controls">
<view class="control-btn" @click="closeCamera">
<text class="control-icon">✕</text>
</view>
<view
class="photo-btn"
@click="takePicture"
:class="{ taking: isTaking, disabled: isFocusing }"
>
<view class="photo-btn-inner"></view>
</view>
<view class="control-btn" @click="openGallery">
<text class="control-icon">📷</text>
</view>
</view>
<!-- 加载提示 -->
<view v-if="isProcessing" class="loading-overlay">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">正在识别中...</text>
</view>
</view>
</view>
<!-- 隐藏的canvas用于图片处理 --> <!-- 隐藏的canvas用于图片处理 -->
<canvas <canvas
@ -101,6 +67,40 @@
style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px" style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px"
></canvas> ></canvas>
</view> </view>
<!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-container">
<!-- 顶部提示 -->
<view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
<text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
</view>
<!-- 取景框 -->
<view class="viewfinder-container"> </view>
<!-- 底部控制区 -->
<view class="bottom-controls">
<view class="control-btn" @click="closeCamera">
<text class="control-icon">✕</text>
</view>
<view
class="photo-btn"
@click="takePicture"
:class="{ taking: isTaking, disabled: isFocusing }"
>
<view class="photo-btn-inner"></view>
</view>
<view class="control-btn" @click="openGallery">
<text class="control-icon">📷</text>
</view>
</view>
<!-- 加载提示 -->
<view v-if="isProcessing" class="loading-overlay">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">正在识别中...</text>
</view>
</view>
</view>
</template> </template>
<script> <script>

71
src/pages/picking/outbound/codeOutScan.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="page-container"> <view class="page-container" v-show="!showCamera">
<!-- 设备搜索页面 --> <!-- 设备搜索页面 -->
<view v-if="!showCamera"> <view v-if="!showCamera">
<view class="table-list-item"> <view class="table-list-item">
@ -65,40 +65,6 @@
<button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button> <button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button>
</view> </view>
<!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-container">
<!-- 顶部提示 -->
<view class="top-tip">
<text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
</view>
<!-- 取景框 -->
<view class="viewfinder-container"> </view>
<!-- 底部控制区 -->
<view class="bottom-controls">
<view class="control-btn" @click="closeCamera">
<text class="control-icon">✕</text>
</view>
<view
class="photo-btn"
@click="takePicture"
:class="{ taking: isTaking, disabled: isFocusing }"
>
<view class="photo-btn-inner"></view>
</view>
<view class="control-btn" @click="openGallery">
<text class="control-icon">📷</text>
</view>
</view>
<!-- 加载提示 -->
<view v-if="isProcessing" class="loading-overlay">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">正在识别中...</text>
</view>
</view>
</view>
<!-- 隐藏的canvas用于图片处理 --> <!-- 隐藏的canvas用于图片处理 -->
<canvas <canvas
@ -106,6 +72,41 @@
style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px" style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px"
></canvas> ></canvas>
</view> </view>
<!-- 相机预览页面 -->
<view v-if="showCamera" class="camera-container">
<!-- 顶部提示 -->
<view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
<text class="tip-text">请将识别编码置于取景框内，完成扫描</text>
</view>
<!-- 取景框 -->
<view class="viewfinder-container"> </view>
<!-- 底部控制区 -->
<view class="bottom-controls">
<view class="control-btn" @click="closeCamera">
<text class="control-icon">✕</text>
</view>
<view
class="photo-btn"
@click="takePicture"
:class="{ taking: isTaking, disabled: isFocusing }"
>
<view class="photo-btn-inner"></view>
</view>
<view class="control-btn" @click="openGallery">
<text class="control-icon">📷</text>
</view>
</view>
<!-- 加载提示 -->
<view v-if="isProcessing" class="loading-overlay">
<view class="loading-content">
<view class="loading-spinner"></view>
<text class="loading-text">正在识别中...</text>
</view>
</view>
</view>
</template> </template>
<script> <script>