Skip to content

E
exhibition_page
提交 958ee8d0 authored 作者: Anix's avatar Anix
浏览文件
操作

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

上级 076e612a 2ace68be
隐藏空白字符变更
内嵌 并排
正在显示 包含 58 行增加 和 325 行删除
src/api/culturalRelic.js
浏览文件 @ 958ee8d0
......@@ -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
浏览文件 @ 958ee8d0
......@@ -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
浏览文件 @ 958ee8d0
......@@ -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
浏览文件 @ 958ee8d0
......@@ -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 deleted 100644 → 0
浏览文件 @ 076e612a
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论