<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"
|
@delete-details="handleDeleteDetails" @status-change="handleStatusChange"
|
@card-click="handleCardClick1" @toggle-select="toggleSelect(index)" />
|
</el-row>
|
</div>
|
<!-- 分页组件 -->
|
<Pagination :total="totalCount" :current-page.sync="currentPage" :page-size.sync="pageSize"
|
@pagination-change="paginationChange" />
|
</div>
|
</template>
|
|
<script>
|
import imageCard from './imageCard';
|
import Pagination from '@/components/rightPagination';
|
import { getTrains, updateTrainStatus, deleteTrains } from "@/api/modelTuning";
|
export default {
|
components: {
|
imageCard,
|
Pagination,
|
|
},
|
name: 'ImageGallery',
|
data() {
|
return {
|
pagination: {},
|
trainId: null,
|
totalCount: 0, // 总数据量
|
currentPage: 1, // 当前页码
|
pageSize: 12, // 每页数量
|
tableData: [], // 表格数据
|
// 是否批量模式
|
isBatchMode: false,
|
batchSelected: [], // 已选择的卡片索引
|
// 筛选条件
|
filter: {
|
cameraName: '',
|
timeRange: ['', ''],
|
category: 'all'
|
},
|
|
// 分类选项
|
categories: [
|
{ label: '全部', value: 'all' },
|
{ label: '正确', value: 'correct' },
|
{ label: '错误', value: 'incorrect' },
|
{ label: '不确定', value: 'unknown' }
|
],
|
|
// 图片数据
|
galleryItems: [
|
]
|
}
|
},
|
mounted() {
|
},
|
methods: {
|
async paginationChange(params) {
|
this.currentPage = params.page
|
this.pageSize = params.pageSize
|
await this.fetchTableData()
|
},
|
async changeTrainId(trainId) {
|
// console.info(trainId)
|
this.trainId = trainId
|
await this.fetchTableData()
|
},
|
// 获取表格数据方法
|
async fetchTableData(params) {
|
console.info(this.currentPage)
|
this.galleryItems = []
|
// params.tagId = this.trainId
|
let rspc = await getTrains({
|
tagId: this.trainId,
|
page: this.currentPage,
|
pageSize: this.pageSize,
|
});
|
if (rspc && rspc.status === 200) {
|
this.galleryItems = rspc.data.list;
|
}
|
// console.log('trainId:', this.trainId);
|
this.totalCount = rspc.data.pagination.total
|
// 更新分页数据前先校验当前页码
|
const totalPage = res.data.pagination.totalPage
|
const currentPage = this.currentPage > totalPage
|
? totalPage
|
: res.data.pagination.page
|
this.currentPage = currentPage,
|
this.totalPage = totalPage
|
},
|
//删除
|
async handleDeleteDetails(item) {
|
// console.log('删除', item);
|
this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
let rspc = await deleteTrains({
|
trainId: item.trainId,
|
});
|
if (rspc && rspc.status === 200) {
|
this.$message({
|
type: 'success',
|
message: '成功'
|
});
|
// 删除成功后自动修正页码
|
if (this.galleryItems && this.galleryItems.length === 1 && this.currentPage > 1) {
|
this.currentPage -= 1
|
}
|
this.fetchTableData()
|
} else {
|
this.$message({
|
type: 'error',
|
message: rspc.msg
|
});
|
|
}
|
}).catch(() => {
|
console.info("取消")
|
});
|
},
|
//修改图片状态
|
async handleStatusChange(parm) {
|
console.log('修改状态', parm);
|
let rspc = await updateTrainStatus(parm);
|
if (rspc && rspc.status === 200) {
|
this.$message({
|
type: 'success',
|
message: '成功'
|
});
|
this.fetchTableData()
|
} else {
|
this.$message({
|
type: 'error',
|
message: rspc.msg
|
});
|
|
}
|
},
|
//详情
|
handleCardClick1() {
|
console.log('执行详情');
|
},
|
// 处理搜索
|
handleSearch() {
|
// console.log('执行搜索:', this.filter);
|
// console.log('trainId:', this.trainId);
|
this.currentPage = 1, // 当前页码
|
// 这里可以添加实际的搜索逻辑
|
this.fetchTableData({ tagId: this.trainId })
|
},
|
|
// 重置筛选条件
|
handleReset() {
|
this.filter = {
|
cameraName: '',
|
timeRange: ['', ''],
|
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>
|
