Skip to content

E
exhibition_page
提交 ba1b6613 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

对接以图搜图接口；优化页面布局

上级 0fee72fa
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 157 行增加 和 159 行删除
src/api/culturalRelic.js
浏览文件 @ ba1b6613
......@@ -51,3 +51,22 @@ export function getCrExistDict(params) {
})
}
// 以图搜图-上传图片文件搜索文物图片
export function searchImageByUpload(data) {
return request({
url: '/bizSearchImage/v1/searchImage',
method: 'post',
data
})
}
// 以图搜图-已经存在的图片文件搜索文物图片
export function searchImageByImg(data) {
return request({
url: '/bizSearchImage/v2/searchImage',
method: 'post',
data
})
}
src/views/culturalRelic/detail-bp.vue deleted 100644 → 0
浏览文件 @ 0fee72fa
差异被折叠。
src/views/searchPic/components/imgList/index.vue
浏览文件 @ ba1b6613
<template>
<div class="img-list">
<vue-waterfall-easy
v-if="imgList.length > 0 && contentWidth"
ref="waterfall"
:width="contentWidth"
:maxCols="7"
v-if="imgsArr.length > 0"
:imgsArr="imgsArr"
@scrollReachBottom="loadImgList"
:imgsArr="imgList"
:src-key="getSrcKey"
:gap="30"
ref="waterfall"
@click="handleClickImg"
:src-key="getSrcKey"
>
<div slot="waterfall-over" class="load-over">已加载完全部</div>
</vue-waterfall-easy>
......@@ -17,52 +17,58 @@
</template>
<script>
import { imgList } from "../../mock";
import vueWaterfallEasy from "vue-waterfall-easy";
// import { imgList } from "../../mock";
export default {
components: {
vueWaterfallEasy,
},
props: {
imgList: {
type: Array,
default: () => [],
},
},
computed: {
getSrcKey() {
return "pressUrl";
},
screenWidth() {
// 获取屏幕宽度的计算属性
return window.innerWidth;
},
},
watch: {
screenWidth(newWidth) {
// 监听屏幕宽度的变化，并更新盒子的宽度
this.contentWidth = newWidth * 0.76;
},
},
data() {
return {
current: 0,
size: 20,
total: 20,
hasMore: true,
imgsArr: imgList, //图片数组
// imgList,
contentWidth: 0,
};
},
computed: {
getSrcKey() {
return "filePath";
},
},
mounted() {
this.loadImgList();
this.getContentWidth();
window.addEventListener("resize", () => {
this.getContentWidth();
console.log(123, this.contentWidth);
});
},
methods: {
async loadImgList() {
if (this.total === this.imgsArr.length) {
this.hasMore = false;
this.$refs.waterfall && this.$refs.waterfall.waterfallOver();
}
// const params = {
// };
// let res = await getListFileByPage(params);
// if (res && res.data) {
// const { records, size, current, total } = res.data;
// this.size = size;
// this.current = current;
// this.total = total;
// let list = JSON.parse(JSON.stringify(records));
// this.imgsArr = this.imgsArr.concat(list);
// this.current++;
// }
getContentWidth() {
this.contentWidth = this.screenWidth * 0.76;
},
handleClickImg(e){
handleClickImg(e) {
console.log(e);
}
},
},
};
</script>
......@@ -72,7 +78,16 @@ $box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03),
0 16px 48px 8px rgba(28, 31, 35, 0.08);
.img-list {
height: calc(100vh);
display: flex;
justify-content: center;
// width: 80vw;
// ::v-deep .vue-waterfall-easy-container {
// width: 100%;
// }
// ::v-deep .vue-waterfall-easy {
// width: 100% !important;
// }
::v-deep .vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box {
border-radius: none;
box-shadow: none;
......@@ -84,6 +99,10 @@ $box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03),
}
}
::v-deep .vue-waterfall-easy-scroll {
overflow: auto !important;
}
::v-deep .img-wraper {
img {
border-radius: 14px;
......
src/views/searchPic/index.vue
浏览文件 @ ba1b6613
<template>
<div class="app-container show-result">
<div
:class="['app-container', 'search-pic', showResult ? 'show-result' : '']"
>
<div class="banner">
<div class="text">
<div class="title">以图搜图</div>
<div class="subtitle">
<div class="subtitle" v-if="!showResult">
以图搜图是一种方便快捷的搜索方式，它可以帮助您在海量的图片信息中快速找到您需要的图片。
<br />
通过上传或直接输入图片，以图搜图可以为您匹配相似的图片，或者根据图片内容找到相关的图片，让您可以更轻松地获取所需图片。
......@@ -14,10 +16,10 @@
</div>
<div class="upload-wrapper">
<div class="upload-bar" @click="handleClickUpload" v-loading="loading">
<div class="left-area">
<div class="text">点击这里 上传图片</div>
<div class="left-area" title="点击此处上传图片">
<div class="text">点击此处上传图片</div>
<div class="camera">
<i class="el-icon-camera"></i>
<i class="el-icon-picture-outline" title="点击此处上传图片"></i>
</div>
</div>
<div class="right-button">以图搜图</div>
......@@ -35,20 +37,20 @@
<el-button ref="uploadButton" class="upload-button">上传</el-button>
</el-upload>
</div>
<div class="current-pic">
<div class="img-container" v-if="currentImg">
<div class="close" @click="handleCloseImg">
<i class="el-icon-close"></i>
</div>
<div class="current-pic" v-if="currentImg">
<div class="img-container">
<img :src="currentImg" alt="" />
</div>
共计搜索结果{{ imgList.length }}条
</div>
<ImgList v-if="showResult" />
<ImgList v-if="showResult" :imgList="imgList" />
<!-- <ImgList :imgList="imgList" /> -->
</div>
</template>
<script>
import ImgList from "./components/imgList";
import { searchImageByUpload } from "@/api/culturalRelic";
export default {
components: {
ImgList,
......@@ -58,6 +60,8 @@ export default {
showResult: false, //是否展示图片结果
currentImg: "", //当前搜索的图片
loading: false, //是否正在上传
imgList: [],
size: 20,
};
},
methods: {
......@@ -74,15 +78,26 @@ export default {
this.loading = true;
let formData = new FormData();
formData.append("file", file);
this.$message.warning("上传名称：" + file.name);
// // TODO:上传接口调用
setTimeout(() => {
this.currentImg =
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png";
this.$message.success("已查询出10条件结果");
formData.append("size", this.size);
const start = this.$message.warning("正在上传...");
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;
this.loading = false;
}, 3000);
this.showCurrentImg(file);
}
},
showCurrentImg(file) {
const that = this;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
that.currentImg = this.result; //显示缩略图
console.log(this.result);
};
},
// 上传成功之后的钩子
handleSuccess(res) {
......@@ -95,8 +110,8 @@ export default {
// 点击上传
handleClickUpload() {
if (this.loading) {
this.$message.warning('当前有图片正在上传，请稍等~')
return
this.$message.warning("当前有图片正在上传，请稍等~");
return;
}
this.$refs.uploader.$el.querySelector(".upload-button").click();
},
......@@ -112,16 +127,25 @@ $transition-ease-03s: all ease 0.3s;
width: 100%;
background-image: url("@/assets/imgs/home-new/all-bg.png");
}
.search-pic {
min-height: 70vh !important;
}
.show-result {
.banner {
height: 200px;
.text {
padding: 80px 12%;
}
}
}
.banner {
height: 400px;
// background: $deep-blue;
width: 100%;
position: relative;
// overflow: hidden;
.left-pic {
transition: all ease 0.5s;
position: absolute;
left: -100px;
left: -300px;
top: 100px;
height: 150%;
width: 700px;
......@@ -135,21 +159,18 @@ $transition-ease-03s: all ease 0.3s;
right: 0;
bottom: 0;
height: 80%;
width: 400px;
width: 300px;
background-size: contain;
background-image: url("@/assets/imgs/line-draft/3.png");
background-repeat: no-repeat;
z-index: 0;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
color: #fff;
padding: 100px 12%;
padding: 200px 12%;
opacity: 1;
transition: $transition-ease-03s;
color: $deep-blue;
......@@ -169,14 +190,14 @@ $transition-ease-03s: all ease 0.3s;
.upload-wrapper {
display: flex;
justify-content: center;
padding: 0 13%;
padding: 0 16%;
position: relative;
margin-bottom: 16px;
font-size: 18px;
.upload-bar {
box-shadow: $box-shadow;
background: #fff;
border-radius: 8px;
border-radius: 12px;
width: 100%;
display: flex;
justify-content: space-between;
......@@ -193,7 +214,11 @@ $transition-ease-03s: all ease 0.3s;
justify-content: space-between;
padding-right: 16px;
width: 80%;
color: #ccc;
color: #999;
.text {
display: flex;
align-items: center;
}
i {
font-size: 30px;
color: $deep-blue;
......@@ -210,96 +235,24 @@ $transition-ease-03s: all ease 0.3s;
position: absolute;
right: 0;
top: 0;
border-radius: 0 8px 8px 0;
border-radius: 0 12px 12px 0;
}
}
}
// .upload-wrapper {
// height: 300px;
// width: 100%;
// display: flex;
// justify-content: center;
// position: relative;
// transition: all ease 0.5s;
// .upload-panel {
// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
// height: 320px;
// width: 60%;
// background-color: #fff;
// border-radius: 16px;
// display: flex;
// justify-content: center;
// align-items: center;
// position: absolute;
// transform: translateY(-100px);
// z-index: 10;
// transition: all ease 0.5s;
// .upload-area {
// width: calc(100% - 40px);
// height: calc(100% - 40px);
// border-radius: 16px;
// transition: all ease 0.5s;
// ::v-deep .el-upload {
// width: 100%;
// height: 100%;
// .el-upload-dragger {
// display: flex;
// justify-content: center;
// align-items: center;
// flex-direction: column;
// width: 100%;
// height: 100%;
// .icon {
// border-radius: 50%;
// background-color: rgba($color: $deep-blue, $alpha: 0.2);
// height: 100px;
// width: 100px;
// display: flex;
// justify-content: center;
// align-items: center;
// margin-bottom: 10px;
// .svg-icon {
// font-size: 48px;
// color: rgba($color: $deep-blue, $alpha: 0.8);
// }
// }
// .camera {
// opacity: 0;
// }
// }
// }
// }
// }
// }
.current-pic {
display: flex;
justify-content: center;
padding: 0 13%;
justify-content: space-between;
align-items: center;
padding: 0 16%;
position: relative;
z-index: 2;
margin-bottom: 50px;
.img-container {
background: #fff;
border-radius: 8px;
width: 100%;
display: flex;
justify-content: center;
justify-content: flex-start;
padding: 20px 0;
position: relative;
box-shadow: $box-shadow;
transition: all ease 0.3s;
&:hover {
box-shadow: $box-shadow-hover;
}
.close {
font-size: 30px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
img {
width: 110px;
height: 110px;
......
src/views/searchPic/mock.js
浏览文件 @ ba1b6613
export const imgList = [
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/62%E8%B4%B5%E5%B7%9E%E6%B8%85%E6%B1%9F%E5%8D%8F%E4%B8%AD%E5%86%9B%E9%83%A8%E5%8F%B8%E4%B9%8B%E5%85%B3%E9%98%B2%E9%93%9C%E5%8D%B0/low/62.%E8%B4%B5%E5%B7%9E%E6%B8%85%E6%B1%9F%E5%8D%8F%E4%B8%AD%E5%86%9B%E9%83%A8%E5%8F%B8%E4%B9%8B%E5%85%B3%E9%98%B2%E9%93%9C%E5%8D%B0.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/42%E8%88%9E%E8%B9%88%E4%BF%91/low/42.%E8%88%9E%E8%B9%88%E4%BF%91.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
}, {
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/31%E9%93%9C%E8%BD%A6%E9%A9%AC/low/31.%E9%93%9C%E8%BD%A6%E9%A9%AC.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
pressUrl:
"http://222.85.214.245:9602/files/culturalRelicImport/2022-12-12-b46d9d9bc45e4c389ea9efd5dc58bec1/%E9%BB%94%E5%8D%97%E5%B7%9E%E5%8D%9A%E7%89%A9%E9%A6%86%E6%96%87%E7%89%A91/faceImage/A2.892/low/DSC_3895.png",
},
];
];
\ No newline at end of file
vue.config.js
浏览文件 @ ba1b6613
......@@ -23,21 +23,23 @@ module.exports = defineConfig({
lintOnSave: false, //关闭eslint检查
devServer: {
host: "localhost",
host: "0.0.0.0",
port: "8081",
open: true,// 自动开启浏览器
hot: true,
compress: false, // 开启压缩
proxy: {
"/api": {
target: "https://www.gzswbsy.com/api",
// target: "https://www.gzswbsy.com/api",
target: "http://222.85.214.245:9602/api",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
"/files": {
target: "https://www.gzswbsy.com/files",
// target: "https://www.gzswbsy.com/files",
target: "http://222.85.214.245:9602/files",
changeOrigin: true,
pathRewrite: {
"^/files": "",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论