BBIT-Kai
160 lines
4.2 KiB
Vue
160 lines
4.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
|
|
import { useVbenModal } from '@vben/common-ui';
|
|
|
|
import { Form, Input, InputNumber, message } from 'ant-design-vue';
|
|
|
|
import { createVideoTask } from '#/api/core/iva';
|
|
|
|
const projectName = ref('');
|
|
const year = ref<null | number>(null);
|
|
const month = ref<null | number>(null);
|
|
const day = ref<null | number>(null);
|
|
const hours = ref<null | number>(null);
|
|
const minutes = ref<null | number>(null);
|
|
const seconds = ref<null | number>(null);
|
|
const fileName = ref('');
|
|
const selectedFile = ref<File | null>(null);
|
|
const fileInputRef = ref<HTMLInputElement | null>(null);
|
|
|
|
const [Modal, modalApi] = useVbenModal({
|
|
title: '新建视频分析任务',
|
|
class: 'w-[600px]',
|
|
onCancel() {
|
|
modalApi.close();
|
|
},
|
|
onConfirm() {
|
|
if (!projectName.value || !selectedFile.value) {
|
|
message.warning('请填写项目名并选择视频文件');
|
|
}
|
|
uploadFile();
|
|
},
|
|
});
|
|
|
|
async function uploadFile() {
|
|
const formData = new FormData();
|
|
formData.append('file', selectedFile.value);
|
|
formData.append('projectName', projectName.value);
|
|
formData.append(
|
|
'projectDatetime',
|
|
`${year.value ? year.value.toString() : '2025'}-${
|
|
month.value ? month.value.toString().padStart(2, '0') : '01'
|
|
}-${day.value ? day.value.toString().padStart(2, '0') : '01'} ${
|
|
hours.value ? hours.value.toString().padStart(2, '0') : '00'
|
|
}:${minutes.value ? minutes.value.toString().padStart(2, '0') : '00'}:${
|
|
seconds.value ? seconds.value.toString().padStart(2, '0') : '00'
|
|
}`,
|
|
);
|
|
await createVideoTask(formData).then(() => {
|
|
message.success('任务创建成功，正在处理视频，请稍后刷新列表查看');
|
|
modalApi.close();
|
|
// 清空表单
|
|
projectName.value = '';
|
|
year.value = null;
|
|
month.value = null;
|
|
day.value = null;
|
|
hours.value = null;
|
|
minutes.value = null;
|
|
seconds.value = null;
|
|
fileName.value = '';
|
|
selectedFile.value = null;
|
|
});
|
|
}
|
|
|
|
function selectFile() {
|
|
fileInputRef.value?.click();
|
|
}
|
|
|
|
function handleFileChange(event: Event) {
|
|
const files = (event.target as HTMLInputElement).files;
|
|
if (files && files.length > 0) {
|
|
selectedFile.value = files[0];
|
|
fileName.value = files[0].name;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Modal>
|
|
<Form layout="vertical">
|
|
<Form.Item label="项目名*" required>
|
|
<Input v-model:value="projectName" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="日期">
|
|
<div style="display: flex; gap: 8px">
|
|
<InputNumber
|
|
v-model:value="year"
|
|
:min="1900"
|
|
:max="2100"
|
|
placeholder="年"
|
|
style="flex: 1"
|
|
/>
|
|
<InputNumber
|
|
v-model:value="month"
|
|
:min="1"
|
|
:max="12"
|
|
placeholder="月"
|
|
style="flex: 1"
|
|
/>
|
|
<InputNumber
|
|
v-model:value="day"
|
|
:min="1"
|
|
:max="31"
|
|
placeholder="日"
|
|
style="flex: 1"
|
|
/>
|
|
</div>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="时间">
|
|
<div style="display: flex; gap: 8px">
|
|
<InputNumber
|
|
v-model:value="hours"
|
|
:min="0"
|
|
:max="23"
|
|
placeholder="小时"
|
|
style="flex: 1"
|
|
/>
|
|
<InputNumber
|
|
v-model:value="minutes"
|
|
:min="0"
|
|
:max="59"
|
|
placeholder="分钟"
|
|
style="flex: 1"
|
|
/>
|
|
<InputNumber
|
|
v-model:value="seconds"
|
|
:min="0"
|
|
:max="59"
|
|
placeholder="秒"
|
|
style="flex: 1"
|
|
/>
|
|
</div>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="上传视频*" required>
|
|
<div
|
|
@click="selectFile"
|
|
style="
|
|
padding: 16px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border: 1px dashed #d9d9d9;
|
|
"
|
|
>
|
|
{{ fileName || '点击选择文件' }}
|
|
<input
|
|
type="file"
|
|
accept="video/*"
|
|
ref="fileInputRef"
|
|
@change="handleFileChange"
|
|
style="display: none"
|
|
/>
|
|
</div>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</template>
|