From c99579517d21d72f26d980cbdc8b52c6b8545eaf Mon Sep 17 00:00:00 2001
From: sd <shidong@jhsoft.cc>
Date: 星期三, 06 八月 2025 10:28:40 +0800
Subject: [PATCH] 模型训练弹窗样式调整
---
src/pages/modelTuning/components/imageCard.vue | 110 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 60 insertions(+), 50 deletions(-)
diff --git a/src/pages/modelTuning/components/imageCard.vue b/src/pages/modelTuning/components/imageCard.vue
index 0ea4428..fafcde0 100644
--- a/src/pages/modelTuning/components/imageCard.vue
+++ b/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;
+ }
+ },
+ // 娣诲姞瀵筰tem.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>
\ No newline at end of file
--
Gitblit v1.8.0