增加查看视频的功能

src/views/sample_handle_v2/compositions/fileUpload.ts

@@ -70,6 +70,7 @@ import {
   const handleUploadProgress = (event: ProgressEvent, file: UploadFile) => {
     file.percentage = Math.round(event.loaded / event.total * 100)
     console.log('上传进度：', file.percentage)
+    form.file_uploading_progress = file.percentage
     file.url = '/video-icon.png'
     // 根据进度控制 loading 状态
     if (file.percentage <= 100) {

src/views/sample_handle_v2/compositions/process.ts

@@ -6,9 +6,9 @@ import {
   ElMessageBox
 } from 'element-plus'
 import type { Action } from 'element-plus'
+import { nextTick } from 'vue'
 
-
-export const onProcessing = (form: any, steps_active: any, process_loading: any, result_loading: any) => {
+export const onProcessing = (form: any, steps_active: any, process_loading: any, result_loading: any, dialogVisible: any) => {
     const fileToClassify = async () => {
         if (!form.file_path || form.file_path.length == 0) {
             ElMessage({
@@ -126,8 +126,7 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
             // 发起请求
             aitoolsService.commonApi('提交处理', 'gen_sample_from_video', param)
             .then((response) => {
-                // console.log(form)
-                console.log(`接口返回：${response}`);
+                // console.log(`接口返回：${response}`);
                 form.sample_path = response.sample_path;
                 result_loading.value = false;
             })
@@ -208,6 +207,41 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
     }
 
     
+    const checkSampleVideo = async (dir_name: string) => {
+        // 提交处理请求
+        try {
+            let param: any = {
+                task_id: form.task_id,
+                file_path: form.file_path,
+                dir_name: dir_name,
+            }
+            process_loading.value = true;
+            // 发起请求
+            const response = await aitoolsService.commonApi('提交处理', 'gen_clip_from_dirname', param);
+            console.log(`接口返回：${response}`);
+            process_loading.value = false;
+            dialogVisible.value = true;
+            // 使用 nextTick 等待 DOM 更新完成
+            await nextTick();
+            const clipVideo = document.getElementById('clip-video') as HTMLVideoElement;
+            console.log(clipVideo);
+            if (clipVideo && typeof response === 'string' && response.startsWith('http')) {
+                clipVideo.src = response;
+            } else {
+                ElMessage({
+                    message: response as string,
+                    type: 'error'
+                });
+            }
+        } catch (error: any) {
+            ElMessage({
+                message: error as string,
+                type: 'error'
+            });
+            process_loading.value = false;
+        }
+    }
+
 
     return {
         from_first_to_second,
@@ -220,5 +254,6 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
         process_loading,
         result_loading,
         deleteOneSample,
+        checkSampleVideo,
     }
 }
\ No newline at end of file

src/views/sample_handle_v2/index.vue

@@ -23,6 +23,7 @@ const form = reactive({
   file_path_domain: '',
   file_name: '',
   file_size: 0,
+  file_uploading_progress: 0,
   crop_range: {},
   box_range: {},
   is_set: false,
@@ -40,6 +41,8 @@ const form = reactive({
   target_fps: '10',
   // 图片显示的大小
   image_width: '100',
+  // 查看视频的按钮的类型
+  checkClipVideoBtnType: <Record<string, string>>({}),
 })
 const steps_active = ref(0)
 const FileSizeLimitM = 500
@@ -59,7 +62,8 @@ const classes = [
 ]
 const process_loading = ref(false)
 const result_loading = ref(false)
-const processing = onProcessing(form, steps_active, process_loading, result_loading)
+const dialogVisible = ref(false)
+const processing = onProcessing(form, steps_active, process_loading, result_loading, dialogVisible)
 // 目标帧率选项
 const fps_options = [
   {value: '10', label: '10'},
@@ -90,6 +94,10 @@ const onVideoLoaded = () => {
     cropBox.generate_canvas();
   }
 };
+const onCheckClipVideoBtnClick = (dir_name: string) => {
+  form.checkClipVideoBtnType[dir_name] = 'info';
+  processing.checkSampleVideo(dir_name);
+};
 
 </script>
 
@@ -111,7 +119,7 @@ const onVideoLoaded = () => {
     <div class="content-container">
       <!-- 文件页 -->
       <div class="upload-section" v-if="steps_active === 0">
-        <div><el-text class="section-title">上传文件、设置范围</el-text></div>
+        <div><el-text class="section-title">上传文件、设置范围（上传进度：{{ form.file_uploading_progress }}%）</el-text></div>
         <div><el-text class="section-desc">上传视频后，可以播放、暂停，然后点击设置，先画裁剪框，再画扫描框</el-text></div>
         <div class="upload-div" v-loading="file_loading" v-if="!form.file_path">
           <el-upload
@@ -194,9 +202,10 @@ const onVideoLoaded = () => {
               <p>{{ image }}</p>
             </div>
             <div class="classifications">
-              <p style="margin-bottom: 5px;">{{ dir.dir_name }}</p>
+              <div><p style="margin-bottom: 5px;">{{ dir.dir_name }}</p></div>
+              <div>
                 <el-select v-model="form.classes_select[dir.dir_name]" 
-                placeholder="分类" size="large" style="width: 100px;" 
+                  placeholder="分类" size="default" style="width: 100px;" 
                   :class="[`class-select-${form.classes_select[dir.dir_name] || 'default'}`]"
                 >
                   <el-option
@@ -206,7 +215,11 @@ const onVideoLoaded = () => {
                     :value="item.value"
                   />
                 </el-select>
-              <el-button type="danger" :icon="Delete" circle @click="processing.deleteOneSample(dir.dir_name)" style="margin-left: 10px;"/>
+                <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>
@@ -247,6 +260,9 @@ const onVideoLoaded = () => {
   </main>
 
 
+<el-dialog v-model="dialogVisible" title="视频片段（如果挡住后面的图，按这里可以移动）" draggable width="30%">
+  <video id="clip-video" controls style="width: 100%;" autoplay></video>
+</el-dialog>
 
 </template>