加分类

backup/index copy.vue

-<script setup lang="ts">
-import utils from '@/utils/utils'
-import { onUpdated, onMounted, reactive, ref } from 'vue'
-import { detectDeviceType } from './compositions/common'
-import { myFileUpload } from './compositions/fileUpload'
-import { useCropBox } from './compositions/useCropBox'
-import { onProcessing } from './compositions/process'
-
-
-const title = ref('元芒数字')
-const form = reactive({
-  source: '',
-  task_id: '',
-  file_path: '',
-  file_path_domain: '',
-  file_name: '',
-  file_size: 0,
-  crop_range: {},
-  box_range: {},
-  is_set: false,
-  sample_path: '',
-})
-const steps_active = ref(0)
-const FileSizeLimitM = 500
-const file_loading = ref(false)
-const my_file_upload = myFileUpload(FileSizeLimitM, form, file_loading)
-const upload = my_file_upload.upload
-const actionUrl = my_file_upload.actionUrl
-// 裁剪
-const videoPlayer = ref<HTMLVideoElement | null>(null)
-const canvas = ref<HTMLCanvasElement | null>(null)
-const ctx = ref<CanvasRenderingContext2D | null>(null)
-
-const cropBox = useCropBox(form, canvas, ctx)
-
-const result_loading = ref(false)
-const processing = onProcessing(form, steps_active, result_loading)
-
-
-onMounted(async () => {
-  // 检测设备类型
-  form.source = detectDeviceType();
-  // 设置页面标题
-  document.title = title.value;
-  // 生成task_id
-  form.task_id = utils.genDateTimeStr();
-  console.log('页面加载，task_id =', form.task_id);
-})
-onUpdated(() => {
-  if (steps_active.value === 0 && form.is_set && form.sample_path !== '') {
-    console.log('切换到步骤 0 时执行脚本');
-    form.task_id = utils.genDateTimeStr();
-    console.log('返回首页，task_id =', form.task_id);
-    // 显示裁剪框
-    setTimeout(() => {
-      console.log('waiting for video size...')
-      cropBox.generate_canvas();
-    }, 1000)
-  }
-})
-
-</script>
-
-
-<template>
-  <main class="home-container">
-    <!-- 标题 -->
-    <div class="title"><el-text>生成训练样本</el-text></div>
-    <div class="subtitle"><el-text>上传视频生成训练样本</el-text></div>
-    <!-- 步骤条 -->
-    <div>
-      <el-steps :active="steps_active" align-center finish-status="success">
-        <el-step title="上传视频并设置范围"/>
-        <!-- <el-step title="选取背景图"/> -->
-        <el-step title="生成样本"/>
-      </el-steps>
-    </div>
-
-    <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-desc">上传视频后，可以播放、暂停，然后点击设置，先画裁剪框，再画扫描框</el-text></div>
-        <div class="upload-div" v-loading="file_loading" v-if="!form.file_path">
-          <el-upload
-            ref="upload"
-            :show-file-list="false"
-            :limit="1"
-            drag
-            accept=".mp4"
-            :action="actionUrl"
-            :on-success="my_file_upload.handleUploadSuccess"
-            :on-exceed="my_file_upload.handleUploadExceed"
-            :on-error="my_file_upload.handleUploadError"
-            :on-remove="my_file_upload.handleRemoveFile"
-            :before-upload="my_file_upload.handleBeforeUpload"
-            :on-progress="my_file_upload.handleUploadProgress"
-            list-type="picture"
-          >
-            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-            <div class="el-upload__text">拖拽文件到这里 或 <em>浏览文件</em></div>
-            <div class="el-upload__tip" slot="tip">文件格式mp4, 大小限制{{FileSizeLimitM}}M</div>
-          </el-upload>
-        </div>
-        
-        <div class="uploaded-div" v-if="form.file_path" >
-          <div class="uploaded-file-info">
-            <video id="video-player" :src="form.file_path_domain" controls></video>
-            <canvas
-              id="crop-canvas"
-              style="background-color: rgba(255, 0, 0, 0.1); position: absolute; left: 0; z-index: -1;"
-              @mousedown="cropBox.startDrawing"
-              @mousemove="cropBox.draw"
-              @mouseup="cropBox.endDrawing"
-            >
-            </canvas>
-          </div>
-
-          <el-button color="#181818" @click="cropBox.generate_canvas">设置</el-button>
-          <el-button color="#181818" @click="cropBox.reset">重置</el-button>
-          <p>裁剪框坐标：{{ form.crop_range }}</p>
-          <p>扫描框坐标：{{ form.box_range }}</p>
-          <!-- <p>{{ form.task_id }}</p> -->
-        </div>
-        
-        <div class="button">
-          <el-button class="next" color="#181818" size="large" @click="processing.onProcess" :disabled="!form.is_set">Next</el-button>
-        </div>
-      </div>
-
-      <!-- 结果页 -->
-      <div class="report-section" v-if="steps_active === 1">
-        <div><el-text class="section-title">结果</el-text></div>
-        <div><el-text class="section-desc">下载样本</el-text></div>
-        <!-- 预览 -->
-        <div v-loading="result_loading">
-          <el-text class="progress-info-sub">
-            {{ form.sample_path}}
-          </el-text>
-        </div>
-        <!-- 按钮 -->
-        <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.downloadFile(form.sample_path)"
-            :disabled="!(form.sample_path && form.sample_path.length > 0)"
-          >Download</el-button>
-        </div>
-      </div>
-
-
-    </div>
-  </main>
-
-
-
-</template>
-
-<style lang="scss" scoped src="./index.css"></style>

src/views/sample_handle_v2/index.vue

@@ -53,7 +53,10 @@ const canvas = ref<HTMLCanvasElement | null>(null)
 const ctx = ref<CanvasRenderingContext2D | null>(null)
 const cropBox = useCropBox(form, canvas, ctx)
 // 处理
-const classes = [{value:'0',label:'0'},{value:'1',label:'1'},{value:'2',label:'2'},{value:'3',label:'3'}]
+const classes = [
+  {value:'0',label:'0'},{value:'1',label:'1'},{value:'2',label:'2'},{value:'3',label:'3'},{value:'4',label:'4'},
+  {value:'5',label:'5'},{value:'6',label:'6'},{value:'7',label:'7'},{value:'8',label:'8'},{value:'9',label:'9'},
+]
 const process_loading = ref(false)
 const result_loading = ref(false)
 const processing = onProcessing(form, steps_active, process_loading, result_loading)
@@ -269,6 +272,36 @@ const onVideoLoaded = () => {
           background-color: rgb(164, 139, 246);
         }
       }
+      .class-select-4 {
+        .el-select__wrapper{
+          background-color: rgb(243, 115, 115);
+        }
+      }
+      .class-select-5 {
+        .el-select__wrapper{
+          background-color: rgb(60, 8, 228);
+        }
+      }
+      .class-select-6 {
+        .el-select__wrapper{
+          background-color: rgb(76, 75, 81);
+        }
+      }
+      .class-select-7 {
+        .el-select__wrapper{
+          background-color: rgb(214, 47, 161);
+        }
+      }
+      .class-select-8 {
+        .el-select__wrapper{
+          background-color: rgb(48, 230, 38);
+        }
+      }
+      .class-select-9 {
+        .el-select__wrapper{
+          background-color: rgb(170, 235, 16);
+        }
+      }
     }
   }