<template>
|
<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">
|
</div> -->
|
<el-checkbox class="checkbox-wrapper" v-if="isBatchMode" v-model="localSelected" @click.stop
|
@change="emitSelection" />
|
<!-- 图片容器 -->
|
<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 === 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" @click.stop="deleteDetails()" />
|
</div>
|
<!-- 图片信息 -->
|
<div class="image-info">
|
<div class="image-date">{{ formatStartDateTime(item.createTime) }}</div>
|
<div class="image-source">{{ item.cameraName }}</div>
|
</div>
|
|
<!-- 详细操作菜单 -->
|
<!-- <div class="detail-actions">
|
<el-button icon="el-icon-view" size="mini" @click="showDetails">查看详情</el-button>
|
<el-button icon="el-icon-edit" size="mini" @click="editAnnotation">编辑标注</el-button>
|
<el-button icon="el-icon-download" size="mini" class="download-btn"
|
@click="downloadImage">下载</el-button>
|
</div> -->
|
</div>
|
</el-col>
|
</template>
|
|
<script>
|
export default {
|
name: 'ImageCard',
|
props: {
|
item: {
|
type: Object,
|
required: true,
|
default: () => ({
|
id: '',
|
image: '',
|
date: '2025-07-01 10:00:09',
|
camera: '摄像头名称',
|
status: 'correct'
|
})
|
},
|
isBatchMode: Boolean,
|
selected: Boolean
|
},
|
data() {
|
return {
|
localSelected: this.selected,
|
isHovering: false
|
}
|
},
|
watch: {
|
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) {
|
} else {
|
this.$emit('card-click', this.item);
|
}
|
},
|
emitSelection() {
|
// console.info(this.selected)
|
this.localSelected = !this.localSelected;
|
this.$emit('toggle-select');
|
},
|
|
// 更改状态
|
changeStatus(status) {
|
if (!this.isBatchMode) {
|
this.$emit('status-change', { trainId: this.item.trainId, status });
|
}
|
},
|
|
// 删除
|
deleteDetails() {
|
this.$emit('delete-details', this.item);
|
},
|
|
// 显示详情
|
showDetails() {
|
this.$emit('show-details', this.item);
|
},
|
|
// 编辑标注
|
editAnnotation() {
|
this.$emit('edit-annotation', this.item);
|
},
|
|
// 下载图片
|
downloadImage() {
|
this.$emit('download', this.item);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.image-card-container {
|
padding-bottom: 20px;
|
}
|
|
.image-card {
|
padding: 0px;
|
border-radius: 6px;
|
overflow: hidden;
|
/* background-color: #f9fbfd; */
|
border: 1px solid #e6ebf5;
|
transition: all 0.3s ease;
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.image-card.batch-selected {
|
box-shadow: 0 0 0 2px #409eff;
|
border-color: #409eff;
|
}
|
|
.image-card:hover {
|
/* transform: translateY(-5px); */
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
|
}
|
|
.image-container {
|
position: relative;
|
padding-top: 56.25%;
|
height: 0;
|
overflow: hidden;
|
cursor: pointer;
|
border: none;
|
}
|
|
.gallery-image {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
/* object-fit: cover; */
|
transition: transform 0.3s ease;
|
}
|
|
.image-container:hover .gallery-image {
|
/* transform: scale(1.03); */
|
}
|
|
/* 图片标签样式 */
|
.tag {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
padding: 4px 10px;
|
border-radius: 20px;
|
font-size: 12px;
|
font-weight: bold;
|
/* color: white; */
|
z-index: 10;
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
}
|
|
.tag-correct {
|
background-color: #67C23A;
|
}
|
|
.tag-incorrect {
|
background-color: #F56C6C;
|
}
|
|
.tag-unknown {
|
background-color: #909399;
|
}
|
|
/* 卡片操作按钮 */
|
.card-actions-icon {
|
display: flex;
|
padding: 12px 15px;
|
justify-content: space-between;
|
/* 左右两端对齐 */
|
}
|
|
.btn-icon {
|
width: 20px;
|
height: 20px;
|
}
|
|
/* 图片信息 */
|
.image-info {
|
display: flex;
|
padding: 12px 15px;
|
background-color: #fff;
|
/* border-top: 1px solid #ebeef5; */
|
justify-content: space-between;
|
}
|
|
.image-date {
|
font-size: 14px;
|
/* color: #909399; */
|
}
|
|
.image-source {
|
font-size: 14px;
|
}
|
|
/* 详细操作菜单 */
|
.detail-actions {
|
padding: 10px 15px;
|
background-color: #f5f7fa;
|
display: flex;
|
justify-content: space-between;
|
border-top: 1px solid #e6ebf5;
|
}
|
|
.detail-actions .el-button {
|
padding: 6px 10px;
|
font-size: 12px;
|
}
|
|
.download-btn {
|
color: #409EFF;
|
border-color: #409EFF;
|
}
|
|
.checkbox-wrapper {
|
width: 18px;
|
/* height: 18px; */
|
color: #FFFFFF;
|
position: absolute;
|
/* top: 10px;
|
left: 20px; */
|
margin-top: 10px;
|
margin-left: 10px;
|
z-index: 10;
|
}
|
</style>
|
