模型训练弹窗样式调整

sd

2025-08-06 c99579517d21d72f26d980cbdc8b52c6b8545eaf

 src/pages/modelTuning/components/imageCard.vue

@@ -2,36 +2,32 @@
    <el-col :xs="24" :sm="12" :md="8" :lg="6" class="image-card-container">
        <div class="image-card" :class="{ 'batch-selected': isBatchMode && selected }" @click="handleCardClick">
            <!-- 多选框 (仅在批量模式下显示) -->
            <div class="checkbox-wrapper" v-if="isBatchMode">
                <el-checkbox v-model="localSelected" @click.stop @change="emitSelection" />
            </div>
            <!-- <div class="checkbox-wrapper" v-if="isBatchMode">
            </div> -->
            <el-checkbox class="checkbox-wrapper" v-if="isBatchMode" v-model="localSelected" @click.stop
                @change="emitSelection" />
            <!-- 图片容器 -->
            <div class="image-container" >
                <!-- <img :src="item.image" class="gallery-image" alt="监控截图" /> -->
                <img src="@/assets/img/样本图.png" class="gallery-image" alt="监控截图" />

                <!-- 标注状态标签 -->
                <!-- <div :class="['tag', getTagClass(item.status)]">
          {{ getStatusText(item.status) }}
        </div> -->
            <div class="image-container">
                <!-- <img :src="item.imagePath" class="gallery-image" alt="监控截图" /> -->
                <el-image :src="item.imagePath" class="gallery-image" fit="scale-down" />
            </div>

            <!-- 卡片操作按钮 -->
            <div class="card-actions-icon">
                <div class="card-actions">
                    <el-button size="mini" plain :type="item.status === 'correct' ? 'success' : 'info'"
                        @click.stop="changeStatus('correct')">正确</el-button>
                    <el-button size="mini" plain :type="item.status === 'incorrect' ? 'danger' : 'info'"
                        @click.stop="changeStatus('incorrect')">错误</el-button>
                    <el-button size="mini" plain :type="item.status === 'unknown' ? 'warning' : 'info'"
                        @click.stop="changeStatus('unknown')">不确定</el-button>
                    <el-button size="mini" plain :type="item.status === 1 ? 'success' : 'info'"
                        @click.stop="changeStatus(1)">正确</el-button>
                    <el-button size="mini" plain :type="item.status === 2 ? 'danger' : 'info'"
                        @click.stop="changeStatus(2)">错误</el-button>
                    <el-button size="mini" plain :type="item.status === 0 ? 'warning' : 'info'"
                        @click.stop="changeStatus(0)">不确定</el-button>
                </div>
                <img src="@/assets/img/删除标签.png" class="btn-icon" />
                <img src="@/assets/img/删除标签.png" class="btn-icon" @click.stop="deleteDetails()" />
            </div>
            <!-- 图片信息 -->
            <div class="image-info">
                <div class="image-date">{{ item.date }}</div>
                <div class="image-source">{{ item.camera }}</div>
                <div class="image-date">{{ formatStartDateTime(item.createTime) }}</div>
                <div class="image-source">{{ item.cameraName }}</div>
            </div>

            <!-- 详细操作菜单 -->
@@ -70,46 +66,54 @@
        }
    },
    watch: {
        selected(newVal) {
            this.localSelected = newVal;
        selected: {
            immediate: true,
            handler(newVal) {
                this.localSelected = newVal;
            }
        },
        // 添加对item.selected的深度监听
        'item.selected': {
            immediate: true,
            handler(newVal) {
                this.localSelected = newVal;
            }
        }
    },
    methods: {
        // 格式化开始时间（保持原时间）
        formatStartDateTime(date) {
            if (!date) return null;
            const d = new Date(date);
            const pad = (num) => num.toString().padStart(2, "0");
            return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
                d.getDate()
            )} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
        },
        handleCardClick() {
            // 批量模式下点击卡片触发选择
            if (this.isBatchMode) {
                this.localSelected = !this.localSelected;
                this.emitSelection();
            } else {
                this.$emit('card-click', this.item);
            }
        },
        emitSelection() {
            // console.info(this.selected)
            this.localSelected = !this.localSelected;
            this.$emit('toggle-select');
        },
        // 获取标签类名
        getTagClass(status) {
            return {
                'correct': 'tag-correct',
                'incorrect': 'tag-incorrect',
                'unknown': 'tag-unknown'
            }[status];
        },

        // 获取状态文本
        getStatusText(status) {
            return {
                'correct': '正确',
                'incorrect': '错误',
                'unknown': '不确定'
            }[status];
        },

        // 更改状态
        changeStatus(status) {
            this.$emit('status-change', { id: this.item.id, status });
            if (!this.isBatchMode) {
                this.$emit('status-change', { trainId: this.item.trainId, status });
            }
        },

        // 删除
        deleteDetails() {
            this.$emit('delete-details', this.item);
        },

        // 显示详情
        showDetails() {
@@ -146,9 +150,10 @@
    display: flex;
    flex-direction: column;
}

.image-card.batch-selected {
  box-shadow: 0 0 0 2px #409eff;
  border-color: #409eff;
    box-shadow: 0 0 0 2px #409eff;
    border-color: #409eff;
}

.image-card:hover {
@@ -170,7 +175,7 @@
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    height: 100%;
    /* object-fit: cover; */
    transition: transform 0.3s ease;
}
@@ -254,11 +259,16 @@
    color: #409EFF;
    border-color: #409EFF;
}

.checkbox-wrapper {
  color: #FFFFFF;
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 10;
    width: 18px;
    /* height: 18px; */
    color: #FFFFFF;
    position: absolute;
    /* top: 10px;
    left: 20px; */
    margin-top: 10px;
    margin-left: 10px;
    z-index: 10;
}
</style>