ocr页面
This commit is contained in:
		
							parent
							
								
									9db1d27321
								
							
						
					
					
						commit
						a11db57ff0
					
				| 
						 | 
					@ -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,10 +102,20 @@
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
    
 | 
					    
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!-- 隐藏的canvas用于图片处理 -->
 | 
				
			||||||
 | 
					    <canvas
 | 
				
			||||||
 | 
					        canvas-id="imageCanvas"
 | 
				
			||||||
 | 
					        style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px;"
 | 
				
			||||||
 | 
					    ></canvas>
 | 
				
			||||||
 | 
					    <div style="width: 100%;">
 | 
				
			||||||
 | 
					      <div v-if="isOverToday && codeData.nextCheckTime">该工器具已临近下次检验时间,请及时退还至机具(物流)分公司!</div>
 | 
				
			||||||
 | 
					      <ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="2" />
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					  </view>
 | 
				
			||||||
  <!-- 相机预览页面 -->
 | 
					  <!-- 相机预览页面 -->
 | 
				
			||||||
  <view v-if="showCamera" class="camera-container">
 | 
					  <view v-if="showCamera" class="camera-container">
 | 
				
			||||||
    <!-- 顶部提示 -->
 | 
					    <!-- 顶部提示 -->
 | 
				
			||||||
      <view class="top-tip">
 | 
					    <view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
 | 
				
			||||||
      <text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
 | 
					      <text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
    <!-- 取景框 -->
 | 
					    <!-- 取景框 -->
 | 
				
			||||||
| 
						 | 
					@ -133,21 +143,9 @@
 | 
				
			||||||
      </view>
 | 
					      </view>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
  </view>
 | 
					  </view>
 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- 隐藏的canvas用于图片处理 -->
 | 
					 | 
				
			||||||
    <canvas
 | 
					 | 
				
			||||||
        canvas-id="imageCanvas"
 | 
					 | 
				
			||||||
        style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px;"
 | 
					 | 
				
			||||||
    ></canvas>
 | 
					 | 
				
			||||||
    <div style="width: 100%;">
 | 
					 | 
				
			||||||
      <div v-if="isOverToday && codeData.nextCheckTime">该工器具已临近下次检验时间,请及时退还至机具(物流)分公司!</div>
 | 
					 | 
				
			||||||
      <ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="2" />
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  </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',
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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,10 +102,20 @@
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!-- 隐藏的canvas用于图片处理 -->
 | 
				
			||||||
 | 
					    <canvas
 | 
				
			||||||
 | 
					        canvas-id="imageCanvas"
 | 
				
			||||||
 | 
					        style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px;"
 | 
				
			||||||
 | 
					    ></canvas>
 | 
				
			||||||
 | 
					    <div style="width: 100%;">
 | 
				
			||||||
 | 
					      <div v-if="isOverToday && codeData.nextCheckTime">该工器具已临近下次检验时间,请及时退还至机具(物流)分公司!</div>
 | 
				
			||||||
 | 
					      <ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="codeData.devType" />
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					  </view>
 | 
				
			||||||
  <!-- 相机预览页面 -->
 | 
					  <!-- 相机预览页面 -->
 | 
				
			||||||
  <view v-if="showCamera" class="camera-container">
 | 
					  <view v-if="showCamera" class="camera-container">
 | 
				
			||||||
    <!-- 顶部提示 -->
 | 
					    <!-- 顶部提示 -->
 | 
				
			||||||
      <view class="top-tip">
 | 
					    <view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
 | 
				
			||||||
      <text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
 | 
					      <text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
    <!-- 取景框 -->
 | 
					    <!-- 取景框 -->
 | 
				
			||||||
