<template>
|
<div class="image-gallery">
|
<!-- 顶部筛选区域 -->
|
<div class="filter-section">
|
<el-form :inline="true" class="filter-form">
|
<!-- 摄像机名称 -->
|
<el-form-item label="">
|
<el-input style="width: 256px;" v-model="filter.cameraName" placeholder="请输入摄像机名称" clearable />
|
</el-form-item>
|
|
<!-- 选择时段 -->
|
<el-form-item label="选择时段">
|
<el-date-picker style="width: 256px;" v-model="filter.timeRange" type="daterange"
|
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
</el-form-item>
|
|
<!-- 分类 -->
|
<el-form-item label="分类">
|
<el-select style="width: 91px;" v-model="filter.category" placeholder="全部">
|
<el-option v-for="item in categories" :key="item.value" :label="item.label"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
|
<!-- 操作按钮 -->
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-form-item>
|
|
<!-- 右侧功能按钮 -->
|
<div class="action-buttons">
|
<el-button v-if="!isBatchMode" type="primary" class="action-btn" @click="enterBatchMode">
|
批量标注
|
</el-button>
|
|
<el-dropdown>
|
<el-button type="primary" class="action-btn">
|
<i class="el-icon-download"></i> 导入
|
</el-button>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item>正样本</el-dropdown-item>
|
<el-dropdown-item>负样本</el-dropdown-item>
|
<el-dropdown-item>待标记样本</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<el-button type="primary" class="action-btn">
|
模型训练
|
</el-button>
|
</div>
|
</el-form>
|
</div>
|
|
<!-- 批量操作控制栏 -->
|
<div class="batch-controls" v-if="isBatchMode">
|
<div class="select-all">
|
<el-checkbox v-model="selectAll" @change="toggleSelectAll">全选</el-checkbox>
|
</div>
|
<!-- <div>已选择 {{ selectedCount }} 个项目</div> -->
|
<div class="batch-actions">
|
<el-button type="primary" @click="confirmBatch">确定</el-button>
|
<el-button @click="exitBatchMode">取消</el-button>
|
</div>
|
</div>
|
<!-- 图片展示区域
|
@status-change="handleStatusChange" @show-details="showImageDetails"
|
@edit-annotation="editAnnotation" @download="downloadImage"-->
|
<div class="gallery-section">
|
<el-row :gutter="20" class="image-grid">
|
<image-card v-for="(item, index) in galleryItems" :key="index" :item="item"
|
:is-batch-mode="isBatchMode"
|
@card-click="handleCardClick1" @toggle-select="toggleSelect(index)"/>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import imageCard from './imageCard';
|
export default {
|
components: {
|
imageCard
|
},
|
name: 'ImageGallery',
|
data() {
|
return {
|
// 是否批量模式
|
isBatchMode: false,
|
batchSelected: [], // 已选择的卡片索引
|
// 筛选条件
|
filter: {
|
cameraName: '',
|
timeRange: ['2025-06-22', '2025-06-28'],
|
category: 'all'
|
},
|
|
// 分类选项
|
categories: [
|
{ label: '全部', value: 'all' },
|
{ label: '正确', value: 'correct' },
|
{ label: '错误', value: 'incorrect' },
|
{ label: '不确定', value: 'unknown' }
|
],
|
|
// 图片数据
|
galleryItems: [
|
{
|
image: "@/assets/img/样本图.png",
|
date: '2025-07-01 10:00:09',
|
camera: '大门口检测摄像头',
|
status: 'correct'
|
},
|
{
|
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f7ff'/%3E%3Crect x='50' y='30' width='200' height='140' rx='5' ry='5' fill='%23d5e8ff' stroke='%23409EFF' stroke-width='1'/%3E%3Cpath d='M100,60 L200,60 M100,80 L200,80 M100,100 L200,100 M100,120 L200,120 M100,140 L200,140' stroke='%23409EFF' stroke-width='1'/%3E%3Cpath d='M80,80 L120,120 M80,120 L120,80' stroke='%23FF4D4F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E",
|
date: '2025-07-01 10:00:09',
|
camera: '大门口检测摄像头',
|
status: 'incorrect'
|
},
|
{
|
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f7ff'/%3E%3Crect x='50' y='30' width='200' height='140' rx='5' ry='5' fill='%23d5e8ff' stroke='%23409EFF' stroke-width='1'/%3E%3Cellipse cx='150' cy='100' rx='70' ry='40' stroke='%23409EFF' stroke-width='1' fill='none'/%3E%3Ccircle cx='130' cy='80' r='5' fill='%23409EFF'/%3E%3Ccircle cx='170' cy='80' r='5' fill='%23409EFF'/%3E%3Cpath d='M150,100 Q160,120 140,120' stroke='%23409EFF' stroke-width='1' fill='none'/%3E%3C/svg%3E",
|
date: '2025-07-01 10:00:09',
|
camera: '大门口检测摄像头',
|
status: 'correct'
|
},
|
{
|
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f7ff'/%3E%3Crect x='50' y='30' width='200' height='140' rx='5' ry='5' fill='%23d5e8ff' stroke='%23409EFF' stroke-width='1'/%3E%3Cpath d='M80,80 L220,80 M150,50 L150,110' stroke='%23409EFF' stroke-width='1'/%3E%3Ccircle cx='150' cy='80' r='40' stroke='%23409EFF' stroke-width='1' fill='none'/%3E%3C/svg%3E",
|
date: '2025-07-01 10:00:09',
|
camera: '大门口检测摄像头',
|
status: 'unknown'
|
},
|
{
|
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f7ff'/%3E%3Crect x='50' y='30' width='200' height='140' rx='5' ry='5' fill='%23d5e8ff' stroke='%23409EFF' stroke-width='1'/%3E%3Cpath d='M100,60 L200,60 M100,80 L200,80 M100,100 L200,100 M100,120 L200,120' stroke='%23409EFF' stroke-width='1'/%3E%3Cpath d='M120,100 A20,20 0 1,1 180,100 A20,20 0 1,1 120,100' stroke='%23409EFF' stroke-width='1' fill='none'/%3E%3C/svg%3E",
|
date: '2025-07-01 10:00:09',
|
camera: '大门口检测摄像头',
|
status: 'correct'
|
},
|
{
|
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f7ff'/%3E%3Crect x='50' y='30' width='200' height='140' rx='5' ry='5' fill='%23d5e8ff' stroke='%23409EFF' stroke-width='1'/%3E%3Crect x='70' y='60' width='60' height='40' rx='3' ry='3' fill='%23a0c8ff' stroke='%23409EFF' stroke-width='1'/%3E%3Crect x='170' y='60' width='60' height='40' rx='3' ry='3' fill='%23a0c8ff' stroke='%23409EFF' stroke-width='1'/%3E%3Crect x='120' y='120' width='60' height='20' rx='2' ry='2' fill='%23a0c8ff' stroke='%23409EFF' stroke-width='1'/%3E%3C/svg%3E",
|
date: '2025-07-01 10:00:09',
|
camera: '大门口检测摄像头',
|
status: 'incorrect'
|
}
|
]
|
}
|
},
|
methods: {
|
// 处理搜索
|
handleSearch() {
|
console.log('执行搜索:', this.filter);
|
// 这里可以添加实际的搜索逻辑
|
},
|
|
// 重置筛选条件
|
handleReset() {
|
this.filter = {
|
cameraName: '',
|
timeRange: ['2025-06-22', '2025-06-28'],
|
category: 'all'
|
};
|
console.log('已重置筛选条件');
|
},
|
// 进入批量模式
|
enterBatchMode() {
|
this.isBatchMode = true;
|
this.selectAll = false;
|
this.batchSelected = [];
|
|
// 清除已选状态
|
this.galleryItems.forEach(item => {
|
item.selected = false;
|
});
|
},
|
|
// 退出批量模式
|
exitBatchMode() {
|
this.isBatchMode = false;
|
this.selectAll = false;
|
this.batchSelected = [];
|
|
// 清除已选状态
|
this.galleryItems.forEach(item => {
|
item.selected = false;
|
});
|
},
|
toggleSelect(index) {
|
if (!this.isBatchMode) return;
|
|
const position = this.batchSelected.indexOf(index);
|
if (position === -1) {
|
this.batchSelected.push(index);
|
} else {
|
this.batchSelected.splice(position, 1);
|
}
|
this.checkAllSelected();
|
},
|
checkAllSelected() {
|
this.isAllSelected = this.batchSelected.length === this.galleryItems.length;
|
},
|
// 全选/取消全选
|
toggleSelectAll() {
|
this.galleryItems.forEach(item => {
|
item.selected = this.selectAll;
|
});
|
},
|
|
// 确认批量操作
|
confirmBatch() {
|
const selectedItems = this.galleryItems.filter(item => item.selected);
|
|
this.$message({
|
message: `已对${selectedItems.length}个项执行批量操作`,
|
type: 'success'
|
});
|
|
this.exitBatchMode();
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.image-gallery {
|
background-color: #ffffff;
|
padding: 20px;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
|
}
|
|
/* 筛选区域样式 */
|
.filter-section {
|
padding: 20px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
margin-bottom: 20px;
|
}
|
|
.filter-form {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
}
|
|
.action-buttons {
|
display: flex;
|
margin-left: auto;
|
gap: 10px;
|
margin-bottom: 20px;
|
}
|
|
.action-btn {
|
padding: 10px 20px;
|
}
|
|
::v-deep .el-form-item {
|
margin-bottom: 18px;
|
margin-right: 20px;
|
}
|
|
::v-deep .el-form-item__label {
|
font-weight: bold;
|
color: #606266;
|
}
|
|
/* 图片展示区域 */
|
.gallery-section {
|
margin-top: 20px;
|
}
|
|
.image-card {
|
margin-bottom: 20px;
|
border-radius: 4px;
|
overflow: hidden;
|
background-color: #f9fbfd;
|
border: 1px solid #e6ebf5;
|
transition: all 0.3s ease;
|
}
|
|
.batch-controls {
|
display: flex;
|
align-items: center;
|
background: #fff;
|
border-bottom: 1px solid #e6ebf5;
|
padding: 10px 20px;
|
margin-bottom: 20px;
|
border-radius: 4px;
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.select-all {
|
margin-right: 15px;
|
}
|
|
.batch-actions {
|
margin-left: 100px;
|
display: flex;
|
gap: 10px;
|
}
|
</style>
|
