fixed

src/components/PdfViewer/index.vue

@@ -152,9 +152,10 @@
       },
       showCaptureButton() {
         if (this.selection && this.selection.width > 50 && this.selection.height > 30) {
+
           this.captureButtonStyle = {
-            left: `${this.startPoint.x - this.scrollPoint.x + 1}px`,
+            left: `${this.selection.x - this.scrollPoint.x + 1}px`,
-            top: `${this.startPoint.y - this.scrollPoint.y + 1}px`,
+            top: `${this.selection.y - this.scrollPoint.y + 1}px`,
             position: 'absolute',
             borderRadius: 0,
           };

src/views/data/task/index.vue

@@ -8,11 +8,32 @@
       <template #toolbar>
         <a-button type="primary" @click="handleCreate" :icon="h(PlusOutlined)">新 增</a-button>
         <div style="width: 5px" />
-        <a-button type="default" :icon="h(EyeOutlined)" @click="handleOpenFileDialog(null)">OCR识别</a-button>
+        <a-button type="default" :icon="h(EyeOutlined)" @click="handleOpenFileDialog(null)"
-        <input type="file" ref="fileInput" accept="application/pdf" aria-hidden="true" @change="handleFileChange" style="display: none;" />
+          >OCR识别</a-button
+        >
+        <input
+          type="file"
+          ref="fileInput"
+          accept="application/pdf"
+          aria-hidden="true"
+          @change="handleFileChange"
+          style="display: none"
+        />
         <div style="width: 5px" />
-        <a-button type="default" @click="handleDownload" :icon="h(DownloadOutlined)" :disabled="checkedKeys.length === 0">下发数据</a-button>
+        <a-button
-        <a-button type="default" @click="handleSync" :icon="h(SyncOutlined)" :disabled="checkedKeys.length === 0">同步数据</a-button>
+          type="default"
+          @click="handleDownload"
+          :icon="h(DownloadOutlined)"
+          :disabled="checkedKeys.length === 0"
+          >下发数据</a-button
+        >
+        <a-button
+          type="default"
+          @click="handleSync"
+          :icon="h(SyncOutlined)"
+          :disabled="checkedKeys.length === 0"
+          >同步数据</a-button
+        >
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.dataIndex === 'action'">
@@ -23,7 +44,7 @@
                 icon: 'clarity:note-edit-line',
                 onClick: handleEdit.bind(null, record),
                 divider: true,
-                disabled: record.state !== 0
+                disabled: record.state !== 0,
               },
               {
                 label: '删除',
@@ -49,46 +70,54 @@
                 icon: 'ant-design:download-outlined',
                 onClick: handleDownload.bind(null, record),
                 divider: true,
-                disabled: record.state !== 0 || !getDeviceConnected(record.deviceSn)
+                disabled: record.state !== 0 || !getDeviceConnected(record.deviceSn),
               },
               {
                 label: '同步数据',
                 icon: 'ant-design:sync-outlined',
                 onClick: handleSync.bind(null, record),
                 divider: true,
-                disabled: !getDeviceConnected(record.deviceSn)
+                disabled: !getDeviceConnected(record.deviceSn),
               },
             ]"
           />
         </template>
       </template>
     </BasicTable>
-    <TaskDrawer ref="taskDrawer" @register="registerDrawer" @success="handleSuccess" @ocrClick="handleOpenFileDialog" />
+    <TaskDrawer
+      ref="taskDrawer"
+      @register="registerDrawer"
+      @success="handleSuccess"
+      @ocrClick="handleOpenFileDialog"
+    />
     <PdfViewer ref="pdfView" @onCapture="handleCapture" />
     <Result @register="register" />
+    <Loading
+      :loading="isLoading"
+      :absolute="false"
+      tip="OCR识别中..."
+      :size="SizeEnum.LARGElarge"
+      theme="dark"
+    />
   </div>
 </template>
 <script lang="ts" setup>
   import { usePermission } from '@/hooks/web/usePermission';
-  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
   import { isObject } from '@/utils/is';
   import dayjs from 'dayjs';
   import * as TaskApi from '@/api/data/taskApi';
   import { useDrawer } from '@/components/Drawer';
   import TaskDrawer from './drawer.vue';
   import { columns, searchFormSchema } from './schema';
