From 9a3bfbe7cdac3beaab911349aa6d4a2bdc287155 Mon Sep 17 00:00:00 2001
From: user <user@example.com>
Date: Tue, 11 Mar 2025 09:50:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Tesseract=E8=AF=86=E5=88=AB=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=A2=9E=E5=8A=A0=E7=BA=A2=E8=89=B2=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 30 +++++++
 package.json                                  |  1 +
 .../app/shared/components/weight-reader.vue   | 82 +++++++++++++++++--
 .../app/transacts/process/process-print.vue   |  6 ++
 src/main/webapp/i18n/zh-cn/global.json        |  5 +-
 5 files changed, 116 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1672a5d..6bcd0c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@fortawesome/fontawesome-svg-core": "6.7.2",
         "@fortawesome/free-solid-svg-icons": "6.7.2",
         "@fortawesome/vue-fontawesome": "3.0.8",
+        "@paddlejs-models/ocr": "^1.2.4",
         "@vue/compat": "3.5.13",
         "@vuelidate/core": "2.0.3",
         "@vuelidate/validators": "2.0.4",
@@ -2583,6 +2584,35 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@paddlejs-mediapipe/opencv": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmmirror.com/@paddlejs-mediapipe/opencv/-/opencv-0.0.4.tgz",
+      "integrity": "sha512-bfwixZPKGFh7JcAtLToTBmBiu/nyQjVrm0gf/pn92apHJQEYyhnAFGvgDubmqQbijmtP2/fbOMR4CuSSlq2g8w==",
+      "license": "ISC"
+    },
+    "node_modules/@paddlejs-models/ocr": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@paddlejs-models/ocr/-/ocr-1.2.4.tgz",
+      "integrity": "sha512-mdvaWXQaCmLULEvCxcsUzHtDgmoDVzJX2LsqyMmJxSzfhgrtnscF1eLiLbaouDwg6n08koXP0BCzeB+0oAv/AQ==",
+      "license": "ISC",
+      "dependencies": {
+        "@paddlejs-mediapipe/opencv": "0.0.4",
+        "@paddlejs/paddlejs-backend-webgl": "^1.1.19",
+        "@paddlejs/paddlejs-core": "^2.1.17"
+      }
+    },
+    "node_modules/@paddlejs/paddlejs-backend-webgl": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmmirror.com/@paddlejs/paddlejs-backend-webgl/-/paddlejs-backend-webgl-1.2.9.tgz",
+      "integrity": "sha512-cVDa0/Wbw2EyfsYqdYUPhFeqKsET79keEUWjyhYQmQkJfWg8j1qdR6yp7g6nx9qAGrqFvwuj1s0EqkYA1dok6A==",
+      "license": "ISC"
+    },
+    "node_modules/@paddlejs/paddlejs-core": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@paddlejs/paddlejs-core/-/paddlejs-core-2.2.0.tgz",
+      "integrity": "sha512-P3rPkF9fFHtq8uSte5gA7fJQwBNl9Ytsvj6aTcfQSsirnBO/HxMNu0gJyh7+lItvEtF92PR15eI0eOwJYfZDhQ==",
+      "license": "ISC"
+    },
     "node_modules/@pinia/testing": {
       "version": "0.1.7",
       "resolved": "https://registry.npmmirror.com/@pinia/testing/-/testing-0.1.7.tgz",
diff --git a/package.json b/package.json
index 7acfc75..477593d 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/vue-fontawesome": "3.0.8",
+    "@paddlejs-models/ocr": "^1.2.4",
     "@vue/compat": "3.5.13",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
diff --git a/src/main/webapp/app/shared/components/weight-reader.vue b/src/main/webapp/app/shared/components/weight-reader.vue
index 4248701..3636265 100644
--- a/src/main/webapp/app/shared/components/weight-reader.vue
+++ b/src/main/webapp/app/shared/components/weight-reader.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="weight-reader-container">
     <div v-if="!cameraError">
-      <video ref="video" autoplay playsinline></video>
+      <div class="camera-view">
+        <video ref="video" autoplay playsinline></video>
+        <div class="overlay">
+          <div class="capture-frame"></div>
+        </div>
+      </div>
       <canvas ref="canvas" style="display: none"></canvas>
       <div class="weight-result">
         <p>
@@ -30,6 +35,7 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Tesseract from 'tesseract.js';
+//import ocr from "@paddlejs-models/ocr";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faRedo } from '@fortawesome/free-solid-svg-icons';
 
@@ -98,7 +104,7 @@ export default defineComponent({
 
     const startOCR = () => {
       hasValidWeight.value = false;
-      weight.value = t('entity.action.weightReader.initializing');
+      weight.value = t('entity.action.weightReader.reading');
       ocrInterval.value = window.setInterval(() => {
         captureFrame();
       }, 2000);
@@ -110,13 +116,43 @@ export default defineComponent({
       const ctx = canvas.value.getContext('2d');
       if (!ctx) return;
 
-      canvas.value.width = video.value.videoWidth;
-      canvas.value.height = video.value.videoHeight;
+      // 设置画布大小为识别框大小
+      canvas.value.width = 200; // 与capture-frame宽度相同
+      canvas.value.height = 80; // 与capture-frame高度相同
 
-      ctx.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height);
+      // 计算视频中心区域的坐标
+      const videoWidth = video.value.videoWidth;
+      const videoHeight = video.value.videoHeight;
+      const sourceX = (videoWidth - (200 * videoWidth) / video.value.offsetWidth) / 2;
+      const sourceY = (videoHeight - (80 * videoHeight) / video.value.offsetHeight) / 2;
+      const sourceWidth = (200 * videoWidth) / video.value.offsetWidth;
+      const sourceHeight = (80 * videoHeight) / video.value.offsetHeight;
+
+      // 只截取中心区域绘制到画布上
+      ctx.drawImage(video.value, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvas.value.width, canvas.value.height);
 
       const imageData = canvas.value.toDataURL('image/jpeg');
 
+      /*
+      const result = await ocr.recognize(imageData);
+      console.log("OCR 识别结果:", result);
+      
+      const numberMatch = result.text.match(/\d+\.\d+/); // 只提取数字
+      if (numberMatch && numberMatch.length > 0) {
+        const weightValue = numberMatch.reduce((max, current) => {
+              return parseFloat(current) > parseFloat(max) ? current : max;
+            }, '0');
+        if (parseFloat(weightValue) > 0) {
+          weight.value = weightValue;
+          //emit('weight', weightValue);
+          if (ocrInterval.value) {
+            window.clearInterval(ocrInterval.value);
+            ocrInterval.value = null;
+            hasValidWeight.value = true;
+          }
+        }
+      }
+      */
       Tesseract.recognize(imageData, 'eng', {
         logger: m => {},
       })
@@ -155,6 +191,7 @@ export default defineComponent({
     onMounted(() => {
       video.value = document.querySelector('video');
       canvas.value = document.querySelector('canvas');
+      //await ocr.loadModel(); // 预加载 Paddle.js OCR 模型
       startCamera();
     });
 
@@ -185,12 +222,45 @@ export default defineComponent({
   text-align: center;
 }
 
+.camera-view {
+  position: relative;
+  width: 100%;
+  max-height: 300px;
+  margin-bottom: 10px;
+}
+
 video {
   width: 100%;
   max-height: 300px;
   border: 2px solid #ddd;
   border-radius: 8px;
-  margin-bottom: 10px;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  mask:
+    linear-gradient(#000 0 0) center/200px 80px no-repeat,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#000 0 0) center/200px 80px no-repeat,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+}
+
+.capture-frame {
+  width: 200px;
+  height: 80px;
+  border: 2px solid #ff0000;
+  background: transparent;
 }
 
 .weight-result {
diff --git a/src/main/webapp/app/transacts/process/process-print.vue b/src/main/webapp/app/transacts/process/process-print.vue
index b4a1c10..c6d66ac 100644
--- a/src/main/webapp/app/transacts/process/process-print.vue
+++ b/src/main/webapp/app/transacts/process/process-print.vue
@@ -101,6 +101,12 @@
             </tbody>
           </table>
         </div>
+        <div class="signature-row">
+          <div class="signature-item">
+            <span class="signature-label">接收日期：</span>
+            <div class="signature-line"></div>
+          </div>
+        </div>
       </div>
       <!-- 签名区域 -->
       <div class="print-section signature-section">
diff --git a/src/main/webapp/i18n/zh-cn/global.json b/src/main/webapp/i18n/zh-cn/global.json
index 8634fc7..54c3354 100644
--- a/src/main/webapp/i18n/zh-cn/global.json
+++ b/src/main/webapp/i18n/zh-cn/global.json
@@ -152,8 +152,9 @@
       "select": "(选择)",
       "null": "(无)",
       "weightReader": {
-        "initializing": "初始化中...",
-        "realtime": "实时重量"
+        "initializing": "初始化...",
+        "reading": "扫描中...",
+        "realtime": "识别值"
       },
       "camera": {
         "open": "打开相机",