模型训练弹窗样式调整

sd

2025-08-06 c99579517d21d72f26d980cbdc8b52c6b8545eaf

 src/pages/modelTuning/components/rightCardList.vue

@@ -3,20 +3,22 @@
        <!-- 添加导入组件 -->
        <BatchImport ref="batchImport" :show-type-selector="false" @import="handleImportFiles" />
        <!-- 模型训练弹窗 -->
        <el-dialog title="模型训练" :visible.sync="trainDialogVisible" width="372px" top="10vh">
        <el-dialog class="dialog1" title="模型训练" :visible.sync="trainDialogVisible" width="372px" top="10vh">
            <div class="info-label">样本信息</div>
            <div class="sample-info">
                <div class="info-label">样本信息</div>
                <div class="sample-count">正样本数量：{{ positiveCount }}</div>
                <div class="sample-count">负样本数量：{{ negativeCount }}</div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="trainDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="startTraining">开始训练</el-button>
                <el-button type="primary" @click="startTraining">
                    <i class="el-icon-time"></i>
                    开始训练</el-button>
            </div>
        </el-dialog>

        <!-- 批量标注弹窗 -->
        <el-dialog title="批量标注" :visible.sync="batchLabelDialogVisible" width="472px" top="10vh">
        <el-dialog class="dialog2" title="批量标注" :visible.sync="batchLabelDialogVisible" width="472px" top="10vh">
            <div class="label-options">
                <div class="label-option" :class="{ active: batchLabelStatus === 1 }" @click="batchLabelStatus = 1">
                    正确
@@ -45,7 +47,8 @@
                <!-- 选择时段 -->
                <el-form-item label="选择时段">
                    <el-date-picker style="width: 256px;" v-model="filter.timeRange" type="daterange"
                        value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                        value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" />
                </el-form-item>

                <!-- 分类 -->
@@ -250,8 +253,8 @@
                tagId: this.trainId,
                page: this.currentPage,
                pageSize: this.pageSize,
                startTime: this.filter.timeRange[0]?this.filter.timeRange[0]+" 00:00:00":"",
                endTime: this.filter.timeRange[1]?this.filter.timeRange[1]+" 23:23:59":"",
                startTime: this.filter.timeRange[0] ? this.filter.timeRange[0] + " 00:00:00" : "",
                endTime: this.filter.timeRange[1] ? this.filter.timeRange[1] + " 23:23:59" : "",
                searchName: this.filter.cameraName,
                status: this.filter.category
            });
@@ -314,7 +317,7 @@
                    type: 'success',
                    message: '成功'
                });
                

                // for (let i = 0; i < this.galleryItems.length; i++) {
                //     if (parm.trainId === this.galleryItems[i].trainId) {
                //         this.galleryItems[i].status = parm.status
@@ -427,14 +430,14 @@
        openTrainDialog() {
            // 此处应调用API获取实际的样本数量
            // 这里使用示例数据
            this.positiveCount = 100;
            this.negativeCount = 10;
            // this.trainDialogVisible = true;
            this.positiveCount = this.galleryItems.filter(item => item.status === 1).length;
            this.negativeCount = this.galleryItems.filter(item => item.status === 2).length;
            this.trainDialogVisible = true;
        },
        // 开始训练
        async startTraining() {
            try {
                this.$loading({ text: '模型训练中...' });
                // this.$loading({ text: '模型训练中...' });
                // 调用实际的训练API
                // await startModelTraining({
                //   positive: this.positiveCount,
@@ -442,10 +445,11 @@
                // });

                // 模拟API延迟
                await new Promise(resolve => setTimeout(resolve, 2000));
                // await new Promise(resolve => setTimeout(resolve, 2000));

                this.$message.success('模型训练已开始');
                // this.$message.success('模型训练已开始');
                this.trainDialogVisible = false;
                this.$message.error(`功能暂未实现`);
            } catch (error) {
                this.$message.error(`训练失败: ${error.message}`);
            } finally {
@@ -617,7 +621,6 @@
    gap: 10px;
}

/* 弹窗样式 */
/* 标题左对齐 */
::v-deep .el-dialog__header {
    text-align: left;
@@ -633,57 +636,74 @@
    padding-bottom: 15px;
}

/* 模型训练弹窗内容 */
.sample-info {
    padding: 20px;
/* 模型训练弹窗样式 */
.dialog1 {
    .info-label {
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 15px;
        color: black;
        text-align: left;
    }

    .sample-info {
        display: flex;
        justify-content: space-between;
        /* padding: 0 10px; */
        margin-bottom: 20px;
    }

    .sample-count {
        /* font-weight: 600; */
        font-size: 15px;
        color: #333;
    }

    .dialog-footer {
        display: flex;
        justify-content: flex-end;
        padding: 10px 0;
    }
}

.info-label {
    font-weight: bold;
    margin-bottom: 12px;
    color: #606266;
}
/* 批量惭怍弹窗样式 */
.dialog2 {
    /* 批量标注弹窗内容 */
    .label-options {
        display: flex;
        flex-direction: column;
    }

.sample-count {
    padding: 8px 0;
    border-bottom: 1px solid #f0f2f5;
}
    .label-option {
        width: 100%;
        padding: 15px 20px;
        margin: 8px 0;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        text-align: center;
        box-sizing: border-box;
    }

/* 批量标注弹窗内容 */
.label-options {
    display: flex;
    flex-direction: column;
}
    .label-option:hover {
        border-color: #409eff;
        color: #409eff;
    }

.label-option {
    width: 100%;
    padding: 15px 20px;
    margin: 8px 0;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    box-sizing: border-box;
}
    .label-option.active {
        border-color: #409eff;
        background-color: #ecf5ff;
        color: #409eff;
    }

.label-option:hover {
    border-color: #409eff;
    color: #409eff;
}

.label-option.active {
    border-color: #409eff;
    background-color: #ecf5ff;
    color: #409eff;
}

/* 弹窗底部按钮 */
.dialog-footer {
    /* display: flex; */
    text-align: center;
    /* justify-content: space-between; */
    /* padding: 10px 20px; */
    /* border-top: 1px solid #e6ebf5; */
    /* 弹窗底部按钮 */
    .dialog-footer {
        /* display: flex; */
        text-align: center;
        /* justify-content: space-between; */
        /* padding: 10px 20px; */
        /* border-top: 1px solid #e6ebf5; */
    }
}
</style>