[web_demo] 表格识别结果展示部分效果优化

src/api/index.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const server = axios.create({
-  baseURL: "http://192.168.10.52:80",
+  baseURL: "http://192.168.10.80:80",
 });
 
 server.interceptors.request.use(

src/pages/main/views/Recognize/tableRec.vue

@@ -51,12 +51,15 @@
       <div class="demo-collapse">
         <el-collapse v-model="activeName" accordion>
           <el-collapse-item title="JSON识别结果" name="1">
-            <!-- <span v-html="json_result"></span> -->
-            <li v-for="(item, index) in jsonArr" :key="index">{{ item }}</li>
+            <li v-for="(item, index) in jsonArr" :key="index">
+              <el-scrollbar height="600px">
+                {{ item }}
+              </el-scrollbar>
+            </li>
           </el-collapse-item>
           <el-collapse-item title="识别结果" name="2">
             <li v-for="(item, index) in htmlArr" :key="index">
-              <el-scrollbar>
+              <el-scrollbar height="600px">
                 <div style="display: flex;">
                   <span v-html="item"></span>
                 </div>
@@ -148,7 +151,7 @@ const uploadImg = () => {
         is_pdf.value = true
         loadingTask = createLoadingTask(state.source);
         getPdfImage(state.pageNum);
-      } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp"){
+      } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp") {
         showImg.src = URL.createObjectURL(file);
         rawImg.src = URL.createObjectURL(file);
         is_pdf.value = false
@@ -189,26 +192,26 @@ const predict = async () => {
       console.log(result)
       data.append('images', result);
       TableRec(data).then(res => {
-      console.log(res.code)
-      bug_id.value = res.response_id;
-      predictTime.value = res.data.cost;
-      jsonArr.value.splice(0);
-      let tmp_json = res.data.json_items;
-      for (let i = 0; i < tmp_json.length; i++) {
-        jsonArr.value.push(JSON.stringify(tmp_json[i], null, 4));
-      }
-
-      htmlArr.value.splice(0);
-      let tmp_html = res.data.html_items;
-      for (let i = 0; i < tmp_html.length; i++) {
-        htmlArr.value.push(tmp_html[i]);
-      }
-      loading.value = false
-    }).catch(function (err) {
-      loading.value = false
-      bug_id.value = ""
-      predictTime.value = 0
-    });
+        console.log(res.code)
+        bug_id.value = res.response_id;
+        predictTime.value = res.data.cost;
+        jsonArr.value.splice(0);
+        let tmp_json = res.data.json_items;
+        for (let i = 0; i < tmp_json.length; i++) {
+          jsonArr.value.push(JSON.stringify(tmp_json[i], null, 4));
+        }
+
+        htmlArr.value.splice(0);
+        let tmp_html = res.data.html_items;
+        for (let i = 0; i < tmp_html.length; i++) {
+          htmlArr.value.push(tmp_html[i]);
+        }
+        loading.value = false
+      }).catch(function (err) {
+        loading.value = false
+        bug_id.value = ""
+        predictTime.value = 0
+      });
     })
     // console.log(file)
     // data.append('images', file.File);
@@ -269,8 +272,8 @@ const submitBug = async () => {
 async function convertCanvasToFile(canvas: HTMLCanvasElement, fileName: any) {
   // 将 Canvas 转为 Blob 对象
   const blob = await new Promise(resolve => canvas.toBlob(blob => {
-            resolve(blob);
-        }, pdf_img.value.type, 1.0));
+    resolve(blob);
+  }, pdf_img.value.type, 1.0));
   // 手动构造 File 对象
   let file = null;
   try {
@@ -292,14 +295,14 @@ function blobToFile(blob: any, fileName: any) {
 
 function dataURLtoBlob(dataURL: any) {
   var arr = dataURL.split(','),
-      mime = arr[0].match(/:(.*?);/)[1],
-      bstr = atob(arr[1]),
-      n = bstr.length,
-      u8arr = new Uint8Array(n);
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
   while (n--) {
     u8arr[n] = bstr.charCodeAt(n);
   }
-  return new Blob([u8arr], {type:mime});
+  return new Blob([u8arr], { type: mime });
 }
 
 function getPdfImage(index: number) {

src/store/ServerIp.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue'
 
 export const useServerIpStore = defineStore('server_ip', () => {
-  const server_ip = ref("http://192.168.10.52:80")
+  const server_ip = ref("http://192.168.10.80:80")
   
 
   return { server_ip }