-  import {SvgIcon} from "@/components/Icon";
+  import { SvgIcon } from '@/components/Icon';
-  import {h, ref} from "vue";
+  import { computed, h, onMounted, onUnmounted, ref } from 'vue';
-  import { onMounted, onUnmounted, computed } from "vue";
+  import { DownloadOutlined, EyeOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons-vue';
-  import {
+  import PdfViewer from '@/components/PdfViewer/index.vue';
-    DownloadOutlined,
+  import { useModal } from '@/components/Modal';
-    EyeOutlined,
+  import Result from '@/views/data/task/result.vue';
-    PlusOutlined,
+  import { Loading } from '@/components/Loading';
-    SyncOutlined
+  import { SizeEnum } from '@/enums/sizeEnum';
-  } from "@ant-design/icons-vue";
-  import PdfViewer from "@/components/PdfViewer/index.vue";
-  import {useModal} from "@/components/Modal";
-  import Result from "@/views/data/task/result.vue";
 
   const [register, { openModal }] = useModal();
 
@@ -96,8 +125,8 @@
   const { hasPermission } = usePermission();
   const checkedKeys = ref<Array<string | number>>([]);
   const onSelectChange = (selectedRowKeys: (string | number)[]) => {
-    checkedKeys.value = selectedRowKeys.filter(k => typeof k !== 'undefined');
+    checkedKeys.value = selectedRowKeys.filter((k) => typeof k !== 'undefined');
-  }
+  };
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerTable, { reload }] = useTable({
     api: (params) => TaskApi.search(handleParams(params)),
@@ -110,7 +139,7 @@
     rowSelection: {
       type: 'checkbox',
       onChange: onSelectChange,
-      getCheckboxProps: (record) => ({ disabled: record.state !== 0})
+      getCheckboxProps: (record) => ({ disabled: record.state !== 0 }),
     },
     useSearchForm: true,
     showTableSetting: false,
@@ -125,10 +154,14 @@
       fixed: undefined,
     },
   });
