From 54572b3c9db78d4374281087a8c66e5c3b3b6200 Mon Sep 17 00:00:00 2001
From: sd <shidong@jhsoft.cc>
Date: 星期五, 08 八月 2025 17:28:08 +0800
Subject: [PATCH] 整合文搜万物模块
---
src/pages/modelTuning/components/rightCardList.vue | 217 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 143 insertions(+), 74 deletions(-)
diff --git a/src/pages/modelTuning/components/rightCardList.vue b/src/pages/modelTuning/components/rightCardList.vue
index 0b83799..7b8ff6b 100644
--- a/src/pages/modelTuning/components/rightCardList.vue
+++ b/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" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" />
+ value-format="yyyy-MM-dd" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡" />
</el-form-item>
<!-- 鍒嗙被 -->
@@ -101,11 +104,14 @@
@status-change="handleStatusChange" @show-details="showImageDetails"
@edit-annotation="editAnnotation" @download="downloadImage"-->
<div class="gallery-section">
- <el-row :gutter="20" class="image-grid">
- <image-card v-for="(item, index) in galleryItems" :key="index" :item="item" :is-batch-mode="isBatchMode"
- @delete-details="handleDeleteDetails" @status-change="handleStatusChange"
- @card-click="handleCardClick1" @toggle-select="toggleSelect(index)" />
- </el-row>
+ <div class="image-grid" ref="imageGrid">
+ <div v-for="(item, index) in galleryItems" :key="index" class="image-card-wrapper"
+ :style="{ width: cardWidth}">
+ <image-card :item="item" :is-batch-mode="isBatchMode" @delete-details="handleDeleteDetails"
+ @status-change="handleStatusChange" @card-click="handleCardClick1"
+ @toggle-select="toggleSelect(index)" />
+ </div>
+ </div>
</div>
<!-- 鍒嗛〉缁勪欢 -->
<Pagination :total="totalCount" :current-page.sync="currentPage" :page-size.sync="pageSize"
@@ -114,6 +120,7 @@
</template>
<script>
+import _ from 'lodash'; // 鐢ㄤ簬闃叉姈
import BatchImport from './batchImport';
import imageCard from './imageCard';
import Pagination from '@/components/rightPagination';
@@ -128,6 +135,9 @@
name: 'ImageGallery',
data() {
return {
+ cardWidth: 'calc(25% - 20px)', // 榛樿4鍒楀竷灞�
+ minCardWidth: 300, // 鍗＄墖鏈�灏忓搴�
+ margin: 20, // 鍗＄墖闂磋窛
trainDialogVisible: false, // 妯″瀷璁粌寮圭獥鍙鎬�
batchLabelDialogVisible: false, // 鎵归噺鏍囨敞寮圭獥鍙鎬�
// 妯″瀷璁粌寮圭獥鏁版嵁
@@ -141,7 +151,7 @@
trainId: 0,
totalCount: 0, // 鎬绘暟鎹噺
currentPage: 1, // 褰撳墠椤电爜
- pageSize: 12, // 姣忛〉鏁伴噺
+ pageSize: 15, // 姣忛〉鏁伴噺
tableData: [], // 琛ㄦ牸鏁版嵁
// 鏄惁鎵归噺妯″紡
isBatchMode: false,
@@ -150,15 +160,15 @@
filter: {
cameraName: '',
timeRange: ['', ''],
- category: 'all'
+ category: -1
},
// 鍒嗙被閫夐」
categories: [
- { label: '鍏ㄩ儴', value: 'all' },
- { label: '姝ｇ‘', value: 'correct' },
- { label: '閿欒', value: 'incorrect' },
- { label: '涓嶇‘瀹�', value: 'unknown' }
+ { label: '鍏ㄩ儴', value: -1 },
+ { label: '姝ｇ‘', value: 1 },
+ { label: '閿欒', value: 2 },
+ { label: '涓嶇‘瀹�', value: 0 }
],
// 鍥剧墖鏁版嵁
@@ -167,8 +177,25 @@
}
},
mounted() {
+ this.calculateCardWidth();
+ // 娣诲姞闃叉姈鐨剅esize鐩戝惉
+ window.addEventListener('resize', _.debounce(this.calculateCardWidth, 100));
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.calculateCardWidth);
},
methods: {
+ // 鏂板鍗＄墖瀹藉害璁＄畻鏂规硶
+ calculateCardWidth() {
+ if (this.$refs.imageGrid) {
+ const containerWidth = this.$refs.imageGrid.clientWidth;
+ // 璁＄畻姣忚鍙互鏀剧疆鐨勫崱鐗囨暟閲�
+ const cardsPerRow = Math.floor(containerWidth / (this.minCardWidth + this.margin));
+ const n = Math.max(3, cardsPerRow); // 鑷冲皯1鍒�
+ // 璁剧疆鍗＄墖瀹藉害鍏紡
+ this.cardWidth = `calc(${100 / n}% - ${this.margin}px)`;
+ }
+ },
// 鎵撳紑瀵煎叆瀵硅瘽妗�
openImportDialog(type) {
this.$refs.batchImport.presetType = type;
@@ -182,12 +209,12 @@
let formData = new FormData();
// 2. 娣诲姞瀹為檯鏂囦欢鍐呭鍒癋ormData
files.forEach(item => {
- formData.append('file', item);
+ formData.append('file', item);
});
formData.append('tagId', this.trainId);
formData.append('status', type === 3 ? 0 : type);
-
- // console.log(formData)
+
+ // console.log(formData)
// // 妯℃嫙涓婁紶璇锋眰锛堝疄闄呭簲璋冪敤API锛�
let rspc = await uploadDataTrainTags(formData)
if (rspc && rspc.status === 200) {
@@ -250,6 +277,10 @@
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" : "",
+ searchName: this.filter.cameraName,
+ status: this.filter.category
});
if (rspc && rspc.status === 200) {
if (rspc.data.list) {
@@ -310,6 +341,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
@@ -331,10 +363,10 @@
// 澶勭悊鎼滅储
handleSearch() {
// console.log('鎵ц鎼滅储:', this.filter);
- // console.log('trainId:', this.trainId);
+ // console.log('filter:', this.filter.cameraName);
this.currentPage = 1, // 褰撳墠椤电爜
// 杩欓噷鍙互娣诲姞瀹為檯鐨勬悳绱㈤�昏緫
- this.fetchTableData({ tagId: this.trainId })
+ this.fetchTableData()
},
// 閲嶇疆绛涢�夋潯浠�
@@ -342,7 +374,7 @@
this.filter = {
cameraName: '',
timeRange: ['', ''],
- category: 'all'
+ category: -1
};
console.log('宸查噸缃瓫閫夋潯浠�');
},
@@ -422,14 +454,14 @@
openTrainDialog() {
// 姝ゅ搴旇皟鐢ˋPI鑾峰彇瀹為檯鐨勬牱鏈暟閲�
// 杩欓噷浣跨敤绀轰緥鏁版嵁
- 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: '妯″瀷璁粌涓�...' });
// 璋冪敤瀹為檯鐨勮缁傾PI
// await startModelTraining({
// positive: this.positiveCount,
@@ -437,10 +469,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 {
@@ -532,7 +565,26 @@
</script>
<style scoped>
+/* 鏂板鍥剧墖缃戞牸甯冨眬鏍峰紡 */
+.image-grid {
+ display: flex;
+ flex-wrap: wrap;
+ margin: -10px;
+ min-width: 1000px;
+ /* 璐熻竟璺濇姷娑堝寘瑁瑰厓绱犵殑杈硅窛 */
+ /* width: 100%; */
+}
+
+.image-card-wrapper {
+ margin: 10px;
+ /* 璁剧疆鍗＄墖闂磋窛 */
+ box-sizing: border-box;
+ /* transition: width 0.3s ease; */
+ /* 娣诲姞骞虫粦杩囨浮鏁堟灉 */
+}
+
.image-gallery {
+ min-width: 1265px;
background-color: #ffffff;
padding: 20px;
border-radius: 4px;
@@ -612,7 +664,6 @@
gap: 10px;
}
-/* 寮圭獥鏍峰紡 */
/* 鏍囬宸﹀榻� */
::v-deep .el-dialog__header {
text-align: left;
@@ -628,57 +679,75 @@
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 {
-.sample-count {
- padding: 8px 0;
- border-bottom: 1px solid #f0f2f5;
-}
+ /* 鎵归噺鏍囨敞寮圭獥鍐呭 */
+ .label-options {
+ display: flex;
+ flex-direction: column;
+ }
-/* 鎵归噺鏍囨敞寮圭獥鍐呭 */
-.label-options {
- display: flex;
- flex-direction: column;
-}
+ .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 {
- 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:hover {
+ border-color: #409eff;
+ color: #409eff;
+ }
-.label-option:hover {
- border-color: #409eff;
- color: #409eff;
-}
+ .label-option.active {
+ border-color: #409eff;
+ background-color: #ecf5ff;
+ 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>
\ No newline at end of file
--
Gitblit v1.8.0