快速搜索为空时，不报错

src/views1/File/Part/PartView.vue

@@ -989,9 +989,6 @@ export default {
         margin-top: 20px;
       }
       .main-right-table {
-        // width: calc(100vw * (1540 / 1920));
-        height: calc(100vh * (600 / 1080));
-        // margin-left: calc(100vw * (20 / 1920));
         background: transparent;
         color: #7ea4c8ff;
       }
@@ -1086,9 +1083,9 @@ export default {
   height: 0;
 }
 //table样式
-::v-deep .el-table{
-  overflow: auto;
-}
+::v-deep .el-table {
+    overflow: auto;
+  }
 ::v-deep .el-table th {
   background: #016c9aa6;
   color: #2e8aec;

src/views1/Personal/Identificat/IdentificatView.vue

@@ -39,7 +39,8 @@
       };
     },
     created() {
-      this.ocrUrl=process.env.VUE_APP_BASE_API+"/ocr/";
+      // this.ocrUrl=process.env.VUE_APP_BASE_API+"/ocr/";
+      this.ocrUrl="http://192.168.1.28/dev-api/ocr/";
     },
     methods: {
       handlePreview(file) {
@@ -68,7 +69,7 @@
 </script>
 
 <style scoped lang='scss'>
-  .containe {
+.containe {
     .main1 {
       display: flex;
       justify-content: space-around;

src/views1/Retrieval/RetrievalView.vue

@@ -4,11 +4,19 @@
       <img src="../../assets/img/Group 467.png" alt="" />
     </div>
     <div class="search">
-      <el-input type="text" placeholder="请输入文档信息" v-model="input" @keyup.enter.native="searchPre"></el-input>
+      <el-input
+        type="text"
+        placeholder="请输入文档信息"
+        v-model="input"
+        @keyup.enter.native="searchPre"
+      ></el-input>
       <span class="cen—top-span" @click="searchPre">快速搜索</span>
-      <img src="../../assets/img/ri：search-2-line@2x.png" class="cen—top-img" />
+      <img
+        src="../../assets/img/ri：search-2-line@2x.png"
+        class="cen—top-img"
+      />
     </div>
-    <div class="mains" @scroll="handleScroll">
+    <div class="mains" @scroll="handleScroll" v-if="mains_data2">
       <div v-for="item in count" :key="item.id" class="main-main">
         <div class="one" @click="docName(item.id, item.content.info)">
           {{ item.content.info.docName }}
@@ -23,8 +31,13 @@
             {{ item.content.info.createTime }}
           </div>
         </div>
-        <div class="three" v-for="highlightFieldsContentItem in item.highlightFields.content"
-          :key="highlightFieldsContentItem.id" v-html="highlightFieldsContentItem" style="white-space: normal"></div>
+        <div
+          class="three"
+          v-for="highlightFieldsContentItem in item.highlightFields.content"
+          :key="highlightFieldsContentItem.id"
+          v-html="highlightFieldsContentItem"
+          style="white-space: normal"
+        ></div>
         <ul class="four">
           <li v-for="tagName in item.content.info.tagList" :key="tagName.id">
             {{ tagName.tagName }}
@@ -32,232 +45,270 @@
         </ul>
       </div>
     </div>
+    <div class="mains_prompt" v-if="mains_data2">
+      <span>滚动显示更多内容</span>
+      <img src="../../assets/img/chevrons-down.png" alt="" />
+    </div>
+    <div class="empty" v-if="mains_data">
+      <img src="../../assets/img/Empty.png" alt="" />
+      <p>您搜索的内容暂无数据，建议更换关键词</p>
+    </div>
   </div>
 </template>
 
 <script>
-  import {
-    ret
-  } from "@/api/doc/share1.js";
+import { ret } from "@/api/doc/share1.js";
 
-  export default {
-    data() {
-      return {
-        //搜索框绑定
-        input: "",
-        //搜索出来的数据
-        count: [],
-        page: 0,
-        size: 3
-      };
+export default {
+  data() {
+    return {
+      //搜索框绑定
+      input: "",
+      //搜索出来的数据
+      count: [],
+      page: 0,
+      size: 3,
+      mains_data: false,
+      mains_data2: false,
+    };
+  },
+  created() {
+    this.input = this.$route.query.datas;
+    if (this.input) {
+      this.searchs();
+    }
+  },
+  watch: {
+    $route: {
+      handler(val, oldval) {
+        this.input = this.$route.query.datas;
+        this.count = [];
+        if (this.input!="") {
+          this.searchs();
+        } else {
+          this.mains_data = true;
+          this.mains_data2 = false;
+        }
+      },
+      // 深度观察监听
+      deep: true,
     },
-    created() {
-      this.input = this.$route.query.datas;
-      if (this.input) {
-        this.searchs();
-      }
+  },
+  mounted() {
+    //添加滚动条事件
+    window.addEventListener("scroll", this.handleScroll, true);
+  },
+  methods: {
+    // 点击搜索调用的方法
+    searchPre() {
+      this.$router.push("/home/retrieval?datas=" + this.input);
     },
-    watch: {
-      $route: {
-        handler(val, oldval) {
-          this.input = this.$route.query.datas;
-          this.count = [];
-          this.searchs();
-        },
-        // 深度观察监听
-        deep: true
+    handleScroll() {
+      const container = document.querySelector(".mains");
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      // console.log('scrollHeight',scrollHeight);
+      // console.log('clientHeight',clientHeight);
+      // console.log(scrollTop);
+      // 是否达到页面底部
+      if (scrollTop + clientHeight >= scrollHeight) {
+        // console.log('滚动到底部了！')
+        this.page += 1;
+        // 执行加载
+        this.searchs();
       }
     },
-    mounted() {
-      //添加滚动条事件
-      window.addEventListener("scroll", this.handleScroll, true);
-    },
-    methods: {
-      searchPre() {
-        // location.href="/home/retrieval?datas=" + this.input;
-        this.$router.push("/home/retrieval?datas=" + this.input);
-      },
-      handleScroll() {
-        const container = document.querySelector(".mains");
-        const {
-          scrollTop,
-          scrollHeight,
-          clientHeight
-        } = container;
-        // console.log('scrollHeight',scrollHeight);
-        // console.log('clientHeight',clientHeight);
-        // console.log(scrollTop);
-        // 是否达到页面底部
-        if (scrollTop + clientHeight >= scrollHeight) {
-          // console.log('滚动到底部了！')
-          this.page += 1
-          // 执行加载
-          this.searchs()
-        }
-      },
 
-      //查找返回的数据
-      searchs() {
-        ret({
-          content: this.input,
-          page: this.page,
-          size: this.size
-        }).then((item) => {
-          // console.log('item=',item)
-          if (item.length > 0) {
-            this.count.push(...item);
-          }
-        })
-      },
-      //预览界面
-      docName(curentDocId, value) {
-        this.$tab.openPage(
-          // window.open("/individual/Pre/user/" + curentDocId, "_blank"),
-          window.open("/individual/Pre/user/" + curentDocId + "?value=" + JSON.stringify(value), "_blank"),
-        );
-      },
+    //查找返回的数据
+    searchs() {
+      ret({
+        content: this.input,
+        page: this.page,
+        size: this.size,
+      }).then((item) => {
+        // console.log('item=',item)
+        if (item.length > 0) {
+          this.count.push(...item);
+          this.mains_data = false;
+          this.mains_data2 = true;
+        } else {
+          this.input = "";
+          this.mains_data = true;
+          this.mains_data2 = false;
+        }
+      });
     },
-  };
+    //预览界面
+    docName(curentDocId, value) {
+      this.$tab.openPage(
+        // window.open("/individual/Pre/user/" + curentDocId, "_blank"),
+        window.open(
+          "/individual/Pre/user/" +
+            curentDocId +
+            "?value=" +
+            JSON.stringify(value),
+          "_blank"
+        )
+      );
+    },
+  },
+};
 </script>
 <style lang='scss'>
-  .three {
-    margin-bottom: calc(100vw * (10 / 1920));
+.three {
+  margin-bottom: calc(100vw * (10 / 1920));
 
-    em {
-      color: #f00 !important;
-    }
+  em {
+    color: #f00 !important;
   }
+}
 </style>
 <style scoped lang='scss'>
-  .containe {
-    color: #7ea4c8;
-    font-size: 0.14rem;
-    font-family: PingFang SC-Medium, PingFang SC;
-    font-weight: 500;
-  }
+.containe {
+  color: #7ea4c8;
+  font-size: 0.14rem;
+  font-family: PingFang SC-Medium, PingFang SC;
+  font-weight: 500;
+}
 
-  .picture {
-    width: calc(100vw * (220 / 1920));
-    height: calc(100vh * (57 / 1080));
-    margin-left: calc(100vw * (860 / 1920));
-    margin-top: calc(100vh * (100 / 1080));
-    margin-bottom: calc(100vh * (40 / 1080));
+.picture {
+  width: calc(100vw * (220 / 1920));
+  height: calc(100vh * (57 / 1080));
+  margin-left: calc(100vw * (860 / 1920));
+  margin-top: calc(100vh * (100 / 1080));
+  margin-bottom: calc(100vh * (40 / 1080));
 
-    img {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
   }
+}
 
-  .search {
-    width: calc(100vw * (864 / 1920));
-    height: calc(100vh * (50 / 1080));
-    margin-left: calc(100vw * (528 / 1920));
-    margin-bottom: calc(100vh * (50 / 1080));
-    position: relative;
-  }
+.search {
+  width: calc(100vw * (864 / 1920));
+  height: calc(100vh * (50 / 1080));
+  margin-left: calc(100vw * (528 / 1920));
+  margin-bottom: calc(100vh * (50 / 1080));
+  position: relative;
+}
 
-  .cen—top-img {
-    width: calc(100vw * (24 / 1920));
-    height: calc(100vh * (24 / 1080));
-    position: absolute;
-    left: calc(100vw * (15 / 1920));
-    top: calc(100vh * (15 / 1080));
-  }
+.cen—top-img {
+  width: calc(100vw * (24 / 1920));
+  height: calc(100vh * (24 / 1080));
+  position: absolute;
+  left: calc(100vw * (15 / 1920));
+  top: calc(100vh * (15 / 1080));
+}
 
-  .el-input {
-    width: calc(100vw * (750 / 1920));
-    height: calc(100vh * (50 / 1080));
-    margin-right: calc(100vw * (14 / 1920));
-  }
+.el-input {
+  width: calc(100vw * (750 / 1920));
+  height: calc(100vh * (50 / 1080));
+  margin-right: calc(100vw * (14 / 1920));
+}
 
-  .cen—top-span {
-    display: inline-block;
-    width: calc(100vw * (100 / 1920));
-    height: calc(100vh * (50 / 1080));
-    background: #2e8aecff;
-    color: #ffffffcc;
-    text-align: center;
-    line-height: calc(100vh * (50 / 1080));
+.cen—top-span {
+  display: inline-block;
+  width: calc(100vw * (100 / 1920));
+  height: calc(100vh * (50 / 1080));
+  background: #2e8aecff;
+  color: #ffffffcc;
+  text-align: center;
+  line-height: calc(100vh * (50 / 1080));
 
-    &:hover {
-      cursor: pointer
-    }
-  }
-
-  .mains {
-    width: calc(100vw * (1450 / 1920));
-    height: calc(100vh * (670 / 1080));
-    // background: seagreen;
-    margin-left: calc(100vw * (230 / 1920));
-    overflow: auto;
+  &:hover {
+    cursor: pointer;
   }
+}
 
-  .main-main {
-    width: calc(100vw * (1430 / 1920));
-    // height: calc(100vh * (220 / 1080));
-    padding: calc(100vh * (20 / 1080));
-    border-bottom: 1px dashed #083b61ff;
+.mains {
+  width: calc(100vw * (1450 / 1920));
+  height: calc(100vh * (600 / 1080));
+  // background: seagreen;
+  margin-left: calc(100vw * (230 / 1920));
+  overflow: auto;
+}
+.mains_prompt {
+  display: flex;
+  align-items: center;
+  margin-left: calc(100vw * (850 / 1920));
+  margin-top: calc(100vh * (20 / 1080));
+}
+.empty {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: calc(100vw * (160 / 1920));
+    height: calc(100vh * (160 / 1080));
+    margin-top: calc(100vh * (150 / 1080));
   }
+}
+.main-main {
+  width: calc(100vw * (1430 / 1920));
+  // height: calc(100vh * (220 / 1080));
+  padding: calc(100vh * (20 / 1080));
+  border-bottom: 1px dashed #083b61ff;
+}
 
-  .one {
-    margin-bottom: calc(100vw * (10 / 1920));
-    color: #2e8aecff;
-    font-size: 14px;
-    text-decoration: underline;
-  }
+.one {
+  margin-bottom: calc(100vw * (10 / 1920));
+  color: #2e8aecff;
+  font-size: 14px;
+  text-decoration: underline;
+}
 
-  .two {
-    margin-bottom: calc(100vh * (10 / 1080));
-    display: flex;
+.two {
+  margin-bottom: calc(100vh * (10 / 1080));
+  display: flex;
 
-    .two1 {
-      margin-right: calc(100vw * (30 / 1920));
-    }
+  .two1 {
+    margin-right: calc(100vw * (30 / 1920));
+  }
 
-    img {
-      vertical-align: middle;
-    }
+  img {
+    vertical-align: middle;
   }
+}
 
-  .four {
-    display: flex;
-    list-style: none;
-    padding: 0;
+.four {
+  display: flex;
+  list-style: none;
+  padding: 0;
 
-    li {
-      //  width: calc(100vw * (62 / 1920));
-      //  height: calc(100vh * (24 / 1080));
-      border: 1px solid #ff9839ff;
-      background: #bba99240;
-      padding: 0 5px;
-      margin-right: calc(100vw * (5 / 1920));
-    }
+  li {
+    //  width: calc(100vw * (62 / 1920));
+    //  height: calc(100vh * (24 / 1080));
+    border: 1px solid #ff9839ff;
+    background: #bba99240;
+    padding: 0 5px;
+    margin-right: calc(100vw * (5 / 1920));
   }
+}
 
-  //滚动条样式
-  ::-webkit-scrollbar {
-    width: 3.5px;
-  }
+//滚动条样式
+::-webkit-scrollbar {
+  width: 3.5px;
+}
 
-  ::-webkit-scrollbar-track {
-    background-color: rgba(0, 0, 0, 0);
-  }
+::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
+}
 
-  ::-webkit-scrollbar-thumb {
-    background: #2e8aec;
-    border-radius: 3px;
-  }
+::-webkit-scrollbar-thumb {
+  background: #2e8aec;
+  border-radius: 3px;
+}
 
-  ::-webkit-scrollbar-thumb:hover {
-    background: #2e8aec;
-  }
+::-webkit-scrollbar-thumb:hover {
+  background: #2e8aec;
+}
 
-  ::v-deep .el-input--medium .el-input__inner {
-    padding-left: calc(100vw * (50 / 1920));
-    background: #14265e80;
-    border: 1px solid #01d1ffff;
-    color: #7ea4c8ff;
-  }
+::v-deep .el-input--medium .el-input__inner {
+  padding-left: calc(100vw * (50 / 1920));
+  background: #14265e80;
+  border: 1px solid #01d1ffff;
+  color: #7ea4c8ff;
+}
 </style>