增加每隔多少图片生成文件夹、批量删除

components.d.ts

@@ -8,6 +8,8 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']

src/views/sample_handle_v2/compositions/process.ts

@@ -39,6 +39,7 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
                 output_type: "dir",
                 classes_select: "",
                 target_fps: form.target_fps, // 目标帧率
+                every_x_gen_dir: form.every_x_gen_dir, // 每多少图片生成一个目录
             }
 
             process_loading.value = true;
@@ -242,6 +243,37 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
         }
     }
 
+    const onCheckedListChange = (newValue: any) => {
+        // console.log('CheckedList changed:', newValue);
+        console.log('CheckedList changed:', form.checkedList);
+    }
+
+    function deleteMutiSample() {
+        ElMessageBox.alert(`确认删除所选的这些样本吗？共${form.checkedList.length}行`, '批量删除样本', {
+            // autofocus: false,
+            confirmButtonText: '删除',
+            callback: (action: Action) => {
+                if (action === 'confirm') {
+                    form.checkedList.forEach((sample_dir: string) => {
+                        // 删除 form.sample_result.data
+                        const index = form.sample_result.data.findIndex((item: any) => item.dir_name === sample_dir);
+                        form.sample_result.data.splice(index, 1);
+                        // 删除 form.classes_select[sample_dir]
+                        delete form.classes_select[sample_dir];
+                        // 删除 form.classes_select2[sample_dir]
+                        delete form.classes_select2[sample_dir];
+                    })
+                    // 清空已选择列表
+                    form.checkedList = [];
+                    ElMessage({
+                        type: 'success',
+                        message: '删除成功'
+                    })
+                }
+            },
+        })
+    }
+
 
     return {
         from_first_to_second,
@@ -255,5 +287,7 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
         result_loading,
         deleteOneSample,
         checkSampleVideo,
+        onCheckedListChange,
+        deleteMutiSample,
     }
 }
\ No newline at end of file

src/views/sample_handle_v2/index.css