| 
						 | 
					@ -133,17 +143,6 @@
 | 
				
			||||||
      </view>
 | 
					      </view>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
  </view>
 | 
					  </view>
 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- 隐藏的canvas用于图片处理 -->
 | 
					 | 
				
			||||||
    <canvas
 | 
					 | 
				
			||||||
        canvas-id="imageCanvas"
 | 
					 | 
				
			||||||
        style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px;"
 | 
					 | 
				
			||||||
    ></canvas>
 | 
					 | 
				
			||||||
    <div style="width: 100%;">
 | 
					 | 
				
			||||||
      <div v-if="isOverToday && codeData.nextCheckTime">该工器具已临近下次检验时间,请及时退还至机具(物流)分公司!</div>
 | 
					 | 
				
			||||||
      <ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="codeData.devType" />
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  </view>
 | 
					 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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,10 +60,17 @@
 | 
				
			||||||
      <button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button>
 | 
					      <button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!-- 隐藏的canvas用于图片处理 -->
 | 
				
			||||||
 | 
					    <canvas
 | 
				
			||||||
 | 
					      canvas-id="imageCanvas"
 | 
				
			||||||
 | 
					      style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px"
 | 
				
			||||||
 | 
					    ></canvas>
 | 
				
			||||||
 | 
					  </view>
 | 
				
			||||||
  <!-- 相机预览页面 -->
 | 
					  <!-- 相机预览页面 -->
 | 
				
			||||||
  <view v-if="showCamera" class="camera-container">
 | 
					  <view v-if="showCamera" class="camera-container">
 | 
				
			||||||
    <!-- 顶部提示 -->
 | 
					    <!-- 顶部提示 -->
 | 
				
			||||||
      <view class="top-tip">
 | 
					    <view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
 | 
				
			||||||
      <text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
 | 
					      <text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
    <!-- 取景框 -->
 | 
					    <!-- 取景框 -->
 | 
				
			||||||
| 
						 | 
					@ -94,13 +101,6 @@
 | 
				
			||||||
      </view>
 | 
					      </view>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
  </view>
 | 
					  </view>
 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- 隐藏的canvas用于图片处理 -->
 | 
					 | 
				
			||||||
    <canvas
 | 
					 | 
				
			||||||
      canvas-id="imageCanvas"
 | 
					 | 
				
			||||||
      style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px"
 | 
					 | 
				
			||||||
    ></canvas>
 | 
					 | 
				
			||||||
  </view>
 | 
					 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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,10 +65,17 @@
 | 
				
			||||||
      <button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button>
 | 
					      <button type="primary" style="margin-top: 20px" @click="addCode">添加编码</button>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!-- 隐藏的canvas用于图片处理 -->
 | 
				
			||||||
 | 
					    <canvas
 | 
				
			||||||
 | 
					      canvas-id="imageCanvas"
 | 
				
			||||||
 | 
					      style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px"
 | 
				
			||||||
 | 
					    ></canvas>
 | 
				
			||||||
 | 
					  </view>
 | 
				
			||||||
  <!-- 相机预览页面 -->
 | 
					  <!-- 相机预览页面 -->
 | 
				
			||||||
  <view v-if="showCamera" class="camera-container">
 | 
					  <view v-if="showCamera" class="camera-container">
 | 
				
			||||||
    <!-- 顶部提示 -->
 | 
					    <!-- 顶部提示 -->
 | 
				
			||||||
      <view class="top-tip">
 | 
					    <view class="top-tip" style="color: red; text-align: center;margin-top: 30px;">
 | 
				
			||||||
      <text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
 | 
					      <text class="tip-text">请将识别编码置于取景框内,完成扫描</text>
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
    <!-- 取景框 -->
 | 
					    <!-- 取景框 -->
 | 
				
			||||||
| 
						 | 
					@ -100,12 +107,6 @@
 | 
				
			||||||
    </view>
 | 
					    </view>
 | 
				
			||||||
  </view>
 | 
					  </view>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <!-- 隐藏的canvas用于图片处理 -->
 | 
					 | 
				
			||||||
    <canvas
 | 
					 | 
				
			||||||
      canvas-id="imageCanvas"
 | 
					 | 
				
			||||||
      style="position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px"
 | 
					 | 
				
			||||||
    ></canvas>
 | 
					 | 
				
			||||||
  </view>
 | 
					 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue