Merge branch 'master' of http://222.85.214.245:11036/longfei666/exhibition_page

src/api/culturalRelic.js

@@ -56,7 +56,8 @@ export function searchImageByUpload(data) {
   return request({
     url: '/bizSearchImage/v1/searchImage',
     method: 'post',
-    data
+    data,
+    timeout: 30 * 1000 //默认给30秒的超时
   })
 }
 
@@ -65,7 +66,8 @@ export function searchImageByImg(data) {
   return request({
     url: '/bizSearchImage/v2/searchImage',
     method: 'post',
-    data
+    data,
+    timeout: 30 * 1000 //默认给30秒的超时
   })
 }
 

src/views/culturalRelic/Detail.vue

@@ -4,7 +4,7 @@
       <BaseInfo :detail="detail" @loadDetail="loadDetail" />
     </el-col>
     <el-col :span="10" class="right wow animate__animated animate__fadeInLeft">
-      <Imgs :detail="detail" v-show="showImgs" />
+      <Imgs :detail="detail" v-show="showImgs" :currentFileId="currentFileId" />
       <Video :detail="detail" v-show="showVideo" />
       <Audio :detail="detail" v-show="showAudio" />
       <Literature :detail="detail" v-show="showLiterature" />
@@ -75,6 +75,7 @@ export default {
           path: "/culturalRelic",
         },
       ],
+      currentFileId: "",
     };
   },
   watch: {
@@ -163,7 +164,11 @@ export default {
   },
   mounted() {
     const { crId } = this.$route.params;
+    const { fileId } = this.$route.query;
     this.loadDetail(crId);
+    if (fileId) {
+      this.currentFileId = fileId;
+    }
   },
   methods: {
     async loadDetail(crId) {

src/views/culturalRelic/components/imgs.vue

@@ -43,17 +43,44 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    // 当前从以图搜图跳转过来的图片id
+    currentFileId: {
+      type: String,
+      default: "",
+    },
   },
   computed: {
     imagesVo() {
       if (!this.detail.imagesVo) {
-        return;
+        return [];
       }
+      const imagesVo = this.getImagesVo();
+      return imagesVo;
+    },
+  },
+  // watch: {
+  //   currentFileId(value) {
+  //     if (value) {
+
+  //     }
+  //   },
+  // },
+  mounted() {
+    this.switchImg();
+  },
+  data() {
+    return {
+      swiperOption: imgSwiperOption,
+    };
+  },
+  methods: {
+    getImagesVo() {
       if (this.detail.imagesVo.length > 0) {
         return this.detail.imagesVo;
       } else {
         return [
           {
+            fileId: this.detail.faceImage,
             pressUrl: this.detail.faceImagePressUrl,
             url: this.detail.faceImageUrl,
             middleUrl: this.detail.faceImageMiddleUrl,
@@ -61,13 +88,6 @@ export default {
         ];
       }
     },
-  },
-  data() {
-    return {
-      swiperOption: imgSwiperOption,
-    };
-  },
-  methods: {
     handelPreviewImages(items, index) {
       this.imgList = items.map((item) => this.$getFullUrl(item.url));
       const $viewer = this.$viewerApi({
@@ -88,6 +108,21 @@ export default {
       };
       this.$bizCommon.openNewPage(path, query);
     },
+    // 将当前图片对准从以图搜图过来的index
+    switchImg() {
+      // 使用异步才能够保证detail有值
+      setTimeout(() => {
+        const imagesVo = this.getImagesVo();
+        if (imagesVo.length > 0 && this.currentFileId) {
+          const index = imagesVo.findIndex((img) => {
+            return img.fileId == this.currentFileId;
+          });
+          if (index) {
+            this.$refs.imgSwiper.slideTo(index);
+          }
+        }
+      }, 800);
+    },
   },
 };
 </script>

src/views/searchPic/components/imgList/index.vue

@@ -80,9 +80,12 @@ export default {
       event.preventDefault();
       // 只有当点击到图片时才进行操作
       if (event.target.tagName.toLowerCase() == "img") {
-        const { sourceId } = value;
+        const { sourceId, fileId } = value;
         const path = "culturalRelic/" + sourceId;
-        this.$bizCommon.openNewPage(path);
+        const query = {
+          fileId,
+        };
+        this.$bizCommon.openNewPage(path, query);
       }
     },
   },

src/views/searchPic/index copy.vue

-<template>
-  <div
-    :class="['app-container', 'search-pic', showResult ? 'show-result' : '']"
-  >
-    <div class="banner">
-      <div class="text" v-if="!showResult">
-        <div class="title">以图搜图</div>
-        <div class="subtitle">
-          以图搜图是一种方便快捷的搜索方式，它可以帮助您在海量的图片信息中快速找到您需要的图片。
-          <br />
-          通过上传或直接输入图片，以图搜图可以为您匹配相似的图片，或者根据图片内容找到相关的图片，让您可以更轻松地获取所需图片。
-        </div>
-      </div>
-      <div class="left-pic"></div>
-      <div class="right-pic"></div>
-    </div>
-    <div class="upload-wrapper">
-      <div class="upload-bar" @click="handleClickUpload">
-        <div class="left-area" title="点击此处上传图片">
-          <div class="text">点击此处上传图片</div>
-          <div class="camera">
-            <i class="el-icon-picture-outline" title="点击此处上传图片"></i>
-          </div>
-        </div>
-        <div class="right-button">以图搜图</div>
-      </div>
-      <el-upload
-        v-show="false"
-        ref="uploader"
-        class="upload-area"
-        accept=".jpg,.png"
-        action
-        :before-upload="handleBeforeUpload"
-        :show-file-list="false"
-        :on-success="handleSuccess"
-        :disabled="loading"
-      >
-        <el-button ref="uploadButton" class="upload-button">上传</el-button>
-      </el-upload>
-    </div>
-    <div class="current-pic" v-if="currentImg && showResult">
-      <div class="img-container">
-        <img :src="currentImg" alt="" />
-      </div>
-      根据您上传的图片，为您推荐相似图片{{ imgList.length }}张
-    </div>
-    <ImgList v-if="showResult" :imgList="imgList" ref="List" />
-  </div>
-</template>
-
-<script>
-import ImgList from "./components/imgList";
-import { searchImageByUpload, searchImageByImg } from "@/api/culturalRelic";
-export default {
-  components: {
-    ImgList,
-  },
-  data() {
-    return {
-      showResult: false, //是否展示图片结果
-      currentImg: "", //当前搜索的图片
-      loading: false, //是否正在上传
-      imgList: [],
-      size: 20,
-    };
-  },
-  mounted() {
-    const { fileId, fileUrl } = this.$route.query;
-    this.search(fileId, fileUrl);
-  },
-  methods: {
-    async search(fileId, fileUrl) {
-      if (!fileId || !fileUrl) {
-        return;
-      }
-      const formData = new FormData();
-      formData.append("size", this.size);
-      formData.append("fileId", fileId);
-      this.showResult = false; //先清空之前imgList已有的高度
-      const res = await searchImageByImg(formData);
-      if (res.code == 0) {
-        this.currentImg = fileUrl;
-        this.imgList = res.data;
-        this.showResult = true;
-        this.$nextTick(() => {
-          this.$refs["List"].getWaterfallHeight();
-        });
-      }
-    },
-    // 上传前钩子，处理文件类型
-    async handleBeforeUpload(file) {
-      let reg = /(?<=\.)[a-z]+$/g;
-      let fileType = file.name.match(reg) + "";
-      let typeArr = ["png", "jpg", "jpeg"];
-      if (!typeArr.includes(fileType)) {
-        this.$message.warning("上传文件格式错误!");
-        return;
-      }
-      let formData = new FormData();
-      formData.append("file", file);
-      formData.append("size", this.size);
-      const loading = this.$loading({
-        lock: true,
-        text: "正在海量的图库中搜索...",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      this.showResult = false; //先清空之前imgList已有的高度
-      const res = await searchImageByUpload(formData);
-      if (res.code == 0) {
-        const length = res.data.length;
-        this.$message.success(`上传成功并获得${length}张相似图片`);
-        this.imgList = res.data;
-        this.showResult = true;
-        loading.close();
-        this.showCurrentImg(file);
-        this.clearRouterQuery();
-        this.$nextTick(() => {
-          this.$refs["List"].getWaterfallHeight();
-        });
-      }
-    },
-
-    clearRouterQuery() {
-      if (this.$route.query.fileId) {
-        const query = {};
-        this.$router.replace({ query });
-      }
-    },
-
-    showCurrentImg(file) {
-      const that = this;
-      var reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = function (e) {
-        that.currentImg = this.result; //显示缩略图
-      };
-    },
-    // 上传成功之后的钩子
-    handleSuccess(res) {
-      this.loading = false;
-    },
-    // 关闭已上传的图片
-    handleCloseImg() {
-      this.currentImg = "";
-    },
-    // 点击上传
-    handleClickUpload() {
-      if (this.loading) {
-        this.$message.warning("当前有图片正在上传，请稍等~");
-        return;
-      }
-      this.$refs.uploader.$el.querySelector(".upload-button").click();
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-$box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-$box-shadow-hover: rgba(0, 0, 0, 0.16) 0px 3px 6px,
-  rgba(0, 0, 0, 0.23) 0px 3px 6px;
-$transition-ease-03s: all ease 0.3s;
-.app-container {
-  width: 100%;
-  background-image: url("@/assets/imgs/home-new/all-bg.png");
-}
-.search-pic {
-  min-height: 70vh !important;
-}
-.show-result {
-  .banner {
-    height: 40px;
-    .text {
-      padding: 80px 12%;
-    }
-  }
-}
-.banner {
-  height: 400px;
-  width: 100%;
-  position: relative;
-  .left-pic {
-    transition: all ease 0.5s;
-    position: absolute;
-    left: -300px;
-    top: 100px;
-    height: 400px;
-    width: 700px;
-    background-size: contain;
-    background-image: url("@/assets/imgs/line-draft/6.png");
-    background-repeat: no-repeat;
-    z-index: 0;
-  }
-  .right-pic {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    height: 200px;
-    width: 300px;
-    background-size: contain;
-    background-image: url("@/assets/imgs/line-draft/3.png");
-    background-repeat: no-repeat;
-    z-index: 0;
-  }
-  .text {
-    width: 100%;
-    height: 100%;
-    z-index: 4;
-    color: #fff;
-    padding: 200px 12%;
-    opacity: 1;
-    transition: $transition-ease-03s;
-    color: $deep-blue;
-    .title {
-      font-size: 48px;
-      font-family: "SourceHanSerifCN-Bold";
-      text-align: center;
-      margin-bottom: 8px;
-    }
-    .subtitle {
-      text-align: center;
-      text-indent: 28px;
-      letter-spacing: 2px;
-    }
-  }
-}
-.upload-wrapper {
-  display: flex;
-  justify-content: center;
-  padding: 0 16%;
-  position: relative;
-  margin-bottom: 16px;
-  font-size: 18px;
-  .upload-bar {
-    box-shadow: $box-shadow;
-    background: #fff;
-    border-radius: 12px;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    padding: 10px 20px;
-    border: 1px solid $deep-blue;
-    position: relative;
-    cursor: pointer;
-    transition: $transition-ease-03s;
-    &:hover {
-      box-shadow: $box-shadow-hover;
-    }
-    .left-area {
-      display: flex;
-      justify-content: space-between;
-      padding-right: 16px;
-      width: 80%;
-      color: #999;
-      .text {
-        display: flex;
-        align-items: center;
-      }
-      i {
-        font-size: 30px;
-        color: $deep-blue;
-      }
-    }
-    .right-button {
-      width: 20%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      background: $deep-blue;
-      height: 100%;
-      position: absolute;
-      right: 0;
-      top: 0;
-      border-radius: 0 12px 12px 0;
-    }
-  }
-}
-
-.current-pic {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 20px 16%;
-  position: relative;
-  z-index: 2;
-  .img-container {
-    display: flex;
-    position: relative;
-    transition: all ease 0.3s;
-    margin-right: 16px;
-    width: 130px;
-    height: 130px;
-    background-color: #fff;
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-}
-.img-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-::v-deep .el-loading-mask {
-  border-radius: 12px;
-}
-</style>