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) { ...@@ -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> <template>
<div class="img-list"> <div class="img-list">
<vue-waterfall-easy <vue-waterfall-easy
v-if="imgList.length > 0 && contentWidth"
ref="waterfall"
:width="contentWidth"
:maxCols="7" :maxCols="7"
v-if="imgsArr.length > 0" :imgsArr="imgList"
:imgsArr="imgsArr" :src-key="getSrcKey"
@scrollReachBottom="loadImgList"
:gap="30" :gap="30"
ref="waterfall"
@click="handleClickImg" @click="handleClickImg"
:src-key="getSrcKey"
> >
<div slot="waterfall-over" class="load-over">已加载完全部</div> <div slot="waterfall-over" class="load-over">已加载完全部</div>
</vue-waterfall-easy> </vue-waterfall-easy>
...@@ -17,52 +17,58 @@ ...@@ -17,52 +17,58 @@
</template> </template>
<script> <script>
import { imgList } from "../../mock";
import vueWaterfallEasy from "vue-waterfall-easy"; import vueWaterfallEasy from "vue-waterfall-easy";
// import { imgList } from "../../mock";
export default { export default {
components: { components: {
vueWaterfallEasy, vueWaterfallEasy,
}, },
props: {
imgList: {
type: Array,
default: () => [],
},
},
computed: {
getSrcKey() {
return "pressUrl";
},
screenWidth() {
// 获取屏幕宽度的计算属性
return window.innerWidth;
},
},
watch: {
screenWidth(newWidth) {
// 监听屏幕宽度的变化，并更新盒子的宽度
this.contentWidth = newWidth * 0.76;
},
},
data() { data() {
return { return {
current: 0, current: 0,
size: 20, size: 20,
total: 20, total: 20,
hasMore: true, hasMore: true,
imgsArr: imgList, //图片数组 // imgList,
contentWidth: 0,
}; };
}, },
computed: {
getSrcKey() {
return "filePath";
},
},
mounted() { mounted() {
this.loadImgList(); this.getContentWidth();
window.addEventListener("resize", () => {
this.getContentWidth();
console.log(123, this.contentWidth);
});
}, },
methods: { methods: {
async loadImgList() { getContentWidth() {
if (this.total === this.imgsArr.length) { this.contentWidth = this.screenWidth * 0.76;
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++;
// }
}, },
handleClickImg(e){ handleClickImg(e) {
console.log(e); console.log(e);
} },
}, },
}; };
</script> </script>
...@@ -72,7 +78,16 @@ $box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03), ...@@ -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); 0 16px 48px 8px rgba(28, 31, 35, 0.08);
.img-list { .img-list {
height: calc(100vh); 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 { ::v-deep .vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box {
border-radius: none; border-radius: none;
box-shadow: none; box-shadow: none;
...@@ -84,6 +99,10 @@ $box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03), ...@@ -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 { ::v-deep .img-wraper {
img { img {
border-radius: 14px; border-radius: 14px;
......
src/views/searchPic/index.vue
浏览文件 @ ba1b6613
<template> <template>
<div class="app-container show-result"> <div
:class="['app-container', 'search-pic', showResult ? 'show-result' : '']"
>
<div class="banner"> <div class="banner">
<div class="text"> <div class="text">
<div class="title">以图搜图</div> <div class="title">以图搜图</div>
<div class="subtitle"> <div class="subtitle" v-if="!showResult">
以图搜图是一种方便快捷的搜索方式，它可以帮助您在海量的图片信息中快速找到您需要的图片。 以图搜图是一种方便快捷的搜索方式，它可以帮助您在海量的图片信息中快速找到您需要的图片。
<br /> <br />
通过上传或直接输入图片，以图搜图可以为您匹配相似的图片，或者根据图片内容找到相关的图片，让您可以更轻松地获取所需图片。 通过上传或直接输入图片，以图搜图可以为您匹配相似的图片，或者根据图片内容找到相关的图片，让您可以更轻松地获取所需图片。
...@@ -14,10 +16,10 @@ ...@@ -14,10 +16,10 @@
</div> </div>
<div class="upload-wrapper"> <div class="upload-wrapper">
<div class="upload-bar" @click="handleClickUpload" v-loading="loading"> <div class="upload-bar" @click="handleClickUpload" v-loading="loading">
<div class="left-area"> <div class="left-area" title="点击此处上传图片">
<div class="text">点击这里 上传图片</div> <div class="text">点击此处上传图片</div>
<div class="camera"> <div class="camera">
<i class="el-icon-camera"></i> <i class="el-icon-picture-outline" title="点击此处上传图片"></i>
</div> </div>
</div> </div>
<div class="right-button">以图搜图</div> <div class="right-button">以图搜图</div>
...@@ -35,20 +37,20 @@ ...@@ -35,20 +37,20 @@
<el-button ref="uploadButton" class="upload-button">上传</el-button> <el-button ref="uploadButton" class="upload-button">上传</el-button>
</el-upload> </el-upload>
</div> </div>
<div class="current-pic"> <div class="current-pic" v-if="currentImg">
<div class="img-container" v-if="currentImg"> <div class="img-container">
<div class="close" @click="handleCloseImg">
<i class="el-icon-close"></i>
</div>
<img :src="currentImg" alt="" /> <img :src="currentImg" alt="" />
</div> </div>
共计搜索结果{{ imgList.length }}条
</div> </div>
<ImgList v-if="showResult" /> <ImgList v-if="showResult" :imgList="imgList" />
<!-- <ImgList :imgList="imgList" /> -->
</div> </div>
</template> </template>
<script> <script>
import ImgList from "./components/imgList"; import ImgList from "./components/imgList";
import { searchImageByUpload } from "@/api/culturalRelic";
export default { export default {
components: { components: {
ImgList, ImgList,
...@@ -58,6 +60,8 @@ export default { ...@@ -58,6 +60,8 @@ export default {
showResult: false, //是否展示图片结果 showResult: false, //是否展示图片结果
currentImg: "", //当前搜索的图片 currentImg: "", //当前搜索的图片
loading: false, //是否正在上传 loading: false, //是否正在上传
imgList: [],
size: 20,
}; };
}, },
methods: { methods: {
...@@ -74,15 +78,26 @@ export default { ...@@ -74,15 +78,26 @@ export default {
this.loading = true; this.loading = true;
let formData = new FormData(); let formData = new FormData();
formData.append("file", file); formData.append("file", file);
this.$message.warning("上传名称：" + file.name); formData.append("size", this.size);
// // TODO:上传接口调用 const start = this.$message.warning("正在上传...");
setTimeout(() => { const res = await searchImageByUpload(formData);
this.currentImg = if (res.code == 0) {
"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"; const length = res.data.length;
this.$message.success("已查询出10条件结果"); this.$message.success(`上传成功并获得${length}条结果`);
this.imgList = res.data;
this.showResult = true; this.showResult = true;
this.loading = false; 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) { handleSuccess(res) {
...@@ -95,8 +110,8 @@ export default { ...@@ -95,8 +110,8 @@ export default {
// 点击上传 // 点击上传
handleClickUpload() { handleClickUpload() {
if (this.loading) { if (this.loading) {
this.$message.warning('当前有图片正在上传，请稍等~') this.$message.warning("当前有图片正在上传，请稍等~");
return return;
} }
this.$refs.uploader.$el.querySelector(".upload-button").click(); this.$refs.uploader.$el.querySelector(".upload-button").click();
}, },
...@@ -112,16 +127,25 @@ $transition-ease-03s: all ease 0.3s; ...@@ -112,16 +127,25 @@ $transition-ease-03s: all ease 0.3s;
width: 100%; width: 100%;
background-image: url("@/assets/imgs/home-new/all-bg.png"); 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 { .banner {
height: 400px; height: 400px;
// background: $deep-blue;
width: 100%; width: 100%;
position: relative; position: relative;
// overflow: hidden;
.left-pic { .left-pic {
transition: all ease 0.5s; transition: all ease 0.5s;
position: absolute; position: absolute;
left: -100px; left: -300px;
top: 100px; top: 100px;
height: 150%; height: 150%;
width: 700px; width: 700px;
...@@ -135,21 +159,18 @@ $transition-ease-03s: all ease 0.3s; ...@@ -135,21 +159,18 @@ $transition-ease-03s: all ease 0.3s;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 80%; height: 80%;
width: 400px; width: 300px;
background-size: contain; background-size: contain;
background-image: url("@/assets/imgs/line-draft/3.png"); background-image: url("@/assets/imgs/line-draft/3.png");
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 0; z-index: 0;
} }
.text { .text {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 4; z-index: 4;
color: #fff; color: #fff;
padding: 100px 12%; padding: 200px 12%;
opacity: 1; opacity: 1;
transition: $transition-ease-03s; transition: $transition-ease-03s;
color: $deep-blue; color: $deep-blue;
...@@ -169,14 +190,14 @@ $transition-ease-03s: all ease 0.3s; ...@@ -169,14 +190,14 @@ $transition-ease-03s: all ease 0.3s;
.upload-wrapper { .upload-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0 13%; padding: 0 16%;
position: relative; position: relative;
margin-bottom: 16px; margin-bottom: 16px;
font-size: 18px; font-size: 18px;
.upload-bar { .upload-bar {
box-shadow: $box-shadow; box-shadow: $box-shadow;
background: #fff; background: #fff;
border-radius: 8px; border-radius: 12px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -193,7 +214,11 @@ $transition-ease-03s: all ease 0.3s; ...@@ -193,7 +214,11 @@ $transition-ease-03s: all ease 0.3s;
justify-content: space-between; justify-content: space-between;
padding-right: 16px; padding-right: 16px;
width: 80%; width: 80%;
color: #ccc; color: #999;
.text {
display: flex;
align-items: center;
}
i { i {
font-size: 30px; font-size: 30px;
color: $deep-blue; color: $deep-blue;
...@@ -210,96 +235,24 @@ $transition-ease-03s: all ease 0.3s; ...@@ -210,96 +235,24 @@ $transition-ease-03s: all ease 0.3s;
position: absolute; position: absolute;
right: 0; right: 0;
top: 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 { .current-pic {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
padding: 0 13%; align-items: center;
padding: 0 16%;
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-bottom: 50px;
.img-container { .img-container {
background: #fff;
border-radius: 8px;
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
padding: 20px 0; padding: 20px 0;
position: relative; position: relative;
box-shadow: $box-shadow;
transition: all ease 0.3s; transition: all ease 0.3s;
&:hover {
box-shadow: $box-shadow-hover;
}
.close {
font-size: 30px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
img { img {
width: 110px; width: 110px;
height: 110px; height: 110px;
......
src/views/searchPic/mock.js
浏览文件 @ ba1b6613
export const imgList = [ export const imgList = [
{ {
filePath: pressUrl:
"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", "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: pressUrl:
"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", "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: pressUrl:
"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", "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: pressUrl:
"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", "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: pressUrl:
"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", "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: pressUrl:
"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", "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: pressUrl:
"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", "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({ ...@@ -23,21 +23,23 @@ module.exports = defineConfig({
lintOnSave: false, //关闭eslint检查 lintOnSave: false, //关闭eslint检查
devServer: { devServer: {
host: "localhost", host: "0.0.0.0",
port: "8081", port: "8081",
open: true,// 自动开启浏览器 open: true,// 自动开启浏览器
hot: true, hot: true,
compress: false, // 开启压缩 compress: false, // 开启压缩
proxy: { proxy: {
"/api": { "/api": {
target: "https://www.gzswbsy.com/api", // target: "https://www.gzswbsy.com/api",
target: "http://222.85.214.245:9602/api",
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
"^/api": "", "^/api": "",
}, },
}, },
"/files": { "/files": {
target: "https://www.gzswbsy.com/files", // target: "https://www.gzswbsy.com/files",
target: "http://222.85.214.245:9602/files",
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
"^/files": "", "^/files": "",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论