@@ -103,7 +103,7 @@
     /* 按钮 */
     .button {
       background-color: #f56c6c;;
-      margin: 20px 0;
+      margin-left: 22px;
       padding: 10px;
       display: flex;
       flex-direction: row; /* 修改为行排列 */

src/views/sample_handle_v2/index.vue

@@ -43,6 +43,10 @@ const form = reactive({
   image_width: '100',
   // 查看视频的按钮的类型
   checkClipVideoBtnType: <Record<string, string>>({}),
+  // 每多少图片生成一个目录
+  every_x_gen_dir: 10,
+  // 选中的行
+  checkedList: [] as string[],
 })
 const steps_active = ref(0)
 const FileSizeLimitM = 500
@@ -69,6 +73,11 @@ const fps_options = [
   {value: '10', label: '10'},
   {value: '25', label: '25'},
 ]
+// 每多少图片生成一个目录选项
+const every_x_gen_dir_options = [
+  {value: 10, label: '10'},
+  {value: 5, label: '5'},
+]
 // 图片显示的大小选项
 const image_width_options = [
   {value: '100', label: '100'},
@@ -159,7 +168,7 @@ const onCheckClipVideoBtnClick = (dir_name: string) => {
           <el-button color="#181818" @click="cropBox.generate_canvas">设置</el-button>
           <el-button color="#181818" @click="cropBox.reset">重置</el-button>
           <el-text style="color: #181818; margin-left: 10px; font-weight: bold;">目标帧率：</el-text>
-          <el-select v-model="form.target_fps" placeholder="请选择"  style="width: 80px">
+          <el-select v-model="form.target_fps" placeholder="请选择"  style="width: 50px" size="small">
             <el-option
               v-for="item in fps_options"
               :key="item.value"
@@ -167,6 +176,16 @@ const onCheckClipVideoBtnClick = (dir_name: string) => {
               :value="item.value"
             />
           </el-select>
+          <el-text style="color: #181818; font-weight: bold;">，每 </el-text>
+          <el-select v-model="form.every_x_gen_dir" placeholder="请选择"  style="width: 50px" size="small">
+            <el-option
+              v-for="item in every_x_gen_dir_options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-text style="color: #181818; margin-left: 10px; font-weight: bold;">张图片保存一个目录</el-text>
           <!-- <p>裁剪框坐标：{{ form.crop_range }}</p> -->
           <p>扫描框坐标：{{ form.box_range }}</p>
           <!-- <p>{{ form.task_id }}</p> -->
@@ -186,50 +205,52 @@ const onCheckClipVideoBtnClick = (dir_name: string) => {
         <div>
           <el-text class="section-desc">当前fps={{ form.target_fps }}，图片显示大小：</el-text>
           <el-select v-model="form.image_width" placeholder="请选择"  style="width: 80px" size="small">
-              <el-option
-                v-for="item in image_width_options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
+            <el-option
+              v-for="item in image_width_options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
         </div>
         <!-- 内容 -->
         <div v-loading="process_loading">
-          <div class="row" v-for="dir in form.sample_result.data">
-            <div class="images" v-for="image in dir.images">
-              <img :src="form.sample_result.root_path + dir.dir_name + '/' + form.classes_select2[dir.dir_name] + '/' + image" :width="form.image_width" />
-              <p>{{ image }}</p>
-            </div>
-            <div class="classifications">
-              <div><p style="margin-bottom: 5px;">{{ dir.dir_name }}</p></div>
-              <div>
-                <el-select v-model="form.classes_select[dir.dir_name]" 
-                  placeholder="分类" size="default" style="width: 100px;" 
-                  :class="[`class-select-${form.classes_select[dir.dir_name] || 'default'}`]"
-                >
-                  <el-option
-                    v-for="item in classes"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-                <el-button type="danger" size="default" :icon="Delete" circle @click="processing.deleteOneSample(dir.dir_name)" style="margin-left: 10px;"/>
+          <el-checkbox-group v-model="form.checkedList" @change="processing.onCheckedListChange">
+            <div class="row" v-for="dir in form.sample_result.data">
+              <el-checkbox :value="dir.dir_name" />
+              <div class="images" v-for="image in dir.images">
+                <img :src="form.sample_result.root_path + dir.dir_name + '/' + form.classes_select2[dir.dir_name] + '/' + image" :width="form.image_width" />
+                <p>{{ image }}</p>
               </div>
-              <div style="margin-top: 5px;">
-                <el-button :type="form.checkClipVideoBtnType[dir.dir_name] || 'primary'" size="small" @click="onCheckClipVideoBtnClick(dir.dir_name)">查看视频</el-button>
+              <div class="classifications">
+                <div><p style="margin-bottom: 5px;">{{ dir.dir_name }}</p></div>
+                <div>
+                  <el-select v-model="form.classes_select[dir.dir_name]" 
+                    placeholder="分类" size="default" style="width: 100px;" 
+                    :class="[`class-select-${form.classes_select[dir.dir_name] || 'default'}`]"
+                  >
+                    <el-option
+                      v-for="item in classes"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                  <el-button type="danger" size="default" :icon="Delete" circle @click="processing.deleteOneSample(dir.dir_name)" style="margin-left: 10px;"/>
+                </div>
+                <div style="margin-top: 5px;">
+                  <el-button :type="form.checkClipVideoBtnType[dir.dir_name] || 'primary'" size="small" @click="onCheckClipVideoBtnClick(dir.dir_name)">查看视频</el-button>
+                </div>
               </div>
             </div>
-          </div>
+          </el-checkbox-group>
         </div>
         <!-- <p>{{ form.classes_select }}</p> -->
         <!-- 按钮 -->
         <div class="button">
-          <el-button class="back" size="large" @click="processing.back_to_first">Back</el-button>
-          <el-button class="next" color="#181818" size="large" 
-            @click="processing.classifyToDownload"
-          >Next</el-button>
+          <el-button class="back" @click="processing.back_to_first">Back</el-button>
+          <el-button @click="processing.deleteMutiSample()" color="#181818" :disabled="form.checkedList.length==0">批量删除</el-button>
+          <el-button class="next" color="#181818" @click="processing.classifyToDownload">Next</el-button>
         </div>
       </div>