-
+  const isLoading = ref(false);
   const handleParams = (params: any) => {
     const { pageNum, pageSize, field = 'id', order = 'descend', ...rest } = params;
-    const handledParams: any = { pageNum, pageSize, orderByClause: `${field} ${order === 'descend' ? 'desc' : 'asc'}` };
+    const handledParams: any = {
+      pageNum,
+      pageSize,
+      orderByClause: `${field} ${order === 'descend' ? 'desc' : 'asc'}`,
+    };
     Object.keys(rest).forEach((key) => {
       const schema = searchFormSchema.find((item) => item.field === key);
       const value = params[key];
@@ -143,10 +176,16 @@
             if (paramKey === 'startTimeQuery') {
               paramKey = 'startTime';
             }
-            handledParams[`${paramKey}From`] = dayjs(value[0]).startOf('d').format('YYYY-MM-DD HH:mm:ss');
+            handledParams[`${paramKey}From`] = dayjs(value[0])
-            handledParams[`${paramKey}To`] = dayjs(value[1]).endOf('d').format('YYYY-MM-DD HH:mm:ss');
+              .startOf('d')
+              .format('YYYY-MM-DD HH:mm:ss');
+            handledParams[`${paramKey}To`] = dayjs(value[1])
+              .endOf('d')
+              .format('YYYY-MM-DD HH:mm:ss');
           } else if (schema.component === 'DatePicker') {
-            handledParams[paramKey] = dayjs(value).format((schema.componentProps as any).format || 'YYYY-MM-DD');
+            handledParams[paramKey] = dayjs(value).format(
+              (schema.componentProps as any).format || 'YYYY-MM-DD',
+            );
           } else {
             handledParams[paramKey] = value;
           }
@@ -183,7 +222,7 @@
 
   const handleView = (record: any) => {
     const params = JSON.parse(record.paramJson);
-    params.forEach(d => {
+    params.forEach((d) => {
       const r = Math.ceil(Math.random() * 10) - 3;
       d.l1 = r + parseInt(d.w);
       d.l2 = r + parseInt(d.h);
@@ -195,7 +234,7 @@
       d.result = r >= -2 && r <= 5 ? 'OK' : 'NG';
     });
     record.resultJson = JSON.stringify(params);
-    openModal(true, {record});
+    openModal(true, { record });
   };
 
   let ocrData = null;
@@ -225,51 +264,64 @@
   };
 
   const handleCapture = (base64ImageString: any) => {
-    WebViewService.setIsLoading(true).then(() => {});
+    isLoading.value = true;
-    TaskApi.importByOCR(base64ImageString).then((res: any) => {
+    OCRService.importByOCR(base64ImageString).then(
-      const data = JSON.parse(res);
+      (res: any) => {
-      if (data.length === 0) return;
+        const data = JSON.parse(res);
-      if (ocrData === null) {
+        if (data.length === 0) return;
-        const record = {
+        if (ocrData === null) {
-          name: '',
+          const record = {
-          paramJson: JSON.stringify(data),
+            name: '',
-        };
+            paramJson: JSON.stringify(data),
-        // 打开新增
+          };
-        openDrawer(true, {
+          // 打开新增
-          record,
+          openDrawer(true, {
-          isUpdate: false,
+            record,
-        });
+            isUpdate: false,
-      } else {
+          });
-        taskDrawer.value?.setParamData(data);
+        } else {
-      }
+          taskDrawer.value?.setParamData(data);
-      WebViewService.setMessage("数据导入成功！", "success").then(() => {});
+        }
-    }).catch(() => {
+        WebViewService.setMessage('数据导入成功！', 'success').then(() => {});
-      WebViewService.setMessage("数据导入失败！", "error").then(() => {});
+        isLoading.value = false;
-    }).finally(() => {
+      },
-      WebViewService.setIsLoading(false).then(() => {});
+      (error: any) => {
-    });
+        WebViewService.setMessage('数据导入失败！', 'error').then(() => {});
-  }
+        isLoading.value = false;
+      },
+    );
+  };
 
   const handleDownload = (record: Recordable) => {
-    const ids = [...new Set([...(record.id ? [record.id] : []), ...(checkedKeys.value.map(d => (d)))])]
+    const ids = [
-    DeviceClientService.assignTasks(ids).then(() => {
+      ...new Set([...(record.id ? [record.id] : []), ...checkedKeys.value.map((d) => d)]),
-      WebViewService.setMessage("下发任务成功！", "success").then(() => {});
+    ];
-    }, (error: any) => {
+    DeviceClientService.assignTasks(ids).then(
-      WebViewService.setMessage("下发任务失败！", "error").then(() => {});
+      () => {
-    });
+        WebViewService.setMessage('下发任务成功！', 'success').then(() => {});
+      },
+      (error: any) => {
+        WebViewService.setMessage('下发任务失败！', 'error').then(() => {});
+      },
+    );
   };
 
   const handleSync = (record: Recordable) => {
-    const ids = [...new Set([...(record.id ? [record.id] : []), ...(checkedKeys.value.map(d => (d)))])]
+    const ids = [
-    DeviceClientService.syncTasks(ids).then(() => {
+      ...new Set([...(record.id ? [record.id] : []), ...checkedKeys.value.map((d) => d)]),
-      WebViewService.setMessage("同步任务成功！", "success").then(() => {});
+    ];
-      reload();
+    DeviceClientService.syncTasks(ids).then(
-    }, (error: any) => {
+      () => {
-      WebViewService.setMessage("同步任务失败！", "error").then(() => {});
+        WebViewService.setMessage('同步任务成功！', 'success').then(() => {});
-    });
+        reload();
+      },
+      (error: any) => {
+        WebViewService.setMessage('同步任务失败！', 'error').then(() => {});
+      },
+    );
   };
 
-  const deviceConnectedList = ref([])
+  const deviceConnectedList = ref([]);
 
   const getDeviceConnected = computed(() => {
     return (sn: any) => {
@@ -278,19 +330,22 @@
   });
 
   const timer = ref<any>();
-  onMounted(()=> {
+  onMounted(() => {
     timer.value = setInterval(() => {
-      DeviceClientService.getDeviceConnected().then((d) => {
+      DeviceClientService.getDeviceConnected().then(
-        deviceConnectedList.value = d;
+        (d) => {
-      }, _ => {
+          deviceConnectedList.value = d;
-        WebViewService.setMessage("获取设备连接出错", "error").then(() => {});
+        },
-      });
+        (_) => {
+          WebViewService.setMessage('获取设备连接出错', 'error').then(() => {});
+        },
+      );
     }, 300);
 
     WebViewService.setIsLoading(false).then(() => {});
   });
 
-  onUnmounted(()=> {
+  onUnmounted(() => {
     clearInterval(timer.value);
   });
 </script>

types/index.d.ts

@@ -30,3 +30,4 @@ declare let AMap: any;
 
 declare let DeviceClientService: any;
 declare let WebViewService: any;
+declare let OCRService: any;