模型调优-左侧标签数据对接；右侧卡片数据对接。增删改功能实现。

sd

2025-08-01 ea681355a81a62a1caf4edb7bcf6c655af44f865

 src/pages/modelTuning/components/rightCardList.vue

@@ -67,23 +67,39 @@
                    @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" 
                <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="fetchTableData" />
    </div>
</template>

<script>
import imageCard from './imageCard';
import Pagination from '@/components/rightPagination';
import { getTrainTags, getTrains, updateTrainStatus, deleteTrains } from "@/api/modelTuning";
export default {
    components: {
        imageCard
        imageCard,
        Pagination,

    },
    name: 'ImageGallery',
    props: {
        trainId: {
            type: Number
        },
    },
    data() {
        return {
            totalCount: 0,     // 总数据量
            currentPage: 1,    // 当前页码
            pageSize: 10,     // 每页数量
            tableData: [],    // 表格数据
            // 是否批量模式
            isBatchMode: false,
            batchSelected: [],  // 已选择的卡片索引
@@ -105,36 +121,42 @@
            // 图片数据
            galleryItems: [
                {
                    id: 1,
                    image: "@/assets/img/样本图.png",
                    date: '2025-07-01 10:00:09',
                    camera: '大门口检测摄像头',
                    status: 'correct'
                },
                {
                    id: 2,
                    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'
                },
                {
                    id: 3,
                    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'
                },
                {
                    id: 4,
                    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'
                },
                {
                    id: 5,
                    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'
                },
                {
                    id: 6,
                    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: '大门口检测摄像头',
@@ -143,32 +165,115 @@
            ]
        }
    },
    mounted() {
        this.fastFetchTableData()
    },
    methods: {
        async fastFetchTableData() {
            let rspc = await getTrainTags();
            if (rspc && rspc.status === 200) {
                this.fetchTableData({
                    tagId: rspc.data.list[0].id,
                    page: this.currentPage,
                    limit: this.pageSize
                })
            }
        },
        // 获取表格数据方法
        async fetchTableData(params) {
            // yourApi.getData(params).then(res => {
            //     this.tableData = res.data.list
            //     this.totalCount = res.data.total
            // })
            this.galleryItems = []
            let rspc = await getTrains(params);
            if (rspc && rspc.status === 200) {
                this.galleryItems = rspc.data.list;
            }
            // console.log('trainId:', this.trainId);
            this.totalCount = 20
        },
        //删除
        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: '成功'
                    });
                    this.fetchSelectData()
                } 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({
                    tagid: this.trainId,
                    page: this.currentPage,
                    limit: this.pageSize
                })
            } else {
                this.$message({
                    type: 'error',
                    message: rspc.msg
                });

            }
        },
        //详情
        handleCardClick1() {
            console.log('执行详情');
        },
        // 处理搜索
        handleSearch() {
            console.log('执行搜索:', this.filter);
            // console.log('执行搜索:', this.filter);
            // console.log('trainId:', this.trainId);
            // 这里可以添加实际的搜索逻辑
            this.fetchTableData({ tagId: this.trainId })
        },

        // 重置筛选条件
        handleReset() {
            this.filter = {
                cameraName: '',
                timeRange: ['2025-06-22', '2025-06-28'],
                timeRange: ['', ''],
                category: 'all'
            };
            console.log('已重置筛选条件');
        },
        // 进入批量模式
        enterBatchMode() {
            this.isBatchMode = true;
            this.selectAll = false;
            this.batchSelected = [];
            // this.isBatchMode = true;
            // this.selectAll = false;
            // this.batchSelected = [];

            // 清除已选状态
            this.galleryItems.forEach(item => {
                item.selected = false;
            });
            // // 清除已选状态
            // this.galleryItems.forEach(item => {
            //     item.selected = false;
            // });
        },

        // 退出批量模式