ocr

src/pages/devicesSearch/ocrSearch2.vue

@@ -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;

src/pages/search/index.vue

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