模型调优-卡片数据增加分页；左侧标签增加筛选功能。

sd

2025-08-01 9823ceec16b88213b6b742937b3d8562961bcc0e

 src/pages/modelTuning/components/rightCardList.vue

@@ -74,14 +74,14 @@
        </div>
        <!-- 分页组件 -->
        <Pagination :total="totalCount" :current-page.sync="currentPage" :page-size.sync="pageSize"
            @pagination-change="fetchTableData" />
            @pagination-change="paginationChange" />
    </div>
</template>

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

    },
    name: 'ImageGallery',
    props: {
        trainId: {
            type: Number
        },
    },
    data() {
        return {
            pagination: {},
            trainId: null,
            totalCount: 0,     // 总数据量
            currentPage: 1,    // 当前页码
            pageSize: 12,     // 每页数量
@@ -106,7 +103,7 @@
            // 筛选条件
            filter: {
                cameraName: '',
                timeRange: ['2025-06-22', '2025-06-28'],
                timeRange: ['', ''],
                category: 'all'
            },

@@ -120,78 +117,44 @@

            // 图片数据
            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: '大门口检测摄像头',
                    status: 'incorrect'
                }
            ]
        }
    },
    mounted() {
        this.fastFetchTableData()
    },
    methods: {
        async fastFetchTableData() {
            let rspc = await getTrainTags();
            if (rspc && rspc.status === 200) {
                this.fetchTableData({
                    tagId: rspc.data.list[0].id
                })
            }
        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) {
            // yourApi.getData(params).then(res => {
            //     this.tableData = res.data.list
            //     this.totalCount = res.data.total
            // })
            console.info(this.currentPage)
            this.galleryItems = []
            params.page = this.currentPage
            params.pageSize = this.pageSize
            let rspc = await getTrains(params);
            // 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 = 20
            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) {
@@ -209,7 +172,11 @@
                        type: 'success',
                        message: '成功'
                    });
                    this.fetchSelectData()
                    // 删除成功后自动修正页码
                    if (this.galleryItems && this.galleryItems.length === 1 && this.currentPage > 1) {
                        this.currentPage -= 1
                    }
                    this.fetchTableData()
                } else {
                    this.$message({
                        type: 'error',
@@ -230,11 +197,7 @@
                    type: 'success',
                    message: '成功'
                });
                this.fetchTableData({
                    tagId: this.trainId,
                    page: this.currentPage,
                    limit: this.pageSize
                })
                this.fetchTableData()
            } else {
                this.$message({
                    type: 'error',
@@ -251,8 +214,9 @@
        handleSearch() {
            // console.log('执行搜索:', this.filter);
            // console.log('trainId:', this.trainId);
            // 这里可以添加实际的搜索逻辑
            this.fetchTableData({ tagId: this.trainId })
            this.currentPage = 1,    // 当前页码
                // 这里可以添加实际的搜索逻辑
                this.fetchTableData({ tagId: this.trainId })
        },

        // 重置筛选条件