Skip to content

A
aitools
Commit d42bb840 authored by Administrator's avatar Administrator
Browse files
Options

样本处理改成上传多个视频，未完成

parent 54d92562
Show whitespace changes
Inline Side-by-side
Showing with 220 additions and 258 deletions
backup/index copy.vue deleted 100644 → 0
View file @ 54d92562
<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/compositions/fileUpload.ts
View file @ d42bb840
...@@ -6,10 +6,11 @@ import { ...@@ -6,10 +6,11 @@ import {
type UploadProps, type UploadProps,
type UploadRawFile, type UploadRawFile,
type UploadFile, type UploadFile,
type UploadFiles,
} from 'element-plus' } from 'element-plus'
export const myFileUpload = (FileSizeLimitM: number, form: any, loading: any) => { export const myFileUpload = (FileSizeLimitM: number, form: any, loading: any, fileList: any) => {
// ############ 处理上传文件 begin ############# // ############ 处理上传文件 begin #############
const upload = ref<UploadInstance>() const upload = ref<UploadInstance>()
const actionUrl = ref( const actionUrl = ref(
...@@ -91,15 +92,90 @@ import { ...@@ -91,15 +92,90 @@ import {
// ############ 处理上传文件 end ############# // ############ 处理上传文件 end #############
// ############ 处理上传多个文件 begin #############
const handleChange: UploadProps['onChange'] = (file: UploadFile, files: UploadFiles) => {
// console.log('handleChange file =', file.name)
// console.log(files)
}
const handleRemoveFileMuti = (file: UploadFile, files: UploadFiles) => {
console.log('移除文件: ', file.name)
console.log('移除文件后剩下: ', files)
form.files.forEach((item: { name: string; size: number; path: string; url: string; box_range: {} }) => {
if (item.name === file.name) {
form.files.pop(item)
console.log('form.files移除:', file.name)
console.log('form.files还剩下', form.files)
}
})
if (files.length == 0) {
console.log('form.files全部移除, form.files=', form.files)
}
}
const handleUploadExceedMuti: UploadProps['onExceed'] = (files) => {
console.log('超出限制的文件：', files)
ElMessage({
message: '超出限制的文件数',
type: 'error'
})
}
const handleBeforeUploadMuti = (file: any) => {
console.log('上传文件：', file.name)
const isLimit = file.size / 1024 / 1024 <= FileSizeLimitM
if (!isLimit) {
ElMessage.error('上传文件大小不能超过 '+FileSizeLimitM+'MB!')
return false
}
}
const handleUploadMuti = () => {
// 提交上传
upload.value!.submit()
}
const handleUploadSuccessMuti = (val: Wm.UploadResult, file: UploadFile, files: UploadFiles) => {
// console.log(val)
if (val.code == 0) {
form.files.push({
name: file.name,
size: file.size,
path: val.data[0].path,
url: val.data[0].url,
box_range: {},
})
ElMessage({
message: file.name + ' 上传成功',
type: 'success'
})
console.log('上传成功(', form.files.length, '), form.files=', form.files)
} else {
ElMessage({
message: file.name + ' 上传失败：' + val.message,
type: 'error'
})
}
}
// ############ 处理上传多个文件 end #############
return { return {
loading, loading,
upload, upload,
actionUrl, actionUrl,
handleChange,
handleBeforeUpload, handleBeforeUpload,
handleUploadSuccess, handleUploadSuccess,
handleUploadExceed, handleUploadExceed,
handleUploadError, handleUploadError,
handleUploadProgress, handleUploadProgress,
handleRemoveFile, handleRemoveFile,
handleRemoveFileMuti,
handleUploadExceedMuti,
handleBeforeUploadMuti,
handleUploadMuti,
handleUploadSuccessMuti,
} }
} }
src/views/sample_handle_v2/compositions/process.ts
View file @ d42bb840
...@@ -8,8 +8,30 @@ import { ...@@ -8,8 +8,30 @@ import {
import type { Action } from 'element-plus' import type { Action } from 'element-plus'
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, fileList: any) => {
const fileToClassify = async () => {
const toSet = () => {
// console.log(form.files)
// console.log(fileList.value)
if (!form.files || form.files.length == 0) {
ElMessage({
message: '请先上传文件',
type: 'warning'
})
return
}
if (form.files.length !== fileList.value.length) {
ElMessage({
message: '请点击上传，将所有文件上传',
type: 'warning'
})
return
}
// 进入分类页
from_0_to_1();
}
const toClassify = async () => {
if (!form.file_path || form.file_path.length == 0) { if (!form.file_path || form.file_path.length == 0) {
ElMessage({ ElMessage({
message: '请先上传文件', message: '请先上传文件',
...@@ -17,8 +39,8 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any, ...@@ -17,8 +39,8 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
}) })
return return
} }
// 进入第二页 // 进入分类页
from_first_to_second(); from_1_to_2();
// 清除结果 // 清除结果
form.sample_result = { form.sample_result = {
...@@ -103,8 +125,8 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any, ...@@ -103,8 +125,8 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
if (!isAllDataClassified()) { if (!isAllDataClassified()) {
return return
} }
// 进入第3页 // 进入下载页
from_second_to_third(); from_2_to_3();
// 清除结果 // 清除结果
form.sample_path = ''; form.sample_path = '';
...@@ -153,25 +175,34 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any, ...@@ -153,25 +175,34 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
const from_first_to_second = () => { const from_0_to_1 = () => {
steps_active.value = 1 steps_active.value = 1;
} }
const back_to_first = () => { const back_to_0 = () => {
steps_active.value = 0; steps_active.value = 0;
form.task_id = utils.genDateTimeStr(); form.task_id = utils.genDateTimeStr();
console.log('返回首页，task_id =', form.task_id); console.log('返回首页，task_id =', form.task_id);
} }
const from_second_to_third = () => { const from_1_to_2 = () => {
steps_active.value = 2; steps_active.value = 2;
} }
const back_to_second = () => { const back_to_1 = () => {
steps_active.value = 1; steps_active.value = 1;
}
const from_2_to_3 = () => {
steps_active.value = 3;
}
const back_to_2 = () => {
steps_active.value = 2;
form.classes_select2 = JSON.parse(JSON.stringify(form.classes_select)); form.classes_select2 = JSON.parse(JSON.stringify(form.classes_select));
} }
function downloadFile(url: string, filename?: string) { function downloadFile(url: string, filename?: string) {
const a = document.createElement('a') const a = document.createElement('a')
a.href = url a.href = url
...@@ -210,11 +241,14 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any, ...@@ -210,11 +241,14 @@ export const onProcessing = (form: any, steps_active: any, process_loading: any,
return { return {
from_first_to_second, from_0_to_1,
back_to_first, back_to_0,
from_second_to_third, from_1_to_2,
back_to_second, back_to_1,
fileToClassify, from_2_to_3,
back_to_2,
toSet,
toClassify,
classifyToDownload, classifyToDownload,
downloadFile, downloadFile,
process_loading, process_loading,
......
src/views/sample_handle_v2/compositions/useCropBox.ts
View file @ d42bb840
...@@ -11,16 +11,16 @@ export function useCropBox(form: any, canvas: any, ctx: any) { ...@@ -11,16 +11,16 @@ export function useCropBox(form: any, canvas: any, ctx: any) {
const endY = ref(0) const endY = ref(0)
const boxes = ref<Array<{ start: number[], end: number[] }>>([]) const boxes = ref<Array<{ start: number[], end: number[] }>>([])
function generate_canvas() { function generate_canvas(idx: number) {
const el = document.getElementById('crop-canvas') as HTMLCanvasElement const el = document.getElementById('crop-canvas-'+idx) as HTMLCanvasElement
if (el) { if (el) {
canvas.value = el canvas.value = el
ctx.value = canvas.value.getContext('2d') ctx.value = canvas.value.getContext('2d')
// 设置 canvas 尺寸与视频一致 // 设置 canvas 尺寸与视频一致
const video = document.getElementById('video-player') as HTMLVideoElement const video = document.getElementById('video-player-'+idx) as HTMLVideoElement
if (video) { if (video) {
if (video.videoWidth > 0 && video.videoHeight > 0) { if (video.videoWidth > 0 && video.videoHeight > 0) {
console.log('video size =', video.videoWidth, video.videoHeight) console.log('video size =', video.videoWidth, video.videoHeight, '当前：', idx)
canvas.value.width = video.videoWidth canvas.value.width = video.videoWidth
canvas.value.height = video.videoHeight canvas.value.height = video.videoHeight
canvas.value.style.zIndex = '2' canvas.value.style.zIndex = '2'
...@@ -56,7 +56,7 @@ export function useCropBox(form: any, canvas: any, ctx: any) { ...@@ -56,7 +56,7 @@ export function useCropBox(form: any, canvas: any, ctx: any) {
drawRect(startX.value, startY.value, endX.value - startX.value, endY.value - startY.value) drawRect(startX.value, startY.value, endX.value - startX.value, endY.value - startY.value)
} }
function endDrawing() { function endDrawing(idx: number) {
if (!isDrawing.value) return if (!isDrawing.value) return
isDrawing.value = false isDrawing.value = false
boxes.value.push({ boxes.value.push({
...@@ -65,29 +65,10 @@ export function useCropBox(form: any, canvas: any, ctx: any) { ...@@ -65,29 +65,10 @@ export function useCropBox(form: any, canvas: any, ctx: any) {
}) })
clearCanvas() clearCanvas()
drawBoxes() drawBoxes()
console.log('结束绘制，终点:', endX.value, endY.value) console.log('结束绘制，终点:', endX.value, endY.value, '当前：', idx)
console.log('框', boxes.value.length, '个: ', boxes.value) console.log('框', boxes.value.length, '个: ', boxes.value, '当前：', idx)
// if (boxes.value.length === 1) {
// form.crop_range = boxes.value[0]
// }
// if (boxes.value.length === 2) {
// if (boxes.value[1].start[0] < boxes.value[0].start[0]
// || boxes.value[1].start[1] < boxes.value[0].start[1]
// || boxes.value[1].end[0] > boxes.value[0].end[0]
// || boxes.value[1].end[1] > boxes.value[0].end[1]) {
// ElMessage({
// message: '扫描框必须在裁剪框内',
// type: 'warning'
// })
// reset()
// } else {
// form.box_range = boxes.value[1]
// form.is_set = true
// }
// }
if (boxes.value.length === 1) { if (boxes.value.length === 1) {
form.box_range = boxes.value[0] form.files[idx].box_range = boxes.value[0]
form.is_set = true
} }
} }
...@@ -109,7 +90,7 @@ export function useCropBox(form: any, canvas: any, ctx: any) { ...@@ -109,7 +90,7 @@ export function useCropBox(form: any, canvas: any, ctx: any) {
ctx.value!.clearRect(0, 0, c.width, c.height) ctx.value!.clearRect(0, 0, c.width, c.height)
} }
function reset() { function reset(idx: number) {
if (boxes.value.length === 0) { if (boxes.value.length === 0) {
return return
} }
...@@ -117,10 +98,9 @@ export function useCropBox(form: any, canvas: any, ctx: any) { ...@@ -117,10 +98,9 @@ export function useCropBox(form: any, canvas: any, ctx: any) {
boxes.value.pop() boxes.value.pop()
} }
clearCanvas() clearCanvas()
form.crop_range = {} form.files[idx].box_range = {}
form.box_range = {}
form.is_set = false form.is_set = false
console.log('重置绘制数据') console.log('重置绘制数据', idx)
} }
return { return {
......
src/views/sample_handle_v2/index.css
View file @ d42bb840
...@@ -64,6 +64,19 @@ ...@@ -64,6 +64,19 @@
/* border: 2px dashed #dddfe5; */ /* border: 2px dashed #dddfe5; */
border-radius: 4px; border-radius: 4px;
} }
/* 按钮 */
.button {
display: flex;
flex-direction: column;
align-items: flex-start;
.next {
align-self: flex-end;
}
}
}
/* 设置页 */
.set-section {
/* 已上传文件 */ /* 已上传文件 */
.uploaded-div { .uploaded-div {
margin: 20px 0; margin: 20px 0;
...@@ -78,12 +91,11 @@ ...@@ -78,12 +91,11 @@
} }
/* 按钮 */ /* 按钮 */
.button { .button {
margin: 20px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: row; /* 修改为行排列 */
align-items: flex-start; justify-content: space-between; /* 使按钮两端对齐 */
.next { align-items: center; /* 垂直居中对齐 */
align-self: flex-end;
}
} }
} }
......
src/views/sample_handle_v2/index.vue
View file @ d42bb840
...@@ -5,6 +5,7 @@ import { detectDeviceType } from './compositions/common' ...@@ -5,6 +5,7 @@ import { detectDeviceType } from './compositions/common'
import { myFileUpload } from './compositions/fileUpload' import { myFileUpload } from './compositions/fileUpload'
import { useCropBox } from './compositions/useCropBox' import { useCropBox } from './compositions/useCropBox'
import { onProcessing } from './compositions/process' import { onProcessing } from './compositions/process'
import type { UploadUserFile } from 'element-plus'
import { import {
Check, Check,
Delete, Delete,
...@@ -14,6 +15,13 @@ import { ...@@ -14,6 +15,13 @@ import {
Star, Star,
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
interface MyUploadFile {
name: string;
size: number;
path: string;
url: string;
box_range: {};
}
const title = ref('元芒数字') const title = ref('元芒数字')
const form = reactive({ const form = reactive({
...@@ -23,6 +31,7 @@ const form = reactive({ ...@@ -23,6 +31,7 @@ const form = reactive({
file_path_domain: '', file_path_domain: '',
file_name: '', file_name: '',
file_size: 0, file_size: 0,
files: [] as MyUploadFile[], // 上传的文件列表
crop_range: {}, crop_range: {},
box_range: {}, box_range: {},
is_set: false, is_set: false,
...@@ -42,9 +51,11 @@ const form = reactive({ ...@@ -42,9 +51,11 @@ const form = reactive({
image_width: '100', image_width: '100',
}) })
const steps_active = ref(0) const steps_active = ref(0)
const FileSizeLimitM = 500 const FileSizeLimitM = 100
const FilesLimit = 5
const fileList = ref<UploadUserFile[]>([])
const file_loading = ref(false) const file_loading = ref(false)
const my_file_upload = myFileUpload(FileSizeLimitM, form, file_loading) const my_file_upload = myFileUpload(FileSizeLimitM, form, file_loading, fileList)
const upload = my_file_upload.upload const upload = my_file_upload.upload
const actionUrl = my_file_upload.actionUrl const actionUrl = my_file_upload.actionUrl
// 裁剪 // 裁剪
...@@ -56,7 +67,7 @@ const cropBox = useCropBox(form, canvas, ctx) ...@@ -56,7 +67,7 @@ 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'}]
const process_loading = ref(false) const process_loading = ref(false)
const result_loading = ref(false) const result_loading = ref(false)
const processing = onProcessing(form, steps_active, process_loading, result_loading) const processing = onProcessing(form, steps_active, process_loading, result_loading, fileList)
// 目标帧率选项 // 目标帧率选项
const fps_options = [ const fps_options = [
{value: '10', label: '10'}, {value: '10', label: '10'},
...@@ -82,9 +93,9 @@ onMounted(async () => { ...@@ -82,9 +93,9 @@ onMounted(async () => {
}) })
const onVideoLoaded = () => { const onVideoLoaded = () => {
if (steps_active.value === 0 && form.is_set && form.sample_result.root_path !== '') { if (steps_active.value === 1 && form.is_set && form.sample_result.root_path !== '') {
console.log('切换到步骤 0 视频加载完成'); console.log('切换到步骤 1 视频加载完成');
cropBox.generate_canvas(); // cropBox.generate_canvas();
} }
}; };
...@@ -99,7 +110,8 @@ const onVideoLoaded = () => { ...@@ -99,7 +110,8 @@ const onVideoLoaded = () => {
<!-- 步骤条 --> <!-- 步骤条 -->
<div> <div>
<el-steps :active="steps_active" align-center finish-status="success"> <el-steps :active="steps_active" align-center finish-status="success">
<el-step title="上传视频并设置范围"/> <el-step title="上传视频"/>
<el-step title="设置范围"/>
<el-step title="样本分类"/> <el-step title="样本分类"/>
<el-step title="下载样本"/> <el-step title="下载样本"/>
</el-steps> </el-steps>
...@@ -108,47 +120,40 @@ const onVideoLoaded = () => { ...@@ -108,47 +120,40 @@ const onVideoLoaded = () => {
<div class="content-container"> <div class="content-container">
<!-- 文件页 --> <!-- 文件页 -->
<div class="upload-section" v-if="steps_active === 0"> <div class="upload-section" v-if="steps_active === 0">
<div><el-text class="section-title">上传文件、设置范围</el-text></div> <div><el-text class="section-title">上传文件（可以上传多个）</el-text></div>
<div><el-text class="section-desc">上传视频后，可以播放、暂停，然后点击设置，先画裁剪框，再画扫描框</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"> <div class="upload-div" v-loading="file_loading" v-if="!form.file_path">
<el-upload <el-upload
v-model:file-list="fileList"
ref="upload" ref="upload"
:show-file-list="false" :show-file-list="true"
:limit="1" :limit="FilesLimit"
drag
accept=".mp4" accept=".mp4"
:action="actionUrl" :action="actionUrl"
:on-success="my_file_upload.handleUploadSuccess" :auto-upload="false"
:on-exceed="my_file_upload.handleUploadExceed" :multiple="true"
:on-change="my_file_upload.handleChange"
:on-success="my_file_upload.handleUploadSuccessMuti"
:on-exceed="my_file_upload.handleUploadExceedMuti"
:on-error="my_file_upload.handleUploadError" :on-error="my_file_upload.handleUploadError"
:on-remove="my_file_upload.handleRemoveFile" :on-remove="my_file_upload.handleRemoveFileMuti"
:before-upload="my_file_upload.handleBeforeUpload" :before-upload="my_file_upload.handleBeforeUploadMuti"
:on-progress="my_file_upload.handleUploadProgress"
list-type="picture"
> >
<el-icon class="el-icon--upload"><upload-filled /></el-icon> <template #trigger><el-button type="primary">选择文件</el-button></template>
<div class="el-upload__text">拖拽文件到这里 或 <em>浏览文件</em></div> <el-button type="success" @click="my_file_upload.handleUploadMuti" style="margin-left: 10px;">上传</el-button>
<div class="el-upload__tip" slot="tip">文件格式mp4, 大小限制{{FileSizeLimitM}}M</div> <template #tip><div class="el-upload__tip">文件格式mp4，单个限制{{FileSizeLimitM}}M，可上传{{FilesLimit}}个</div></template>
</el-upload> </el-upload>
</div> </div>
<div class="button">
<div class="uploaded-div" v-if="form.file_path" > <el-button class="next" color="#181818" size="large" @click="processing.toSet">Next</el-button>
<div class="uploaded-file-info"> </div>
<video id="video-player" :src="form.file_path_domain" controls @loadeddata="onVideoLoaded"></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> </div>
<el-button color="#181818" @click="cropBox.generate_canvas">设置</el-button> <!-- 设置页 -->
<el-button color="#181818" @click="cropBox.reset">重置</el-button> <div class="set-section" v-if="steps_active === 1">
<el-text style="color: #181818; margin-left: 10px; font-weight: bold;">目标帧率：</el-text> <div><el-text class="section-desc">逐个点击设置，画扫描框</el-text></div>
<el-select v-model="form.target_fps" placeholder="请选择" style="width: 80px"> <el-text style="color: #181818; font-weight: bold;">目标帧率：</el-text>
<el-select v-model="form.target_fps" placeholder="请选择" style="width: 80px" size="small">
<el-option <el-option
v-for="item in fps_options" v-for="item in fps_options"
:key="item.value" :key="item.value"
...@@ -156,21 +161,35 @@ const onVideoLoaded = () => { ...@@ -156,21 +161,35 @@ const onVideoLoaded = () => {
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
<!-- <p>裁剪框坐标：{{ form.crop_range }}</p> -->
<p>扫描框坐标：{{ form.box_range }}</p> <div class="uploaded-div" v-for="(file, index) in form.files" :key="index">
<!-- <p>{{ form.task_id }}</p> --> <div class="uploaded-file-info">
<video :id="'video-player-'+index" :src="file.url" controls @loadeddata="onVideoLoaded"></video>
<canvas
:id="'crop-canvas-'+index"
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(index)"
>
</canvas>
</div>
<el-button color="#181818" @click="cropBox.generate_canvas(index)">设置</el-button>
<el-button color="#181818" @click="cropBox.reset(index)">重置</el-button>
<p>扫描框坐标：{{ file.box_range }}</p>
</div> </div>
<div class="button"> <div class="button">
<el-button class="back" size="large" @click="processing.back_to_0">Back</el-button>
<el-button class="next" color="#181818" size="large" <el-button class="next" color="#181818" size="large"
@click="processing.fileToClassify" @click="processing.toClassify"
:disabled="!form.is_set">Next</el-button> :disabled="!form.is_set">Next</el-button>
</div> </div>
</div> </div>
<!-- 处理页 --> <!-- 处理页 -->
<div class="progress-section" v-if="steps_active === 1"> <div class="progress-section" v-if="steps_active === 2">
<div><el-text class="section-title">样本分类</el-text></div> <div><el-text class="section-title">样本分类</el-text></div>
<div> <div>
<el-text class="section-desc">当前fps={{ form.target_fps }}，图片显示大小：</el-text> <el-text class="section-desc">当前fps={{ form.target_fps }}，图片显示大小：</el-text>
...@@ -210,7 +229,7 @@ const onVideoLoaded = () => { ...@@ -210,7 +229,7 @@ const onVideoLoaded = () => {
<!-- <p>{{ form.classes_select }}</p> --> <!-- <p>{{ form.classes_select }}</p> -->
<!-- 按钮 --> <!-- 按钮 -->
<div class="button"> <div class="button">
<el-button class="back" size="large" @click="processing.back_to_first">Back</el-button> <el-button class="back" size="large" @click="processing.back_to_1">Back</el-button>
<el-button class="next" color="#181818" size="large" <el-button class="next" color="#181818" size="large"
@click="processing.classifyToDownload" @click="processing.classifyToDownload"
>Next</el-button> >Next</el-button>
...@@ -220,7 +239,7 @@ const onVideoLoaded = () => { ...@@ -220,7 +239,7 @@ const onVideoLoaded = () => {
<!-- 结果页 --> <!-- 结果页 -->
<div class="report-section" v-if="steps_active === 2"> <div class="report-section" v-if="steps_active === 3">
<div><el-text class="section-title">结果</el-text></div> <div><el-text class="section-title">结果</el-text></div>
<div><el-text class="section-desc">下载样本</el-text></div> <div><el-text class="section-desc">下载样本</el-text></div>
<!-- 内容 --> <!-- 内容 -->
...@@ -231,7 +250,7 @@ const onVideoLoaded = () => { ...@@ -231,7 +250,7 @@ const onVideoLoaded = () => {
</div> </div>
<!-- 按钮 --> <!-- 按钮 -->
<div class="button"> <div class="button">
<el-button class="back" size="large" @click="processing.back_to_second">Back</el-button> <el-button class="back" size="large" @click="processing.back_to_2">Back</el-button>
<el-button class="next" color="#181818" size="large" <el-button class="next" color="#181818" size="large"
@click="processing.downloadFile(form.sample_path)" @click="processing.downloadFile(form.sample_path)"
:disabled="!(form.sample_path && form.sample_path.length > 0)" :disabled="!(form.sample_path && form.sample_path.length > 0)"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment