<template>
|
<div class="image-grid-container">
|
<div class="cell-box">
|
<div
|
v-for="(item, index) in images"
|
:key="item.id || `in-${index}`"
|
class="cell-wrapper"
|
>
|
<el-tooltip
|
placement="top"
|
:hide-after="0"
|
:show-after="500"
|
:enterable="false"
|
:popper-class="'image-grid-tooltip'"
|
>
|
<template #content>
|
<div class="custom-tip-body">
|
<div class="text">名称：{{ item.name }}</div>
|
<div class="text">路径：{{ item.path }}</div>
|
<div class="text">尺寸：{{ item.size || '未知尺寸' }}</div>
|
<div class="text">标注数量：{{ item.annotations ? item.annotations.length : 0 }}</div>
|
<div class="text" v-if="selectedSplit">
|
拆分分配：{{ getImageSplitTypeText(item) }}
|
</div>
|
<div class="text" v-if="getImageCategories(item).length > 0">
|
标注类别：{{ getImageCategories(item).map(c => c.title).join(', ') }}
|
</div>
|
<div class="text" v-if="item.width && item.height">
|
分辨率：{{ item.width }} × {{ item.height }}px
|
</div>
|
</div>
|
</template>
|
<div
|
@click.stop="handleChange(item)"
|
@dblclick="handleDetail(item)"
|
class="cell"
|
:class="{ active: currentImageId && item['id'] == currentImageId }"
|
>
|
<div class="image-container">
|
<img
|
:src="getImageUrl(item)"
|
class="cell-img"
|
@error="handleImageError"
|
/>
|
|
<!-- 显示所有标注的类别标签 -->
|
<div class="category-overlay" v-if="getImageCategories(item).length > 0">
|
<CategoryTags :categories="getImageCategories(item)" :maxDisplay="3" />
|
</div>
|
|
</div>
|
<div class="cell-title">{{ item["name"] }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
|
<!-- 分页组件 -->
|
<div class="pagination-wrapper" v-if="total > pageSize">
|
<el-pagination
|
v-model:current-page="currentPageValue"
|
:page-size="pageSizeValue"
|
:total="total"
|
:page-sizes="[30, 50, 100, 200]"
|
:background="true"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watch } from 'vue';
|
import { CategoryTags } from '@/components';
|
import { getImageSplitTypeForTooltip, getImageCategories as getImageCategoriesUtil, handleImageError } from '@/utils/image/imageHelper';
|
|
const props = defineProps({
|
images: {
|
type: Array,
|
default: () => []
|
},
|
total: {
|
type: Number,
|
default: 0
|
},
|
currentPage: {
|
type: Number,
|
default: 1
|
},
|
pageSize: {
|
type: Number,
|
default: 30
|
},
|
currentImageId: [String, Number],
|
selectedSplit: Object,
|
projectTypes: {
|
type: Array,
|
default: () => []
|
},
|
projectPath: String,
|
imageUrlGetter: Function,
|
imageCategoriesGetter: Function
|
});
|
|
const emit = defineEmits([
|
'update:currentPage',
|
'update:pageSize',
|
'selectImage',
|
'openImage'
|
]);
|
|
// 使用内部响应式变量来管理分页状态
|
const currentPageValue = ref(props.currentPage);
|
const pageSizeValue = ref(props.pageSize);
|
|
// 监听props变化
|
watch(() => props.currentPage, (val) => {
|
currentPageValue.value = val;
|
});
|
|
watch(() => props.pageSize, (val) => {
|
pageSizeValue.value = val;
|
});
|
|
// 获取图片URL
|
const getImageUrl = (item) => {
|
if (props.imageUrlGetter) {
|
return props.imageUrlGetter(item);
|
}
|
// 默认返回占位图
|
return new URL("../../static/common/icon_loading.png", import.meta.url).href;
|
};
|
|
// 获取图片类别
|
const getImageCategories = (item) => {
|
if (props.imageCategoriesGetter) {
|
return props.imageCategoriesGetter(item);
|
}
|
return getImageCategoriesUtil(item, props.projectTypes);
|
};
|
|
// 获取图片拆分类型文本
|
const getImageSplitTypeText = (item) => {
|
return getImageSplitTypeForTooltip(item, props.selectedSplit);
|
};
|
|
// 处理图片选择
|
const handleChange = (item) => {
|
emit('selectImage', item);
|
};
|
|
// 处理图片双击
|
const handleDetail = (item) => {
|
emit('openImage', item);
|
};
|
|
// 处理分页大小改变
|
const handleSizeChange = (val) => {
|
pageSizeValue.value = val;
|
currentPageValue.value = 1;
|
emit('update:pageSize', val);
|
emit('update:currentPage', 1);
|
};
|
|
// 处理页码改变
|
const handlePageChange = (page) => {
|
currentPageValue.value = page;
|
emit('update:currentPage', page);
|
// 滚动到顶部
|
const contentEl = document.querySelector('.image-grid-container .cell-box');
|
if (contentEl) {
|
contentEl.scrollTop = 0;
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.image-grid-container {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.cell-box {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, 120px);
|
gap: 12px;
|
flex: 1;
|
overflow-y: auto;
|
padding: 12px;
|
align-content: start;
|
justify-content: center;
|
box-sizing: border-box;
|
|
.cell-wrapper {
|
display: flex;
|
justify-content: center;
|
}
|
|
// 响应式网格调整
|
@media (max-width: 800px) {
|
grid-template-columns: repeat(auto-fill, 110px);
|
gap: 10px;
|
padding: 10px;
|
|
.cell {
|
width: 110px;
|
height: 140px;
|
}
|
}
|
|
@media (max-width: 600px) {
|
grid-template-columns: repeat(auto-fill, 100px);
|
gap: 8px;
|
padding: 8px;
|
|
.cell {
|
width: 100px;
|
height: 130px;
|
}
|
}
|
|
.cell {
|
border-radius: 8px;
|
width: 120px;
|
height: 150px; // 固定高度
|
background: #fff;
|
display: flex;
|
flex-direction: column;
|
cursor: pointer;
|
border: 2px solid #fff;
|
box-sizing: border-box;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
|
&:hover {
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
transform: translateY(-2px);
|
}
|
|
.image-container {
|
position: relative;
|
width: 100%;
|
height: 120px;
|
border-radius: 6px 6px 0 0;
|
overflow: hidden;
|
}
|
|
.cell-img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
background: #f5f7fa;
|
background-image: url('../../static/common/icon_loading.png');
|
background-position: center;
|
background-repeat: no-repeat;
|
background-size: 40px 40px;
|
display: block;
|
transition: transform 0.2s ease;
|
}
|
|
&:hover .cell-img {
|
transform: scale(1.02);
|
}
|
|
.category-overlay {
|
position: absolute;
|
top: 4px;
|
left: 4px;
|
right: 4px;
|
z-index: 2;
|
pointer-events: none;
|
}
|
|
.cell-title {
|
font-size: 10px;
|
font-weight: 500;
|
color: #222;
|
height: 30px; // 固定标题高度
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 3px 4px;
|
box-sizing: border-box;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
line-height: 1.2;
|
text-align: center;
|
border-radius: 0 0 6px 6px;
|
}
|
}
|
|
.active {
|
border: 2px solid #2165f8;
|
position: relative;
|
|
.cell-title {
|
color: #2165f8;
|
}
|
}
|
|
.active::before {
|
position: absolute;
|
right: -4px;
|
top: -4px;
|
z-index: 2;
|
width: 16px;
|
height: 16px;
|
content: "✔";
|
font-size: 10px;
|
color: #fff;
|
background: #2165f8;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
// 分页组件样式
|
.pagination-wrapper {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 10px 0;
|
margin-top: 15px;
|
background: rgba(255, 255, 255, 0.8);
|
border-radius: 8px;
|
|
:deep(.el-pagination) {
|
font-weight: 500;
|
|
.el-pagination__total {
|
color: #606266;
|
}
|
|
.el-input__inner {
|
border-radius: 4px;
|
}
|
|
.btn-prev,
|
.btn-next,
|
.el-pager li {
|
border-radius: 4px;
|
margin: 0 2px;
|
}
|
|
.el-pager li.active {
|
background-color: #2165f8;
|
}
|
}
|
}
|
}
|
|
// tooltip 样式
|
.custom-tip-body {
|
padding: 8px;
|
|
.text {
|
margin: 4px 0;
|
font-size: 12px;
|
line-height: 1.4;
|
color: #fff;
|
word-break: break-word;
|
|
&:first-child {
|
margin-top: 0;
|
}
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
|
// 确保tooltip在最上层
|
:global(.image-grid-tooltip) {
|
z-index: 9999 !important;
|
max-width: 320px !important;
|
|
.el-tooltip__popper {
|
max-width: 320px !important;
|
}
|
}
|
</style>
|
